:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0e0e10;--bg-raised:#161618;--surface:#ffffff0a;--surface-hover:#ffffff12;--surface-strong:#ffffff1c;--border:#ffffff12;--border-strong:#ffffff21;--text:#ebebed;--text-muted:#9a9aa1;--text-faint:#616168;--accent:#ebebed;--accent-strong:#fff;--accent-ink:#111113;--right:#d6a064;--left:#7aa5d6;--good:#7cbf8a;--warn:#d8b35e;--bad:#e0606a;--pedal:#a99fd0;--glow:0 0 0 1px #ffffff24;--shadow:0 16px 48px #00000080, 0 1px 3px #0006;--radius:10px;--radius-sm:7px;--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, system-ui, sans-serif;--font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;--font-serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--ease:cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;margin:0;font-size:14px;line-height:1.45}button,input,select,textarea{font:inherit;color:inherit}::selection{background:#fff3}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tabular{font-variant-numeric:tabular-nums}#app{background:var(--bg);grid-template-rows:auto auto 1fr auto;height:100dvh;display:grid}.topbar{align-items:center;gap:14px;min-width:0;padding:8px 16px;display:flex}.brand{font-family:var(--font-display);letter-spacing:-.01em;flex-shrink:0;align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.brand .logo{background:linear-gradient(180deg, var(--text) 0 58%, transparent 58% 70%, var(--text) 70%);border-radius:4px;width:16px;height:16px}.topbar .spacer{flex:1}.transport{align-items:center;gap:6px;display:flex}.controls{align-items:center;gap:10px;min-width:0;display:flex}.tools{align-items:center;gap:4px;display:flex}.stage-wrap{border-top:1px solid var(--border);border-bottom:1px solid var(--border);min-height:0;position:relative;overflow:hidden}#stage,.stage-2d{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.stage-2d canvas{display:block}.statusbar{color:var(--text-muted);white-space:nowrap;scrollbar-width:none;align-items:center;gap:18px;padding:7px 16px 8px;font-size:12px;display:flex;overflow-x:auto}.statusbar::-webkit-scrollbar{display:none}@media (width<=1400px){.topbar{flex-wrap:wrap;row-gap:8px}.controls{scrollbar-width:none;flex-basis:100%;order:10;padding-bottom:2px;overflow-x:auto}.controls::-webkit-scrollbar{display:none}}@media (width<=640px){.topbar{gap:8px;padding:8px 10px}.brand span:last-child{display:none}.statusbar{gap:12px;padding:6px 10px 8px}}.icon-btn{border-radius:var(--radius-sm);width:34px;height:34px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;place-items:center;transition:background .15s,color .15s;display:inline-grid}.icon-btn:hover{background:var(--surface-hover);color:var(--text)}.icon-btn.active{color:var(--text);background:var(--surface-strong)}.icon-btn svg,.btn svg{width:17px;height:17px}.play-btn{background:var(--accent);width:38px;height:38px;color:var(--accent-ink);cursor:pointer;transition:background .15s, transform .1s var(--ease);border:0;border-radius:50%;place-items:center;display:grid}.play-btn:hover{background:var(--accent-strong)}.play-btn:active{transform:scale(.96)}.play-btn svg{width:18px;height:18px}.btn{border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:0 0;justify-content:center;align-items:center;gap:7px;height:34px;padding:0 13px;font-weight:500;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{background:var(--surface-hover)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}.btn.primary:hover{background:var(--accent-strong)}.btn.small{height:30px;padding:0 10px;font-size:13px}.btn.danger:hover{color:var(--bad);border-color:#e0606a80}.song-chip{border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:8px;min-width:0;max-width:340px;height:38px;padding:0 8px 0 10px;transition:background .15s;display:flex}.song-chip:hover{background:var(--surface-hover)}.song-chip .text{flex-direction:column;min-width:0;line-height:1.25;display:flex}.song-chip .title{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.song-chip .meta{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.song-chip svg{width:14px;height:14px;color:var(--text-faint);flex-shrink:0}.segmented{flex-shrink:0;display:inline-flex;position:relative}.segmented button{z-index:1;height:32px;color:var(--text-faint);cursor:pointer;white-space:nowrap;background:0 0;border:0;padding:0 9px;font-size:13px;font-weight:500;transition:color .15s;position:relative}.segmented button:hover{color:var(--text-muted)}.segmented button.on{color:var(--text)}.segmented .thumb{background:var(--text);clip-path:inset(0 9px);height:1.5px;transition:left .22s var(--ease), width .22s var(--ease);position:absolute;bottom:2px}.segmented button .dot{vertical-align:1px;border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.controls>*+*{border-left:1px solid var(--border);padding-left:10px}.speed{flex-shrink:0;align-items:center;gap:0;display:inline-flex}.speed button{width:26px;height:30px;color:var(--text-faint);cursor:pointer;background:0 0;border:0;border-radius:6px;font-size:15px}.speed button:hover{background:var(--surface-hover);color:var(--text)}.speed .value{text-align:center;font-variant-numeric:tabular-nums;min-width:44px;font-size:13px;font-weight:500}.timeline{cursor:pointer;touch-action:none;height:18px;margin:0 16px 2px;position:relative}.timeline .track{background:#ffffff14;border-radius:1px;height:2px;position:absolute;top:8px;left:0;right:0;overflow:hidden}.timeline .fill{background:var(--text-muted);position:absolute;top:0;bottom:0;left:0}.timeline .loop{border:1px solid var(--border-strong);background:#ffffff12;border-radius:3px;height:10px;position:absolute;top:4px}.timeline .mark{background:var(--text-muted);width:1.5px;height:12px;position:absolute;top:3px}.timeline .knob{background:var(--text);opacity:0;border-radius:50%;width:10px;height:10px;margin-left:-5px;transition:opacity .15s;position:absolute;top:4px;box-shadow:0 1px 4px #00000080}.timeline:hover .knob,.timeline.dragging .knob{opacity:1}.timeline .times{color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:11px;position:absolute;top:-11px;right:0}@media (width<=640px){.segmented button{padding:0 7px;font-size:12.5px}.segmented .thumb{clip-path:inset(0 7px)}.segmented button .dot{display:none}}.backdrop{z-index:40;opacity:0;transition:opacity .25s var(--ease);background:#00000073;position:fixed;inset:0}.backdrop.open{opacity:1}.drawer{z-index:41;border-left:1px solid var(--border-strong);background:var(--bg-raised);width:min(380px,100vw);box-shadow:var(--shadow);transition:transform .32s var(--ease);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(calc(100% + 20px))}.drawer.open{transform:none}.drawer header,.modal header{align-items:center;gap:10px;padding:14px 12px 8px 20px;display:flex}.drawer h2,.modal h2{font-family:var(--font-display);letter-spacing:-.005em;flex:1;margin:0;font-size:15px;font-weight:600}.drawer .body,.modal .body{flex:1;padding:4px 20px 20px;overflow-y:auto}@media (width<=640px){.drawer{border-left:0;border-top:1px solid var(--border-strong);border-radius:var(--radius) var(--radius) 0 0;width:auto;max-height:86dvh;inset:auto 0 0;transform:translateY(calc(100% + 20px))}}.modal{z-index:51;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-raised);width:min(760px,100vw - 24px);max-height:calc(100dvh - 32px);box-shadow:var(--shadow);opacity:0;transition:transform .28s var(--ease), opacity .2s;flex-direction:column;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-48%)scale(.98)}.modal.open{opacity:1;transform:translate(-50%,-50%)}.modal.narrow{width:min(520px,100vw - 24px)}.section-title{color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;margin:20px 0 8px;font-size:11px;font-weight:600}.section-title:first-child{margin-top:6px}.search{border:1px solid var(--border);border-radius:var(--radius-sm);background:0 0;outline:none;width:100%;height:34px;padding:0 11px}.search:focus{border-color:var(--border-strong)}.list{flex-direction:column;display:flex}.row{cursor:pointer;text-align:left;background:0 0;border:0;border-radius:0;align-items:center;gap:12px;width:100%;padding:9px 10px;transition:background .12s;display:flex}.row+.row{border-top:1px solid var(--border)}.row:hover{background:var(--surface)}.row.current{background:var(--surface);box-shadow:inset 2px 0 0 var(--text)}.row .main{flex:1;min-width:0}.row .name{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.row .sub{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.row .end{color:var(--text-muted);align-items:center;gap:6px;font-size:12px;display:flex}.row .remove{opacity:0}.row:hover .remove{opacity:1}.level{gap:2px;display:inline-flex}.level i{background:var(--surface-strong);border-radius:1px;width:3px;height:9px}.level i.on{background:var(--text-muted)}.badge{background:var(--surface-strong);color:var(--text-muted);border-radius:4px;padding:1px 6px;font-size:11px;font-weight:600}.badge.good{color:var(--good);background:#7cbf8a1f}.field{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:10px 0;display:flex}.field:last-child{border-bottom:0}.field .label{flex:1}.field .label small{color:var(--text-muted);font-size:12px;display:block}.switch{background:var(--surface-strong);cursor:pointer;border:0;border-radius:999px;flex-shrink:0;width:34px;height:20px;transition:background .2s;position:relative}.switch:after{content:"";background:var(--text-muted);width:14px;height:14px;transition:transform .2s var(--ease), background .2s;border-radius:50%;position:absolute;top:3px;left:3px}.switch.on{background:var(--accent)}.switch.on:after{background:var(--accent-ink);transform:translate(14px)}input[type=range]{width:140px;accent-color:var(--text-muted)}select{border:1px solid var(--border-strong);background:var(--bg);border-radius:6px;height:30px;padding:0 8px}.actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.note{color:var(--text-muted);margin:8px 0;font-size:12.5px}.note code,.body code{font-family:var(--font-mono);background:#ffffff12;border-radius:4px;padding:1px 5px;font-size:12px}.progress{background:var(--surface-strong);border-radius:2px;height:4px;overflow:hidden}.progress>div{background:var(--text-muted);height:100%;transition:width .2s}.monitor{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);height:150px;font-family:var(--font-mono);color:var(--text-muted);padding:8px 10px;font-size:11.5px;overflow-y:auto}.monitor div{white-space:nowrap}.monitor .device{color:var(--text-faint)}.toasts{z-index:60;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-raised);max-width:min(560px,100vw - 32px);box-shadow:var(--shadow);animation:toast-in .25s var(--ease);padding:9px 14px}.toast.error{border-color:#e0606a80}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.hud{pointer-events:none;flex-direction:column;align-items:flex-start;gap:8px;display:flex;position:absolute;top:14px;left:18px}.hud-chip{border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;background:#0e0e10cc;border-radius:6px;padding:5px 10px;font-size:13px;font-weight:500}.hud-chip[hidden]{display:none}.hud-chip.waiting{border-color:var(--border-strong);color:var(--text);animation:1.6s ease-in-out infinite breathe}.hud-chip.loading{color:var(--text-muted)}@keyframes breathe{50%{border-color:#fff6}}.welcome{z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .35s var(--ease);background:#0e0e10d6;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.welcome.gone{opacity:0;pointer-events:none}.welcome .card{text-align:center;max-width:440px}.welcome h1{font-family:var(--font-display);letter-spacing:-.02em;margin:18px 0 10px;font-size:clamp(22px,3.2vw,28px);font-weight:600;line-height:1.15}.welcome p{color:var(--text-muted);margin:0 auto 14px;font-size:14.5px}.welcome .logo-big{background:linear-gradient(180deg, var(--text) 0 58%, transparent 58% 70%, var(--text) 70%);border-radius:8px;width:36px;height:36px;margin:0 auto}.welcome .start{height:40px;padding:0 22px;font-size:14px}.welcome .hint{color:var(--text-faint);margin-top:16px;font-size:13px}.midi-line{justify-content:center;align-items:center;gap:8px;display:flex;font-size:13px!important}.led{background:var(--text-faint);border-radius:50%;width:8px;height:8px;transition:background .1s,box-shadow .1s;display:inline-block}.led.on{background:var(--good);box-shadow:0 0 6px #7cbf8a99}.statusbar .status-item{color:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:7px;margin:0 -6px;padding:2px 6px;font-size:12px;display:inline-flex}.statusbar .status-item:hover{background:var(--surface);color:var(--text)}.statusbar .faint{color:var(--text-faint)}.pedals{gap:4px;display:inline-flex}.pedal-pill{border:1px solid var(--border);color:var(--text-faint);border-radius:4px;padding:1px 7px;font-size:11px;transition:all .1s}.pedal-pill.on{color:var(--pedal);background:#a99fd024;border-color:#a99fd073}.ok-line{color:var(--good);align-items:center;gap:8px;display:flex}.ok-line svg{width:17px;height:17px}.err{color:var(--bad)}.score{align-items:center;gap:18px;margin-bottom:16px;display:flex}.score .big{font-family:var(--font-display);letter-spacing:-.04em;font-size:52px;font-weight:600;line-height:1}.stars span{color:var(--surface-strong);font-size:20px}.stars span.on{color:var(--warn)}.score .sub{color:var(--text-muted);font-size:13px}.categories{gap:14px;display:grid}.category .head{justify-content:space-between;font-weight:600;display:flex}.category .bar{background:var(--surface-strong);border-radius:3px;height:4px;margin:6px 0;overflow:hidden}.category .bar div{background:var(--text-muted);border-radius:3px;height:100%}.category p{color:var(--text-muted);margin:0;font-size:13px}.touch-chart{margin-top:18px}.touch-chart .head{justify-content:space-between;margin-bottom:6px;font-weight:600;display:flex}.touch-chart .legend{color:var(--text-muted);align-items:center;gap:6px;font-size:12px;font-weight:500;display:flex}.touch-chart .legend i.line{background:linear-gradient(90deg, var(--left) 50%, var(--right) 50%);width:14px;height:2px}.touch-chart .legend i.dot{background:var(--text-muted);border-radius:50%;width:6px;height:6px;margin-left:8px}.touch-chart .legend i.dot.off{box-shadow:0 0 0 1.5px var(--bad);background:0 0}.touch-chart svg{border-radius:var(--radius-sm);background:var(--bg);width:100%;height:auto;display:block}.touch-chart .target{fill:none;opacity:.8;stroke-width:2px;vector-effect:non-scaling-stroke}.touch-chart .grid line{stroke:#ffffff0d;vector-effect:non-scaling-stroke}.touch-chart .grid text{fill:var(--text-faint);font:italic 10px var(--font-serif)}.dropzone{z-index:70;border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;text-align:center;background:#0e0e10db;border:1.5px dashed #ffffff4d;place-items:center;display:grid;position:fixed;inset:12px}.dropzone strong{margin-bottom:6px;font-size:19px;font-weight:600;display:block}.dropzone span{color:var(--text-muted)}