:root{--bg:#0b0d10;--panel:#0f1115;--raise:#171a20;--line:#ffffff12;--line2:#ffffff21;--ink:#ecebe7;--dim:#7d838d;--faint:#4a5058;--R:#ff8a4c;--L:#4aa8ff;--perfect:#5fe0a0;--good:#c2e05a;--ok:#f0c64a;--bad:#ff5d5d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font:13px/1.35 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.app{flex-direction:column;height:100svh;display:flex;overflow:hidden}button,input{font:inherit;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--L);outline-offset:2px}header{border-bottom:1px solid var(--line);z-index:20;flex:none;align-items:center;gap:18px;height:60px;padding:0 18px;display:flex;position:relative}.spacer{flex:1}.picker{position:relative}.rudTitle{font:inherit;margin:0}.rudBtn{cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:6px 4px;font-size:15px;font-weight:600;display:flex}.rudBtn #rudNum{color:var(--dim);font-variant-numeric:tabular-nums;min-width:1.5em;font-weight:500}.rudBtn i{border:solid var(--dim);border-width:0 1.5px 1.5px 0;width:6px;height:6px;margin:-4px 4px 0 2px;transform:rotate(45deg)}.rudMenu{background:var(--raise);border:1px solid var(--line2);border-radius:14px;grid-template-columns:repeat(4,minmax(180px,1fr));gap:4px 18px;width:max-content;max-width:calc(100vw - 36px);padding:16px 18px;display:none;position:absolute;top:48px;left:0;box-shadow:0 24px 48px #0000008c}.rudMenu.open{display:grid}.rudMenu h4{letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 6px;font-size:10px;font-weight:600}.rudMenu button{text-align:left;cursor:pointer;color:#c9c8c3;background:0 0;border:0;border-radius:7px;gap:8px;width:100%;margin-left:-8px;padding:4px 8px;display:flex}.rudMenu button span{color:var(--faint);font-variant-numeric:tabular-nums;text-align:right;min-width:1.5em}.rudMenu button:hover,.rudMenu button.on{color:var(--ink);background:#23272e}.seg{background:var(--raise);border:1px solid var(--line);border-radius:999px;padding:3px;display:flex}.seg button{color:var(--dim);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:5px 14px;font-weight:500}.seg button.on{color:var(--ink);background:#262a32}.tempo{align-items:center;gap:10px;display:flex}.tempo .num{justify-content:center;align-items:baseline;gap:4px;min-width:84px;display:flex}.tempo .num input{text-align:right;font-variant-numeric:tabular-nums;appearance:textfield;background:0 0;border:0;width:50px;font-size:22px;font-weight:600}.tempo .num input::-webkit-inner-spin-button{display:none}.tempo .num span{color:var(--dim);letter-spacing:.06em;text-transform:uppercase;font-size:11px}.icon{border:1px solid var(--line);cursor:pointer;width:30px;height:30px;color:var(--dim);background:0 0;border-radius:50%;flex:none;place-items:center;display:grid}.icon:hover{border-color:var(--line2);color:var(--ink)}.icon.on{color:var(--ink);background:#20242b}.icon svg{width:15px;height:15px}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:150px;height:20px}input[type=range]::-webkit-slider-runnable-track{background:#2a2e36;border-radius:3px;height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--ink);border-radius:50%;width:14px;height:14px;margin-top:-5.5px}input[type=range]::-moz-range-track{background:#2a2e36;border-radius:3px;height:3px}input[type=range]::-moz-range-thumb{background:var(--ink);border:0;border-radius:50%;width:14px;height:14px}#play{background:var(--ink);width:42px;height:42px;color:var(--bg);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;display:grid}#play svg{width:16px;height:16px}#stage{flex:1;grid-template:"staff staff staff"132px"side lane front"1fr/1fr minmax(300px,400px) 1fr;gap:12px;min-height:0;padding:12px;display:grid;position:relative}.staff{grid-area:staff}#vSide{grid-area:side}#vFront{grid-area:front}.laneCell{grid-area:lane}.staff,.view,.laneCell{border:1px solid var(--line);border-radius:16px;min-width:0;min-height:0;position:relative;overflow:hidden}.staff,.laneCell{background:var(--panel);z-index:3}.view{background:radial-gradient(120% 90% at 50% 30%, #1a1e25 0%, var(--panel) 70%)}.staff canvas,.laneCell canvas{width:100%;height:100%;position:absolute;inset:0}.tag{z-index:3;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;font-size:11px;position:absolute;top:12px;left:14px}#gl{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}@media (width<=900px){.app{height:auto;min-height:100svh;overflow:visible}header{flex-wrap:wrap;gap:10px;height:auto;padding:10px 16px}.tempo input[type=range]{width:100px}#stage{grid-template:"staff staff"110px"lane lane"minmax(260px,1fr)"side front"220px/1fr 1fr;padding:10px 16px}.rudMenu{grid-template-columns:repeat(2,minmax(150px,1fr))}}.pill{z-index:4;border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--dim);font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap;background:#14171cd9;border-radius:999px;align-items:center;gap:10px;padding:4px 11px;font-size:11px;display:none;position:absolute;top:10px;left:50%;transform:translate(-50%)}.pill b{color:var(--ink);font-weight:600}body.play .pill{display:flex}.details{z-index:4;border:1px solid var(--line);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;background:#14171cf2;border-radius:12px;grid-template-columns:auto auto;gap:3px 14px;margin:0;padding:10px 12px;font-size:11px;display:none;position:absolute;top:40px;left:50%;transform:translate(-50%)}.details.open{display:grid}.details dd{color:var(--ink);text-align:right;margin:0}.pop{z-index:30;background:var(--raise);border:1px solid var(--line2);border-radius:14px;flex-direction:column;gap:10px;width:260px;padding:14px;display:none;position:absolute;top:58px;right:18px;box-shadow:0 20px 40px #00000080}.pop.open{display:flex}.pop .row{justify-content:space-between;align-items:center;gap:8px;display:flex}.pop .row input{width:130px}.pop button.txt{border:1px solid var(--line);cursor:pointer;background:#23272e;border-radius:8px;padding:5px 10px}.pop button.txt:disabled{opacity:.4;cursor:default}.pop p{color:var(--dim);margin:0;font-size:11px}.meter{background:#23272e;border-radius:4px;height:4px;position:relative;overflow:hidden}.meter i{background:var(--perfect);width:0;position:absolute;top:0;bottom:0;left:0}.meter b{background:var(--bad);width:2px;position:absolute;top:0;bottom:0}.toast{z-index:40;border:1px solid var(--line);color:var(--dim);opacity:0;pointer-events:none;background:#1d2127;border-radius:999px;padding:7px 14px;font-size:12px;transition:opacity .3s;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}@media (prefers-reduced-motion:reduce){.toast{transition:none}}.about{color:#c9c8c3;max-width:60rem;margin:0 auto;padding:40px 16px 56px;font-size:15px;line-height:1.6}.about h2{color:var(--ink);letter-spacing:-.01em;margin:32px 0 10px;font-size:20px}.about h2:first-child{margin-top:0}.about h3{color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:11px}.about p{max-width:68ch;margin:0 0 12px}.about a{color:var(--L)}.about .sticking{color:var(--ink);letter-spacing:.04em;background:var(--panel);border:1px solid var(--line);border-radius:10px;max-width:100%;padding:10px 14px;font:600 17px/1.5 ui-monospace,SF Mono,Menlo,Consolas,monospace;display:inline-block}.about .index{grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:20px;margin:8px 0 28px;display:grid}.about ol{color:var(--faint);margin:0;padding-left:2em}.about li{padding:2px 0}.about li a{color:#c9c8c3;text-decoration:none}.about li a:hover,.about li a[aria-current]{color:var(--ink);text-decoration:underline}.about .credit{color:var(--dim);border-top:1px solid var(--line);padding-top:16px;font-size:13px}