:root{
  --bg:#0F0F13; --surface:#1F1F2E; --surface-2:#2A2A3E;
  --fg:#F1F5F9; --fg-2:#D1D5DB; --muted:#6B7280;
  --indigo:#6366F1; --lab:#3B82F6; --pf:#10B981;
  --ok:#10B981; --warn:#F59E0B; --bad:#EF4444;
  --border:rgba(255,255,255,.08);
  --sans:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

/* atmosphere */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 100%)}
.glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:.35;z-index:-1;transition:background 1.2s}
.glow--a{width:520px;height:520px;top:-140px;right:-100px;background:var(--indigo);animation:drift 22s ease-in-out infinite alternate}
.glow--b{width:420px;height:420px;bottom:-160px;left:-120px;background:var(--indigo);opacity:.16;animation:drift 28s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(-60px,50px)}}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50}
.progress i{display:block;height:100%;width:100%;background:var(--indigo);transform:scaleX(0);transform-origin:0 50%}

/* header */
.site-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:28px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:26px;height:26px;fill:var(--indigo)}
.brand-name{font-weight:700;font-size:1.15rem;letter-spacing:-.015em}
.header-status{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:10px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--indigo);display:inline-block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* hero */
.hero{min-height:calc(100vh - 100px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;padding:24px 0 72px}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);margin-bottom:22px}
.beats{font-size:clamp(3.4rem,8.4vw,7rem);line-height:.98;font-weight:700;letter-spacing:-.035em;display:flex;flex-direction:column;margin-bottom:30px}
.beat{color:var(--surface-2);transition:color .6s var(--ease),transform .6s var(--ease);transform:translateX(0)}
.hero[data-phase=play] .beat--play,.hero[data-phase=break] .beat--break,.hero[data-phase=learn] .beat--learn{color:var(--fg);transform:translateX(14px)}
.hero[data-phase=break] .beat--break{animation:jolt .5s steps(2) 1}
@keyframes jolt{25%{transform:translateX(20px) skewX(-4deg)}75%{transform:translateX(8px) skewX(3deg)}}
.intro{max-width:520px;color:var(--fg-2);font-size:1.15rem}
.launch-note{max-width:520px;margin-top:22px;color:var(--muted);font-size:.95rem;display:flex;gap:14px;align-items:flex-start}
.rule{flex:none;width:28px;height:1px;background:var(--indigo);margin-top:.85em}
.scroll-cue{margin-top:44px;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .3s}
.scroll-cue svg{width:12px;height:16px;animation:bob 2s ease-in-out infinite}
.scroll-cue:hover{color:var(--fg)}
@keyframes bob{50%{transform:translateY(5px)}}

.hero-stage{position:relative;display:grid;place-items:center;perspective:900px}
.mark{width:min(440px,86%);aspect-ratio:1;overflow:visible;fill:var(--indigo);transition:transform .25s ease-out;filter:drop-shadow(0 0 60px rgba(99,102,241,.25))}
.mark .sq,.mark .cell{transform-box:fill-box;transform-origin:center;transition:transform 1s var(--ease),opacity 1s,fill .6s}
.sq--a{opacity:.55;animation:enterA 1.1s var(--ease) backwards}
.sq--c{opacity:.75;animation:enterC 1.1s var(--ease) .3s backwards}
.cell{animation:enterB 1.1s var(--ease) .15s backwards}
@keyframes enterA{from{transform:translate(-30px,-30px);opacity:0}}
@keyframes enterB{from{transform:scale(.4);opacity:0}}
@keyframes enterC{from{transform:translate(30px,30px);opacity:0}}
.hero[data-phase=break] .sq--a{transform:translate(-9px,-9px) rotate(-8deg)}
.hero[data-phase=break] .sq--c{transform:translate(10px,10px) rotate(7deg)}
.hero[data-phase=break] .cell{transform:translate(calc(var(--dx)*1px),calc(var(--dy)*1px)) rotate(var(--r));transition-duration:.55s}
.hero[data-phase=break] .cell.bad{fill:var(--bad)}
.hero[data-phase=break] .sq,.hero[data-phase=break] .cell{transition-timing-function:cubic-bezier(.2,1.4,.4,1)}
.hero[data-phase=learn] .cell{transition-duration:1.1s}

.readout{margin-top:26px;font-family:var(--mono);font-size:.82rem;display:flex;gap:14px;align-items:center;padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:rgba(31,31,46,.6);min-width:290px;justify-content:flex-start}
.readout .code{font-weight:600;color:var(--ok);transition:color .3s}
.readout .msg{color:var(--fg-2)}
.hero[data-phase=break] .readout .code{color:var(--bad)}
.hero[data-phase=learn] .readout .code{color:var(--warn)}

/* manifesto */
.manifesto{padding:120px 0 100px;max-width:980px}
.statement{font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.2;font-weight:500;letter-spacing:-.025em}
.statement .w{color:var(--surface-2);transition:color .35s}
.statement .w.on{color:var(--fg)}

/* rooms */
.rooms{display:flex;flex-direction:column;gap:32px;padding-bottom:40px}
.room{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:48px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,rgba(31,31,46,.7),rgba(31,31,46,.35));position:relative;overflow:hidden}
.room::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.room--lab{--accent:var(--lab)}
.room--pf{--accent:var(--pf)}
.room-tag{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--muted);margin-bottom:34px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--border);border-radius:99px;text-transform:uppercase;font-size:.68rem;color:var(--fg-2)}
.chip .dot{background:var(--accent);width:6px;height:6px}
.chip--quiet{color:var(--muted)}
.room-logo{height:40px;width:auto;margin-bottom:26px}
.room h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.025em;font-weight:600;margin-bottom:16px}
.room p{color:var(--fg-2)}
.facts{list-style:none;margin-top:26px;display:grid;gap:8px;font-family:var(--mono);font-size:.78rem;color:var(--fg-2)}
.facts li{display:flex;gap:12px}
.facts li::before{content:"";width:10px;height:1px;background:var(--accent);margin-top:.8em;flex:none}
.facts .muted{color:var(--muted)}

.panel{border:1px solid var(--border);border-radius:10px;background:#15151d;font-family:var(--mono);font-size:.8rem;overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:.7rem;letter-spacing:.04em}
.panel-bar i{width:8px;height:8px;border-radius:50%;background:var(--surface-2)}
.panel-bar span{margin-left:8px;white-space:nowrap}
.console{padding:18px 20px;min-height:340px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.console .ln{opacity:0;transform:translateY(4px);animation:ln .35s var(--ease) forwards}
@keyframes ln{to{opacity:1;transform:none}}
.console .req{color:var(--fg)}
.console .verb{color:var(--lab)}
.console .body{color:var(--muted)}
.console .res{margin-bottom:10px}
.console .s-ok{color:var(--ok)}.console .s-warn{color:var(--warn)}.console .s-bad{color:var(--bad)}
.console .caret{display:inline-block;width:7px;height:1em;background:var(--lab);vertical-align:-2px;animation:pulse 1s steps(2) infinite}

.panel--pf{display:grid;grid-template-columns:1fr 34px 1.1fr;align-items:stretch;border:0;background:none;overflow:visible;gap:0}
.pf-tree,.pf-card{border:1px solid var(--border);border-radius:10px;background:#15151d;overflow:hidden}
.tree{padding:16px 18px;color:var(--fg-2);line-height:1.75;min-height:250px;font-size:.78rem}
.tree .tl{display:block;opacity:.15;transition:opacity .4s,color .4s}
.tree .tl.on{opacity:1}
.tree .tl.hot{color:var(--pf)}
.pf-beam{position:relative;display:grid;place-items:center}
.pf-beam i{display:block;width:1px;height:100%;background:linear-gradient(transparent,var(--pf),transparent);opacity:.25;position:relative}
.pf-beam i::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;background:var(--pf);animation:beam 2.4s linear infinite}
@keyframes beam{from{top:0;opacity:0}20%,80%{opacity:1}to{top:100%;opacity:0}}
.ro{margin-left:auto;font-weight:500;color:var(--pf);letter-spacing:.1em;font-size:.64rem;border:1px solid rgba(16,185,129,.4);padding:2px 7px;border-radius:4px}
.pf-body{padding:18px 20px 20px}
.pf-body h3{font-family:var(--sans);font-size:1.2rem;font-weight:600;letter-spacing:-.015em}
.pf-sub{font-size:.7rem;color:var(--muted);margin:2px 0 18px}
.meter{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:.72rem;margin-bottom:14px;color:var(--fg-2)}
.meter em{font-style:normal;color:var(--muted)}
.meter div{grid-column:1/-1;height:6px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.meter i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease)}
.meter[data-s=ok] i{background:var(--ok)}.meter[data-s=warn] i{background:var(--warn)}.meter[data-s=bad] i{background:var(--bad)}
.meter.on[data-s=ok] i{transform:scaleX(1)}.meter.on[data-s=warn] i{transform:scaleX(.78)}.meter.on[data-s=bad] i{transform:scaleX(.06)}
.pf-note{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}

/* closing */
.closing{text-align:center;padding:140px 0 120px;display:flex;flex-direction:column;align-items:center}
.closing-mark{width:72px;height:72px;fill:var(--indigo);margin-bottom:34px;overflow:visible}
.closing-mark rect{transform-box:fill-box;transform-origin:center;animation:breathe 4s ease-in-out infinite}
.closing-mark rect:nth-child(2){animation-delay:.3s}.closing-mark rect:nth-child(3){animation-delay:.6s}
@keyframes breathe{50%{transform:translate(3px,3px)}}
.closing h2{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1.08;font-weight:700}
.closing p{color:var(--fg-2);max-width:460px;margin-top:16px}
.status-list{margin-top:40px;display:grid;gap:0;font-family:var(--mono);font-size:.8rem;border:1px solid var(--border);border-radius:10px;overflow:hidden;min-width:min(360px,100%)}
.status-list div{display:flex;justify-content:space-between;gap:32px;padding:14px 20px;color:var(--fg-2)}
.status-list div+div{border-top:1px solid var(--border)}
.status-list .k{font-weight:600}.k.lab{color:var(--lab)}.k.pf{color:var(--pf)}

.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0 40px;border-top:1px solid var(--border);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.site-footer a{text-decoration:none}.site-footer a:hover{color:var(--fg)}

/* reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* privacy page */
.privacy-page .main-content{padding-bottom:40px}
.policy-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;padding:40px 0 60px}
.privacy-title{font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin-bottom:20px}
.privacy-intro{color:var(--fg-2)}
.privacy-meta{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:22px}
.privacy-panel{border:1px solid var(--border);border-radius:12px;background:rgba(31,31,46,.5)}
.privacy-row{padding:24px 28px}.privacy-row+.privacy-row{border-top:1px solid var(--border)}
.privacy-row h2{font-size:1.05rem;font-weight:600;margin-bottom:8px}
.privacy-row p{color:var(--fg-2);font-size:.95rem}
.privacy-row a{color:var(--indigo)}
.privacy-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0 40px;border-top:1px solid var(--border);font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.privacy-footer a{text-decoration:none}

/* privacy responsive */
@media (max-width:960px){.policy-layout{grid-template-columns:1fr;gap:32px}}

/* ===== single-view layout ===== */
.app{height:100vh;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.site-header{padding:clamp(14px,2.6vh,26px) 0}
.stage{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:0;padding:0 0 clamp(8px,1.5vh,16px)}
.hero{min-height:0;display:flex;flex-direction:column;padding:0;gap:0}
.eyebrow{margin-bottom:clamp(8px,2vh,20px)}
.hero-row{display:flex;align-items:center;gap:clamp(12px,2vw,32px)}
.beats{font-size:clamp(2.6rem,min(5.6vw,12.5vh),6.2rem);margin-bottom:0}
.hero-stage{flex:1;display:grid;place-items:center;min-width:0;overflow:visible}
.mark{width:min(100%,clamp(120px,26vh,240px))}
.readout{margin:clamp(10px,2.2vh,22px) 0 clamp(10px,2.2vh,22px);min-width:0;align-self:flex-start;font-size:.78rem}
.intro{font-size:clamp(.95rem,2.1vh,1.1rem);max-width:480px}
.launch-note{margin-top:clamp(8px,1.6vh,16px);font-size:.85rem}

.rooms{display:grid;grid-template-rows:1fr 1fr;gap:clamp(10px,2vh,20px);height:100%;min-height:0;padding:0;max-height:min(100%,660px);align-self:center}
.room{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,2vw,28px);padding:clamp(14px,2.4vh,26px) clamp(16px,2vw,28px);min-height:0;border-radius:12px}
.room-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.room-tag{margin-bottom:clamp(8px,1.6vh,16px)}
.room-logo{align-self:flex-start;height:clamp(24px,4vh,34px);margin-bottom:clamp(8px,1.6vh,16px)}
.room h2{font-size:clamp(1.05rem,2.5vh,1.5rem);margin-bottom:8px}
.room p{font-size:clamp(.78rem,1.7vh,.9rem);line-height:1.5}
.status{margin-top:clamp(8px,1.6vh,14px);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.panel{min-height:0;display:flex;flex-direction:column}
.panel--lab .panel-bar{flex:none}
.console{flex:1;min-height:0;padding:12px 16px;font-size:clamp(.66rem,1.5vh,.78rem);line-height:1.6;overflow:hidden;white-space:normal}
.console .res{margin-bottom:6px}
.console .body{margin-left:2px}
.panel--pf{display:grid;grid-template-columns:.9fr 22px 1.1fr;min-height:0}
.pf-tree,.pf-card{min-height:0;display:flex;flex-direction:column}
.tree{min-height:0;flex:1;padding:10px 12px;font-size:clamp(.6rem,1.4vh,.74rem);line-height:1.6;overflow:hidden}
.pf-body{padding:10px 14px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.pf-body h3{font-size:clamp(.9rem,2vh,1.05rem);margin-bottom:clamp(6px,1.4vh,14px)}
.meter{margin-bottom:clamp(6px,1.3vh,12px);font-size:clamp(.6rem,1.4vh,.72rem)}
.site-footer{padding:clamp(10px,2vh,20px) 0 clamp(12px,2.4vh,24px);font-size:.68rem}
.panel-bar{padding:8px 12px}


/* small or short screens: fall back to a normal scrolling page */
@media (max-width:820px),(max-height:520px){
  .app{height:auto;overflow:visible}
  .stage{grid-template-columns:1fr;gap:28px;padding-bottom:24px}
  .rooms{grid-template-rows:none;height:auto;max-height:none}
  .room,.room .panel{display:grid}
  .room{grid-template-columns:1fr}
  .panel--pf{grid-template-columns:1fr}
  .pf-beam{height:20px}.pf-beam i{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--pf),transparent)}.pf-beam i::after{display:none}
  .console{min-height:220px}.tree{min-height:150px}
  .beats{font-size:clamp(2.6rem,14vw,4.4rem)}
}
@media (max-width:520px){.wrap{width:calc(100% - 32px)}.header-status{font-size:.64rem}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
.room .panel{align-self:stretch}.room{align-items:stretch}.ro{white-space:nowrap}.tree .tl{white-space:pre}.pf-card{min-width:0}.meter em{white-space:nowrap}
.room{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}.panel--pf{grid-template-columns:minmax(0,.85fr) 14px minmax(0,1.15fr)}.meter{gap:2px 8px}.pf-body{padding:8px 12px}.tree{padding:10px}

/* ===== v3: hero on top, compact rooms below ===== */
.stage{grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:stretch;gap:clamp(10px,2vh,20px)}
.hero{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:0}
.hero-left{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero-right{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.beats{font-size:clamp(2.4rem,min(6vw,11.5vh),6rem)}
.hero-stage{align-self:center;flex:none;margin:0 auto}
.mark{width:clamp(90px,21vh,200px)}
.readout{margin:clamp(8px,1.8vh,16px) 0}
.rooms{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;height:auto;max-height:none;gap:clamp(10px,1.6vw,20px);align-self:end}
.room{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:clamp(12px,2vh,20px) clamp(14px,1.6vw,22px);gap:clamp(12px,1.4vw,20px);align-items:center}
.room-tag{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(6px,1.2vh,12px)}
.room-logo{height:clamp(20px,3.4vh,28px);margin:0}
.room h2{font-size:clamp(.95rem,2.2vh,1.2rem);margin-bottom:6px}
.room p{font-size:clamp(.72rem,1.6vh,.84rem)}
.room p .status{display:block;margin-top:8px}
.viz{position:relative;height:clamp(84px,17vh,140px);border:1px solid var(--border);border-radius:8px;background:#15151d;overflow:hidden;font-family:var(--mono)}

/* Lab: packets cross a gate and come back as status codes */
.lane{position:absolute;left:0;right:50%;top:22%;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.5))}
.pk{position:absolute;top:-3px;left:0;width:7px;height:7px;background:var(--lab);animation:pk 2.4s linear infinite}
.pk:nth-child(2){animation-delay:.6s}.pk:nth-child(3){animation-delay:1.2s}.pk:nth-child(4){animation-delay:1.8s}
@keyframes pk{from{transform:translateX(0);opacity:0}15%{opacity:1}to{transform:translateX(min(100%,150px));opacity:1}}
.lane{overflow:visible}
.gate{position:absolute;left:50%;top:8%;bottom:8%;width:1px;background:var(--border)}
.gate span{position:absolute;left:-4px;top:calc(22% - 8px + 4px);width:9px;height:9px;border:1px solid var(--lab);animation:gate 2.4s ease-in-out infinite}
@keyframes gate{50%{background:rgba(59,130,246,.5)}}
.ticker{position:absolute;left:0;right:0;bottom:14%;height:34px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.ticker-track{display:flex;gap:10px;width:max-content;animation:tick 14s linear infinite}
.ticker b{font-weight:600;font-size:.8rem;padding:6px 10px;border:1px solid currentColor;border-radius:5px;background:rgba(255,255,255,.02)}
.ticker .s-ok{color:var(--ok)}.ticker .s-warn{color:var(--warn)}.ticker .s-bad{color:var(--bad)}
@keyframes tick{to{transform:translateX(-50%)}}

/* Portfolio: a scan sweeps a read-only render; bars fill in, gaps stay visible */
.viz--pf{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.pf-path{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;color:var(--muted);white-space:nowrap;gap:8px}
.viz--pf .ro{margin:0;font-size:.55rem}
.pf-bars{display:grid;gap:clamp(4px,1vh,9px);flex:1;align-content:center}
.bar{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;font-size:.62rem;color:var(--fg-2)}
.bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar i{display:block;height:5px;border-radius:2px;transform-origin:0 50%;animation:fill 6s var(--ease) infinite}
.bar--ok i{background:var(--ok);--to:1}.bar--warn i{background:var(--warn);--to:.78;animation-delay:.25s}.bar--bad i{background:var(--bad);--to:.07;animation-delay:.5s}
@keyframes fill{0%{transform:scaleX(0)}25%,88%{transform:scaleX(var(--to))}100%{transform:scaleX(0)}}
.scan{position:absolute;top:0;bottom:0;width:1px;background:var(--pf);box-shadow:0 0 14px 2px rgba(16,185,129,.35);animation:scan 6s linear infinite}
@keyframes scan{0%{left:0;opacity:0}5%{opacity:1}25%{left:100%;opacity:1}30%,100%{left:100%;opacity:0}}

@media (max-width:820px),(max-height:520px){
  .hero{grid-template-columns:1fr}
  .rooms{grid-template-columns:1fr}
  .room{grid-template-columns:1fr}
  .viz{height:120px}
}
.chip{white-space:nowrap;flex:none}.room-tag{gap:8px}.hero-stage{margin:0 0 0 clamp(0px,4vw,60px)}.bar{grid-template-columns:88px 1fr}
.room-copy{overflow:hidden}
.room-tag .room-logo{min-width:0;max-width:calc(100% - 96px);object-fit:contain;object-position:left}.room-tag .chip{padding:3px 9px;font-size:.6rem}

/* v3.1: align both cards row-for-row */
.room{align-items:stretch}
.room-copy{justify-content:flex-start}
.room h2{min-height:2.3em;display:flex;align-items:flex-start}
.room p{min-height:3em}
.viz{height:auto;align-self:stretch;min-height:clamp(84px,17vh,140px)}
/* Lab: packets travel on the same row level as the ticker so the flow reads as one thing */
.lane{top:34%}
.gate span{top:calc(34% - 4px)}
.ticker{bottom:auto;top:52%}

/* v4: playable mark */
.hero-stage{cursor:pointer;position:relative;outline:none;-webkit-tap-highlight-color:transparent;padding:6px;border-radius:12px}
.hero-stage:focus-visible{box-shadow:0 0 0 2px var(--indigo)}
.hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:opacity .4s,color .3s;animation:pulse 2.4s ease-in-out infinite}
.hero-stage:hover .hint{color:var(--fg)}
.hero.played .hint{opacity:0;animation:none}
.hero-stage:hover .mark{filter:drop-shadow(0 0 60px rgba(99,102,241,.4))}
.hero-stage:active .mark{transform:scale(.97)}

/* ===== performance pass: same look, cheaper to paint ===== */
/* 1. glows: soft radial gradients instead of a 120px blur filter */
.glow{filter:none;background:radial-gradient(closest-side,var(--indigo),transparent);will-change:transform}
.glow--a{width:900px;height:900px;top:-340px;right:-330px;opacity:.28}
.glow--b{width:760px;height:760px;bottom:-340px;left:-300px;opacity:.12}
/* 2. mark: static glow layer instead of a filter that repaints every frame */
.mark,.hero-stage:hover .mark{filter:none}
.hero-stage::before{content:"";position:absolute;inset:-15%;border-radius:50%;background:radial-gradient(closest-side,rgba(99,102,241,.22),transparent);opacity:.9;transition:opacity .4s;pointer-events:none}
.hero-stage:hover::before{opacity:1.4}
.mark{position:relative;will-change:transform}
/* 3. move work off the layout/paint path */
.ticker-track{will-change:transform}
.viz--pf,.viz--lab{container-type:inline-size;contain:paint}
.room{contain:paint}
.scan{left:0;box-shadow:none;width:2px;background:linear-gradient(90deg,transparent,var(--trace));animation:scanT 6s linear infinite}
@keyframes scanT{0%{transform:translateX(0);opacity:0}5%{opacity:1}25%{transform:translateX(100cqw);opacity:1}30%,100%{transform:translateX(100cqw);opacity:0}}

/* header status: plain text, no dot */
.header-status{letter-spacing:.08em}
/* Portfolio is only planned: static render, no motion */
.viz--pf .bar i{animation:none;transform:scaleX(var(--to))}
.viz--pf .scan{display:none}


/* ===== calmer, less template-like (final pass) ===== */
/* flat background: no glow, no dot grid, no mark halo */
.bg,.glow,.hero-stage::before{display:none!important}
/* cards: plain surface, plain border, no coloured edge */
.room{background:#17171f;border:1px solid var(--border)}
.room::before{display:none}
.viz{background:#101016}
/* labels: normal sans-serif instead of spaced uppercase mono */
.eyebrow,.header-status,.chip,.status,.hint,.site-footer,.privacy-meta,.scroll-cue{font-family:var(--sans);text-transform:none;letter-spacing:0}
.eyebrow{font-size:.95rem;font-weight:500;color:var(--fg-2)}
.header-status{font-size:.9rem;color:var(--muted)}
.chip{font-size:.78rem;border-radius:6px;padding:3px 10px;color:var(--fg-2)}
.room p .status{font-size:.82rem;color:var(--muted)}
.hint{font-size:.78rem;color:var(--muted);animation:none}
.site-footer{font-size:.85rem}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-links a{color:var(--muted);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--fg)}
.room-tag .chip{font-size:.74rem}
.header-status{font-family:var(--sans)}.privacy-footer{font-family:var(--sans);font-size:.85rem}.privacy-footer a{color:var(--muted)}.privacy-footer a:hover{color:var(--fg)}