:root{--void:#0d0c0a;--bone:#e9e1ce;--lo:#241f17;--hi:#75684f;--ember:#ff5a1f;--hot:#ffc53d;--smoke:#5b6470;--amber:#e8b563;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--void);color:var(--bone);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,sans-serif;overflow:hidden}canvas.stage{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:fixed;inset:0}canvas.stage[data-tool=match]{cursor:crosshair}canvas.stage[data-tool=break]{cursor:cell}canvas.stage[data-tool=rain]{cursor:s-resize}.loading,.switching{background:var(--void);z-index:40;place-items:center;display:grid;position:fixed;inset:0}.switching{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0d0c0a8c}.loading .card,.switching .card{text-align:center;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-family:IBM Plex Mono,monospace;font-size:12px}.loading .card em,.switching .card em{letter-spacing:0;text-transform:none;color:var(--bone);margin-bottom:18px;font-family:Spectral,serif;font-size:30px;font-style:italic;font-weight:300;display:block}.sw-name{text-transform:none;letter-spacing:.02em;color:var(--bone);opacity:.8;font-family:Spectral,serif;font-size:16px;font-style:italic}.loading .bar{background:#e9e1ce24;width:180px;height:1px;margin:0 auto;position:relative;overflow:hidden}.loading .bar i{transform-origin:0;background:var(--ember);animation:sweep 1.6s var(--ease-out) infinite;position:absolute;inset:0}@keyframes sweep{0%{transform:translate(-100%)scaleX(.6)}60%{transform:translate(20%)scaleX(.6)}to{transform:translate(105%)scaleX(.6)}}.errline{text-transform:none;letter-spacing:.02em;opacity:.8;max-width:34ch;margin:0 auto 14px;font-size:12px;line-height:1.6}.retry{letter-spacing:.14em;text-transform:uppercase;color:var(--amber);cursor:pointer;background:0 0;border:none;border-bottom:1px solid #e8b56366;padding:4px 2px;font-family:IBM Plex Mono,monospace;font-size:11px}.retry:hover{color:var(--hot);border-color:var(--hot)}.retry:focus-visible{outline:1px solid var(--amber);outline-offset:3px}.retry:active{transform:scale(.97)}.masthead{pointer-events:none;z-index:20;justify-content:flex-end;align-items:flex-start;padding:18px 22px;display:flex;position:fixed;top:0;left:0;right:0}body:not(.revealed) .masthead,body:not(.revealed) .instruments,body:not(.revealed) .rail,body:not(.revealed) .guide,body:not(.revealed) .tray{opacity:0;visibility:hidden}body.revealed .masthead{animation:hud-in .7s var(--ease-out) .15s backwards}body.revealed .instruments{animation:hud-in .7s var(--ease-out) .5s backwards}body.revealed .rail{animation:hud-in .7s var(--ease-out) .65s backwards}body.revealed .tray{animation:hud-in-c .7s var(--ease-out) .3s backwards}body.revealed .guide{animation:hud-in-c .7s var(--ease-out) .55s backwards}body.revealed .guide.replay{animation-delay:0s}@keyframes hud-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.place-btn{pointer-events:auto;letter-spacing:.12em;text-transform:uppercase;opacity:.9;text-align:right;color:var(--bone);cursor:pointer;background:0 0;border:none;padding:4px 0 4px 12px;font-family:IBM Plex Mono,monospace;font-size:12px}.place-btn small{opacity:.7;text-shadow:0 1px 8px #000c,0 1px 3px #000000e6;margin-top:2px;font-size:10px;display:block}.place-btn .caret{transition:transform .3s var(--ease-out);display:inline-block}.place-btn[aria-expanded=true] .caret{transform:rotate(180deg)}.place-btn:hover{opacity:1}.place-btn:focus-visible{outline:1px solid var(--amber);outline-offset:3px}.instruments{pointer-events:none;z-index:15;transition:opacity .3s var(--ease-out);align-items:flex-end;gap:18px;font-family:IBM Plex Mono,monospace;display:flex;position:fixed;bottom:18px;left:22px}.inst .v{color:var(--bone);font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #000000b3,0 2px 16px #000000d9;font-size:17px;font-weight:400}.inst .k{letter-spacing:.16em;text-transform:uppercase;opacity:.78;text-shadow:0 1px 10px #000000e6,0 1px 3px #000c;margin-bottom:4px;font-size:10px}.inst .v small{opacity:.65;font-size:11px}.inst.burnt .v{color:var(--ember)}.sharechip{z-index:16;color:var(--hot);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:chip-in .42s var(--ease-spring) backwards;transition:background .2s var(--ease-out), transform .16s var(--ease-out);background:#ff5a1f1f;border:1px solid #ff5a1f66;border-radius:999px;padding:7px 15px;font-family:Spectral,serif;font-size:13px;font-style:italic;position:fixed;bottom:116px;left:22px}.sharechip:hover{background:#ff5a1f33;transform:translateY(-1px)}.sharechip:focus-visible{outline:1px solid var(--amber);outline-offset:3px}.vane{border:1px solid #e9e1ce29;border-radius:50%;width:44px;height:44px;position:relative}.vane .needle{background:var(--ember);transform-origin:50% 100%;width:1.5px;height:17px;transform:translate(-50%, -100%) rotate(var(--deg,0deg));transition:transform .9s var(--ease-spring);position:absolute;top:50%;left:50%}.vane .n{letter-spacing:.1em;opacity:.55;font-size:8px;position:absolute;top:3px;left:50%;transform:translate(-50%)}.vane:after{content:"";background:var(--bone);border-radius:50%;width:3px;height:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.rail{z-index:15;transition:opacity .3s var(--ease-out);flex-direction:row;align-items:center;gap:16px;font-family:IBM Plex Mono,monospace;display:flex;position:fixed;bottom:78px;left:22px}.rail.dim,.instruments.dim,body.revealed .rail.dim,body.revealed .instruments.dim{opacity:0;pointer-events:none;visibility:hidden;animation:none}.lever{cursor:pointer;color:var(--bone);letter-spacing:.16em;text-transform:uppercase;opacity:.62;transition:opacity .18s var(--ease-out);background:0 0;border:none;align-items:center;gap:9px;padding:3px 0;font-family:inherit;font-size:10px;display:flex}.lever:hover{opacity:1}.lever:focus-visible{outline:1px solid var(--amber);outline-offset:3px}.lever .sw{width:22px;height:12px;transition:border-color .2s var(--ease-out), background .2s var(--ease-out);border:1px solid #e9e1ce47;border-radius:7px;position:relative}.lever .sw:after{content:"";width:7px;height:7px;transition:transform .24s var(--ease-spring), background .2s;background:#e9e1ce80;border-radius:50%;position:absolute;top:50%;left:2px;transform:translateY(-50%)}.lever.on{opacity:1}.lever.on .sw{background:#ff5a1f29;border-color:#ff5a1fb3}.lever.on .sw:after{background:var(--ember);transform:translate(10px,-50%)}.lever .sw.arrow{border:none;width:auto;height:auto}.lever .sw.arrow:after{content:"↗";color:#e9e1ceb3;background:0 0;width:auto;height:auto;font-size:12px;font-style:normal;position:static;transform:none}.lever .sw.q{border:none;width:auto;height:auto;font-style:normal}.lever .sw.q:after{content:none}.lever .sw.q{color:#e9e1ceb3;font-size:12px}.tray{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:auto;z-index:15;background:#0d0c0ab8;border:1px solid #e9e1ce1a;border-radius:999px;align-items:center;gap:4px;padding:6px 12px 6px 14px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}@keyframes hud-in-c{0%{opacity:0;transform:translate(-50%)translateY(6px)}to{opacity:1;transform:translate(-50%)}}.dock-brand{pointer-events:none;border-right:1px solid #e9e1ce24;flex-direction:column;align-items:flex-start;margin-right:8px;padding-right:12px;display:flex}.dock-brand em{color:var(--bone);font-family:Spectral,serif;font-size:17px;font-style:italic;font-weight:300;line-height:1.1}.dock-brand span{letter-spacing:.18em;text-transform:uppercase;opacity:.7;white-space:nowrap;font-family:IBM Plex Mono,monospace;font-size:10px}.tbtn{width:40px;height:40px;color:var(--bone);cursor:pointer;opacity:.55;transition:opacity .16s var(--ease-out), background .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out), color .16s var(--ease-out);background:0 0;border:1px solid #0000;border-radius:50%;place-items:center;display:grid;position:relative}.tbtn svg{width:17px;height:17px}.tbtn:hover{opacity:1;background:#e9e1ce12}.tbtn:active{transform:scale(.92)}.tbtn.on{opacity:1;color:var(--hot);background:#ff5a1f1a}.tbtn.on:after{content:"";background:var(--ember);border-radius:50%;width:3px;height:3px;position:absolute;bottom:3px;left:50%;transform:translate(-50%);box-shadow:0 0 6px #ff5a1fe6}.tbtn:disabled{opacity:.22;cursor:default}.tbtn:disabled:hover{background:0 0}.tbtn:focus-visible{outline:1px solid var(--amber);outline-offset:2px}.toolflash{z-index:25;pointer-events:none;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:toolflash .38s var(--ease-out) both;background:#0d0c0a9e;border:1px solid #e9e1ce14;border-radius:999px;padding:3px 10px;font-family:IBM Plex Mono,monospace;font-size:10px;position:fixed;bottom:74px;left:50%;transform:translate(-50%)}@keyframes toolflash{0%{opacity:0;transform:translate(-50%)translateY(5px)}20%{opacity:.95;transform:translate(-50%)translateY(0)}65%{opacity:.95}to{opacity:0;transform:translate(-50%)translateY(-4px)}}.guide{z-index:30;pointer-events:auto;animation:guide-in .42s var(--ease-spring) backwards;align-items:baseline;gap:12px;max-width:min(92vw,560px);padding:0 4px 10px;display:flex;position:fixed;bottom:92px;left:50%;transform:translate(-50%)}.guide:after{content:"";background:linear-gradient(90deg,#0000,#ff5a1fbf,#e8b56380,#0000);height:1px;position:absolute;bottom:0;left:8px;right:8px}@keyframes guide-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)}}.g-k{letter-spacing:.2em;text-transform:uppercase;color:var(--ember);text-shadow:0 2px 14px #000000e6;font-family:IBM Plex Mono,monospace;font-size:10px}.g-line{color:var(--bone);text-shadow:0 1px 3px #000000e6,0 2px 22px #000000f2;flex:auto;min-width:0;font-family:Spectral,serif;font-size:16px;font-style:italic;font-weight:300;line-height:1.4}.g-k,.g-dots,.g-skip,.g-keys,.g-buzz{flex:none}.g-top,.g-meta{display:contents}.g-plain{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.g-keys{letter-spacing:.18em;text-transform:uppercase;color:var(--bone);opacity:.55;text-shadow:0 2px 12px #000000e6;align-self:center;font-family:IBM Plex Mono,monospace;font-size:9px;display:none}body.kb .g-keys{display:inline}.g-buzz{cursor:pointer;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);opacity:.55;text-shadow:0 2px 12px #000000e6;transition:opacity .16s var(--ease-out), color .16s var(--ease-out);background:0 0;border:none;align-self:center;padding:2px 4px;font-family:IBM Plex Mono,monospace;font-size:9px}.g-buzz[aria-pressed=true]{color:var(--ember);opacity:.85}.g-buzz:hover{opacity:1}.g-buzz:active{color:var(--hot)}.g-buzz:focus-visible{outline:1px solid var(--amber);outline-offset:3px}.g-dots{align-self:center;gap:5px;display:inline-flex}.g-dots i{background:#e9e1ce47;border-radius:50%;width:4px;height:4px;box-shadow:0 1px 6px #000c}.g-dots i.on{background:var(--ember)}.g-skip{cursor:pointer;color:var(--bone);opacity:.5;text-shadow:0 2px 12px #000000e6;transition:opacity .16s var(--ease-out);background:0 0;border:none;padding:2px 4px;font-size:15px;line-height:1}.g-skip:hover{opacity:.9}.g-skip:focus-visible{outline:1px solid var(--amber);outline-offset:3px}body.revealed .guide.out,.guide.out{opacity:0;pointer-events:none;animation:none;transform:translate(-50%)translateY(8px)}.hoverchip{z-index:12;pointer-events:none;color:#e9e1ced9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:chip-in .26s var(--ease-out) backwards;background:#0d0c0a99;border:1px solid #e9e1ce1a;border-radius:999px;padding:3px 9px;font-family:Spectral,serif;font-size:13px;font-style:italic;position:fixed;transform:translateY(-100%)}.hoverchip.out{opacity:0;animation:none}@keyframes chip-in{0%{opacity:0;transform:translateY(calc(4px - 100%))}to{opacity:1;transform:translateY(-100%)}}.offline{letter-spacing:.16em;text-transform:uppercase;color:var(--amber);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:35;animation:guide-in .4s var(--ease-spring) backwards;background:#0d0c0acc;border:1px solid #e8b5634d;border-radius:999px;padding:8px 16px;font-family:IBM Plex Mono,monospace;font-size:10px;position:fixed;top:18px;left:50%;transform:translate(-50%)}.offline.out{opacity:0;animation:none;transform:translate(-50%)translateY(8px)}.placetray{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:32;transform-origin:100% 0;width:300px;max-height:min(70vh,480px);animation:tray-in .34s var(--ease-spring) backwards;background:#0d0c0adb;border:1px solid #e9e1ce1f;border-radius:16px;flex-direction:column;display:flex;position:fixed;top:64px;right:22px;overflow:hidden;box-shadow:0 12px 50px #00000080}@keyframes tray-in{0%{opacity:0;transform:scale(.96)translateY(-6px)}to{opacity:1;transform:none}}.placetray.out{opacity:0;pointer-events:none;animation:none;transform:scale(.97)translateY(-4px)}.pt-head{border-bottom:1px solid #e9e1ce14;padding:10px 12px 8px}.pt-head input{width:100%;color:var(--bone);caret-color:var(--ember);background:0 0;border:none;outline:none;font-family:Spectral,serif;font-size:15px;font-style:italic}.pt-head input::placeholder{color:#e9e1ce80}.pt-note{letter-spacing:.14em;text-transform:uppercase;color:var(--amber);opacity:.7;padding:8px 14px;font-family:IBM Plex Mono,monospace;font-size:9px}.pt-list{padding:4px 6px 8px;overflow-y:auto}.pt-sect{letter-spacing:.2em;text-transform:uppercase;opacity:.7;padding:8px 8px 5px;font-family:IBM Plex Mono,monospace;font-size:10px}.pt-list button{width:100%;color:var(--bone);cursor:pointer;text-align:left;transition:background .14s var(--ease-out), transform .1s var(--ease-out);background:0 0;border:none;border-radius:9px;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;padding:7px 8px;display:flex}.pt-list button:hover{background:#e9e1ce0f}.pt-list button:active{background:#ff5a1f1f;transform:scale(.99)}.pt-list button:focus-visible{outline:1px solid var(--amber);outline-offset:-1px}.pt-name{color:var(--bone);flex:auto;min-width:0;font-family:Spectral,serif;font-size:14px;font-style:italic}.pt-hint{letter-spacing:.1em;text-transform:uppercase;color:var(--bone);opacity:.55;flex:none;margin-left:auto;font-family:IBM Plex Mono,monospace;font-size:10px}.pt-list::-webkit-scrollbar{width:4px}.pt-list::-webkit-scrollbar-thumb{background:#e9e1ce26;border-radius:2px}.pt-coords{letter-spacing:.12em;opacity:.7;padding:4px 2px 0;font-family:IBM Plex Mono,monospace;font-size:10px}.pt-foot{border-top:1px solid #e9e1ce14;flex-direction:column;gap:7px;padding:9px 14px 10px;display:flex}.pt-guide{cursor:pointer;text-align:left;color:var(--amber);background:0 0;border:none;border-bottom:1px solid #e8b56359;align-self:flex-start;padding:0;font-family:Spectral,serif;font-size:13px;font-style:italic}.pt-guide:hover{color:var(--hot);border-color:var(--hot)}.pt-guide:focus-visible{outline:1px solid var(--amber);outline-offset:3px}.pt-cred{letter-spacing:.06em;opacity:.55;font-family:IBM Plex Mono,monospace;font-size:10px;line-height:1.6}.sheet-back{z-index:45;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade-in .24s var(--ease-out) backwards;background:#0d0c0a99;place-items:center;display:grid;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}}.sheet-back.out{opacity:0;pointer-events:none;animation:none}.sheet{transform-origin:0 100%;width:min(88vw,620px);max-height:calc(100vh - 24px);animation:sheet-in .38s var(--ease-spring) backwards;background:0 0;border:none;border-radius:0;padding:0;overflow-y:auto}@keyframes sheet-in{0%{opacity:0;transform:translateY(14px)scale(.96)rotate(-.6deg)}to{opacity:1;transform:none}}.sheet-back.out .sheet{opacity:0;animation:none;transform:scale(.94)translateY(10px)rotate(-.6deg)}.sheet canvas{border-radius:4px 22px 6px 26px;width:100%;height:auto;display:block;box-shadow:0 24px 90px #000000b3,0 0 0 1px #e9e1ce14}.sheet-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;padding:12px 6px 2px;display:flex}.sheet-cap{opacity:.7;font-family:Spectral,serif;font-size:14px;font-style:italic}.sheet-actions{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.sheet-actions button,.sheet-actions a{letter-spacing:.14em;text-transform:uppercase;color:var(--amber);cursor:pointer;background:0 0;border:none;border-bottom:1px solid #e8b56366;padding:4px 0;font-family:IBM Plex Mono,monospace;font-size:10px;text-decoration:none}.sheet-actions button:hover,.sheet-actions a:hover{color:var(--hot);border-color:var(--hot)}.sheet-actions button:focus-visible,.sheet-actions a:focus-visible{outline:1px solid var(--amber);outline-offset:3px}.sheet-url{color:var(--bone);background:#e9e1ce12;border:1px solid #e9e1ce40;border-radius:6px;flex:100%;max-width:100%;padding:6px 10px;font-family:IBM Plex Mono,monospace;font-size:11px}.place-btn:active{transform:translateY(1px)}.g-skip:active{opacity:1}.pt-guide:active{color:var(--hot)}.sharechip:active{transform:scale(.97)}.sheet-actions button:active,.sheet-actions a:active{color:var(--hot);border-color:var(--hot)}.lever:active .lbl{color:var(--hot)}@media (width<=700px){.masthead{padding:calc(14px + env(safe-area-inset-top)) 16px 14px}.place-btn{font-size:11px}.instruments{left:16px;bottom:calc(96px + env(safe-area-inset-bottom));gap:12px}.inst .v{font-size:14px}.inst.burnt:not(.lit),.inst:nth-child(4){display:none}.vane{width:36px;height:36px}.vane .needle{height:14px}.rail{left:16px;right:auto;bottom:calc(148px + env(safe-area-inset-bottom));gap:14px;top:auto}.lever{min-height:44px}.g-skip{min-width:44px;min-height:44px;margin:-12px -4px -12px 0}.g-buzz{align-items:center;min-height:44px;display:inline-flex}.pt-guide,.pt-list button,.place-btn{min-height:44px}.sheet-actions button,.sheet-actions a{align-items:center;min-height:44px;display:inline-flex}.sharechip{left:16px;bottom:calc(204px + env(safe-area-inset-bottom));align-items:center;min-height:44px;display:inline-flex}.tray{bottom:calc(14px + env(safe-area-inset-bottom));padding:6px 10px 6px 12px}.offline{bottom:auto;top:calc(84px + env(safe-area-inset-top));width:max-content;max-width:calc(100vw - 32px)}.dock-brand span{display:none}.tbtn{width:44px;height:44px}.guide{bottom:calc(100px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch;gap:6px;width:max-content;max-width:88vw}.guide .g-k{display:none}.g-top{align-items:baseline;gap:10px;display:flex}.g-meta{align-items:center;gap:14px;display:flex}.g-meta .g-dots{margin-left:auto}.g-morph{display:none}.g-plain{clip-path:none;white-space:normal;width:auto;height:auto;animation:g-plain-in .24s var(--ease-out) backwards;display:inline;position:static;overflow:visible}@keyframes g-plain-in{0%{opacity:0}}.placetray{width:auto;top:56px;left:16px;right:16px}}@media (prefers-reduced-motion:reduce){.guide,.g-plain,.placetray,.sheet,.sheet-back,.offline,.hoverchip,.sharechip,.masthead,.instruments,.rail,.tray,body.revealed .masthead,body.revealed .instruments,body.revealed .rail,body.revealed .tray,body.revealed .guide{animation-duration:1ms;animation-delay:0s}.toolflash,.loading .bar i{animation:none}.vane .needle{transition-duration:.2s}}
