*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;min-height:100dvh}body{background:#09090d;color:#e2e2f0;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}:root{--bg: #09090d;--surface: #111118;--surface2: #18181f;--border: #25252e;--border2: #32323e;--text: #e2e2f0;--text-dim: #6b6b80;--text-faint:#3a3a4a;--a: #3b82f6;--a-soft: rgba(59,130,246,.15);--b: #f97316;--b-soft: rgba(249,115,22,.15);--accent: #22d3ee;--accent-soft:rgba(34,211,238,.12);--mono: "Space Mono", monospace;--glass: rgba(14,14,20,.72);--glass-brd: rgba(120,120,150,.14);--shadow: 0 8px 40px rgba(0,0,0,.55);--topbar-h: 56px;--radius: 14px;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}.app{position:relative;width:100%;height:100dvh;overflow:hidden;background:var(--bg)}.stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.stage-placeholder{display:flex;align-items:center;justify-content:center}.stage>div,.stage canvas{width:100%!important;height:100%!important;touch-action:none}.topbar{position:absolute;top:0;left:0;right:0;z-index:20;height:calc(var(--topbar-h) + var(--safe-t));padding:var(--safe-t) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));display:flex;align-items:center;gap:14px;background:linear-gradient(to bottom,rgba(9,9,13,.9),rgba(9,9,13,.4) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}.topbar>*{pointer-events:auto}.brand{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.12em;-webkit-user-select:none;user-select:none;white-space:nowrap}.brand-rag{color:var(--accent)}.brand-baz{color:var(--text)}.brand-sub{margin-left:6px;font-size:9px;font-weight:400;letter-spacing:.2em;color:var(--text-dim);vertical-align:middle}.matrix-opener{display:flex;align-items:center;gap:9px;padding:7px 13px;border-radius:999px;border:1px solid var(--glass-brd);background:var(--surface2);color:var(--text);cursor:pointer;font-family:inherit;font-size:12px;transition:border-color .15s,background .15s,transform .1s}.matrix-opener:hover{border-color:var(--accent);background:#1e1e28}.matrix-opener:active{transform:scale(.97)}.matrix-icon{color:var(--accent);font-size:15px;line-height:1}.matrix-pair{font-family:var(--mono);font-size:11px;display:inline-flex;align-items:center;gap:6px}.mp.a{color:var(--a);font-weight:700}.mp.b{color:var(--b);font-weight:700}.mp-arrow{color:var(--text-faint)}.matrix-word{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.topbar-title{flex:1;font-size:13px;font-weight:500;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-stats{display:flex;gap:18px}.stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}.stat-value{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text)}.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.topbar-actions{display:flex;gap:8px}.topbar-link{height:36px;display:flex;align-items:center;padding:0 11px;border-radius:9px;border:1px solid var(--glass-brd);background:var(--surface2);color:var(--text-dim);font-size:11px;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;transition:all .12s}.topbar-link:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--glass-brd);background:var(--surface2);color:var(--text-dim);font-size:15px;cursor:pointer;transition:all .12s}.icon-btn:hover,.icon-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.drawer-scrim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25;background:#04040880;opacity:0;pointer-events:none;transition:opacity .25s ease}.drawer-scrim.open{opacity:1;pointer-events:auto}.drawer{position:absolute;z-index:30;display:flex;flex-direction:column;background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.16,1,.3,1);will-change:transform}.drawer{top:calc(var(--topbar-h) + var(--safe-t));left:0;width:min(400px,88vw);height:calc(100dvh - var(--topbar-h) - var(--safe-t));padding-left:var(--safe-l);border-right:1px solid var(--glass-brd);border-top:1px solid var(--glass-brd);transform:translate(-102%)}.drawer.open{transform:translate(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}.drawer-title{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.drawer-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text-dim);font-size:13px;cursor:pointer;transition:all .12s}.drawer-close:hover{color:var(--text);border-color:var(--accent)}.sel-header{display:flex;align-items:center;gap:6px;padding:4px 12px 6px}.sel-btn{flex:1;display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:9px;border:1.5px solid var(--border2);background:var(--surface2);color:var(--text-dim);cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;transition:all .12s}.sel-btn:hover{background:#1e1e28;color:var(--text)}.sel-btn.a.active{border-color:var(--a);background:var(--a-soft);color:var(--a)}.sel-btn.b.active{border-color:var(--b);background:var(--b-soft);color:var(--b)}.sel-letter{font-family:var(--mono);font-size:15px;font-weight:700}.sel-id{font-family:var(--mono);font-size:11px;opacity:.78}.sel-arrow{font-size:14px;color:var(--text-faint);-webkit-user-select:none;user-select:none}.sel-hint{padding:2px 14px 8px;font-size:11px;color:var(--text-dim)}.hl-a{color:var(--a);font-weight:600}.hl-b{color:var(--b);font-weight:600}.grid-picker{flex:1;min-height:0;overflow:auto;padding:4px 10px calc(14px + var(--safe-b));display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-content:start;-webkit-overflow-scrolling:touch}.tile{position:relative;cursor:pointer;border-radius:4px;border:2px solid transparent;overflow:hidden;aspect-ratio:1;transition:border-color .1s,transform .1s;background:var(--surface2)}.tile:hover{border-color:var(--accent);transform:scale(1.06);z-index:1}.tile.sel-a{border-color:var(--a)}.tile.sel-b{border-color:var(--b)}.tile img{width:100%;height:100%;object-fit:cover;display:block}.tile-badge{position:absolute;top:2px;right:2px;font-family:var(--mono);font-size:8px;font-weight:700;border-radius:2px;padding:1px 3px;line-height:1.2;pointer-events:none}.badge-a{background:var(--a);color:#fff}.badge-b{background:var(--b);color:#fff}.controls{position:absolute;z-index:15;left:50%;bottom:calc(14px + var(--safe-b));transform:translate(-50%);width:min(760px,calc(100vw - 28px - var(--safe-l) - var(--safe-r)));padding:12px 16px;display:flex;flex-direction:column;gap:10px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--glass-brd);border-radius:var(--radius);box-shadow:var(--shadow)}.morph-row{display:flex;align-items:center;gap:10px}.morph-label{font-family:var(--mono);font-size:12px;font-weight:700;min-width:40px}.morph-label.a{color:var(--a)}.morph-label.b{color:var(--b);text-align:right}.slider-track{flex:1;position:relative;height:22px;display:flex;align-items:center}.slider-fill{position:absolute;left:0;height:3px;background:linear-gradient(to right,var(--a),var(--b));border-radius:2px;pointer-events:none;transition:width .04s linear}.morph-slider{position:relative;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border2);border-radius:2px;cursor:pointer;outline:none}.morph-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--text);border:2.5px solid var(--accent);cursor:grab;box-shadow:0 0 8px #22d3ee4d}.morph-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--text);border:2.5px solid var(--accent);cursor:grab}.morph-slider::-webkit-slider-thumb:active{cursor:grabbing}.t-readout{font-family:var(--mono);font-size:11px;color:var(--text-dim);min-width:64px;text-align:right}.ctrl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ctrl-spacer{flex:1 1 auto}.ctrl-advanced{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.play-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border2);background:var(--surface2);color:var(--text);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0}.play-btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.play-btn.playing{border-color:var(--b);background:var(--b-soft);color:var(--b)}.btn-icon{width:34px;height:34px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text-dim);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .12s}.btn-icon:hover{color:var(--text);background:#1e1e28}.toggle{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;min-height:34px}.toggle:hover{color:var(--text)}.toggle input[type=checkbox]{cursor:pointer;accent-color:var(--accent);width:15px;height:15px}.speed-ctrl{gap:6px}.speed-select{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-size:11px;padding:4px 6px;cursor:pointer;font-family:var(--mono);outline:none}.divider{width:1px;height:20px;background:var(--border);margin:0 2px}.sharpness-ctrl{gap:6px}.sharp-slider{width:78px;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border2);border-radius:2px;cursor:pointer;outline:none;accent-color:var(--accent)}.sharp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer}.sharp-val{font-family:var(--mono);font-size:10px;color:var(--accent);min-width:22px}.btn-text{padding:7px 12px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text-dim);font-size:12px;font-family:inherit;cursor:pointer;transition:all .12s;min-height:34px}.btn-text:hover{color:var(--text);background:#1e1e28}.btn-text.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.random-info{font-family:var(--mono);font-size:10px;color:var(--accent);white-space:nowrap}.immersive-exit{position:absolute;z-index:40;top:calc(12px + var(--safe-t));right:calc(12px + var(--safe-r));width:40px;height:40px;border-radius:10px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);font-size:16px;cursor:pointer;opacity:.5;transition:opacity .2s}.immersive-exit:hover{opacity:1}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;gap:14px;color:var(--text-dim);font-size:13px;background:var(--bg)}.spinner{width:30px;height:30px;border:2.5px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.topbar-title{display:none}.topbar-stats{gap:12px}.stat:nth-child(n+3){display:none}.matrix-word,.topbar-link{display:none}}@media(max-width:600px){:root{--topbar-h: 52px}.brand-sub{display:none}.topbar{gap:10px}.topbar-stats{display:none}.matrix-opener{padding:7px 11px}.drawer{top:auto;left:0;right:0;bottom:0;width:100%;height:min(74dvh,560px);border-right:none;border-top:1px solid var(--glass-brd);border-radius:18px 18px 0 0;transform:translateY(102%)}.drawer.open{transform:translateY(0)}.drawer-head{padding-top:12px}.drawer-head:before{content:"";position:absolute;top:6px;left:50%;transform:translate(-50%);width:38px;height:4px;border-radius:2px;background:var(--border2)}.grid-picker{gap:3px;padding-bottom:calc(18px + var(--safe-b))}.controls{left:8px;right:8px;bottom:calc(8px + var(--safe-b));transform:none;width:auto;padding:11px 12px;border-radius:16px}.morph-label{min-width:34px;font-size:11px}.t-readout{display:none}.ctrl-row{gap:7px}}@media(max-height:480px){.drawer{height:100dvh}.controls{padding:8px 12px;gap:7px}}@media(min-width:1024px){.drawer-scrim{display:none}.app.drawer-open .controls{left:calc(50% + min(400px,88vw)/2)}}@media(prefers-reduced-motion:reduce){.drawer,.drawer-scrim,.slider-fill{transition:none}.spinner{animation-duration:1.4s}}@media(hover:none){.tile:hover{transform:none;border-color:transparent}.tile.sel-a:hover{border-color:var(--a)}.tile.sel-b:hover{border-color:var(--b)}}