:root{--bg: #0a1218;--panel: rgba(12, 22, 30, .55);--panel-solid: rgba(12, 22, 30, .92);--panel-edge: rgba(94, 160, 180, .28);--text: #e6eaed;--muted: #8aa0ae;--accent: #3db8c8;--accent-soft: rgba(61, 184, 200, .15);--border: rgba(255, 255, 255, .1);--glass-blur: 18px;--radius: 12px;--font: "Outfit", "Segoe UI", system-ui, sans-serif;--mono: "IBM Plex Mono", "Consolas", ui-monospace, monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;height:100dvh;max-height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font)}#app{position:relative}#viewport{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;cursor:grab;background:radial-gradient(ellipse at 40% 20%,rgba(40,80,90,.22),transparent 55%),var(--bg)}#viewport:active{cursor:grabbing}#viewport canvas{display:block}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.hud>*{pointer-events:auto}.brand{position:absolute;top:1rem;left:1.25rem;padding:.4rem .75rem;background:var(--panel);border:1px solid var(--panel-edge);border-radius:10px;backdrop-filter:blur(var(--glass-blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);box-shadow:0 12px 40px #00000047;z-index:2;animation:fade-up .7s ease both}.brand h1{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}.brand h1 span{color:var(--accent)}.panel-shell{position:absolute;top:3.75rem;right:auto;left:1rem;bottom:1rem;width:min(300px,calc(100vw - 1.5rem));height:auto;max-height:none;z-index:4;display:flex;flex-direction:column;min-height:0;transition:transform .28s ease;animation:fade-in .6s ease .1s both}.panel-shell.collapsed{transform:translate(calc(-100% - 1.25rem))}.panel{position:relative;width:100%;flex:1 1 auto;min-height:0;max-height:100%;background:var(--panel-solid);border:1px solid var(--panel-edge);border-radius:var(--radius);padding:0 1rem 1rem;overflow-x:hidden;overflow-y:auto;backdrop-filter:blur(var(--glass-blur)) saturate(1.25);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.25);box-shadow:0 18px 50px #00000059,inset 0 1px #ffffff0f;scrollbar-width:thin;scrollbar-color:rgba(61,184,200,.45) rgba(0,0,0,.25)}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-track{margin:8px 0;background:#00000038;border-radius:999px}.panel::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3db8c88c,#3db8c847);border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel::-webkit-scrollbar-thumb:hover{background:#3db8c8b3;border:2px solid transparent;background-clip:padding-box}.panel-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 -1rem .75rem;padding:.75rem 1rem .55rem;background:#0c161efa;backdrop-filter:blur(var(--glass-blur)) saturate(1.25);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.25);border-bottom:1px solid var(--panel-edge);border-radius:var(--radius) var(--radius) 0 0}.panel h2,.presets h3,.legend h3{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.panel-top h2{margin:0}.panel-collapse{width:1.6rem;height:1.6rem;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;display:inline-grid;place-items:center;padding:0}.panel-collapse .collapse-chevron{width:.72rem;height:.72rem;display:block;transform:rotate(90deg)}.panel-collapse:hover{color:var(--text);border-color:var(--muted)}.panel-expand{position:absolute;top:0;left:calc(100% + .5rem);writing-mode:vertical-rl;font-family:var(--font);font-size:.75rem;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;padding:.7rem .4rem;cursor:pointer;opacity:0;pointer-events:none;backdrop-filter:blur(var(--glass-blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);box-shadow:0 10px 28px #0000004d}.panel-shell.collapsed .panel-expand{opacity:1;pointer-events:auto}.panel-expand:hover{color:var(--text)}.angle-mini{position:absolute;top:3.6rem;left:calc(100% + .5rem);display:grid;gap:.35rem;min-width:7.5rem;padding:.45rem .55rem;background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;backdrop-filter:blur(var(--glass-blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);box-shadow:0 10px 28px #0000004d;opacity:0;pointer-events:none;transition:opacity .2s ease}.panel-shell.collapsed .angle-mini{opacity:1}.angle-mini-row{display:flex;flex-direction:column;gap:.05rem}.angle-mini-label{font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}.angle-mini-value{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--accent);line-height:1.2}.vessel-tooltip{position:fixed;top:0;left:0;z-index:20;pointer-events:none;min-width:9rem;max-width:15rem;padding:.5rem .65rem;background:#0a1218a6;border:1px solid var(--panel-edge);border-radius:8px;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 12px 32px #0006}.vessel-tooltip[hidden]{display:none}.vessel-tooltip-name{font-size:.85rem;font-weight:600}.vessel-tooltip-detail{margin-top:.15rem;font-size:.72rem;color:var(--muted);line-height:1.3}.angle-readout{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:.75rem}.readout{background:var(--accent-soft);border:1px solid rgba(74,158,176,.28);border-radius:8px;padding:.5rem .6rem}.readout .label{font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}.readout .value{font-family:var(--mono);font-size:1rem;font-weight:600;margin-top:.1rem;color:var(--accent)}.control-group{margin-bottom:.85rem}.slider-row{display:grid;grid-template-columns:3.8rem 1fr auto;gap:.4rem;align-items:center}.slider-row>label{font-size:.8rem;color:var(--muted)}.slider-row input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.num-wrap{display:flex;align-items:center;background:#00000059;border:1px solid var(--border);border-radius:4px;padding-right:.3rem}.num-wrap input[type=number]{width:2.8rem;font-family:var(--mono);font-size:.8rem;background:transparent;border:none;color:var(--text);padding:.35rem;outline:none;text-align:right;-moz-appearance:textfield}.num-wrap input[type=number]::-webkit-outer-spin-button,.num-wrap input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.num-wrap .unit{font-family:var(--mono);font-size:.7rem;color:var(--muted)}.num-wrap:focus-within{border-color:var(--accent)}.oblique-toggle,.action-row,.vessel-actions{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.oblique-toggle{margin-bottom:.4rem}.oblique-toggle button,.preset-grid button,.action-row button,.vessel-actions button{font-family:var(--font);font-size:.78rem;font-weight:500;border:1px solid var(--border);background:#00000040;color:var(--text);border-radius:5px;padding:.4rem .45rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.oblique-toggle button:hover,.preset-grid button:hover,.action-row button:hover,.vessel-actions button:hover{background:#3db8c81f;border-color:#3db8c859}.oblique-toggle button.active{background:var(--accent-soft);border-color:#4a9eb073;color:var(--accent)}.presets h3,.legend h3{margin:.15rem 0 .45rem}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.preset-grid button{text-align:left;line-height:1.25}.preset-grid button small{display:block;color:var(--muted);font-size:.65rem;font-family:var(--mono);margin-top:.12rem}.action-row{margin-top:.65rem;grid-template-columns:1fr}.sim-panel{margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--border)}.sim-panel h3{margin:.15rem 0 .45rem}.btn-simulate{width:100%;font-family:var(--font);font-size:.82rem;font-weight:600;border:1px solid rgba(61,184,200,.4);background:#3db8c81f;color:var(--accent);border-radius:6px;padding:.5rem .6rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.btn-simulate:hover{background:#3db8c833;border-color:#3db8c88c}.btn-simulate.active{border-color:#3db8c859;background:#3db8c814;color:var(--muted);cursor:default}.sim-panel-hint{margin-top:.4rem;font-size:.68rem;line-height:1.35;color:var(--muted)}.sim-bar{position:absolute;bottom:4.5rem;left:0;right:0;margin-inline:auto;width:min(26rem,calc(100vw - 2.5rem));padding:.65rem .9rem .55rem;background:var(--panel);border:1px solid var(--panel-edge);border-radius:10px;backdrop-filter:blur(var(--glass-blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);box-shadow:0 12px 36px #00000052;animation:sim-bar-in .35s ease both;z-index:3}@keyframes sim-bar-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sim-bar[hidden]{display:none}.sim-bar-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.75rem;color:var(--muted);margin-bottom:.35rem}.sim-bar-label #sim-target-label{color:var(--text);font-size:.75rem}.sim-bar-label #sim-status{font-family:var(--mono);font-size:.72rem;color:var(--accent)}.sim-transport-row{display:grid;grid-template-columns:auto 1fr;gap:.45rem;align-items:center}.sim-speed-block{margin-top:.45rem}.sim-speed-caption{display:flex;justify-content:space-between;align-items:baseline;font-size:.65rem;color:var(--muted);margin-bottom:.2rem}.sim-speed-caption #sim-speed-readout{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--accent)}.sim-bar-play{width:2rem;height:2rem;flex-shrink:0;display:grid;place-items:center;border:1px solid rgba(61,184,200,.4);background:#3db8c81f;color:var(--accent);border-radius:6px;cursor:pointer;padding:0}.sim-bar-play svg{width:.85rem;height:.85rem;grid-area:1 / 1}.sim-bar-play .icon-play{display:none}.sim-bar-play .icon-pause,.sim-bar-play.is-paused .icon-play{display:block}.sim-bar-play.is-paused .icon-pause{display:none}.sim-bar-play:hover:not(:disabled){background:#3db8c838;border-color:#3db8c88c}.sim-bar-play:disabled{opacity:.4;cursor:default}.sim-bar-play.is-paused{border-color:#e8c04073;background:#e8c0401f;color:#e8c040}.sim-bar input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.sim-bar input[type=range]:disabled{opacity:.35;cursor:default}#sim-seek{accent-color:#e8c040}.sim-bar-meta{display:flex;justify-content:space-between;margin-top:.15rem;font-size:.65rem;color:var(--muted)}.sim-bar-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.35rem;margin-top:.55rem}.sim-bar-actions button{font-family:var(--font);font-size:.75rem;font-weight:500;border:1px solid var(--border);background:#00000047;color:var(--text);border-radius:5px;padding:.4rem .45rem;cursor:pointer}.sim-bar-actions button:hover{background:#3db8c81f;border-color:#3db8c859}.sim-bar-actions button:disabled{opacity:.45;cursor:default}.sim-bar-actions button:disabled:hover{background:#00000047;border-color:var(--border)}.sim-bar-actions #sim-bar-stop{border-color:#e0705066;color:#e8a090}.sim-bar-actions #sim-bar-stop:hover{background:#e0705029}.sim-bar-actions .sim-bar-invert.active{border-color:#dcdcc88c;background:#f0f0e62e;color:#f0f0e8}#viewport.fluoro-invert{filter:invert(1) hue-rotate(180deg)}#viewport.placing-lesion,#viewport.placing-lesion:active{cursor:crosshair}.lesion-heading{margin:.85rem 0 .45rem;padding-top:.65rem;border-top:1px solid var(--border)}.lesion-actions{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}.btn-lesion,.btn-lesion-secondary{font-family:var(--font);font-size:.72rem;font-weight:550;border-radius:5px;padding:.4rem .35rem;cursor:pointer;border:1px solid var(--border);background:#00000047;color:var(--text)}.btn-lesion{grid-column:1 / -1;border-color:#b85a4a73;background:#b85a4a24;color:#e8a898;font-size:.8rem;font-weight:600;padding:.45rem .5rem}.btn-lesion:hover{background:#b85a4a38}.btn-lesion.active{border-color:#e8c04080;background:#e8c0401f;color:#e8c040}.btn-lesion-secondary:hover{background:#3db8c81f;border-color:#3db8c859}.btn-lesion-secondary.active{border-color:#e8c04073;background:#e8c0401f;color:#e8c040}.lesion-list{list-style:none;margin-top:.55rem;display:flex;flex-direction:column;gap:.3rem;max-height:11rem;overflow-y:auto}.lesion-list-item{display:grid;grid-template-columns:1fr auto auto;gap:.2rem;align-items:stretch;border:1px solid var(--border);border-radius:6px;background:#00000038;overflow:hidden}.lesion-list-item.selected{border-color:#e8c04073;background:#e8c04014}.lesion-list-main{text-align:left;border:none;background:transparent;color:var(--text);padding:.35rem .45rem;cursor:pointer;font-family:var(--font);min-width:0}.lesion-list-name{display:block;font-size:.74rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesion-list-meta{display:block;font-size:.62rem;font-family:var(--mono);color:var(--muted);margin-top:.08rem}.lesion-list-edit,.lesion-list-del{border:none;border-left:1px solid var(--border);background:transparent;color:var(--muted);font-family:var(--font);font-size:.68rem;padding:0 .45rem;cursor:pointer}.lesion-list-edit:hover{color:var(--accent);background:#3db8c81a}.lesion-list-del{font-size:.95rem;line-height:1;color:#c88880}.lesion-list-del:hover{background:#e0705029;color:#e8a090}.lesion-modal{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;background:#040a0e9e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:1rem}.lesion-modal[hidden]{display:none}.lesion-modal-card{width:min(26rem,100%);background:var(--panel-solid);border:1px solid var(--panel-edge);border-radius:12px;box-shadow:0 20px 50px #00000073;padding:1rem 1.1rem .9rem}.lesion-modal-head h2{font-size:1.05rem;font-weight:650;letter-spacing:-.01em}.lesion-modal-sub{margin-top:.2rem;font-size:.72rem;color:var(--muted)}.lesion-modal-body{margin-top:.85rem;display:grid;gap:.75rem}.lesion-circle-wrap{display:grid;place-items:center}.lesion-circle-wrap canvas{width:min(280px,72vw);height:auto;touch-action:none;cursor:crosshair;border-radius:50%}.lesion-severity-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.75rem;color:var(--muted);margin-bottom:.3rem}.lesion-severity-label #lesion-pct-readout{font-family:var(--mono);font-weight:600;color:#e8a898;font-size:.85rem}.lesion-modal-controls input[type=range]{width:100%;accent-color:#b85a4a}.lesion-paint-hint{margin-top:.4rem;font-size:.68rem;color:var(--muted);line-height:1.35}.lesion-length-label{margin-top:.65rem}.lesion-edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.55rem}.lesion-btn-soft{font-family:var(--font);font-size:.75rem;font-weight:550;border-radius:6px;padding:.45rem;cursor:pointer;border:1px solid var(--border);background:#00000040;color:var(--muted)}.lesion-btn-soft:hover{color:var(--text);background:#3db8c81a;border-color:#3db8c859}.lesion-occlude{margin-top:0;width:auto;font-family:var(--font);font-size:.75rem;font-weight:600;border-radius:6px;padding:.45rem;cursor:pointer;border:1px solid rgba(184,90,74,.5);background:#b85a4a29;color:#e8a898}.lesion-occlude:hover{background:#b85a4a42}.lesion-modal-foot{margin-top:.9rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.lesion-btn-ghost,.lesion-btn-primary{font-family:var(--font);font-size:.8rem;font-weight:550;border-radius:6px;padding:.5rem;cursor:pointer}.lesion-btn-ghost{border:1px solid var(--border);background:transparent;color:var(--muted)}.lesion-btn-ghost:hover{color:var(--text);background:#ffffff0a}.lesion-btn-primary{border:1px solid rgba(61,184,200,.45);background:#3db8c829;color:var(--accent)}.lesion-btn-primary:hover{background:#3db8c842}@media (max-width: 520px){.sim-bar-actions{grid-template-columns:1fr 1fr}.sim-bar-actions .sim-bar-invert{grid-column:1 / -1}}.legend{margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--border)}.vessel-actions{margin-bottom:.45rem}.vessel-actions button{color:var(--muted);font-size:.72rem}.vessel-toggles{display:grid;gap:.55rem}.vessel-category{display:grid;gap:.08rem}.vessel-category-toggle{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--text);padding:.28rem .2rem;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none}.vessel-category-toggle:hover{background:#ffffff0a}.vessel-category-toggle input{accent-color:var(--accent);cursor:pointer}.vessel-category-toggle .swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.vessel-category-toggle:has(input:not(:checked):not(:indeterminate)){opacity:.55}.vessel-category-items{display:grid;gap:.08rem;padding-left:1.15rem;border-left:1px solid rgba(255,255,255,.06);margin-left:.35rem}.vessel-toggle{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--muted);padding:.2rem;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none}.vessel-toggle:hover{color:var(--text);background:#ffffff08}.vessel-toggle input{accent-color:var(--accent);cursor:pointer}.vessel-toggle .swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.vessel-toggle:has(input:not(:checked)){opacity:.5}.hint{position:absolute;bottom:1.25rem;left:1.25rem;max-width:min(26rem,calc(100vw - 2.5rem));font-size:.78rem;color:var(--muted);background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;padding:.5rem .75rem;backdrop-filter:blur(var(--glass-blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);box-shadow:0 10px 28px #00000047;line-height:1.4;animation:fade-in .6s ease .2s both;transition:opacity .8s ease,visibility .8s ease}.hint.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.hint kbd{font-family:var(--mono);font-size:.7rem;background:#ffffff0f;border:1px solid var(--border);border-radius:4px;padding:.08rem .32rem;margin:0 .08rem;color:var(--text)}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width: 900px) and (orientation: landscape){.panel-shell{top:.5rem;bottom:.5rem;left:.5rem;width:min(240px,36vw)}.brand{top:.45rem;left:.5rem}.brand h1{font-size:.95rem}.hint{display:none}.sim-bar{bottom:.75rem}}@media (max-width: 720px){.brand{top:.75rem;left:.75rem}.panel-shell{left:0;right:0;bottom:0;top:auto;width:100%;height:auto;max-height:52vh}.panel-shell.collapsed{transform:translateY(calc(100% + .4rem))}.panel{max-height:100%;border-radius:8px 8px 0 0}.panel-top{border-radius:8px 8px 0 0}.panel-collapse .collapse-chevron{transform:none}.panel-expand{writing-mode:horizontal-tb;top:auto;bottom:calc(100% + .45rem);left:auto;right:.75rem;padding:.4rem .65rem}.angle-mini{top:auto;left:.75rem;right:auto;bottom:calc(100% + .45rem);grid-template-columns:1fr 1fr;gap:.55rem;min-width:0}.hint{display:none}}
