/* SpectraSim shared styles. Palette continues the module design system (navy workspace, CardioSpectra blue). */
:root{
  color-scheme:dark;
  --bg:#081B3F;
  --panel:#0D2747;
  --raise:#123259;
  --line:rgba(184,199,220,.18);
  --fg:#F3F7FF;
  --muted:#B8C7DC;
  --accent:#2E7DFF;
  --accent-hi:#5C9BFF;
  --f-ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* 450 to 1000 nm: the CardioSpectra optical window, visible into near-infrared */
  --spectrum:linear-gradient(90deg,#3b2bff 0%,#1f6bff 7%,#00b7e8 13%,#18c96a 20%,#c9e021 27%,#ffc21a 32%,#ff7a18 38%,#e8242f 45%,#9e1630 58%,#5a1230 74%,#2a1336 88%,rgba(42,19,54,0) 100%);
  --bar-h:52px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:12px}

/* Brand mark: wordmark sitting on a short spectral rule */
.mark{display:inline-flex;flex-direction:column;gap:4px;text-decoration:none;line-height:1}
.mark b{font-weight:700;font-size:17px;letter-spacing:-.01em}
.mark i{display:block;height:3px;width:100%;border-radius:2px;background:var(--spectrum)}

/* ---------- Hub ---------- */
.hub{min-height:100vh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.hub-top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));
  max-width:1180px;width:100%;margin:0 auto}
.hub-top .org{color:var(--muted);font-size:14px;text-decoration:none}
.hub-top .org:hover{color:var(--fg)}
main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left,0px))}

.hero{padding:clamp(56px,11vh,120px) 0 clamp(40px,7vh,72px)}
.hero h1{margin:0;font-weight:700;font-size:clamp(56px,12vw,148px);line-height:.92;letter-spacing:-.045em}
.band{position:relative;margin:clamp(20px,3vw,32px) 0 10px;height:14px;border-radius:7px;background:var(--spectrum);
  transform-origin:left center;animation:sweep 1.4s cubic-bezier(.2,.7,.1,1) both}
.band-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;max-width:100%}
@keyframes sweep{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
.hero p{max-width:34em;margin:clamp(28px,4vw,40px) 0 0;font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--muted)}
.hero p strong{color:var(--fg);font-weight:600}

/* Lab list: three rows, read like a procedure board rather than a card grid */
.labs{list-style:none;margin:0 0 80px;padding:0;border-top:1px solid var(--line)}
.lab{border-bottom:1px solid var(--line)}
.lab a{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto;gap:8px 40px;align-items:start;
  padding:30px 8px;text-decoration:none;border-radius:8px;transition:background .18s ease}
.lab a:hover{background:rgba(46,125,255,.07)}
.lab .room{font-size:15px;font-weight:600;color:var(--muted);padding-top:6px}
.lab h2{margin:0 0 6px;font-size:clamp(22px,2.6vw,28px);font-weight:650;letter-spacing:-.015em;line-height:1.2}
.lab p{margin:0;color:var(--muted);max-width:40em}
.lab .open{align-self:center;white-space:nowrap;font-weight:600;font-size:15px;color:var(--fg);
  border:1px solid var(--line);padding:10px 16px;border-radius:999px;transition:border-color .18s,background .18s}
.lab a:hover .open{background:var(--accent);border-color:var(--accent)}
.lab .size{display:block;margin-top:10px;font-size:13px;color:var(--muted);opacity:.8}

.foot{width:calc(100% - 2*max(24px,env(safe-area-inset-left,0px)));max-width:1132px;margin:0 auto;padding:24px 0 32px;
  border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between}

@media (max-width:760px){
  .lab a{grid-template-columns:1fr;gap:6px;padding:24px 4px}
  .lab .room{padding-top:0}
  .lab .open{justify-self:start;margin-top:12px}
}

/* ---------- Module shell (EP, Cath, PE) ---------- */
html.shell,html.shell body{height:100%}
.shell body{display:flex;flex-direction:column;overflow:hidden;background:#000}
.bar{flex:none;display:flex;align-items:center;gap:14px;height:calc(var(--bar-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));
  background:#060B16;border-bottom:1px solid rgba(130,165,220,.14);position:relative;z-index:2;font-family:"Sora",var(--f-ui)}
.bar .mark{flex-direction:row;align-items:center;gap:9px}
.bar .mark img{border-radius:8px;display:block}
.bar .mark b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.bar .mark b span{font-weight:300}
.tabs{display:flex;gap:2px;margin-left:10px;background:rgba(17,27,48,.7);padding:3px;border-radius:999px;border:1px solid var(--line)}
.tabs a{text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);padding:6px 14px;border-radius:999px;white-space:nowrap}
.tabs a:hover{color:var(--fg)}
.tabs a[aria-current="page"]{background:#1F8BFF;color:#fff;box-shadow:0 4px 16px rgba(31,139,255,.35)}
.bar .full{margin-left:auto;font-size:13.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.bar .full:hover{color:var(--fg)}
.stage{position:relative;flex:1;min-height:0}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--bg)}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);color:var(--muted);font-size:15px;transition:opacity .3s}
.loading[hidden]{display:none}
.loading div{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:24px}
.loading i{display:block;width:180px;height:4px;border-radius:2px;background:var(--spectrum);background-size:200% 100%;animation:scan 1.6s linear infinite}
@keyframes scan{from{background-position:100% 0}to{background-position:-100% 0}}
.loading small{font-size:13px;opacity:.8}

@media (max-width:640px){
  .bar{gap:8px}
  .bar .mark{display:none}
  .tabs{margin-left:0}
  .tabs a{padding:6px 10px;font-size:13.5px}
  .bar .full{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .band,.loading i{animation:none}
  .lab a,.lab .open{transition:none}
}