*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#06060e;--surface:#0b0d18d6;--surface-hi:#0a0c16f5;--border:#ffffff12;--border-hi:#ffffff1f;--text:#f4f4fb;--text-muted:#b0b4d4;--text-dim:#6c7298;--accent:#f97316;--accent-soft:#f9731629;--accent-glow:#f973164d;--red:#ef44441a;--red-border:#ef444438;--red-text:#fca5a5;--r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:22px;--r-pill:999px;--keyboard-h:120px;--hud-gap:28px;--font:"Inter", system-ui, sans-serif;--font-display:"Instrument Serif", ui-serif, Georgia, serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;font-size:13px;line-height:1.5;overflow:hidden}#app{width:100vw;height:100svh;min-height:100vh;position:relative}#pianoroll{touch-action:none;width:100%;height:100%;display:block}#ui-overlay{pointer-events:none;position:absolute;inset:0}.hidden{display:none!important}#dropzone{z-index:100;opacity:1;pointer-events:none;transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);justify-content:center;align-items:center;padding:28px;display:flex;position:absolute;inset:0}#dropzone:not(.dz--hidden) .home-card,#dropzone:not(.dz--hidden) .home-primary-btn,#dropzone:not(.dz--hidden) .home-secondary-btn,#dropzone:not(.dz--hidden) input{pointer-events:auto}#dropzone.dz--hidden{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s;transform:scale(.97)}#dropzone:before{content:"";background:radial-gradient(circle at 35% 35%, var(--accent-soft), transparent 34%), radial-gradient(circle at 70% 60%, #ffffff0a, transparent 42%);pointer-events:none;border-radius:50%;width:min(86vw,920px);height:min(86vw,920px);position:absolute}.home-card{z-index:1;-webkit-backdrop-filter:blur(34px)saturate(132%);width:min(620px,100vw - 48px);transition:border-color .3s, box-shadow .3s, transform .3s var(--ease-spring);background:linear-gradient(145deg,#0c0f1cf0,#070812e6),#06060ed6;border:1px solid #ffffff14;border-radius:28px;flex-direction:column;align-items:flex-start;gap:14px;padding:44px 44px 30px;display:flex;position:relative;box-shadow:0 28px 72px #000000ad,inset 0 1px #ffffff0d,inset 0 0 48px #ffffff04}#dropzone.drag-over .home-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 80px var(--accent-glow), 0 40px 100px #000000b3, inset 0 0 48px var(--accent-soft);transform:scale(1.015)}.home-title{font-family:var(--font-display);color:var(--text);letter-spacing:-.02em;font-size:clamp(44px,6vw,76px);font-weight:400;line-height:.94}.home-title em{color:var(--accent);font-style:italic;font-weight:400}.home-kicker{border-radius:var(--r-pill);color:var(--text-muted);letter-spacing:.14em;text-transform:uppercase;background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:6px;padding:5px 10px;font-size:10.5px;font-weight:500;display:inline-flex}.home-kicker:before{content:"";background:var(--accent);width:6px;height:6px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%;animation:2.4s ease-in-out infinite pulse-dot;display:inline-block}@keyframes pulse-dot{0%,to{opacity:.5}50%{opacity:1}}.home-sub{color:var(--text-muted);max-width:38ch;margin-top:2px;font-size:15px;line-height:1.5}.home-footnotes{flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;display:flex}.home-samples{flex-direction:column;gap:8px;width:100%;margin-top:10px;display:flex}.home-samples-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);font-size:10.5px;font-weight:500}.samples-grid{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}.sample-card{--sample-accent:var(--accent);background:linear-gradient(145deg, color-mix(in srgb, var(--sample-accent) 16%, #12121ce6), color-mix(in srgb, var(--sample-accent) 4%, #0a0a12eb));color:var(--text);font-family:var(--font);cursor:pointer;text-align:left;transition:border-color .18s, transform .16s var(--ease-spring), box-shadow .18s;border:1px solid #ffffff14;border-radius:14px;flex-direction:column;gap:8px;padding:12px 13px 11px;display:flex;position:relative;overflow:hidden}.sample-card:before{content:"";background:radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--sample-accent) 28%, transparent) 0%, transparent 70%);pointer-events:none;opacity:.65;position:absolute;inset:0}.sample-card:hover{border-color:color-mix(in srgb, var(--sample-accent) 55%, transparent);box-shadow:0 12px 32px -12px color-mix(in srgb, var(--sample-accent) 45%, transparent);transform:translateY(-2px)}.sample-card:active{transform:translateY(0)}.sample-card-viz{width:100%;height:56px;margin-top:2px;position:relative;overflow:visible}.sample-card-viz:before{content:"";background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--sample-accent) 50%, transparent) 20%, color-mix(in srgb, var(--sample-accent) 50%, transparent) 80%, transparent);opacity:.5;height:1px;position:absolute;bottom:0;left:0;right:0}.sample-card-bars{height:100%;filter:drop-shadow(0 2px 10px color-mix(in srgb, var(--sample-accent) 30%, transparent));justify-content:space-between;align-items:flex-end;gap:2px;padding:0 1px;display:flex;position:relative}.sample-card-bars span{min-width:2px;height:var(--h,30%);background:linear-gradient(180deg, color-mix(in srgb, var(--sample-accent) 100%, transparent) 0%, color-mix(in srgb, var(--sample-accent) 70%, transparent) 45%, color-mix(in srgb, var(--sample-accent) 25%, transparent) 100%);transform-origin:bottom;transition:height .45s var(--ease-spring), transform .35s var(--ease-spring), filter .25s ease-out, opacity .25s ease-out;border-radius:2px 2px 1px 1px;flex:1;position:relative}.sample-card-bars span:after{content:"";background:color-mix(in srgb, var(--sample-accent) 80%, #fff 40%);opacity:.85;border-radius:2px 2px 0 0;height:1.5px;position:absolute;top:0;left:0;right:0}.sample-card:hover .sample-card-bars{filter:drop-shadow(0 3px 14px color-mix(in srgb, var(--sample-accent) 55%, transparent))}.sample-card:hover .sample-card-bars span{animation:1.4s ease-in-out infinite sample-bar-breathe;animation-delay:var(--d,0s)}@keyframes sample-bar-breathe{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.92;transform:scaleY(1.12)}}.sample-card-meta{flex-direction:column;gap:1px;min-width:0;display:flex;position:relative}.sample-card-title{letter-spacing:-.01em;color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;font-weight:600;overflow:hidden}.sample-card-sub{color:var(--text-muted);letter-spacing:.01em;font-size:10.5px}.home-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.home-primary-btn,.home-secondary-btn{min-height:46px;font-family:var(--font);letter-spacing:-.01em;cursor:pointer;transition:transform .16s var(--ease-spring), color .16s, background .16s, border-color .16s, box-shadow .16s;border-radius:14px;justify-content:center;align-items:center;gap:9px;padding:0 18px;font-size:13px;font-weight:600;display:inline-flex}.home-primary-btn{background:var(--accent);color:#f8f8ff;box-shadow:0 10px 28px var(--accent-glow);border:1px solid #0000}.home-primary-btn:hover{box-shadow:0 14px 34px var(--accent-glow);transform:translateY(-1px)}.home-secondary-btn{color:var(--text);background:#ffffff0a;border:1px solid #ffffff14}.home-secondary-btn:hover{background:#ffffff0f;border-color:#ffffff24;transform:translateY(-1px)}.home-secondary-btn--learn{position:relative}.home-learn-badge{letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--accent);box-shadow:0 2px 8px var(--accent-glow);pointer-events:none;border-radius:4px;padding:2px 6px;font-size:8.5px;font-weight:700;line-height:1.5;position:absolute;top:-7px;right:-4px}.home-midi-status{border-radius:var(--r-pill);min-height:36px;color:var(--text-muted);background:#ffffff09;border:1px solid #ffffff12;align-items:center;padding:0 14px;font-size:12px;display:inline-flex}.home-midi-status[data-midi-status=connected]{color:var(--accent);border-color:var(--accent-glow);background:var(--accent-soft)}.home-midi-status[data-midi-status=blocked]{color:#ffd89c;background:#ffc55e1a;border-color:#ffc55e47}.home-drop-hint{color:var(--text-dim);flex-wrap:wrap;align-items:center;gap:4px;font-size:11.5px;display:inline-flex}.home-drop-hint code,.home-drop-hint kbd{font-family:var(--font-mono);color:var(--text-muted);background:#ffffff0d;border:1px solid #ffffff14;border-radius:5px;padding:1px 5px;font-size:10.5px;font-weight:500}.home-drop-hint kbd{text-align:center;min-width:18px;margin:0 1px}.home-meta-links{justify-content:center;align-items:center;gap:4px;margin:2px auto 0;display:flex}.home-meta-link{width:30px;height:30px;color:var(--text-muted);opacity:.72;border-radius:50%;justify-content:center;align-items:center;transition:opacity .2s,color .2s,background .2s;display:inline-flex}.home-meta-link:hover,.home-meta-link:focus-visible{color:var(--text);opacity:1;background:#ffffff0d;outline:none}#dropzone.dropzone--touch .home-meta-links{margin-top:0}@media (width<=1280px){.ts-home-name{display:none}}@media (width<=1120px){.home-card{gap:14px;width:min(100%,100vw - 32px);padding:32px 26px 22px}.ts-status-kicker{display:none}.ts-status-title{max-width:220px}.theme-label,.ts-instrument-label{display:none}.ts-end{gap:4px}.ts-pill{padding:0 11px}}@media (width<=1023px){#ts-open>span+span{display:none}#ts-open{gap:0;padding:0 9px}.ts-mode-seg:not(.is-active) .ts-mode-label{display:none}.ts-mode-seg{min-width:0;padding:0 11px}.ts-status{justify-self:start}}@media (width<=899px){#top-strip{padding:0 6px 0 10px;top:10px;left:10px;right:10px}.ts-pill>span+span{display:none}.ts-pill{gap:0;padding:0 9px}.ts-midi-label{display:none}.ts-status-title{max-width:150px;font-size:12px}.ts-pill--instrument>svg{display:none}.ts-sep{margin:0 2px}}@media (width<=679px){.ts-status-main,.ts-bars{display:none}.ts-status{gap:0;padding:0 4px}.ts-mode-seg .ts-mode-label{display:none}.ts-mode-seg{min-width:0;padding:0 9px}.ts-record-btn>span+span{display:none}.ts-record-btn{padding:0 10px}#top-strip{padding:0 6px 0 8px}.ts-end{gap:3px}}@media (width<=519px){#top-strip{gap:4px;padding:0 4px 0 6px}.ts-sep{display:none}.ts-mode-seg{padding:0 7px}.ts-pill{height:30px;padding:0 7px}.ts-record-btn{padding:0 8px}}@media (width<=640px){#dropzone{padding:16px}.home-card{border-radius:24px;padding:26px 20px 18px}.home-title{font-size:28px}.home-sub{font-size:14px}.home-actions{flex-direction:column;align-items:stretch;width:100%}.home-primary-btn,.home-secondary-btn{width:100%}#hud{width:min(100vw - 20px,760px)}.hud-bar{flex-wrap:wrap;justify-content:center}.hud-drag-handle{order:-1}.scrubber-wrap{order:2;width:100%}.hud-divider{display:none}}#top-strip{top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));-webkit-backdrop-filter:blur(30px)saturate(145%);z-index:20;pointer-events:none;opacity:0;height:54px;transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);background:#070912c7;border:1px solid #ffffff12;border-radius:18px;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(6px,1vw,12px);padding:0 8px 0 14px;display:grid;position:absolute;transform:translateY(-6px);box-shadow:0 20px 48px #00000057,inset 0 1px #ffffff0a}#top-strip.strip--active{opacity:1;pointer-events:auto;transform:none}#top-strip.strip--dim{opacity:.16;pointer-events:none}.ts-end{flex-shrink:0;justify-content:flex-end;align-items:center;gap:6px;display:flex}.ts-home{height:38px;color:var(--text);font-family:var(--font);letter-spacing:-.015em;cursor:pointer;background:0 0;border:none;border-radius:12px;align-items:center;gap:10px;padding:0 12px 0 6px;font-size:13.5px;font-weight:600;transition:background .15s,color .15s;display:inline-flex}.ts-home:hover{background:#ffffff0a}.ts-home-mark{color:var(--accent);transition:transform .25s var(--ease-spring);flex-shrink:0}.ts-home:hover .ts-home-mark{transform:rotate(-4deg)scale(1.05)}.ts-home-name{white-space:nowrap}.ts-mode-switch{border-radius:var(--r-pill);background:#ffffff09;border:1px solid #ffffff0f;align-items:center;height:32px;padding:3px;display:inline-flex;position:relative}.ts-mode-seg{z-index:1;min-width:66px;height:26px;color:var(--text-dim);font-family:var(--font);letter-spacing:-.005em;border-radius:var(--r-pill);cursor:pointer;transition:color .18s var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;gap:7px;padding:0 13px;font-size:12px;font-weight:500;display:inline-flex;position:relative}.ts-mode-seg:hover{color:var(--text-muted)}.ts-mode-seg.is-active{color:#fff;font-weight:600}.ts-mode-seg.is-active:hover{color:#fff}.ts-mode-icon{color:currentColor;opacity:.75;transition:color .18s var(--ease-out), opacity .18s var(--ease-out);align-items:center;display:inline-flex}.ts-mode-seg:hover .ts-mode-icon{opacity:.95}.ts-mode-seg.is-active .ts-mode-icon{color:var(--accent);opacity:1}.ts-mode-thumb{border-radius:var(--r-pill);opacity:0;pointer-events:none;width:calc(50% - 3px);transition:transform .26s var(--ease-spring), opacity .18s var(--ease-out);background:linear-gradient(#ffffff24,#ffffff14);position:absolute;top:3px;bottom:3px;left:3px;box-shadow:inset 0 1px #ffffff24,inset 0 -1px #0000002e,0 2px 6px #00000047}.ts-mode-switch[data-active=play] .ts-mode-thumb{opacity:1;transform:translate(0)}.ts-mode-switch[data-active=live] .ts-mode-thumb{opacity:1;transform:translate(100%)}.ts-mode-switch[data-active=learn] .ts-mode-thumb{opacity:0;transform:translate(0)}.learn-host{pointer-events:none;position:absolute;inset:0}.learn-host--hub{pointer-events:auto;flex-direction:column;display:flex;overflow:hidden}.learn-host--exercise{flex-direction:column;justify-content:flex-end;display:flex}.learn-host--hidden{display:none}.learn-hub{color:var(--text);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.learn-hub__glow{pointer-events:none;background:radial-gradient(800px 400px at 70% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), radial-gradient(600px 400px at 10% 10%, #788cff1a, transparent 60%);z-index:0;position:absolute;inset:-20% -20% 40%}.learn-hub__topbar{z-index:1;padding:calc(80px + env(safe-area-inset-top)) 40px 12px;justify-content:flex-end;align-items:center;display:flex;position:relative}.learn-hub__scroll{z-index:1;overscroll-behavior:contain;scrollbar-width:none;flex:1;min-height:0;position:relative;overflow-y:auto}.learn-hub__scroll::-webkit-scrollbar{display:none}.learn-hub__inner{flex-direction:column;gap:26px;max-width:1080px;margin:0 auto;padding:28px 40px 48px;display:flex}.learn-hub__streak{align-items:center;display:flex}.streak-row{border:1px solid var(--border);color:var(--text);cursor:default;background:#ffffff0a;border-radius:999px;align-items:center;gap:10px;padding:9px 14px;display:inline-flex}.streak-row__flame{background:color-mix(in srgb, var(--accent) 25%, transparent);width:22px;height:22px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.streak-row__count{font:700 16px / 1 var(--font);letter-spacing:-.02em;tab-size:4;font-variant-numeric:tabular-nums}.streak-row__label{font:500 11px / 1 var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.streak-row__dots{border-left:1px solid #ffffff14;gap:3px;margin-left:4px;padding-left:10px;display:inline-flex}.streak-dot{background:#ffffff1f;border-radius:50%;width:6px;height:6px;display:inline-block}.streak-dot--filled{background:var(--accent);box-shadow:0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)}.streak-dot--today{outline-offset:1px;outline:1px solid #ffffff4d}.hero-card{border:1px solid var(--border);background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%), #ffffff09;color:var(--text);font:inherit;text-align:left;border-radius:18px;grid-template-columns:60px 1fr auto;align-items:center;gap:20px;padding:22px 24px;display:grid;box-shadow:inset 0 1px #ffffff0a,0 10px 30px #0003}.hero-card__badge{background:color-mix(in srgb, var(--accent) 22%, transparent);width:56px;height:56px;color:var(--accent);border-radius:14px;justify-content:center;align-items:center;display:inline-flex}.hero-card__badge svg{width:28px;height:28px}.hero-card__body{flex-direction:column;gap:4px;display:flex}.hero-card__kicker{font:600 10.5px / 1 var(--font);color:var(--accent);text-transform:uppercase;letter-spacing:.12em}.hero-card__title{font:700 22px / 1.15 var(--font);letter-spacing:-.01em;margin:0}.hero-card__blurb{font:400 13px / 1.5 var(--font);color:var(--text-muted);max-width:520px;margin:0}.hero-card__hint{font:400 12px / 1.4 var(--font);color:color-mix(in srgb, var(--accent) 70%, var(--text-muted));margin:4px 0 0}.hero-card__actions{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.hero-card__primary{background:var(--accent);color:#0a0a14;font:600 13px / 1 var(--font);cursor:pointer;box-shadow:0 10px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent), 0 1px 0 #ffffff4d inset;transition:transform .15s var(--ease-spring), filter .15s ease, box-shadow .2s ease;border:none;border-radius:999px;align-items:center;gap:10px;padding:11px 18px;display:inline-flex}.hero-card__primary:hover{filter:brightness(1.08);box-shadow:0 14px 34px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 1px 0 #ffffff4d inset;transform:translateY(-1px)}.hero-card__primary:active{transform:translateY(0)scale(.98)}.hero-card__primary-icon{align-items:center;display:inline-flex}.hero-card__secondary{border:1px solid var(--border);color:var(--text-muted);font:600 11.5px / 1 var(--font);cursor:pointer;background:#ffffff0a;border-radius:999px;align-items:center;gap:8px;padding:7px 12px;transition:color .15s,background .15s,border-color .15s;display:inline-flex}.hero-card__secondary:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff14}.learn-hub__grid-label{font:600 10.5px / 1 var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.14em;margin-top:6px}.learn-hub__grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;display:grid}.ex-card{text-align:left;border:1px solid var(--border);color:var(--text);font:inherit;cursor:pointer;transition:transform .15s var(--ease-spring), border-color .2s ease, background .2s ease, box-shadow .2s ease;background:#ffffff08;border-radius:14px;flex-direction:column;gap:10px;min-height:128px;padding:18px;display:flex;position:relative}.ex-card:hover:not(.ex-card--coming){border-color:color-mix(in srgb, var(--accent) 35%, var(--border));background:#ffffff0d;transform:translateY(-2px);box-shadow:0 14px 30px -12px #00000059}.ex-card:active:not(.ex-card--coming){transform:translateY(0)}.ex-card__icon{width:36px;height:36px;color:var(--text-muted);background:#ffffff0d;border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.ex-card__icon svg{width:20px;height:20px}.ex-card:hover:not(.ex-card--coming) .ex-card__icon{color:var(--accent);background:color-mix(in srgb, var(--accent) 18%, transparent)}.ex-card__title{font:600 15px / 1.2 var(--font);letter-spacing:-.005em}.ex-card__blurb{font:400 12.5px / 1.45 var(--font);color:var(--text-muted)}.ex-card--coming{opacity:.55;cursor:default}.float-hud.pa-hud{align-items:flex-start;width:min(720px,100vw - 24px);height:auto;padding:10px 14px 12px 0}.float-hud.pa-hud>.float-hud__sep{display:none}.pa-hud__body{flex:1;grid-template:"transport meta""options options"/minmax(0,1fr) auto;align-items:center;gap:8px 12px;min-width:0;display:grid}.pa-hud__transport{grid-area:transport;align-items:center;gap:12px;min-width:0;display:flex}.pa-hud__scrub{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.pa-hud__meta{grid-area:meta;align-items:center;gap:10px;display:inline-flex}.pa-hud__options{border-top:1px solid #ffffff0a;flex-wrap:wrap;grid-area:options;justify-content:center;align-items:center;gap:10px;padding-top:6px;display:flex}.pa-hud__play{background:var(--accent);color:#0a0a14;cursor:pointer;width:32px;height:32px;box-shadow:0 6px 16px -4px color-mix(in srgb, var(--accent) 60%, transparent), 0 1px 0 #ffffff40 inset;transition:transform .12s var(--ease-spring);border:none;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.pa-hud__play:hover{transform:scale(1.05)}.pa-hud__play:active{transform:scale(.96)}.pa-hud__play-icon--pause,.pa-hud__play.is-playing .pa-hud__play-icon--play{display:none}.pa-hud__play.is-playing .pa-hud__play-icon--pause{display:inline}.pa-hud__time{font:600 12px / 1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;text-align:center;flex-shrink:0;min-width:38px}.pa-hud__time--muted{color:var(--text-muted);font-weight:500}.pa-hud__scrubber-wrap{flex:120px;align-items:center;min-width:80px;display:flex;position:relative}.pa-hud__scrubber-wrap:before{content:"";pointer-events:none;background:0 0;border-radius:999px;position:absolute;inset:0}.pa-hud__scrubber-wrap--loop:before{background: linear-gradient(to right, transparent calc(var(--loop-b-pct,0%) - .5px), #f3c36c8c calc(var(--loop-b-pct,0%) - .5px), #f3c36c8c calc(var(--loop-b-pct,0%) + .5px), transparent calc(var(--loop-b-pct,0%) + .5px)),  linear-gradient(to bottom, transparent calc(50% - 2px), #f3c36c1f calc(50% - 2px), #f3c36c1f calc(50% + 2px), transparent calc(50% + 2px)) var(--loop-a-pct,0%) / calc(var(--loop-b-pct,0%) - var(--loop-a-pct,0%)) 100% no-repeat}.pa-hud__scrubber-wrap--loop:after,.pa-hud__scrubber-wrap--mark:after{content:"";pointer-events:none;width:1px;height:8px;top:50%;left:var(--loop-a-pct,0%);background:#f3c36c8c;position:absolute;transform:translate(-50%,-50%)}.pa-hud__scrubber{appearance:none;cursor:pointer;background:0 0;flex:100%;min-width:0;height:18px}.pa-hud__scrubber::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct,0%), #ffffff1a var(--pct,0%), #ffffff1a 100%);border-radius:999px;height:4px}.pa-hud__scrubber::-moz-range-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct,0%), #ffffff1a var(--pct,0%), #ffffff1a 100%);border-radius:999px;height:4px}.pa-hud__scrubber::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:grab;border:2px solid #0a0a14;border-radius:50%;width:14px;height:14px;margin-top:-5px;box-shadow:0 2px 6px #0006}.pa-hud__scrubber::-moz-range-thumb{background:var(--accent);cursor:grab;border:2px solid #0a0a14;border-radius:50%;width:14px;height:14px;box-shadow:0 2px 6px #0006}.pa-hud__scrubber:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15)}.pa-hud__segmented{border:0;flex-shrink:0;align-items:center;gap:8px;min-width:0;margin:0;padding:0;display:inline-flex}.pa-hud__seg-label{font:600 10px / 1 var(--font);color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;-webkit-user-select:none;user-select:none}.pa-hud__seg-track{background:#ffffff09;border-radius:10px;align-items:center;gap:2px;padding:2px;display:inline-flex}.pa-hud__seg{font:600 11.5px / 1 var(--font);color:var(--text-muted);cursor:pointer;transition:background .15s ease, color .15s ease, box-shadow .2s ease, transform .12s var(--ease-spring);font-variant-numeric:tabular-nums;background:0 0;border:none;border-radius:7px;min-width:30px;padding:6px 10px}.pa-hud__seg:hover{color:var(--text);background:#ffffff0d}.pa-hud__seg.is-active{color:#0a0a14;background:var(--accent);box-shadow:0 2px 6px -1px color-mix(in srgb, var(--accent) 55%, transparent), 0 1px 0 #ffffff4d inset}.pa-hud__seg.is-active:hover{background:var(--accent);filter:brightness(1.06)}.pa-hud__pill{font:600 11.5px / 1 var(--font);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .12s var(--ease-spring);background:#ffffff06;border-radius:999px;flex-shrink:0;align-items:center;gap:6px;padding:6px 12px;display:inline-flex}.pa-hud__pill:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff0f}.pa-hud__pill:active{transform:scale(.97)}.pa-hud__pill[aria-pressed=true]{color:var(--text);border-color:color-mix(in srgb, var(--accent) 55%, transparent);background:color-mix(in srgb, var(--accent) 20%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset}.pa-hud__pill-sub{font:500 10.5px / 1 var(--font);color:var(--text-dim);letter-spacing:.02em;font-variant-numeric:tabular-nums}.pa-hud__loop{align-items:center;gap:2px;display:inline-flex}.pa-hud__loop--on .pa-hud__pill--loop,.pa-hud__loop--mark .pa-hud__pill--loop{border-top-right-radius:0;border-bottom-right-radius:0}.pa-hud__loop--mark .pa-hud__pill--loop{background:#f3c36c2e;border-color:#f3c36c80;animation:1.4s ease-in-out infinite pa-hud-loop-pulse}@keyframes pa-hud-loop-pulse{0%,to{box-shadow:0 0 #0000}50%{box-shadow:0 0 0 3px #f3c36c2e}}.pa-hud__loop-clear{width:26px;height:28px;color:var(--text-muted);background:color-mix(in srgb, var(--accent) 18%, transparent);border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);cursor:pointer;border-left:none;border-top-right-radius:999px;border-bottom-right-radius:999px;justify-content:center;align-items:center;padding:0;transition:color .15s,background .15s;display:none}.pa-hud__loop--on .pa-hud__loop-clear,.pa-hud__loop--mark .pa-hud__loop-clear{display:inline-flex}.pa-hud__loop-clear:hover{color:var(--text);background:color-mix(in srgb, var(--accent) 28%, transparent)}.pa-hud__icon-btn{border:1px solid var(--border);width:28px;height:28px;color:var(--text-muted);cursor:pointer;background:#ffffff0a;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.pa-hud__icon-btn:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff14}.pa-hud__icon-btn--tight{border-radius:6px;width:22px;height:22px}.pa-hud__close{margin-left:auto}.pa-hud__stats{font:600 12px / 1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:8px;display:inline-flex}.pa-hud__stat{border:1px solid var(--border);color:var(--text);background:#ffffff0a;border-radius:999px;align-items:center;gap:4px;padding:5px 8px;transition:color .2s,background .2s,border-color .2s,opacity .2s;display:inline-flex}.pa-hud__stat-glyph{font:700 11px / 1 var(--font);justify-content:center;align-items:center;display:inline-flex}.pa-hud__stat-num{font:600 12px / 1 var(--font);font-variant-numeric:tabular-nums}.pa-hud__stat-unit{font:500 11px / 1 var(--font);color:var(--text-muted)}.pa-hud__stat--streak-warm{color:#f5b773;border-color:color-mix(in srgb, #f5b773 32%, var(--border) 68%);background:#f5b7731a}.pa-hud__stat--streak-hot{color:#ffd166;border-color:color-mix(in srgb, #ffd166 50%, var(--border) 50%);background:#ffd16629}.pa-hud__stat--accuracy{padding:5px 10px;font-weight:700}.pa-hud__stats-breakdown{border-left:1px solid var(--border);align-items:center;gap:6px;padding-left:6px;display:inline-flex}.pa-hud__stat--perfect{color:#7ee2b1;border-color:color-mix(in srgb, #7ee2b1 22%, var(--border) 78%)}.pa-hud__stat--good{color:var(--text-muted)}.pa-hud__stat--error{color:#f08aa3;border-color:color-mix(in srgb, #f08aa3 22%, var(--border) 78%)}.pa-hud__stat.is-zero{opacity:.45;color:var(--text-muted);border-color:var(--border);background:0 0}@media (width<=720px){.learn-hub__topbar{padding:calc(74px + env(safe-area-inset-top)) 20px 10px}.learn-hub__inner{padding:22px 20px 32px}.hero-card{grid-template-rows:auto auto;grid-template-columns:48px 1fr}.hero-card__actions{flex-flow:wrap;grid-column:1/-1;justify-content:center;align-items:center}.learn-hub__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.float-hud.pa-hud{width:min(100vw - 16px,720px);padding:8px 12px 10px 0}.pa-hud__body{column-gap:8px}.pa-hud__seg-label{display:none}.pa-hud__options{gap:8px}.pa-hud__stats-breakdown{display:none}}.iv-card{inset:calc(90px + env(safe-area-inset-top)) 20px calc(var(--keyboard-h,120px) + var(--hud-gap,16px) + env(safe-area-inset-bottom)) 20px;border:1px solid var(--border);-webkit-backdrop-filter:blur(48px)saturate(160%);width:min(560px,100vw - 40px);color:var(--text);pointer-events:auto;background:#080810e0;border-radius:22px;flex-direction:column;gap:18px;margin:0 auto;padding:22px 24px 20px;display:flex;position:absolute;box-shadow:0 24px 64px #0000008c,0 8px 24px #0000004d,inset 0 1px #ffffff0a}.iv-card__head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.iv-card__crumb{flex-direction:column;gap:4px;display:flex}.iv-card__kicker{font:600 10.5px / 1 var(--font);color:var(--accent);text-transform:uppercase;letter-spacing:.12em}.iv-card__title{font:700 22px / 1.15 var(--font);letter-spacing:-.015em;margin:0}.iv-card__close{border:1px solid var(--border);width:30px;height:30px;color:var(--text-muted);cursor:pointer;background:#ffffff0a;border-radius:999px;justify-content:center;align-items:center;transition:color .15s,background .15s,border-color .15s;display:inline-flex}.iv-card__close:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff14}.iv-card__progress{flex-direction:column;gap:6px;display:flex}.iv-card__progress-track{background:#ffffff0f;border-radius:999px;height:3px;overflow:hidden}.iv-card__progress-fill{width:var(--pct,0%);background:linear-gradient(to right, color-mix(in srgb, var(--accent) 80%, transparent), var(--accent));height:100%;transition:width .35s var(--ease-out)}.iv-card__progress-meta{font:500 11.5px / 1 var(--font);color:var(--text-muted);justify-content:space-between;align-items:center;display:flex}.iv-card__streak{color:var(--accent);letter-spacing:.01em;font-weight:600}.iv-card__body{flex-direction:column;gap:16px;display:flex}.iv-card__prompt{flex-direction:column;gap:6px;display:flex}.iv-card__prompt-label{font:600 10.5px / 1 var(--font);color:var(--text-dim);text-transform:uppercase;letter-spacing:.14em}.iv-card__prompt-hint{font:400 13px / 1.5 var(--font);color:var(--text-muted);margin:0}.iv-card__listen{background:var(--accent);color:#0a0a14;font:600 14px / 1 var(--font);letter-spacing:-.005em;cursor:pointer;box-shadow:0 12px 32px -8px color-mix(in srgb, var(--accent) 60%, transparent), 0 1px 0 #ffffff4d inset;transition:transform .15s var(--ease-spring), filter .15s ease, box-shadow .2s ease;border:none;border-radius:999px;align-self:flex-start;align-items:center;gap:12px;padding:14px 22px;display:inline-flex}.iv-card__listen:hover{filter:brightness(1.05);transform:translateY(-1px)}.iv-card__listen:active{transform:translateY(0)scale(.97)}.iv-card__listen-glyph{background:#0a0a1426;border-radius:999px;justify-content:center;align-items:center;width:24px;height:24px;display:inline-flex}.iv-card__answers{border:0;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;min-width:0;margin:0;padding:0;display:grid}.iv-answer{border:1px solid var(--border);color:var(--text);cursor:pointer;font:inherit;text-align:center;transition:transform .15s var(--ease-spring), border-color .2s ease, background .2s ease, color .2s ease;background:#ffffff09;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:14px 10px;display:flex}.iv-answer:hover:not(:disabled){border-color:var(--border-hi);background:#ffffff0f;transform:translateY(-1px)}.iv-answer:active{transform:translateY(0)scale(.98)}.iv-answer__short{font:700 20px / 1 var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums}.iv-answer__full{font:500 11px / 1 var(--font);color:var(--text-muted)}.iv-card[data-phase=feedback] .iv-answer{cursor:default}.iv-answer.iv-answer--correct{color:var(--text);background:#92ebc336;border-color:#7ee7b8b3;box-shadow:inset 0 0 0 1px #7ee7b873}.iv-answer.iv-answer--correct .iv-answer__short{color:#7ee7b8}.iv-answer.iv-answer--wrong{animation:iv-shake .32s var(--ease-out);background:#ff838336;border-color:#ff6d6db3}@keyframes iv-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}.iv-card__feedback{border:1px solid var(--border);background:#ffffff08;border-radius:12px;flex-direction:column;gap:10px;padding:12px 14px;display:flex}.iv-card__feedback[hidden]{display:none}.iv-card__feedback-row{align-items:center;gap:10px;display:flex}.iv-card__feedback-badge{font:600 10.5px / 1 var(--font);text-transform:uppercase;letter-spacing:.1em;border-radius:999px;justify-content:center;align-items:center;padding:3px 9px;display:inline-flex}.iv-card__feedback-badge--ok{color:#7ee7b8;background:#7ee7b838}.iv-card__feedback-badge--miss{color:#ff6d6d;background:#ff6d6d38}.iv-card__feedback-copy{font:500 13px / 1.4 var(--font);color:var(--text)}.iv-card__feedback-actions{align-items:center;gap:8px;display:flex}.iv-card__ghost{border:1px solid var(--border);color:var(--text-muted);font:600 11.5px / 1 var(--font);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:6px;padding:7px 12px;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.iv-card__ghost:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff0a}.iv-card__next{background:var(--accent);color:#0a0a14;font:600 12px / 1 var(--font);cursor:pointer;transition:transform .15s var(--ease-spring), filter .15s ease;border:none;border-radius:999px;align-items:center;gap:6px;margin-left:auto;padding:8px 14px;display:inline-flex}.iv-card__next:hover{filter:brightness(1.08);transform:translateY(-1px)}.iv-card__next:active{transform:translateY(0)scale(.97)}.iv-card__foot{border-top:1px solid #ffffff0a;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;display:flex}.iv-card__score{font:700 15px / 1 var(--font);font-variant-numeric:tabular-nums;border:1px solid var(--border);background:#ffffff0a;border-radius:999px;align-items:baseline;gap:2px;padding:6px 12px;display:inline-flex}.iv-card__score-sep{color:var(--text-muted);font-weight:500}.iv-card__hint-row{font:500 11px / 1 var(--font);color:var(--text-dim);align-items:center;gap:6px;display:inline-flex}.iv-card__hint-row kbd{font-family:var(--font-mono);color:var(--text-muted);background:#ffffff0f;border:1px solid #ffffff14;border-radius:5px;padding:3px 6px;font-size:10px}@media (width<=640px){.iv-card{gap:14px;padding:18px 18px 16px}.iv-card__title{font-size:19px}.iv-card__listen{justify-content:center;align-self:stretch}.iv-card__hint-row{display:none}.iv-card__foot{justify-content:center}}.session-summary{pointer-events:auto;bottom:calc(var(--keyboard-h,120px) + 24px);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);min-width:380px;color:var(--text);animation:summary-in .26s var(--ease-out) both;background:#0a0a0fb3;border-radius:14px;padding:14px 22px;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000059}@keyframes summary-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.session-summary__row{align-items:center;gap:26px;display:flex}.session-summary__metric{flex-direction:column;gap:2px;display:flex}.session-summary__value{font:700 18px / 1 var(--font)}.session-summary__label{font:400 10.5px / 1 var(--font);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.session-summary__metric--streak .session-summary__value{color:var(--accent)}.session-summary__actions{gap:8px;margin-left:auto;display:inline-flex}.session-summary__btn{font:500 12px / 1 var(--font);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;background:#ffffff0a;border-radius:8px;padding:7px 14px}.session-summary__btn:hover{color:var(--text);background:#ffffff12}.session-summary__btn--primary{color:var(--text);background:color-mix(in srgb, var(--accent) 18%, transparent);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}.ts-status{min-width:0;max-width:520px;height:36px;color:var(--text);font-family:var(--font);justify-self:center;align-items:center;gap:10px;padding:0 14px;display:inline-flex;position:relative}.ts-status-dot{background:var(--text-dim);border-radius:50%;flex-shrink:0;width:7px;height:7px;transition:background .2s,box-shadow .2s}#top-strip[data-mode=live] .ts-status-dot{background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}#top-strip[data-mode=play] .ts-status-dot{background:var(--accent)}#top-strip.strip--playing .ts-status-dot{animation:1.8s ease-in-out infinite dot-pulse}@keyframes dot-pulse{0%,to{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 5px #0000}}.ts-status-main{flex-direction:column;align-items:flex-start;min-width:0;line-height:1.1;display:flex}.ts-status-kicker{color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;font-weight:600}.ts-status-title{color:var(--text);letter-spacing:-.015em;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-top:2px;font-size:13px;font-weight:600;overflow:hidden}.ts-bars{opacity:0;flex-shrink:0;align-items:flex-end;gap:2px;height:12px;margin-left:2px;transition:opacity .4s;display:inline-flex}#top-strip.strip--playing:not(.strip--dim) .ts-bars{opacity:.75}.ts-bars span{background:var(--accent);border-radius:1.5px;width:2px;animation:1.2s ease-in-out infinite bar-bounce;display:block}.ts-bars span:first-child{height:6px;animation-delay:0s}.ts-bars span:nth-child(2){height:11px;animation-delay:.22s}.ts-bars span:nth-child(3){height:4px;animation-delay:.1s}.ts-bars span:nth-child(4){height:8px;animation-delay:.38s}@keyframes bar-bounce{0%,to{opacity:.5;transform:scaleY(.3)}50%{opacity:1;transform:scaleY(1)}}.ts-pill{border-radius:var(--r-pill);height:32px;color:var(--text-muted);font-family:var(--font);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;transition:color .15s, background .15s, border-color .15s, transform .16s var(--ease-spring);background:0 0;border:1px solid #0000;align-items:center;gap:7px;padding:0 12px;font-size:12px;font-weight:500;display:inline-flex}.ts-pill svg{color:currentColor;flex-shrink:0}.ts-pill:hover{color:var(--text);background:#ffffff0d;border-color:#ffffff14}.ts-pill:active{transform:scale(.97)}.ts-pill--on{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-glow)}.ts-pill--on:hover{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}#top-strip[data-has-file=false] .ts-pill--file,#top-strip[data-midi-status=connected] .ts-pill--midi,#top-strip[data-midi-status=connected] .ts-sep{display:none}#top-strip[data-midi-status=unavailable] .ts-pill--midi{opacity:.35;pointer-events:none}#top-strip[data-midi-status=blocked] .ts-pill--midi{color:#ffc67a;background:#ffc67a12;border-color:#ffc67a40}.ts-midi-label{text-overflow:ellipsis;max-width:140px;overflow:hidden}.ts-sep{background:#ffffff14;flex-shrink:0;width:1px;height:18px;margin:0 4px}.ts-theme-btn{border-radius:var(--r-pill);height:34px;color:var(--text-muted);font-family:var(--font);cursor:pointer;white-space:nowrap;transition:color .15s, background .15s, border-color .15s, transform .16s var(--ease-spring);background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:8px;padding:0 12px 0 10px;font-size:12px;font-weight:500;display:inline-flex}.ts-theme-btn:hover{color:var(--text);background:#ffffff12;border-color:#ffffff24;transform:translateY(-1px)}.ts-theme-btn:active{transform:translateY(0)scale(.97)}.theme-label{letter-spacing:.02em;text-transform:uppercase;font-size:11px;font-weight:600}.theme-dot{background:var(--accent);width:9px;height:9px;box-shadow:0 0 8px var(--accent-glow);transition:background .4s var(--ease-out), box-shadow .4s;border-radius:50%;display:block}.ts-particle-icon{color:var(--accent);filter:drop-shadow(0 0 6px var(--accent-glow));align-items:center;display:inline-flex}.ts-record-btn{border-radius:var(--r-pill);background:var(--accent-soft);height:30px;color:var(--accent);font-family:var(--font);cursor:pointer;white-space:nowrap;border:1px solid #ffffff14;align-items:center;gap:5px;padding:0 12px 0 10px;font-size:12px;font-weight:500;transition:background .15s,border-color .15s,color .15s,box-shadow .2s;display:inline-flex}.ts-record-btn:hover{background:var(--accent-soft);border-color:var(--accent-glow);box-shadow:0 0 12px var(--accent-glow)}.ts-record-btn:active{transform:scale(.96)}#top-strip.strip--exporting .ts-record-btn{color:#f87171;pointer-events:none;background:#ef44441f;border-color:#ef444459}#top-strip.strip--exporting .ts-record-btn svg{animation:1.4s ease-in-out infinite record-blink}@keyframes record-blink{0%,to{opacity:1}50%{opacity:.2}}.float-hud{bottom:calc(var(--keyboard-h,120px) + var(--hud-gap,16px) + env(safe-area-inset-bottom));transform:translateX(calc(-50% + var(--hud-dx,0px))) translateY(var(--hud-dy,0px));pointer-events:auto;z-index:15;white-space:nowrap;font-family:var(--font,system-ui, sans-serif);color:#ffffffbf;-webkit-backdrop-filter:blur(48px)saturate(160%);border:1px solid var(--border);transition:opacity .35s var(--ease-out,cubic-bezier(.15, .88, .35, 1));background:#07070fed;border-radius:20px;align-items:center;gap:0;font-size:13px;display:flex;position:absolute;left:50%;box-shadow:0 24px 64px #000000bf,0 8px 24px #00000080,inset 0 1px #ffffff0b}.float-hud.float-hud--idle:not(.float-hud--pinned):not(.float-hud--dragging):not(:hover){opacity:.28}.float-hud.float-hud--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none;transition:none}.float-hud.float-hud--dragging *{cursor:grabbing!important}.float-hud__handle{border-right:1px solid var(--border);flex-shrink:0;align-items:center;gap:2px;margin-right:2px;padding:0 4px 0 10px;display:inline-flex}.float-hud__sep{background:var(--border);flex-shrink:0;width:1px;height:20px;margin:0 12px}#hud{opacity:0;pointer-events:none;max-width:min(760px,100vw - 32px);height:56px;transition:opacity .4s var(--ease-out);padding-right:14px}#hud.hud--active{opacity:1;pointer-events:auto}#hud.hud--active.float-hud--idle:not(.float-hud--pinned):not(.float-hud--dragging):not(:hover){opacity:0;pointer-events:none;transform:translateX(calc(-50% + var(--hud-dx,0px))) translateY(calc(var(--hud-dy,0px) + 14px));transition:opacity .4s var(--ease-out), transform .4s var(--ease-out)}.hud-bar{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.hud-group{align-items:center;gap:4px;display:inline-flex}#hud.hud--live .hud-group--transport,#hud:not(.hud--live) .hud-group--instrument{display:none}.hud-drag-handle{width:18px;height:22px;color:var(--text-dim);cursor:grab;background:0 0;border:none;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;margin-right:-2px;transition:color .15s,background .15s;display:inline-flex}.hud-drag-handle:hover{color:var(--text);background:#ffffff0f}.float-hud.float-hud--dragging .hud-drag-handle{cursor:grabbing}.hud-pin-btn{width:22px;height:22px;color:var(--text-dim);cursor:pointer;transition:color .15s, background .15s, transform .12s var(--ease-spring);background:0 0;border:none;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.hud-pin-btn:hover{color:var(--text);background:#ffffff0f}.hud-pin-btn:active{transform:scale(.9)}.hud-pin-btn.hud-pin-btn--on{color:var(--accent);background:var(--accent-soft);transform:rotate(-18deg)}.hud-pin-btn.hud-pin-btn--on:hover{color:var(--accent)}.btn-play{background:var(--accent);color:#fff;cursor:pointer;width:34px;height:34px;transition:filter .15s, transform .12s var(--ease-spring), box-shadow .2s;box-shadow:0 4px 16px var(--accent-glow);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn-play:hover{filter:brightness(1.18);box-shadow:0 6px 24px var(--accent-glow)}.btn-play:active{transform:scale(.9)}@keyframes playing-pulse{0%,to{box-shadow:0 4px 16px var(--accent-glow)}50%{box-shadow:0 4px 28px var(--accent-glow), 0 0 0 5px var(--accent-soft)}}#hud.hud--playing .btn-play{animation:2.8s ease-in-out infinite playing-pulse}@keyframes play-loading-spin{to{transform:rotate(360deg)}}.btn-play--loading{position:relative}.btn-play--loading:after{content:"";border:2px solid #0000;border-top-color:var(--accent);border-right-color:var(--accent);pointer-events:none;border-radius:50%;animation:.9s linear infinite play-loading-spin;position:absolute;inset:-4px}.btn-skip{color:var(--text-muted);cursor:pointer;border-radius:var(--r-sm);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:6px;transition:color .15s,background .15s;display:flex}.btn-skip:hover{color:var(--text);background:#ffffff0f}.btn-skip:active{transform:scale(.88)}.hud-divider{background:linear-gradient(to bottom, transparent, var(--border-hi), transparent);flex-shrink:0;width:1px;height:18px}.scrubber-wrap{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.time-display{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;letter-spacing:.02em;flex-shrink:0;font-size:10.5px}.time-display.dim{color:var(--text-dim)}.scrubber{appearance:none;background:linear-gradient(to right, var(--accent) 0, var(--accent) var(--pct,0%), #ffffff12 var(--pct,0%), #ffffff12 100%);border-radius:var(--r-pill);cursor:pointer;min-width:0;height:4px;transition:height .15s var(--ease-out), box-shadow .15s var(--ease-out);outline:none;flex:1;box-shadow:inset 0 1px 1px #00000059}.scrubber:hover{height:6px}.scrubber:focus-visible{box-shadow:inset 0 1px 1px #00000059, 0 0 0 3px var(--accent-soft)}.scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;box-shadow:0 0 0 2.5px var(--accent-soft), 0 2px 6px #00000080;cursor:pointer;transition:transform .14s var(--ease-spring), box-shadow .14s var(--ease-out);background:#fff;border:none;border-radius:50%}.scrubber::-moz-range-thumb{width:14px;height:14px;box-shadow:0 0 0 2.5px var(--accent-soft), 0 2px 6px #00000080;cursor:pointer;transition:transform .14s var(--ease-spring);background:#fff;border:none;border-radius:50%}.scrubber::-moz-range-track{border-radius:var(--r-pill);background:#ffffff12;height:4px}.scrubber::-moz-range-progress{border-radius:var(--r-pill);background:var(--accent);height:4px}.scrubber:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-soft), 0 2px 8px #0000008c;transform:scale(1.18)}.scrubber:hover::-moz-range-thumb{box-shadow:0 0 0 4px var(--accent-soft), 0 2px 8px #0000008c;transform:scale(1.18)}.scrubber:active::-webkit-slider-thumb{transform:scale(1.08)}.scrubber:active::-moz-range-thumb{transform:scale(1.08)}.ctrl-group{flex-shrink:0;align-items:center;gap:6px;display:flex}.ctrl-icon{color:var(--text-dim);flex-shrink:0;align-items:center;display:flex}.mini-slider{appearance:none;background:linear-gradient(to right, var(--accent) 0, var(--accent) var(--pct,0%), #ffffff0f var(--pct,0%), #ffffff0f 100%);border-radius:var(--r-pill);cursor:pointer;width:60px;height:4px;transition:height .15s var(--ease-out), box-shadow .15s var(--ease-out);outline:none;box-shadow:inset 0 1px 1px #0000004d}.mini-slider:hover{height:5px}.mini-slider:focus-visible{box-shadow:inset 0 1px 1px #0000004d, 0 0 0 3px var(--accent-soft)}.mini-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;box-shadow:0 0 0 2px var(--accent-soft), 0 1px 4px #00000080;cursor:pointer;transition:transform .14s var(--ease-spring), box-shadow .14s var(--ease-out);background:#fff;border:none;border-radius:50%}.mini-slider::-moz-range-thumb{width:11px;height:11px;box-shadow:0 0 0 2px var(--accent-soft), 0 1px 4px #00000080;cursor:pointer;transition:transform .14s var(--ease-spring);background:#fff;border:none;border-radius:50%}.mini-slider::-moz-range-track{border-radius:var(--r-pill);background:#ffffff0f;height:4px}.mini-slider::-moz-range-progress{border-radius:var(--r-pill);background:var(--accent);height:4px}.mini-slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-soft), 0 2px 6px #0000008c;transform:scale(1.2)}.mini-slider:hover::-moz-range-thumb{box-shadow:0 0 0 3px var(--accent-soft), 0 2px 6px #0000008c;transform:scale(1.2)}.mini-slider:active::-webkit-slider-thumb{transform:scale(1.08)}.mini-slider:active::-moz-range-thumb{transform:scale(1.08)}.mini-slider--zoom{width:64px}.hud-instr-btn{border-radius:var(--r-pill);height:32px;color:var(--text);font-family:var(--font);cursor:pointer;white-space:nowrap;transition:color .15s, background .15s, border-color .15s, transform .12s var(--ease-spring);background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:8px;padding:0 14px 0 12px;font-size:12px;font-weight:500;display:inline-flex}.hud-instr-btn:hover{background:#ffffff12;border-color:#ffffff24}.hud-instr-btn:active{transform:scale(.97)}.hud-instr-icon{color:var(--accent);display:inline-flex}#hud:not(.hud--live) .hud-group--live{display:none}.hud-session-btn{border-radius:var(--r-pill);height:32px;color:var(--text);font-family:var(--font);cursor:pointer;white-space:nowrap;transition:color .15s, background .15s, border-color .15s, transform .12s var(--ease-spring);background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:8px;padding:0 14px 0 12px;font-size:12px;font-weight:500;display:inline-flex}.hud-session-btn:hover{background:#ffffff12;border-color:#ffffff24}.hud-session-btn:active{transform:scale(.97)}.hud-session-dot{background:#e2384a;border-radius:50%;width:9px;height:9px;transition:box-shadow .2s;box-shadow:0 0 #e2384a66}.hud-session-btn.hud-session-btn--on{color:#fff;font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;background:#e2384a;border-color:#e2384a;box-shadow:0 2px 12px #e2384a73}.hud-session-btn.hud-session-btn--on .hud-session-dot{background:#fff;animation:1.4s ease-in-out infinite session-breathe}@keyframes session-breathe{0%,to{box-shadow:0 0 #ffffffb3}50%{box-shadow:0 0 0 6px #fff0}}.hud-metro{border-radius:var(--r-pill);background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:2px;height:32px;padding:3px;transition:border-color .15s,background .15s;display:inline-flex}.hud-metro:hover{border-color:#ffffff24}.hud-metro.hud-metro--on{border-color:var(--accent);background:var(--accent-soft)}.hud-metro-toggle{width:26px;height:26px;color:var(--accent);cursor:pointer;transition:background .15s, transform .12s var(--ease-spring);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:relative}.hud-metro-toggle:hover{background:#ffffff14}.hud-metro-toggle:active{transform:scale(.92)}.hud-metro-toggle--on{background:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-glow)}.hud-metro-toggle--on:hover{background:var(--accent);filter:brightness(1.08)}.hud-metro-icon{display:inline-flex}.hud-metro-beat{background:var(--accent);opacity:0;pointer-events:none;border-radius:50%;width:6px;height:6px;position:absolute;top:2px;right:2px}.hud-metro-beat--tick{animation:.18s ease-out metro-tick}.hud-metro-beat--down{background:#fff;animation:.24s ease-out metro-tick-down}.hud-metro-toggle--on .hud-metro-beat{background:#fff}@keyframes metro-tick{0%{opacity:0;transform:scale(.7)}15%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.2)}}@keyframes metro-tick-down{0%{opacity:0;transform:scale(.7)}10%{opacity:1;transform:scale(1.3)}to{opacity:0;transform:scale(1.6)}}.hud-metro-step{width:20px;height:26px;color:var(--text-muted);font-family:var(--font);cursor:pointer;transition:color .12s, background .12s, transform .1s var(--ease-spring);background:0 0;border:none;border-radius:6px;font-size:14px;font-weight:500;line-height:1}.hud-metro-step:hover{color:var(--text);background:#ffffff14}.hud-metro-step:active{transform:scale(.9)}.hud-metro-bpm{text-align:center;min-width:28px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text);-webkit-user-select:none;user-select:none;padding:0 2px;font-size:12px}.hud-loop-btn{--loop-progress:0deg;border-radius:var(--r-pill);height:32px;color:var(--text);font-family:var(--font);cursor:pointer;white-space:nowrap;transition:color .15s, background .15s, border-color .15s, transform .12s var(--ease-spring);background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:8px;padding:0 14px 0 12px;font-size:12px;font-weight:500;display:inline-flex;position:relative}.hud-loop-btn[data-loop-state=playing]:before{content:"";border-radius:calc(var(--r-pill) + 3px);background:conic-gradient(#fff var(--loop-progress), #ffffff2e 0deg);-webkit-mask-composite:xor;pointer-events:none;opacity:.75;padding:2px;position:absolute;inset:-3px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.hud-loop-btn:hover{background:#ffffff12;border-color:#ffffff24}.hud-loop-btn:active{transform:scale(.97)}.hud-loop-icon{color:var(--accent);display:inline-flex}.hud-loop-btn[data-loop-state=armed]{border-color:var(--accent);color:var(--accent);animation:1.1s ease-in-out infinite loop-pulse}.hud-loop-btn[data-loop-state=armed] .hud-loop-icon{color:var(--accent)}.hud-loop-btn[data-loop-state=recording]{color:#fff;background:#e2384a;border-color:#e2384a;animation:.9s ease-in-out infinite loop-pulse;box-shadow:0 2px 12px #e2384a73}.hud-loop-btn[data-loop-state=recording] .hud-loop-icon{color:#fff}.hud-loop-btn[data-loop-state=playing]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 10px var(--accent-glow)}.hud-loop-btn[data-loop-state=playing] .hud-loop-icon{color:#fff}.hud-loop-btn[data-loop-state=overdubbing]{color:#fff;background:#f59e0b;border-color:#f59e0b;animation:.9s ease-in-out infinite loop-pulse;box-shadow:0 2px 12px #f59e0b73}.hud-loop-btn[data-loop-state=overdubbing] .hud-loop-icon{color:#fff}.hud-loop-btn[data-loop-state=overdubbing]:before{content:"";border-radius:calc(var(--r-pill) + 3px);background:conic-gradient(#fff var(--loop-progress), #ffffff2e 0deg);-webkit-mask-composite:xor;pointer-events:none;opacity:.85;padding:2px;position:absolute;inset:-3px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes loop-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.98)}}.hud-loop-clear,.hud-loop-save,.hud-loop-undo{width:28px;height:28px;color:var(--text-muted);cursor:pointer;transition:color .15s, background .15s, transform .12s var(--ease-spring);background:#ffffff0a;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.hud-loop-clear:hover,.hud-loop-save:hover,.hud-loop-undo:hover{color:var(--text);background:#ffffff17}.hud-loop-clear:active,.hud-loop-save:active,.hud-loop-undo:active{transform:scale(.94)}.hud-loop-save{color:var(--accent)}.hud-loop-save:hover{color:var(--accent);background:var(--accent-soft)}.speed-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);text-align:right;letter-spacing:.02em;min-width:26px;font-size:10.5px}#hud.hud--exporting .btn-play,#hud.hud--exporting .btn-skip,#hud.hud--exporting .scrubber,#hud.hud--exporting .mini-slider{opacity:.25;pointer-events:none}#key-hint{bottom:calc(var(--keyboard-h) + var(--hud-gap) + env(safe-area-inset-bottom));left:calc(20px + env(safe-area-inset-left));z-index:14;pointer-events:none;opacity:0;transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);position:absolute;transform:translateY(6px)}#key-hint.kh--visible{opacity:1;transform:none}#key-hint.kh--visible.kh--idle{opacity:0;transform:translate(-8px)}.kh-body{border:1px solid var(--border);-webkit-backdrop-filter:blur(28px)saturate(150%);pointer-events:auto;background:#080810d1;border-radius:12px;flex-direction:column;gap:16px;padding:13px 16px 14px;display:inline-flex;position:relative;box-shadow:0 12px 32px #00000073,inset 0 1px #ffffff0d}.kh-section{flex-direction:column;align-items:flex-start;gap:7px;display:flex}.kh-label{letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);font-size:8.5px;font-weight:600;line-height:1}.kh-keys{flex-wrap:wrap;align-items:center;gap:3px;display:inline-flex}.kh-divider{background:var(--text-dim);opacity:.5;border-radius:50%;width:3px;height:3px;margin:0 4px}.kh-octave-pill{height:16px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);border-radius:4px;align-items:center;margin-left:5px;padding:0 6px;font-size:9.5px;font-weight:600;display:inline-flex}.kh-shortcuts{grid-template-columns:max-content max-content;align-items:center;gap:6px 14px;display:grid}.kh-combo{color:var(--text-muted);letter-spacing:.005em;white-space:nowrap;align-items:center;gap:5px;font-size:10.5px;display:inline-flex}.kh-combo .kh-cap-group{align-items:center;gap:2px;display:inline-flex}.kh-keys kbd,.kh-combo kbd{min-width:19px;height:19px;font-family:var(--font-mono);color:var(--text);letter-spacing:.02em;background:linear-gradient(#ffffff12,#ffffff05);border:1px solid #ffffff1a;border-bottom-width:2px;border-radius:5px;justify-content:center;align-items:center;padding:0 5px;font-size:10.5px;font-weight:500;transition:background .18s,border-color .18s;display:inline-flex;box-shadow:inset 0 1px #ffffff0a}.kh-keys kbd.kh-cap-sym,.kh-combo kbd.kh-cap-sym{font-family:var(--font);letter-spacing:0;padding:0 4px;font-size:12px;font-weight:600}#key-hint:hover .kh-keys kbd,#key-hint:hover .kh-combo kbd{border-color:#ffffff24}.kh-keys .kh-cap-btn{color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:5px;margin:0;padding:0;line-height:0;display:inline-flex}.kh-keys .kh-cap-btn:hover kbd{background:linear-gradient(#ffffff1c,#ffffff0a);border-color:#ffffff38}.kh-keys .kh-cap-btn:active kbd{background:linear-gradient(#ffffff0a,#ffffff14);border-bottom-width:1px;transform:translateY(1px)}.kh-keys .kh-cap-btn:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);outline:none}.kh-section-head{justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.kh-close{width:18px;height:18px;color:var(--text-muted);pointer-events:auto;cursor:pointer;opacity:.75;background:0 0;border:0;border-radius:4px;justify-content:center;align-items:center;margin-left:auto;padding:0;transition:opacity .18s,color .18s,background .18s;display:inline-flex}#key-hint:hover .kh-close{opacity:1}.kh-close:hover,.kh-close:focus-visible{opacity:1;color:var(--text);background:#ffffff0f;outline:none}.kh-reopen{border:1px solid var(--border);-webkit-backdrop-filter:blur(20px)saturate(150%);width:28px;height:28px;color:var(--text-dim);pointer-events:auto;cursor:pointer;background:#07070fc7;border-radius:8px;justify-content:center;align-items:center;transition:color .18s,border-color .18s,background .18s,transform .18s;display:none;position:absolute;bottom:0;left:0;box-shadow:0 6px 16px #00000059}.kh-reopen:hover{color:var(--text);border-color:var(--border-hi);transform:translateY(-1px)}#key-hint.kh--collapsed .kh-body{display:none}#key-hint.kh--collapsed .kh-reopen{display:inline-flex}#key-hint.kh--collapsed{pointer-events:none}@media (width<=640px){#key-hint{display:none}}#pianoroll{cursor:default}#kbd-resizer{left:calc(env(safe-area-inset-left));right:calc(env(safe-area-inset-right));bottom:calc(var(--keyboard-h) + env(safe-area-inset-bottom));z-index:12;pointer-events:auto;cursor:ns-resize;touch-action:none;justify-content:center;align-items:center;height:10px;display:flex;position:absolute;transform:translateY(50%)}@media (pointer:coarse){#kbd-resizer{display:none}}body.is-touch #kbd-resizer,body.canvas-hidden #kbd-resizer{display:none}#kbd-resizer:before{content:"";background:0 0;height:1px;transition:background .2s;position:absolute;top:50%;left:0;right:0}#kbd-resizer:hover:before,#kbd-resizer.kbd-resizer--active:before{background:var(--accent-glow)}.kbd-resizer-grip{background:#ffffff14;border-radius:999px;width:42px;height:4px;transition:background .18s,transform .18s;position:relative}#kbd-resizer:hover .kbd-resizer-grip{background:var(--accent);transform:scaleX(1.1)}#kbd-resizer.kbd-resizer--active .kbd-resizer-grip{background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.ts-popover{z-index:60;-webkit-backdrop-filter:blur(32px)saturate(150%);border:1px solid var(--border-hi);border-radius:var(--r-lg);opacity:0;pointer-events:none;min-width:260px;max-width:340px;max-height:min(60vh,520px);transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);background:#0a0a12f5;flex-direction:column;display:flex;position:absolute;transform:translateY(-6px);box-shadow:0 20px 48px #0000008c,inset 0 1px #ffffff0a}.ts-popover.ts-popover--open{opacity:1;pointer-events:auto;transform:translateY(0)}#track-panel.ts-popover{width:300px}.panel-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 14px 12px 18px;display:flex}.panel-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-size:11px;font-weight:600}.panel-close-btn{border-radius:var(--r-sm);width:24px;height:24px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}.panel-close-btn:hover{color:var(--text);background:#ffffff0f}.panel-items{flex:1;padding:6px 0;overflow-y:auto}.panel-footer{border-top:1px solid var(--border);flex-shrink:0;padding:10px 12px}.panel-load-btn{border-radius:var(--r-md);border:1px solid var(--border);width:100%;color:var(--text-muted);font-family:var(--font);cursor:pointer;background:0 0;align-items:center;gap:7px;padding:8px 10px;font-size:12px;font-weight:500;transition:color .15s,background .15s,border-color .15s;display:flex}.panel-load-btn:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff0d}.ts-pill--instrument{align-items:center;gap:6px;display:inline-flex}.ts-pill--instrument .ts-instrument-label{font-weight:500}.ts-instrument-icon-slot{width:14px;height:14px;color:var(--accent);justify-content:center;align-items:center;display:inline-flex;position:relative}.ts-instrument-icon-slot>svg{transition:opacity .18s var(--ease-out)}.ts-instrument-spinner{border:1.5px solid color-mix(in srgb, var(--accent) 22%, transparent);border-top-color:var(--accent);opacity:0;transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);border-radius:50%;position:absolute;inset:0;transform:scale(.75)}.ts-pill--loading .ts-instrument-icon-slot>svg{opacity:0}.ts-pill--loading .ts-instrument-spinner{opacity:1;animation:.7s linear infinite ts-instrument-spin;transform:scale(1)}.ts-pill--loading .ts-instrument-label{color:var(--text-muted)}@keyframes ts-instrument-spin{to{transform:scale(1)rotate(360deg)}}.ts-pill--open{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}.ts-instrument-menu{width:260px}.instrument-items{flex-direction:column;gap:2px;padding:6px;display:flex;overflow-y:auto}.scroll-surface,#export-modal .modal-scroll,#post-session-modal .modal-scroll,.ts-popover,.ts-popover *{scrollbar-width:thin;scrollbar-color:#ffffff24 transparent}.scroll-surface::-webkit-scrollbar{width:8px;height:8px}#export-modal .modal-scroll::-webkit-scrollbar{width:8px;height:8px}#post-session-modal .modal-scroll::-webkit-scrollbar{width:8px;height:8px}.ts-popover::-webkit-scrollbar{width:8px;height:8px}.ts-popover ::-webkit-scrollbar{width:8px;height:8px}.scroll-surface::-webkit-scrollbar-track{background:0 0}#export-modal .modal-scroll::-webkit-scrollbar-track{background:0 0}#post-session-modal .modal-scroll::-webkit-scrollbar-track{background:0 0}.ts-popover::-webkit-scrollbar-track{background:0 0}.ts-popover ::-webkit-scrollbar-track{background:0 0}.scroll-surface::-webkit-scrollbar-thumb{background:#ffffff1a padding-box padding-box;border:2px solid #0000;border-radius:999px;transition:background .18s}#export-modal .modal-scroll::-webkit-scrollbar-thumb{background:#ffffff1a padding-box padding-box;border:2px solid #0000;border-radius:999px;transition:background .18s}#post-session-modal .modal-scroll::-webkit-scrollbar-thumb{background:#ffffff1a padding-box padding-box;border:2px solid #0000;border-radius:999px;transition:background .18s}.ts-popover::-webkit-scrollbar-thumb{background:#ffffff1a padding-box padding-box;border:2px solid #0000;border-radius:999px;transition:background .18s}.ts-popover ::-webkit-scrollbar-thumb{background:#ffffff1a padding-box padding-box;border:2px solid #0000;border-radius:999px;transition:background .18s}.scroll-surface::-webkit-scrollbar-thumb:hover{background:#ffffff38 padding-box padding-box}#export-modal .modal-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff38 padding-box padding-box}#post-session-modal .modal-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff38 padding-box padding-box}.ts-popover::-webkit-scrollbar-thumb:hover{background:#ffffff38 padding-box padding-box}.ts-popover ::-webkit-scrollbar-thumb:hover{background:#ffffff38 padding-box padding-box}.scroll-surface::-webkit-scrollbar-corner{background:0 0}#export-modal .modal-scroll::-webkit-scrollbar-corner{background:0 0}#post-session-modal .modal-scroll::-webkit-scrollbar-corner{background:0 0}.ts-popover::-webkit-scrollbar-corner{background:0 0}.ts-popover ::-webkit-scrollbar-corner{background:0 0}.instrument-item{border-radius:var(--r-md);color:var(--text);font-family:var(--font);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;padding:9px 10px;transition:background .14s,color .14s;display:flex}.instrument-item:hover{background:#ffffff0d}.instrument-item-dot{background:var(--text-dim);border-radius:50%;flex-shrink:0;width:8px;height:8px;transition:background .15s}.instrument-item--on .instrument-item-dot{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.instrument-item-body{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.instrument-item-name{letter-spacing:-.01em;font-size:13px;font-weight:600}.instrument-item-sub{color:var(--text-muted);letter-spacing:.01em;font-size:10.5px}.instrument-item-check{opacity:0;color:var(--accent);flex-shrink:0;transition:opacity .14s}.instrument-item--on .instrument-item-check{opacity:1}.instrument-item--loading .instrument-item-dot{border:1.5px solid color-mix(in srgb, var(--accent) 22%, transparent);border-top-color:var(--accent);width:10px;height:10px;box-shadow:none;background:0 0;border-radius:50%;animation:.7s linear infinite ts-instrument-spin}.instrument-item--loading .instrument-item-sub{color:var(--accent);font-style:italic}.instrument-item--loading .instrument-item-sub:after{content:" · loading samples"}.track-item{cursor:pointer;align-items:center;gap:8px;padding:5px 14px 5px 18px;transition:background .12s;display:flex}.track-item:hover{background:#ffffff08}.track-swatch{opacity:.9;border-radius:2px;flex-shrink:0;width:3px;height:20px}.track-info{flex:1;min-width:0}.track-name{text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:12px;font-weight:500;line-height:1.4;display:block;overflow:hidden}.track-meta{color:var(--text-muted);margin-top:1px;font-size:10px;display:block}.track-toggle-wrap{flex-shrink:0;width:26px;height:14px;position:relative}.track-toggle{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.toggle-track{border-radius:var(--r-pill);pointer-events:none;background:#ffffff14;transition:background .2s;position:absolute;inset:0}.toggle-track:after{content:"";width:10px;height:10px;transition:transform .2s var(--ease-spring), background .2s;background:#ffffff47;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0006}.track-toggle:checked+.toggle-track{background:var(--track-color,var(--accent))}.track-toggle:checked+.toggle-track:after{background:#fff;transform:translate(12px)}:is(.track-item:has(.track-toggle:not(:checked)) .track-name,.track-item:has(.track-toggle:not(:checked)) .track-swatch){opacity:.35}#export-modal{--modal-vpad:24px;z-index:80;pointer-events:none;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));background:0 0;justify-content:center;align-items:center;transition:background .28s,-webkit-backdrop-filter .28s,backdrop-filter .28s;display:flex;position:absolute;inset:0}#export-modal.open{-webkit-backdrop-filter:blur(14px);pointer-events:auto;background:#04040ab3}.export-card{background:var(--surface-hi);border:1px solid var(--border-hi);border-radius:var(--r-xl);opacity:0;width:420px;transition:opacity .28s var(--ease-out), transform .28s var(--ease-out);padding:28px 30px 24px;transform:scale(.94)translateY(8px);box-shadow:0 32px 80px #000000bf,inset 0 1px #ffffff0d}#export-modal.open .export-card{opacity:1;transform:scale(1)translateY(0)}#export-modal .modal-scroll,#post-session-modal .modal-scroll{max-height:calc(100dvh - var(--modal-vpad) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-y:auto}.export-header{align-items:flex-start;gap:14px;margin-bottom:22px;display:flex}.export-header-text{flex:1;min-width:0}.export-card-icon{color:var(--accent);opacity:.88;background:var(--accent-soft);border-radius:var(--r-md);padding:8px;display:inline-flex}.export-card-title{letter-spacing:-.03em;color:var(--text);margin-bottom:3px;font-size:17px;font-weight:600}.export-card-sub{color:var(--text-muted);font-size:11.5px;line-height:1.5}.export-section{margin-bottom:18px}.export-section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px;font-size:11px;font-weight:500;display:block}.export-section--disabled{opacity:.35;pointer-events:none;filter:saturate(.2);transition:opacity .2s,filter .2s}.export-section .fps-group{width:100%}.export-section .fps-btn{flex:1;padding:6px 10px}.res-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.res-card{border-radius:var(--r-md);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:color .15s, background .15s, border-color .15s, transform .12s var(--ease-spring);background:#ffffff08;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 10px;display:flex}.res-card:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff0f}.res-card:active{transform:scale(.97)}.res-card.res-card--on{border-color:var(--accent);background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}.res-card-label{color:inherit;letter-spacing:-.01em;font-size:12px;font-weight:600}.res-card-dim{font-size:10px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);letter-spacing:.02em}.res-card--on .res-card-dim{color:var(--text);opacity:.7}.res-preview{justify-content:center;align-items:center;width:100%;height:34px;margin-bottom:6px;display:flex}.res-preview:before{content:"";background:linear-gradient(135deg,#ffffff1f,#ffffff05);border:1px solid #fff3;border-radius:3px;transition:background .15s,border-color .15s;display:block}.res-card--on .res-preview:before{background:linear-gradient(135deg, var(--accent), #ffffff0f);border-color:var(--accent)}.res-preview--landscape:before{width:50px;height:28px}.res-preview--vertical:before{width:16px;height:28px}.res-preview--square:before{width:28px;height:28px}.res-preview--match:before{background:0 0;border-style:dashed;width:42px;height:28px}.res-card--on .res-preview--match:before{background:0 0}.fps-group{border:1px solid var(--border);border-radius:var(--r-md);background:#ffffff0a;gap:3px;padding:3px;display:flex}.fps-group.fps-group--wrap{flex-wrap:wrap;justify-content:center}.fps-btn{font-family:var(--font);color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:500;transition:color .15s,background .15s}.fps-btn:hover{color:var(--text);background:#ffffff0f}.fps-btn.fps-btn--on{background:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-glow)}.fps-btn.fps-btn--on:hover{background:var(--accent);filter:brightness(1.1)}.export-actions{border-top:1px solid var(--border);justify-content:flex-end;gap:8px;margin-top:22px;padding-top:16px;display:flex}.modal-btn{font-family:var(--font);border-radius:var(--r-md);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;white-space:nowrap;background:#ffffff0d;padding:8px 16px;font-size:12.5px;font-weight:500;transition:color .15s,background .15s,border-color .15s}.modal-btn:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff17}.modal-btn--accent{background:var(--accent);color:#fff;box-shadow:0 2px 12px var(--accent-glow);border-color:#0000;align-items:center;gap:6px;display:inline-flex}.modal-btn--accent:hover{background:var(--accent);filter:brightness(1.12);color:#fff;border-color:#0000}.export-phase{flex-direction:column;align-items:center;gap:14px;display:flex}.export-spinner{border:2px solid #ffffff0f;border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.65s linear infinite spin}.export-stage{color:var(--text);letter-spacing:-.025em;font-size:15px;font-weight:600}.export-progress-wrap{border-radius:var(--r-pill);background:#ffffff0f;width:100%;height:4px;position:relative;overflow:hidden}.export-progress-bar{background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, transparent), var(--accent));border-radius:var(--r-pill);width:0%;height:100%;transition:width .25s var(--ease-out);box-shadow:0 0 8px var(--accent-glow);position:relative;overflow:hidden}.export-progress-bar:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff40 50%,#0000 100%);animation:2.2s linear infinite export-bar-shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes export-bar-shimmer{to{transform:translate(100%)}}.export-phase.indeterminate .export-progress-bar{background:linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);width:40%;box-shadow:none;animation:export-bar-indeterminate 1.4s var(--ease-out) infinite}.export-phase.indeterminate .export-progress-bar:after{display:none}@keyframes export-bar-indeterminate{0%{transform:translate(-150%)}to{transform:translate(350%)}}.export-pct{font-variant-numeric:tabular-nums;color:var(--text-muted);letter-spacing:.04em;min-height:1em;font-size:12px}#post-session-modal{--modal-vpad:24px;z-index:80;pointer-events:none;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));background:0 0;justify-content:center;align-items:center;transition:background .28s,-webkit-backdrop-filter .28s,backdrop-filter .28s;display:flex;position:absolute;inset:0}#post-session-modal.open{-webkit-backdrop-filter:blur(14px);pointer-events:auto;background:#04040ab3}.post-session-card{background:var(--surface-hi);border:1px solid var(--border-hi);border-radius:var(--r-xl);opacity:0;width:400px;transition:opacity .28s var(--ease-out), transform .28s var(--ease-out);padding:26px 28px 20px;transform:scale(.94)translateY(8px);box-shadow:0 32px 80px #000000bf,inset 0 1px #ffffff0d}#post-session-modal.open .post-session-card{opacity:1;transform:scale(1)translateY(0)}.post-session-actions{flex-direction:column;gap:8px;display:flex}.post-session-option{border-radius:var(--r-md);border:1px solid var(--border);color:var(--text);text-align:left;cursor:pointer;font-family:var(--font);transition:background .15s, border-color .15s, transform .12s var(--ease-spring);background:#ffffff08;align-items:flex-start;gap:14px;padding:14px;display:flex}.post-session-option:hover{border-color:var(--border-hi);background:#ffffff0f}.post-session-option:active{transform:scale(.985)}.post-session-option--primary{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.post-session-option--primary:hover{background:var(--accent-soft);filter:brightness(1.08)}.post-session-option--muted{color:var(--text-muted)}.post-session-option-icon{border-radius:var(--r-md);width:32px;height:32px;color:var(--text);background:#ffffff0d;flex:none;justify-content:center;align-items:center;display:inline-flex}.post-session-option--primary .post-session-option-icon{background:var(--accent);color:#fff}.post-session-option--muted .post-session-option-icon{color:var(--text-muted)}.post-session-option-body{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.post-session-option-title{color:inherit;letter-spacing:-.01em;font-size:13px;font-weight:600}.post-session-option-sub{color:var(--text-muted);font-size:11.5px;line-height:1.45}.post-session-option-sub code{font-family:var(--font-mono);background:#ffffff0f;border-radius:3px;padding:0 4px;font-size:10.5px}#midi-picker-modal{z-index:90;pointer-events:none;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));background:0 0;justify-content:center;align-items:center;transition:background .28s,-webkit-backdrop-filter .28s,backdrop-filter .28s;display:flex;position:absolute;inset:0}#midi-picker-modal.open{-webkit-backdrop-filter:blur(14px);pointer-events:auto;background:#04040ab3}.midi-picker-card{background:var(--surface-hi);border:1px solid var(--border-hi);border-radius:var(--r-xl);opacity:0;pointer-events:none;width:min(560px,100%);max-height:min(86vh,720px);transition:opacity .24s var(--ease-out), transform .24s var(--ease-out);flex-direction:column;gap:18px;padding:22px 24px;display:flex;overflow-y:auto;transform:scale(.96)translateY(8px);box-shadow:0 32px 80px #000000bf,inset 0 1px #ffffff0d}#midi-picker-modal.open .midi-picker-card{opacity:1;pointer-events:auto;transform:scale(1)translateY(0)}.midi-picker-head{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.midi-picker-title{letter-spacing:-.01em;color:var(--text);margin:0;font-size:18px;font-weight:600}.midi-picker-sub{color:var(--text-muted);margin:4px 0 0;font-size:13px;line-height:1.45}.midi-picker-close{border:1px solid var(--border);width:28px;height:28px;color:var(--text-muted);cursor:pointer;background:#ffffff08;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.midi-picker-close:hover{border-color:var(--border-hi);color:var(--text);background:#ffffff14}.midi-picker-drop{border-radius:var(--r-lg);border:1.5px dashed var(--border-hi);width:100%;color:var(--text);font:inherit;cursor:pointer;text-align:center;background:#ffffff05;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:28px 18px;transition:background .15s,border-color .15s;display:flex}.midi-picker-drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.midi-picker-drop:hover{border-color:var(--accent);background:#ffffff0b}.midi-picker-drop.drag-over{background:var(--accent-soft);border-color:var(--accent);border-style:solid}.midi-picker-drop-icon{color:var(--accent);justify-content:center;align-items:center;margin-bottom:4px;display:inline-flex}.midi-picker-drop-title{color:var(--text);font-size:14px;font-weight:600}.midi-picker-drop-sub{color:var(--text-muted);font-size:12px}.midi-picker-section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px;font-size:11px}.midi-picker-samples-mount{display:contents}.learn-soon{pointer-events:auto;color:var(--text);background:var(--bg);z-index:5;isolation:isolate;animation:learn-soon-fade .6s var(--ease-out);justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}@keyframes learn-soon-fade{0%{opacity:0}to{opacity:1}}.learn-soon__aurora{pointer-events:none;z-index:0;background:radial-gradient(720px 460px at 50% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), radial-gradient(560px 360px at 30% 70%, #788cff1a, transparent 60%);filter:blur(2px)saturate(1.1);animation:18s ease-in-out infinite alternate learn-soon-drift;position:absolute;inset:-25%}@keyframes learn-soon-drift{0%{transform:translate(-1.5%,-1%)scale(1)}to{transform:translate(1.5%,1.5%)scale(1.06)}}.learn-soon__grain{pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");position:absolute;inset:0}.learn-soon__center{z-index:2;text-align:center;max-width:540px;animation:learn-soon-rise .8s var(--ease-out) both;flex-direction:column;align-items:center;gap:18px;padding:32px 24px;display:flex;position:relative}@keyframes learn-soon-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.learn-soon__badge{border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);background:color-mix(in srgb, var(--accent) 14%, transparent);border-radius:999px;align-items:center;gap:9px;margin-bottom:6px;padding:6px 14px 6px 12px;display:inline-flex}.learn-soon__badge-text{font:600 11px / 1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.learn-soon__pulse{flex-shrink:0;width:7px;height:7px;position:relative}.learn-soon__pulse-dot{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);border-radius:999px;position:absolute;inset:0}.learn-soon__pulse-ring{border:1px solid color-mix(in srgb, var(--accent) 70%, transparent);border-radius:999px;animation:2.6s ease-out infinite learn-soon-pulse;position:absolute;inset:0}@keyframes learn-soon-pulse{0%{opacity:.9;transform:scale(1)}80%,to{opacity:0;transform:scale(5)}}.learn-soon__title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text);margin:0;font-size:clamp(48px,8vw,88px);font-weight:400;line-height:.96}.learn-soon__title em{color:var(--accent);font-style:italic}.learn-soon__sub{font:400 14px / 1.55 var(--font);color:var(--text-muted);max-width:440px;margin:0}@media (width<=640px){.learn-soon__center{gap:14px;padding:24px 18px}}#loading-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50;pointer-events:auto;background:#06060ee0;justify-content:center;align-items:center;animation:.2s fade-in;display:flex;position:absolute;inset:0}.loading-inner{flex-direction:column;align-items:center;gap:16px;display:flex}.loading-spinner{border:2px solid #ffffff0d;border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.6s linear infinite spin}.loading-text{color:var(--text-muted);letter-spacing:-.01em;font-size:13px}.toast{border:1px solid var(--red-border);max-width:320px;color:var(--red-text);-webkit-backdrop-filter:blur(24px)saturate(150%);z-index:200;pointer-events:none;animation:toast-in .26s var(--ease-spring) forwards;background:#0a0c16eb;border-radius:12px;align-items:center;gap:8px;padding:10px 14px;font-size:12.5px;font-weight:500;line-height:1.35;display:flex;position:fixed;top:82px;right:22px;box-shadow:0 14px 36px #00000073,inset 0 1px #ffffff0a}.toast--success{color:#a5f3d0;border-color:#34d39952}.toast:before{content:"";opacity:.85;background:currentColor;border-radius:50%;flex-shrink:0;width:7px;height:7px;display:inline-block;box-shadow:0 0 10px}@keyframes toast-in{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){#dropzone:before,.home-card,.ts-bars span,#top-strip.strip--exporting .ts-record-btn svg,#hud.hud--playing .btn-play{animation:none!important}#dropzone,#top-strip,#hud,#track-panel,.panel-backdrop,#export-modal,#post-session-modal,.export-card,.post-session-card,.export-progress-bar,.scrubber,.mini-slider,.toggle-track,.toggle-track:after,.theme-dot,.ts-record-btn,.ts-context,.ts-menu,.ts-menu-item,.modal-btn,.fps-btn{transition-duration:.01ms!important}}@media (width<=640px){#top-strip{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));gap:6px;height:48px;padding:0 4px 0 6px}.ts-mode-seg .ts-mode-label{display:none}.ts-mode-seg{min-width:32px;padding:0 8px}#top-strip .ts-pill--midi,#top-strip .ts-theme-btn,#top-strip .ts-particle-btn,#top-strip .ts-sep,.ts-status{display:none}#hud{max-width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))}.hud-bar{gap:6px;padding:0 10px}}@media (width<=640px) and (orientation:portrait){#hud{top:calc(48px + 8px + env(safe-area-inset-top));bottom:auto;left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));width:auto;max-width:none;transform:none}#hud .float-hud__handle{display:none}#hud.hud--active.float-hud--idle{transform:none}#hud{-webkit-backdrop-filter:none;box-shadow:0 6px 16px #0000008c,inset 0 1px #ffffff0b}.hud-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 6px;height:auto;min-height:48px;padding:8px 10px}.hud-bar .ctrl-group,.hud-bar .hud-divider,.hud-bar .hud-metro-step,.hud-bar .hud-metro-bpm{display:none}.hud-bar .hud-metro{background:0 0;border:none;gap:0;padding:0}.hud-bar .scrubber-wrap{flex:100%;order:10;gap:8px;min-width:0}.hud-bar .scrubber-wrap .time-display{flex-shrink:0;min-width:32px;font-size:11px}.hud-bar .hud-group--transport{gap:6px}#top-strip .ts-record-btn{justify-content:center;padding:0}}@media (width<=640px){#export-modal,#post-session-modal{--modal-vpad:32px;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px));align-items:flex-start}.export-card{width:100%;max-width:100%;padding:18px 16px 16px}.post-session-card{width:100%;max-width:100%}.fps-group{flex-wrap:wrap;justify-content:center}.export-section .fps-btn{flex:0 auto;padding:6px 10px;font-size:11.5px}.res-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}}[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);color:var(--text);letter-spacing:.01em;white-space:nowrap;opacity:0;pointer-events:none;z-index:60;background:#0c0c14fa;border:1px solid #ffffff17;border-radius:6px;max-width:80vw;padding:5px 9px;font-size:11px;font-weight:500;transition:opacity .12s,transform .12s;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)translateY(-4px);box-shadow:0 6px 14px #00000073}[data-tip]:hover:after,[data-tip]:focus-visible:after,[data-tip]:active:after{opacity:1;transform:translate(-50%)translateY(0)}.float-hud [data-tip]:after{top:auto;bottom:calc(100% + 8px);transform:translate(-50%)translateY(4px)}.float-hud [data-tip]:hover:after,.float-hud [data-tip]:focus-visible:after,.float-hud [data-tip]:active:after{transform:translate(-50%)translateY(0)}@media (width<=640px) and (orientation:portrait){.float-hud [data-tip]:after{top:calc(100% + 8px);bottom:auto;transform:translate(-50%)translateY(-4px)}.float-hud [data-tip]:hover:after,.float-hud [data-tip]:focus-visible:after,.float-hud [data-tip]:active:after{transform:translate(-50%)translateY(0)}}#key-hint [data-tip]:after{top:auto;bottom:calc(100% + 8px);left:0;transform:translate(0)translateY(4px)}#key-hint [data-tip]:hover:after,#key-hint [data-tip]:focus-visible:after,#key-hint [data-tip]:active:after{transform:translate(0)translateY(0)}@media (width<=900px) and (orientation:landscape),(height<=500px){:root{--hud-gap:20px}.hud-bar{-webkit-backdrop-filter:none;background:#07070f;border-radius:18px;height:48px;padding:0 12px;box-shadow:0 0 16px #0000008c,0 0 6px #00000061,inset 0 1px #ffffff0b}}@media (width<=380px){#top-strip .ts-pill--file{display:none}#top-strip{gap:4px}}@media (pointer:coarse){button,.ts-pill,.ts-mode-seg,.ts-home,.ts-theme-btn,.ts-record-btn,.btn-skip,.hud-instr-btn,.hud-session-btn,.hud-loop-btn,.hud-metro-toggle,.hud-metro-step,.home-primary-btn,.home-secondary-btn,.panel-close-btn,.panel-load-btn{min-width:44px;min-height:44px}.btn-play{width:48px;height:48px}.scrubber{height:6px}.scrubber::-webkit-slider-thumb{width:22px;height:22px}.scrubber::-moz-range-thumb{width:22px;height:22px}.scrubber:hover,.mini-slider{height:6px}.mini-slider::-webkit-slider-thumb{width:20px;height:20px}.mini-slider::-moz-range-thumb{width:20px;height:20px}.mini-slider:hover{height:6px}.hud-metro{height:40px}.hud-metro-toggle{width:34px;height:34px}.hud-metro-step{min-width:32px}.hud-pin-btn,.hud-drag-handle{width:32px;height:32px}}#dropzone.dropzone--touch .home-drop-hint{display:none}#dropzone.dropzone--touch .home-kicker{font-size:10px}#dropzone.dropzone--touch .home-primary-btn{min-height:52px;padding:0 22px;font-size:14px}#dropzone.dropzone--touch .home-secondary-btn{min-height:48px}#dropzone.dropzone--touch .home-footnotes{gap:6px}.popover--sheet{box-shadow:0 -18px 40px #0000008c,0 0 0 100vmax #00000080;width:100%!important;min-width:0!important;max-width:100%!important;max-height:75svh!important;padding-bottom:calc(env(safe-area-inset-bottom) + 8px)!important;transition:transform .28s var(--ease-out), opacity .2s var(--ease-out)!important;opacity:1!important;border-radius:16px 16px 0 0!important;position:fixed!important;inset:auto 0 0!important;transform:translateY(100%)!important}.popover--sheet.ts-popover--open,.popover--sheet.is-open{pointer-events:auto!important;transform:translateY(0)!important}.popover--sheet:before{content:"";pointer-events:none;z-index:1;background:#ffffff38;border-radius:999px;width:38px;height:4px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.popover--sheet>:first-child{margin-top:8px}@media (height<=640px){:root{--hud-gap:14px}}.ts-chord-slot{align-items:center;margin-left:8px;display:inline-flex;position:absolute;top:50%;left:100%;transform:translateY(-50%)}.ts-chord-readout{border:1px solid var(--border);border-radius:var(--r-pill);height:24px;color:var(--text-muted);font-family:var(--font);white-space:nowrap;opacity:0;transition:opacity .22s var(--ease-out), transform .22s var(--ease-out), border-color .2s ease, background .2s ease;background:#ffffff06;justify-content:center;align-items:center;gap:0;min-width:56px;padding:0 12px;display:none;position:relative;transform:translateY(1px)}.ts-chord-readout--on{opacity:1;display:inline-flex;transform:translateY(0)}.ts-chord-readout-name{font-feature-settings:"tnum" 1, "lnum" 1;align-items:baseline;gap:.5px;line-height:1;display:inline-flex}.ts-chord-readout-tonic{font-family:var(--font);letter-spacing:.005em;color:var(--text);font-size:13px;font-weight:600}.ts-chord-readout-quality{font-family:var(--font);letter-spacing:.005em;color:var(--text-muted);font-size:11.5px;font-weight:500}.ts-chord-readout-bass{color:var(--text-dim);opacity:.85;margin-left:0;font-weight:500}.ts-chord-readout--empty .ts-chord-readout-tonic{color:var(--text-dim);opacity:.55}@keyframes ts-chord-readout-pulse{0%{filter:brightness(1.04);transform:scale(.985)}55%{filter:brightness(1.16);transform:scale(1.012)}to{filter:brightness();transform:scale(1)}}.ts-chord-readout--pulse{animation:ts-chord-readout-pulse .32s var(--ease-spring)}.ts-chord-btn{width:24px;height:24px;color:var(--text-dim);cursor:pointer;opacity:.55;background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:color .18s,opacity .18s,background .18s;display:inline-flex}.ts-chord-btn:hover{opacity:1;color:var(--text-muted);background:#ffffff0a}.ts-chord-btn .ts-chord-icon{justify-content:center;align-items:center;width:13px;height:13px;display:inline-flex}.ts-chord-btn--on{opacity:1;color:var(--accent);background:0 0}.ts-chord-btn--on:hover{color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent)}#top-strip[data-mode=play] .ts-chord-btn,#top-strip[data-mode=play] .ts-chord-slot{display:none}.coachmark{z-index:9999;background:var(--surface-hi);-webkit-backdrop-filter:blur(28px)saturate(140%);border:1px solid var(--border-hi);width:max-content;max-width:268px;box-shadow:0 10px 28px #00000080, 0 1px 0 #ffffff0a inset, 0 0 0 1px var(--accent-glow);color:var(--text);pointer-events:auto;border-radius:10px;flex-direction:column;gap:5px;padding:11px 32px 11px 13px;display:flex;position:fixed}.coachmark--below{animation:coachmark-in-below .22s var(--ease-out) both;transform:translate(-50%)}.coachmark--above{animation:coachmark-in-above .22s var(--ease-out) both;transform:translate(-50%,-100%)}.coachmark__arrow{background:inherit;width:9px;height:9px;position:absolute;left:50%;transform:translate(-50%)rotate(45deg)}.coachmark--below .coachmark__arrow{border-top:1px solid var(--border-hi);border-left:1px solid var(--border-hi);top:-5px}.coachmark--above .coachmark__arrow{border-bottom:1px solid var(--border-hi);border-right:1px solid var(--border-hi);bottom:-5px}.coachmark__title{font:600 12px / 1.2 var(--font);color:var(--accent);letter-spacing:-.005em;align-items:center;gap:6px;display:inline-flex}.coachmark__title:before{content:"";background:var(--accent);width:5px;height:5px;box-shadow:0 0 8px var(--accent-glow);border-radius:999px}.coachmark__body{font:500 11.5px / 1.4 var(--font);color:var(--text-muted);letter-spacing:-.005em}.coachmark__close{width:20px;height:20px;color:var(--text-dim);font:500 15px / 1 var(--font);cursor:pointer;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;transition:color .15s,background .15s;display:inline-flex;position:absolute;top:6px;right:6px}.coachmark__close:hover{color:var(--text);background:#ffffff0f}@keyframes coachmark-in-below{0%{opacity:0;transform:translate(-50%)translateY(-3px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes coachmark-in-above{0%{opacity:0;transform:translate(-50%,-100%)translateY(3px)}to{opacity:1;transform:translate(-50%,-100%)translateY(0)}}.ts-pill--customize{height:32px;color:var(--text);transition:border-color .18s ease, background .18s ease, transform .15s var(--ease-spring);align-items:center;gap:8px;padding:0 11px 0 7px;display:inline-flex;position:relative}.ts-pill--customize:before{content:"";background:var(--accent);filter:blur(10px);opacity:.32;pointer-events:none;z-index:0;border-radius:50%;width:18px;height:18px;transition:opacity .2s;position:absolute;top:50%;left:6px;transform:translateY(-50%)}.ts-pill--customize:hover:before,.ts-pill--customize.ts-pill--open:before{opacity:.55}.ts-pill--customize:hover{border-color:#ffffff29;transform:translateY(-1px)}.ts-pill--customize.ts-pill--open{border-color:color-mix(in srgb, var(--accent) 40%, transparent);background:color-mix(in srgb, var(--accent) 8%, #ffffff0a)}.ts-customize-swatch{z-index:1;background:var(--accent);width:18px;height:18px;box-shadow:0 0 0 1px #ffffff2e inset, 0 0 12px var(--accent-glow);transition:transform .2s var(--ease-spring), box-shadow .2s ease;border-radius:6px;position:relative}.ts-pill--customize:hover .ts-customize-swatch{transform:rotate(-6deg)scale(1.04)}.ts-customize-label{z-index:1;letter-spacing:.04em;text-transform:uppercase;color:var(--text);font-size:11px;font-weight:600;position:relative}.ts-customize-chev{z-index:1;color:var(--text-dim);transition:transform .22s var(--ease-out), color .18s ease;position:relative}.ts-pill--customize:hover .ts-customize-chev{color:var(--text-muted)}.ts-pill--customize.ts-pill--open .ts-customize-chev{color:var(--text);transform:rotate(180deg)}.ts-customize-menu{flex-direction:column;width:300px;padding:0;display:flex;overflow:hidden}.customize-section{flex-direction:column;gap:10px;padding:14px 16px;display:flex}.customize-section+.customize-section{border-top:1px solid var(--border)}.customize-section-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.customize-section-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-size:10px;font-weight:600}.customize-section-value{color:var(--text);letter-spacing:.005em;font-size:11.5px;font-weight:500}.customize-theme-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;min-width:0;display:grid}.customize-theme-tile{color:var(--text-dim);cursor:pointer;min-width:0;transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s var(--ease-spring);background:0 0;border:1px solid #0000;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:9px 4px 8px;display:flex}.customize-theme-tile:hover{color:var(--text-muted);background:#ffffff09}.customize-theme-tile--on{border-color:color-mix(in srgb, var(--accent) 30%, transparent);background:color-mix(in srgb, var(--accent) 6%, transparent);color:var(--text)}.customize-theme-tile-dot{width:16px;height:16px;transition:transform .18s var(--ease-spring);border-radius:50%}.customize-theme-tile:hover .customize-theme-tile-dot,.customize-theme-tile--on .customize-theme-tile-dot{transform:scale(1.06)}.customize-theme-tile-label{letter-spacing:.005em;text-align:center;white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:10px;font-weight:500;line-height:1;overflow:hidden}.customize-particle-row{flex-wrap:wrap;gap:5px;display:flex}.customize-particle-chip{border-radius:var(--r-pill);border:1px solid var(--border);color:var(--text-muted);letter-spacing:.01em;cursor:pointer;transition:color .18s ease, border-color .18s ease, background .18s ease, transform .15s var(--ease-spring);background:#ffffff06;align-items:center;gap:6px;padding:6px 10px;font-size:10.5px;font-weight:500;line-height:1;display:inline-flex}.customize-particle-chip-label{align-items:center;line-height:1;display:inline-flex}.customize-locale-row{flex-wrap:wrap;gap:5px;display:flex}.customize-locale-chip{border-radius:var(--r-pill);border:1px solid var(--border);color:var(--text-muted);letter-spacing:.01em;cursor:pointer;background:#ffffff06;align-items:center;padding:6px 12px;font-size:11px;font-weight:500;line-height:1;transition:color .18s,border-color .18s,background .18s;display:inline-flex}.customize-locale-chip:hover{color:var(--text);border-color:var(--border-hi);background:#ffffff0f}.customize-locale-chip--on{color:var(--accent);border-color:var(--accent-glow);background:var(--accent-soft)}.locale-hint{bottom:calc(20px + env(safe-area-inset-bottom));border:1px solid var(--border);border-radius:var(--r-pill);color:var(--text-muted);-webkit-backdrop-filter:blur(20px)saturate(140%);z-index:90;opacity:0;pointer-events:auto;transition:opacity .32s var(--ease-out), transform .32s var(--ease-out);background:#0c0c14eb;align-items:center;gap:10px;padding:8px 14px;font-size:12px;font-weight:500;display:inline-flex;position:fixed;left:50%;transform:translate(-50%)translateY(8px);box-shadow:0 12px 32px #0006}.locale-hint--shown{opacity:1;transform:translate(-50%)translateY(0)}.locale-hint-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0 0 0 4px;font-size:16px;line-height:1}.locale-hint-close:hover{color:var(--text)}.customize-particle-chip:hover{color:var(--text);border-color:var(--border-hi);transform:translateY(-1px)}.customize-particle-chip--on{color:var(--text);border-color:color-mix(in srgb, var(--accent) 55%, transparent);background:color-mix(in srgb, var(--accent) 14%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset}.customize-particle-chip-glyph{width:14px;height:14px;color:var(--text-dim);justify-content:center;align-items:center;transition:color .18s,filter .18s;display:inline-flex}.customize-particle-chip:hover .customize-particle-chip-glyph{color:var(--text-muted)}.customize-particle-chip--on .customize-particle-chip-glyph{color:var(--accent);filter:drop-shadow(0 0 4px var(--accent-glow))}.customize-toggle{text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:0;transition:opacity .18s;display:flex}.customize-toggle:hover{opacity:.92}.customize-toggle-body{flex-direction:column;gap:3px;min-width:0;display:flex}.customize-toggle-name{color:var(--text);letter-spacing:.005em;font-size:12px;font-weight:600;line-height:1.1}.customize-toggle-sub{color:var(--text-dim);letter-spacing:.01em;font-size:10px}.customize-toggle-switch{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:999px;flex-shrink:0;width:32px;height:18px;transition:background .2s,border-color .2s,box-shadow .2s;position:relative}.customize-toggle-knob{background:var(--text-muted);width:14px;height:14px;transition:transform .22s var(--ease-spring), background .22s ease;border-radius:50%;position:absolute;top:1px;left:1px}.customize-toggle--on .customize-toggle-switch{background:color-mix(in srgb, var(--accent) 32%, transparent);border-color:color-mix(in srgb, var(--accent) 60%, transparent);box-shadow:0 0 12px -3px var(--accent-glow)}.customize-toggle--on .customize-toggle-knob{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transform:translate(13px)}@media (width<=480px){.ts-customize-menu{width:100%}.customize-section{padding:12px 14px}.customize-head{padding:12px 14px 10px}.customize-theme-grid{gap:5px}.customize-theme-tile-preview{height:34px}}@media (width<=720px){.ts-chord-readout{min-width:48px;height:22px;padding:0 9px}.ts-chord-readout-tonic{font-size:12px}.ts-chord-readout-quality{font-size:10.5px}}@media (width<=480px){.ts-chord-readout--on{display:none}}.float-hud.sr-hud{height:44px;padding-right:16px}.sr-hud__sep{background:var(--border);flex-shrink:0;width:1px;height:20px;margin:0 12px}.sr-hud__streak{align-items:center;gap:5px;min-width:28px;display:flex}.sr-hud__streak--warm{color:#ffb84d}.sr-hud__streak--hot{color:#f5c842;font-weight:600}.sr-hud__lives{align-items:center;gap:3px;display:flex;position:relative}.sr-hud__dot{background:var(--accent,#ffc83c);border-radius:50%;width:6px;height:6px;transition:opacity .2s,background .2s}.sr-hud__dot--spent{background:#ffffff1f}.sr-hud__bpm-pill{border-radius:var(--r-pill);background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:2px;height:30px;padding:2px;transition:border-color .15s,background .15s;display:inline-flex}.sr-hud__bpm-pill:hover{border-color:#ffffff24}.sr-hud__bpm-step{width:18px;height:24px;color:var(--text-muted);font-family:var(--font);cursor:pointer;transition:color .12s, background .12s, transform .1s var(--ease-spring);background:0 0;border:none;border-radius:5px;font-size:13px;font-weight:500;line-height:1}.sr-hud__bpm-step:hover{color:var(--text);background:#ffffff14}.sr-hud__bpm-step:active{transform:scale(.9)}.sr-hud__bpm-val{text-align:center;min-width:34px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text);-webkit-user-select:none;user-select:none;padding:0 4px;font-size:12px;font-weight:500}.sr-hud__gap{flex-shrink:0;align-items:center;gap:6px;display:inline-flex}.sr-hud__gap-icon{color:var(--text-dim);flex-shrink:0;align-items:center;display:flex}.sr-hud__gap-slider{width:48px}.sr-hud__gap-val{text-align:right;min-width:30px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text);-webkit-user-select:none;user-select:none;font-size:12px;font-weight:500}.sr-hud__pause-btn{background:var(--accent);color:#0a0a14;cursor:pointer;width:30px;height:30px;box-shadow:0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent), 0 1px 0 #ffffff40 inset;transition:transform .12s var(--ease-spring);border:none;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.sr-hud__pause-btn:hover{transform:scale(1.08)}.sr-hud__pause-btn:active{transform:scale(.94)}.sr-hud__pause-btn--paused{color:#ffffffa6;background:#ffffff14;box-shadow:0 0 0 1.5px #ffffff26,inset 0 1px #ffffff1a}.sr-hud__pause-btn--paused:hover{color:#fffc;background:#ffffff24}.sr-hud__ramp-btn{border-radius:var(--r-pill);color:#ffffff73;height:30px;font-family:var(--font);letter-spacing:.04em;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:5px;padding:0 10px;font-size:11px;font-weight:500;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.sr-hud__ramp-btn:hover{color:#ffffffb3;background:#ffffff14;border-color:#ffffff24}.sr-hud__ramp-btn--on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent,#ffc83c)}.sr-hud__ramp-btn--on:hover{filter:brightness(1.08)}.sr-hud__ramp-icon{font-size:13px;line-height:1}.sr-hud__ramp-label{line-height:1}.sr-hud__clef-btn{border-radius:var(--r-pill);color:#ffffff8c;height:30px;font-family:var(--font);letter-spacing:.04em;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;align-items:center;gap:5px;padding:0 10px;font-size:11px;font-weight:500;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.sr-hud__clef-btn:hover{color:#fffc;background:#ffffff14;border-color:#ffffff24}.sr-hud__clef-icon{font-family:serif;font-size:14px;line-height:1}.sr-hud__clef-label{line-height:1}.sr-hud__acc{font-variant-numeric:tabular-nums;color:#fffc;text-align:center;min-width:34px;font-weight:600}.sr-hud__restart-btn{color:#ffffff59;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;transition:background .15s,color .15s;display:flex}.sr-hud__restart-btn:hover{color:#ffffffb3;background:#ffffff12}.sr-hud__close{color:#ffffff59;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;transition:background .15s,color .15s;display:flex}.sr-hud__close:hover{color:#ffffffb3;background:#ffffff12}@keyframes sr-end-in{0%{opacity:0;transform:translateY(20px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.sr-end{pointer-events:auto;-webkit-backdrop-filter:blur(6px);font-family:var(--font,system-ui, sans-serif);background:#000000a6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.sr-end__card{border:1px solid var(--border,#ffffff12);color:#e8e0d0;width:calc(100vw - 48px);min-width:300px;max-width:380px;animation:sr-end-in .3s var(--ease-out,cubic-bezier(.15, .88, .35, 1)) both;background:#07070ff7;border-radius:24px;flex-direction:column;align-items:center;gap:22px;padding:32px 36px 28px;display:flex;box-shadow:0 32px 80px #000000d9,0 8px 24px #00000080,inset 0 1px #ffffff0d}.sr-end__grade-block{text-align:center}.sr-end__grade{letter-spacing:-.02em;font-size:80px;font-weight:800;line-height:1}.sr-end__subtitle{color:#fff6;letter-spacing:.04em;margin-top:6px;font-size:12px}.sr-end__stats{gap:4px;width:100%;display:flex}.sr-end__stat{background:#ffffff0a;border:1px solid #ffffff0d;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 4px;display:flex}.sr-end__stat-glyph{color:#ffffff59;font-size:13px}.sr-end__stat-num{font-variant-numeric:tabular-nums;color:#ffffffd9;font-size:20px;font-weight:700;line-height:1}.sr-end__stat-label{color:#ffffff4d;letter-spacing:.04em;text-transform:uppercase;font-size:10px}.sr-end__stat--perfect .sr-end__stat-glyph,.sr-end__stat--perfect .sr-end__stat-num{color:#50c878}.sr-end__stat--good .sr-end__stat-glyph,.sr-end__stat--good .sr-end__stat-num{color:#ffb84d}.sr-end__stat--miss .sr-end__stat-glyph,.sr-end__stat--miss .sr-end__stat-num{color:#dc4646}.sr-end__xp{color:var(--accent,#ffc83c);letter-spacing:.04em;background:#ffc83c1a;border:1px solid #ffc83c33;border-radius:20px;padding:4px 14px;font-size:13px;font-weight:700}.sr-end__weak{color:#fff6;text-align:center;font-size:12px}.sr-end__weak-notes{color:#ffb84d;font-weight:600}.sr-end__actions{flex-direction:column;gap:8px;width:100%;display:flex}.sr-end__btn{cursor:pointer;border:none;border-radius:10px;width:100%;padding:11px 20px;font-family:inherit;font-size:14px;font-weight:600;transition:filter .15s,background .15s}.sr-end__btn--primary{background:var(--accent,#ffc83c);color:#14120e}.sr-end__btn--primary:hover{filter:brightness(1.08)}.sr-end__btn--secondary{color:#e8e0d0;border:1px solid var(--border,#ffffff1a);background:#ffffff12;font-weight:500}.sr-end__btn--secondary:hover{background:#ffffff1c}.sr-end__btn--ghost{color:#ffffff4d;background:0 0;padding:6px 20px;font-size:13px;font-weight:400}.sr-end__btn--ghost:hover{color:#ffffff8c}.sr-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-latin-400-normal-C38fXH4l.woff2)format("woff2"),url(/assets/inter-latin-400-normal-CyCys3Eg.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-latin-500-normal-Cerq10X2.woff2)format("woff2"),url(/assets/inter-latin-500-normal-BL9OpVg8.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-latin-600-normal-LgqL8muc.woff2)format("woff2"),url(/assets/inter-latin-600-normal-CiBQ2DWP.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/inter-latin-700-normal-Yt3aPRUw.woff2)format("woff2"),url(/assets/inter-latin-700-normal-BLAVimhd.woff)format("woff")}@font-face{font-family:Instrument Serif;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-serif-latin-400-normal-DnYpCC2O.woff2)format("woff2"),url(/assets/instrument-serif-latin-400-normal-BVbkICAY.woff)format("woff")}@font-face{font-family:Instrument Serif;font-style:italic;font-display:swap;font-weight:400;src:url(/assets/instrument-serif-latin-400-italic-DKMiL14s.woff2)format("woff2"),url(/assets/instrument-serif-latin-400-italic-u__WvvIK.woff)format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2)format("woff2"),url(/assets/jetbrains-mono-latin-400-normal-6-qcROiO.woff)format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2)format("woff2"),url(/assets/jetbrains-mono-latin-500-normal-CJOVTJB7.woff)format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/jetbrains-mono-latin-600-normal-C8RAYTDA.woff2)format("woff2"),url(/assets/jetbrains-mono-latin-600-normal-BfsvjouI.woff)format("woff")}