:root {
  color-scheme: dark;
  --bg:#0d1320;
  --panel:#131c2b;
  --ink:#eff5fd;
  --muted:#9eafc3;
  --faint:#8296b0;
  --line:#29374b;
  --teal:#63e5d0;
  --coral:#ff9b81;
  --green:#78ebad;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font: 15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box }
[hidden] { display:none !important }
body { margin:0; background:radial-gradient(ellipse at 31% 2%,#152436 0,transparent 46%),var(--bg); color:var(--ink); min-height:100vh }
button,input { font:inherit }
button { cursor:pointer; color:inherit }
button:disabled { opacity:.45; cursor:default }
button:focus-visible,input:focus-visible,canvas:focus-visible { outline:2px solid var(--teal); outline-offset:3px }
.icons { position:absolute; width:0; height:0; overflow:hidden }
.icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:middle }
.topbar { border-bottom:1px solid #273447; background:#0d1522d9 }
.topbar-inner { max-width:1224px; margin:auto; min-height:72px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:12px }
.brand,.topbar-actions { display:flex; align-items:center; gap:12px }
.brand { font-size:21px; font-weight:760; letter-spacing:-.65px; white-space:nowrap }
.brand-mark { width:37px; height:37px; display:grid; place-items:center; border-radius:11px; background:#54dec9; color:#0a2427; box-shadow:0 3px 15px #5be7ca26 }
.brand-mark .icon { width:23px; height:23px }
.brand-ar { color:var(--teal); margin-left:4px }
.prototype { display:flex; align-items:center; gap:7px; color:#b5c3d6; font-size:12px; font-weight:650; margin-right:5px }
.prototype span,.eyebrow span,.stage-badge span { width:6px; height:6px; background:var(--teal); border-radius:50%; box-shadow:0 0 10px #63e5d077; flex-shrink:0 }
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 12px; min-height:42px; border:1px solid var(--line); border-radius:9px; background:#192537; color:#d8e4f4; font-size:13px; font-weight:650 }
.button:hover:not(:disabled) { background:#22334a }
.button.primary { background:var(--teal); border-color:var(--teal); color:#0d262b }
.button.primary:hover:not(:disabled) { background:#a0f6e8 }
.button.icon-button { width:42px; padding:0 }
.shell { width:min(1224px,100%); padding:0 28px; margin:auto }
.intro { margin:39px 0 28px }
.eyebrow { color:var(--teal); font:650 11px/1.3 var(--mono); letter-spacing:1.85px; display:flex; align-items:center; gap:10px; margin:0 0 11px }
h1,h2,p { margin-top:0 }
h1 { margin-bottom:7px; font-size:clamp(32px,5vw,54px); font-weight:740; letter-spacing:-.05em; line-height:1.07 }
.intro > p:last-child { color:#aabacf; margin:0; font-size:15px }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(285px,330px); gap:20px; align-items:start }
.panel { min-width:0; border:1px solid var(--line); border-radius:17px; background:var(--panel); box-shadow:0 10px 30px #04081228 }
.imaging { padding:16px }
.panel-head,.readout-head,.view-row,.slider-heading { display:flex; align-items:center; justify-content:space-between; gap:10px }
.panel-head { padding-bottom:14px; border-bottom:1px solid #273448 }
h2 { margin:0; display:flex; align-items:center; gap:8px; font-size:16px; font-weight:720; letter-spacing:-.15px }
h2 .icon { color:var(--teal) }
.segments { display:flex; align-items:center; padding:3px; gap:2px; border:1px solid #29394e; background:#0e1724; border-radius:10px }
.segments button,.grid-toggle { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; border:1px solid transparent; padding:4px 10px; border-radius:7px; background:none; color:var(--muted); font-size:13px; font-weight:680; white-space:nowrap }
.segments .icon { width:16px; height:16px }
.segments button:hover,.grid-toggle:hover { color:white }
.segments [aria-pressed=true] { color:var(--teal); background:#1b3440; border-color:#2c4c58 }
.view-row { margin:13px 0 12px }
.grid-toggle { padding:3px; min-width:63px; min-height:42px }
.switch { display:inline-flex; align-items:center; width:29px; height:17px; padding:2px; border-radius:12px; background:#35435a }
.switch:before { content:""; width:11px; height:11px; border-radius:50%; background:#b2c3d8 }
.grid-toggle[aria-pressed=true] .switch { background:#1b564f; justify-content:flex-end }
.grid-toggle[aria-pressed=true] .switch:before { background:var(--teal) }
.stage { position:relative; height:clamp(330px,39vw,435px); overflow:hidden; border-radius:12px; border:1px solid #273b53; background:radial-gradient(ellipse at center,#182d43,#0b1525 78%) }
.reticle { position:absolute; inset:0; background:radial-gradient(circle,#6983a347 1px,transparent 1px) 0 0/19px 19px; mask-image:radial-gradient(ellipse,#000 45%,transparent 90%) }
.stage canvas,.stage video { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
#grid-layer { pointer-events:none }
#overlay.annotating { cursor:crosshair; touch-action:manipulation }
.frame-corners { position:absolute; pointer-events:none; inset:12px }
.frame-corners i { position:absolute; width:19px; height:19px; border:1px solid #79c3cf90 }
.frame-corners i:nth-child(1) { left:0; top:0; border-right:0; border-bottom:0; border-radius:4px 0 0 0 }
.frame-corners i:nth-child(2) { right:0; top:0; border-left:0; border-bottom:0; border-radius:0 4px 0 0 }
.frame-corners i:nth-child(3) { left:0; bottom:0; border-right:0; border-top:0; border-radius:0 0 0 4px }
.frame-corners i:nth-child(4) { right:0; bottom:0; border-left:0; border-top:0; border-radius:0 0 4px 0 }
.stage-badge,.stage-view { position:absolute; top:22px; z-index:1; pointer-events:none; color:#c0d1e5; font:600 10px/1.2 var(--mono); letter-spacing:1px; padding:7px 8px; border-radius:5px; background:#0c1829d9; border:1px solid #2b4159 }
.stage-badge { left:22px; display:flex; align-items:center; gap:7px }
.stage-badge span { width:5px; height:5px }
.stage-view { right:22px }
.stage-prompt { position:absolute; inset:0; margin:auto; width:min(280px,78%); height:max-content; text-align:center }
.prompt-icon { display:grid; place-items:center; margin:0 auto 12px; color:var(--teal); width:48px; height:48px; border:1px solid #345162; background:#142b3a; border-radius:13px }
.prompt-icon .icon { width:25px; height:25px }
.stage-prompt strong { display:block; font-size:19px }
.stage-prompt p { color:var(--muted); font-size:13px; margin:5px 0 15px }
.legend { display:flex; gap:15px; align-items:center; min-height:45px; color:#bbcade; font-size:12px; font-weight:650 }
.legend span { display:flex; gap:6px; align-items:center }
.legend b { font-weight:inherit }
.legend span:last-child { margin-left:auto; white-space:nowrap; font:600 10px var(--mono); color:var(--faint) }
.swatch { display:inline-block; width:17px; height:2px; flex-shrink:0; background:var(--teal) }
.swatch.fox { background:var(--coral) }
.demo-controls,.capture-controls { padding:10px 12px 9px; border:1px solid #2a3a50; border-radius:10px; background:#101929 }
.slider-heading { font-size:13px; font-weight:700 }
.slider-heading output { color:var(--coral); font:700 13px var(--mono) }
.slider-row { display:flex; align-items:center; gap:9px; color:var(--faint); font:600 11px var(--mono) }
.slider-row input { flex:1; min-width:50px; height:32px; accent-color:var(--teal); cursor:pointer; margin:0 }
.slider-row .button { min-height:34px; width:34px; margin-left:5px }
.capture-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px }
.capture-controls .instruction { flex:1 1 100%; margin:0; font-size:13px; color:#d0def0 }
.camera-note { color:var(--muted); font-size:12px; margin:9px 2px 0 }
.sidebar { display:grid; gap:14px }
.readout,.landmarks { padding:17px }
.micro-tag { font:600 10px/1.2 var(--mono); color:#a9bdd5; letter-spacing:.75px; background:#1a283a; border:1px solid #2c3c54; padding:5px 7px; border-radius:5px; white-space:nowrap }
.measurement { margin-top:15px; background:#0e1725; border:1px solid #2c3b51; border-radius:12px; padding:17px 16px 13px }
.small-label { font:650 10px/1.4 var(--mono); letter-spacing:1.45px; color:#a5b7cc; margin:0 }
.reading { margin:4px 0 8px; color:var(--coral); font:730 49px/1.14 var(--mono); letter-spacing:-4px; font-variant-numeric:tabular-nums; white-space:nowrap }
.degree { font-size:.58em; letter-spacing:0; vertical-align:top; position:relative; top:.17em; margin-left:3px }
.state { display:inline-flex; align-items:center; min-height:25px; gap:6px; background:#482e2e; color:#ffc3ad; border-radius:6px; padding:3px 8px; font-size:11px; font-weight:700 }
.state:before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor }
.state.good { background:#163d35; color:#a1f5c2 }
.state.wait { background:#27364b; color:#c3d1e3 }
.gauge { padding-top:17px }
.gauge-track { height:7px; position:relative; border-radius:6px; background:linear-gradient(90deg,#874d48,#594348 36%,#24534d 50%,#594348 64%,#874d48) }
.gauge-band { position:absolute; left:43.75%; width:12.5%; height:100%; background:#40836d; border-radius:2px }
.gauge-track i { position:absolute; left:65%; top:-4px; width:3px; height:15px; border-radius:2px; transform:translateX(-50%); background:#fff3df; box-shadow:0 0 7px #ffe0c875 }
.gauge-ticks { display:flex; justify-content:space-between; margin-top:8px; color:#a9b8ca; font:600 10px var(--mono) }
.angle-list { margin:10px 0 }
.angle-list div { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #27364b; padding:7px 1px; font-size:13px }
.angle-list dt { color:#aabbd1 }
.angle-list dd { margin:0; font:650 13px/1.5 var(--mono) }
.feedback { display:flex; align-items:flex-start; gap:8px; background:#1a293d; color:#bdcce0; border:1px solid #293c54; padding:9px; border-radius:9px }
.feedback .icon { color:var(--teal); width:16px; height:16px; margin-top:2px }
.feedback p { margin:0; font-size:12px; line-height:1.48 }
.point-list { margin:9px 0 0; padding:0; list-style:none }
.point-list li + li { border-top:1px solid #28364b }
.point-row { display:flex; align-items:center; gap:8px; width:100%; padding:5px 2px; min-height:34px; color:#d4dfef; border:0; background:transparent; text-align:left; font-size:12px }
button.point-row { min-height:42px }
button.point-row:hover,button.point-row[aria-pressed=true] { color:white; background:#1c2d41 }
.point-index { width:20px; height:20px; display:grid; place-items:center; border-radius:5px; color:var(--teal); background:#1c3940; font:700 10px var(--mono); flex-shrink:0 }
.point-index.fox { color:#ffb59b; background:#422e33 }
.point-state { margin-left:auto; color:var(--faint); font-size:11px; white-space:nowrap }
.point-state .icon { color:var(--teal); width:14px; height:14px }
.footer { display:flex; gap:10px 20px; flex-wrap:wrap; justify-content:space-between; margin:18px 0 23px; color:var(--muted); font-size:12px }
.footer .icon { color:var(--teal); width:16px; height:16px; margin-right:4px }
dialog { width:min(535px,calc(100% - 24px)); max-height:85dvh; color:var(--ink); background:var(--panel); border:1px solid #40536e; border-radius:16px; padding:20px }
dialog::backdrop { background:#030811bd }
.guide-head { display:flex; align-items:center; justify-content:space-between; gap:12px }
.guide-head h2 { font-size:20px }
.guide-list { color:#bdcce0; padding-left:22px; margin-bottom:4px }
.guide-list li { padding-left:5px; margin:10px 0 }
.guide-list b { color:var(--ink) }
@media(max-width:840px) { .workspace { grid-template-columns:minmax(0,1fr) minmax(240px,290px); gap:12px } .shell,.topbar-inner { padding-inline:18px } .imaging,.readout,.landmarks { padding:13px } }
@media(max-width:690px) { .workspace { grid-template-columns:minmax(0,1fr) } .sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start } .stage { height:clamp(295px,66vw,435px) } }
@media(max-width:480px) {
  .shell,.topbar-inner { padding-inline:12px }
  .topbar-inner { min-height:60px }
  .brand { font-size:19px; gap:8px }
  .brand-mark { width:33px; height:33px }
  .topbar-actions { gap:4px }
  .prototype { display:none }
  .intro { margin:25px 0 18px }
  .intro > p:last-child { font-size:13px }
  .imaging,.readout,.landmarks { padding:11px }
  .panel-head { flex-wrap:wrap; padding-bottom:10px }
  .segments button { min-height:40px; padding-inline:7px; font-size:12px }
  .view-row { margin:9px 0 }
  .legend { gap:9px; font-size:11px }
  .legend span:last-child { font-size:9px }
  .stage-view { right:17px }
  .stage-badge { left:17px }
  .stage { height:clamp(262px,77vw,365px) }
  .sidebar { grid-template-columns:minmax(0,1fr) }
  .reading { font-size:45px }
  .footer { margin-top:15px }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.stage.hide-grid .reticle { visibility:hidden }
.stage-angle { display:none; position:absolute; right:22px; bottom:22px; padding:6px 10px; border:1px solid #3a526c; background:#0b1626ef; border-radius:8px; font:700 19px var(--mono); pointer-events:none }
#sample-action { margin-left:3px }
@media(max-width:690px) { .stage-angle { display:block } }
@media(max-width:480px) { .stage-angle { bottom:17px; right:17px } }

.institution-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid #e4dcea;
}
.institution-logo {
  display: block;
  width: min(330px, 100%);
  height: auto;
}
@media (max-width: 480px) {
  .institution-header { padding: 12px 20px; }
  .institution-logo { width: min(280px, 100%); }
}