/* Self-hosted OFL subsets. Latin-1 plus the punctuation actually used. CJK stays on the system stack.
   Paths include the asset version because the font cache is immutable and ignores query strings.
   The Source Serif 4 files are subsets. "Source" is a Reserved Font Name, so the name
   table inside the file says Loohcs Editorial. This CSS family name is still "Source Serif 4". */
@font-face{font-family:"Bricolage Grotesque";src:url("/static/site-20261112-perf1/bricolage-grotesque.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00A3,U+00A5-00AC,U+00AE-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+2190-2193}
@font-face{font-family:"Source Serif 4";src:url("/static/site-20261112-perf1/loohcs-editorial-roman.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+2190-2193,U+2196-2199}
@font-face{font-family:"Source Serif 4";src:url("/static/site-20261112-perf1/loohcs-editorial-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+2190-2193,U+2196-2199}

/* =====================================================================
   PROOF design tokens. Layout idea: paper sheets on an editorial grid;
   two Blackout bands (Section 4, Section 9) behave like the projector.
   Single visual world by design: the page does not follow the viewer's
   theme, because Daylight and Blackout are part of the brand system.
   ===================================================================== */
:root{
  color-scheme:light;
  /* Daylight */
  --paper:#F3F0E8; --sheet:#FBF9F4; --ink:#17160F; --graphite:#5C594F; --rule:#D8D3C6;
  --redline:#F03A17; --redline-deep:#C42A0A;
  /* Blackout */
  --blackout:#0A0A08; --stage:#181713; --seam:#2E2C26; --bone:#F1EEE4; --ash:#A29E91; --redline-lit:#FF5A36;
  /* Debate camps */
  --volt:#D6FF3F; --cobalt:#6A93FF; --aqua:#3FE0C5; --lilac:#C3A6FF;
  /* Private alerts and grip-proven */
  --amber:#FFB224; --amber-deep:#8A5200; --moss:#2A7049; --moss-lit:#5FD08F;
  /* Type */
  --font-display:"Bricolage Grotesque","Noto Sans SC","Source Han Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Source Serif 4","Source Han Serif SC","Noto Serif SC","Songti SC","STSong",Georgia,serif;
  --font-mono:"Sarasa Mono SC","Iosevka",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;
  /* Semantic aliases, re-pointed inside .blackout */
  --bg:var(--paper); --surface:var(--sheet); --fg:var(--ink); --muted:var(--graphite); --line:var(--rule); --lit:var(--redline);
  --wrap:1180px; --gutter:clamp(16px,4vw,40px);
}
.blackout{--bg:var(--blackout); --surface:var(--stage); --fg:var(--bone); --muted:var(--ash); --line:var(--seam); --lit:var(--redline-lit);
  background:var(--bg); color:var(--fg);}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.0625rem/1.5 var(--font-body); overflow-x:hidden}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0; list-style:none}
button,input{font:inherit; color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
section{padding-block:clamp(56px,9vw,112px); scroll-margin-top:64px}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums slashed-zero; letter-spacing:.02em}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---------- Bilingual text: both languages share one grid cell, so a toggle never moves layout ---------- */
.t{display:inline-grid}
:is(h1,h2,h3,h4,p,li,div,dt,dd,figcaption).t{display:grid}
.tx{grid-area:1/1; min-width:0; position:relative}
html[data-lang="en"] .tx[lang="zh-CN"], html[data-lang="zh"] .tx[lang="en"]{visibility:hidden}
.tx[lang="zh-CN"]{letter-spacing:.02em}
p .tx[lang="zh-CN"], dd .tx[lang="zh-CN"]{line-height:1.7}
.stack{display:grid}
.stack>*{grid-area:1/1; visibility:hidden}
.stack>.on{visibility:visible}

/* ---------- Type scale ---------- */
h1,h2,h3{font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; line-height:1.08; text-wrap:balance}
h1{font-size:clamp(2.5rem,5.1vw,4.3rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.1rem)}
h3{font-size:1.2rem; letter-spacing:-.01em; line-height:1.2}
h1 .tx[lang="zh-CN"],h2 .tx[lang="zh-CN"],h3 .tx[lang="zh-CN"]{letter-spacing:.01em; line-height:1.25}
.lede{font-size:1.2rem; max-width:34em; color:var(--fg)}
.sub{color:var(--muted); max-width:38em; margin-top:.9rem}
.sec-head{display:grid; gap:.2rem; margin-bottom:clamp(28px,4vw,48px)}
.edge{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font:500 .72rem/1.2 var(--font-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:.55rem}

/* ---------- Surfaces ---------- */
.sheet{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:3px 3px 0 var(--line)}
.blackout .sheet{border-radius:0; box-shadow:none}
.btn{display:inline-grid; place-items:center; text-align:center; text-decoration:none; cursor:pointer;
  font:600 .95rem/1.2 var(--font-display); padding:.72rem 1.15rem; border-radius:4px; border:1px solid var(--fg);
  background:var(--surface); color:var(--fg); box-shadow:3px 3px 0 var(--line); transition:transform 90ms linear, box-shadow 90ms linear}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line)}
.btn.primary{background:var(--redline); color:var(--ink); border-color:var(--ink)}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  font:500 .9rem var(--font-display); color:var(--muted)}
.linkbtn:hover,.navlink:hover{color:var(--fg)}

/* ---------- Redline marks (drawn by script from the <symbol> geometry) ---------- */
.rl{position:absolute; pointer-events:none; overflow:visible}
.rl path{fill:none; stroke:var(--lit); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0}
.rl.draw path{animation:draw .3s ease-out both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- Wordmark: Stem & Ring ---------- */
.wm{display:block; width:100%; height:auto; overflow:visible; color:inherit}
.wm .seg{color:inherit}
.wm .stroke{fill:none; stroke:currentColor; stroke-width:10}
.wm .fill{fill:currentColor; stroke:none}
.wm .c-wide{display:none}
.wm .turn{transition:transform 160ms cubic-bezier(.3,0,.2,1)}
.wm .turn-h{transform-origin:185px 55px}
.wm .turn-c{transform-origin:250px 70px; transition-delay:60ms}
.wm .turn-s{transform-origin:293.5px 70px; transition-delay:120ms}
.wm.m-h .turn-h,.wm.m-c .turn-c,.wm.m-s .turn-s{transform:scaleX(-1)}
.wm.no-anim .turn{transition:none}
/* 5-segment mode lighting: hard cut, no cross-fade */
.wm[data-mode] .seg{opacity:.4}
.wm[data-mode="l"] .seg-l,.wm[data-mode="oo"] .seg-oo,.wm[data-mode="h"] .seg-h,.wm[data-mode="c"] .seg-c,.wm[data-mode="s"] .seg-s{opacity:1; color:var(--lit)}
.wm[data-mode="l"] .seg-l{animation:listen 4s ease-in-out infinite}
@keyframes listen{0%,70%,100%{opacity:1}85%{opacity:.5}}
.wm .o1,.wm .o2{transition:transform 120ms linear}
.wm[data-mode="oo"] .o1{transform:translateX(5px)}
.wm[data-mode="oo"] .o2{transform:translateX(-5px)}
.wm[data-mode="c"] .c-base{display:none}
.wm[data-mode="c"] .c-wide{display:inline}
.wm[data-mode="s"] .s-top{animation:s-up .28s steps(3,end) 1}
.wm[data-mode="s"] .s-bot{animation:s-down .28s steps(3,end) 1}
@keyframes s-up{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes s-down{0%,100%{transform:none}50%{transform:translateY(5px)}}

/* ---------- App icon and favicon ---------- */
.icon-lo{display:block; width:100%; height:auto}
.icon-lo .tile{fill:var(--blackout)} .icon-lo .stem{fill:var(--redline-lit)} .icon-lo .ring{stroke:var(--bone); fill:none; stroke-width:7.5}
.icon-lo.light .tile{fill:var(--paper); stroke:var(--rule)} .icon-lo.light .stem{fill:var(--redline)} .icon-lo.light .ring{stroke:var(--ink)}
.fav{display:block; shape-rendering:crispEdges}
.fav .stem{fill:var(--redline)} .fav .ring{fill:var(--ink)}
.fav.on-dark .ring{fill:var(--bone)} .fav.on-dark .stem{fill:var(--redline-lit)}

/* ---------- Stamp ---------- */
.stamp{display:block; width:100%; height:auto; color:var(--redline); transform:rotate(-4deg)}
.stamp text{font-family:var(--font-mono); fill:currentColor; stroke:none}
.stamp .st-sm{font-size:13px; letter-spacing:1.5px; font-weight:600}
.stamp .st-lg{font-size:30px; letter-spacing:2px; font-weight:700}
.stamp .st-one{font-size:38px; letter-spacing:2px; font-weight:700}
.stamp .st-xl{font-size:46px; letter-spacing:4px; font-weight:700; font-family:var(--font-display)}
.stamp.land{animation:land .16s steps(3,end) both}
@keyframes land{from{transform:rotate(-4deg) scale(1.5); opacity:0}to{transform:rotate(-4deg) scale(1); opacity:1}}

/* ---------- Question Trail ---------- */
.trail{display:block; width:100%; height:auto}
.trail .tr-stem,.trail .tr-branch{fill:none; stroke:var(--ink); stroke-width:3}
.trail .tr-ring{fill:var(--sheet); stroke:var(--ink); stroke-width:3}
.trail .tr-ring.proved{fill:var(--moss); stroke:var(--moss)}
.trail .tr-over{fill:none; stroke:var(--redline); stroke-width:2.6; stroke-linecap:round}

/* =====================================================================  1 · NAVBAR  */
.nav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--rule)}
.nav-in{height:64px; display:flex; align-items:center; gap:clamp(8px,2vw,24px)}
.nav-wm{width:76px; flex:none; display:block; padding-block:6px}
.nav-links{display:flex; gap:clamp(10px,1.8vw,26px); margin-inline:auto}
.navlink{font:500 .92rem var(--font-display); text-decoration:none; color:var(--graphite); white-space:nowrap}
.nav-right{display:flex; align-items:center; gap:clamp(8px,1.2vw,16px); margin-left:auto}
.nav-links + .nav-right{margin-left:0}
.code{position:relative; display:flex; align-items:center; gap:.5rem}
.code-label{font:500 .7rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.code-cells{display:flex; gap:4px}
.code-cells input{width:30px; height:38px; text-align:center; font:600 1.1rem var(--font-mono); font-variant-numeric:tabular-nums slashed-zero;
  background:var(--surface); border:1px solid var(--fg); border-radius:4px; padding:0; caret-color:var(--lit)}
.code-cells input:focus{outline:2px solid var(--fg); outline-offset:1px}
.code-help{position:absolute; top:calc(100% + 8px); right:0; white-space:nowrap; font:500 .72rem var(--font-mono); color:var(--paper);
  background:var(--ink); padding:.35rem .55rem; border-radius:4px; visibility:hidden}
.code:focus-within .code-help{visibility:visible}
.lang{display:flex; align-items:center; border:1px solid var(--line); border-radius:4px; overflow:hidden; flex:none}
.lang button{background:none; border:0; cursor:pointer; padding:.38rem .55rem; font:600 .85rem var(--font-display); color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--fg); color:var(--bg)}
.menu-btn{display:none; width:38px; height:38px; border:1px solid var(--ink); border-radius:4px; background:var(--sheet); cursor:pointer; padding:0}
.menu-btn i{display:block; width:16px; height:2px; background:var(--ink); margin:3px auto}
@media (max-width:1040px){ .nav .code-label{display:none} }
.code-input:focus{outline:2px solid var(--fg); outline-offset:1px}
.nav [data-login-link]{white-space:nowrap}
.code-note{margin:.35rem 0 0; min-height:1.3em; color:var(--redline-deep); font:600 .9rem/1.35 var(--font-display)}
.blackout .code-input{background:var(--stage); color:var(--bone); border-color:var(--bone); box-shadow:3px 3px 0 var(--seam)}
.foot-actions{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:.8rem}
@media (max-width:900px){
  .nav-in{height:auto; min-height:64px; flex-wrap:wrap; padding-block:8px}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--rule); padding:8px var(--gutter) 16px}
  .nav-links.open{display:flex}
  .nav-links .navlink{padding:.7rem 0; border-bottom:1px solid var(--rule); font-size:1.05rem}
  .nav-right{margin-left:auto; flex-wrap:wrap; justify-content:flex-end}
  .nav .btn:not([data-login-link]):not(.code-submit){display:none}
  .menu-btn{display:block}
  .nav-wm{width:72px}
}
@media (max-width:420px){ .lang button{padding:.38rem .42rem} }

/* =====================================================================  2 · HERO  */
#hero{padding-top:clamp(36px,6vw,72px)}
.hero-grid{display:grid; gap:clamp(28px,4vw,56px); align-items:start}
@media (min-width:980px){ .hero-grid{grid-template-columns:5fr 7fr} }
.eyebrow{display:flex; align-items:center; gap:.7rem; font:500 .8rem var(--font-mono); letter-spacing:.06em; color:var(--muted); margin-bottom:1.2rem}
.eyebrow .icon-lo{width:28px}
.hero-copy .lede{margin-top:1.3rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem}
.entry-grid{display:grid; gap:12px; margin-top:1.1rem}
@media (min-width:760px){ .entry-grid{grid-template-columns:1fr 1fr} }
.entry-card{padding:1rem 1rem 1.1rem; display:grid; gap:.65rem; align-content:start}
.entry-card h2{font-size:1.15rem}
.entry-card .code-input{width:100%; max-width:none}
.pill{justify-self:start; border:1px dashed var(--rule); border-radius:999px; padding:.28rem .7rem; font:600 .82rem/1.35 var(--font-display); background:transparent; color:var(--fg); cursor:pointer; text-align:left}
.entry-card .linkbtn{justify-self:start}
.round{padding:clamp(16px,2.4vw,28px); display:grid; gap:1rem}
.round-instr{font:600 1.02rem/1.35 var(--font-display)}
.draft{font-size:clamp(1.02rem,1.5vw,1.25rem); line-height:1.9}
.draft .tx[lang="zh-CN"]{line-height:2.05}
.round[data-state="done"] .segb:hover{background:none}
.segb .rl{left:-9px; top:-6px; width:calc(100% + 18px); height:calc(100% + 12px)}
.note{min-height:3.2em; font-style:italic; color:var(--redline-deep); display:grid; align-items:start}
.note .tx[lang="zh-CN"]{font-style:normal; font-weight:600}
.timer{display:flex; align-items:center; gap:.7rem}
.timer .track{flex:1; height:4px; background:var(--rule); overflow:hidden}
.timer .track i{display:block; height:100%; background:var(--ink); transform-origin:left}
.timer .clock{font-size:.85rem; color:var(--muted)}
.result{display:grid; gap:.9rem; border-top:1px dashed var(--rule); padding-top:1rem}
.result .split-title{font:700 1rem var(--font-display)}
.camps{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.camp{display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; padding:.6rem .7rem; border:1px dashed var(--rule); border-radius:4px;
  font:500 .92rem/1.35 var(--font-display); color:var(--graphite)}
.camp b{font:700 .9rem var(--font-mono)}
.result-row{display:grid; grid-template-columns:1fr 150px; gap:1rem; align-items:center}
.placement{font:700 1.05rem/1.3 var(--font-display); min-height:2.7em}
.closing{color:var(--graphite)}
.stamp-slot{aspect-ratio:3/2; border:1px dashed var(--rule); border-radius:4px; display:grid; place-items:center; padding:6px}
.stamp-slot.filled{border-color:transparent}
.round:not(.r1) .split-title,.round:not(.r1) .closing{color:var(--graphite); opacity:.55}
.round.r1 .camp{border-style:solid; border-color:var(--ink); color:var(--ink)}
.round.r1 .camp-a{background:var(--volt)}
.round.r1 .camp-b{background-color:var(--cobalt); background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(23,22,15,.14) 6px 7px)}
.round.r1 .camp.mine{outline:2px solid var(--ink); outline-offset:2px}
.exits{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
@media (max-width:520px){ .camps{grid-template-columns:1fr} .result-row{grid-template-columns:1fr 120px} }

.steps-3{display:grid; gap:12px; margin:0 0 clamp(18px,3vw,28px)}
@media (min-width:860px){ .steps-3{grid-template-columns:repeat(3,1fr)} }
.step-card{padding:1rem; display:grid; gap:.4rem; align-content:start}
.step-card .num{font:700 .78rem var(--font-mono); letter-spacing:.04em; color:var(--redline-deep)}
/* =====================================================================  3 · INVERSION  */
.ledger{padding:clamp(16px,3vw,36px)}
.led-head,.led-row{display:grid; grid-template-columns:1fr 1fr}
.led-head{font:600 .78rem var(--font-mono); letter-spacing:.1em; color:var(--muted); padding-bottom:.6rem; border-bottom:1px solid var(--rule)}
.led-head span:first-child{text-align:right; padding-right:clamp(12px,3vw,36px)}
.led-head span:last-child{padding-left:clamp(12px,3vw,36px); color:var(--ink)}
.led-row{border-bottom:1px solid var(--rule)}
.led-row>*{padding-block:1.05rem; font-family:var(--font-display); font-size:clamp(1rem,1.7vw,1.3rem); line-height:1.3}
.led-old{color:var(--graphite); font-weight:500; text-align:right; justify-items:end; padding-right:clamp(12px,3vw,36px); border-right:1px solid var(--rule)}
.led-new{font-weight:700; padding-left:clamp(12px,3vw,36px)}
.led-close{font:800 clamp(1.4rem,3vw,2.3rem)/1.15 var(--font-display); letter-spacing:-.02em; margin-top:clamp(24px,4vw,44px); text-wrap:balance}
@media (max-width:640px){
  .led-head{display:none}
  .led-row{grid-template-columns:1fr; padding-block:.8rem}
  .led-row>*{padding:.15rem 0}
  .led-old{text-align:left; justify-items:start; border-right:0}
  .led-new{padding-left:0}
}

/* =====================================================================  4 · LIVE (Blackout)  */
.live-grid{display:grid; gap:clamp(20px,3vw,40px); align-items:center}
@media (min-width:900px){ .live-grid{grid-template-columns:230px 1fr} }
.phone{width:100%; max-width:250px; margin-inline:auto; border:1px solid var(--line); border-radius:22px; background:var(--surface); padding:12px; display:grid; gap:10px; align-content:start}
.ph-status{display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:8px}
.ph-status .dot{width:8px; height:8px; border-radius:50%; background:var(--lit); margin-left:auto; visibility:hidden}
.ph-status .dot.on{visibility:visible}
.ph-letter{font-weight:700; color:var(--lit); min-width:1.6em}
.ph-body{min-height:210px; font:500 .86rem/1.4 var(--font-display)}
.ph-body>*{align-content:start; display:grid; gap:.6rem; padding:.2rem}
.ph-chip{display:inline-grid; padding:.5rem .6rem; border:1px solid var(--line); border-radius:4px; font-size:.82rem}
.ph-chip.act{background:var(--fg); color:var(--bg); font-weight:700; text-align:center}
.ph-flood{background-color:var(--cobalt); background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(10,10,8,.16) 6px 7px); color:var(--ink); border-radius:4px; padding:.7rem; font-weight:700}
.ph-small{font:500 .72rem var(--font-mono); color:var(--muted)}
.proj{container-type:inline-size; position:relative; aspect-ratio:16/9; background:var(--stage); border:1px solid var(--seam); overflow:hidden; color:var(--bone)}
.proj>*{position:absolute}
.pj-top{top:4%; left:4%; font-size:max(9px,1.7cqw); color:var(--ash)}
.pj-top b{color:var(--bone); font-weight:700}
.pj-prompt{left:8%; right:8%; top:13%; font:800 4.4cqw/1.12 var(--font-display); letter-spacing:-.02em; text-align:center; justify-items:center}
.pj-count{left:0; right:0; top:74%; text-align:center; justify-items:center; font-size:3cqw; font-weight:700}
.pj-bar{left:0; right:0; top:0; height:1.2%; background:var(--seam)}
.pj-bar i{display:block; height:100%; background:var(--bone); transform:scaleX(0); transform-origin:left}
.pj-camps{left:0; right:0; top:25%; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; font:700 2cqw/1.25 var(--font-display); padding-inline:5%; gap:3%}
.pj-camps>div{display:grid; gap:.3em; justify-items:center}
.pj-camps b{font:700 2.2cqw var(--font-mono); padding:.1em .5em; color:var(--ink)}
.kA{background:var(--volt)} .kB{background-color:var(--cobalt); background-image:repeating-linear-gradient(45deg,transparent 0 4px,rgba(10,10,8,.3) 4px 5px)}
.kC{background-color:var(--aqua); background-image:radial-gradient(rgba(10,10,8,.4) 1px,transparent 1.4px); background-size:5px 5px}
.pj-face{left:5%; right:5%; top:14%; display:grid; grid-template-columns:1fr 1fr; gap:4%}
.pj-face .q{display:grid; gap:.5em; align-content:start; border-top:.6cqw solid; padding-top:1.4cqw}
.pj-face .qa{border-color:var(--volt)} .pj-face .qb{border-color:var(--cobalt)}
.pj-face .q b{justify-self:start; font:700 2cqw var(--font-mono); padding:.1em .5em; color:var(--ink)}
.pj-face .q p{font:800 3.7cqw/1.14 var(--font-display); letter-spacing:-.02em}
.pj-face .q span{font-size:max(8px,1.5cqw); color:var(--ash)}
.pj-swing{left:8%; right:8%; top:68%; font:700 2cqw var(--font-display); color:var(--bone)}
.pj-bottom{left:4%; right:4%; bottom:4%; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.tele{display:flex; gap:2.4cqw; font-size:max(8px,1.5cqw); color:var(--ash)}
.tele .on{color:var(--bone)}
.pj-wm{width:11cqw}
.chip{background:var(--bone); transition:left 2s cubic-bezier(.3,0,.2,1), top 2s cubic-bezier(.3,0,.2,1), width 2s cubic-bezier(.3,0,.2,1); aspect-ratio:1}
.chip.pre{visibility:hidden}
.proj.quick .chip{transition-duration:.2s}
.proj:not([data-stage="1"]) .chip.cA{background:var(--volt)}
.proj:not([data-stage="1"]) .chip.cB{background-color:var(--cobalt); background-image:repeating-linear-gradient(45deg,transparent 0 2px,rgba(10,10,8,.35) 2px 3px)}
.proj:not([data-stage="1"]) .chip.cC{background:var(--aqua)}
.proj[data-stage="4"] .chip.swing{background-color:var(--cobalt); background-image:repeating-linear-gradient(45deg,transparent 0 2px,rgba(10,10,8,.35) 2px 3px)}
.proj[data-stage="1"] :is(.pj-camps,.pj-face,.pj-swing,.pj-bar),
.proj[data-stage="2"] :is(.pj-count,.pj-face,.pj-swing),
.proj[data-stage="3"] :is(.pj-prompt,.pj-count,.pj-camps,.pj-swing,.pj-bar),
.proj[data-stage="4"] :is(.pj-prompt,.pj-count,.pj-camps,.pj-bar){visibility:hidden}
.proj[data-stage="2"] .pj-prompt{top:8%; font-size:2.4cqw; color:var(--ash)}
.proj[data-stage="2"].run .pj-bar i{animation:fill 2s linear both}
@keyframes fill{to{transform:scaleX(1)}}
.steps{display:grid; gap:10px; margin-top:clamp(18px,3vw,32px)}
@media (min-width:760px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{display:grid; gap:.35rem; align-content:start; text-align:left; cursor:pointer; background:var(--stage); border:1px solid var(--seam); color:var(--ash); padding:.9rem}
.step .num{font:600 .75rem var(--font-mono); letter-spacing:.08em}
.bt.t,.bb.t{display:grid}
.bt{font:800 1.05rem/1.2 var(--font-display); letter-spacing:-.01em}
.step .bt{color:var(--bone)}
.step .bb{font-size:.92rem; line-height:1.4}
.step[aria-pressed="true"]{border-color:var(--bone)}
.step[aria-pressed="true"] .num{color:var(--redline-lit)}
.live-cta{margin-top:1.4rem}

/* =====================================================================  5 · MODES  */
.modes-top{display:grid; gap:clamp(20px,3vw,40px); align-items:start}
@media (min-width:940px){ .modes-top{grid-template-columns:1fr 250px 250px} }
.console{padding:clamp(16px,2.4vw,28px); display:grid; gap:1.4rem}
.console .wm-slot{width:min(100%,380px); margin-inline:auto}
.switch{position:relative; height:74px; border:1px solid var(--ink); border-radius:6px; background:var(--paper); touch-action:none; user-select:none; cursor:pointer}
.switch .ticks{position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr)}
.switch .ticks span{border-left:1px dashed var(--rule)}
.switch .ticks span:first-child{border-left:0}
.switch .hnotch{position:absolute; left:50%; top:0; bottom:0; width:0; border-left:2px solid var(--rule)}
.switch .hnotch::after{content: none; position:absolute; top:4px; left:5px; font:700 .72rem var(--font-mono); color:var(--graphite)}
.switch.h-on .hnotch{border-color:var(--redline)}
.switch.h-on .hnotch::after{color:var(--redline-deep)}
.knob{position:absolute; top:7px; bottom:7px; width:21%; left:12.5%; transform:translateX(-50%); background:var(--ink); border-radius:4px; cursor:grab;
  display:grid; place-items:center; color:var(--paper); font:700 1.15rem var(--font-mono); border:0; padding:0; box-shadow:3px 3px 0 var(--rule)}
.knob.snap{transition:left 90ms linear}
.knob:active{cursor:grabbing; box-shadow:1px 1px 0 var(--rule)}
.detents{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:.5rem}
.detents button{background:none; border:0; cursor:pointer; padding:.3rem 0; display:grid; gap:.15rem; justify-items:center; font:500 .78rem/1.2 var(--font-display); color:var(--graphite); text-align:center}
.detents button b{font:700 .9rem var(--font-mono)}
.detents button[aria-pressed="true"]{color:var(--ink)}
.detents button[aria-pressed="true"] b{color:var(--redline-deep)}
.console-foot{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between}
.ph-bubble{padding:.55rem .7rem; border-radius:10px; border:1px solid var(--line); font:500 .86rem/1.4 var(--font-display)}
.ph-bubble.me{justify-self:end; background:var(--ink); color:var(--paper); border-color:var(--ink); max-width:90%}
.ph-bubble.ai{background:var(--paper); min-height:7.6em}
.ph-sys{font:500 .72rem/1.45 var(--font-mono); color:var(--muted); min-height:4.4em}
.ph-tag{font:700 .68rem var(--font-mono); color:var(--muted); letter-spacing:.08em}
.log{padding:14px; display:grid; gap:.6rem; align-content:start; min-height:300px}
.log ol{display:grid; gap:.45rem; font-size:.8rem}
.log li{display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:baseline; font-family:var(--font-mono)}
.log li time{color:var(--muted)}
.log li:first-child{font-weight:700}
.mode-cards{display:grid; gap:12px; margin-top:clamp(20px,3vw,36px); grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mcard{padding:1rem; display:grid; gap:.5rem; align-content:start; text-align:left; cursor:pointer; font:inherit}
.mcard .ltr{font:700 1.1rem var(--font-mono)}
.mcard .bt{font-size:1.15rem}
.mcard .bb{font-size:.95rem; line-height:1.45; color:var(--graphite)}
.mcard[aria-pressed="true"]{border-color:var(--ink); box-shadow:3px 3px 0 var(--ink)}
.mcard[aria-pressed="true"] .ltr{color:var(--redline-deep)}
.mcard.h{background:var(--paper); border-style:dashed; box-shadow:none}
.modes-cta{margin-top:1.4rem}

/* =====================================================================  6 · PLAYBOOKS  */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem}
.filters button{cursor:pointer; background:var(--sheet); border:1px solid var(--rule); border-radius:4px; padding:.4rem .7rem; font:500 .85rem var(--font-display); color:var(--graphite)}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.rail{display:flex; gap:14px; overflow-x:auto; padding:4px 4px 16px; scroll-snap-type:x proximity}
.frame{flex:none; width:min(300px,80vw); padding:1rem; display:grid; gap:.8rem; align-content:start; scroll-snap-align:start}
.frame.dim{opacity:.35}
.frame .disc{font:600 .78rem var(--font-mono); letter-spacing:.06em; color:var(--graphite)}
.frame dl{display:grid; gap:.6rem}
.frame dt{font:600 .68rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--graphite)}
.frame dd{font-size:.95rem; line-height:1.4}
.pb-cta{margin-top:1rem}

/* =====================================================================  7 · PROOF  */
.receipt{position:relative; padding:clamp(16px,3vw,36px); display:grid; gap:1.4rem; max-width:860px}
.rc-body{display:grid; gap:1.6rem}
@media (min-width:760px){ .rc-body{grid-template-columns:200px 1fr} }
.rc-margin{display:grid; gap:.7rem; align-content:start}
.detector{font:500 .85rem var(--font-mono); color:var(--graphite); justify-items:start}
.rc-note{display:grid; grid-template-columns:22px 1fr; gap:.4rem; font-style:italic; color:var(--redline-deep); font-size:.98rem; line-height:1.35}
.rc-note .tx[lang="zh-CN"]{font-style:normal; font-weight:600}
.rc-note svg{position:static; width:22px; height:33px}
.proofs{display:grid; gap:1rem; padding-bottom:clamp(120px,18vw,170px)}
.proofs li{display:grid; grid-template-columns:auto 1fr; gap:.2rem .9rem; align-items:baseline}
.proofs .yes{grid-row:span 2; font:700 .72rem var(--font-mono); letter-spacing:.08em; background:var(--ink); color:var(--sheet); padding:.25rem .45rem; border-radius:3px; align-self:start; margin-top:.2rem}
.proofs p{color:var(--graphite)}
.rc-stamp{position:absolute; right:clamp(12px,4vw,44px); bottom:clamp(12px,3vw,30px); width:clamp(150px,26vw,230px)}
.own{max-width:40em; margin-top:1.6rem; color:var(--graphite)}
.hookline{font:800 clamp(1.3rem,2.6vw,2rem)/1.15 var(--font-display); letter-spacing:-.02em; margin-top:1.2rem}
.proof-cta{margin-top:1.2rem}

/* =====================================================================  8 · CAMPUS  */
.trust{display:grid; gap:14px}
@media (min-width:760px){ .trust{grid-template-columns:1fr 1fr} }
.tcard{padding:1.2rem 1.3rem; display:grid; gap:.6rem; align-content:start}
.tcard .lab{font:700 .72rem var(--font-mono); letter-spacing:.12em; color:var(--graphite)}
.facts{margin-top:14px; padding:.9rem 1.1rem; border:1px solid var(--ink); border-radius:4px; font-size:.9rem; font-weight:600}
.integ{margin-top:1rem; max-width:46em; color:var(--graphite)}
.campus-cta{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.6rem}

/* =====================================================================  9 · FOOTER (Blackout)  */
footer.blackout{padding-block:clamp(48px,8vw,96px) 32px}
.foot-wm{display:block; width:100%; cursor:ew-resize; touch-action:pan-y; padding-block:8px}
.foot-cap{font:500 .82rem var(--font-mono); color:var(--ash); margin-top:.9rem}
.foot-big{font:800 clamp(1.7rem,4vw,3.2rem)/1.1 var(--font-display); letter-spacing:-.02em; margin-top:clamp(36px,6vw,72px); text-wrap:balance}
.foot-door{margin-top:1.6rem; display:grid; gap:.8rem; justify-items:start}
.foot-door .code{flex-direction:column; align-items:flex-start}
.foot-door .code-cells{gap:8px}
.foot-door .code-cells input{width:clamp(52px,12vw,76px); height:clamp(64px,15vw,96px); font-size:clamp(1.8rem,5vw,2.8rem)}
.foot-help{color:var(--ash); font-size:.98rem}
.foot-cols{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-top:clamp(40px,6vw,72px); border-top:1px solid var(--seam); padding-top:24px}
.foot-cols h3{font:700 .72rem var(--font-mono); letter-spacing:.12em; color:var(--ash); text-transform:uppercase; margin-bottom:.7rem}
.foot-cols ul{display:grid; gap:.45rem}
.foot-cols a{text-decoration:none; font:500 .95rem var(--font-display)}
.foot-cols a:hover{text-decoration:underline}
.foot-end{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-top:32px; font-size:.8rem; color:var(--ash)}

/* =====================================================================  ASSET KIT (reference only)  */
#kit{background:var(--sheet); border-top:2px dashed var(--ink)}
.kit-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kcard{border:1px solid var(--rule); border-radius:10px; background:var(--paper); padding:1rem; display:grid; gap:.8rem; align-content:start}
.kcard h3{font:700 .74rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--graphite)}
.kcard .dark{background:var(--blackout); color:var(--bone); --lit:var(--redline-lit); padding:14px}
.kcard .pad{padding:14px}
.kit-modes{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.kit-icons{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end}
.kit-icons>*{flex:none}
.kit-marks{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.kit-marks figure{display:grid; gap:.3rem; justify-items:center; font:500 .7rem var(--font-mono); color:var(--graphite)}
.kit-fav{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap}
.kit-fav>*{flex:none}
.kit-fav .fav{width:16px; height:16px}
.kit-fav .big .fav{width:160px; height:160px}
.kit-fav .tab{background:var(--blackout); padding:8px}
.kit-fav .big{background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:10px 10px; border:1px solid var(--rule)}
.kit-trail{display:grid; grid-template-columns:110px 1fr; gap:.8rem; align-items:center}
.kit-trail ul{display:grid; gap:.4rem; font-size:.88rem}
.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.sw{display:grid; grid-template-columns:34px 1fr; gap:.55rem; align-items:center; font-size:.78rem; line-height:1.25}
.sw i{width:34px; height:34px; border:1px solid var(--rule); border-radius:4px}
.sw small{font-family:var(--font-mono); color:var(--graphite); display:block}

/* ---------- Toast (the "door") ---------- */
.door{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:80; width:min(520px,calc(100vw - 32px)); background:var(--ink); color:var(--paper);
  border-radius:6px; padding:.85rem 1rem; display:grid; gap:.3rem; visibility:hidden; --lit:var(--redline-lit)}
.door.on{visibility:visible}
.door .route{font:700 1rem var(--font-mono); color:var(--redline-lit)}
.door .msg{font:500 .95rem/1.35 var(--font-display)}
.door .proto{font:500 .7rem var(--font-mono); color:var(--ash)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
}

.join-screen{min-height:calc(100dvh - 64px); display:grid; align-content:center}

/* usability pass 2026-11-11: exact rules, later declarations win */
.code-form { display: flex; align-items: center; gap: 6px; }
.code-input {
  width: clamp(148px, 16vw, 210px);
  height: 38px;
  padding: 0 .65rem;
  font: 600 .88rem var(--font-mono);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--fg);
  border-radius: 4px;
}
.code-input::placeholder { color: var(--muted); font-weight: 400; opacity: .85; }
.code-submit { padding: .48rem .78rem; height: 38px; font-size: .88rem; white-space: nowrap; }
.role-grid { display: grid; gap: 12px; margin-top: 1.5rem; }
@media (min-width: 640px) { .role-grid { grid-template-columns: 1.15fr .85fr; } }
.role-card { padding: 1rem 1.1rem; display: grid; gap: .65rem; align-content: start; }
.role-card .code-form { width: 100%; }
.role-card .code-input { flex: 1; width: auto; min-width: 0; }
.demo-pill {
  display: inline-block;
  font-size: .78rem;
  color: var(--redline-deep);
  background: var(--paper);
  border: 1px dashed var(--redline);
  border-radius: 4px;
  padding: .32rem .55rem;
  text-decoration: none;
}
.demo-pill:hover { background: var(--rule); }
.tap-cue {
  font: 600 .84rem/1.4 var(--font-display);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--redline);
  border-radius: 4px;
  padding: .45rem .7rem;
}
.segb {
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1.5px dashed #B5AFA0;
  box-shadow: 0 1px 0 var(--rule);
  margin: .18em .12em;
  padding: .14em .44em;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  position: relative;
  line-height: 1.38;
  transition: transform 80ms linear, background-color 120ms linear, border-color 120ms linear, opacity 120ms linear;
}
.segb:hover {
  background: var(--rule);
  border-style: solid;
  border-color: var(--ink);
}
.segb:active {
  transform: translateY(1px);
  box-shadow: none;
  background: var(--rule);
  border-style: solid;
  border-color: var(--ink);
}
.segb.held {
  opacity: .48;
  background: transparent;
  border: 1px solid var(--rule);
  box-shadow: none;
  text-decoration: none;
}
.segb.held::after {
  content: " ✓";
  font: 700 .78em var(--font-mono);
  color: var(--moss);
}
.segb.caught {
  border-color: transparent;
  box-shadow: none;
  background: rgba(240, 58, 23, .08);
}
.round[data-state="done"] .segb { cursor: default; }
.flow-grid { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 780px) { .flow-grid { grid-template-columns: repeat(3, 1fr); } }
.flow-card { padding: 1.15rem 1.25rem; display: grid; gap: .5rem; align-content: start; }
.flow-card h3 { font-size: 1.08rem; color: var(--ink); }
.flow-card p { font-size: .95rem; color: var(--graphite); }
.ph-badge {
  font: 700 .68rem/1.2 var(--font-mono);
  color: var(--lit);
  background: rgba(240, 58, 23, .1);
  padding: .2rem .42rem;
  border-radius: 3px;
}
.blackout .ph-badge { background: rgba(255, 90, 54, .16); }
@media (max-width: 480px) {
  .segb { white-space: normal; text-align: left; }
  .nav .code-form { display: none; }
}
.hero-copy .role-grid { grid-template-columns: 1fr; gap: 12px; max-width: 460px; }
/* PWA 安装/更新/微信提示样式（依赖 site-tokens.css 变量） */
.pwa-sheet-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(20,20,19,.55);display:flex;align-items:flex-end;justify-content:center}
.pwa-sheet{width:min(520px,100%);background:var(--card,#FFFDF9);color:var(--text,#141413);border-radius:18px 18px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));border:1.5px solid #141413;box-shadow:0 -6px 0 #141413}
.pwa-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}.pwa-head img{border-radius:14px}
.pwa-head b{display:block;font-size:19px}.pwa-head span{font-size:14px;color:var(--text-2,#475569)}
.pwa-steps{margin:0 0 16px;padding-left:1.4em;line-height:2.3;font-size:15px}
.pwa-sheet kbd,.pwa-wechat kbd{font:inherit;font-weight:600;background:var(--paper-2,#EFEDE6);color:var(--text,#141413);border-radius:8px;padding:2px 8px}
.pwa-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pwa-wechat{position:fixed;inset:0;z-index:1001;background:rgba(11,15,23,.94);color:#fff;padding:96px 32px;display:flex;flex-direction:column;gap:14px}
.pwa-wechat .pwa-arrow{position:absolute;top:10px;right:22px;font-size:56px;color:var(--redline,#F03A17)}
.pwa-wechat b{font-size:24px}.pwa-wechat p{color:var(--mist,#C9D3E0);line-height:1.7}
.pwa-update{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:999;max-width:480px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ink-900,#141413);color:#F4F3EF;border-radius:14px;padding:10px 10px 10px 18px;border:1.5px solid #141413;box-shadow:3px 3px 0 #000}
html:not(.can-install) [data-pwa-install-android]{display:none}
html.is-standalone [data-pwa-install]{display:none}
.pwa-sheet .btn,.pwa-wechat .btn,.pwa-update .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:12px;font:700 16px var(--font-sans,system-ui);border:1.5px solid #141413;background:#FFFDF9;color:#141413;cursor:pointer}
.pwa-sheet .btn.ink{background:#141413;border-color:#141413;color:#F4F3EF}
.pwa-update .btn.seal{background:#F03A17;border-color:#17160F;color:#17160F;min-height:40px}
.pwa-wechat .btn.ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.pwa-wechat .btn.quiet{background:transparent;border-color:transparent}