/* ═══════════════════════════════════════════════════════════════════
   EARTH ICU · css/style.css — the single shared stylesheet
   Layered top-to-bottom (later layers extend/override earlier ones):
     1 · design system (all six rooms)
     2 · surgical-room layer (rooms 01-05, admissions guarded via
         body:not([data-room="00"]) on shared hero selectors)
     3 · discharge finale layer (certificate, room 05 only)
     4 · onboarding (boot enter button, how-to modal, progress chip,
         first-time hint, hero CTA sizing)
     5 · layout integrity (wrapping patient-file rows, stacked vitals
         labels, scrollable panels + clipped-edge fade, short viewports)
     6 · readability & accessibility (font floors, AA contrast token,
         focus rings, FX-reduce layer)
     7 · reduce-effects layer (html.fx-reduce — toggle in the topbar)
     8 · discharge finale scroll (certificate column)
     9 · field notes (accordion briefing + live demo widgets, about panel)
    10 · mobile layer (≥44px targets, nav snap, low-power trims)
    11 · polish (doctor-name input, PNG download, demo shortcut,
         room-to-room page transition)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · shared design system ─────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════
   EARTH ICU — 00 // ADMISSIONS
   Planetary Intensive Care Unit · pure vanilla HTML/CSS/ES6+
   Palette: void #030508 · critical #ff1e56 · emerald #00f59b · cyan #00f5d4
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --void:#030508;
  --critical:#ff1e56;
  --emerald:#00f59b;
  --cyan:#00f5d4;
  --amber:#ffb84d;
  --ink:#d7f5ee;
  --dim:#6da39b;
  --faint:#3d6a63;
  --line:rgba(0,245,212,.16);
  --line-strong:rgba(0,245,212,.38);
  --acc:#ff1e56;            /* dynamic vitals accent — JS lerps red→emerald */
  --accA:hsla(347,100%,52%,.5);
  --accB:hsla(347,100%,52%,.16);
  --rx:0deg; --ry:0deg;      /* 3D spatial parallax */
  --stab:24%;                /* planetary stability bar */
  --fd:'Orbitron','Share Tech Mono',ui-monospace,'Cascadia Mono',monospace;
  --fm:'Share Tech Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{background:var(--void)}
body{
  background:
    radial-gradient(1200px 700px at 50% 118%, rgba(0,60,66,.16), transparent 62%),
    radial-gradient(900px 500px at 8% -10%, rgba(255,30,86,.06), transparent 60%),
    var(--void);
  color:var(--ink);
  font:13px/1.5 var(--fm);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(0,245,212,.28);color:#eafffb}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#04080c}
::-webkit-scrollbar-thumb{background:#0d2530;border:1px solid var(--line)}
:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup,sub{font-size:.62em;line-height:0}

/* ── deep-space canvas ─────────────────────────────────────────────── */
#space{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}

/* ── CRT overlay: scanlines + vignette + roaming band + flicker ────── */
.crt{position:fixed;inset:0;z-index:80;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 3px);
  animation:crtFlicker 7s steps(60) infinite;
}
.crt::before{ /* vignette */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 46%, transparent 55%, rgba(0,0,0,.42) 88%, rgba(0,0,0,.7) 100%);
}
.crt::after{ /* slow diagnostic scan band */
  content:"";position:absolute;left:0;right:0;height:180px;top:-200px;
  background:linear-gradient(180deg, transparent, rgba(140,255,235,.028) 45%, rgba(140,255,235,.05) 50%, transparent);
  animation:crtBand 9s linear infinite;
}
@keyframes crtBand{to{transform:translateY(calc(100vh + 400px))}}
@keyframes crtFlicker{0%,94%,100%{opacity:1}95%{opacity:.927}96.5%{opacity:.965}98%{opacity:.94}}

/* ── 3D spatial stage + tilt layer ─────────────────────────────────── */
#stage{position:fixed;inset:0;z-index:10;perspective:1400px;perspective-origin:50% 44%}
#tilt{position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;will-change:transform;
  display:flex;flex-direction:column;padding:10px 16px 8px}
.col-left,.col-right{transform:translateZ(46px)}
/* col-center stays fully interactive: hit-testing through a
   pointer-events:none subtree is unreliable under the 3-D tilt, and the
   organ canvas tracks the cursor from window-level mousemove anyway */
.col-center{transform:translateZ(0)}
.col-center .pe{pointer-events:auto}

/* ── glass biometric panels + sci-fi tick corners ──────────────────── */
.panel{position:relative;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(165deg, rgba(10,25,34,.74), rgba(4,10,16,.52));
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(0,0,0,.35), inset 0 0 34px rgba(0,245,212,.045), 0 14px 44px rgba(0,0,0,.55);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.panel::after{ /* 4 corner reticles, 8 tick strokes */
  content:"";position:absolute;inset:5px;pointer-events:none;
  --t:var(--line-strong);--L:12px;
  background:
    linear-gradient(var(--t),var(--t)) left 0 top 0/var(--L) 1px,
    linear-gradient(var(--t),var(--t)) left 0 top 0/1px var(--L),
    linear-gradient(var(--t),var(--t)) right 0 top 0/var(--L) 1px,
    linear-gradient(var(--t),var(--t)) right 0 top 0/1px var(--L),
    linear-gradient(var(--t),var(--t)) left 0 bottom 0/var(--L) 1px,
    linear-gradient(var(--t),var(--t)) left 0 bottom 0/1px var(--L),
    linear-gradient(var(--t),var(--t)) right 0 bottom 0/var(--L) 1px,
    linear-gradient(var(--t),var(--t)) right 0 bottom 0/1px var(--L);
  background-repeat:no-repeat;
}
.p-head{display:flex;align-items:center;gap:8px;padding:8px 12px 7px;
  border-bottom:1px solid rgba(0,245,212,.12);
  background:linear-gradient(90deg, rgba(0,245,212,.07), transparent 65%);}
.p-head b{font:700 10px/1 var(--fm);letter-spacing:.24em;color:var(--cyan);text-transform:uppercase}
.p-head b::before{content:"";display:inline-block;width:5px;height:9px;margin-right:8px;
  background:var(--acc);vertical-align:-1px;box-shadow:0 0 8px var(--accA)}
.p-head .p-tag{margin-left:auto;font:10px/1 var(--fm);letter-spacing:.14em;color:var(--faint)}
.p-body{padding:10px 12px;min-height:0}

/* ── top command bar ───────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:14px;padding:4px 6px 8px;
  font:10px/1 var(--fm);letter-spacing:.18em;color:var(--dim)}
.topbar .tb-brand{color:var(--ink);letter-spacing:.3em;white-space:nowrap}
.topbar .tb-brand i{font-style:normal;color:var(--acc)}
.tb-sep{flex:1;height:1px;background:linear-gradient(90deg, var(--line-strong), transparent)}
.tb-right{display:flex;align-items:center;gap:14px;white-space:nowrap}
.tb-right .clk{color:var(--dim)}
.tb-right .clk b{color:var(--cyan);font-weight:400}

/* ── audio toggle ──────────────────────────────────────────────────── */
.btn-audio{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;
  border:1px solid var(--line);color:var(--dim);letter-spacing:.16em;font-size:10px;
  background:rgba(4,12,18,.6);transition:color .25s,border-color .25s;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn-audio svg{width:14px;height:14px}
.btn-audio:hover{color:var(--cyan);border-color:var(--line-strong)}
.btn-audio.live{color:var(--emerald);border-color:rgba(0,245,155,.4)}
.btn-audio.live svg{animation:eq .9s ease-in-out infinite}
@keyframes eq{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.15)}}
/* ── HUD navigation matrix (persistent across all 6 rooms) ─────────── */
.nav{display:flex;align-items:stretch;gap:8px;padding:2px 4px 10px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-item{position:relative;display:flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;
  border:1px solid rgba(0,245,212,.14);background:linear-gradient(180deg, rgba(9,22,30,.66), rgba(4,10,16,.4));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  white-space:nowrap;transition:border-color .25s, background .25s, transform .25s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.nav-item:hover{border-color:rgba(0,245,212,.45);background:linear-gradient(180deg, rgba(14,34,44,.8), rgba(6,14,20,.5));transform:translateY(-1px)}
.nav-item .led{width:7px;height:7px;border-radius:50%;background:rgba(255,30,86,.28);
  box-shadow:0 0 6px rgba(255,30,86,.35);flex:none;transition:.4s}
.nav-item .led.on{background:var(--emerald);box-shadow:0 0 9px rgba(0,245,155,.9);animation:ledPulse 2.4s ease-in-out infinite}
.nav-item .led.ready{background:var(--amber);box-shadow:0 0 9px rgba(255,184,77,.9)}
.nav-item .ni-code{font:700 11px/1 var(--fm);color:var(--faint);letter-spacing:.1em}
.nav-item .ni-label{font:700 11px/1 var(--fm);letter-spacing:.22em;color:var(--dim);transition:color .25s}
.nav-item:hover .ni-label{color:var(--ink)}
.nav-item.active{border-color:rgba(0,245,212,.6);background:linear-gradient(180deg, rgba(0,245,212,.12), rgba(4,10,16,.5))}
.nav-item.active .ni-code{color:var(--cyan)}
.nav-item.active .ni-label{color:#eafffb}
.nav-item.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-3px;height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);box-shadow:0 0 10px var(--cyan)}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ── main HUD grid ─────────────────────────────────────────────────── */
.hud-grid{flex:1;min-height:0;display:grid;grid-template-columns:336px 1fr 336px;gap:14px;padding:2px 4px 8px}
.col{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}

/* ── patient file ──────────────────────────────────────────────────── */
.file-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:11.5px}
.file-grid dt{color:var(--faint);letter-spacing:.14em;font-size:9.5px;padding-top:2px;white-space:nowrap}
.file-grid dd{color:var(--ink);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-grid dd.crit{color:var(--critical);text-shadow:0 0 12px rgba(255,30,86,.5);animation:critBlink 1.6s ease-in-out infinite}
.file-grid dd.okay{color:var(--emerald);text-shadow:0 0 12px rgba(0,245,155,.5)}
@keyframes critBlink{0%,100%{opacity:1}50%{opacity:.55}}

/* ── vitals stat cells ─────────────────────────────────────────────── */
.vitals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vc{position:relative;padding:8px 10px 7px;border:1px solid rgba(0,245,212,.1);
  background:rgba(6,16,22,.45);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.vc .vc-name{display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.18em;color:var(--faint)}
.vc .vc-name i{font-style:normal;color:var(--dim)}
.vc .vc-val{font:700 19px/1.15 var(--fd);color:var(--ink);margin-top:3px;letter-spacing:.02em}
.vc .vc-val small{font:400 9px/1 var(--fm);color:var(--dim);letter-spacing:.14em;margin-left:4px}
.vc.warn .vc-val{color:var(--critical);text-shadow:0 0 14px rgba(255,30,86,.45)}
.vc.good .vc-val{color:var(--emerald);text-shadow:0 0 14px rgba(0,245,155,.45)}
.vc::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);opacity:.55;box-shadow:0 0 8px var(--accA)}
#v-bpm-val.beat{animation:beatSnap .3s ease-out}
@keyframes beatSnap{0%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ── ECG oscilloscope ──────────────────────────────────────────────── */
#p-ecg .p-body{padding:6px 8px 6px}
#ecg{display:block;width:100%;height:112px;border:1px solid rgba(0,245,212,.12);
  background-color:rgba(2,6,9,.65);
  background-image:
    linear-gradient(rgba(0,245,212,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,212,.06) 1px, transparent 1px),
    linear-gradient(rgba(0,245,212,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,212,.14) 1px, transparent 1px);
  background-size:12px 12px,12px 12px,60px 60px,60px 60px}
.ecg-foot{display:flex;justify-content:space-between;align-items:center;padding:6px 2px 0;font-size:9.5px;letter-spacing:.16em;color:var(--faint)}
.ecg-foot .bpm-chip{color:var(--ink)}
.ecg-foot .bpm-chip b{font:700 15px/1 var(--fd);color:var(--acc);text-shadow:0 0 12px var(--accA)}
.ecg-foot .bpm-chip.flash b{animation:beatSnap .28s ease-out}

/* ── diagnostic terminal feed ──────────────────────────────────────── */
#p-log{flex:1 1 auto}
#p-log .p-body{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 12px}
.term{font-size:10.5px;line-height:1.62;letter-spacing:.03em}
.term .l{display:flex;gap:8px;color:#9fd8cd;opacity:0;animation:lineIn .4s forwards}
.term .l .t{color:var(--faint);flex:none}
.term .l .x{color:#a9ece0;text-shadow:0 0 8px rgba(0,245,212,.22)}
.term .l.hot .x{color:var(--critical);text-shadow:0 0 10px rgba(255,30,86,.4)}
.term .l.good .x{color:var(--emerald);text-shadow:0 0 10px rgba(0,245,155,.4)}
.term .l.out{opacity:0;transition:opacity .4s}
@keyframes lineIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.term-cursor{color:var(--cyan);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── organ triage checklist ────────────────────────────────────────── */
.triage{display:flex;flex-direction:column;gap:7px}
.triage-row{display:grid;grid-template-columns:34px 1fr auto 16px;align-items:center;gap:10px;
  padding:9px 10px;border:1px solid rgba(0,245,212,.12);background:rgba(6,16,22,.4);
  transition:border-color .25s,background .25s,transform .25s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.triage-row:hover{border-color:rgba(0,245,212,.4);background:rgba(0,245,212,.07);transform:translateX(3px)}
.tr-ico{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(0,245,212,.18);
  color:var(--cyan);background:rgba(0,245,212,.05);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.tr-ico svg{width:17px;height:17px}
.tr-body b{display:block;font:700 10.5px/1.2 var(--fm);letter-spacing:.14em;color:var(--ink)}
.tr-body i{display:block;font-style:normal;font-size:9px;letter-spacing:.1em;color:var(--faint);margin-top:2px}
.tr-status{font-size:8.5px;letter-spacing:.16em;padding:3px 7px;border:1px solid rgba(255,30,86,.4);
  color:var(--critical);background:rgba(255,30,86,.08);white-space:nowrap;transition:.4s}
.tr-status.ok{border-color:rgba(0,245,155,.45);color:var(--emerald);background:rgba(0,245,155,.08);
  display:inline-flex;align-items:center;gap:5px}
.tr-status.ok svg{width:9px;height:9px}
.tr-arrow{color:var(--faint);transition:.25s}
.tr-arrow svg{width:14px;height:14px;display:block}
.triage-row:hover .tr-arrow{color:var(--cyan);transform:translateX(2px)}
.triage-row.done{border-color:rgba(0,245,155,.22)}
.triage-row.done .tr-ico{color:var(--emerald);border-color:rgba(0,245,155,.3)}
/* ── planetary stability readout ───────────────────────────────────── */
.stab-top{display:flex;align-items:baseline;gap:10px}
.stab-top .big{font:900 34px/1 var(--fd);color:var(--acc);text-shadow:0 0 22px var(--accA);letter-spacing:.02em}
.stab-top .word{font-size:9.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.stab-bar{position:relative;height:12px;margin-top:9px;border:1px solid rgba(0,245,212,.22);
  background:repeating-linear-gradient(90deg, rgba(0,245,212,.05) 0 2px, transparent 2px 10px), rgba(3,8,12,.7)}
.stab-bar .fill{position:absolute;inset:1px auto 1px 1px;width:var(--stab);
  background:linear-gradient(90deg, var(--critical), var(--acc) 60%, var(--emerald));
  background-size:auto auto;box-shadow:0 0 14px var(--accA);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.stab-note{margin-top:8px;font-size:9px;letter-spacing:.14em;color:var(--faint)}
.stab-note b{color:var(--dim);font-weight:400}

/* ── protocol buttons ──────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border:1px solid var(--line-strong);color:var(--cyan);
  font:700 11px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;overflow:hidden;
  background:linear-gradient(180deg, rgba(0,245,212,.1), rgba(0,245,212,.02));
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:color .25s,border-color .25s;cursor:pointer;user-select:none}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,245,212,.22), rgba(0,245,212,.05));
  transform:translateX(-101%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before{transform:translateX(0)}
.btn:hover{border-color:var(--cyan);color:#eafffb}
.btn:active{transform:translateY(1px)}
.btn svg{width:13px;height:13px;flex:none}
.btn.ghost{border-color:rgba(0,245,212,.25);color:var(--dim);background:rgba(4,10,16,.4)}
.btn.ghost:hover{color:var(--cyan)}
.btn.armed{border-color:rgba(0,245,155,.6);color:var(--emerald);
  background:linear-gradient(180deg, rgba(0,245,155,.16), rgba(0,245,155,.03));
  box-shadow:0 0 18px rgba(0,245,155,.22), inset 0 0 14px rgba(0,245,155,.08)}
.btn-stack{display:flex;flex-direction:column;gap:9px}
.proto-hint{margin-top:10px;font-size:9.5px;line-height:1.7;letter-spacing:.06em;color:var(--faint)}
.proto-hint b{color:var(--dim);font-weight:400}

/* ── center hero: emblem + wordmark ────────────────────────────────── */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:2px}
.hero .overline{font-size:10px;letter-spacing:.5em;color:var(--faint);text-transform:uppercase}
.hero .overline b{color:var(--cyan);font-weight:400}
.emblem{width:clamp(150px,16vh,205px);height:auto;margin:10px 0 6px;
  filter:drop-shadow(0 0 18px rgba(0,245,212,.22));animation:emBreathe 6s ease-in-out infinite}
@keyframes emBreathe{0%,100%{filter:drop-shadow(0 0 14px rgba(0,245,212,.16))}50%{filter:drop-shadow(0 0 26px rgba(0,245,212,.4))}}
.emblem .em-ring{transform-box:view-box;transform-origin:center;animation:spin 30s linear infinite}
.emblem .em-orbit{transform-box:view-box;transform-origin:center;animation:spin 11s linear infinite}
.emblem .em-nodes circle{animation:nodePulse 3.2s ease-in-out infinite}
.emblem .em-nodes circle:nth-child(2n){animation-delay:1.6s}
.emblem .em-pulse-run{stroke-dasharray:10 300;animation:pulseRun 2.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes nodePulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes pulseRun{from{stroke-dashoffset:310}to{stroke-dashoffset:0}}
h1.title{position:relative;font:900 clamp(40px,5.6vw,72px)/1 var(--fd);letter-spacing:.09em;color:#eafffb;
  text-shadow:0 2px 26px rgba(3,5,8,.95), -1.5px 0 rgba(255,30,86,.5), 1.5px 0 rgba(0,245,212,.5), 0 0 34px rgba(0,245,212,.25)}
h1.title i{font-style:normal;color:var(--acc);text-shadow:0 0 30px var(--accA)}
h1.title::before,h1.title::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}
h1.title.glitching::before{opacity:.85;color:var(--critical);transform:translate(-3px,-2px);
  clip-path:inset(0 0 52% 0);animation:gl1 .22s steps(2) infinite}
h1.title.glitching::after{opacity:.85;color:var(--cyan);transform:translate(3px,2px);
  clip-path:inset(52% 0 0 0);animation:gl2 .22s steps(2) infinite}
@keyframes gl1{50%{transform:translate(2px,1px);clip-path:inset(0 0 68% 0)}}
@keyframes gl2{50%{transform:translate(-2px,-1px);clip-path:inset(38% 0 0 0)}}
.hero .subtitle{margin-top:10px;font-size:11.5px;letter-spacing:.34em;color:var(--dim);text-transform:uppercase}
.hero .subtitle b{color:var(--cyan);font-weight:400}
.hero .patient-line{margin-top:16px;padding:7px 16px;border:1px solid var(--accB);
  background:rgba(4,10,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:10.5px;letter-spacing:.2em;color:var(--dim);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.hero .patient-line b{color:var(--ink);font-weight:400}
.hero .patient-line .cond{color:var(--acc);text-shadow:0 0 10px var(--accA)}
.hero .cta-row{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap;justify-content:center}

/* ── planetary stability spine (site-wide) ─────────────────────────── */
.spine{display:flex;align-items:center;gap:14px;padding:5px 8px;margin-top:2px;
  border:1px solid rgba(0,245,212,.14);background:rgba(4,10,16,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.spine .sp-label{font-size:9px;letter-spacing:.24em;color:var(--faint);white-space:nowrap}
.spine .sp-track{position:relative;flex:1;height:8px;
  background:repeating-linear-gradient(90deg, rgba(0,245,212,.06) 0 2px, transparent 2px 12px), rgba(3,8,12,.8);
  border:1px solid rgba(0,245,212,.18)}
.spine .sp-track .fill{position:absolute;inset:1px auto 1px 1px;width:var(--stab);
  background:linear-gradient(90deg, var(--critical), var(--acc) 55%, var(--emerald));
  box-shadow:0 0 12px var(--accA);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.spine .sp-track.pulse .fill{animation:spinePulse .32s ease-out}
@keyframes spinePulse{0%{filter:brightness(2)}100%{filter:brightness(1)}}
.spine .sp-pct{font:700 13px/1 var(--fd);color:var(--acc);min-width:44px;text-align:right}
.spine .sp-meta{font-size:9px;letter-spacing:.2em;color:var(--faint);white-space:nowrap}

/* ── planetary wire ticker ─────────────────────────────────────────── */
.ticker{display:flex;align-items:center;gap:0;margin-top:8px;height:30px;overflow:hidden;
  border:1px solid rgba(0,245,212,.12);background:rgba(3,8,12,.6)}
.ticker .tk-tag{flex:none;display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;
  font-size:9px;letter-spacing:.22em;color:var(--cyan);background:rgba(0,245,212,.07);
  border-right:1px solid rgba(0,245,212,.18);white-space:nowrap}
.ticker .tk-tag::before{content:"";width:6px;height:6px;background:var(--acc);
  box-shadow:0 0 8px var(--accA);animation:ledPulse 1.2s ease-in-out infinite}
.tk-viewport{flex:1;overflow:hidden;mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)}
.tk-track{display:inline-flex;white-space:nowrap;
  animation:marquee 34s linear infinite;will-change:transform}
.tk-track span{font-size:10px;letter-spacing:.18em;color:var(--dim);margin-right:44px}
.tk-track span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:9px;
  background:rgba(0,245,212,.4);vertical-align:1px}
.tk-track span b{color:#a9ece0;font-weight:400}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── magnetic laser scanner reticle ───────────────────────────────── */
#reticle{position:fixed;left:0;top:0;width:130px;height:130px;margin:-65px 0 0 -65px;
  z-index:60;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
#reticle.on{opacity:1}
#reticle svg{width:100%;height:100%;overflow:visible}
#reticle .rr-dash{transform-box:view-box;transform-origin:center;animation:spin 6s linear infinite}
#reticle .rr-arc{transform-box:view-box;transform-origin:center;animation:spin 2.2s linear infinite reverse}
#reticle .rr-read{position:absolute;left:50%;top:calc(50% + 44px);transform:translateX(-50%);
  font-size:8.5px;letter-spacing:.22em;color:var(--cyan);white-space:nowrap;text-shadow:0 0 8px rgba(0,245,212,.6)}

/* ── projection banner ─────────────────────────────────────────────── */
#banner{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:70;display:none;
  padding:6px 16px;border:1px solid rgba(255,184,77,.5);color:var(--amber);
  background:rgba(20,12,2,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 0 22px rgba(255,184,77,.18)}
#banner.on{display:block;animation:lineIn .4s}
#banner::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;
  background:var(--amber);box-shadow:0 0 10px rgba(255,184,77,.8);animation:ledPulse 1s infinite}

/* ── boot / biometric link overlay ────────────────────────────────── */
#boot{position:fixed;inset:0;z-index:100;background:var(--void);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;cursor:default;transition:opacity .55s}
#boot.gone{opacity:0;pointer-events:none}
#boot .b-emblem{width:96px;height:96px;margin-bottom:22px}
#boot .b-emblem .be-hex{transform-box:view-box;transform-origin:center;animation:spin 14s linear infinite}
#boot .b-emblem .be-core{animation:ledPulse 1.1s ease-in-out infinite}
#boot .b-title{font:900 26px/1 var(--fd);letter-spacing:.14em;color:#eafffb;
  text-shadow:-1.5px 0 rgba(255,30,86,.5),1.5px 0 rgba(0,245,212,.5)}
#boot .b-sub{margin-top:8px;font-size:10px;letter-spacing:.3em;color:var(--faint)}
#boot .b-lines{margin-top:26px;height:118px;width:min(460px,86vw);font-size:11px;line-height:1.7;
  color:#9fd8cd;letter-spacing:.06em;overflow:hidden}
#boot .b-lines .l .t{color:var(--faint)}
#boot .b-lines .l.hot{color:var(--critical)}
#boot .b-bar{width:min(460px,86vw);height:5px;margin-top:14px;border:1px solid rgba(0,245,212,.25);
  background:rgba(3,8,12,.8)}
#boot .b-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--critical),var(--cyan));
  box-shadow:0 0 12px rgba(0,245,212,.5);transition:width .9s cubic-bezier(.2,.8,.2,1)}
#boot .b-btns{display:flex;gap:16px;margin-top:30px;opacity:0;pointer-events:none;transition:opacity .5s}
#boot.ready .b-btns{opacity:1;pointer-events:auto}
#boot .b-skip{margin-top:18px;font-size:9px;letter-spacing:.24em;color:var(--faint)}

/* ── noscript ──────────────────────────────────────────────────────── */
.noscript{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--void);
  color:var(--critical);font:14px/1.6 var(--fm);letter-spacing:.1em;text-align:center;padding:40px}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-height:840px) and (min-width:981px){
  .emblem{width:clamp(120px,14vh,160px)}
  h1.title{font-size:clamp(34px,4.6vw,54px)}
  .hero .cta-row{margin-top:12px}
  #p-log .p-body{min-height:76px}
}
@media (max-width:1280px){
  .hud-grid{grid-template-columns:300px 1fr 300px}
}
@media (max-width:980px){
  html,body{overflow:auto;height:auto}
  #stage{position:relative;inset:auto;min-height:100vh}
  #tilt{position:relative;inset:auto}
  .hud-grid{display:flex;flex-direction:column}
  .col-center{order:-1;pointer-events:auto;margin-bottom:6px}
  .col-left,.col-right{transform:none}
  #p-log .p-body{min-height:150px;max-height:220px}
  .topbar .tb-right .clk{display:none}
  .nav{padding-bottom:8px}
}
@media (max-width:640px){
  body{font-size:12px}
  #tilt{padding:8px 8px 6px}
  .topbar{flex-wrap:wrap;row-gap:6px}
  .hero .subtitle{letter-spacing:.2em;font-size:10px}
  .hero .patient-line{font-size:9px;letter-spacing:.12em;padding:6px 10px}
  .vitals{grid-template-columns:1fr 1fr}
  .spine .sp-meta{display:none}
  #banner{top:auto;bottom:46px}
}
@media (hover:none){#reticle{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .crt{display:none}
}


/* ── 2 · surgical-room layer (science/innovation/sustainability/
        tomorrow/discharge — identical across rooms) ───────────────── */
/* hero tuned for surgical rooms (canvas organ is the star) */
body:not([data-room="00"]) h1.title{font-size:clamp(28px,3.4vw,44px);letter-spacing:.12em}
body:not([data-room="00"]) .hero .subtitle{letter-spacing:.26em;font-size:10.5px}
.sigil{width:76px;height:76px;margin:12px 0 8px;
  filter:drop-shadow(0 0 16px rgba(0,245,212,.3))}
.sigil .sg-hex{transform-box:view-box;transform-origin:center;animation:spin 24s linear infinite}
.sigil .sg-pulse{stroke-dasharray:8 64;animation:pulseRun 2.4s linear infinite}

/* intra-operative status line (hero) */
.intraop{margin-top:14px;padding:6px 16px;border:1px dashed rgba(0,245,212,.3);
  background:rgba(4,10,16,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:10px;letter-spacing:.18em;color:var(--dim);white-space:nowrap;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.intraop b{color:var(--cyan);font-weight:400}

/* post-seal call-to-action */
.cta-next{display:none !important}
.cta-next.in{display:flex !important}

/* ── science evidence panel ────────────────────────────────────────── */
.sci{display:flex;flex-direction:column;gap:10px}
.sci-item{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;
  border:1px solid rgba(0,245,212,.12);background:rgba(6,16,22,.4);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.sci-ico{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(0,245,212,.2);color:var(--cyan);background:rgba(0,245,212,.05);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.sci-ico svg{width:16px;height:16px}
.sci-item b{display:block;font:700 10.5px/1.2 var(--fm);letter-spacing:.16em;color:var(--ink)}
.sci-item p{margin-top:4px;font-size:10px;line-height:1.65;color:var(--dim);letter-spacing:.02em}
.sci-note{margin-top:2px;font-size:9.5px;line-height:1.7;color:var(--faint);
  border-left:2px solid rgba(0,245,212,.3);padding-left:10px;letter-spacing:.03em}
#p-science{flex:1 1 auto;min-height:0}
#p-science .p-body{overflow-y:auto}

/* ── treatment protocol steps ──────────────────────────────────────── */
.proto{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.ps{display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:center;
  padding:8px 10px;border:1px solid rgba(0,245,212,.12);background:rgba(6,16,22,.4);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.ps-led{width:7px;height:7px;border-radius:50%;background:rgba(125,163,155,.25);
  box-shadow:0 0 6px rgba(125,163,155,.2);transition:.4s}
.ps.busy .ps-led{background:var(--amber);box-shadow:0 0 9px rgba(255,184,77,.9);animation:ledPulse .8s infinite}
.ps.done .ps-led{background:var(--emerald);box-shadow:0 0 10px rgba(0,245,155,.9)}
.ps-body b{display:block;font:700 10px/1.2 var(--fm);letter-spacing:.14em;color:var(--ink)}
.ps-body i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.12em;color:var(--faint);margin-top:2px}
.ps-chip{font-size:8.5px;letter-spacing:.14em;padding:3px 7px;white-space:nowrap;
  border:1px solid rgba(125,163,155,.3);color:var(--dim);transition:.4s}
.ps-chip.busy{border-color:rgba(255,184,77,.5);color:var(--amber);background:rgba(255,184,77,.07)}
.ps-chip.on{border-color:rgba(0,245,155,.5);color:var(--emerald);background:rgba(0,245,155,.08)}

/* deploy button states */
.btn.busy{border-color:rgba(255,184,77,.55);color:var(--amber);
  background:linear-gradient(180deg, rgba(255,184,77,.15), rgba(255,184,77,.03))}
.btn.busy::before{display:none}
.btn.locked{opacity:.35;filter:saturate(.35);cursor:not-allowed}
.btn:disabled{cursor:not-allowed}

/* responsive room tweaks */
@media (max-width:980px){
  .intraop{font-size:9px;letter-spacing:.12em}
  .sigil{width:60px;height:60px}
}
@media (max-width:640px){
  body:not([data-room="00"]) .hero .subtitle{letter-spacing:.16em}
}

/* ── 3 · discharge finale layer ───────────────────────────────────── */
/* room 05 only: warmer emerald sigil glow */
body[data-room="05"] .sigil{filter:drop-shadow(0 0 16px rgba(0,245,155,.35))}

/* ── certificate of recovery (the finale artifact) ─────────────────── */
.cert{display:none;margin-top:14px;width:min(500px,88vw);position:relative}
.cert.in{display:block;animation:certIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes certIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.cert-frame{position:relative;padding:14px 16px 12px;
  background:linear-gradient(165deg, rgba(10,25,34,.82), rgba(4,10,16,.6));
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(0,245,155,.28);
  box-shadow:0 0 0 1px rgba(0,0,0,.35), inset 0 0 34px rgba(0,245,155,.05), 0 14px 44px rgba(0,0,0,.55);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px))}
.cert-head{text-align:center;border-bottom:1px dashed rgba(0,245,212,.25);padding-bottom:9px}
.cert-ribbon{display:grid;place-items:center;margin-bottom:5px;color:var(--emerald)}
.cert-ribbon svg{width:22px;height:22px;filter:drop-shadow(0 0 8px rgba(0,245,155,.5))}
.cert-head b{font:700 13px/1 var(--fd);letter-spacing:.3em;color:#eafffb;
  text-shadow:0 0 18px rgba(0,245,155,.35)}
.cert-head i{display:block;margin-top:6px;font-style:normal;font-size:8.5px;letter-spacing:.22em;color:var(--faint)}
.cert-body p{margin-top:10px;font-size:10.5px;line-height:1.7;color:var(--dim);letter-spacing:.02em}
.cert-body p b{color:var(--ink);font-weight:400}
.cert-body p .em-ink{color:var(--emerald);text-shadow:0 0 10px rgba(0,245,155,.4)}
.cert-body p .crit-ink{color:var(--critical)}
.cert-organs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:11px}
.cert-organs span{display:flex;align-items:center;gap:8px;padding:7px 10px;
  border:1px solid rgba(0,245,155,.25);background:rgba(0,245,155,.06);
  font-size:9.5px;letter-spacing:.14em;color:var(--ink);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.cert-organs span svg{width:14px;height:14px;color:var(--emerald);flex:none;
  filter:drop-shadow(0 0 5px rgba(0,245,155,.5))}
.cert-organs span em{font-style:normal;margin-left:auto;color:var(--emerald);font-size:9px;letter-spacing:.08em}
.cert-sign{display:flex;gap:14px;margin-top:13px}
.cs-main{flex:1;min-width:0;position:relative;padding-bottom:15px}
.cs-line{position:relative;min-height:56px}
#sig-svg{display:block;width:100%;height:auto;max-height:78px;overflow:visible}
#sig-path{fill:none;stroke:#9ff5d8;stroke-width:2;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(0,245,212,.55))}
.cs-rule{position:absolute;left:0;right:0;bottom:15px;height:1px;
  background:repeating-linear-gradient(90deg, rgba(0,245,212,.4) 0 6px, transparent 6px 11px)}
.cs-meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  font-size:8px;letter-spacing:.18em;color:var(--faint)}
.cs-meta .cs-name{color:var(--dim)}
.stamp{flex:none;align-self:center;width:106px;height:106px;border-radius:50%;
  border:2px solid rgba(0,245,155,.8);display:grid;place-items:center;text-align:center;
  position:relative;opacity:0;transform:rotate(-4deg) scale(2.4);filter:blur(3px)}
.stamp::before{content:"";position:absolute;inset:5px;border:1px solid rgba(0,245,155,.5);border-radius:50%}
.stamp::after{content:"";position:absolute;inset:-7px;border:1px dashed rgba(0,245,155,.35);border-radius:50%;
  transform-box:view-box}
.stamp b{font:700 12.5px/1.15 var(--fd);letter-spacing:.16em;color:var(--emerald);
  text-shadow:0 0 12px rgba(0,245,155,.5)}
.stamp i{display:block;margin-top:4px;font-style:normal;font-size:7.5px;letter-spacing:.2em;color:rgba(0,245,155,.85)}
.stamp.on{animation:stampIn .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(-4deg) scale(2.4);filter:blur(3px)}
  60%{opacity:1;transform:rotate(-13deg) scale(.93);filter:blur(0)}
  100%{opacity:.92;transform:rotate(-12deg) scale(1);filter:blur(0)}}
.cert-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;
  border-top:1px dashed rgba(0,245,212,.18)}
.cert-foot span{flex:1;font-size:8px;letter-spacing:.16em;color:var(--faint);line-height:1.7}
.cert-reset{font-size:8.5px;padding:7px 10px;letter-spacing:.14em}
@media (max-width:640px){
  .cert-sign{flex-direction:column;gap:8px}
  .stamp{align-self:flex-end;margin-top:-34px}
  .cert-organs{grid-template-columns:1fr 1fr}
}
@media (max-height:840px) and (min-width:981px){
  .cert{transform:scale(.92);transform-origin:top center;margin-top:8px}
  .cert-sign .stamp{width:92px;height:92px}
}

/* ═══════════════════════════════════════════════════════════════════
   4 · onboarding layer — boot enter button · how-to-play · progress
   chip in the command bar · first-time deploy hint · hero CTA sizing
   ═══════════════════════════════════════════════════════════════════ */

/* boot overlay: one big primary ENTER button (silent), sound optional */
#boot .b-btns{flex-direction:column;gap:10px;margin-top:26px}
#boot.showbtns .b-btns{opacity:1;pointer-events:auto}
#boot .b-enter{
  padding:16px 36px;font-size:14px;letter-spacing:.3em;color:#eafffb;
  border-color:rgba(0,245,212,.75);
  background:linear-gradient(180deg, rgba(0,245,212,.2), rgba(0,245,212,.04));
  box-shadow:0 0 28px rgba(0,245,212,.3), inset 0 0 18px rgba(0,245,212,.12);
}
#boot .b-enter svg{width:16px;height:16px}
#boot .b-enter:hover{border-color:var(--cyan);
  box-shadow:0 0 44px rgba(0,245,212,.5), inset 0 0 22px rgba(0,245,212,.2)}
#boot .b-sound{padding:9px 18px;font-size:9.5px;letter-spacing:.22em}
#boot .b-hintkey{margin-top:10px;font-size:9px;letter-spacing:.22em;color:var(--faint)}

/* command bar: help button + healed progress chip */
.btn-help{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-strong);color:var(--cyan);font:700 13px/1 var(--fm);
  background:rgba(4,12,18,.6);transition:color .25s,border-color .25s;cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.btn-help:hover{border-color:var(--cyan);color:#eafffb}
.tb-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid rgba(0,245,155,.35);color:var(--dim);letter-spacing:.14em;font-size:10px;
  background:rgba(0,245,155,.05);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.tb-chip b{color:var(--emerald);font-weight:400;letter-spacing:.06em}

/* how-to-play modal (all pages, opened from the ? button) */
.howto{position:fixed;inset:0;z-index:110;display:grid;place-items:center;
  background:rgba(2,4,7,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .22s}
.howto.on{opacity:1}
.howto[hidden]{display:none}
.howto-card{width:min(560px,92vw);padding:18px 20px 14px;
  background:linear-gradient(165deg, rgba(10,25,34,.92), rgba(4,10,16,.85));
  border:1px solid var(--line-strong);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), inset 0 0 34px rgba(0,245,212,.05), 0 24px 60px rgba(0,0,0,.6);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transform:translateY(10px);transition:transform .22s}
.howto.on .howto-card{transform:none}
.howto-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:9px;border-bottom:1px dashed rgba(0,245,212,.25)}
.howto-head b{font:700 13px/1 var(--fd);letter-spacing:.3em;color:#eafffb;
  text-shadow:0 0 16px rgba(0,245,212,.4)}
.howto-x{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);
  color:var(--dim);font:400 15px/1 var(--fm);background:none;cursor:pointer;transition:color .2s,border-color .2s}
.howto-x:hover{color:var(--critical);border-color:rgba(255,30,86,.5)}
.howto-steps{list-style:none;margin:13px 0 4px;display:flex;flex-direction:column;gap:11px}
.howto-steps li{display:flex;gap:13px;align-items:flex-start}
.howto-steps li i{flex:none;width:26px;height:26px;display:grid;place-items:center;font:700 12px/1 var(--fm);
  font-style:normal;color:var(--cyan);border:1px solid rgba(0,245,212,.4);
  background:rgba(0,245,212,.07);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.howto-steps li b{display:block;font:700 11px/1.3 var(--fm);letter-spacing:.16em;color:var(--ink)}
.howto-steps li span{display:block;margin-top:3px;font-size:11px;line-height:1.6;color:var(--dim);letter-spacing:.03em}
.howto-foot{margin-top:12px;padding-top:9px;border-top:1px dashed rgba(0,245,212,.18);
  font-size:9px;letter-spacing:.18em;color:var(--faint)}
.howto-foot b{color:var(--dim);font-weight:400}
.howto-demo{margin-top:10px}
.howto-demo button{font-size:9.5px;padding:8px 12px}

/* homepage: compact how-to strip under the CTA */
.howto-strip{margin-top:18px;width:min(640px,94%);padding:11px 14px 10px;
  border:1px dashed rgba(0,245,212,.35);background:rgba(4,10,16,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.howto-strip.off{display:none}
.hs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.hs-head b{font:700 10px/1 var(--fm);letter-spacing:.3em;color:var(--cyan)}
.hs-x{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);
  color:var(--faint);font:400 13px/1 var(--fm);background:none;cursor:pointer;transition:color .2s,border-color .2s}
.hs-x:hover{color:var(--critical);border-color:rgba(255,30,86,.5)}
.hs-steps{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.hs-steps li{flex:1 1 170px;display:flex;gap:9px;align-items:flex-start;min-width:150px}
.hs-steps li i{flex:none;width:22px;height:22px;display:grid;place-items:center;
  font:700 11px/1 var(--fm);font-style:normal;color:var(--cyan);
  border:1px solid rgba(0,245,212,.4);background:rgba(0,245,212,.07)}
.hs-steps li b{display:block;font:700 9.5px/1.3 var(--fm);letter-spacing:.12em;color:var(--ink)}
.hs-steps li span{display:block;margin-top:2px;font-size:9px;line-height:1.5;color:var(--dim);letter-spacing:.02em}

/* hero primary CTA — the most prominent element on the homepage */
.btn.btn-xl{padding:15px 32px;font-size:13px;letter-spacing:.26em;
  border-color:rgba(0,245,212,.7);color:#eafffb;
  background:linear-gradient(180deg, rgba(0,245,212,.18), rgba(0,245,212,.03));
  box-shadow:0 0 26px rgba(0,245,212,.24), inset 0 0 16px rgba(0,245,212,.1)}
.btn.btn-xl svg{width:15px;height:15px}
.btn.btn-xl:hover{border-color:var(--cyan);
  box-shadow:0 0 42px rgba(0,245,212,.42), inset 0 0 22px rgba(0,245,212,.16)}
@media (prefers-reduced-motion:no-preference){
  .btn.btn-xl::after{content:"";position:absolute;inset:-2px;pointer-events:none;
    border:1px solid rgba(0,245,212,.5);opacity:0;
    animation:xlRing 2.6s ease-out infinite}
  @keyframes xlRing{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.13)}100%{opacity:0;transform:scale(1.13)}}
}

/* first-time deploy hint — subtle pulse on the first available button */
.btn[data-hint]{animation:hintPulse 1.7s ease-in-out infinite}
@keyframes hintPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,245,212,.6), 0 0 16px rgba(0,245,212,.35)}
  55%{box-shadow:0 0 0 10px rgba(0,245,212,0), 0 0 26px rgba(0,245,212,.55)}
}

@media (max-width:640px){
  .tb-chip{display:none}
  .btn-help{width:24px;height:24px}
  .howto-strip{padding:9px 10px}
  .hs-steps{flex-direction:column}
  .hs-steps li{flex:1 1 auto}
}

/* howto strip is interactive — re-enable pointer events inside the hero */
.howto-strip{pointer-events:auto}

/* ═══════════════════════════════════════════════════════════════════
   5 · layout-integrity layer — no clipped or overlapping content at
   1280x720 / 1366x768 / 1440x900 / 1920x1080:
   · patient-file rows wrap instead of ellipsizing
   · vitals tile labels stack (name over note) instead of colliding
   · every panel shrinks safely and scrolls internally with a thin
     styled scrollbar; a fade marks the clipped edge (.clipped, set
     by the engine only when content actually overflows)
   · short viewports get compact spacing via clamp/vh media blocks
   ═══════════════════════════════════════════════════════════════════ */

/* patient file: allow long values to wrap (Allergies row) */
.file-grid{gap:5px 12px}
.file-grid dd{white-space:normal;overflow:visible;text-overflow:clip;
  overflow-wrap:break-word;word-break:break-word}

/* vitals tiles: stack label + status note, never collide */
.vc{padding:7px 9px 6px}
.vc .vc-name{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  font-size:9px;letter-spacing:.14em}
.vc .vc-name i{font-style:normal;color:var(--dim);letter-spacing:.1em;font-size:8.5px}
.vc .vc-val{font:700 17px/1.15 var(--fd);margin-top:4px}

/* panels: clip at the frame, let the body flex and scroll internally */
.panel{overflow:hidden}
.p-body{flex:1 1 auto;min-height:0}
.p-body{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#12333e transparent}
.p-body::-webkit-scrollbar{width:6px}
.p-body::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
.p-body::-webkit-scrollbar-thumb{background:#12333e;border:1px solid rgba(0,245,212,.3)}
#p-log .p-body{overflow-y:hidden}          /* feed manages its own height */
#p-ecg .p-body{overflow:visible}            /* oscilloscope never scrolls */
.p-body.clipped{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),rgba(0,0,0,.25) 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 18px),rgba(0,0,0,.25) 100%)}

/* short laptop viewports — compact chrome so nothing is squeezed */
@media (max-height:800px) and (min-width:981px){
  #tilt{padding:8px 14px 6px}
  .hud-grid{gap:10px;padding:0 2px 6px}
  .col{gap:8px}
  .p-head{padding:6px 10px 5px}
  .p-body{padding:7px 10px}
  .file-grid{font-size:10.5px;gap:4px 10px}
  .file-grid dt{font-size:9px}
  .vc{padding:6px 8px 5px}
  .vc .vc-val{font-size:15px}
  #ecg{height:84px}
  .ecg-foot{padding-top:4px;font-size:9px}
  .stab-top .big{font-size:26px}
  .stab-bar{height:10px;margin-top:7px}
  .stab-note{font-size:8.5px;margin-top:6px}
  .term{font-size:10px;line-height:1.55}
  #p-log .p-body{min-height:56px}
  .triage{gap:5px}
  .triage-row{padding:7px 8px}
  .proto{gap:5px;margin-bottom:9px}
  .ps{padding:7px 8px}
  .btn-stack{gap:7px}
  .btn{padding:10px 14px}
  .sci-item p{font-size:9.5px}
  .emblem{width:clamp(108px,12vh,150px)}
  h1.title{font-size:clamp(32px,4.2vw,50px)}
  .hero .cta-row{margin-top:12px}
  .hero .patient-line{margin-top:10px}
  .hero .subtitle{margin-top:7px}
  .intraop{margin-top:10px}
  .spine{padding:4px 6px}
  .ticker{height:26px}
}
/* extra-tight 720p rows: protocol hint may scroll, not clip */
@media (max-height:740px) and (min-width:981px){
  .proto-hint{font-size:8.5px;line-height:1.55;margin-top:7px}
  .ps-body b{font-size:9.5px}
  .ps-body i{font-size:8px}
  .tr-body b{font-size:10px}
  .tr-body i{font-size:8.5px}
}

/* ═══════════════════════════════════════════════════════════════════
   6 · readability & accessibility layer
   · font floors — reading copy >= 13 px, labels >= 11 px
   · --faint raised to 6:1 on void (WCAG AA for body copy; the old
     #3d6a63 measured ~3.4:1). Purely decorative marks (scanner
     reticle readout, stamp micro-text) stay dim by design.
   · stronger :focus-visible ring on every interactive element
   ═══════════════════════════════════════════════════════════════════ */
:root{ --faint:#63948b; }

/* reading copy — 13px floor */
.term{font-size:13px;line-height:1.55}
.file-grid{font-size:13px}
.sci-item p{font-size:13px;line-height:1.6}
.sci-note{font-size:13px;line-height:1.65}
.proto-hint{font-size:13px;line-height:1.65}
.cert-body p{font-size:13px;line-height:1.7}
.howto-steps li span{font-size:13px}
.hs-steps li span{font-size:12.5px}
#boot .b-lines{font-size:12.5px}
.noscript{font-size:14px}

/* labels — 11px floor */
.p-head b{font-size:11px}
.p-head .p-tag{font-size:11px}
.topbar{font-size:11px}
.tb-chip{font-size:11px}
.vc .vc-name{font-size:11px}
.vc .vc-name i{font-size:11px}
.vc .vc-val small{font-size:11px}
.tr-status{font-size:11px}
.tr-body b{font-size:11px}
.tr-body i{font-size:11px}
.ps-body b{font-size:11px}
.ps-body i{font-size:11px}
.ps-chip{font-size:11px}
.ecg-foot{font-size:11px}
.stab-top .word{font-size:11px}
.stab-note{font-size:11px;line-height:1.6}
.spine .sp-label{font-size:11px}
.spine .sp-meta{font-size:11px}
.hero .overline{font-size:11px}
.hero .patient-line{font-size:11px}
.intraop{font-size:11px}
.tk-track span{font-size:11px}
.cs-meta{font-size:11px}
.cert-head i{font-size:11px}
.cert-organs span{font-size:11px}
.cert-foot span{font-size:11px}
.cert-reset{font-size:11px}
.howto-foot{font-size:11px}
.hs-head b{font-size:11px}
.hs-steps li b{font-size:11px}
.b-sub{font-size:11px}
.b-skip{font-size:11px}
.stamp i{font-size:10px}
.stamp b{font-size:13px}

/* focus visibility — a real ring on every interactive element */
:focus-visible{outline:2px solid #00f5d4;outline-offset:2px}
a:focus-visible,button:focus-visible{outline-offset:3px}
.nav-item:focus-visible,.triage-row:focus-visible{outline-offset:-2px}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(0,245,212,.35),0 0 22px rgba(0,245,212,.4)}

/* ═══════════════════════════════════════════════════════════════════
   7 · reduce-effects layer (html.fx-reduce, set by the FX toggle —
   persists in localStorage; complements prefers-reduced-motion)
   disables: CRT scanlines/flicker · title chromatic aberration +
   glitch · parallax tilt · scanner reticle · attention pulses ·
   ticker marquee motion. Text stays crisp and readable.
   ═══════════════════════════════════════════════════════════════════ */
html.fx-reduce .crt{display:none}
html.fx-reduce h1.title{
  text-shadow:0 2px 26px rgba(3,5,8,.95),0 0 34px rgba(0,245,212,.25)}
html.fx-reduce h1.title i{text-shadow:0 0 30px var(--accA)}
html.fx-reduce h1.title::before,
html.fx-reduce h1.title::after{display:none;content:none}
html.fx-reduce #boot .b-title{
  text-shadow:0 2px 18px rgba(3,5,8,.95)}
html.fx-reduce #reticle{display:none}
html.fx-reduce .btn.btn-xl::after{display:none;content:none}
html.fx-reduce .btn[data-hint]{animation:none}
html.fx-reduce .tk-track{animation-play-state:paused}
html.fx-reduce .emblem{animation:none}
html.fx-reduce .emblem .em-ring,
html.fx-reduce .emblem .em-orbit{animation:none}
html.fx-reduce .btn-fx.on{color:var(--emerald);border-color:rgba(0,245,155,.5)}

/* FX toggle button (topbar, next to the ? help button) */
.btn-fx{width:34px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:0;
  border:1px solid var(--line-strong);color:var(--dim);font:700 10px/1 var(--fm);letter-spacing:.08em;
  background:rgba(4,12,18,.6);transition:color .25s,border-color .25s;cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.btn-fx:hover{border-color:var(--cyan);color:#eafffb}
.btn-fx.on{color:var(--emerald);border-color:rgba(0,245,155,.5);background:rgba(0,245,155,.07)}

/* keep the compact short-viewport layer from going under the floors */
@media (max-height:800px) and (min-width:981px){
  .file-grid dt{font-size:11px}
}

/* ═══════════════════════════════════════════════════════════════════
   8 · discharge finale scroll layer — the certificate + revealed CTAs
   can exceed the center column at laptop heights; the column scrolls
   internally (thin styled scrollbar + clipped-edge fade) exactly like
   the side panels, so nothing ever paints under the spine/ticker.
   ═══════════════════════════════════════════════════════════════════ */
body[data-room="05"] .col-center{
  overflow-y:auto;pointer-events:auto;
  scrollbar-width:thin;scrollbar-color:#12333e transparent}
body[data-room="05"] .col-center::-webkit-scrollbar{width:6px}
body[data-room="05"] .col-center::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
body[data-room="05"] .col-center::-webkit-scrollbar-thumb{background:#12333e;border:1px solid rgba(0,245,212,.3)}
body[data-room="05"] .col-center.clipped{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),rgba(0,0,0,.25) 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 18px),rgba(0,0,0,.25) 100%)}
body[data-room="05"] .hero{padding-bottom:16px}
/* flow layout on phones — page scrolls naturally again */
@media (max-width:980px){
  body[data-room="05"] .col-center{overflow:visible;pointer-events:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   9 · field-notes layer — student briefing panel (accordion + live
   teaching widget) on rooms 01-04, and the About/Credits panel on
   the discharge page (room 05).
   ═══════════════════════════════════════════════════════════════════ */

/* field-notes panel takes the flexible slot under the evidence panel */
#p-notes{flex:1 1 auto;min-height:0}
#p-notes .p-body{display:flex;flex-direction:column;gap:9px}

/* explainer paragraph */
.fn-intro{font-size:13px;line-height:1.62;color:var(--dim);letter-spacing:.02em}
.fn-intro b{color:var(--ink);font-weight:400}

/* accordion */
.fn-acc{display:flex;flex-direction:column;gap:5px}
.fn-tab{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border:1px solid rgba(0,245,212,.14);background:rgba(6,16,22,.4);
  font:700 10.5px/1 var(--fm);letter-spacing:.18em;color:var(--dim);text-align:left;
  cursor:pointer;transition:color .2s,border-color .2s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.fn-tab:hover{color:var(--ink);border-color:rgba(0,245,212,.4)}
.fn-tab[aria-expanded="true"]{color:var(--cyan);border-color:rgba(0,245,212,.45);
  background:rgba(0,245,212,.06)}
.fn-tab .fn-caret{flex:none;color:var(--faint);font:400 12px/1 var(--fm);transition:transform .2s}
.fn-tab[aria-expanded="true"] .fn-caret{transform:rotate(90deg);color:var(--cyan)}
.fn-pane{display:none;padding:2px 2px 4px 12px;
  border-left:2px solid rgba(0,245,212,.3)}
.fn-pane.open{display:block;animation:lineIn .3s}

/* fact rows */
.fn-fact{display:flex;gap:9px;margin-top:7px}
.fn-fact:first-child{margin-top:2px}
.fn-fact i{flex:none;font-style:normal;width:20px;height:20px;display:grid;place-items:center;
  font:700 9.5px/1 var(--fm);color:var(--amber);border:1px solid rgba(255,184,77,.4);
  background:rgba(255,184,77,.06);clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}
.fn-fact div b{display:block;font:700 11px/1.35 var(--fm);letter-spacing:.1em;color:var(--ink)}
.fn-fact div span{display:block;margin-top:2px;font-size:13px;line-height:1.55;color:var(--dim)}
.fn-fact div em{display:block;font-style:normal;margin-top:2px;font-size:11px;letter-spacing:.14em;color:var(--faint)}

/* tech spotlight steps */
.fn-steps{list-style:none;counter-reset:fnstep;margin-top:6px}
.fn-steps li{counter-increment:fnstep;position:relative;padding-left:30px;margin-top:6px;
  font-size:13px;line-height:1.55;color:var(--dim)}
.fn-steps li::before{content:counter(fnstep);position:absolute;left:0;top:1px;width:19px;height:19px;
  display:grid;place-items:center;font:700 9.5px/1 var(--fm);color:var(--cyan);
  border:1px solid rgba(0,245,212,.4);background:rgba(0,245,212,.07)}
.fn-steps li b{color:var(--ink);font-weight:400}
.fn-limit{margin-top:9px;padding:8px 10px;border:1px dashed rgba(255,184,77,.4);
  background:rgba(255,184,77,.05);font-size:13px;line-height:1.55;color:var(--dim)}
.fn-limit b{color:var(--amber);font-weight:400;letter-spacing:.14em;font-size:11px;display:block;margin-bottom:2px}

/* what you can do */
.fn-do{margin-top:4px;font-size:13px;line-height:1.6;color:var(--dim)}
.fn-do b{color:var(--emerald);font-weight:400}

/* sources line */
.fn-sources{margin-top:2px;padding-top:7px;border-top:1px dashed rgba(0,245,212,.18);
  font-size:11px;letter-spacing:.16em;color:var(--faint)}
.fn-sources b{color:var(--dim);font-weight:400}

/* live teaching widget */
.fn-demo{padding:10px 11px 11px;border:1px solid rgba(0,245,212,.25);
  background:rgba(3,10,15,.55);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.fn-demo-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fn-demo-head b{font:700 10px/1 var(--fm);letter-spacing:.22em;color:var(--cyan)}
.fn-demo-head span{font-size:11px;letter-spacing:.1em;color:var(--faint)}
.fn-read{display:flex;gap:10px;align-items:baseline;margin-top:8px}
.fn-read .fn-big{font:700 21px/1 var(--fd);color:var(--ink);letter-spacing:.02em}
.fn-read .fn-big.warm{color:var(--amber)}
.fn-read .fn-big.cool{color:var(--emerald)}
.fn-read small{font:400 11px/1.3 var(--fm);color:var(--dim);letter-spacing:.1em}
.fn-scale{position:relative;height:22px;margin-top:8px;border:1px solid rgba(0,245,212,.2);
  background:linear-gradient(90deg, rgba(0,245,155,.25), rgba(255,184,77,.35), rgba(255,30,86,.4))}
.fn-scale i{position:absolute;top:-4px;bottom:-4px;width:2px;background:#eafffb;
  box-shadow:0 0 8px rgba(234,255,251,.8);transition:left .12s ease-out}
.fn-marks{position:relative;height:13px;margin-top:2px}
.fn-marks span{position:absolute;transform:translateX(-50%);font-size:9px;letter-spacing:.08em;color:var(--faint);white-space:nowrap}
.fn-note{margin-top:9px;font-size:13px;line-height:1.55;color:var(--dim)}
.fn-note b{color:var(--ink);font-weight:400}
/* themed range slider */
.fn-range{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin-top:9px;
  background:transparent;cursor:pointer}
.fn-range::-webkit-slider-runnable-track{height:4px;border-radius:0;
  background:linear-gradient(90deg, rgba(0,245,155,.5), rgba(255,184,77,.6), rgba(255,30,86,.6))}
.fn-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:22px;margin-top:-9px;
  background:#eafffb;border:1px solid var(--cyan);box-shadow:0 0 10px rgba(0,245,212,.7);cursor:ew-resize}
.fn-range::-moz-range-track{height:4px;
  background:linear-gradient(90deg, rgba(0,245,155,.5), rgba(255,184,77,.6), rgba(255,30,86,.6))}
.fn-range::-moz-range-thumb{width:11px;height:20px;border-radius:0;
  background:#eafffb;border:1px solid var(--cyan);box-shadow:0 0 10px rgba(0,245,212,.7);cursor:ew-resize}
.fn-range:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* about / credits panel (discharge page) */
#p-about .fn-team{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.fn-team.solo{grid-template-columns:1fr}
.fn-member{padding:8px 10px;border:1px solid rgba(0,245,212,.16);background:rgba(6,16,22,.4);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.fn-member b{display:block;font:700 11px/1.3 var(--fm);letter-spacing:.12em;color:var(--ink)}
.fn-member span{display:block;margin-top:2px;font-size:11px;letter-spacing:.1em;color:var(--faint)}
.fn-school{margin-top:8px;font-size:13px;line-height:1.55;color:var(--dim)}
.fn-school b{color:var(--ink);font-weight:400}
.fn-badge{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 12px;
  border:1px solid rgba(0,245,155,.45);background:rgba(0,245,155,.07);
  font:700 10.5px/1.3 var(--fm);letter-spacing:.14em;color:var(--emerald);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.fn-badge svg{width:13px;height:13px;flex:none;filter:drop-shadow(0 0 5px rgba(0,245,155,.5))}
.fn-cols{font-size:13px;line-height:1.6;color:var(--dim);margin-top:9px}
.fn-cols b{color:var(--ink);font-weight:400}

@media (max-width:640px){
  #p-notes .p-body{gap:7px}
  .fn-team{grid-template-columns:1fr}
  .fn-marks span{font-size:8px}
}

/* ═══════════════════════════════════════════════════════════════════
   10 · mobile layer — phones and small tablets
   · ≥44px touch targets (nav items, all buttons, sliders)
   · hero keeps the CTA clear of the fixed planet canvas (JS also
     shrinks and lowers the planet itself on small screens)
   · nav scrolls horizontally with snap; active item centered by JS
   · low-power class (engine sets it): heavier effects trimmed
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:980px){
  /* touch targets — phones and tablets (flow layout sizes) */
  .nav-item{min-height:44px;padding:10px 13px 10px 11px}
  .btn{min-height:44px}
  .btn-audio{min-height:44px;min-width:44px;padding:8px 12px}
  .btn-help,.btn-fx{width:44px;height:44px;font-size:13px}
  .howto-x,.hs-x{width:44px;height:44px}
  .fn-range{height:34px}
  .fn-range::-webkit-slider-thumb{height:32px;width:16px;margin-top:-14px}
  .fn-range::-moz-range-thumb{height:32px;width:14px}
  .triage-row{min-height:48px}
  .ps{min-height:44px}
  /* nav: horizontal scroll with snap */
  .nav{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .nav-item{scroll-snap-align:center}
  /* hero spacing: keep CTA below the (lowered) planet glow */
  .hero{padding-top:6px}
  .hero .cta-row{gap:10px;margin-top:22px}
  .hero .cta-row .btn{width:100%;max-width:340px}
  .hero .patient-line{white-space:normal;line-height:1.7}
  /* compact topbar */
  .topbar .tb-brand{letter-spacing:.16em}
  /* howto strip full width */
  .howto-strip{width:100%}
  .hs-steps li{flex:1 1 auto}
  /* panels: lighter backdrop for scroll perf */
  .panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  /* ticker slower + shorter */
  .tk-track{animation-duration:44s}
}
/* low-power devices (engine sets html.low-power): trim expensive layers */
html.low-power .crt::after{display:none;content:none}
html.low-power .panel,html.low-power .nav-item,html.low-power .spine,
html.low-power .ticker,html.low-power .hero .patient-line,html.low-power .intraop{
  -webkit-backdrop-filter:none;backdrop-filter:none}
html.low-power .panel{
  background:linear-gradient(165deg, rgba(10,25,34,.93), rgba(4,10,16,.85))}
html.low-power .emblem{animation:none}
html.low-power .tk-track{animation-duration:60s}

@media (max-width:380px){
  /* tiny phones: compact hero so the CTA clears the planet and sits
     above the fold */
  .emblem{width:clamp(88px,24vw,120px);margin:6px 0 4px}
  h1.title{font-size:clamp(30px,9vw,40px)}
  .hero .subtitle{font-size:9.5px;letter-spacing:.14em}
  .hero .patient-line{font-size:9.5px;margin-top:10px}
  .hero .cta-row{margin-top:16px}
  .howto-strip{margin-top:12px}
}

/* ═══════════════════════════════════════════════════════════════════
   11 · polish layer — doctor-name input (room 05) · PNG certificate
   download · room-to-room page transition · demo shortcut
   ═══════════════════════════════════════════════════════════════════ */

/* attending physician name input (discharge protocol panel) */
.proto-name{margin:2px 0 10px;display:flex;flex-direction:column;gap:5px}
.proto-name label{font:700 10px/1 var(--fm);letter-spacing:.22em;color:var(--faint)}
.proto-name input{width:100%;padding:10px 12px;color:var(--ink);
  font:400 14px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;
  background:rgba(6,16,22,.6);border:1px solid rgba(0,245,212,.3);outline:none;
  transition:border-color .2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.proto-name input:focus{border-color:var(--cyan)}
.proto-name input::placeholder{color:var(--faint);letter-spacing:.1em}

/* certificate download button */
.cert-dl{margin-left:0}
.cert-foot .cert-dl{flex:none}

/* demo shortcut (inside the how-to modal) */
.howto-demo{margin-top:11px}
.howto-demo button{width:100%;padding:9px 12px;font-size:9.5px;letter-spacing:.16em;
  border-style:dashed;color:var(--faint)}
.howto-demo button:hover{color:var(--amber);border-color:rgba(255,184,77,.5)}
.howto-demo i{display:block;margin-top:5px;font-style:normal;font-size:9px;
  letter-spacing:.12em;color:var(--faint);text-align:center}

/* room-to-room page transition (skipped under reduced motion / FX-reduce) */
body.page-leave #stage{transition:opacity .22s ease,filter .22s ease;
  opacity:0;filter:blur(3px) brightness(.72)}
body.page-leave #space{transition:opacity .22s ease;opacity:.3}
body.page-leave .crt{opacity:.4;transition:opacity .22s ease}