:root {
  --bg:#f9f9f9;
  --bg-panel:#ffffff;
  --bg-panel-2:#f2f2f3;
  --border:#e3e3e6;
  --accent:#0d36ff;
  --accent-dark:#0a27c2;
  --text:#141416;
  --text-muted:#5d5f66;
  --success:#1f9d55;
  --warn:#b7791f;
  --error:#d6342c;
  --on-accent:#ffffff;
  --dot-deep:#cfd0d5;
  --accent-ring:rgba(13,54,255,.35);
  --accent-faint:rgba(13,54,255,.2);
  --accent-glow:rgba(13,54,255,.34);
  --accent-wash:rgba(13,54,255,.055);
  --accent-tint:rgba(13,54,255,.07);
  --accent-clear:rgba(13,54,255,0);
  --clear:rgba(249,249,249,0);
  --mask-solid:rgba(0,0,0,1);
  --mask-clear:rgba(0,0,0,0);
  --veil:rgba(20,20,22,.18);
  --font-display:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --size-xs:12px;
  --size-sm:14px;
  --size-body:16px;
  --size-lede:16.5px;
  --size-h1:clamp(34px,3.4vw,48px);
  --size-h2:clamp(26px,2.6vw,36px);
  --size-h3:22px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-strong:600;
  --weight-brand:700;
  --weight-display:800;
  --tracking-title:-.02em;
  --r-0:0;
  --r-round:50%;
  --r-mark:6px;
  --frame-w:1200px;
  --header-w:1280px;
  --reading-w:800px;
  --gutter:32px;
  --head-h:72px;
  --hero-h:700px;
  --section-space:140px;
  --orbit:580px;
  --orbit-r:290px;
  --spin:140s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --speed:.2s;
}
*,*::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:var(--size-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[hidden] { display:none!important }
a { color:var(--accent); text-decoration:none; text-underline-offset:4px }
a:hover { text-decoration:underline }
button,input,select,textarea { font:inherit; color:inherit; border-radius:var(--r-0) }
button,summary { cursor:pointer }
button { border:1px solid var(--border) }
img,svg { max-width:100% }
img { height:auto }
svg { flex-shrink:0 }
figure { margin:0 }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
::selection { background:var(--accent); color:var(--on-accent) }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text); text-wrap:balance }
h1,h2 { font-weight:var(--weight-display); letter-spacing:var(--tracking-title) }
h1 { margin:0; font-size:var(--size-h1); line-height:1.14 }
h2 { margin:0 0 24px; font-size:var(--size-h2); line-height:1.25 }
h3 { margin:0 0 16px; font-size:var(--size-h3); line-height:1.35; font-weight:var(--weight-brand) }
p { margin:0 0 20px }
strong { font-weight:var(--weight-strong) }
small { font-size:var(--size-xs) }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere }
pre {
  max-width:100%;
  min-width:0;
  margin:24px 0;
  padding:24px;
  overflow-x:auto;
  background:var(--bg-panel-2);
  color:var(--text);
  border:1px solid var(--border);
  font-size:var(--size-sm);
  line-height:1.8;
  tab-size:2;
}
pre code { white-space:pre; overflow-wrap:normal; word-break:normal }
hr { border:0; border-top:1px solid var(--border); margin:32px 0 }
.skip {
  position:absolute; left:16px; top:-80px; z-index:100;
  padding:8px 14px;
  background:var(--accent); color:var(--on-accent);
  font-size:var(--size-sm);
}
.skip:focus { top:12px }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.frame {
  width:min(var(--frame-w),calc(100% - 48px));
  margin-inline:auto;
  position:relative;
  border-inline:1px solid var(--border);
}
.wrap {
  width:100%; max-width:var(--frame-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading { max-width:var(--reading-w); margin-inline:auto; min-width:0 }
.section { border-bottom:1px solid var(--border); overflow-x:clip }
.section > .frame { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.surface-white { background:var(--bg-panel); color:var(--text) }
.surface-neutral { background:var(--bg); color:var(--text) }
.grid { display:grid; gap:24px }
.grid-two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid > *, .hero .frame > *, .wrap > *, .prose, .prose div { min-width:0 }
.keep { white-space:nowrap }
.muted { color:var(--text-muted) }
.mono { font-family:var(--font-mono) }
.accent { color:var(--accent) }
.kicker {
  margin:0 0 24px; font-family:var(--font-mono);
  font-size:var(--size-xs); letter-spacing:.16em; color:var(--text-muted);
}
.prose { line-height:1.85 }
.prose h2 { margin-top:64px }
.prose h3 { margin-top:36px }
.prose li + li { margin-top:10px }
.prose a { text-decoration:underline }
.prose :is(ul,ol) { padding-left:24px }
.panel,.card {
  padding:32px; min-width:0; border:1px solid var(--border);
  background:var(--bg-panel); color:var(--text); border-radius:var(--r-0);
}
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.card-link { display:block }
.card-link:hover { border-color:var(--accent); text-decoration:none }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:36px }
.btn {
  min-height:52px; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 26px; position:relative;
  border:1px solid var(--border); border-radius:var(--r-0);
  font-size:var(--size-body); font-weight:var(--weight-strong);
  line-height:1.4; text-align:center;
  background:var(--bg-panel); color:var(--text);
  transition:background-color var(--speed) var(--ease),border-color var(--speed) var(--ease),color var(--speed) var(--ease);
}
.btn:hover { text-decoration:none }
.btn svg { width:16px; height:16px }
.btn-primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.btn-primary::before {
  content:""; position:absolute; inset:-7px; pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) left top/10px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left top/1px 10px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/10px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/1px 10px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/10px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/1px 10px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/10px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/1px 10px no-repeat;
  transition:transform .25s var(--ease);
}
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--on-accent); border-color:var(--accent-dark) }
.btn-primary:hover::before { transform:scale(1.04,1.1) }
.btn-ghost:hover { border-color:var(--text) }
.btn:active { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] {
  background:var(--bg-panel-2); color:var(--text-muted);
  border-color:var(--border); cursor:not-allowed;
}
.btn:disabled::before { display:none }
.btn.is-focus { outline:2px solid var(--accent); outline-offset:4px }
.arrow { font-family:var(--font-mono); color:var(--text-muted) }
.site-head { position:relative; z-index:30; background:var(--bg-panel); color:var(--text); border-bottom:1px solid var(--border) }
.head-frame {
  width:100%;
  max-width:min(100%,calc(var(--header-w) + var(--gutter) * 2));
  min-height:var(--head-h);
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:24px; position:relative;
  border-inline:1px solid var(--border);
}
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; color:var(--text); font-weight:var(--weight-brand); font-size:var(--size-body); letter-spacing:-.01em }
.brand:hover { text-decoration:none }
.brand img { width:30px; height:30px; flex-shrink:0; display:block }
.brand-mark {
  width:30px; height:30px; flex-shrink:0; display:inline-block;
  border:1px solid var(--accent); border-radius:var(--r-mark);
  background:var(--bg-panel); color:var(--accent); position:relative;
}
.brand-mark::after { content:""; position:absolute; inset:4px; border:1px solid var(--accent-ring); border-radius:var(--r-round) }
.desktop-nav { margin-left:auto; min-width:0 }
.nav-grid {
  display:flex; align-items:center; list-style:none; margin:0; padding:0;
  border:1px solid var(--border); background:var(--bg-panel); color:var(--text);
}
.nav-grid li + li { border-left:1px solid var(--border) }
.nav-grid a {
  min-height:40px; display:flex; align-items:center; gap:7px; padding:8px 12px;
  font-size:13.5px; font-weight:var(--weight-medium); white-space:nowrap;
  color:var(--text); position:relative;
  transition:background-color var(--speed) var(--ease),color var(--speed) var(--ease);
}
.nav-grid svg,.lang-switch svg {
  width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; color:var(--text-muted);
}
.nav-grid a:hover { background:var(--bg-panel-2); color:var(--text); text-decoration:none }
.nav-grid a[aria-current="page"] { color:var(--accent); background:var(--accent-tint) }
.nav-grid a[aria-current="page"] svg { color:var(--accent) }
.nav-grid a[aria-current="page"]::after { content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:2px; background:var(--accent) }
.head-tools { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.lang-box { position:relative }
.lang-switch {
  min-height:40px; display:flex; align-items:center; gap:7px; padding:8px 12px;
  border:1px solid var(--border); background:var(--bg-panel); color:var(--text);
  font-size:var(--size-sm); white-space:nowrap; list-style:none;
}
.lang-switch::-webkit-details-marker { display:none }
.lang-switch:hover { background:var(--bg-panel-2); color:var(--text) }
.lang-short { display:none }
.caret { font-size:10px; color:var(--text-muted) }
.lang-menu {
  position:absolute; top:calc(100% + 8px); right:0; width:190px; z-index:4;
  padding:6px; border:1px solid var(--border);
  background:var(--bg-panel); color:var(--text);
}
.lang-menu a { display:flex; align-items:center; min-height:44px; padding:10px 12px; color:var(--text); font-size:var(--size-sm) }
.lang-menu a:hover,.lang-menu a[aria-current="true"] { background:var(--accent-tint); color:var(--accent); text-decoration:none }
.menu-toggle { display:none; min-width:44px; min-height:44px; padding:10px; background:var(--bg-panel); color:var(--text) }
.menu-toggle svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5 }
.mobile-drawer {
  display:none; position:absolute; top:100%; left:0; right:0; z-index:3;
  max-height:calc(100dvh - var(--head-h)); overflow-y:auto; overscroll-behavior:contain;
  padding:16px var(--gutter); border-bottom:1px solid var(--border);
  background:var(--bg-panel); color:var(--text);
}
.mobile-drawer ul { margin:0; padding:0; list-style:none }
.mobile-drawer a { width:100%; min-height:48px; display:flex; align-items:center; gap:12px; padding:12px 16px; color:var(--text); border-bottom:1px solid var(--border) }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--accent-tint); color:var(--accent); text-decoration:none }
.mobile-drawer svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6 }
.mobile-drawer .kicker { margin:24px 16px 8px }
.menu-veil { position:fixed; inset:0; z-index:20; border:0; background:var(--veil); color:var(--text) }
.hero { position:relative; overflow-x:clip; border-bottom:1px solid var(--border) }
.hero .frame { height:var(--hero-h); display:grid; grid-template-columns:640px minmax(0,1fr) }
.rig { position:relative }
.rig::before {
  content:""; position:absolute; top:0; bottom:0; left:-120px; right:0;
  background-image:radial-gradient(circle,var(--border) 1.1px,var(--clear) 1.6px);
  background-size:14px 14px;
  mask-image:radial-gradient(circle at 370px 50%,var(--mask-solid) 0,var(--mask-solid) 34%,var(--mask-clear) 70%);
  -webkit-mask-image:radial-gradient(circle at 370px 50%,var(--mask-solid) 0,var(--mask-solid) 34%,var(--mask-clear) 70%);
  pointer-events:none;
}
.speck { position:absolute; width:3px; height:3px; border-radius:var(--r-round); background:var(--dot-deep) }
.speck.sm { width:2px; height:2px }
.sp1 { top:96px; left:588px }
.sp2 { top:34px; left:462px }
.sp3 { top:640px; left:566px }
.sp4 { top:128px; left:-78px }
.sp5 { top:530px; left:-62px }
.sp6 { top:186px; left:176px }
.sp7 { top:514px; left:338px }
.sp8 { top:404px; left:612px }
.orbit { position:absolute; width:var(--orbit); height:var(--orbit); left:-40px; top:50%; margin-top:calc(var(--orbit-r) * -1) }
.orbit::before { content:""; position:absolute; inset:14%; border-radius:var(--r-round); background:radial-gradient(circle,var(--accent-wash) 0,var(--accent-clear) 70%) }
.target { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.t-outer { fill:none; stroke:var(--accent-ring); stroke-width:1 }
.t-inner { fill:none; stroke:var(--accent); stroke-width:1; opacity:.75 }
.t-core { fill:var(--accent) }
.t-tick { fill:none; stroke:var(--accent-ring); stroke-width:1 }
.ray { stroke:var(--text-muted); stroke-width:.8; opacity:.45 }
.ray-proxy { stroke:var(--accent); opacity:.8 }
.ray-cap { fill:var(--text-muted); opacity:.55 }
.ray-cap-proxy { fill:var(--accent); opacity:1 }
.lbl rect { fill:var(--bg-panel); stroke:var(--border); stroke-width:1 }
.lbl text { font-family:var(--font-mono); font-size:11px; font-weight:var(--weight-medium); letter-spacing:.03em; fill:var(--text-muted) }
.lbl-proxy rect { stroke:var(--accent) }
.lbl-proxy text { fill:var(--accent); font-weight:var(--weight-brand) }
.rotor { position:absolute; inset:0; animation:rule-spin var(--spin) linear infinite }
.ring-outer { position:absolute; inset:0; border:1px solid var(--accent-ring); border-radius:var(--r-round) }
.ring-inner { position:absolute; inset:calc(var(--orbit-r) - 197px); border:1px dashed var(--accent-faint); border-radius:var(--r-round) }
.node,.sat { position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateX(var(--r,var(--orbit-r))) rotate(calc(var(--a) * -1)) }
.tag { position:absolute; left:0; top:0; width:0; height:0; animation:rule-spin var(--spin) linear infinite reverse }
.halo { position:absolute; width:44px; height:44px; left:-22px; top:-22px; border-radius:var(--r-round); background:radial-gradient(circle,var(--accent-glow) 0,var(--accent-clear) 70%); animation:rule-breathe var(--d,5s) ease-in-out var(--dl,0s) infinite }
.dot { position:absolute; width:8px; height:8px; left:-4px; top:-4px; border-radius:var(--r-round); background:var(--accent) }
.kw { position:absolute; left:13px; top:-10px; height:20px; padding:0 6px; line-height:18px; font-family:var(--font-mono); font-size:10.5px; font-weight:var(--weight-medium); letter-spacing:.02em; color:var(--text); background:var(--bg-panel); border:1px solid var(--border); white-space:nowrap }
.n1 { --a:-112deg; --d:4s; --dl:0s }
.n2 { --a:-68deg; --d:5s; --dl:-1.2s }
.n3 { --a:-28deg; --d:6s; --dl:-2.1s }
.n4 { --a:22deg; --d:4.5s; --dl:-.6s }
.n5 { --a:64deg; --d:5.5s; --dl:-3s }
.n6 { --a:148deg; --d:4.8s; --dl:-1.8s }
.n7 { --a:196deg; --d:5.2s; --dl:-2.6s }
.sat i { position:absolute; width:4px; height:4px; left:-2px; top:-2px; border-radius:var(--r-round); background:var(--accent-ring) }
.sat b { position:absolute; width:18px; height:18px; left:-9px; top:-9px; border-radius:var(--r-round); background:radial-gradient(circle,var(--accent-faint) 0,var(--accent-clear) 70%) }
.s1 { --a:-104deg; --r:272px }
.s2 { --a:-21deg; --r:306px }
.s3 { --a:31deg; --r:276px }
.s4 { --a:118deg; --r:290px }
.s5 { --a:204deg; --r:302px }
@keyframes rule-spin { to { transform:rotate(360deg) } }
@keyframes rule-breathe { 0%,100% { opacity:.4; transform:scale(.8) } 50% { opacity:1; transform:scale(1.15) } }
.copy { display:flex; flex-direction:column; justify-content:center; padding:0 48px 0 36px; position:relative; z-index:2 }
.eyebrow { display:inline-flex; align-items:center; gap:12px; margin:0 0 26px; font-family:var(--font-mono); font-size:var(--size-xs); font-weight:var(--weight-medium); letter-spacing:.16em; color:var(--accent) }
.eyebrow-dot { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-round); background:var(--accent); position:relative }
.eyebrow-dot::after { content:""; position:absolute; inset:-5px; border-radius:var(--r-round); border:1px solid var(--accent-faint) }
.h1-line { display:block }
h1 em { font-style:normal; color:var(--accent) }
.lede { margin:24px 0 0; max-width:31em; font-size:var(--size-lede); line-height:1.72; color:var(--text-muted) }
.lede strong { color:var(--text) }
.devices { margin:44px 0 0; padding:20px 0 0; border-top:1px solid var(--border); display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; list-style:none }
.device { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:var(--weight-medium); color:var(--text) }
.device svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--text-muted) }
.devices .sep { width:1px; height:18px; background:var(--border) }
.snippet { background:var(--bg-panel); color:var(--text); border-bottom:1px solid var(--border) }
.snippet .frame { min-height:56px; display:flex; align-items:stretch }
.snippet-file { display:flex; align-items:center; padding:0 20px 0 32px; border-right:1px solid var(--border); font-family:var(--font-mono); font-size:var(--size-xs); color:var(--text-muted); white-space:nowrap }
.snippet-code { flex:1; min-width:0; display:flex; align-items:center; padding:12px 24px; margin:0; font-family:var(--font-mono); font-size:15px; font-weight:var(--weight-medium); color:var(--text); white-space:nowrap; overflow-x:auto }
.snippet-code code { white-space:pre; overflow-wrap:normal }
.snippet-code .ln { color:var(--text-muted); margin-right:18px; user-select:none }
.snippet-code .val { color:var(--text-muted) }
.snippet-code .pol { color:var(--accent); font-weight:var(--weight-brand) }
.copy-btn { display:flex; align-items:center; gap:8px; padding:0 32px 0 24px; flex-shrink:0; border:0; border-left:1px solid var(--border); background:var(--bg-panel); color:var(--text); font-size:var(--size-sm); font-weight:var(--weight-medium); transition:background-color var(--speed) var(--ease) }
.copy-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; color:var(--text-muted) }
.copy-btn:hover { background:var(--bg-panel-2); color:var(--text) }
.statusbar { background-color:var(--bg); color:var(--text); background-image:radial-gradient(circle,var(--border) 1.15px,var(--clear) 1.6px); background-size:7px 7px; border-bottom:1px solid var(--border) }
.statusbar .frame { min-height:56px; display:flex; align-items:center; justify-content:space-between; padding:10px 32px; gap:16px; flex-wrap:wrap }
.fact { display:inline-flex; align-items:center; gap:9px; padding:3px 10px; background:var(--bg); color:var(--text); font-family:var(--font-mono); font-size:var(--size-xs); font-weight:var(--weight-medium); overflow-wrap:anywhere }
.fact .fk { color:var(--text-muted); font-size:10.5px; letter-spacing:.12em }
.site-foot { background:var(--bg-panel); color:var(--text); border-top:1px solid var(--border) }
.footer-main { display:grid; grid-template-columns:1.2fr .8fr 1.2fr; gap:48px; padding-top:72px; padding-bottom:56px }
.footer-main > * { min-width:0 }
.footer-main p { margin-top:20px; color:var(--text-muted); font-size:var(--size-sm) }
.footer-main h2 { font-size:var(--size-body); font-weight:var(--weight-strong); letter-spacing:0; margin-bottom:16px }
.footer-links { display:grid; gap:10px; list-style:none; padding:0; margin:0 }
.footer-links a { color:var(--text-muted); font-size:var(--size-sm); overflow-wrap:anywhere }
.footer-links a:hover { color:var(--accent) }
.footer-bottom { padding-top:24px; padding-bottom:32px; border-top:1px solid var(--border); font-size:var(--size-xs); color:var(--text-muted) }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:24px }
.footer-languages a { min-height:44px; display:inline-flex; align-items:center; color:var(--text) }
.footer-languages [aria-current] { color:var(--accent) }
.legal-links { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px }
.legal-links a { color:var(--text-muted) }
.reveal { opacity:1; transform:none }
html.reveal-ready .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease) }
html.reveal-ready .reveal.shown { opacity:1; transform:none }
@media (max-width:1279px) {
  .desktop-nav { display:none }
  .head-tools { margin-left:auto }
  .menu-toggle { display:block }
  .mobile-drawer:not([hidden]) { display:block }
}
@media (max-width:1180px) {
  .copy { padding:0 32px 0 24px }
}
@media (max-width:1024px) {
  .hero .frame { grid-template-columns:minmax(0,1fr); height:auto }
  .copy { order:-1; padding:56px 24px 8px }
  .rig { height:460px; overflow:hidden }
  .rig::before { left:0 }
  .orbit { left:50%; margin-left:calc(var(--orbit-r) * -1); transform:scale(.7) }
  .speck { display:none }
  .snippet-file { display:none }
  .snippet-code { padding:12px 20px; font-size:13.5px }
  .copy-btn { padding:0 20px }
  .statusbar .frame { justify-content:flex-start; padding:14px 20px }
  .footer-main { gap:32px; grid-template-columns:1fr 1fr }
  .footer-brand { grid-column:1 / -1 }
}
@media (max-width:768px) {
  :root { --size-h1:clamp(24px,4.8vw,30px); --gutter:24px }
  .grid-three { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px) {
  :root { --gutter:16px }
  .frame { width:calc(100% - 32px) }
  .head-frame { gap:10px; padding-inline:var(--gutter) }
  .brand { font-size:var(--size-sm); gap:8px }
  .brand img,.brand-mark { width:26px; height:26px }
  .head-tools { margin-left:auto; gap:8px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .lang-switch { min-height:44px; padding:8px 10px }
  .lang-switch svg { display:none }
  .rig { height:360px }
  .orbit { transform:scale(.54) }
  .copy { padding:40px var(--gutter) 8px }
  .eyebrow { font-size:10px; letter-spacing:.1em; gap:9px }
  .actions { gap:18px }
  .btn { padding-inline:18px; font-size:var(--size-sm) }
  .lede { font-size:15.5px }
  .devices { gap:10px 14px; margin-top:32px }
  .grid-two { grid-template-columns:minmax(0,1fr) }
  .panel,.card { padding:24px }
  .footer-main { grid-template-columns:minmax(0,1fr) }
  .footer-brand { grid-column:auto }
  .tilt,[data-tilt] { transform:none!important }
  .snippet-code { padding-inline:12px; font-size:var(--size-xs) }
  .copy-btn { padding-inline:12px }
  pre { padding:16px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  html.reveal-ready .reveal { opacity:1; transform:none }
}