*{box-sizing:border-box}[hidden]{display:none!important}:root,:root[data-theme=dark]{--bg: #0a0e0d;--panel: #141a17;--panel-header: #1a211d;--border: #262e29;--border-soft: #333d36;--text: #e9ece9;--text-dim: #98a49b;--text-faint: #66766a;--accent: #d9a441;--accent-hover: #e8b65c;--radius: 8px;--radius-sm: 6px;--overlay: rgba(16, 20, 18, .95)}:root[data-theme=light]{--bg: #f5f2ea;--panel: #ffffff;--panel-header: #f7f2e6;--border: #e2dac8;--border-soft: #ccc1a6;--text: #201c14;--text-dim: #5c5343;--text-faint: #8a8071;--accent: #b8791f;--accent-hover: #a06a1a;--radius: 8px;--radius-sm: 6px;--overlay: rgba(255, 253, 248, .97)}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}#app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));gap:8px;overflow:hidden}.vng-panel{flex:0 0 120px;background:var(--panel);border:1px solid var(--border);display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px #0000004d}.vng-header{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:var(--panel-header);border-bottom:1px solid var(--border)}.vng-header h2,.view-panel h2{font-family:SFMono-Regular,Consolas,ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}.vng-header h2{margin:0;font-size:.72rem;font-weight:600;color:var(--text-dim)}.vng-legend{display:flex;gap:12px;font-size:.72rem;color:var(--text-dim)}.vng-legend .swatch{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}.vng-panel canvas{flex:1 1 auto;width:100%;height:100%;display:block}.about-pill{background:var(--bg);color:var(--text-dim);border:1px solid var(--border-soft);border-radius:999px;padding:3px 10px;font-size:.72rem;cursor:pointer;transition:background .15s ease,color .15s ease}.about-pill.is-active{border-color:var(--accent);color:var(--accent)}.canal-micro-submenu{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:4px;background:var(--panel-header);border-bottom:1px solid var(--border);padding:5px 8px}.canal-micro-submenu-right{margin-left:auto}.display-group{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-right:10px}.display-group-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.03em;opacity:.65}.about-pill:hover{background:var(--panel-header);color:var(--text)}.about-popover{position:fixed;z-index:20;background:var(--overlay);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 12px;font-size:.7rem;line-height:1.5;color:var(--text-faint);max-width:260px;box-shadow:0 4px 16px #0006}.about-popover a{color:var(--text-dim)}.about-popover p{margin:8px 0 0}.about-qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px}.about-qr canvas{border-radius:4px;width:110px;height:110px}.about-qr span{font-size:.65rem;color:var(--text-faint);text-align:center}.whitepaper-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px}.whitepaper-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009}.whitepaper-panel{position:relative;background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:0 12px 40px #00000080;max-width:720px;width:100%;max-height:85vh;overflow:hidden}.whitepaper-body{overflow-y:auto;max-height:85vh;padding:28px 32px 36px;color:var(--text-dim);font-size:.85rem;line-height:1.6}.whitepaper-body h1{color:var(--text);font-size:1.3rem;margin:0 0 4px}.whitepaper-subtitle{color:var(--text-faint);font-size:.78rem;margin:0 0 20px}.whitepaper-body h2{color:var(--text);font-size:.98rem;margin:22px 0 8px}.whitepaper-body p,.whitepaper-body ul,.whitepaper-body ol{margin:0 0 10px}.whitepaper-body ul,.whitepaper-body ol{padding-left:20px}.whitepaper-body code{background:var(--panel-header);border-radius:4px;padding:1px 5px;font-size:.8em}.whitepaper-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-faint);font-size:1.4rem;line-height:1;cursor:pointer;padding:4px 8px}.whitepaper-close:hover{color:var(--text)}.variant-popover:not([hidden]){display:flex}.variant-popover{position:fixed;z-index:25;flex-direction:column;gap:6px;background:var(--overlay);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px;box-shadow:0 4px 16px #0006;min-width:190px}.variant-popover button{width:100%;text-align:left}#views{flex:1 1 auto;display:grid;grid-template-columns:1.7fr 1.3fr;grid-template-rows:1.6fr 1fr;grid-template-areas:"canal eye" "canal head";gap:8px;min-height:0}.view-panel--eye{grid-area:eye}.view-panel--canal{grid-area:canal}.view-panel--head{grid-area:head}.view-panel{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px #0000004d;min-height:0}.view-panel h2{margin:0;padding:6px 10px;font-size:.72rem;font-weight:600;color:var(--text-dim);background:var(--panel-header);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px}.view-panel canvas{flex:1 1 auto;width:100%;height:100%;display:block;min-height:0}.canvas-wrap{position:relative;flex:1 1 auto;min-height:0}.canvas-wrap canvas{flex:none}.canvas-wrap:before,.canvas-wrap:after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;z-index:4;opacity:.55}.canvas-wrap:before{top:6px;left:6px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}.canvas-wrap:after{bottom:6px;right:6px;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}.canvas-wrap--split{display:flex;gap:4px}.split-pane{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column}.split-pane canvas{flex:1 1 auto;width:100%;height:100%;min-height:0;display:block}.canal-hex-wrap{display:flex;flex-direction:column;gap:6px}.canal-hex-wrap canvas{width:100%;display:block;min-height:0}#canal-hex-canvas{flex:1 1 auto;height:100%}#canal-diff-meters-canvas{flex:0 0 84px;height:84px}.split-pane-label{position:absolute;top:4px;left:6px;z-index:4;font-family:SFMono-Regular,Consolas,ui-monospace,monospace;font-size:.6rem;letter-spacing:.03em;color:var(--text-faint);background:var(--overlay);border-radius:var(--radius-sm);padding:1px 6px;pointer-events:none}.cleared-toast{position:absolute;top:10px;left:50%;max-width:90%;transform:translate(-50%) translateY(-6px);background:var(--overlay);border:1px solid #3f9d5f;color:#a8e8bb;border-radius:999px;padding:6px 14px;font-size:.72rem;font-weight:600;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:5}:root[data-theme=light] .cleared-toast{color:#1f7a3f}.cleared-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.canal-function-row{display:flex;align-items:center;gap:8px;font-size:.8rem;cursor:pointer;padding:2px 4px}.canal-function-row input[type=checkbox],.canal-function-row input[type=radio]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}.popover-section-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;opacity:.65;padding:6px 4px 2px;border-top:1px solid var(--border, rgba(128, 128, 128, .3));margin-top:4px}.canal-legend{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:3px 10px;background:var(--panel-header);border-top:1px solid var(--border);padding:5px 8px;font-size:.64rem;line-height:1.4;color:var(--text-dim)}.canal-legend .swatch{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}#controls{flex:0 0 auto;padding:8px 12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;gap:6px;font-size:.85rem;box-shadow:0 1px 3px #0000004d}.control-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}#controls button,#controls select,.variant-popover button{background:var(--bg);color:var(--text);border:1px solid var(--border-soft);border-radius:999px;padding:7px 12px;font-size:.82rem;cursor:pointer;transition:border-color .15s ease,background .15s ease}#controls button:hover,#controls select:hover,.variant-popover button:hover{border-color:var(--accent)}#controls button:active,.variant-popover button:active{background:var(--panel-header)}#controls .primary-btn{background:var(--accent);border-color:var(--accent);color:#14100a;font-weight:600}#controls .primary-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}#controls button:disabled{opacity:.5;cursor:default}#controls input[type=range]{width:100%;accent-color:var(--accent)}.scrub-column{display:flex;flex:1 1 160px;min-width:120px;flex-direction:column;justify-content:center;gap:1px}.scrub-column span{font-size:.72em;color:var(--text-dim);line-height:1.2}.scrub-stack{display:flex;flex-direction:column}.chapter-track{position:relative;height:14px;margin-inline:8px}#controls .chapter-marker{position:absolute;top:0;transform:translate(-50%);width:14px;height:14px;min-height:0;padding:0;border-radius:50%;border:1px solid var(--accent);background:var(--bg);color:var(--text-dim);font-size:8px;line-height:12px;font-variant-numeric:tabular-nums}#controls .chapter-marker:hover,#controls .chapter-marker:focus-visible{background:var(--accent);color:#14100a}#controls .chapter-step{padding-inline:8px;line-height:1}.control-group{display:flex;align-items:center;flex-wrap:nowrap;gap:6px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--text-faint)}.status-dot.on{background:#5fd17a;box-shadow:0 0 4px #5fd17a}.debug-readout{font-family:SFMono-Regular,Consolas,monospace;font-size:.72rem;color:#8fd6a0;white-space:pre;margin-left:auto;opacity:.85}:root[data-theme=light] .debug-readout{color:#1f7a3f}@media (max-width: 760px){#app{padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));gap:6px}.vng-panel{flex-basis:90px}.vng-header{padding:5px 10px}.vng-header h2{font-size:.7rem}.vng-legend{gap:8px;font-size:.64rem}#views{grid-template-columns:1.7fr 1fr;grid-template-rows:minmax(0,2.7fr) minmax(0,1.3fr);grid-template-areas:"canal canal" "eye head";gap:6px}.view-panel h2{font-size:.66rem;padding:4px 8px}.canal-legend{flex-wrap:nowrap;overflow-x:auto;font-size:.56rem;padding:3px 6px;gap:8px}.about-pill{padding:2px 8px;font-size:.6rem}.split-pane-label{top:3px;left:4px;padding:0 5px;font-size:.5rem}#controls{position:sticky;bottom:0;z-index:5;padding:5px 8px;gap:3px;font-size:.78rem;max-height:12vh;overflow-y:auto}.control-row{gap:4px}#controls button,#controls select{padding:5px 8px;font-size:.7rem;min-height:30px}.debug-readout,.chapter-track{display:none}#controls .chapter-step{padding-inline:5px}.scrub-column{min-width:90px}}.theme-toggle{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;width:46px;height:46px;padding:0;border-radius:50%;background:var(--panel);border:1px solid var(--border-soft);box-shadow:0 2px 10px #00000059;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,transform .15s ease}.theme-toggle:hover{border-color:var(--accent);transform:scale(1.06)}.theme-toggle:active{transform:scale(.96)}.theme-toggle-icon{width:22px;height:22px;border-radius:50%;border:1.6px solid #14161a;background:linear-gradient(90deg,#14161a 50%,#fdfdfd 50%)}.fullscreen-toggle{position:fixed;right:16px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:30;width:40px;height:40px;padding:0;border-radius:50%;background:var(--panel);border:1px solid var(--border-soft);box-shadow:0 2px 10px #00000059;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,transform .15s ease}.fullscreen-toggle:hover{border-color:var(--accent);transform:scale(1.06)}.fullscreen-toggle:active{transform:scale(.96)}.fullscreen-toggle-icon{position:relative;width:14px;height:14px;transition:transform .15s ease}.fullscreen-toggle-icon:before,.fullscreen-toggle-icon:after{content:"";position:absolute;width:7px;height:7px}.fullscreen-toggle-icon:before{top:0;left:0;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}.fullscreen-toggle-icon:after{bottom:0;right:0;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}.fullscreen-toggle.is-fullscreen .fullscreen-toggle-icon{transform:rotate(45deg)}