:root{--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--radius: .5rem;--radius-lg: .75rem;--bg: #0b0d12;--panel: color-mix(in oklab, #11151d 92%, transparent);--panel-border: color-mix(in oklab, #ffffff 8%, transparent);--fg: #e9ecf1;--fg-muted: color-mix(in oklab, var(--fg) 65%, transparent);--accent: #3aa0ff;--accent-warm: #ff8a3a;--danger: #ff4d6d;--ok: #5be58b;--shadow: 0 8px 32px color-mix(in oklab, #000 60%, transparent);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:radial-gradient(ellipse at top,#1a2030 0%,var(--bg) 60%) fixed;color:var(--fg);overflow:hidden}main{position:relative;width:100vw;height:100vh}#scene{display:block;width:100%;height:100%;outline:none}.hud{position:fixed;inset-block-start:calc(var(--space-4) + 44px + var(--space-3));inset-inline-start:var(--space-4);inline-size:min(320px,calc(100vw - 2 * var(--space-4)));padding:var(--space-5);background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-lg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:var(--space-4);z-index:10}.hud__header h1{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.01em}.hud__header h1 span{color:var(--accent)}.tagline{margin:var(--space-1) 0 0;color:var(--fg-muted);font-size:.85rem}.hud__section{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.field{display:flex;flex-direction:column;gap:var(--space-1);flex:1 1 auto;font-size:.85rem;color:var(--fg-muted)}.field>span{display:flex;justify-content:space-between;align-items:baseline}select,input[type=range]{inline-size:100%;font:inherit;color:var(--fg);background:color-mix(in oklab,var(--bg) 70%,transparent);border:1px solid var(--panel-border);border-radius:var(--radius);padding:var(--space-2) var(--space-3)}select:focus-visible,input:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input[type=range]{padding:0;block-size:1.5rem;accent-color:var(--accent)}.btn{font:inherit;cursor:pointer;padding:var(--space-3) var(--space-4);border-radius:var(--radius);border:1px solid var(--panel-border);background:color-mix(in oklab,var(--bg) 60%,transparent);color:var(--fg);transition:transform .15s ease-out,background-color .15s ease-out}.btn:hover{background:color-mix(in oklab,var(--accent) 18%,var(--bg))}.btn--primary{background:var(--accent);color:#061018;font-weight:600;border-color:transparent}.btn--primary:hover{background:color-mix(in oklab,var(--accent) 80%,#fff)}.btn--ghost{background:transparent}.btn--small{padding:var(--space-2) var(--space-3);font-size:.8rem;align-self:flex-start}.chip{font:inherit;cursor:pointer;padding:var(--space-2) var(--space-3);border-radius:999px;border:1px solid var(--panel-border);background:transparent;color:var(--fg-muted);font-size:.85rem;transition:color .15s,background-color .15s,border-color .15s}.chip.is-active{color:var(--fg);background:color-mix(in oklab,var(--accent) 25%,transparent);border-color:var(--accent)}.meta{flex-direction:column;align-items:flex-start;font-size:.8rem;color:var(--fg-muted);gap:var(--space-2)}.meta p{margin:0}.meta strong{color:var(--fg)}kbd{display:inline-block;padding:1px 6px;margin-inline-end:2px;border-radius:4px;border:1px solid var(--panel-border);background:color-mix(in oklab,var(--bg) 50%,transparent);font:.75rem ui-monospace,SF Mono,monospace;color:var(--fg)}.score{flex-direction:column;align-items:flex-start;font-size:.9rem}.score p{margin:0}.score output{font-variant-numeric:tabular-nums;color:var(--fg);font-weight:600}.toast{position:fixed;inset-block-end:var(--space-5);inset-inline-start:50%;translate:-50% 0;padding:var(--space-3) var(--space-4);background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);font-size:.9rem;z-index:20;opacity:0;transition:opacity .2s ease-out}.toast.is-visible{opacity:1}[hidden]{display:none!important}.floating-btn{position:fixed;top:var(--space-4);inline-size:44px;block-size:44px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel);color:var(--fg);cursor:pointer;z-index:15;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .2s ease-out,background-color .2s}.floating-btn--left{left:var(--space-4)}.floating-btn--right{right:var(--space-4)}.floating-btn:hover{transform:rotate(-8deg) scale(1.05);background:color-mix(in oklab,var(--accent) 25%,var(--panel))}.floating-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hud{transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease-out}[data-hud=collapsed] .hud{transform:translate(calc(-100% - var(--space-5)));opacity:0;pointer-events:none}[aria-expanded=false].floating-btn--left svg{transform:scaleX(-1)}.checkbox{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:.85rem;color:var(--fg-muted);-webkit-user-select:none;user-select:none}.checkbox input[type=checkbox]{inline-size:1rem;block-size:1rem;accent-color:var(--accent);cursor:pointer}.checkbox:hover{color:var(--fg)}[data-theme=aesthetic]{--bg: #f4ece0;--panel: #fbf5e7;--panel-border: #2a2622;--fg: #1a1814;--fg-muted: #5a544a;--accent: #1a1814;--accent-warm: #8b3a1f;--danger: #a32d2d;--ok: #2d6b2d;--shadow: 1px 2px 0 color-mix(in oklab, #1a1814 18%, transparent);color-scheme:light}[data-theme=aesthetic] body{background:#f4ece0;background-image:radial-gradient(ellipse 80% 50% at 50% 0%,color-mix(in oklab,#e6dcc4 60%,transparent),transparent),radial-gradient(circle at 15% 85%,color-mix(in oklab,#d8cdb3 30%,transparent),transparent 50%)}[data-theme=aesthetic] .hud{border-radius:0;border-width:1.5px;box-shadow:3px 4px color-mix(in oklab,var(--accent) 15%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel)}[data-theme=aesthetic] .hud__header h1{font-family:ui-serif,Georgia,Times New Roman,serif;font-weight:500;font-style:italic;letter-spacing:.01em}[data-theme=aesthetic] .hud__header h1 span{color:var(--fg)}[data-theme=aesthetic] .tagline{font-style:italic}[data-theme=aesthetic] select,[data-theme=aesthetic] input[type=range],[data-theme=aesthetic] .btn,[data-theme=aesthetic] .chip{border-radius:0;border-width:1.5px;background:transparent}[data-theme=aesthetic] .btn--primary{background:var(--fg);color:var(--panel)}[data-theme=aesthetic] .chip.is-active{background:var(--fg);color:var(--panel);border-color:var(--fg)}[data-theme=aesthetic] kbd{border-radius:0;border-width:1.5px;background:transparent}[data-theme=aesthetic] .floating-btn{background:var(--panel);border-color:var(--accent);border-width:1.5px;box-shadow:2px 2px color-mix(in oklab,var(--accent) 20%,transparent)}[data-theme=aesthetic] .checkbox input[type=checkbox]{accent-color:var(--fg)}[data-theme=aesthetic] .toast{border-radius:0;border-width:1.5px;font-style:italic}[data-theme=aesthetic] .drop-hint{background:color-mix(in oklab,var(--fg) 8%,transparent);color:var(--fg);font-style:italic;font-family:ui-serif,Georgia,serif}[data-theme=aesthetic] .drop-hint code{background:var(--panel);border:1.5px solid var(--accent);border-radius:0}.drop-hint{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--accent) 25%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:2rem;font-weight:600;color:var(--fg);z-index:30;pointer-events:none}.drop-hint code{background:color-mix(in oklab,var(--bg) 60%,transparent);padding:0 var(--space-2);border-radius:var(--radius);margin-inline:var(--space-1)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media (max-width: 640px){.hud{inline-size:calc(100vw - 2 * var(--space-3));inset-block-start:var(--space-2);inset-inline-start:var(--space-2);padding:var(--space-3)}}