:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f4f1eb;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:0;background:#030403;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;font-weight:400;line-height:1.45}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% -10%,#ffffff14,#0000 18rem),linear-gradient(#020302 0%,#071011 50%,#030403 100%);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed;opacity:.48}a{color:#f2a21a;text-decoration:none}a:hover{text-decoration:underline}#root{min-height:100vh}.app-shell{--bg:#030403;--panel:#101517;--panel-soft:#161b1d;--panel-glow:#ffffff09;--line:#ffffff21;--line-strong:#ffffff3d;--text:#f4f1eb;--muted:#9a9b9a;--faint:#666767;--orange:#f2a21a;--orange-soft:#f2a21a2e;--green:#6ec051;--blue:#54a4ff;min-height:100vh;padding:0 max(18px, env(safe-area-inset-right)) calc(118px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));color:var(--text);background:radial-gradient(circle at 18% 42%,#ffffff0e,#0000 18rem),radial-gradient(circle at 78% 20%,#f2a21a16,#0000 16rem),linear-gradient(#020302 0%,#071011 48%,#030403 100%);overflow-x:hidden}.song-header,.practice-layout{width:min(100%,708px);margin:0 auto}.song-header{padding:max(12px, env(safe-area-inset-top)) 0 0;position:relative}.song-title-row,.panel-heading,.pwa-body,.pwa-status,.bpm-control,.loop-pill,.section-loop-button,.transport-row{align-items:center;display:flex}.song-title-row{justify-content:space-between;gap:14px;min-height:58px;padding:0 2px}.mock-ruler button,.part-scroller button,.mode-grid button,.bpm-control button,.loop-pill,.section-loop-button,.mixer-row button,.save-button,.jump-button,.play-button{border:1px solid var(--line);color:var(--text);-webkit-tap-highlight-color:transparent;background:0 0}.song-title-block{min-width:0}.song-title-block span,.song-title-block p{color:var(--muted);margin:0;font-size:12px;font-weight:740;line-height:1.2}.song-title-block h1{letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:clamp(28px,7.8vw,40px);font-weight:820;line-height:1.02;overflow:hidden}.readiness-badge{color:#b6b7b5;background:#ffffff09;border:1px solid #ffffff21;border-radius:999px;flex:none;align-items:center;min-height:30px;padding:0 10px;font-size:12px;font-weight:820;display:inline-flex}.readiness-badge.is-ready{color:var(--green);background:#6ec0511c;border-color:#6ec05173}.now-panel{grid-template-columns:minmax(96px,.62fr) minmax(0,1fr);gap:10px;margin-top:6px;display:grid}.bar-readout,.section-readout{background:radial-gradient(circle at 50% 0,#ffffff0f,#0000 62%),#0d1112c2;border:1px solid #ffffff21;border-radius:12px;min-width:0;min-height:76px;padding:10px 12px}.bar-readout{font-variant-numeric:tabular-nums;align-content:center;justify-items:center;display:grid}.bar-readout span,.section-readout span,.bar-readout small,.section-readout small{color:var(--muted);font-size:12px;font-weight:760;line-height:1.1}.bar-readout strong{color:var(--orange);letter-spacing:0;font-size:clamp(36px,11vw,54px);font-weight:860;line-height:.88}.section-readout{align-content:center;gap:6px;display:grid}.section-current{justify-content:space-between;align-items:baseline;gap:8px;min-width:0;display:flex}.section-current span{color:var(--orange);text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:820;overflow:hidden}.section-current strong{color:#f2eee7;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px;font-weight:780;line-height:1.1}.section-select-row{grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;min-width:0;display:grid}.section-select-row span{color:var(--muted);font-size:11px;font-weight:760}.section-select-row select{color:#f2eee7;width:100%;min-width:0;min-height:30px;font:inherit;background:#040607c7;border:1px solid #ffffff21;border-radius:8px;padding:0 26px 0 9px;font-size:13px;font-weight:760}.section-actions{justify-content:space-between;align-items:center;gap:8px;min-width:0;display:flex}.section-loop-button{color:#c7c6c2;white-space:nowrap;background:#ffffff0a;border-radius:999px;flex:none;justify-content:center;gap:6px;width:fit-content;min-height:28px;margin-top:2px;padding:0 9px;font-size:12px;font-weight:820}.section-loop-button span{color:inherit;white-space:nowrap}.section-loop-button.is-active{color:var(--orange);background:#f2a21a21;border-color:#f2a21acc}.mock-ruler{border-bottom:1px solid #ffffff1c;height:44px;margin:8px -18px 0;position:relative;overflow:hidden}.mock-ruler-line,.mock-ruler-progress{height:2px;position:absolute;top:13px;left:0}.mock-ruler-line{background:#ffffff24;right:0}.mock-ruler-progress{background:var(--orange);width:0;box-shadow:0 0 14px #f2a21a8c}.mock-ruler-pin{background:var(--orange);border-radius:999px;width:12px;height:12px;position:absolute;top:7px;transform:translate(-50%);box-shadow:0 0 16px #f2a21a9e}.mock-ruler-pin:after{content:"";background:var(--orange);width:2px;height:44px;position:absolute;top:11px;left:5px}.mock-ruler>span{background:#ffffff2e;width:1px;height:10px;position:absolute;top:18px;transform:translate(-50%)}.mock-ruler>span.is-major{background:#ffffff57;height:24px;top:7px}.mock-ruler button{color:#80807d;font-variant-numeric:tabular-nums;border:0;width:62px;height:25px;padding:0;font-size:16px;font-weight:620;line-height:1;position:absolute;top:27px;transform:translate(-50%)}.practice-layout{grid-template-columns:minmax(0,1fr);gap:14px;padding:15px 8px 0;display:grid}.practice-card,.fine-controls,.panel{min-width:0}.practice-card{gap:11px;display:grid}.panel-heading{min-height:27px;color:var(--muted);gap:11px;margin:0}.panel-heading h2{color:#a4a5a4;letter-spacing:0;margin:0;font-size:clamp(18px,4.8vw,22px);font-weight:780;line-height:1.1}.mixer-card .panel-heading{grid-template-columns:34px minmax(0,1fr) 30px;padding:0 4px 4px;display:grid}.part-scroller{background:linear-gradient(#ffffff0b,#ffffff03),#111517d1;border:1px solid #ffffff29;border-radius:10px;grid-template-columns:repeat(5,minmax(0,1fr));display:grid;overflow:hidden;box-shadow:inset 0 1px #ffffff09}.part-scroller button{color:#9f9f9e;border:0;border-right:1px solid #ffffff1f;border-radius:0;align-content:center;justify-items:center;gap:7px;min-width:0;min-height:clamp(68px,16vw,88px);padding:11px 5px;display:grid;position:relative}.part-scroller button:last-child{border-right:0}.part-scroller button svg{color:currentColor;opacity:.92}.part-scroller strong{letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:clamp(19px,5.3vw,24px);font-weight:620;line-height:1;overflow:hidden}.part-scroller button.is-selected{z-index:1;border:2px solid var(--orange);color:var(--orange);background:radial-gradient(circle at 50% 48%,#f2a21a38,#0000 72%),#f2a21a0e;box-shadow:inset 0 0 0 1px #f2a21a33,0 0 25px #f2a21a1f}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.mode-grid button{background:radial-gradient(circle at 50% 18%,#ffffff0b,#0000 54%),linear-gradient(#ffffff0a,#ffffff03),#111618db;border-radius:10px;grid-template-columns:32px minmax(0,1fr);grid-template-areas:"icon label""icon hint";align-content:center;place-items:center start;gap:2px 9px;min-height:64px;padding:8px 10px;display:grid;box-shadow:inset 0 1px #ffffff09}.mode-grid button svg{color:#a6a7a7;grid-area:icon;width:30px;height:30px}.mode-grid strong{overflow-wrap:anywhere;text-align:left;letter-spacing:0;grid-area:label;min-width:0;font-size:clamp(16px,4.5vw,20px);font-weight:800;line-height:1.1}.mode-grid button span{min-width:0;color:var(--muted);text-align:left;grid-area:hint;font-size:11px;font-weight:760;line-height:1}.mode-grid .tone-green strong,.mode-grid .tone-green svg{color:var(--green)}.mode-grid .tone-blue strong,.mode-grid .tone-blue svg{color:var(--blue)}.mode-grid .tone-orange strong,.mode-grid .tone-orange svg{color:var(--orange)}.mode-grid .tone-muted strong,.mode-grid .tone-muted svg{color:#a2a3a3}.mode-grid button.is-selected{border-color:var(--orange);background:radial-gradient(circle at 50% 45%,#f2a21a29,#0000 70%),linear-gradient(#f2a21a13,#ffffff04),#121618e0;box-shadow:inset 0 0 0 1px #f2a21a2e,0 0 24px #f2a21a1f}.selection-summary{background:#ffffff08;border:1px solid #ffffff1c;border-radius:10px;gap:3px;padding:11px 12px;display:grid}.selection-summary strong{color:#f2eee7;font-size:14px;font-weight:820}.selection-summary span{color:var(--muted);font-size:12px;font-weight:720;line-height:1.25}.fine-controls{padding:12px max(18px, env(safe-area-inset-right)) 16px max(18px, env(safe-area-inset-left));background:radial-gradient(circle at 14% 0,#ffffff0f,#0000 16rem),linear-gradient(#ffffff06,#0000 60%);border-top:1px solid #ffffff1c;gap:13px;margin:0 -18px;display:grid}.mixer-summary{color:#b5b5b3;cursor:pointer;grid-template-columns:minmax(0,1fr) auto 24px;align-items:center;gap:10px;min-height:48px;list-style:none;display:grid}.mixer-summary::-webkit-details-marker{display:none}.mixer-summary span{align-items:center;gap:10px;min-width:0;display:inline-flex}.mixer-summary strong{color:#c7c6c2;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(17px,4.4vw,20px);font-weight:820;line-height:1.1;overflow:hidden}.mixer-summary em{color:var(--orange);font-variant-numeric:tabular-nums;font-size:13px;font-style:normal;font-weight:820}.mixer-summary svg:last-child{justify-self:end;transition:transform .15s}.fine-controls[open] .mixer-summary svg:last-child{transform:rotate(180deg)}.mixer-content{gap:10px;padding-top:6px;display:grid}.bpm-control{grid-template-columns:48px minmax(96px,1fr) 48px 48px;gap:8px;display:grid}.bpm-control button,.bpm-control strong{border:1px solid var(--line);background:#0d1112bf;border-radius:8px;min-width:0;min-height:46px}.bpm-control button{justify-content:center}.bpm-control strong{color:var(--orange);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;font-size:15px;font-weight:780;display:inline-flex}.loop-pill{color:#b5b5b3;background:#0d1112bf;border-radius:8px;justify-content:center;gap:8px;min-height:45px;font-size:13px;font-weight:760}.loop-pill.is-active{color:var(--orange);background:#f2a21a1f;border-color:#f2a21acc}.mixer-details{border:1px solid var(--line);background:#0c0f109e;border-radius:10px;overflow:hidden}.mixer-details summary{color:#b4b4b2;cursor:pointer;align-items:center;min-height:50px;padding:0 14px;font-size:14px;font-weight:760;display:flex}.mixer-details[open] summary{border-bottom:1px solid var(--line)}.mixer-list{gap:8px;padding:10px;display:grid}.mixer-row{background:#ffffff07;border:1px solid #ffffff17;border-radius:8px;grid-template-columns:8px minmax(78px,1fr) 58px 18px minmax(88px,1.1fr);align-items:center;gap:8px;min-height:48px;padding:7px 8px;display:grid}.track-dot{border-radius:999px;width:8px;height:30px}.track-title{min-width:0}.track-title strong,.track-title span{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.track-title strong{color:#e4e1dc;font-size:13px;font-weight:760}.track-title span{color:var(--faint);font-size:11px;font-weight:700}.mixer-row button{color:#b6b6b4;background:#ffffff09;border-radius:7px;min-height:34px;font-size:11px;font-weight:760}.mixer-row button.active-toggle{color:var(--orange);background:#f2a21a1f;border-color:#f2a21ad9}input[type=range]{width:100%;min-width:0;accent-color:var(--orange)}.panel.pwa-card{border:1px solid var(--line);background:linear-gradient(#ffffff0b,#ffffff03),#111618c7;border-radius:10px;gap:12px;padding:16px;display:grid}.panel.pwa-card .panel-heading h2{font-size:18px}.pwa-body{justify-content:space-between;gap:12px}.pwa-status{gap:10px;min-width:0}.pwa-status svg{color:var(--orange);flex:none}.pwa-status div{min-width:0}.pwa-status strong,.pwa-status span{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.pwa-status strong{font-size:14px}.pwa-status span{color:var(--muted);font-size:12px}.save-button{color:#0f0d09;background:var(--orange);border-color:#f2a21ab3;border-radius:8px;flex:none;min-height:42px;padding:0 13px;font-size:13px;font-weight:820}.error-message{color:#ffc4bd;background:#ff615817;border:1px solid #ff767657;border-radius:9px;margin:0;padding:12px 14px;font-size:13px;font-weight:700}.fixed-player{z-index:50;width:min(100%,708px);padding:6px max(16px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:radial-gradient(circle at 50% -8%,#ffffff17,#0000 15rem),linear-gradient(#171e20fa,#070a0afa);border:1px solid #ffffff21;border-bottom:0;border-radius:24px 24px 0 0;margin:0 auto;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -22px 70px #000000b8}.transport-row{justify-content:space-between;gap:12px}.jump-button{color:#f6f2ec;background:linear-gradient(#ffffff0c,#ffffff03),#080b0cb3;border-radius:13px;align-content:center;place-items:center;gap:3px;width:clamp(48px,13vw,62px);height:clamp(48px,13vw,62px);display:grid;box-shadow:inset 0 1px #ffffff0d}.jump-button strong{letter-spacing:0;font-size:clamp(22px,6.2vw,31px);font-weight:420;line-height:.95}.jump-button span{color:#b3b2ae;font-size:clamp(10px,3vw,14px);font-weight:800;line-height:1}.play-button{border:4px solid var(--orange);color:#fff;background:radial-gradient(circle at 50% 35%,#ffffff21,#0000 48%),linear-gradient(#202729,#080a0b);border-radius:999px;justify-content:center;align-items:center;width:clamp(62px,16.5vw,80px);height:clamp(62px,16.5vw,80px);display:inline-flex;box-shadow:0 0 0 2px #f2a21a2e,0 20px 42px #0000008a,inset 0 4px 13px #ffffff0d}.play-button svg{filter:drop-shadow(0 4px 10px #00000070);width:38px;height:38px}.fixed-context{font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;gap:8px;min-width:0;margin:3px 0 0;display:flex}.fixed-context strong{color:var(--orange);letter-spacing:0;font-size:clamp(15px,4vw,20px);font-weight:820;line-height:1.05}.fixed-context span,.fixed-context em{color:#b4b1ac;font-size:clamp(12px,3.2vw,15px);font-style:normal;font-weight:720;line-height:1.1}.fixed-context em{color:var(--green)}button:focus-visible,summary:focus-visible{outline-offset:3px;outline:2px solid #f2a21ae6}@media (width<=430px){.app-shell{padding-right:max(14px, env(safe-area-inset-right));padding-left:max(14px, env(safe-area-inset-left))}.mock-ruler,.fine-controls{margin-left:-14px;margin-right:-14px}.practice-layout{gap:24px;padding-left:0;padding-right:0}.mode-grid{gap:12px}.fixed-player{border-radius:22px 22px 0 0}.transport-row{gap:10px}}@media (width<=360px){.part-scroller strong,.mode-grid strong{font-size:20px}.mixer-row{grid-template-columns:8px minmax(64px,1fr) 52px}.mixer-row svg,.mixer-row input{display:none}}