/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/gfont-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/gfont-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/static/fonts/gfont-5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/static/fonts/gfont-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/static/fonts/gfont-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/gfont-12.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/gfont-7.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/gfont-8.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/gfont-10.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/gfont-11.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/gfont-9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-12.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-7.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-8.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-10.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-11.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/gfont-9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/gfont-12.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/gfont-7.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/gfont-8.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/gfont-10.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/gfont-11.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/gfont-9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/gfont-12.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/gfont-7.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/gfont-8.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/gfont-10.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/gfont-11.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/gfont-9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/gfont-12.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/gfont-7.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/gfont-8.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/gfont-10.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/gfont-11.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/gfont-9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1b1b19;
  --muted: #77756d;
  --paper: #f3f0e9;
  --paper-light: #fbfaf7;
  --line: #d9d4ca;
  --acid: #d8ef55;
  --coral: #f16e4f;
  --blue: #7d9df4;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Manrope', 'Microsoft YaHei', sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; }
body:before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .3; background: radial-gradient(circle at 15% 15%, rgba(241,110,79,.12), transparent 28%), radial-gradient(circle at 90% 42%, rgba(125,157,244,.1), transparent 26%); }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .045; z-index: 9; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.site-header { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.04em; }
.mark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--paper-light); background: var(--ink); font-family: var(--serif); font-size: 18px; transform: rotate(-7deg); }
.header-link, .text-link { color: var(--ink); font-size: 12px; font-family: var(--mono); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.header-link:hover, .text-link:hover { color: var(--coral); }
.hero { min-height: 650px; display: grid; grid-template-columns: 1.03fr .97fr; gap: 50px; align-items: center; position: relative; }
.hero-copy { padding: 64px 0 72px; animation: rise .8s both; }
.eyebrow, .section-label { margin: 0 0 18px; font: 500 10px/1.3 var(--mono); letter-spacing: .13em; color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow-dot { width: 7px; height: 7px; display: inline-block; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 4px rgba(241,110,79,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 650px; margin-bottom: 26px; font: 650 clamp(48px, 6vw, 84px)/.98 var(--serif); letter-spacing: -.065em; }
h1 em { color: var(--coral); font-style: normal; position: relative; }
h1 em:after { content: ''; position: absolute; left: 2px; right: 0; bottom: -4px; height: 5px; background: var(--acid); transform: rotate(-2deg); z-index: -1; }
.hero-lead { max-width: 500px; color: #625f56; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin: 34px 0 40px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; border: 1px solid transparent; padding: 0 20px; font: 700 12px var(--sans); color: var(--ink); cursor: pointer; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button span { font-size: 17px; line-height: 1; }
.button:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--ink); }
.button-primary { background: var(--acid); }
.button-dark { color: var(--paper-light); background: var(--ink); }
.button-outline { background: transparent; border-color: var(--ink); }
.trust-line { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted); font: 10px var(--mono); letter-spacing: .02em; }
.trust-line i { width: 3px; height: 3px; background: var(--coral); border-radius: 50%; }
.hero-art { min-height: 500px; position: relative; display: grid; place-items: center; animation: rise .8s .13s both; }
.orbit { position: absolute; border: 1px solid rgba(27,27,25,.17); border-radius: 50%; transform: rotate(-18deg); }
.orbit-a { width: 480px; height: 250px; }
.orbit-b { width: 360px; height: 530px; transform: rotate(34deg); border-color: rgba(241,110,79,.48); }
.paper-card { width: min(340px, 76%); min-height: 414px; padding: 24px 25px; display: flex; flex-direction: column; justify-content: space-between; background: var(--paper-light); border: 1px solid var(--ink); box-shadow: 14px 16px 0 var(--blue); transform: rotate(7deg); position: relative; z-index: 1; }
.paper-top, .paper-footer { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--muted); }
.paper-title { margin: 44px 0 25px; font: 650 42px/.94 var(--serif); letter-spacing: -.07em; }
.paper-title span { color: var(--coral); }
.paper-rule { height: 1px; background: var(--ink); }
.paper-lines { display: grid; gap: 13px; padding: 25px 0 40px; }
.paper-lines span { display: block; width: 100%; height: 5px; background: #d8d5cc; }.paper-lines .short { width: 62%; background: var(--acid); }
.stamp { position: absolute; z-index: 2; right: 3%; bottom: 22%; width: 100px; height: 100px; display: grid; place-items: center; text-align: center; color: var(--coral); border: 2px solid var(--coral); border-radius: 50%; font: 500 10px/1.35 var(--mono); transform: rotate(13deg); }
.process { padding: 72px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 24px; }
.process h2, .section-heading h2, .library-section h2, .upgrade-section h2 { font: 650 38px/1.05 var(--serif); letter-spacing: -.055em; }
.process h2 { max-width: 250px; margin: 0; }
.process-step { padding-left: 20px; border-left: 1px solid var(--line); }.process-step span { color: var(--coral); font: 11px var(--mono); }.process-step h3 { margin: 34px 0 10px; font: 700 16px var(--sans); }.process-step p { max-width: 160px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.pricing { padding: 104px 0 110px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }.section-heading h2 { margin: 0; }.section-heading > p { max-width: 330px; margin: 0 0 3px; color: var(--muted); line-height: 1.7; font-size: 12px; }.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.price-card { min-height: 280px; padding: 23px; display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(251,250,247,.5); position: relative; }.price-card.featured { background: var(--acid); border-color: var(--ink); transform: translateY(-10px); box-shadow: 8px 8px 0 var(--ink); }.popular { position: absolute; right: 14px; top: 14px; font: 9px var(--mono); color: var(--coral); }.price-name { font: 700 12px var(--mono); }.price-value { margin: 35px 0 5px; font: 650 42px var(--serif); letter-spacing: -.06em; }.price-value small { font: 500 13px var(--mono); letter-spacing: 0; }.price-detail { margin-bottom: auto; color: var(--muted); font: 11px var(--mono); }.price-card .button { margin-top: 25px; width: 100%; }.price-card.featured .price-detail { color: #5d661d; }.site-footer { padding: 22px 0 32px; display: flex; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); font: 9px var(--mono); letter-spacing: .06em; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(27,27,25,.45); backdrop-filter: blur(7px); }.modal-backdrop[hidden] { display: none; }.auth-modal { width: min(430px, 100%); padding: 35px; background: var(--paper-light); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--acid); position: relative; animation: modal-in .25s both; }.modal-close { position: absolute; top: 13px; right: 17px; border: 0; background: none; font-size: 24px; cursor: pointer; }.auth-modal h2 { margin-bottom: 11px; font: 650 34px/1 var(--serif); letter-spacing: -.06em; }.modal-note { margin-bottom: 25px; color: var(--muted); font-size: 12px; line-height: 1.6; }.auth-tabs { display: flex; gap: 17px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }.auth-tabs button { border: 0; padding: 0 0 10px; background: none; color: var(--muted); cursor: pointer; font: 700 12px var(--sans); }.auth-tabs button.active { color: var(--ink); border-bottom: 2px solid var(--coral); }.auth-form { display: grid; gap: 13px; }.auth-form[hidden] { display: none; }.auth-form label { display: grid; gap: 6px; font: 10px var(--mono); color: var(--muted); }.auth-form input, .url-field input { width: 100%; border: 1px solid var(--line); outline: none; padding: 13px 14px; color: var(--ink); background: var(--paper); font: 13px var(--sans); }.auth-form input:focus, .url-field input:focus { border-color: var(--coral); }.auth-form .button { margin-top: 7px; }.form-message { min-height: 20px; margin: 13px 0 0; color: var(--coral); font-size: 12px; }
.payment-modal { width: min(430px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow-y: auto; padding: 30px; background: var(--paper-light); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--blue); position: relative; animation: modal-in .25s both; }.payment-modal h2 { margin-bottom: 10px; font: 650 34px/1 var(--serif); letter-spacing: -.06em; }.payment-plan-label, .payment-form label { display: grid; gap: 6px; color: var(--muted); font: 10px var(--mono); }.payment-plan-label select, .payment-form input { width: 100%; padding: 12px; border: 1px solid var(--line); outline: none; color: var(--ink); background: var(--paper); font: 13px var(--sans); }.payment-qr-wrap { display: grid; place-items: center; gap: 8px; margin: 18px 0 10px; }.payment-qr-wrap img { width: 220px; height: 220px; object-fit: contain; border: 1px solid var(--line); background: white; }.payment-qr-wrap p { margin: 0; color: var(--muted); font-size: 11px; }.payment-amount { display: flex; justify-content: space-between; margin: 12px 0 16px; color: var(--muted); font: 11px var(--mono); }.payment-amount strong { color: var(--coral); font-size: 20px; }.payment-form { display: grid; gap: 12px; }.payment-form .button { width: 100%; }
.app-main { padding: 65px 0 100px; }.app-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; padding-bottom: 46px; }.app-intro h1 { margin: 0; font-size: clamp(43px, 5vw, 70px); }.usage-card { width: 270px; padding: 18px; border: 1px solid var(--ink); background: var(--acid); }.usage-caption, .usage-foot { display: flex; justify-content: space-between; font: 10px var(--mono); }.usage-caption { font-weight: 500; }.usage-foot { margin-top: 11px; color: #68731c; }.usage-foot strong { color: var(--ink); font-size: 12px; }.usage-bar, .task-bar { height: 8px; margin-top: 16px; background: rgba(27,27,25,.16); }.usage-bar span, .task-bar span { display: block; width: 0; height: 100%; background: var(--ink); transition: width .4s ease; }.create-card { padding: 30px; border: 1px solid var(--ink); background: var(--paper-light); box-shadow: 8px 8px 0 var(--blue); }.create-header { display: flex; align-items: flex-start; justify-content: space-between; }.create-header h2 { margin: 0 0 27px; font: 650 31px var(--serif); letter-spacing: -.05em; }.format-badge { padding: 7px 9px; color: var(--coral); border: 1px solid var(--coral); font: 9px var(--mono); }.url-field { display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); background: var(--paper); }.url-field input { padding: 11px 2px; border: 0; background: transparent; }.url-icon { color: var(--coral); font-size: 20px; }.url-field .button { flex: 0 0 auto; }.form-hint { margin: 12px 0 0; color: var(--muted); font: 10px var(--mono); }.task-panel { margin-top: 25px; padding: 17px; background: #f0ece4; border-left: 3px solid var(--coral); }.task-top { display: flex; justify-content: space-between; font: 11px var(--mono); }.task-bar { margin-top: 11px; }.task-message { margin: 10px 0 0; color: var(--muted); font-size: 11px; }.library-section { padding: 95px 0 70px; }.section-heading.compact { align-items: center; margin-bottom: 22px; }.section-heading.compact h2 { margin: 0; }.section-heading.compact > span { color: var(--muted); font: 10px var(--mono); }.library-list { display: grid; gap: 9px; }.empty-library { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--line); color: var(--muted); }.empty-glyph { font-size: 28px; color: var(--coral); }.empty-library p { margin: 9px 0 0; font-size: 12px; }.library-item { display: grid; grid-template-columns: 55px 1fr auto; gap: 18px; align-items: center; padding: 17px 20px; border: 1px solid var(--line); background: rgba(251,250,247,.62); transition: transform .2s ease, border-color .2s ease; }.library-item:hover { transform: translateX(5px); border-color: var(--ink); }.library-number { color: var(--coral); font: 12px var(--mono); }.library-title { margin: 0 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px var(--sans); }.library-meta { margin: 0; color: var(--muted); font: 10px var(--mono); }.library-action { padding: 9px 13px; color: var(--ink); border: 1px solid var(--ink); text-decoration: none; font: 10px var(--mono); }.library-action:hover { background: var(--acid); }.upgrade-section { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px; background: var(--coral); }.upgrade-section h2 { margin: 0 0 9px; }.upgrade-section p { margin: 0; font-size: 12px; }.account-menu { display: flex; align-items: center; gap: 17px; color: var(--muted); font: 10px var(--mono); }.text-button { border: 0; padding: 0; color: var(--ink); background: none; cursor: pointer; font: 10px var(--mono); text-decoration: underline; text-underline-offset: 3px; }
@keyframes rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 850px) { .hero { grid-template-columns: 1fr; min-height: auto; }.hero-copy { padding-bottom: 30px; }.hero-art { min-height: 470px; }.process-grid { grid-template-columns: 1fr 1fr; }.process-grid > div:first-child { grid-column: span 2; }.pricing-grid { grid-template-columns: 1fr 1fr; }.app-intro { align-items: flex-start; flex-direction: column; }.usage-card { width: 100%; }.app-intro h1 br { display: none; } }
@media (max-width: 560px) { .shell { width: min(100% - 30px, 1160px); }.site-header { height: 70px; }.hero h1 { font-size: 51px; }.hero-art { min-height: 390px; }.paper-card { min-height: 340px; }.paper-title { font-size: 34px; }.orbit-a { width: 330px; }.orbit-b { width: 260px; height: 400px; }.stamp { right: 1%; bottom: 10%; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.process-grid, .pricing-grid { grid-template-columns: 1fr; }.process-grid > div:first-child { grid-column: auto; }.price-card.featured { transform: none; }.section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.create-card { padding: 20px; }.url-field { align-items: stretch; flex-direction: column; }.url-field .button { width: 100%; }.library-item { grid-template-columns: 35px 1fr; gap: 10px; }.library-action { grid-column: 2; justify-self: start; }.upgrade-section { align-items: flex-start; flex-direction: column; }.site-footer { gap: 10px; flex-direction: column; }.auth-modal { padding: 28px 22px; } }

.auth-switch { display: flex; justify-content: flex-end; margin-top: 2px; }.auth-switch button { border: 0; padding: 0; background: none; color: var(--muted); cursor: pointer; font: 12px var(--sans); text-decoration: underline; text-underline-offset: 3px; }.auth-switch button:hover { color: var(--ink); }

.remember-label { display: flex !important; align-items: center; gap: 7px; flex-direction: row !important; font: 11px var(--sans) !important; color: var(--muted) !important; cursor: pointer; }.remember-label input { width: auto !important; accent-color: var(--coral); }

.library-head-actions { display: flex; align-items: center; gap: 16px; }.library-head-actions .text-link { font: 11px var(--mono); color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }

.task-list { display: grid; gap: 10px; }.task-item { padding: 12px 14px; border: 1px solid var(--line); background: #f0ece4; }.task-item-top { display: flex; justify-content: space-between; font: 11px var(--mono); }.task-item-message { margin: 8px 0 0; color: var(--muted); font-size: 11px; }.task-item-done { border-left: 3px solid #3d6b1e; }.task-item-failed { border-left: 3px solid var(--coral); }.task-item-done .task-item-status { color: #3d6b1e; }

.promo-banner { margin: 0 0 24px; padding: 10px 14px; border: 1px solid var(--coral); color: var(--coral); background: rgba(228,87,46,.06); font: 700 12px var(--sans); }.payment-promo { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--coral); color: var(--coral); background: rgba(228,87,46,.06); font: 700 11px var(--sans); }.payment-promo[hidden] { display: none; }

.promo-strike { margin-top: 9px; color: var(--coral); font: 700 12px var(--sans); }.promo-strike strong { font-size: 18px; }

.payment-field { display: grid; gap: 6px; color: var(--muted); font: 10px var(--mono); }.payment-field-label { display: block; }.coupon-field { display: flex; align-items: center; gap: 8px; }.coupon-field input { flex: 1; min-width: 0; }.coupon-field .mini-button { flex: 0 0 auto; height: 42px; padding: 0 16px; border: 1px solid var(--ink); background: var(--acid); color: var(--ink); cursor: pointer; font: 10px var(--mono); }.coupon-field .mini-button:disabled { opacity: .45; cursor: default; }