:root {
  --bg:#00225F;
  --bg-panel:#062C74;
  --bg-panel-2:#0B3889;
  --border:#1E4A9E;
  --accent:#3A63FF;
  --accent-dark:#1E3FD8;
  --cyan:#22D3EE;
  --lime:#C6F53D;
  --text:#F3F6FF;
  --text-muted:#A9B8DE;
  --success:#2FD6A1;
  --warn:#FFB547;
  --error:#FF5C7A;
  --white:#FFFFFF;
  --paper-soft:#F5F6F9;
  --ink:#0A1A40;
  --ink-2:#4A5878;
  --ink-3:#8792AD;
  --line:#DDE2EC;
  --line-art:#8FB0F5;
  --code-punc:#93A6D3;
  --field-cyan:rgba(34,211,238,.50);
  --field-blue:rgba(58,99,255,.72);
  --field-deep:rgba(30,63,216,.55);
  --glow-cyan:rgba(34,211,238,.26);
  --glow-blue:rgba(58,99,255,.30);
  --lime-glow:rgba(198,245,61,.55);
  --accent-shadow:rgba(58,99,255,.38);
  --shade-1:rgba(0,10,38,.22);
  --shade-2:rgba(0,10,38,.32);
  --shade-3:rgba(0,10,38,.50);
  --glass:rgba(3,27,82,.78);
  --panel-a:rgba(6,44,116,.55);
  --border-soft:rgba(30,74,158,.62);
  --ghost-line:rgba(243,246,255,.55);
  --hi-line:rgba(255,255,255,.22);
  --cyan-ring:rgba(34,211,238,.18);
  --cap-edge:rgba(255,255,255,.65);
  --paper-shadow:rgba(10,26,64,.05);
  --blue-wash:#EDF3FF;
  --mask:#000000;
  --clear:transparent;
  --grad-accent:linear-gradient(90deg,var(--accent),var(--cyan));
  --grad-neon:linear-gradient(135deg,var(--lime) 0%,var(--cyan) 26%,var(--accent) 72%,var(--accent-dark) 100%);
  --grad-btn:linear-gradient(135deg,var(--accent),var(--accent-dark));
  --grad-wash:linear-gradient(110deg,var(--blue-wash),var(--white));
  --font-display:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r-ctl:6px;
  --r-card:8px;
  --r-win:10px;
  --r-pill:999px;
  --r-dot:50%;
  --r-micro:2px;
  --r-tag:4px;
  --wrap:1440px;
  --reading:860px;
  --gutter:64px;
  --nav-h:72px;
  --shadow-paper:0 4px 20px var(--paper-shadow);
  --shadow-window:0 0 28px var(--glow-cyan),0 0 90px var(--glow-blue),0 40px 90px var(--shade-3);
  --shadow-capsule:0 0 0 1px var(--cap-edge),0 1px 2px var(--shade-1),0 12px 26px var(--shade-2),0 30px 64px var(--shade-3);
  --ease-out:cubic-bezier(.2,.75,.2,1);
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%;scroll-behavior:smooth }
html.nav-open { overflow:hidden }
body { margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale }
button,input,select,textarea { font:inherit }
button,a { -webkit-tap-highlight-color:var(--clear) }
button { cursor:pointer }
a { color:inherit;text-decoration:none }
a:hover { text-underline-offset:4px }
img,svg { vertical-align:middle;max-width:100% }
img { height:auto }
button svg,a svg { flex-shrink:0 }
[hidden] { display:none!important }
h1,h2,h3,h4 { font-family:var(--font-display);text-wrap:balance }
h1 { font-size:clamp(34px,3.4vw,48px);line-height:1.15;letter-spacing:-.02em;font-weight:900 }
h2 { font-size:clamp(24px,2.4vw,34px);line-height:1.25;letter-spacing:-.02em;font-weight:800 }
h3 { font-size:22px;line-height:1.4;letter-spacing:-.01em;font-weight:800 }
p { margin-block:0 1.2em }
h1,h2,h3 { margin-block:0 24px }
ul,ol { padding-inline-start:1.5em }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere }
pre { max-width:100%;min-width:0;overflow-x:auto;padding:24px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg);color:var(--text);font-size:14px;line-height:1.7 }
pre code { overflow-wrap:normal;white-space:pre }
:focus-visible { outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--r-ctl) }
.light :focus-visible,.soft :focus-visible { outline-color:var(--accent-dark) }
.wrap { width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter) }
.reading { width:100%;max-width:calc(var(--reading) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter) }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 }
.keep { white-space:nowrap }
.section { position:relative;padding-top:88px;padding-bottom:88px;overflow-x:clip }
.light { background:var(--white);color:var(--ink) }
.soft { background:var(--paper-soft);color:var(--ink) }
.dark { background:var(--bg);color:var(--text) }
.muted { color:var(--text-muted) }
.light .muted,.soft .muted { color:var(--ink-2) }
.section-kicker { margin-block:0 10px;font-family:var(--font-mono);font-size:12.5px;color:var(--cyan) }
.light .section-kicker,.soft .section-kicker { color:var(--accent-dark) }
.dark .section-kicker { color:var(--cyan) }
.section-intro { max-width:46em;color:var(--ink-2) }
.center { text-align:center }
.grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px }
.grid>* , .hero-grid>* , .footer-grid>* { min-width:0 }
.stack>*+* { margin-top:24px }
.link { color:var(--cyan);text-decoration:underline;text-underline-offset:4px }
.light .link,.soft .link { color:var(--accent-dark) }
.prose { min-width:0;overflow-wrap:break-word }
.prose h2,.prose h3 { scroll-margin-top:28px;margin-top:2em }
.prose a { color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px }
.dark .prose a { color:var(--cyan) }
.prose li { margin-block:8px }
.prose :not(pre)>code { padding:2px 5px;border-radius:var(--r-tag);background:var(--blue-wash);color:var(--ink) }
.prose>*,.prose div { min-width:0;max-width:100% }
.card,.panel { padding:28px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text) }
.light .card,.soft .card,.light .panel,.soft .panel { border-color:var(--line);background:var(--white);color:var(--ink);box-shadow:var(--shadow-paper) }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.card h3 { margin-bottom:12px }
.card-neon { position:relative;isolation:isolate }
.card-neon::before { content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad-accent);pointer-events:none;-webkit-mask:linear-gradient(var(--mask) 0 0) content-box,linear-gradient(var(--mask) 0 0);-webkit-mask-composite:xor;mask-composite:exclude }
.reveal { opacity:1;transform:none }
.reveal.reveal-ready { opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s var(--ease-out) }
.reveal.reveal-ready.shown { opacity:1;transform:none }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border:0;border-radius:var(--r-ctl);font-size:16px;font-weight:700;letter-spacing:-.005em;line-height:1.5;text-align:center;transition:transform .2s ease,background .2s ease;max-width:100% }
.btn svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round }
.btn:hover { transform:translateY(-1px) }
.btn:active,.btn.is-active { transform:translateY(1px) }
.btn-primary { background:var(--accent);color:var(--white);box-shadow:0 10px 28px var(--accent-shadow),inset 0 1px 0 var(--hi-line) }
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark);color:var(--white) }
.btn-ghost { border:1.5px solid var(--ghost-line);background:var(--clear);color:var(--text) }
.btn-ghost:hover { border-color:var(--text);background:var(--panel-a);color:var(--text) }
.light .btn-ghost,.soft .btn-ghost { border-color:var(--line);color:var(--accent-dark);background:var(--white) }
.light .btn-ghost:hover,.soft .btn-ghost:hover { border-color:var(--accent);background:var(--blue-wash);color:var(--accent-dark) }
.btn:disabled,.btn[aria-disabled="true"] { cursor:not-allowed;background:var(--line);color:var(--ink-2);box-shadow:none;transform:none }
.btn.is-focus { outline:2px solid var(--cyan);outline-offset:3px }
.cta { display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;animation:fadeUp .6s .5s both }

/* 页头独立宽版心，不借用正文阅读宽度。 */
.topbar { position:relative;z-index:40;background:var(--bg);color:var(--text);border-bottom:1px solid var(--border-soft) }
.topbar-in { position:relative;width:100%;max-width:min(100%,calc(1280px + var(--gutter)*2));margin-inline:auto;padding-inline:var(--gutter);height:var(--nav-h);display:flex;align-items:center;gap:24px }
.brand { display:inline-flex;align-items:center;gap:11px;flex-shrink:0 }
.brand-mark { width:32px;height:32px;display:block;flex-shrink:0 }
.brand-name { font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--text) }
.mainnav { margin-left:auto;min-width:0 }
.mainnav ul { display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px }
.mainnav a { position:relative;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:var(--r-ctl);font-size:14.5px;font-weight:500;color:var(--text-muted);white-space:nowrap }
.mainnav a svg,.drawer a svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0 }
.mainnav a:hover { color:var(--text);background:var(--panel-a) }
.mainnav a[aria-current="page"] { color:var(--text) }
.mainnav a[aria-current="page"] svg { color:var(--cyan) }
.mainnav a[aria-current="page"]::after { content:"";position:absolute;left:12px;right:12px;bottom:-16px;height:2px;border-radius:var(--r-micro);background:var(--grad-accent) }
.header-tools { display:flex;align-items:center;gap:10px;flex-shrink:0 }
.language { position:relative }
.lang { display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-left:4px;padding:0 4px 0 20px;border:0;border-left:1px solid var(--border-soft);background:var(--clear);color:var(--text);font-size:14px;white-space:nowrap }
.lang svg { width:16px;height:16px;fill:none;stroke:var(--text-muted);stroke-width:1.6 }
.lang-caret { color:var(--text-muted);font-size:12px }
.lang-short { display:none }
.lang-menu { position:absolute;right:0;top:calc(100% + 12px);min-width:190px;padding:8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);box-shadow:0 16px 36px var(--shade-2);z-index:3 }
.lang-menu a { display:flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:var(--r-ctl) }
.lang-menu a:hover,.lang-menu a[aria-current="true"] { background:var(--bg-panel-2);color:var(--text) }
.menu-toggle { display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--bg-panel);color:var(--text) }
.menu-toggle svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8 }
.drawer { display:none;position:absolute;top:100%;left:0;right:0;padding:16px var(--gutter) 24px;background:var(--bg);color:var(--text);border-bottom:1px solid var(--border);max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;z-index:2 }
.drawer ul { padding:0;margin:0;list-style:none }
.drawer a { display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 16px;border-radius:var(--r-ctl) }
.drawer a:hover,.drawer a[aria-current] { background:var(--bg-panel);color:var(--text) }
.drawer .drawer-languages { border-top:1px solid var(--border);margin-top:12px;padding-top:12px }
.nav-veil { position:fixed;inset:var(--nav-h) 0 0;border:0;background:var(--shade-3);color:var(--text);z-index:1 }

/* 已确认的首屏：三行文字、右侧代码窗、笔记本与订阅胶囊。 */
.hero { position:relative;overflow:hidden;overflow-x:clip;background:var(--bg);color:var(--text);min-height:max(740px,calc(100vh - var(--nav-h) - 40px));display:flex;align-items:center }
.hero-field { position:absolute;top:-12%;right:0;width:66%;height:124%;pointer-events:none;background:radial-gradient(30% 34% at 100% 24%,var(--field-cyan) 0%,var(--clear) 72%),radial-gradient(46% 52% at 90% 32%,var(--field-cyan) 0%,var(--clear) 70%),radial-gradient(64% 74% at 100% 44%,var(--field-blue) 0%,var(--clear) 74%),radial-gradient(50% 60% at 98% 90%,var(--field-deep) 0%,var(--clear) 72%);-webkit-mask-image:linear-gradient(to left,var(--mask) 38%,var(--clear) 100%);mask-image:linear-gradient(to left,var(--mask) 38%,var(--clear) 100%);animation:fade 1s ease-out both }
.hero-grid { position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 720px;gap:48px;align-items:center;width:100% }
.hero-copy { position:relative;z-index:3 }
.eyebrow { display:inline-flex;align-items:center;gap:10px;min-height:30px;margin:0;padding:4px 14px 4px 11px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--panel-a);font-size:13px;color:var(--text-muted);animation:fadeUp .6s .02s both }
.eyebrow-dot { width:7px;height:7px;flex-shrink:0;border-radius:var(--r-dot);background:var(--cyan);box-shadow:0 0 0 4px var(--cyan-ring) }
.hero-title { margin:26px 0 0;font-family:var(--font-display);font-weight:900;font-size:clamp(34px,3.4vw,48px);line-height:1.1;letter-spacing:-.03em;color:var(--text);text-wrap:initial }
.ln { display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.04em }
.ln-in { display:inline-block;animation:rise .8s var(--ease-out) both;white-space:nowrap }
.ln:nth-child(1) .ln-in { animation-delay:.05s }
.ln:nth-child(2) .ln-in { animation-delay:.17s }
.ln:nth-child(3) .ln-in { animation-delay:.29s }
.sep { color:var(--text-muted);font-weight:700;margin:0 .06em }
.hl { position:relative;isolation:isolate }
.hl::after { content:"";position:absolute;left:-.04em;right:-.04em;bottom:.04em;height:.17em;border-radius:var(--r-micro);background:var(--grad-accent);z-index:-1;transform-origin:left center;animation:bar .5s .62s var(--ease-out) both }
.prompt { display:inline-flex;align-items:baseline;margin-left:.16em;color:var(--lime) }
.prompt-us { display:inline-block;width:.46em;height:.11em;margin-left:.05em;background:var(--lime) }
.hero-desc { margin:22px 0 0;max-width:31em;font-size:17px;line-height:1.72;color:var(--text-muted);animation:fadeUp .6s .36s both }
.hero-desc strong { color:var(--text);font-weight:600 }
.chips { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0;padding:0;list-style:none;animation:fadeUp .6s .44s both }
.chips-label { font-size:12.5px;color:var(--text-muted);margin-right:4px }
.chip { display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--panel-a);font-family:var(--font-mono);font-size:12.5px;color:var(--text);max-width:100%;overflow-wrap:anywhere }
.platforms { display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;padding-top:22px;border-top:1px solid var(--border-soft);max-width:560px;animation:fadeUp .6s .58s both }
.platforms-label { font-size:12.5px;color:var(--text-muted);margin-right:6px }
.pf { display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px 6px 12px;border:1px solid var(--border);border-radius:var(--r-ctl);font-size:14px;font-weight:500;color:var(--text);transition:transform .2s ease }
.pf svg { width:16px;height:16px;flex-shrink:0;color:var(--line-art) }
.pf:hover { border-color:var(--accent);background:var(--panel-a);color:var(--text);transform:translateY(-1px) }
.pf:hover svg { color:var(--cyan) }
.device { position:relative;width:720px;height:660px }
.laptop { position:absolute;right:-48px;bottom:0;width:640px;height:330px;transform:rotate(2deg);transform-origin:50% 100%;color:var(--line-art) }
.laptop svg { display:block;width:100%;height:100%;overflow:visible;animation:fade .8s .05s both }
.lp { fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke }
.lp-fine { stroke-width:1;opacity:.45 }
.lp-screen { fill:url(#lgScr) }
.lp-glow { fill:url(#lgGlow) }
.lp-row { fill:var(--line-art);opacity:.16 }
.st-panel { stop-color:var(--bg-panel) }
.st-bg { stop-color:var(--bg) }
.st-glow { stop-color:var(--cyan);stop-opacity:.38 }
.st-glow-0 { stop-color:var(--cyan);stop-opacity:0 }
.cw { position:absolute;top:0;left:110px;width:540px;border-radius:var(--r-win);background:var(--glass);color:var(--text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-window);animation:winIn .7s .08s var(--ease-out) both }
.cw::before { content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad-neon);pointer-events:none;-webkit-mask:linear-gradient(var(--mask) 0 0) content-box,linear-gradient(var(--mask) 0 0);-webkit-mask-composite:xor;mask-composite:exclude }
.cw-bar { display:flex;align-items:center;gap:8px;height:40px;padding-inline:16px;border-bottom:1px solid var(--border-soft) }
.dot { width:10px;height:10px;border-radius:var(--r-dot);flex-shrink:0 }
.d-r { background:var(--error) }
.d-y { background:var(--warn) }
.d-g { background:var(--success) }
.cw-title { margin-left:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted) }
.cw-tag { margin-left:auto;padding:1px 7px;border:1px solid var(--border);border-radius:var(--r-tag);font-family:var(--font-mono);font-size:11px;color:var(--code-punc) }
.code { margin:0;padding:18px 24px 58px;font-family:var(--font-mono);font-size:13px;line-height:21px;color:var(--code-punc);overflow-x:auto }
.cl { white-space:pre;animation:lineIn .26s ease-out both }
.cl-div { height:1px;margin-block:8px;background:var(--border-soft);animation:fade .26s both }
.code>:nth-child(1) { animation-delay:.30s }
.code>:nth-child(2) { animation-delay:.34s }
.code>:nth-child(3) { animation-delay:.38s }
.code>:nth-child(4) { animation-delay:.42s }
.code>:nth-child(5) { animation-delay:.46s }
.code>:nth-child(6) { animation-delay:.50s }
.code>:nth-child(7) { animation-delay:.54s }
.code>:nth-child(8) { animation-delay:.58s }
.code>:nth-child(9) { animation-delay:.62s }
.code>:nth-child(10) { animation-delay:.66s }
.code>:nth-child(11) { animation-delay:.70s }
.code>:nth-child(12) { animation-delay:.74s }
.code>:nth-child(13) { animation-delay:.78s }
.code>:nth-child(14) { animation-delay:.82s }
.code>:nth-child(15) { animation-delay:.86s }
.code>:nth-child(16) { animation-delay:.90s }
.code>:nth-child(17) { animation-delay:.94s }
.code .k,pre .k { color:var(--lime) }
.code .s,pre .s { color:var(--cyan) }
.code .p,pre .p { color:var(--code-punc) }
.cursor { display:inline-block;width:.62em;height:1.15em;margin-left:3px;vertical-align:-.22em;background:var(--lime);box-shadow:0 0 10px var(--lime-glow);animation:blink 1.1s steps(1,end) 1.2s infinite }
.capsule { position:absolute;left:0;top:437px;z-index:4;display:flex;align-items:center;gap:12px;width:500px;height:60px;padding:0 8px 0 22px;border-radius:var(--r-pill);background:var(--white);color:var(--ink);box-shadow:var(--shadow-capsule);animation:capIn .6s .45s var(--ease-out) both }
.cap-icon { display:grid;place-items:center;flex-shrink:0;color:var(--accent) }
.cap-icon svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round }
.cap-label { flex-shrink:0;padding-right:12px;border-right:1px solid var(--line);font-size:12.5px;line-height:1.2;color:var(--ink-2);white-space:nowrap }
.cap-url { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:14px;color:var(--ink) }
.cap-btn { flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-dot);background:var(--grad-btn);color:var(--white);box-shadow:0 0 0 3px var(--white),0 0 0 4.5px var(--lime),0 0 16px var(--lime-glow),0 6px 14px var(--accent-shadow) }
.cap-btn svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round }
.next { padding-top:56px;padding-bottom:96px }
.next h2 { margin:10px 0 0;font-size:30px }
.next p { margin:12px 0 0;color:var(--ink-2) }

.site-footer { position:relative;overflow-x:clip;padding-top:64px;padding-bottom:26px;background:var(--bg);color:var(--text);border-top:1px solid var(--border) }
.footer-grid { display:grid;grid-template-columns:1.25fr 1fr 1.25fr .7fr;gap:40px }
.footer-brand p { max-width:26em;margin-top:18px;font-size:14px;color:var(--text-muted) }
.footer-title { margin:0 0 16px;font-size:14px;font-weight:700;color:var(--text) }
.footer-links { list-style:none;margin:0;padding:0 }
.footer-links a { display:inline-block;padding-block:5px;font-size:14px;color:var(--text-muted);overflow-wrap:anywhere }
.footer-links a:hover { color:var(--text);text-decoration:underline }
.footer-bottom { display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid var(--border);margin-top:40px;padding-top:24px;font-size:13px;color:var(--text-muted) }
.footer-legal { display:flex;flex-wrap:wrap;gap:20px }

@keyframes fade { from{opacity:0}to{opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none} }
@keyframes rise { from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none} }
@keyframes bar { from{transform:scaleX(0)}to{transform:scaleX(1)} }
@keyframes winIn { from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none} }
@keyframes capIn { from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none} }
@keyframes lineIn { from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none} }
@keyframes blink { 50%{opacity:0} }

@media(min-width:1181px) and (max-width:1390px) {
  .hero-grid { grid-template-columns:minmax(0,1fr) 620px;gap:32px }
  .device { transform:scale(.88);transform-origin:left center;width:620px }
}
@media(max-width:1180px) {
  .mainnav { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .drawer:not([hidden]) { display:block }
}
@media(max-width:1180px) {
  .hero { min-height:0;padding-top:64px;padding-bottom:72px }
  .hero-grid { grid-template-columns:minmax(0,1fr);gap:56px }
  .device { width:100%;max-width:600px;height:auto;margin-inline:auto;padding-bottom:8px }
  .laptop { display:none }
  .cw { position:relative;top:auto;left:auto;width:100% }
  .capsule { position:relative;top:auto;left:auto;margin:-30px 0 0 -12px;width:min(500px,calc(100% + 12px)) }
  .hero-field { width:100%;top:30%;height:80% }
  .hero-copy { max-width:720px }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:768px) {
  :root { --gutter:28px }
  h1,.hero-title { font-size:clamp(24px,4.5vw,30px) }
  .grid { grid-template-columns:minmax(0,1fr) }
  .section { padding-top:56px;padding-bottom:56px }
}
@media(max-width:640px) {
  :root { --gutter:20px }
  .topbar-in { gap:8px }
  .brand { gap:8px }
  .brand-name { font-size:16px }
  .header-tools { margin-left:auto;gap:6px }
  .lang { padding-left:10px;margin-left:0;gap:5px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .hero { padding-top:44px;padding-bottom:56px }
  .hero-title { font-size:clamp(24px,7.4vw,30px) }
  .hero-desc { font-size:15.5px }
  .btn { min-height:48px;padding:12px 20px;font-size:15px }
  .code { padding:14px 16px 48px;font-size:11px;line-height:18px }
  .cw-title { font-size:11px;margin-left:3px }
  .cw-bar { padding-inline:12px;gap:6px }
  .cw-tag { display:none }
  .capsule { height:54px;gap:10px;padding-left:16px;margin-left:-6px;width:calc(100% + 6px) }
  .cap-label { display:none }
  .cap-url { font-size:12px }
  .cap-btn { width:40px;height:40px }
  .chips { gap:6px }
  .chip { padding-inline:9px;font-size:11px }
  .platforms { gap:8px }
  .pf { padding-inline:10px;font-size:12px;gap:6px }
  .platforms-label { display:none }
  .next h2 { font-size:24px }
  .tilt,.laptop,[data-tilt] { transform:none }
  .footer-grid { grid-template-columns:minmax(0,1fr);gap:28px }
  .card,.panel { padding:22px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important;transition:none!important }
  .reveal.reveal-ready { opacity:1;transform:none }
}