:root{--brand:#005076;--bg:#081014;--panel:#0f1c21e0;--inset:#0b161b;--hover:#172a33;--line:#273b45;--text:#e1ebef;--muted:#899fa9;--disabled:#4a5d66;--accent:#36abe2;--accent-tint:#36abe214;--bad:#ff6b6b;--warn:#e8b34a;--brand-surface:#f4f8fa;--brand-muted:#4f6b78}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;overflow:hidden}body{color:var(--text);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}#canvas-wrap{position:fixed;inset:0}canvas{display:block}#hud{z-index:10;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;min-width:250px;max-width:360px;padding:14px 16px;position:fixed;top:16px;left:16px}#hud h1{letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:10px;font-size:12px;font-weight:600}.hud-source{align-items:center;gap:8px;margin-bottom:12px;display:flex}.hud-source .source-label{text-align:left;text-overflow:ellipsis;white-space:nowrap;direction:rtl;flex:1;min-width:0;font-size:12px;overflow:hidden}.hud-source .source-kind{color:var(--accent);border:1px solid var(--line);white-space:nowrap;border-radius:4px;padding:2px 6px;font-size:10px}.hud-source button{background:var(--inset);color:var(--text);border:1px solid var(--line);cursor:pointer;white-space:nowrap;border-radius:5px;padding:5px 9px;font-family:inherit;font-size:11px}.hud-source button:hover{border-color:var(--accent);color:var(--accent)}.hud-warn{color:var(--warn);margin-bottom:10px;font-size:11px;line-height:1.5}#open-page{z-index:20;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:48px 24px;display:flex;position:fixed;inset:0;overflow-y:auto}#open-page .open-topbar{border-bottom:3px solid var(--brand);background:#000;justify-content:center;align-items:center;gap:16px;padding:14px 24px;display:flex;position:absolute;top:0;left:0;right:0}.brand-logo{flex-shrink:0;width:auto;height:48px;display:block}#open-page .brand-text{border-left:1px solid #00507640;flex-direction:column;gap:3px;padding-left:16px;display:flex}#open-page .brand-name{letter-spacing:5px;color:var(--brand);font-size:20px;font-weight:700}#open-page .brand-by{letter-spacing:1px;color:var(--brand-muted);font-size:10px}#open-page header{text-align:center}#open-page h1{letter-spacing:.5px;margin-bottom:10px;font-size:26px;font-weight:600}#open-page header p{color:var(--muted);font-size:12px}#open-page .zones{flex-direction:column;gap:14px;width:min(620px,100%);display:flex}#open-page .zone{border:1px dashed var(--line);cursor:pointer;color:var(--text);background:0 0;border-radius:6px;flex-direction:column;align-items:center;gap:7px;padding:34px 20px;font-family:inherit;transition:border-color .12s,background .12s;display:flex}#open-page .zone:hover:not(:disabled),#open-page .zone.dragging{border-color:var(--accent);background:var(--accent-tint)}#open-page .zone:disabled{cursor:progress;opacity:.5}#open-page .zone-title{color:var(--accent);font-size:14px}#open-page .zone-hint{color:var(--muted);font-size:11px}#open-page .open-note{width:min(620px,100%);color:var(--muted);text-align:center;font-size:11px;line-height:1.7}#open-page .open-note code{color:var(--text);font-family:inherit}#open-page .open-error{width:min(620px,100%);color:var(--bad);border:1px solid var(--bad);text-align:center;border-radius:6px;padding:10px 12px;font-size:12px;line-height:1.6}#open-page .open-busy{color:var(--accent);font-size:12px}.row{justify-content:space-between;gap:16px;padding:3px 0;font-size:12px;display:flex}.row span:last-child{color:var(--muted)}#status{z-index:10;background:var(--panel);border:1px solid var(--line);color:var(--muted);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;border-radius:8px;max-width:80vw;padding:10px 18px;font-size:12px;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}#status.error{color:var(--bad);border-color:var(--bad)}#status.raised{bottom:64px}#color-modes{z-index:10;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;gap:2px;padding:4px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}#color-modes button{color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:5px;padding:7px 16px;font-family:inherit;font-size:12px}#color-modes button:hover:not(:disabled):not(.active){background:var(--hover)}#color-modes button.active{background:var(--brand);color:#fff;box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}#color-modes button:disabled{color:var(--disabled);cursor:not-allowed}#filter{z-index:10;flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:fixed;top:16px;right:16px}.filter-toggle{background:var(--panel);width:32px;height:32px;color:var(--text);border:1px solid var(--line);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;place-items:center;display:grid}.filter-toggle:hover,.filter-toggle.active{color:var(--accent);border-color:var(--accent)}.filter-body{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;min-width:200px;padding:12px 14px}.filter-body h2{letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:10px;font-size:11px;font-weight:600}.filter-row{cursor:pointer;align-items:center;gap:8px;padding:4px 0;font-size:12px;display:flex}.filter-row input{accent-color:var(--accent);cursor:pointer}.ramp-legend,#return-legend{z-index:10;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;padding:12px 14px;position:fixed;top:50%;left:16px;transform:translateY(-50%)}#return-legend .legend-item{align-items:center;gap:8px;padding:3px 0;font-size:12px;display:flex}#return-legend .swatch{border:1px solid #0006;border-radius:2px;flex-shrink:0;width:11px;height:11px}.ramp-legend h2,#return-legend h2{letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:10px;font-size:11px;font-weight:600}.ramp-legend .legend-body{gap:8px;height:190px;display:flex}.ramp-legend .legend-ramp{border:1px solid #0006;border-radius:3px;width:12px}.ramp-legend .legend-ticks{color:var(--text);font-variant-numeric:tabular-nums;flex-direction:column;justify-content:space-between;font-size:11px;display:flex}.ramp-legend .legend-note{color:var(--muted);margin-top:8px;font-size:10px}.filter-row .swatch{border:1px solid #0006;border-radius:2px;flex-shrink:0;width:11px;height:11px}#nav{z-index:10;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:168px;padding:12px;display:flex;position:fixed;bottom:16px;right:16px}#compass{cursor:pointer;width:88px;height:88px}#compass .c-ring{fill:#00000040;stroke:var(--line);stroke-width:2px}#compass:hover .c-ring{stroke:var(--accent)}#compass .c-n{fill:var(--accent)}#compass .c-s{fill:var(--disabled)}#compass .c-label{fill:var(--text);text-anchor:middle;dominant-baseline:middle;font-family:inherit;font-size:15px}.nav-grid{grid-template-columns:repeat(3,1fr);gap:5px;width:100%;display:grid}.nav-grid button{background:var(--inset);color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:5px;padding:6px 0;font-family:inherit;font-size:11px}.nav-grid button:hover{border-color:var(--accent);color:var(--accent)}.slider-row{width:100%;color:var(--muted);align-items:center;gap:8px;font-size:11px;display:flex}.slider-row span{width:38px}.slider-row input{accent-color:var(--accent);flex:1;min-width:0}#help{z-index:10;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--muted);border-radius:10px;padding:10px 12px;font-size:11px;line-height:1.9;position:fixed;bottom:16px;left:16px}#help b{color:var(--text);letter-spacing:1.5px;text-transform:uppercase;font-size:10px;font-weight:600}#help kbd{background:var(--inset);border:1px solid var(--line);color:var(--text);border-radius:3px;padding:1px 5px;font-family:inherit;font-size:10px}