:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#08090d;--panel:#0f1218;--panel-raised:#151922;--line:#ffffff17;--line-soft:#ffffff0d;--text:#eee9df;--muted:#9a978f;--muted-strong:#bdb8ac;--accent:#f0b45c;--accent-bright:#ffd08a;--accent-soft:#f0b45c1f;--red:#ef5b5b;--green:#74d39a;--radius-lg:20px;--radius-md:14px;--font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html{height:100%}body{background:radial-gradient(1100px 520px at 12% -12%, #f0b45c1c, transparent 62%), radial-gradient(900px 460px at 100% 0%, #5870b41a, transparent 60%), var(--bg);min-height:100%;color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.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}.app{flex-direction:column;gap:14px;width:100%;max-width:1500px;min-height:100dvh;margin-inline:auto;padding:18px clamp(12px,2.2vw,28px) 24px;display:flex}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 20px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{width:42px;height:42px;color:var(--accent);background:linear-gradient(145deg,#f0b45c3d,#f0b45c0f);border:1px solid #f0b45c52;border-radius:13px;place-items:center;display:grid;box-shadow:0 8px 24px -14px #f0b45ccc}.brand-mark svg{width:26px;height:26px}.brand-text h1{letter-spacing:-.02em;margin:0;font-size:21px;font-weight:650}.brand-text p{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:2px 0 0;font-size:10.5px;font-weight:550}.connection{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.status{border:1px solid var(--line);max-width:100%;color:var(--muted-strong);white-space:nowrap;text-overflow:ellipsis;background:#0f1218b3;border-radius:999px;align-items:center;gap:7px;padding:7px 12px;font-size:12px;display:inline-flex;overflow:hidden}.status:before{content:"";background:#6b6f78;border-radius:50%;flex:none;width:7px;height:7px;box-shadow:0 0 0 3px #6b6f7824}.status[data-state=ready]{color:var(--text);border-color:#74d39a47}.status[data-state=ready]:before{background:var(--green);box-shadow:0 0 0 3px #74d39a29}.status[data-state=requesting]{color:var(--accent-bright);border-color:#f0b45c4d}.status[data-state=requesting]:before{background:var(--accent);animation:1.1s ease-in-out infinite pulse;box-shadow:0 0 0 3px #f0b45c2e}.status[data-state=unsupported],.status[data-state=error]{color:#ffb1b1;border-color:#ef5b5b4d}.status[data-state=unsupported]:before,.status[data-state=error]:before{background:var(--red);box-shadow:0 0 0 3px #ef5b5b29}.device-select{border:1px solid var(--line);background-color:var(--panel);background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);max-width:230px;height:36px;color:var(--text);appearance:none;background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-repeat:no-repeat;background-size:5px 5px;border-radius:10px;padding:0 30px 0 12px;font-size:12.5px}.device-select:disabled{opacity:.55}.btn{border:1px solid var(--line);background:var(--panel-raised);height:36px;color:var(--text);border-radius:10px;justify-content:center;align-items:center;gap:7px;padding:0 14px;font-size:12.5px;font-weight:550;transition:background .15s,border-color .15s,transform 80ms;display:inline-flex}.btn:hover{background:#1c212c;border-color:#ffffff29}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--accent{color:#241606;background:linear-gradient(#f3bd6d,#e0a144);border-color:#f0b45c66;font-weight:650}.btn--accent:hover{background:linear-gradient(#ffcd86,#eab05a);border-color:#f0b45c99}.btn--ghost{color:var(--muted-strong);background:0 0}.btn--icon{border-radius:8px;width:30px;height:30px;padding:0;font-size:16px;line-height:1}.btn--toggle{height:30px;color:var(--muted-strong);border-radius:8px;padding:0 11px;font-size:12px}.btn--toggle.is-on{background:var(--accent-soft);color:var(--accent-bright);border-color:#f0b45c66}.btn--tiny{height:28px;color:var(--muted-strong);background:0 0;border-radius:8px;padding:0 9px;font-size:11px;font-weight:600}.btn--danger{color:#f3a0a0}.btn--danger:hover{background:#ef5b5b1f;border-color:#ef5b5b4d}.main{flex-direction:column;flex:1;gap:14px;display:flex}.mode-bar{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.segmented{border:1px solid var(--line);background:#0f1218bf;border-radius:12px;gap:3px;padding:3px;display:inline-flex}.segmented-btn{height:30px;color:var(--muted-strong);background:0 0;border:0;border-radius:9px;padding:0 15px;font-size:12px;font-weight:600;transition:background .15s,color .15s}.segmented-btn:hover{color:var(--text)}.segmented-btn.is-active{background:var(--panel-raised);color:var(--text);box-shadow:inset 0 1px #ffffff0f}.mode-hint{color:var(--muted);margin:0;font-size:12px}.practice-panel{border:1px solid var(--line);border-radius:var(--radius-md);background:linear-gradient(#161a23eb,#0e1117eb);flex-direction:column;gap:10px;padding:13px 16px;display:flex;box-shadow:inset 0 1px #ffffff0a}.practice-panel[hidden]{display:none}.practice-head,.practice-controls-row,.practice-stats-row{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.field{flex-direction:column;gap:5px;min-width:0;display:flex}.field>span{letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-size:9.5px;font-weight:650}.field--inline{color:var(--muted);letter-spacing:.09em;text-transform:uppercase;flex-direction:row;align-items:center;gap:7px;font-size:10px;font-weight:650}#song-select,#practice-hand{border:1px solid var(--line);background-color:var(--panel);background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);height:32px;color:var(--text);appearance:none;background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px;background-repeat:no-repeat;background-size:5px 5px;border-radius:9px;padding:0 28px 0 10px;font-size:12.5px}#song-select{min-width:250px;max-width:100%}#practice-hand{height:30px;font-size:12px}.file-btn{cursor:pointer;position:relative;overflow:hidden}.file-btn input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.song-meta{min-width:0;color:var(--muted);flex:260px;margin:0;font-size:12px;line-height:1.4}.practice-controls-row .btn{height:32px}.slider--short{width:90px}#tempo-value{min-width:34px;font-family:var(--font-mono);color:var(--muted-strong);text-align:right;font-size:11.5px}.switch{color:var(--muted-strong);cursor:pointer;align-items:center;gap:7px;font-size:12px;display:inline-flex}.switch input{width:15px;height:15px;accent-color:var(--accent);margin:0}.switch input:disabled{opacity:.4;cursor:not-allowed}.switch:has(input:disabled){opacity:.55;cursor:not-allowed}.practice-stats-row{border-top:1px solid var(--line-soft);padding-top:10px}.stat{flex-direction:column;gap:1px;min-width:58px;display:flex}.stat>span{letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-size:9px;font-weight:650}.stat strong{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text);font-size:14px}.practice-message{color:var(--muted-strong);flex:240px;margin:0;font-size:12px;line-height:1.45}.practice-credit{color:var(--muted);margin-left:auto;font-size:10.5px}.practice-credit a{color:var(--muted-strong)}.app.is-practice .library,.app.is-practice .record-area{display:none}.app.is-practice .stage{height:clamp(300px,44vh,520px)}.stage{border:1px solid var(--line);border-radius:var(--radius-lg);background:#0a0c11;height:clamp(300px,52vh,600px);position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 30px 70px -40px #000000e6}.stage-scroll{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#ffffff29 transparent;position:absolute;inset:0;overflow:hidden}.stage-scroll.is-scrollable{overflow-x:auto}.stage-scroll::-webkit-scrollbar{height:6px}.stage-scroll::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:999px}.stage-scroll::-webkit-scrollbar-track{background:0 0}#piano-canvas{touch-action:pan-x;width:100%;height:100%;display:block}.stage-badges{pointer-events:none;flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute;top:14px;right:14px}.badge{border:1px solid var(--line);color:var(--muted-strong);letter-spacing:.01em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;background:#0a0c11c7;border-radius:999px;align-items:center;gap:8px;padding:6px 11px;font-size:11.5px;transition:opacity .25s,transform .25s;display:inline-flex;transform:translateY(-5px)}.badge.is-visible{opacity:1;transform:none}.badge--loading,.badge--ok{color:var(--accent-bright);border-color:#f0b45c47}.badge--ok{color:#c3f0d4;border-color:#74d39a47}.badge--warn{color:#ffd2a1;border-color:#f0b45c59}.badge--pedal{color:#241606;background:var(--accent);border-color:#f0b45c99;font-weight:650}.badge--pedal:before{content:"";background:#241606;border-radius:50%;width:6px;height:6px}.spinner{border:1.5px solid;border-top-color:#0000;border-radius:50%;width:11px;height:11px;animation:.8s linear infinite spin}.badge--ok .spinner,.badge--warn .spinner{display:none}.controls{border:1px solid var(--line);border-radius:var(--radius-md);background:#11141bb8;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:12px 16px;display:flex}.control{flex-direction:column;gap:6px;min-width:0;display:flex}.control--end{align-self:center;margin-left:auto}.control label,.control-label{letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-size:9.5px;font-weight:650}.inline{align-items:center;gap:7px;display:flex}.octave{min-width:30px;font-family:var(--font-mono);text-align:center;color:var(--text);font-size:13px}.slider{appearance:none;cursor:pointer;background:0 0;width:132px;height:20px;margin:0}.slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent), #4a4d55);border-radius:999px;height:4px}.slider::-webkit-slider-thumb{appearance:none;background:var(--text);border:0;border-radius:50%;width:14px;height:14px;margin-top:-5px;box-shadow:0 2px 8px #00000080}.slider::-moz-range-track{background:#4a4d55;border-radius:999px;height:4px}.slider::-moz-range-progress{background:var(--accent);border-radius:999px;height:4px}.slider::-moz-range-thumb{background:var(--text);border:0;border-radius:50%;width:14px;height:14px}.beat-dot{color:currentColor;min-width:16px;height:16px;font-family:var(--font-mono);text-align:center;background:#00000040;border-radius:5px;padding:0 4px;font-size:10px;line-height:16px;display:none}.btn--toggle.is-on .beat-dot{display:inline-block}.bpm{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-items:center;gap:5px;font-size:10px;display:inline-flex}.bpm input{border:1px solid var(--line);background:var(--panel);width:54px;height:30px;color:var(--text);font-family:var(--font-mono);text-align:center;appearance:textfield;border-radius:8px;padding:0 6px;font-size:12px}.bpm input::-webkit-outer-spin-button{appearance:none;margin:0}.bpm input::-webkit-inner-spin-button{appearance:none;margin:0}.library{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(#141821eb,#0c0f15f0);padding:16px 18px 18px;box-shadow:inset 0 1px #ffffff0a}.library-head{border-bottom:1px solid var(--line-soft);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 18px;padding-bottom:14px;display:flex}.record-area{flex-wrap:wrap;flex:460px;align-items:center;gap:10px 14px;display:flex}.record-btn{color:#ffb3b3;letter-spacing:.01em;background:#ef5b5b1a;border:1px solid #ef5b5b59;border-radius:999px;align-items:center;gap:9px;height:44px;padding:0 22px;font-size:13.5px;font-weight:650;transition:background .15s,color .15s,box-shadow .15s;display:inline-flex}.record-btn:hover{background:#ef5b5b2e;border-color:#ef5b5b8c}.record-btn.is-recording{color:#210606;background:linear-gradient(#f36a6a,#dd4a4a);border-color:#ff9c9c;box-shadow:0 0 0 4px #ef5b5b24}.record-glyph{background:currentColor;border-radius:50%;width:11px;height:11px;transition:border-radius .15s}.record-btn.is-recording .record-glyph{border-radius:2px;animation:1.2s ease-in-out infinite pulse}.clock{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--text);font-size:21px}.record-hint{min-width:150px;color:var(--muted);flex:220px;margin:0;font-size:12px;line-height:1.45}.record-btn.is-recording~.clock{color:#ffb3b3}.library-title{align-items:center;gap:9px;display:flex}.library-title h2{letter-spacing:.13em;text-transform:uppercase;color:var(--muted-strong);margin:0;font-size:11px;font-weight:650}.count{min-width:22px;color:var(--muted-strong);font-family:var(--font-mono);text-align:center;background:#ffffff12;border-radius:999px;padding:2px 7px;font-size:10.5px}.take-list{flex-direction:column;gap:6px;max-height:236px;margin:12px 0 0;padding:0;list-style:none;display:flex;overflow-y:auto}.take{border:1px solid #0000;border-radius:12px;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:7px 9px;transition:background .15s,border-color .15s;display:grid}.take:hover{border-color:var(--line-soft);background:#ffffff08}.take.is-playing{background:#f0b45c0f;border-color:#f0b45c40}.take-play{border:1px solid var(--line);background:var(--panel-raised);width:38px;height:38px;color:var(--accent);border-radius:50%;place-items:center;padding:0;transition:background .15s,border-color .15s;display:grid}.take-play:hover{background:var(--accent-soft);border-color:#f0b45c66}.take-play svg{fill:currentColor;width:15px;height:15px}.take-play .icon-stop,.take.is-playing .take-play .icon-play{display:none}.take.is-playing .take-play .icon-stop{display:block}.take-info{min-width:0}.take-name{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:13.5px;font-weight:550;overflow:hidden}.take-meta{color:var(--muted);margin:2px 0 0;font-size:11.5px}.take-time{min-width:96px;color:var(--accent-bright);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;opacity:0;font-size:11px}.take.is-playing .take-time{opacity:1}.take-actions{align-items:center;gap:4px;display:flex}.empty{border:1px dashed var(--line);color:var(--muted);text-align:center;border-radius:12px;margin:14px 0 2px;padding:20px 16px;font-size:12.5px;line-height:1.55}.empty kbd{margin:0 1px}kbd{border:1px solid var(--line);min-width:18px;color:var(--muted-strong);font-family:var(--font-mono);text-align:center;background:#ffffff0d;border-bottom-color:#ffffff29;border-radius:4px;padding:1px 4px;font-size:10.5px;display:inline-block}.footer{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:4px;font-size:11.5px;line-height:1.6;display:flex}.footer p{margin:0}.footer strong{color:var(--muted-strong);font-weight:550}.privacy{color:#75736d}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@media (width<=980px){.stage{height:clamp(280px,46vh,460px)}.control--end{margin-left:0}}@media (width<=760px){.app{gap:12px;padding-top:12px}.topbar{align-items:flex-start}.connection{width:100%}.status{flex:100%}.device-select{flex:140px;max-width:none}.stage{border-radius:16px;height:clamp(240px,42vh,380px)}.controls{gap:10px 18px;padding:10px 12px}.library{border-radius:16px;padding:14px}.record-area{flex-basis:100%}.record-hint{flex-basis:100%;order:3}.library-title{justify-content:space-between;width:100%}.take{grid-template-columns:36px minmax(0,1fr) auto}.take-time{display:none}}@media (width<=520px){.brand-text p{display:none}.take-actions{gap:0}.take-actions .btn{padding:0 7px}.slider{width:104px}.footer{display:block}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}