:root{font-family:"Segoe UI",system-ui,sans-serif;color:#29473d;font-synthesis:none;--line:#d8e1d5;--paper:#fafbf6;--muted:#7a8c7a;--orange:#c9542c}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e8eee7}button,input,summary{font:inherit}button,summary{cursor:pointer}button{color:inherit}button:focus-visible,input:focus-visible,summary:focus-visible,#scene:focus-visible{outline:2px solid #5a8b71;outline-offset:3px}button:disabled{cursor:default;opacity:.55}[hidden]{display:none!important}.instrument{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}#viewport,#scene,#annotations{position:absolute;inset:0;width:100%;height:100%}#scene{display:block;touch-action:none;cursor:grab;outline-offset:-3px}#scene.orbiting{cursor:grabbing}#scene.panning{cursor:move}#annotations{pointer-events:none;overflow:hidden}
.top-dock{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;align-items:center;gap:16px;pointer-events:none;z-index:5}.identity,.view-controls,.camera-tools>button,#camera-panel{pointer-events:auto;background:#fafbf6ee;border:1px solid #d7e0d2;border-radius:999px;box-shadow:0 3px 20px #425b3510;backdrop-filter:blur(14px)}.identity{display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:13px}.live-dot{width:6px;height:6px;background:#668b60;border-radius:999px}.mode{font:10px ui-monospace,monospace;color:#92a08c;margin-left:7px}.view-controls{display:flex;padding:5px;gap:3px}.view-controls button{border:0;border-radius:999px;background:transparent;padding:9px 12px;font-size:12px;color:#7e8e78}.view-controls button:hover{background:#eef2e9}.view-controls button.active{background:#e7eedf;color:#46683d}.camera-tools{margin-left:auto;display:flex;align-items:flex-start;gap:8px}#camera-panel{position:relative}summary{list-style:none;padding:13px 17px;font-size:12px;user-select:none}summary::-webkit-details-marker{display:none}summary::after{content:'⌄';margin-left:12px;color:#8a9b82}details[open] summary::after{content:'⌃'}.camera-tools>button{height:43px;width:43px;padding:0;font-size:25px;line-height:1;color:#71856b}.camera-panel-body{position:absolute;right:-1px;top:50px;width:255px;background:#fafbf6f5;border:1px solid #d7e0d2;border-radius:9px;padding:19px;box-shadow:0 10px 30px #33452c18;backdrop-filter:blur(14px)}.camera-panel-body{max-height:calc(100dvh - 90px);overflow-y:auto}.camera-panel-body label:not(.toggle){display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6c8062;margin-bottom:7px}.camera-panel-body output{font:11px ui-monospace,monospace;color:#345532}.camera-panel-body input[type=range]{width:100%;margin:0 0 19px;accent-color:#6e8b60;cursor:pointer}.camera-panel-body .toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:#6c8062;margin-bottom:16px}.toggle input{accent-color:#6e8b60}#reset-view{background:#edf2e7;border:1px solid #d3dfca;border-radius:999px;width:100%;padding:9px;font-size:12px}
#gesture-hint{position:absolute;left:0;right:0;bottom:138px;text-align:center;margin:0;pointer-events:none;font-size:11px;color:#8c9a85;transition:opacity .4s}#gesture-hint span{padding:0 8px;color:#a9b7a2}#gesture-hint.used{opacity:0}#bench{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(820px,calc(100% - 40px));background:#fafbf6f2;border:1px solid #d4dfcd;border-radius:9px;display:grid;grid-template-columns:185px 1fr 230px;gap:25px;align-items:start;padding:16px 20px;box-shadow:0 8px 35px #314a2812;backdrop-filter:blur(16px);z-index:4}.control-caption{display:block;font:9px ui-monospace,monospace;color:#84947a;letter-spacing:.10em;margin-bottom:8px}.distance-block{margin:0;padding:0;border:0;min-width:0}.distance-block legend{padding:0}#timer{display:flex;align-items:flex-end;gap:8px;width:180px;padding:9px 14px;background:linear-gradient(140deg,#2e483b,#1a3028);border:1px solid #20352a;border-radius:999px;box-shadow:inset 0 0 0 3px #3a5142}#timer svg{width:134px;display:block}#timer span{font:17px Georgia,serif;color:#a7bc98;padding-bottom:2px}#timer .seg{fill:#c1dfa511}#timer .seg.on{fill:#c8e6a8;filter:drop-shadow(0 0 2px #c0e7a540)}.dist{display:flex;gap:4px}.dist label{position:relative;flex:1}.dist input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}.dist span{display:block;text-align:center;min-width:32px;padding:13px 5px;border:1px solid #d7e1ce;border-radius:999px;background:#fbfcf7;font-size:14px;font-variant-numeric:tabular-nums}.dist input:checked+span{background:#e9f0df;color:#426236;border-color:#8da179;box-shadow:inset 0 0 0 1px #8da179}.dist input:focus-visible+span{outline:2px solid #5a8b71;outline-offset:2px}.dist input:disabled+span{opacity:.55}#go{display:block;width:100%;margin-top:17px;min-height:46px;border-radius:999px;padding:12px 14px;border:1px solid #b44a24;color:#fff8f0;background:#c9542c;font-size:13px;font-weight:600;box-shadow:0 2px 2px #9d412514}#go:hover:not(:disabled){background:#b94a25}#go:active:not(:disabled){transform:translateY(1px)}#go:disabled{background:#dfe6d8;border-color:#d0dcc6;color:#8a9b7d;opacity:1;box-shadow:none}#status{font-size:10px;line-height:1.5;margin:6px 0 0;color:#83917c;min-height:15px}
#gate-handle{position:absolute;width:44px;height:80px;transform:translate(-50%,-50%);background:transparent;border:1px solid transparent;border-radius:999px;touch-action:none;cursor:ew-resize;z-index:2}#gate-handle:hover,#gate-handle:focus-visible,#gate-handle.dragging{background:#fafbf620;border:1px dashed #7a9670}#gate-handle:disabled{cursor:default;background:transparent;border-color:transparent}#scene-error{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);padding:24px;width:min(500px,80%);background:#fff9eb;border:1px solid #d9c5a6;border-radius:999px;line-height:1.7;z-index:6}
#annotations .dim{stroke:#52764b;stroke-width:1}#annotations .extension{stroke:#718b67;stroke-width:.7;stroke-dasharray:3 3;opacity:.6}#annotations .endpoint{fill:#52764b}#annotations text{font-family:"Segoe UI",system-ui,sans-serif;paint-order:stroke;stroke:#e8eee7;stroke-width:4px;stroke-linejoin:round;fill:#476b40}#annotations .distance{font:italic 17px Georgia,serif}#annotations .length-line{stroke:#8b9e81;stroke-width:.7}#annotations .secondary{font:italic 12px Georgia,serif;fill:#73896a}#annotations .ruler-number{font:7px ui-monospace,monospace;stroke-width:0;fill:#41513d}#annotations .gate-tag rect{fill:#f8faf2;stroke:#b8c8ac;stroke-width:.7}#annotations .gate-number{fill:#46603d;stroke:none;font-size:12px;font-weight:600}
#bench{row-gap:12px}.time-block{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(70px,1fr) 145px;align-items:center;gap:14px;border-top:1px solid #dce4d6;padding-top:10px}.time-block label{margin:0;white-space:nowrap}.time-block output{margin-left:8px;color:#426236;font-size:11px;letter-spacing:0;font-variant-numeric:tabular-nums}.time-block input{width:100%;min-width:0;margin:0;accent-color:#6e8b60;cursor:pointer;touch-action:pan-y}#slowdown-hint{font-size:10px;color:#71856b;text-align:right;white-space:nowrap}
@media(max-width:760px){.time-block{grid-template-columns:auto minmax(70px,1fr);gap:6px 12px;padding-top:8px}#slowdown-hint{grid-column:1/-1;font-size:9px;text-align:center}.time-block output{font-size:10px}}
@media(max-width:760px){.top-dock{left:12px;right:12px;top:12px;gap:8px}.identity{padding:12px;font-size:12px;gap:7px}.mode,.live-dot{display:none}.view-controls button{padding:8px;font-size:10px}.view-controls{gap:0}.camera-tools{gap:5px}summary{padding:12px 10px;font-size:11px}summary::after{margin-left:5px}.camera-tools>button{width:38px;height:39px}.camera-panel-body{right:-43px;width:235px}#bench{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));grid-template-columns:160px 1fr;gap:12px 16px;padding:14px}#timer{width:158px;padding:8px 12px}#timer svg{width:115px}.control-caption{font-size:8px}.dist span{min-width:24px;padding:11px 4px;font-size:13px}.launch-block{grid-column:1/-1;display:flex;align-items:center;gap:13px}#go{width:auto;min-width:180px;margin-top:0;min-height:39px;padding:9px 15px;font-size:12px}#status{margin:0;font-size:10px}#gesture-hint{bottom:178px;max-width:90%;left:5%;font-size:10px;line-height:1.8}#gesture-hint span{padding:0 3px}}
@media(max-width:420px){.identity{font-size:11px;padding:12px 9px}.view-controls{display:none}#bench{grid-template-columns:135px 1fr;gap:10px}#timer{width:135px;padding:8px 10px;gap:5px}#timer svg{width:97px}#timer span{font-size:14px}#go{min-width:165px}#status{font-size:9px}}
@media(max-height:520px) and (min-width:761px){.top-dock{top:10px;left:12px;right:12px}#bench{bottom:10px;padding:9px 15px;gap:20px}.control-caption{margin-bottom:5px}#timer{padding-top:5px;padding-bottom:5px}#go{margin-top:14px;min-height:40px}#gesture-hint{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}