:root{color-scheme:dark;--bg: #12131a;--panel: #1b1d27;--surface: #232633;--surface-hover: #20232f;--line: #2c2f3d;--text: #e8e9ef;--muted: #8f94a8;--accent: #6ea8fe;--on-accent: #10131c;--ok: #58c98a;--err: #e2707a;--err-bg: #241a1d;--ring: rgba(110, 168, 254, .55);--shadow: 0 1px 2px rgba(0, 0, 0, .4);--bloom-a: 110 168 254;--bloom-b: 88 201 138;--bloom-c: 148 130 255;--bloom-strength: .3;--noise-opacity: .035;--score-bg: #14161d;--score-edge: rgba(255, 255, 255, .06);--playhead: #6ea8fe;--playhead-fade: rgba(110, 168, 254, 0);--playhead-glow: rgba(110, 168, 254, .35);--cursor-bar: rgba(174, 199, 240, .08);--cursor-beat: rgba(110, 168, 254, .9);--selection: rgba(110, 168, 254, .14);--highlight: #9ec5ff;--dur: .16s;--dur-slow: .22s;--ease: cubic-bezier(.22, .61, .36, 1);--ease-out: cubic-bezier(.16, 1, .3, 1)}:root[data-theme=light]{color-scheme:light;--bg: #f2f3f7;--panel: #ffffff;--surface: #eef0f5;--surface-hover: #e6e9f1;--line: #dcdfe8;--text: #1b1d27;--muted: #5f6478;--accent: #2563eb;--on-accent: #ffffff;--ok: #17915a;--err: #c0343f;--err-bg: #fdecee;--ring: rgba(37, 99, 235, .45);--shadow: 0 1px 2px rgba(20, 25, 45, .08);--bloom-a: 37 99 235;--bloom-b: 23 145 90;--bloom-c: 124 92 240;--bloom-strength: .16;--noise-opacity: .02;--score-bg: #f7f7f4;--score-edge: rgba(20, 25, 45, .08);--playhead: #2563eb;--playhead-fade: rgba(37, 99, 235, 0);--playhead-glow: rgba(37, 99, 235, .28);--cursor-bar: rgba(37, 99, 235, .07);--cursor-beat: rgba(37, 99, 235, .85);--selection: rgba(37, 99, 235, .12);--highlight: #1d4ed8}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;color:var(--text);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background-color:var(--bg);transition:background-color var(--dur-slow) var(--ease),color var(--dur-slow) var(--ease)}body:after{content:"";position:fixed;inset:-30%;z-index:-2;pointer-events:none;background-repeat:no-repeat;will-change:transform;animation:drift 54s var(--ease) infinite alternate both;background-image:radial-gradient(52% 46% at 20% 8%,rgb(var(--bloom-a) / var(--bloom-strength)),rgb(var(--bloom-a) / calc(var(--bloom-strength) * .55)) 30%,rgb(var(--bloom-a) / calc(var(--bloom-strength) * .2)) 52%,rgb(var(--bloom-a) / 0) 72%),radial-gradient(46% 42% at 82% 16%,rgb(var(--bloom-c) / calc(var(--bloom-strength) * .85)),rgb(var(--bloom-c) / calc(var(--bloom-strength) * .4)) 32%,rgb(var(--bloom-c) / 0) 68%),radial-gradient(64% 44% at 52% 96%,rgb(var(--bloom-b) / calc(var(--bloom-strength) * .6)),rgb(var(--bloom-b) / calc(var(--bloom-strength) * .24)) 36%,rgb(var(--bloom-b) / 0) 70%)}@keyframes drift{0%{transform:translate3d(-1.6%,-1.2%,0) scale(1.04)}to{transform:translate3d(1.6%,1.4%,0) scale(1.11)}}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--noise-opacity);transition:opacity var(--dur-slow) var(--ease);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}#app{max-width:1760px;margin:0 auto;padding:20px 28px 32px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.topbar{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}.topbar h1{font-size:20px;margin:0;letter-spacing:-.01em}.subtitle{color:var(--muted);font-size:13px}.icon-button{margin-left:auto;align-self:center;display:inline-grid;place-items:center;width:34px;height:34px;padding:0;font-size:15px;line-height:1;border-radius:9px}.icon-button:hover{background:var(--surface-hover);transform:rotate(-12deg)}.icon-button:active{transform:rotate(-12deg) scale(.94)}[data-theme-icon]:before{content:"☀︎"}:root[data-theme=light] [data-theme-icon]:before{content:"☾︎"}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow);transition:background-color var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:40px;border:1.5px dashed var(--line);border-radius:8px;cursor:pointer;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--surface-hover);box-shadow:inset 0 0 0 1px var(--ring)}.dropzone span{color:var(--muted);font-size:13px}.dropzone .limit{font-size:11px;opacity:.75}.row{display:flex;gap:16px;margin-top:16px}.row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}select,button,input[type=range]{font:inherit}input[type=range]{accent-color:var(--accent)}select{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 8px;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}select:hover{border-color:var(--accent)}button{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:7px 14px;cursor:pointer;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}button:hover{border-color:var(--accent)}button:active{transform:translateY(1px)}button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600;min-width:76px}button.primary:hover{filter:brightness(1.08)}.toggle{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--dur) var(--ease)}.toggle:hover{color:var(--text)}.toggle input{appearance:none;-webkit-appearance:none;position:relative;flex:none;margin:0;width:34px;height:20px;border-radius:999px;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}.toggle input:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}.toggle:hover input{border-color:var(--accent)}.toggle input:checked{background:var(--accent);border-color:var(--accent)}.toggle input:checked:after{transform:translate(16px);background:var(--on-accent)}.toggle input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.progress-bar{height:3px;margin:14px 0 6px;border-radius:999px;background:var(--surface);overflow:hidden}.progress-bar span{display:block;height:100%;width:40%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:sweep 1.5s var(--ease) infinite}@keyframes sweep{0%{transform:translate(-110%)}to{transform:translate(360%)}}#stage-list{list-style:none;padding:0;margin:12px 0}#stage-list li{display:flex;align-items:center;gap:10px;padding:4px 0;color:var(--muted);transition:color var(--dur-slow) var(--ease)}#stage-list li{animation:rise-row .42s var(--ease-out) both}#stage-list li:nth-child(1){animation-delay:30ms}#stage-list li:nth-child(2){animation-delay:75ms}#stage-list li:nth-child(3){animation-delay:.12s}#stage-list li:nth-child(4){animation-delay:165ms}#stage-list li:nth-child(5){animation-delay:.21s}#stage-list li:nth-child(6){animation-delay:255ms}#stage-list li:nth-child(7){animation-delay:.3s}#stage-list li.done{color:var(--ok)}#stage-list li.active{color:var(--text)}#stage-list li:before{content:"○";width:14px;height:14px;flex:none;display:inline-flex;align-items:center;justify-content:center}#stage-list li.done:before{content:"●";animation:pop var(--dur) var(--ease)}#stage-list li.active:before{content:"";width:13px;height:13px;box-sizing:border-box;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes pop{0%{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}.hint{color:var(--muted);font-size:12px}#error{color:var(--err);white-space:pre-wrap;font-size:12px;background:var(--err-bg);padding:12px;border-radius:6px}@keyframes rise{0%{opacity:0;transform:translateY(14px) scale(.988)}to{opacity:1;transform:none}}.panel:not([hidden]){animation:rise .42s var(--ease-out) both;margin-block:auto}.segmented{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented label{padding:6px 12px;font-size:12px;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;border-right:1px solid var(--line);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}.segmented label:last-of-type{border-right:0}.segmented label:hover{color:var(--text)}.segmented input:checked+label{background:var(--accent);color:var(--on-accent);font-weight:600}.segmented input:focus-visible+label{outline:2px solid var(--ring);outline-offset:-2px}.stats{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font-size:12px}.stats dt{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:10px;align-self:center}.stats dd{margin:0 0 0 6px;color:var(--text);font-variant-numeric:tabular-nums;align-self:center}.player:fullscreen{border-radius:0;border:0;margin:0;padding:20px 28px;background:var(--bg);display:flex;flex-direction:column;justify-content:center}.player:fullscreen .viewport{max-height:none;flex:1 1 auto}.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex:none}.spinner-lg{width:46px;height:46px;border-width:3px}@keyframes spin{to{transform:rotate(1turn)}}@keyframes fade-in{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}@keyframes veil{0%{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{opacity:1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}@keyframes rise-row{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:none}}.working{display:flex;align-items:center;gap:16px;animation:fade-in .46s var(--ease-out) both}.working h2{margin:0}.switching{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:color-mix(in srgb,var(--score-bg) 88%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:veil .3s var(--ease-out) both}.switching p{margin:0}#switching-label{font-weight:600}.score-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.score-head h2{margin:0;font-size:16px}.viewport{position:relative;overflow:hidden;background:var(--score-bg);border:1px solid var(--score-edge);border-radius:8px;height:auto;min-height:240px;max-height:88vh;padding:12px;transition:background-color var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)}.track{display:inline-block;min-width:100%;will-change:transform;transform-origin:0 0}.playhead{position:absolute;top:0;bottom:0;left:30%;width:2px;margin-left:-1px;pointer-events:none;z-index:2;background:linear-gradient(to bottom,var(--playhead-fade) 0%,var(--playhead) 10%,var(--playhead) 90%,var(--playhead-fade) 100%);box-shadow:0 0 10px 1px var(--playhead-glow);transition:background var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)}.controls{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}.controls.secondary{border-top:1px solid var(--line);padding-top:14px;transition:border-color var(--dur-slow) var(--ease)}.time{font-variant-numeric:tabular-nums;color:var(--muted);min-width:92px}.seek{flex:1;min-width:200px}.badge{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;color:var(--muted);transition:background-color var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)}.control{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}.control output{color:var(--text);font-variant-numeric:tabular-nums}.at-cursor-bar{background:var(--cursor-bar)}.at-cursor-beat{display:none}.at-selection div{background:var(--selection)}.at-highlight>*{fill:var(--highlight);stroke:var(--highlight)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.icon-button:hover,.icon-button:active,button:active{transform:none}.working,.switching,.panel,#stage-list li{opacity:1!important;transform:none!important;animation-delay:0ms!important}body:after{animation:none;transform:none}}@media(prefers-reduced-motion:reduce){.progress-bar span{width:100%;transform:none;opacity:.45;background:var(--accent)}#stage-list li.active:before{border-top-color:var(--accent)}}