:root{color-scheme:dark;--bg:#091219;--panel:#101e27;--line:#253640;--text:#e6edf0;--muted:#92a8b5;--accent:#76dbc8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif}header{height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 32px;gap:16px}a{color:var(--accent);text-decoration:none}.brand{letter-spacing:.18em;font-size:11px;color:var(--muted)}.badge,.tag{border:1px solid var(--line);padding:4px 9px;border-radius:5px;font-size:10px;color:var(--muted)}main{max-width:1800px;margin:auto;padding:30px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--accent);margin:0 0 8px}h1{font-size:28px;letter-spacing:.04em;margin:0}.intro p:not(.eyebrow){color:var(--muted);margin:8px 0 0}.live-angle{font:500 24px/1.4 ui-monospace,monospace;color:var(--accent);white-space:nowrap}.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px}aside{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}section+section{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}h2{font-size:11px;color:var(--accent);margin:0 0 14px}h2 span{font-size:13px;color:var(--text);margin-left:9px}button,select{font:inherit;color:var(--text);background:#192b36;border:1px solid #304550;border-radius:7px;cursor:pointer;padding:9px 10px}button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button[aria-pressed=true]{background:#22463f;border-color:var(--accent);color:#b7fff0}button:disabled{opacity:.4;cursor:default}.segmented,.playback{display:flex;gap:6px}.segmented button,.playback button{flex:1;font-size:12px}.presets{display:grid;grid-template-columns:1fr 1fr;gap:7px}.presets button{font-size:11px;text-align:left;line-height:1.6}.presets small{display:block;font-size:10px;color:var(--muted)}label{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:12px;margin-top:16px}output{color:var(--accent);font:11px ui-monospace,monospace}input[type=range]{width:100%;accent-color:var(--accent);margin:10px 0 0}input[type=checkbox]{accent-color:var(--accent)}.ends{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.hint{font-size:11px;color:var(--muted);min-height:36px}.text-button{font-size:11px;background:transparent;width:100%;margin-top:14px}.inject{background:var(--accent);color:#092a24;border:0;font-weight:700;width:100%;padding:12px}.playback{margin-top:8px}.check{justify-content:flex-start}.views{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px;font-size:12px;gap:6px}.panel-head b{color:var(--accent);margin-right:8px}.stage{height:510px;position:relative;background:radial-gradient(ellipse at center,#203240,#0a151e);overflow:hidden;touch-action:none}.stage canvas{position:absolute;inset:0;width:100%;height:100%}.corner,.stage-bottom,.status{position:absolute;z-index:2;pointer-events:none;font:10px/1.8 ui-monospace,monospace;color:#9bb1bc}.corner{top:18px;left:18px}.stage-bottom{bottom:16px;left:0;width:100%;text-align:center}.fluoro .corner,.fluoro .stage-bottom{color:#515963}.status{top:18px;right:16px;color:#343c43;background:#ffffff80;border-radius:5px;padding:3px 8px}.legend{display:flex;flex-wrap:wrap;gap:18px;font-size:11px;padding:20px 3px;color:#b6c7d1}.legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}.note{background:#101e27;border:1px solid var(--line);border-radius:10px;padding:18px 22px;color:var(--muted);font-size:12px}.note h3{color:var(--text);font-size:13px;margin:0 0 6px}.note p{margin:7px 0}.note a{font-size:11px}#vesselLabels{position:absolute;inset:0;z-index:2;pointer-events:none}.vessel-label{position:absolute;font:11px ui-monospace,monospace;background:#091219c9;border:1px solid #59707b;border-radius:4px;padding:2px 5px;transform:translate(-50%,-50%)}#error{color:#ffb4a8}@media(min-width:1550px){.stage{height:610px}}@media(max-width:1100px){main{padding:20px}.workspace{grid-template-columns:250px minmax(0,1fr)}.views{grid-template-columns:1fr}.stage{height:390px}.intro h1{font-size:23px}.live-angle{font-size:19px}}@media(max-width:650px){header{padding:0 16px}.brand{display:none}main{padding:16px}.intro{display:block}.live-angle{margin-top:16px}.workspace{display:flex;flex-direction:column}.viewer-area{order:0}aside{order:1}.stage{height:370px}.intro h1{font-size:22px}.legend{gap:12px}.note{padding:15px}.views{gap:12px}}

[hidden]{display:none!important}.display-switch{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}.display-switch button{font-size:12px}.room-label{position:absolute;z-index:2;pointer-events:none;font:10px sans-serif;background:#10202bdc;border-radius:4px;padding:4px 6px;transform:translate(-50%,-50%);white-space:nowrap}.room-reset{position:absolute;right:10px;top:10px;z-index:3;font-size:10px}.view-guide,#roomExplanation{margin-top:16px}.view-guide h3{font-size:17px;color:#c5f6e9}.view-guide dl{display:grid;grid-template-columns:140px 1fr;gap:10px 14px;margin:16px 0}.view-guide dt{color:#76dbc8}.view-guide dd{margin:0;color:#d8e4e9}.view-guide>p:not(.eyebrow){font-size:11px}#cathRoom{background:#111f2a}@media(max-width:650px){.view-guide dl{grid-template-columns:1fr;gap:5px}.view-guide dd{margin-bottom:9px}.display-switch{position:sticky;top:0;z-index:8;background:#091219;padding:8px 0}.display-switch button{flex:1;font-size:11px}#cathRoom .stage-bottom{font-size:8px}}

#trackingPreview{width:100%;height:auto;background:#091219;border-radius:6px}#cameraCalibrate,#centerFraming{width:100%;margin:8px 0}summary{cursor:pointer;color:#76dbc8;font-size:12px}.frame-crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;color:#56666f66;font-size:24px}.hint li{margin-bottom:8px}

/* Keep contrast controls within reach while viewing either imaging panel. */
.contrast-toolbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px #0003}
.contrast-toolbar .inject{width:auto;min-width:190px;min-height:48px}
.contrast-toolbar .playback{margin:0;gap:8px}
.contrast-toolbar .playback button{min-width:76px;min-height:48px;white-space:nowrap}
.contrast-toolbar .check{margin:0 0 0 auto;min-height:44px;padding:4px;white-space:nowrap}
.contrast-toolbar input[type=checkbox]{width:20px;height:20px;margin:0}
@media(max-width:650px){
 .contrast-toolbar{flex-wrap:wrap;gap:4px 8px;padding:8px;border-radius:9px}
 .contrast-toolbar .inject{flex:1;min-width:0;font-size:14px}
 .contrast-toolbar .playback{gap:6px}
 .contrast-toolbar .playback button{min-width:60px;padding:8px;font-size:12px}
 .contrast-toolbar .check{width:100%;margin:0;min-height:36px}
 .display-switch{position:static}
}