:root{--bg: #03060f;--ink: #cfe0ff;--dim: #6f86b8;--faint: #3a4a72;--line: #15233f;--accent: #3b82f6;--horizon: #bcd4ff;--mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;--display: "Chakra Petch", var(--mono)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.5}.gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:grab}.gl:active{cursor:grabbing}.labels{position:fixed;inset:0;pointer-events:none;z-index:2}.bands{position:fixed;inset:0;pointer-events:none;z-index:1}.band-label{position:absolute;top:0;left:0;transform-origin:left bottom;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:#5e7bb8;opacity:.6;white-space:nowrap;text-shadow:0 2px 12px #000}.cell-label{position:absolute;top:0;left:0;border:1px solid #ffffff10;border-radius:5px;display:none;overflow:hidden;will-change:transform}.cell-label:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(0deg,#03060fcc,#03060f00);pointer-events:none}.cell-label .cn{position:absolute;left:7px;bottom:6px;z-index:1;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--horizon);background:#03060fb8;border:1px solid #ffffff1a;padding:2px 7px;border-radius:4px;backdrop-filter:blur(3px);max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-label .cv{position:absolute;right:7px;top:6px;z-index:1;font-size:9px;letter-spacing:.08em;color:var(--ink);background:#03060fb8;padding:1px 5px;border-radius:3px}.cell-label .tag{position:absolute;left:9px;top:7px;font-size:8px;letter-spacing:.2em;background:var(--accent);color:#00040f;padding:2px 6px;border-radius:3px}.cell-label .tag:before{content:"HERO"}.cell-label.is-hero{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 0 30px -8px var(--accent)}.cell-label.compact .cn{font-size:8px;letter-spacing:.08em}.cell-label.compact .cv,.cell-label.compact .tag{display:none!important}.grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.5;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,#0000 0 2px,#0002 3px),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>")}body.dragging:after{content:"drop image to retarget the array";position:fixed;inset:12px;z-index:40;display:grid;place-items:center;border:1px dashed var(--accent);border-radius:10px;background:#03060fcc;color:var(--horizon);letter-spacing:.3em;text-transform:uppercase;font-size:13px}.bar{position:fixed;left:0;right:0;z-index:10;display:flex;align-items:center;gap:18px;padding:14px clamp(14px,3vw,32px);pointer-events:none}.bar>*{pointer-events:auto}.bar-top{top:0;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(180deg,#03060fdd,#03060f00)}.bar-bottom{bottom:0;justify-content:space-between;background:linear-gradient(0deg,#03060fdd,#03060f00)}.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:inherit}.mark{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,26px);letter-spacing:.16em;color:var(--horizon);text-shadow:0 0 24px #3b82f655}.sub{color:var(--dim);letter-spacing:.22em;text-transform:uppercase;font-size:11px}.readout{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}.readout b{color:var(--ink);font-weight:500}.readout .dot{color:var(--faint)}.live{display:inline-flex;align-items:center;gap:6px;color:var(--horizon)}.live i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.filebtn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--horizon);border:1px solid var(--accent);background:#3b82f614;padding:9px 16px;border-radius:4px;cursor:pointer;transition:.18s;white-space:nowrap}.filebtn:hover{background:var(--accent);color:#00040f;box-shadow:0 0 24px -6px var(--accent)}.src-controls{display:flex;gap:8px}.sources-panel{position:fixed;right:clamp(14px,3vw,32px);top:64px;z-index:12;max-width:min(560px,calc(100vw - 28px));border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#070f24f5,#040814ee);backdrop-filter:blur(6px);box-shadow:0 18px 50px -24px #000;padding:12px;display:none}.sources-panel.open{display:block}.sources-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}.src-card{flex:0 0 auto;width:132px;padding:0;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:.15s;font-family:var(--mono)}.src-card:hover{border-color:var(--accent);transform:translateY(-2px)}.src-card img{display:block;width:100%;height:80px;object-fit:cover;background:#060c1c}.src-card span{display:block;padding:6px 8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--horizon);text-align:left}.dir-panel{position:fixed;left:50%;transform:translate(-50%);top:60px;z-index:13;width:min(760px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#070f24f7,#040814f2);backdrop-filter:blur(8px);box-shadow:0 22px 60px -24px #000;padding:16px 18px;display:none}.dir-panel.open{display:block}.dir-cat{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}.dir-cat:first-child{margin-top:0}.dir-chips{display:flex;flex-wrap:wrap;gap:6px}.dir-chip{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink);background:#0b162e;border:1px solid var(--line);border-radius:4px;padding:6px 10px;cursor:pointer;transition:.14s}.dir-chip:hover{border-color:var(--accent);color:var(--horizon);background:#14315f}.hud-hint{color:var(--faint);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.hud-zoom{display:flex;gap:6px;align-items:center}.export-wrap{position:relative}.export-menu{position:absolute;right:0;bottom:46px;z-index:20;display:none;flex-direction:column;min-width:168px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#070f24f5,#040814f2);backdrop-filter:blur(8px);box-shadow:0 18px 50px -22px #000}.export-menu.open{display:flex}.export-menu button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--horizon);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:11px 14px;cursor:pointer;text-align:left}.export-menu button:last-child{border-bottom:0}.export-menu button:hover{background:#14315f}.export-menu button span{color:var(--dim);font-size:9px;letter-spacing:.1em}.toast{position:fixed;left:50%;bottom:64px;transform:translate(-50%) translateY(8px);z-index:60;pointer-events:none;opacity:0;background:#03060fee;border:1px solid var(--accent);color:var(--horizon);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;border-radius:6px;box-shadow:0 0 30px -8px var(--accent);transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.hud-zoom button{width:34px;height:34px;border-radius:4px;border:1px solid var(--line);background:#060d1fcc;color:var(--horizon);font-family:var(--mono);font-size:16px;cursor:pointer;transition:.15s}.hud-zoom button:hover{border-color:var(--accent);background:#3b82f622}.grade-panel{position:fixed;left:clamp(14px,3vw,32px);bottom:64px;z-index:11;width:240px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#070f24f2,#040814e6);backdrop-filter:blur(6px);box-shadow:0 18px 50px -24px #000}.grade-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--line)}.grade-title{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--horizon)}.grade-actions{display:flex;gap:6px}.grade-actions button{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:transparent;border:1px solid var(--line);padding:4px 8px;border-radius:3px;cursor:pointer;transition:.15s;line-height:1}.grade-actions button:hover{color:var(--horizon);border-color:var(--accent)}.grade-body{padding:16px 13px;display:flex;flex-direction:column;gap:15px}.grade-panel.collapsed .grade-body{display:none}.grade-panel.collapsed #grade-toggle:after{content:""}.overlay{position:fixed;inset:0;z-index:50;display:none;background:#02040bdd;backdrop-filter:blur(8px);padding:clamp(14px,3vw,40px)}.overlay.open{display:block}.close{position:absolute;top:18px;right:22px;z-index:60;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--horizon);background:transparent;border:1px solid var(--line);padding:8px 14px;border-radius:4px;cursor:pointer;transition:.18s}.close:hover{border-color:var(--accent);background:#3b82f618}.viewer{height:100%;display:grid;grid-template-columns:1fr 320px;gap:20px}@media(max-width:820px){.viewer{grid-template-columns:1fr;grid-template-rows:1fr auto}}.stage{aspect-ratio:16 / 10;max-width:100%;max-height:100%;margin:auto;border:1px solid var(--line);border-radius:8px;background:#000;box-shadow:0 0 60px -20px var(--accent)}.controls{display:flex;flex-direction:column;gap:18px;padding:22px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#070f24,#04081400)}.fx-head h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.06em;margin:0 0 8px;color:var(--horizon)}.fx-head p{color:var(--dim);margin:0;font-size:12.5px;line-height:1.5}.panel{display:flex;flex-direction:column;gap:18px;flex:1}.ctrl{display:flex;flex-direction:column;gap:8px}.ctrl-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between}.ctrl-label b{color:var(--horizon);font-weight:500}.ctrl-empty{color:var(--faint);font-size:12px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--horizon);border:2px solid var(--accent);box-shadow:0 0 10px var(--accent)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--horizon);border:2px solid var(--accent);box-shadow:0 0 10px var(--accent)}.controls-foot{color:var(--faint);font-size:11px;letter-spacing:.1em;line-height:1.5}@media(prefers-reduced-motion:reduce){.live i{animation:none}}@media(max-width:680px){.bar{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}.bar-bottom{padding-bottom:max(10px,env(safe-area-inset-bottom))}.readout{display:none}.mark{font-size:19px}.filebtn{padding:8px 12px;font-size:11px}.hud-hint{display:none}.hud-zoom button{width:42px;height:42px;font-size:18px}.grade-panel{width:168px;left:10px;bottom:64px}.grade-body{padding:13px 11px;gap:13px}.close{top:12px;right:14px;padding:9px 13px}.viewer{gap:12px}.controls{padding:16px}}