:root{
  --bg:#0b1b30; --panel:#0f2238; --line:#1f3652; --fg:#e9eef6; --mut:#8ea2bb; --dim:#5f738c;
  --accent:#6fb4ff; --pink:#f2a1b1; --gold:#f3cd6a; --lock:#ffcc4d;
  --field:#0a1829; --hover:#163050; --rowon:#2c2a16; --edge:#345372;
  --note-bg:#0d2033; --note-bd:#274462; --note-fg:#a9bdd4;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
/* Light chrome only: the image area and everything drawn over it stays dark, because scans are read on black. */
[data-theme=light] :is(header,aside,#ctl,#settings,#modal,#readpane){
  --panel:#f6f7f9; --line:#dde1e7; --fg:#18202b; --mut:#5d6878; --dim:#8a93a1; --accent:#1f6fd1;
  --field:#fff; --hover:#eaedf2; --rowon:#fff1c2; --edge:#b5bdc9;
  --note-bg:#eef5fb; --note-bd:#c7d9ea; --note-fg:#3d5166; color-scheme:light; color:var(--fg)}
[data-theme=light] body{background:#f6f7f9}
[data-theme=light] #scard{background:#fff}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{overflow:hidden;overscroll-behavior:none}   /* the viewer is one fixed screen: nothing to pan or rubber-band */
body{background:var(--bg);color:var(--fg);font:14px/1.45 var(--sans);display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:inherit}
a{color:var(--accent)}

header{display:flex;align-items:center;gap:14px;padding:0 14px;height:52px;border-bottom:1px solid var(--line);background:var(--panel);flex:none}
.brand{font:600 20px/1 var(--serif);color:var(--fg);text-decoration:none;letter-spacing:.01em}
.brand em{font-style:italic;color:var(--pink)}
.views{display:flex;gap:4px;font-size:13px}
.views a,.views span{padding:6px 10px;border-radius:7px;color:var(--mut);text-decoration:none}
.views a:hover{color:var(--fg);background:var(--hover)}
.views span{color:var(--fg);background:var(--hover)}
.sp{flex:1}
#themebtn,#sidebtn{background:var(--field);border:1px solid var(--line);color:var(--mut);border-radius:7px;height:30px;padding:0 9px;cursor:pointer;font-size:14px}
#themebtn{width:32px;padding:0}
#themebtn:hover,#sidebtn:hover{color:var(--fg);border-color:var(--edge)}
#sidebtn{display:none}
#readbtn{background:linear-gradient(180deg,#f3cd6a,#d9a326);border:1px solid #b9861a;color:#241703;border-radius:7px;height:30px;padding:0 13px;font:700 12.5px/1 var(--sans);cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px rgba(217,163,38,.3)}
#readbtn:hover{filter:brightness(1.07)}
#readbtn[aria-expanded=true]{box-shadow:0 0 0 2px rgba(243,205,106,.45)}

#app{flex:1;display:flex;min-height:0}
#stage{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
#canvaswrap{position:relative;flex:1;background:#000;overflow:hidden;min-height:0;touch-action:none}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
#cv.onstruct{cursor:pointer}
#cv.grab{cursor:grabbing}
#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;font:600 11.5px var(--sans)}
#leaders text{fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.85);stroke-width:3px}
#leaders line{stroke-width:1.2}
#loupe{position:absolute;display:none;width:200px;height:200px;border-radius:50%;border:2px solid rgba(255,255,255,.6);box-shadow:0 6px 24px rgba(0,0,0,.6);pointer-events:none;z-index:8;background:#000}
#loupe.on{display:block}

#rail{position:absolute;left:12px;top:12px;z-index:6;display:flex;flex-direction:column;gap:6px;background:rgba(10,16,24,.82);border:1px solid #28364a;border-radius:10px;padding:6px;backdrop-filter:blur(6px)}
#rail .sep{height:1px;background:#28364a;margin:2px 4px}
#rail button{display:block;width:46px;height:34px;background:none;border:0;border-radius:7px;color:#9fb0c6;font:700 11.5px/1 var(--sans);cursor:pointer;letter-spacing:.04em}
#rail button:hover{background:#1c2a3d;color:#fff}
#rail button[aria-selected=true]{background:var(--accent);color:#06192c}
#rail button[disabled]{opacity:.4;cursor:progress}
#topbar{position:absolute;top:12px;left:70px;right:12px;display:flex;justify-content:center;gap:8px;z-index:5;pointer-events:none;flex-wrap:wrap}
#convention,#layer,#fibmode{display:inline-flex;pointer-events:auto;background:rgba(10,16,24,.82);border:1px solid #28364a;border-radius:9px;padding:3px;backdrop-filter:blur(6px)}
#convention button,#layer button,#fibmode button{background:none;border:0;border-radius:6px;color:#9fb0c6;padding:5px 11px;font:600 11.5px/1 var(--sans);cursor:pointer}
#convention button[aria-selected=true],#layer button[aria-selected=true],#fibmode button[aria-selected=true]{background:#1f3b5c;color:#fff}
#layer button[aria-selected=true]{background:var(--accent);color:#06192c}
#fibmode[hidden],#tubebtn[hidden]{display:none}
#mribox{display:inline-flex;align-items:center;gap:7px;pointer-events:auto;background:rgba(10,16,24,.82);border:1px solid #28364a;border-radius:9px;padding:3px 10px;color:#9fb0c6;font:600 11.5px/1 var(--sans);backdrop-filter:blur(6px)}
#mribox input{width:90px;accent-color:var(--accent);margin:0}
.marker{position:absolute;color:#cfd8e4;font:700 13px var(--sans);text-shadow:0 1px 2px #000;z-index:4;pointer-events:none;opacity:.85}
#mL{left:72px;top:46%;transform:translateY(-50%)}
#mR{right:14px;top:46%;transform:translateY(-50%)}
#mTop{top:52px;left:50%;transform:translateX(-50%)}

#locators{position:absolute;right:12px;bottom:12px;z-index:6;display:flex;flex-direction:column;gap:8px}
.loc{position:relative;width:150px;height:150px;background:#000;border:1px solid #28364a;border-radius:8px;overflow:hidden;cursor:crosshair}
.loc:hover{border-color:var(--accent)}
.loc canvas{width:100%;height:100%;display:block}
.loclbl{position:absolute;left:6px;top:4px;font:700 10px var(--sans);color:#9fb0c6;letter-spacing:.06em;pointer-events:none}

#botleft{position:absolute;left:12px;bottom:12px;z-index:6;max-width:min(56vw,520px);pointer-events:none}
#readout{font:600 14px var(--sans);color:#fff;text-shadow:0 1px 3px #000;min-height:20px}
#readout .side{color:#9fb0c6;font-weight:500}
#readout .mm{color:#8ea2bb;font:12px ui-monospace,Menlo,monospace;margin-left:8px}
#howto{color:#7d8da3;font-size:11.5px;margin-top:3px;text-shadow:0 1px 2px #000}

#clin{position:absolute;top:60px;right:12px;z-index:7;width:min(380px,44vw);max-height:calc(100% - 240px);overflow:auto;background:rgba(12,22,36,.96);border:1px solid #2a4260;border-radius:12px;padding:14px 16px 12px;color:#e3ebf5;font-size:13px;line-height:1.5;box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(8px)}
#clin[hidden]{display:none}
#clin .x{position:absolute;right:8px;top:6px;background:none;border:0;color:#8ea2bb;font-size:20px;cursor:pointer;line-height:1}
#clin h4{margin:0 0 2px;font:600 17px/1.2 var(--serif);color:#fff;padding-right:22px}
#clin .meta{color:#8ea2bb;font-size:11.5px;margin-bottom:10px}
#clin .meta i{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:-1px;margin-right:5px}
#clin .f{margin:8px 0}
#clin .f b{display:block;font:700 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#8ea2bb;margin-bottom:2px}
#clin .pearl{margin:10px 0;padding:8px 11px;border-left:3px solid var(--gold);background:rgba(243,205,106,.1);border-radius:0 7px 7px 0;color:#fbe9b4}
#clin .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
#clin .chips a{display:inline-block;padding:2px 8px;border-radius:12px;background:#17304c;color:#bfd6f3;text-decoration:none;font-size:11.5px;border:1px solid #27486c}
#clin .chips a:hover{background:#1f3f63}
#clin .note{margin-top:10px;padding:7px 10px;border-radius:7px;background:var(--note-bg);border:1px solid var(--note-bd);color:var(--note-fg);font-size:11.5px}
#clin .dice{font:11px ui-monospace,Menlo,monospace}
#clin .more{display:inline-block;margin-top:8px;font-size:12px}

#loading{position:absolute;inset:0;display:grid;place-items:center;background:#000;z-index:9;color:#9fb0c6;font-size:13px}
#loading[hidden]{display:none}
#loading .orbit{width:34px;height:34px;border-radius:50%;border:2px solid #223349;border-top-color:var(--accent);animation:spin 1s linear infinite;position:absolute;top:calc(50% - 40px)}
#loading p{margin-top:36px}
@keyframes spin{to{transform:rotate(360deg)}}

#ctl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);background:var(--panel);flex:none;flex-wrap:wrap}
#slider{flex:1;min-width:120px;accent-color:var(--accent)}
.step{width:28px;height:28px;border-radius:7px;background:var(--field);border:1px solid var(--line);cursor:pointer;font-size:16px;line-height:1}
.step:hover{border-color:var(--edge)}
.num{font:12px ui-monospace,Menlo,monospace;color:var(--mut);min-width:150px}
.mini{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mut);cursor:pointer;white-space:nowrap}
.mini input{accent-color:var(--accent)}
#lensbtn,#gear,#resetbtn{background:var(--field);border:1px solid var(--line);border-radius:7px;height:28px;padding:0 10px;font-size:12px;cursor:pointer;color:var(--mut)}
#lensbtn:hover,#gear:hover,#resetbtn:hover{border-color:var(--edge);color:var(--fg)}
#lensbtn[aria-pressed=true]{background:var(--accent);color:#06192c;border-color:var(--accent)}

aside{width:300px;border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0;flex:none}
#search{margin:12px;padding:7px 10px;background:var(--field);border:1px solid var(--line);border-radius:7px;color:var(--fg);font:inherit;font-size:13px}
#search::placeholder{color:var(--dim)}
#locked{padding:0 12px 8px;display:flex;flex-wrap:wrap;gap:6px}
#locked:empty{display:none}
.chip{color:#14181f;border:0;border-radius:20px;padding:3px 9px;font:600 11px var(--sans);cursor:pointer}
.chip::after{content:" ×";opacity:.6}
#list{flex:1;overflow-y:auto;padding:0 6px 20px}
.grp{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.07em;padding:12px 10px 4px;position:sticky;top:0;background:var(--panel);z-index:1}
.row{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:13px}
.row:hover,.row.hot{background:var(--hover)}
.row.on{background:var(--rowon)}
.sw{width:11px;height:11px;border-radius:3px;flex:none}
.row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .c{color:var(--dim);font:11px ui-monospace,Menlo,monospace}
.row .c.low{color:#d9a326}
aside footer{border-top:1px solid var(--line);padding:8px 10px}
#copybtn{width:100%;text-align:left;background:none;border:0;color:var(--mut);cursor:pointer;font-size:12px;padding:6px 8px;border-radius:6px}
#copybtn:hover{background:var(--hover);color:var(--fg)}

#settings,#modal{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(4,6,9,.6);backdrop-filter:blur(3px)}
#settings[hidden],#modal[hidden]{display:none}
#scard,#card{width:min(520px,92vw);max-height:84vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px 18px;color:var(--fg)}
#scard h2,#card h2{margin:0 0 4px;font:600 18px var(--serif)}
.lede{color:var(--mut);font-size:12.5px;margin:0 0 14px}
.set{display:grid;grid-template-columns:90px 1fr 48px;align-items:center;gap:10px;padding:7px 0;font-size:13px}
.set input[type=range]{accent-color:var(--accent)}
.set output{font:12px ui-monospace,Menlo,monospace;color:var(--mut);text-align:right}
.setrow{display:flex;gap:10px;margin-top:14px}
.setrow button,#close{flex:1;background:var(--field);border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px;cursor:pointer}
#sclose{background:var(--accent);color:#04121f;border-color:var(--accent);font-weight:600}
#card ul{margin:0;padding:0;list-style:none}
#card li{padding:10px 0;border-top:1px solid var(--line)}
#card li b{display:block;font-size:13px;margin-bottom:2px}
#card li span{color:var(--mut);font-size:12.5px;line-height:1.55;display:block}
#close{margin-top:14px;flex:none;padding:7px 16px}

#readpane{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);z-index:40;display:flex;flex-direction:column;background:var(--panel);color:var(--fg);border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(0,0,0,.45);transform:translateX(102%);transition:transform .25s ease;visibility:hidden}
#readpane.open{transform:none;visibility:visible}
@media (min-width:1100px){body.reading #app{margin-right:min(560px,70vw)} body.reading aside{display:none}}
@media (prefers-reduced-motion:reduce){#readpane{transition:none}}
.rp-head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.rp-head h2{margin:0;flex:1;font:600 17px/1.2 var(--serif)}
.rp-x{background:none;border:1px solid var(--line);color:var(--mut);border-radius:7px;width:32px;height:30px;font-size:18px;cursor:pointer}
.rp-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.rp-tabs button{flex:none;background:none;border:0;border-radius:7px;padding:7px 10px;color:var(--mut);font:600 12px/1 var(--sans);cursor:pointer;white-space:nowrap}
.rp-tabs button:hover{color:var(--fg);background:var(--hover)}
.rp-tabs button[aria-selected=true]{color:var(--accent);background:var(--hover)}
.rp-body{flex:1;overflow-y:auto;padding:6px 20px 24px;font-size:14.5px;line-height:1.62}
.rp-body h3{font:600 21px/1.25 var(--serif);margin:16px 0 8px}
.rp-body h4{font:700 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:20px 0 6px}
.rp-body p{margin:0 0 11px}
.rp-body ul{margin:0 0 12px;padding-left:19px}
.rp-body li{margin:0 0 5px}
.rp-body .note{border-left:3px solid var(--accent);background:var(--note-bg);color:var(--note-fg);padding:9px 12px;border-radius:0 8px 8px 0;margin:12px 0;font-size:13.5px}
.rp-body .goto{display:inline-flex;align-items:center;gap:6px;background:var(--field);color:var(--accent);border:1px solid var(--line);border-radius:7px;padding:6px 10px;font:600 12px/1 var(--sans);cursor:pointer;margin:2px 6px 6px 0}
.rp-body .goto:hover{border-color:var(--accent)}
.rp-foot{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--line)}
.rp-foot button{background:var(--field);border:1px solid var(--line);border-radius:7px;padding:8px 12px;font:600 12.5px/1 var(--sans);cursor:pointer;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-foot button[hidden]{visibility:hidden;display:block}

@media (max-width:1000px){
  #sidebtn{display:inline-flex;align-items:center;gap:5px}
  aside{position:fixed;top:52px;right:0;bottom:0;width:min(320px,88vw);z-index:20;transform:translateX(102%);visibility:hidden;transition:transform .22s,visibility .22s;box-shadow:-10px 0 30px rgba(0,0,0,.4)}
  aside.open{transform:none;visibility:visible}
  .views{display:none}
  #clin{width:min(360px,70vw);max-height:48%}
}
@media (max-width:700px){
  #locators{flex-direction:row;bottom:auto;top:132px;right:8px}   /* below the layer tabs and MRI slider, which wrap to two rows */
  .loc{width:76px;height:76px}
  #botleft{max-width:70vw}
  #howto{display:none}
  #clin{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:45%}
  .num{min-width:0}
  #sidebtn .t{display:none}
}

/* surgical planning */
#tubebtn{position:absolute;top:52px;right:12px;z-index:7;height:30px;padding:0 13px;border-radius:8px;cursor:pointer;background:rgba(15,19,25,.9);border:1px solid #ffb020;color:#ffc04d;font:700 12px/1 var(--sans);white-space:nowrap;backdrop-filter:blur(6px)}
#tubebtn:hover{background:#2a2110}
#tubebtn[aria-pressed=true]{background:#ffb020;color:#1a1204}
body.tubemode #cv{cursor:crosshair}
body.tubemode #clin{display:none!important}
#tubebox{position:absolute;right:12px;top:90px;z-index:7;width:min(340px,42vw);max-height:calc(100% - 420px);min-height:160px;overflow:auto;background:rgba(15,19,25,.95);border:1px solid #303845;border-radius:10px;padding:10px 12px;color:#e8ecf2;font:12px/1.45 var(--sans);backdrop-filter:blur(6px)}
#tubebox[hidden]{display:none}
#tubebox .tb-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:4px}
#tubebox .tb-x{background:none;border:0;color:#8b95a5;font-size:18px;cursor:pointer;line-height:1}
#tubebox .tb-help,#tubebox .tb-note{margin:0 0 8px;color:#9ba7b7;font-size:11.5px}
#tubebox .tb-note{margin:8px 0 0;font-size:11px;color:#7d8899}
#tubebox .tb-row{display:flex;align-items:center;gap:8px;margin:6px 0;flex-wrap:wrap}
#tubebox .tb-seg{display:inline-flex;border:1px solid #303845;border-radius:7px;overflow:hidden}
#tubebox .tb-seg button{background:none;border:0;color:#9ba7b7;padding:4px 9px;font:600 11.5px var(--sans);cursor:pointer}
#tubebox .tb-seg button.on{background:#ffb020;color:#1a1204}
#tubebox .tb-len{color:#ffd27a;font-weight:600;margin:4px 0}
#tubebox .tb-clear{background:#202733;border:1px solid #303845;color:#e8ecf2;border-radius:7px;padding:4px 10px;cursor:pointer;font:600 11.5px var(--sans)}
#tubebox .tb-key{color:#9ba7b7;font-size:11px}
#tubebox .tb-key i,#tubebox .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 4px 0 2px;vertical-align:-1px}
#tubebox table{width:100%;border-collapse:collapse;margin-top:4px}
#tubebox td{padding:3px 2px;border-top:1px solid #252b35;vertical-align:top}
#tubebox td.n{text-align:right;white-space:nowrap;color:#c9d1db}
#tubebox .risk{display:inline-block;padding:1px 6px;border-radius:5px;font-weight:700;font-size:10.5px;color:#160606}
#tubebox .tb-empty{color:#9ba7b7;margin:4px 0}
@media (max-width:700px){#tubebox{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:40%}}