/* MOMO6 Engine site · base: reset, primitives, chrome (nav/progress), shared components */
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20vmax;z-index:var(--z-below);pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%,rgba(139,123,255,.14),transparent 62%),
    radial-gradient(34vmax 34vmax at 86% 34%,rgba(92,225,255,.07),transparent 62%),
    radial-gradient(30vmax 30vmax at 55% 92%,rgba(212,255,63,.05),transparent 62%);
  animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(4vmax,-3vmax,0) rotate(6deg)}}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:max(var(--s-5),env(safe-area-inset-left,0px));padding-right:max(var(--s-5),env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
::selection{background:var(--lime);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nb{white-space:nowrap}

/* serif-italic accent words; Chinese keeps the sans and uses the gradient only */
h1 em,h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
h2 em .wd>span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
html[lang="zh"] h1 em,html[lang="zh"] h2 em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}

.label{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2);padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);line-height:1.4}
.chip i,.live{flex:none;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(212,255,63,.55)}70%{box-shadow:0 0 0 9px rgba(212,255,63,0)}100%{box-shadow:0 0 0 0 rgba(212,255,63,0)}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:var(--r-pill);font:inherit;font-size:var(--fs-md);font-weight:600;text-decoration:none;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur-fast),box-shadow var(--dur)}
.btn-primary{background:var(--lime);color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(212,255,63,.65)}
.btn .arr{display:inline-block;transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:var(--surface-2)}
.skip{position:fixed;left:var(--s-4);top:-64px;z-index:var(--z-skip);padding:10px 18px;border-radius:var(--r-pill);background:var(--lime);color:var(--on-accent);font-weight:700;text-decoration:none;transition:top var(--dur-fast)}
.skip:focus{top:var(--s-3)}

/* ---------- chrome ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);z-index:var(--z-progress)}
.topbar{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);border-bottom:1px solid transparent;transition:background var(--dur),border-color var(--dur)}
body.scrolled .topbar{background:rgba(7,7,11,.86);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:var(--nav-h)}
.brand{display:inline-flex;align-items:baseline;font-weight:700;font-size:21px;letter-spacing:-.045em;text-decoration:none;color:var(--ink)}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand em{margin-left:8px;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:20px;letter-spacing:0;color:var(--muted)}
html[lang="zh"] .brand em{font-family:var(--font-sans);font-style:normal;font-size:14px;font-weight:500}
.topnav{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.topnav a{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:500;color:var(--muted);text-decoration:none;transition:color var(--dur-fast),background var(--dur) var(--ease)}
.topnav a:hover{color:var(--ink)}
.topnav a.on{color:var(--on-accent);background:var(--ink)}
.lang-btn{min-height:36px;margin-left:4px;padding:0 15px;border:0;border-radius:var(--r-pill);background:var(--lime);color:var(--on-accent);font:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.lang-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(212,255,63,.7)}
.mnav{display:none}

/* ---------- shared: section header (simulator + bands) ---------- */
.shead{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s-7);align-items:end;margin-bottom:var(--s-7)}
.shead .ghost{position:absolute;right:0;top:-.5em;z-index:var(--z-below);font-weight:700;font-size:clamp(120px,17vw,236px);line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none;user-select:none}
.shead .label{display:block;margin-top:var(--s-5)}
.shead h2{margin-top:var(--s-3);font-size:var(--fs-display-m);line-height:1.02;letter-spacing:var(--tracking-display)}
.shead-r{display:flex;flex-direction:column;gap:var(--s-5)}
.shead p{margin:0;max-width:34em;color:var(--muted);font-size:var(--fs-md)}
.plate{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink-2)}
.plate .pn{display:inline-grid;place-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--lime);color:var(--on-accent);font-weight:500;letter-spacing:.04em}
.plate::after{content:"";width:72px;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.kstat{display:flex;align-items:baseline;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line)}
.kstat b{flex:none;font-size:clamp(36px,3.6vw,52px);font-weight:600;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:2px}
.kstat span{font-size:var(--fs-sm);color:var(--muted);line-height:1.45}

/* word-by-word heading reveal */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wd>span{display:inline-block}
.js .wd>span{transform:translateY(108%);transition:transform var(--dur-slow) var(--ease);transition-delay:calc(var(--i)*32ms + 80ms)}
.js .in .wd>span{transform:none}

/* ---------- shared: before/after comparison track ---------- */
.cmp{display:flex;flex-direction:column;gap:10px}
.cmp-track{position:relative;height:10px;border-radius:var(--r-pill);background:rgba(255,255,255,.05)}
.cmp-base,.cmp-cur{position:absolute;left:0;top:0;bottom:0;min-width:4px;border-radius:var(--r-pill);transform-origin:0 50%}
.cmp-base{background:repeating-linear-gradient(-45deg,rgba(255,106,92,.5) 0 3px,rgba(255,106,92,.18) 3px 6px)}
.cmp-cur{background:var(--lime);box-shadow:0 0 14px rgba(212,255,63,.35)}
.cmp-mark{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:var(--coral)}
.cmp-vals{display:flex;justify-content:space-between;gap:6px var(--s-3);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.cmp-vals>span{display:inline-flex;align-items:center;gap:7px}
.cmp-vals i{flex:none;width:8px;height:8px;border-radius:2px}
.cmp-vals .b i{background:var(--coral)}
.cmp-vals .a i{background:var(--lime)}
.cmp-vals b{font-weight:500;color:var(--ink-2)}
.cmp-vals .a b{color:var(--ink)}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.tag{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);background:var(--surface-2);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tag.live{background:var(--lime-a10);color:var(--lime)}
.tag.pilot{background:var(--violet-a15);color:#B4AAFF}
.tag.live::before,.tag.pilot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* spotlight hover */
.spot{position:relative;isolation:isolate}
.spot::before,.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur)}
.spot::after{z-index:var(--z-below);background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(212,255,63,.07),transparent 45%)}
.spot::before{padding:1px;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(212,255,63,.5),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.spot:hover::before,.spot:hover::after{opacity:1}

/* scroll reveal: transform + opacity only (no blur, cheap on low-end GPUs) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* ---------- footer ---------- */
footer{margin-top:var(--s-10);padding:var(--s-8) 0 var(--s-6);border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm);overflow:hidden}
footer .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-7)}
footer ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:var(--s-2)}
footer .brand{font-size:26px}
.wordmark{margin-top:var(--s-8);font-weight:700;font-size:clamp(88px,23vw,330px);line-height:.78;letter-spacing:-.075em;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 88%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}

/* ---------- Chinese typography ---------- */
html[lang="zh"] .label,html[lang="zh"] .chip,html[lang="zh"] .plate,html[lang="zh"] .cmp-vals,html[lang="zh"] .tag,html[lang="zh"] .legend{letter-spacing:0}
html[lang="zh"] .shead h2{line-height:1.16;letter-spacing:-.01em}