:root{--bg:#01030b;--ink:#e8f6ff;--ink-dim:#8aa3c2;--cyan:#01f4fb;--cyan-soft:#01f4fb24;--navy:#011b52;--ring:#0146b2;--line:#78beff29;--glass:#040e269e;--radius:14px;--font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--ink);font-family:var(--font);margin:0}body{-webkit-font-smoothing:antialiased;overflow:hidden}button,input{font:inherit;color:inherit}.stage{position:fixed;inset:0;overflow:hidden}.stage-canvas{position:absolute;inset:0}.vignette{pointer-events:none;background:radial-gradient(at 50% 46%,#0000 42%,#0000008c 100%);position:absolute;inset:0}.brand{top:max(18px, env(safe-area-inset-top));pointer-events:none;align-items:center;gap:12px;display:flex;position:absolute;left:20px}.brand h1{letter-spacing:.22em;text-transform:uppercase;margin:0;font-size:13px;font-weight:600}.brand p{color:var(--ink-dim);letter-spacing:.06em;margin:3px 0 0;font-size:11px}.brand-mark{background:radial-gradient(circle at 50% 46%, var(--navy) 0 58%, var(--ring) 60% 80%, #05c9fa 82% 86%, #011f5a 88%);border-radius:50%;width:22px;height:22px;box-shadow:0 0 14px #01f4fb59}.loader{text-align:center;color:var(--ink-dim);letter-spacing:.12em;text-transform:uppercase;font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loader-bar{background:var(--line);border-radius:2px;width:180px;height:2px;margin:0 auto 12px;overflow:hidden}.loader-bar span{background:var(--cyan);transform-origin:0;height:100%;transition:transform .2s;display:block}.loader.error{color:#ff9b9b;text-transform:none;letter-spacing:0}.hint{left:0;right:0;top:max(70px, calc(env(safe-area-inset-top) + 56px));text-align:center;color:var(--ink-dim);letter-spacing:.08em;opacity:0;pointer-events:none;margin:0;font-size:12px;transition:opacity 1.2s;position:absolute}.hint[data-visible=true]{opacity:.85}.stage:has(.panel.open) .hint{opacity:0}.controls{left:50%;bottom:max(18px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:10px;width:min(720px,100% - 24px);display:flex;position:absolute;transform:translate(-50%)}.control-group{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);border-radius:999px;flex-wrap:wrap;justify-content:center;gap:8px;padding:6px;display:flex}.chip,.action{letter-spacing:.04em;cursor:pointer;min-height:36px;color:var(--ink-dim);background:0 0;border:1px solid #0000;border-radius:999px;padding:8px 14px;font-size:12.5px;transition:color .2s,background .2s,border-color .2s}.chip:hover,.action:hover{color:var(--ink);background:#ffffff0a}.chip[aria-pressed=true]{color:var(--cyan);background:var(--cyan-soft);border-color:#01f4fb59}.action.primary{color:var(--bg);background:var(--cyan);font-weight:600}.action.primary:hover{color:var(--bg);background:#7ffbff}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.panel{top:max(14px, env(safe-area-inset-top));flex-direction:column;align-items:flex-end;gap:8px;width:min(290px,100% - 28px);display:flex;position:absolute;right:14px}.panel-toggle{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(12px);letter-spacing:.08em;cursor:pointer;border-radius:999px;min-height:36px;padding:8px 14px;font-size:12px}.panel-body{border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);width:100%;max-height:calc(100vh - 220px);padding:14px 16px 12px;overflow:auto}.panel-note{color:var(--ink-dim);margin:0 0 10px;font-size:11px}.slider{margin-bottom:12px;font-size:12px;display:block}.slider span{color:var(--ink-dim);justify-content:space-between;margin-bottom:4px;display:flex}.slider output{color:var(--ink);font-variant-numeric:tabular-nums}.slider input{width:100%;accent-color:var(--cyan)}.quality{border:0;flex-wrap:wrap;gap:4px 12px;margin:4px 0 10px;padding:0;font-size:12px;display:flex}.quality legend{width:100%;color:var(--ink-dim);margin-bottom:4px}.quality label{cursor:pointer;align-items:center;gap:5px;display:inline-flex}.quality input{accent-color:var(--cyan)}.stats{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:6px 12px;margin:0;padding-top:10px;font-size:11.5px;display:grid}.stats div{justify-content:space-between;display:flex}.stats dt{color:var(--ink-dim)}.stats dd{font-variant-numeric:tabular-nums;margin:0}.fallback{text-align:center;background:radial-gradient(ellipse at 50% 40%, #04102c 0%, var(--bg) 70%);flex-direction:column;justify-content:center;align-items:center;gap:18px;min-height:100%;padding:24px;display:flex}.fallback img{filter:drop-shadow(0 0 40px #01f4fb2e);width:min(420px,78vw);height:auto}.fallback h1{letter-spacing:.22em;text-transform:uppercase;margin:0 0 8px;font-size:15px}.fallback p{max-width:520px;margin:0 auto 6px;font-size:14px;line-height:1.5}.fallback .muted{color:var(--ink-dim);font-size:12.5px}@media (max-width:640px){.brand{gap:9px;left:14px}.brand p{display:none}.brand h1{letter-spacing:.14em;max-width:52vw;font-size:11px}.hint{padding:0 20px}.control-group{scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;max-width:100%;overflow-x:auto}.control-group::-webkit-scrollbar{display:none}.chip,.action{flex:none;padding:8px 11px;font-size:12px}.panel-body{background:#030a1ce0;max-height:46vh}}@media (prefers-reduced-motion:reduce){.hint,.loader-bar span{transition:none}}
