:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-panel: #F4F0FD;
  --bg-panel-2: #EAE3FB;
  --border: #E7E2F1;
  --accent: #6416E0;
  --accent-dark: #3E0C94;
  --text: #17132A;
  --text-muted: #5E5873;
  --success: #12A150;
  --warn: #D98200;
  --error: #DF3A2C;
  --ink-deep: #2B0B5E;
  --sakura: #F79BD9;
  --peach: #FFA26B;
  --tangerine: #FF8A1F;
  --vermilion: #F0471C;
  --glass-violet: #8C4CF4;
  --glass-orchid: #C47BEA;
  --scene-top: #2B0B5E;
  --scene-mid: #4E1A55;
  --scene-bottom: #7A3622;
  --desk-top: #93502F;
  --desk-bottom: #4E2014;
  --metal-hi: #EEEAF6;
  --metal-lo: #B5ABCB;
  --band-peach: #FFD6B3;
  --white: #FFFFFF;
  --clear: transparent;
  --white-16: rgba(255,255,255,.16);
  --white-24: rgba(255,255,255,.24);
  --white-40: rgba(255,255,255,.40);
  --white-55: rgba(255,255,255,.55);
  --white-70: rgba(255,255,255,.70);
  --white-85: rgba(255,255,255,.85);
  --ink-08: rgba(43,11,94,.08);
  --ink-14: rgba(43,11,94,.14);
  --ink-22: rgba(43,11,94,.22);
  --ink-40: rgba(43,11,94,.40);
  --accent-40: rgba(100,22,224,.40);
  --shade: rgba(23,19,42,.55);
  --whisker: rgba(94,88,115,.50);
  --grad-hero: linear-gradient(128deg,var(--sakura) 0%,var(--peach) 36%,var(--tangerine) 64%,var(--vermilion) 100%);
  --grad-glass: radial-gradient(ellipse at 22% 12%,var(--white-85),var(--clear) 48%),linear-gradient(145deg,var(--glass-violet),var(--glass-orchid) 58%,var(--peach));
  --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;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 900;
  --r-sheet: 40px;
  --r-panel: 32px;
  --r-card: 24px;
  --r-small: 12px;
  --r-editor: 6px;
  --r-pill: 999px;
  --r-circle: 50%;
  --shadow-card: 0 1px 2px var(--ink-08),0 24px 48px -20px var(--ink-22);
  --shadow-btn: inset 0 1px 0 var(--white-24),0 2px 4px var(--ink-14),0 14px 28px -10px var(--accent-40);
  --shadow-soft: 0 1px 2px var(--ink-08),0 10px 24px -12px var(--ink-22);
  --nav-h: 76px;
  --wrap: 1360px;
  --reading: 840px;
  --gutter: 48px;
  --section-space: 96px;
  --ease-enter: cubic-bezier(.2,.8,.2,1);
  --duration-fast: .2s;
  --duration-reveal: .65s;
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px; }
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; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:.22em; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
img,svg { max-width:100%; vertical-align:middle; }
img { height:auto; }
svg { flex-shrink:0; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:var(--clear); }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
[hidden] { display:none !important; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-heavy); color:var(--text); text-wrap:balance; overflow-wrap:break-word; }
h1 { font-size:clamp(34px,3.35vw,48px); line-height:1.14; letter-spacing:-.012em; }
h2 { font-size:clamp(26px,2.8vw,40px); line-height:1.22; letter-spacing:-.012em; }
h3 { font-size:24px; line-height:1.35; }
p { margin:0 0 1.25em; }
strong { font-weight:var(--weight-bold); }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; font-size:.9em; }
:not(pre)>code { background:var(--bg-panel); color:var(--accent-dark); padding:.12em .35em; border-radius:var(--r-editor); }
pre { max-width:100%; min-width:0; margin:1.5rem 0; padding:24px; overflow-x:auto; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-small); font-size:14px; line-height:1.8; tab-size:2; }
pre code { white-space:pre; overflow-wrap:normal; font-size:inherit; }
hr { border:0; border-top:1px solid var(--border); margin:32px 0; }
.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); }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space); }
.section-head { max-width:760px; margin:0 auto 40px; text-align:center; }
.section-head h2 { margin:0 0 20px; }
.section-head p { color:var(--text-muted); font-size:18px; }
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid>*,.hero-grid>*,.footer-grid>*,.feature-layout>* { min-width:0; }
.nowrap { white-space:nowrap; }
.muted { color:var(--text-muted); }
.accent { color:var(--accent); }
.lead { font-size:20px; line-height:1.7; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:var(--gutter); top:8px; z-index:100; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; background:var(--accent); color:var(--white); border-radius:var(--r-pill); }
.skip-link:focus { width:auto; height:auto; padding:12px 20px; overflow:visible; clip-path:none; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:14px 28px; border:1px solid var(--clear); border-radius:var(--r-pill); font:var(--weight-heavy) 17px/1.25 var(--font-display); text-align:center; text-decoration:none; transition:transform var(--duration-fast),background-color var(--duration-fast),box-shadow var(--duration-fast); }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--accent); color:var(--white); box-shadow:var(--shadow-btn); }
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--white); }
.btn-ghost { background:var(--white); color:var(--ink-deep); box-shadow:var(--shadow-soft); }
.btn-ghost:hover { box-shadow:var(--shadow-card); }
.btn-dark { background:var(--text); color:var(--white); box-shadow:var(--shadow-card); }
.btn-outline { background:var(--bg); color:var(--accent); border-color:var(--accent); }
.btn-small { min-height:44px; padding:10px 20px; font-size:14px; }
.btn:active,.btn.is-active { transform:translateY(1px); box-shadow:var(--shadow-soft); }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel-2); color:var(--text-muted); border-color:var(--border); box-shadow:none; transform:none; }
.btn.is-focus { outline:3px solid var(--accent); outline-offset:4px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.card { min-width:0; padding:32px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); }
.card h3 { margin:0 0 16px; }
.panel { position:relative; overflow-x:clip; padding:48px; background:var(--bg-panel); color:var(--text); border-radius:var(--r-panel); }
.card p:last-child,.panel p:last-child { margin-bottom:0; }
.prose { min-width:0; }
.prose h2 { margin-top:2.2em; scroll-margin-top:32px; }
.prose h3 { margin-top:1.8em; scroll-margin-top:32px; }
.prose p,.prose li { line-height:1.9; }
.prose ul,.prose ol { padding-left:1.5em; }
.prose li+li { margin-top:.6em; }
.prose img { display:block; margin:24px auto; }
.reveal { opacity:1; }
.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(20px); }
.reveal-ready .reveal { transition:opacity var(--duration-reveal) var(--ease-enter),transform var(--duration-reveal) var(--ease-enter); }
.reveal-ready .reveal.shown { opacity:1; transform:none; }

/* 页头的独立宽版心，不与阅读版心共用。 */
#site-header,.site-top { position:relative; z-index:50; background:var(--bg); color:var(--text); }
.top-row { position:relative; width:100%; max-width:min(100%,calc(1280px + var(--gutter) * 2)); margin-inline:auto; padding-inline:var(--gutter); min-height:var(--nav-h); display:flex; align-items:center; gap:0; }
.brand { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; color:var(--text); text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand-mark { display:block; width:40px; height:40px; flex-shrink:0; }
.brand-name { font-family:var(--font-display); font-weight:var(--weight-heavy); font-size:19px; letter-spacing:-.01em; }
.main-nav { min-width:0; margin-left:64px; }
.main-nav ul { display:flex; align-items:center; list-style:none; gap:38px; margin:0; padding:0; }
.main-nav a { display:block; color:var(--text); font-size:15.5px; font-weight:var(--weight-medium); padding-block:15px; white-space:nowrap; text-decoration:none; }
.main-nav a:hover { color:var(--accent); }
.main-nav a[aria-current="page"] { font-weight:var(--weight-heavy); color:var(--ink-deep); }
.header-tools { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.language-picker { position:relative; }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:10px 16px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text); font:var(--weight-bold) 14px/1.2 var(--font-body); white-space:nowrap; }
.lang-caret { color:var(--text-muted); font-size:11px; }
.lang-short { display:none; }
.language-menu { position:absolute; top:calc(100% + 12px); right:0; width:192px; padding:8px; margin:0; list-style:none; border:1px solid var(--border); border-radius:var(--r-small); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); z-index:5; }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:var(--r-editor); color:var(--text); }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--bg-panel); color:var(--accent-dark); text-decoration:none; }
.menu-toggle { display:none; min-width:44px; min-height:44px; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--r-circle); background:var(--bg); color:var(--text); }
.menu-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.mobile-drawer { position:absolute; top:100%; left:0; right:0; padding:16px var(--gutter) 24px; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain; background:var(--bg); color:var(--text); border-top:1px solid var(--border); box-shadow:var(--shadow-card); z-index:3; }
.mobile-drawer ul { list-style:none; margin:0; padding:0; }
.mobile-drawer a { display:flex; width:100%; align-items:center; min-height:48px; padding:12px 16px; color:var(--text); }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--bg-panel); color:var(--accent-dark); text-decoration:none; border-radius:var(--r-small); }
.drawer-label { margin:16px 16px 8px; color:var(--text-muted); font-size:13px; }
.nav-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:40; border:0; background:var(--ink-40); color:var(--white); cursor:default; }
.site-footer { background:var(--bg-panel); color:var(--text); border-radius:var(--r-sheet) var(--r-sheet) 0 0; padding-top:64px; padding-bottom:28px; }
.footer-grid { display:grid; grid-template-columns:1.1fr .75fr 1.4fr .7fr; gap:40px; }
.footer-brand p { margin:20px 0 0; max-width:25em; color:var(--text-muted); font-size:14px; }
.site-footer h2 { font-size:16px; margin:0 0 18px; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin:0 0 10px; }
.site-footer a:not(.brand) { color:var(--text-muted); font-size:14px; }
.site-footer a:hover { color:var(--accent); }
.footer-bottom { margin-top:44px; padding-top:22px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between; color:var(--text-muted); font-size:13px; }
.footer-bottom p { margin:0; }

/* 已确认首屏：左侧装置，右侧关键词文案。 */
.hero { position:relative; z-index:1; overflow-x:clip; background:var(--grad-hero); color:var(--ink-deep); min-height:max(720px,calc(100svh - var(--nav-h) - var(--r-sheet))); display:grid; align-content:center; padding-top:40px; padding-bottom:calc(var(--r-sheet) + 40px); }
.hero-grid { width:100%; display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:44px; align-items:center; }
.hero-copy { position:relative; z-index:2; color:var(--ink-deep); }
.eyebrow { margin:0; display:inline-flex; align-items:center; gap:10px; padding:7px 15px 7px 11px; border-radius:var(--r-pill); background:var(--white-40); color:var(--ink-deep); border:1px solid var(--white-70); backdrop-filter:blur(10px); font-size:13.5px; font-weight:var(--weight-bold); line-height:1.2; }
.pulse { position:relative; width:9px; height:9px; border-radius:var(--r-circle); background:var(--success); color:var(--text); box-shadow:0 0 0 3px var(--white-70); flex-shrink:0; }
.hero-title { margin:20px 0 0; font-family:var(--font-display); font-weight:var(--weight-heavy); font-size:clamp(34px,3.35vw,48px); line-height:1.14; letter-spacing:-.012em; color:var(--ink-deep); }
.hl { display:block; }
.hl>span { display:inline-block; animation:rise .72s var(--ease-enter) both; }
.hl-2>span { animation-delay:.14s; }
.mk { font-style:normal; position:relative; display:inline-block; }
.mk::after { content:""; position:absolute; left:0; right:0; bottom:-.04em; height:.13em; border-radius:var(--r-pill); background:var(--accent); transform-origin:left center; animation:sweep .5s var(--ease-enter) .62s both; }
.hero-desc { margin:24px 0 0; max-width:31em; font-size:17px; line-height:1.75; color:var(--ink-deep); }
.trust { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; list-style:none; }
.trust li { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:5px 13px 5px 11px; border-radius:var(--r-pill); background:var(--white-24); color:var(--ink-deep); border:1px solid var(--white-55); font-size:13px; font-weight:var(--weight-bold); }
.trust svg { width:13px; height:13px; }
.platforms { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding-top:20px; border-top:1px solid var(--white-40); }
.pf { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 15px 9px 13px; border-radius:var(--r-pill); background:var(--white-55); color:var(--ink-deep); border:1px solid var(--white-85); backdrop-filter:blur(10px); font-size:14px; font-weight:var(--weight-bold); transition:transform var(--duration-fast),background-color var(--duration-fast); }
.pf svg { width:16px; height:16px; }
.pf:hover { background:var(--white); color:var(--ink-deep); transform:translateY(-1px); text-decoration:none; }
.device { position:relative; width:100%; aspect-ratio:780/640; container-type:inline-size; }
.dv-layer { position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.dv-scene { z-index:1; }
.dv-cat { z-index:3; pointer-events:none; }
.st-white { stop-color:var(--white); }
.st-lilac { stop-color:var(--bg-panel); }
.st-lilac-2 { stop-color:var(--bg-panel-2); }
.st-violet { stop-color:var(--glass-violet); }
.st-orchid { stop-color:var(--glass-orchid); }
.st-sakura { stop-color:var(--sakura); }
.st-peach { stop-color:var(--peach); }
.st-band { stop-color:var(--band-peach); }
.st-scene-top { stop-color:var(--scene-top); }
.st-scene-mid { stop-color:var(--scene-mid); }
.st-scene-bottom { stop-color:var(--scene-bottom); }
.st-desk-top { stop-color:var(--desk-top); }
.st-desk-bottom { stop-color:var(--desk-bottom); }
.st-metal-hi { stop-color:var(--metal-hi); }
.st-metal-lo { stop-color:var(--metal-lo); }
.a0 { stop-opacity:0; }
.a60 { stop-opacity:.6; }
.blob-shadow { fill:var(--ink-40); }
.sc-bg { fill:url(#sceneGrad); }
.sc-desk { fill:url(#deskGrad); }
.sc-bar { fill:var(--peach); opacity:.16; }
.sc-bok-o { fill:var(--tangerine); opacity:.42; }
.sc-bok-p { fill:var(--sakura); opacity:.3; }
.sc-bok-v { fill:var(--glass-violet); opacity:.55; }
.sc-glow { fill:url(#screenGlow); }
.sc-pool { fill:var(--bg-panel); opacity:.16; }
.blob-rim { fill:none; stroke:var(--white-55); stroke-width:1.2; }
.band-glow { fill:none; stroke:url(#bandGrad); stroke-width:16; stroke-linecap:round; opacity:.5; filter:url(#bandBlur); }
.band-core { fill:none; stroke:url(#bandGrad); stroke-width:4.5; stroke-linecap:round; }
.band-hair { fill:none; stroke:var(--white); stroke-width:1.2; stroke-linecap:round; opacity:.9; }
.lp-bezel { fill:var(--text); stroke:var(--white-16); stroke-width:1; }
.lp-cam { fill:var(--white-24); }
.lp-base { fill:url(#metalGrad); }
.lp-notch { fill:var(--metal-lo); }
.editor { position:absolute; z-index:2; left:calc(342 / 780 * 100%); top:calc(152 / 640 * 100%); width:calc(316 / 780 * 100%); height:calc(212 / 640 * 100%); background:var(--bg); color:var(--text); border-radius:var(--r-editor); overflow:hidden; display:flex; flex-direction:column; font-family:var(--font-mono); font-size:1.55cqw; }
.editor::after { content:""; position:absolute; inset:0; background:linear-gradient(118deg,var(--white-40),var(--white-16) 22%,var(--clear) 46%); pointer-events:none; }
.ed-bar { display:flex; align-items:center; gap:.45em; height:2.3em; padding:0 .9em; background:var(--bg-panel); color:var(--text); border-bottom:1px solid var(--border); flex-shrink:0; }
.ed-dot { width:.64em; height:.64em; border-radius:var(--r-circle); flex-shrink:0; }
.ed-dot.r { background:var(--error); }
.ed-dot.y { background:var(--warn); }
.ed-dot.g { background:var(--success); }
.ed-file { margin-left:.6em; font-weight:var(--weight-bold); font-size:.92em; }
.ed-lang { margin-left:auto; font-size:.74em; font-weight:var(--weight-bold); letter-spacing:.08em; color:var(--accent); background:var(--bg-panel-2); padding:.18em .6em; border-radius:var(--r-pill); }
.ed-code { padding:.75em 0; counter-reset:ln; line-height:1.74; }
.ln { display:block; white-space:pre; padding-right:.8em; counter-increment:ln; }
.ln::before { content:counter(ln); display:inline-block; width:1.7em; margin-right:.85em; text-align:right; color:var(--text-muted); }
.ln.is-hit { background:var(--bg-panel); color:var(--text); box-shadow:inset .16em 0 0 var(--accent); }
.tk-k,.tk-pol { color:var(--accent); }
.tk-v { color:var(--text); font-weight:var(--weight-bold); }
.tk-t { color:var(--accent-dark); font-weight:var(--weight-bold); }
.c-shadow { fill:var(--shade); }
.c-fur { fill:url(#catFur); }
.c-tail { fill:none; stroke:var(--bg-panel); stroke-width:17; stroke-linecap:round; }
.c-ear-in { fill:var(--sakura); opacity:.6; }
.c-eye { fill:var(--ink-deep); }
.c-glint { fill:var(--tangerine); }
.c-nose,.c-blush { fill:var(--sakura); }
.c-blush { opacity:.4; }
.c-mouth { fill:none; stroke:var(--ink-deep); stroke-width:2; stroke-linecap:round; }
.c-whisk { fill:none; stroke:var(--whisker); stroke-width:1.5; stroke-linecap:round; }
.c-paw { fill:var(--white); stroke:var(--bg-panel-2); stroke-width:2; }
.c-toe { fill:none; stroke:var(--bg-panel-2); stroke-width:1.6; stroke-linecap:round; }
.plate { position:absolute; z-index:4; left:calc(520 / 780 * 100%); top:calc(580 / 640 * 100%); transform:translateX(-50%); display:inline-flex; align-items:center; gap:.55em; padding:.55em 1.3em .55em .6em; border-radius:var(--r-pill); background:var(--white-24); color:var(--white); border:1px solid var(--white-70); backdrop-filter:blur(14px) saturate(1.4); box-shadow:inset 0 1px 0 var(--white-55),0 12px 30px -10px var(--ink-40); font:var(--weight-heavy) 2.1cqw/1 var(--font-display); white-space:nowrap; }
.plate-dot { width:1.45em; height:1.45em; border-radius:var(--r-circle); background:var(--grad-hero); box-shadow:inset 0 0 0 .18em var(--white-55); flex-shrink:0; }
.gl { position:absolute; z-index:4; width:var(--w); left:var(--x); top:var(--y); transform:rotate(var(--r)); filter:drop-shadow(0 14px 16px var(--ink-22)) drop-shadow(0 2px 3px var(--ink-14)); }
.gl svg { display:block; width:100%; height:auto; overflow:visible; }
.gl-direct { --w:14%; --x:3.7%; --y:15.6%; --r:-8deg; }
.gl-reject { --w:10%; --x:2.2%; --y:52.7%; --r:-10deg; }
.gl-geoip { --w:11%; --x:6.8%; --y:80.5%; --r:-6deg; }
.gl-mail { --w:13%; --x:68.6%; --y:5.9%; --r:10deg; }
.gl-tun { --w:9.5%; --x:91.7%; --y:29.7%; --r:12deg; }
.gl-proxy { --w:14%; --x:83.5%; --y:65.6%; --r:7deg; }
.g-body { fill:url(#glassBody); fill-opacity:.92; }
.g-hi { fill:url(#glassHi); }
.g-rim { fill:none; stroke:var(--white-70); stroke-width:1.4; }
.g-line { fill:none; stroke:var(--white-85); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.g-txt { fill:var(--ink-deep); font-family:var(--font-display); font-weight:var(--weight-heavy); font-size:15px; text-anchor:middle; dominant-baseline:middle; }
.gl-tag { position:absolute; left:50%; top:100%; transform:translate(-50%,-35%); padding:.34em .75em; border-radius:var(--r-pill); background:var(--white-70); color:var(--ink-deep); border:1px solid var(--white-85); backdrop-filter:blur(8px); font:var(--weight-bold) 1.3cqw/1 var(--font-mono); letter-spacing:.06em; white-space:nowrap; }
.sheet { position:relative; z-index:3; margin-top:calc(var(--r-sheet) * -1); background:var(--bg); color:var(--text); border-radius:var(--r-sheet) var(--r-sheet) 0 0; padding-top:22px; padding-bottom:80px; }
.statusbar { width:fit-content; max-width:100%; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 22px; padding:11px 26px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text-muted); box-shadow:var(--shadow-soft); font-family:var(--font-mono); font-size:13px; }
.sb-item { display:inline-flex; align-items:center; gap:8px; }
.sb-item b { font-family:var(--font-body); font-weight:var(--weight-bold); color:var(--text); }
.sb-dot { width:8px; height:8px; border-radius:var(--r-circle); background:var(--success); box-shadow:0 0 0 3px var(--bg-panel); flex-shrink:0; }
.sb-sep { width:1px; height:14px; background:var(--border); }
@keyframes rise { from { opacity:0; transform:translateY(.45em); } to { opacity:1; transform:none; } }
@keyframes sweep { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (max-width:1180px) {
  .main-nav { margin-left:40px; }
  .main-nav ul { gap:28px; }
  .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
}
@media (max-width:1080px) {
  .main-nav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preview-top .main-nav { display:block; margin-left:0; width:100%; }
  .preview-top .top-row { flex-wrap:wrap; gap:12px; padding-block:14px; }
  .preview-top .main-nav { order:3; }
  .preview-top .main-nav ul { justify-content:space-between; gap:12px; flex-wrap:wrap; }
}
@media (max-width:960px) {
  :root { --gutter:24px; --section-space:64px; }
  .hero { min-height:0; padding-top:28px; padding-bottom:calc(var(--r-sheet) + 32px); }
  .hero-grid { grid-template-columns:minmax(0,1fr); }
  .hero-copy { order:-1; }
  .device { max-width:620px; margin:0 auto; }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  h1,.hero-title { font-size:clamp(24px,4.7vw,30px); line-height:1.18; }
  h2 { font-size:28px; }
}
@media (max-width:640px) {
  :root { --gutter:20px; --section-space:48px; }
  .brand-name { min-width:0; font-size:17px; overflow-wrap:anywhere; }
  .brand { min-width:0; flex-shrink:1; gap:8px; }
  #platform-title .nowrap { white-space:normal; }
  .brand-mark { width:34px; height:34px; }
  .lang { padding-inline:12px; }
  .lang-full { display:none; }
  .lang-short { display:inline; }
  .header-tools { margin-left:auto; gap:6px; }
  .btn { min-height:50px; padding:12px 22px; font-size:16px; }
  .hero-desc { font-size:15.5px; }
  .trust,.platforms { flex-direction:row; flex-wrap:wrap; }
  .pf { font-size:12px; padding-inline:11px; gap:6px; min-height:36px; }
  .statusbar { border-radius:var(--r-card); padding:14px 18px; gap:10px 16px; }
  .sb-sep { display:none; }
  .grid-2,.grid-3,.footer-grid { grid-template-columns:minmax(0,1fr); }
  .card { padding:24px; }
  .panel { padding:28px 20px; }
  .tilt,[data-tilt] { transform:none !important; }
  .footer-grid { gap:30px; }
  .site-footer { padding-top:40px; }
  pre { padding:18px; font-size:12px; }
}
@media (max-width:360px) {
  :root { --gutter:16px; }
  .brand-name { font-size:15px; }
  .brand-mark { width:30px; height:30px; }
  .lang { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal-ready .reveal:not(.shown) { opacity:1; transform:none; }
}