:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-base:#0f1115;--bg-panel:#171a21;--bg-raised:#1e232e;--border:#262c38;--border-strong:#333b4a;--text:#e8eaf0;--text-muted:#98a1b2;--waiting:#eab308;--success:#22c55e;--error:#ef4444;--active:#3b82f6;--radius:12px;--radius-sm:8px;--topbar-height:64px;--touch-target:48px}*,:before,:after{box-sizing:border-box;margin:0}html,body,#root{height:100dvh;overflow:hidden}body{background:var(--bg-base);color:var(--text);-webkit-font-smoothing:antialiased;font-family:system-ui,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px;line-height:1.5}h1,h2,h3{font-weight:600;line-height:1.2}button{font:inherit;color:inherit}button,select,input,label,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--active);outline-offset:2px}.screen{flex-direction:column;flex:1;gap:16px;width:100%;max-width:1440px;min-height:0;margin:0 auto;padding:24px 32px 20px;display:flex;overflow:hidden}.screen-scroll{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.screen-header{flex:none;justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.screen-title{font-size:26px}.screen-subtitle{color:var(--text-muted);margin-top:6px;font-size:14px}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px}.btn{min-height:var(--touch-target);border-radius:var(--radius-sm);background:var(--bg-raised);border:1px solid var(--border-strong);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:11px 20px;font-size:15px;font-weight:500;transition:border-color .15s,background .15s,filter .15s;display:inline-flex}@media (hover:hover){.btn:hover:enabled{border-color:var(--text-muted)}}.btn:active:enabled{filter:brightness(1.15)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--active);color:#fff;border-color:#0000}@media (hover:hover){.btn-primary:hover:enabled{filter:brightness(1.1);border-color:#0000}}.chip{border:1px solid var(--border-strong);color:var(--text-muted);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:4px 12px;font-size:12.5px;font-weight:500;display:inline-flex}.chip-info{color:#93c5fd;background:#3b82f61a;border-color:#3b82f659}.chip-warning{color:#fde047;background:#eab3081a;border-color:#eab30859}.chip-success{color:#86efac;background:#22c55e1a;border-color:#22c55e59}.chip-error{color:#fca5a5;background:#ef44441a;border-color:#ef444459}.muted{color:var(--text-muted)}input[type=text],input[type=search],input[type=number],select,textarea{min-height:var(--touch-target);font:inherit;font-size:15px}.learn-body{padding-bottom:4px}.learn-back{flex:none;min-width:108px}.learn-section-title{color:var(--text);font-size:17px}.learn-status{font-size:14px}.learn-hub,.learn-levels{flex-direction:column;gap:16px;display:flex}.learn-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.learn-card{background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:8px;padding:20px 18px;display:flex}.learn-card-glyph{font-size:40px;line-height:1.1}.learn-card-title{color:var(--text);font-size:19px}.learn-card-text{color:var(--text-muted);max-width:34ch;font-size:14px}.learn-card-actions{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:auto;padding-top:12px;display:flex}.learn-card-btn{flex:40%;min-width:112px;min-height:56px;font-size:16px}.level-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0;list-style:none;display:grid}.level-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:8px;width:100%;height:100%;padding:16px;transition:border-color .15s,background .15s;display:flex}@media (hover:hover){.level-card:hover{border-color:var(--border-strong);background:var(--bg-raised)}}.level-card.is-locked{opacity:.72}@media (hover:hover){.level-card.is-locked:hover{background:var(--bg-panel)}}.level-card-top{align-items:center;gap:10px;display:flex}.level-card-order{background:var(--bg-raised);border:1px solid var(--border-strong);width:32px;height:32px;color:var(--text);border-radius:50%;flex:none;place-items:center;font-size:14px;font-weight:600;display:grid}.level-card.is-locked .level-card-order{color:var(--text-muted)}.level-card-title{min-width:0;font-size:16px}.level-card-goal{color:var(--text-muted);font-size:13.5px}.level-card-progress{flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;display:flex}.level-card-stars{color:var(--waiting);letter-spacing:.06em;font-size:16px}.level-card-best{color:var(--text)}.level-card-lock{gap:4px}.level-card-hint{font-size:12.5px}.level-card-actions{gap:10px;margin-top:auto;padding-top:12px;display:flex}.level-card-actions .btn{min-width:120px}.learn-theory{flex-direction:column;gap:14px;display:flex}.learn-chips{flex-wrap:wrap;gap:10px;display:flex}.learn-chip{min-height:var(--touch-target);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--text-muted);cursor:pointer;padding:0 18px;font-size:15px}@media (hover:hover){.learn-chip:hover{border-color:var(--border-strong);color:var(--text)}}.learn-chip:active{filter:brightness(1.15)}.learn-chip[aria-selected=true]{background:var(--bg-raised);border-color:var(--active);color:var(--text);font-weight:600}.learn-theory-panel{flex-direction:column;gap:12px;display:flex}.learn-theory-text{color:var(--text-muted);max-width:72ch;font-size:14.5px}.learn-score-host,.learn-keyboard-host{background:#fff;width:100%;max-width:720px;margin-inline:auto}.learn-score-host{border-radius:var(--radius) var(--radius) 0 0;overscroll-behavior:contain;touch-action:pan-y;height:clamp(240px,32vh,340px);padding:12px 16px;overflow:auto}.learn-score-host [id^=cursorImg]{display:none!important}.learn-keyboard-host{border-radius:0 0 var(--radius) var(--radius);height:120px;overflow:hidden}.learn-note-name{text-align:center;flex-direction:column;align-items:center;gap:4px;min-height:62px;display:flex}.learn-note-value{color:var(--text);font-size:40px;font-weight:700;line-height:1.1}.learn-note-hint{color:var(--text-muted);font-size:14px}.learn-game{--learn-game-topbar-h:52px;grid-template-rows:var(--learn-game-topbar-h) minmax(0, 1fr);flex:1;min-height:0;display:grid;overflow:hidden}.learn-game-topbar{background:var(--bg-panel);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:2px 12px;display:flex;overflow:hidden}.learn-game-back{width:var(--touch-target);height:var(--touch-target);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-raised);cursor:pointer;flex:none;place-items:center;font-size:20px;line-height:1;display:grid}@media (hover:hover){.learn-game-back:hover{border-color:var(--text-muted)}}.learn-game-back:active{filter:brightness(1.15)}.learn-game-title{white-space:nowrap;text-overflow:ellipsis;flex:0 auto;min-width:0;font-size:16px;overflow:hidden}.learn-game-body{place-items:center;min-height:0;padding:20px;display:grid;overflow:hidden}.learn-game-panel{text-align:center;flex-direction:column;align-items:center;gap:12px;max-width:560px;display:flex}.learn-game-goal{max-width:44ch;font-size:14px}.learn-game-topbar-status{white-space:nowrap;align-items:center;gap:14px;margin-left:auto;display:flex}.learn-game-clock,.learn-game-progress{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:15px}.learn-game-time-line{color:var(--text-muted);font-size:14px}.learn-game-round{flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;max-width:720px;height:100%;min-height:0;display:flex}.learn-game-score{border-radius:var(--radius);background:#fff;flex:none;width:min(100%,400px);height:clamp(240px,32vh,300px);padding:8px 16px 12px;overflow:hidden}.learn-game-score div:has(>svg){flex-direction:column;justify-content:flex-end;height:100%;display:flex}.learn-game-score [id^=cursorImg]{display:none!important}.learn-game-feedback{text-align:center;justify-content:center;align-items:center;min-height:46px;display:flex}.learn-game-verdict{font-size:24px;font-weight:700;line-height:1.1}.learn-game-feedback.is-correct .learn-game-verdict{color:var(--success)}.learn-game-feedback.is-wrong .learn-game-verdict{color:var(--error)}.learn-game-hint{color:var(--text-muted);font-size:14.5px}.learn-game-names{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;width:100%;max-width:640px;display:grid}.learn-game-name-btn{min-height:56px;padding:0;font-size:18px;font-weight:600}.learn-game-keyboard{border-radius:var(--radius);background:#fff;flex:none;width:100%;height:clamp(110px,16vh,150px);overflow:hidden}.learn-game-midi-hint{font-size:15px}.learn-game-choice,.learn-game-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.learn-game-start,.learn-game-actions .btn{min-width:180px;min-height:56px;font-size:16px}.learn-game-result-title{font-size:22px}.learn-game-stars{letter-spacing:.08em;color:var(--waiting);font-size:44px;line-height:1.1}.learn-game-score-line{font-size:19px}.learn-game-save-error{color:var(--error);font-size:14px}.library-import{border-style:dashed;border-color:var(--border-strong);flex:none;padding:20px 24px;transition:border-color .15s,background .15s}.library-import.is-dragover{border-color:var(--active);background:#3b82f614}.library-import-text{font-size:14px}.library-import-link{color:var(--active);font-size:inherit;cursor:pointer;background:0 0;border:none;padding:6px 2px;text-decoration:underline}.library-import-link:disabled{opacity:.45;cursor:not-allowed}.library-disclaimer{margin-top:8px;font-size:12.5px}.library-importing{margin-top:8px;font-size:13px}.library-errors{border-radius:var(--radius-sm);background:#ef444414;border:1px solid #ef444473;flex:none;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 18px;display:flex}.library-errors-list{flex-direction:column;gap:4px;margin:0;padding-left:18px;font-size:13.5px;display:flex}.library-results{padding-bottom:4px}.library-status{font-size:14px}.library-toolbar{flex-direction:column;flex:none;gap:12px;padding:16px 20px;display:flex}.library-toolbar-row{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.library-search{border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-base);min-width:220px;max-width:420px;color:var(--text);font:inherit;flex:260px;padding:10px 14px;font-size:15px}.library-search::placeholder{color:var(--text-muted)}.library-field{flex-direction:column;gap:4px;display:flex}.library-field-last{margin-left:auto}.library-field-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:11px;font-weight:600}.library-select{border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-base);color:var(--text);font:inherit;cursor:pointer;padding:10px 12px;font-size:15px}.library-tag-filter{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.library-tag-chip{cursor:pointer;background:0 0;min-height:40px;padding:6px 16px}.library-tag-chip[aria-pressed=true]{color:#93c5fd;background:#3b82f624;border-color:#3b82f68c}.library-results-head{flex:none;justify-content:space-between;align-items:center;gap:16px;display:flex}.library-count{font-size:13px}.library-clear{font-size:14px}.library-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:0;list-style:none;display:grid}.library-card{text-align:left;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:4px;width:100%;height:100%;padding:16px;transition:border-color .15s,background .15s;display:flex}@media (hover:hover){.library-card:hover{border-color:var(--border-strong);background:var(--bg-raised)}}.library-card-chips{align-items:center;gap:6px;display:flex}.library-card-actions{flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px;display:flex}.library-card-actions .btn{flex:auto;padding:10px 14px;font-size:14px}.library-card-top{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.library-card-duration{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:12px}.library-card-title{font-size:16px;font-weight:600}.library-card-composer{color:var(--text-muted);font-size:13px}.library-card-bottom{justify-content:space-between;align-items:center;min-height:20px;margin-top:12px;display:flex}.library-dots{gap:4px;display:flex}.library-dot{background:var(--border-strong);border-radius:50%;width:7px;height:7px}.library-dot.is-filled{background:var(--waiting)}.library-card-tags{flex-wrap:wrap;margin-top:8px}.library-history-toggle{min-height:var(--touch-target);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-base);color:var(--text-muted);text-align:left;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;font-size:13px;display:flex}@media (hover:hover){.library-history-toggle:hover{border-color:var(--border-strong);color:var(--text)}}.library-history-caret{font-size:10px}.library-history-list{flex-direction:column;gap:4px;margin:8px 0 0;padding:0;list-style:none;display:flex}.library-history-row{border-radius:var(--radius-sm);background:var(--bg-base);color:var(--text-muted);align-items:center;gap:8px;padding:4px 8px;font-size:12px;display:flex}.library-history-when{flex:auto}.library-history-accuracy{color:var(--text);font-variant-numeric:tabular-nums}.library-history-stars{color:var(--waiting);letter-spacing:1px}.library-modal-backdrop{z-index:20;background:#0f1115b8;justify-content:center;align-items:center;padding:32px;display:flex;position:fixed;inset:0}.library-modal{background:var(--bg-raised);border-color:var(--border-strong);flex-direction:column;gap:16px;width:100%;max-width:520px;max-height:100%;display:flex;overflow-y:auto}.library-modal-title{font-size:18px}.library-form-field{flex-direction:column;gap:6px;display:flex}.library-input{border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-base);color:var(--text);font:inherit;padding:10px 14px;font-size:15px}.library-difficulty-picker{align-items:center;gap:4px;display:flex}.library-star-btn{min-width:var(--touch-target);min-height:var(--touch-target);color:var(--border-strong);cursor:pointer;background:0 0;border:none;padding:4px;font-size:26px;line-height:1}.library-star-btn[aria-pressed=true]{color:var(--waiting)}.library-difficulty-clear{margin-left:12px;font-size:14px}.library-tags-editor{flex-direction:column;gap:10px;display:flex}.library-tags-current,.library-tags-suggestions{flex-wrap:wrap;align-items:center;gap:6px;min-height:24px;font-size:12.5px;display:flex}.library-tag-remove{min-width:28px;min-height:28px;color:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-size:16px;line-height:1}.library-tags-add{gap:8px;display:flex}.library-tags-add .library-input{flex:auto}.library-modal-actions{gap:8px;margin-top:4px;display:flex}.midi-panels{grid-template-columns:400px 1fr;align-items:start;gap:20px;display:grid}.midi-right{flex-direction:column;gap:20px;display:flex}.midi-tester-empty{margin-top:16px;font-size:13.5px}.midi-tester-note{align-items:baseline;gap:12px;margin-top:16px;display:flex}.midi-tester-name{color:var(--success);font-variant-numeric:tabular-nums;font-size:40px;font-weight:700;line-height:1}.midi-tester-velocity{font-size:13.5px}.midi-panel-title{font-size:16px}.midi-permission-state{margin-top:14px}.midi-permission-hint{margin:12px 0 20px;font-size:13.5px}.midi-devices-hint{margin-top:6px;font-size:13px}.midi-device-list{flex-direction:column;gap:8px;margin-top:16px;padding:0;list-style:none;display:flex}.midi-device{background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;text-align:left;align-items:center;gap:14px;width:100%;min-height:64px;padding:14px 18px;transition:border-color .15s,box-shadow .15s;display:flex}@media (hover:hover){.midi-device:hover{border-color:var(--border-strong)}}.midi-device.is-selected{border-color:var(--active);box-shadow:0 0 0 1px var(--active)}.midi-device-icon{font-size:20px;line-height:1}.midi-device-text{flex-direction:column;display:flex}.midi-device-name{font-size:14.5px;font-weight:600}.midi-device-manufacturer{color:var(--text-muted);font-size:12.5px}.midi-device-state{color:var(--text-muted);margin-left:auto;font-size:12.5px}.midi-device.is-selected .midi-device-state{color:var(--active);font-weight:600}.practice{--practice-topbar-h:52px;--practice-guide-h:clamp(92px, 14dvh, 124px);--practice-hud-h:36px;grid-template-rows:var(--practice-topbar-h) minmax(0, 1fr);flex:1;min-height:0;display:grid;overflow:hidden}.practice-topbar{background:var(--bg-panel);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:2px 12px;display:flex;overflow:hidden}.practice-back{width:var(--touch-target);height:var(--touch-target);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-raised);cursor:pointer;flex:none;place-items:center;font-size:20px;line-height:1;display:grid}@media (hover:hover){.practice-back:hover{border-color:var(--text-muted)}}.practice-title{white-space:nowrap;text-overflow:ellipsis;flex:0 auto;min-width:0;font-size:16px;overflow:hidden}.practice-mode-badge{background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text);white-space:nowrap;border-radius:999px;flex:none;padding:4px 12px;font-size:12.5px;font-weight:600}.practice-topbar-right{align-items:center;gap:8px;margin-left:auto;display:flex}.practice-topbar-btn{white-space:nowrap;min-height:44px;padding:8px 14px;font-size:14px}.practice-body{grid-template-rows:minmax(0,1fr) auto;min-height:0;display:grid;position:relative}.practice-body.is-full-score{grid-template-rows:minmax(0,1fr)}.practice-stage{min-height:0;padding:10px 14px 0;display:flex;position:relative}.practice-stage-placeholder{background:var(--bg-panel);border:2px dashed var(--border-strong);border-radius:var(--radius);min-height:0;color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;display:flex}.practice-stage-glyph{color:var(--border-strong);font-size:64px;line-height:1}.practice-stage-title{color:var(--text);font-size:18px;font-weight:600}.practice-stage-hint{font-size:14px}.practice-stage-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px;display:flex}.practice-stage-placeholder>.btn{margin-top:10px}.practice-stage-live{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative}.practice-score-host{border-radius:var(--radius);touch-action:pinch-zoom;background:#fff;flex:1;min-width:0;min-height:0;padding:12px 16px;overflow:hidden}.practice-score-host.is-loop-select{touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;box-shadow:inset 0 0 0 2px #eab3088c}.practice-stage-live.is-wrong-flash .practice-score-host{box-shadow:0 0 0 3px var(--error)}.practice-body:has(.practice-keyboard-host) .practice-score-host{border-radius:var(--radius) var(--radius) 0 0}.practice-stage-overlay{text-align:center;padding:24px;position:absolute;inset:0;overflow:auto}.practice-stage-instructions{max-width:480px}.practice-banner{z-index:6;color:#fde047;background:#2b2410;border:1px solid #eab30873;border-radius:999px;align-items:center;gap:16px;max-width:min(760px,100% - 48px);padding:8px 10px 8px 18px;font-size:13.5px;display:flex;position:absolute;top:20px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000073}.practice-banner .btn{white-space:nowrap;min-height:40px;padding:8px 14px;font-size:13.5px}.practice-pager{z-index:5;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:50%;right:22px;transform:translateY(-50%)}.practice-pager-btn{width:var(--touch-target);height:var(--touch-target);border:1px solid var(--border-strong);color:var(--text);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#1e232eeb;border-radius:50%;place-items:center;font-size:15px;line-height:1;display:grid;box-shadow:0 8px 24px #00000073}@media (hover:hover){.practice-pager-btn:not(:disabled):hover{border-color:var(--text-muted)}}.practice-pager-btn:disabled{opacity:.4;cursor:not-allowed}.practice-pager-count{border:1px solid var(--border-strong);font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;-webkit-user-select:none;user-select:none;background:#1e232eeb;border-radius:999px;padding:3px 9px;font-size:12.5px;font-weight:600}.practice-restore{z-index:6;background:#1e232eeb;border-radius:999px;position:absolute;bottom:20px;right:24px;box-shadow:0 8px 24px #00000073}.practice-stage-overlay.is-select{border-style:solid;border-color:var(--border);justify-content:center;padding:20px}.mode-select{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.mode-select-title{color:var(--text);font-size:20px;font-weight:600}.mode-cards{grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px;width:100%;max-width:1100px;display:grid}@media (width<=900px){.mode-cards{grid-template-columns:1fr;max-width:560px}}.mode-card{background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:8px;padding:20px 18px;display:flex}.mode-card-glyph{font-size:40px;line-height:1.1}.mode-card-title{color:var(--text);font-size:19px}.mode-card-text{color:var(--text-muted);max-width:34ch;font-size:14px}.mode-card-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-top:6px;font-size:11px;font-weight:600}.mode-card-actions{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:auto;padding-top:8px;display:flex}.mode-card-btn{flex:30%;min-width:96px;min-height:56px;font-size:16px}.mode-card-btn.is-wide{flex:100%}.mode-card-btn.is-current{border-color:var(--active);color:var(--text)}.practice-dock{flex-direction:column;min-width:0;display:flex}.practice-guide-row{height:var(--practice-guide-h);flex:none;align-items:stretch;gap:8px;min-width:0;padding:0 14px;display:flex}.practice-keyboard-host{border-radius:0 0 var(--radius) var(--radius);background:#fff;flex:auto;min-width:0;overflow:hidden}.practice-guide-row .hand-guide{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);flex:none;gap:10px;padding:4px 12px;display:flex}.hand-guide-hand{flex-direction:column;align-items:center;gap:2px;min-height:0;display:flex}.hand-guide-svg{flex:auto;width:auto;height:100%;min-height:0;max-height:88px}.hand-guide-caption{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);flex:none;font-size:10px}.hand-guide-shape{fill:var(--bg-raised);stroke:var(--border-strong);stroke-width:1.5px}.hand-guide-bubble{fill:#0000}.hand-guide-number{fill:var(--text-muted);font-size:10px;font-weight:600}.hand-guide-finger.is-active .hand-guide-shape{fill:currentColor;stroke:currentColor}.hand-guide-finger.is-active .hand-guide-bubble{fill:#0f11158c}.hand-guide-finger.is-active .hand-guide-number{fill:#fff}.practice-statusbar{height:var(--practice-hud-h);flex:none;align-items:center;gap:16px;padding:0 20px;display:flex;overflow:hidden}.practice-statusbar-spacer{flex:1}.practice-progress{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;font-size:13px}.practice-progressbar{background:var(--bg-raised);border-radius:999px;flex:1;min-width:80px;height:8px;overflow:hidden}.practice-progressbar-fill{background:var(--success);height:100%;transition:width .15s}.practice-stats{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;font-size:13.5px}.practice-waiting{color:var(--waiting);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;font-size:15px;font-weight:600}.practice-waiting.is-wrong{color:var(--error)}.practice-waiting.is-listening{color:var(--active);font-weight:500}.practice-loop-badge{color:#c7d2fe;white-space:nowrap;background:#6366f12e;border:1px solid #6366f173;border-radius:999px;flex:none;padding:3px 10px;font-size:12px;font-weight:600}.practice-loop-badge.is-warning{color:#fde047;background:#eab30826;border-color:#eab30873}.practice-controls-dock{flex:none;position:relative}.practice-controls{background:var(--bg-panel);border-top:1px solid var(--border);flex-wrap:nowrap;align-items:center;gap:16px;padding:8px 12px;display:flex;overflow:hidden}.practice-controls-group{flex:none;align-items:center;gap:8px;display:flex}.practice-controls-right{margin-left:auto}.practice-controls-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-right:4px;font-size:11px;font-weight:600}.practice-transport-btn{width:var(--touch-target);height:var(--touch-target);background:var(--bg-raised);border:1px solid var(--border-strong);cursor:pointer;border-radius:50%;flex:none;place-items:center;font-size:17px;line-height:1;display:grid}.practice-transport-btn.is-play{background:var(--active);color:#fff;border-color:#0000;font-size:19px}.practice-transport-btn:disabled{opacity:.45;cursor:not-allowed}.practice-tempo-btn{width:var(--touch-target);padding:0;font-size:18px}.practice-tempo-value{text-align:center;font-variant-numeric:tabular-nums;min-width:58px;font-weight:600}.practice-loop-btn{min-width:88px}.practice-loop-btn[aria-pressed=true]{border-color:var(--waiting);color:var(--text)}.practice-segment{background:var(--bg-base);border:1px solid var(--border-strong);border-radius:var(--radius-sm);display:flex;overflow:hidden}.practice-segment-btn{min-height:var(--touch-target);color:var(--text-muted);white-space:nowrap;cursor:pointer;background:0 0;border:none;padding:10px 16px;font-size:14.5px}.practice-segment-btn:disabled{cursor:not-allowed;opacity:.6}.practice-segment-btn[aria-pressed=true]{background:var(--bg-raised);color:var(--text);opacity:1}.practice-more-btn{min-width:88px}.practice-more{z-index:8;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--radius);flex-direction:column;gap:12px;padding:14px 16px;display:flex;position:absolute;bottom:calc(100% + 8px);right:12px;box-shadow:0 16px 40px #0000008c}.practice-more-row{align-items:center;gap:8px;display:flex}.practice-more-row .practice-controls-label{min-width:84px}.practice-controls-toasts{z-index:7;pointer-events:none;flex-direction:column;align-items:flex-start;gap:6px;display:flex;position:absolute;bottom:calc(100% + 8px);left:12px}.practice-controls-hint,.practice-loop-error{background:var(--bg-raised);border:1px solid var(--border-strong);max-width:320px;color:var(--text-muted);border-radius:999px;padding:8px 14px;font-size:12.5px;box-shadow:0 10px 30px #00000073}.practice-loop-error{color:#fca5a5;border-color:#ef44448c}.fingering{z-index:7;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--radius);flex-direction:column;gap:10px;max-height:60%;padding:12px 20px;display:flex;position:absolute;bottom:8px;left:14px;right:14px;overflow-y:auto;box-shadow:0 16px 40px #0000008c}.fingering-header{align-items:center;gap:10px;display:flex}.fingering-nav{width:var(--touch-target);padding:0;font-size:20px;line-height:1}.fingering-position{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}.fingering-close{margin-left:auto}.fingering-notes{flex-wrap:wrap;gap:10px 24px;list-style:none;display:flex}.fingering-note{align-items:center;gap:8px;display:flex}.fingering-note-name{font-variant-numeric:tabular-nums;min-width:44px;font-size:15px;font-weight:600}.fingering-note-hand{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:11px}.fingering-buttons{gap:6px;display:flex}.fingering-finger{width:var(--touch-target);padding:0;font-size:16px;font-weight:600}.fingering-finger[aria-pressed=true]{background:var(--active);color:#fff;border-color:#0000}.fingering-hint{color:var(--text-muted);max-width:90ch;font-size:12px}.result-body{display:flex}.result-hero{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:640px;margin:auto;padding:40px;display:flex}.result-empty-text{color:var(--text-muted);font-size:15px}.result-accuracy{flex-direction:column;align-items:center;gap:4px;display:flex}.result-accuracy-value{font-variant-numeric:tabular-nums;font-size:64px;font-weight:700;line-height:1}.result-accuracy-value.is-good{color:var(--success)}.result-accuracy-value.is-mid{color:var(--waiting)}.result-accuracy-value.is-low{color:var(--error)}.result-accuracy-label{color:var(--text-muted);font-size:14px}.result-stars{gap:10px;font-size:38px;line-height:1;display:flex}.result-star{color:var(--border-strong)}.result-star.is-filled{color:var(--waiting);text-shadow:0 0 24px #eab30866}.result-completed{font-size:13.5px}.result-stats{grid-template-columns:repeat(4,1fr);gap:12px;width:100%;margin-top:12px;display:grid}.result-stat{text-align:center;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 10px}.result-stat-label{color:var(--text-muted);font-size:12px}.result-stat-value{font-variant-numeric:tabular-nums;margin-top:4px;font-size:22px;font-weight:700;display:block}.result-stat-value.is-success{color:var(--success)}.result-stat-value.is-error{color:var(--error)}.result-stat-value.is-muted{color:var(--text-muted)}.result-actions{flex:none;justify-content:center;gap:12px;display:flex}.shell{grid-template-rows:auto minmax(0,1fr);min-width:768px;height:100%;display:grid;overflow:hidden}.shell.is-immersive{grid-template-rows:minmax(0,1fr)}.shell-topbar{min-height:var(--topbar-height);background:var(--bg-panel);border-bottom:1px solid var(--border);flex:none;align-items:center;gap:20px;padding:6px 20px;display:flex}.shell-brand{align-items:center;gap:10px;display:flex}.shell-logo{background:var(--waiting);width:28px;height:28px;color:var(--bg-base);border-radius:8px;place-items:center;font-size:15px;line-height:1;display:grid}.shell-title{letter-spacing:.01em;font-size:15.5px;font-weight:600}.shell-nav{gap:6px;display:flex}.shell-nav-item{min-height:var(--touch-target);color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;padding:8px 16px;font-size:15px;font-weight:500;transition:background .15s,color .15s}@media (hover:hover){.shell-nav-item:hover{color:var(--text);background:#ffffff0a}}.shell-nav-item.is-active{color:var(--text);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--border-strong)}.shell-midi{min-height:var(--touch-target);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:8px;margin-left:auto;padding:8px 16px;font-size:13.5px;transition:border-color .15s;display:flex}@media (hover:hover){.shell-midi:hover{border-color:var(--border-strong)}}.shell-midi-dot{background:var(--waiting);border-radius:50%;width:8px;height:8px}.shell-midi.is-ready{color:var(--text)}.shell-midi.is-ready .shell-midi-dot{background:var(--success)}.shell-midi.is-blocked .shell-midi-dot{background:var(--error)}.shell-midi.is-live .shell-midi-dot{background:var(--success);animation:.9s ease-in-out infinite shell-midi-pulse;box-shadow:0 0 0 3px #22c55e40}@keyframes shell-midi-pulse{0%,to{box-shadow:0 0 0 2px #22c55e26}50%{box-shadow:0 0 0 4px #22c55e59}}.shell-midi.is-compact{white-space:nowrap;max-width:190px;min-height:40px;margin-left:0;padding:6px 12px;font-size:12.5px;overflow:hidden}.shell-content{flex-direction:column;min-height:0;display:flex;overflow:hidden}.env-badge{z-index:100;letter-spacing:.1em;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.85;border:1px solid #0000;border-radius:999px;padding:1px 7px;font-size:9.5px;font-weight:700;line-height:1.5;position:fixed;bottom:4px;left:6px}.env-badge.is-staging{color:#fde047;background:#eab30826;border-color:#eab3088c}.env-badge.is-development{color:var(--text-muted);border-color:var(--border-strong);background:var(--bg-raised)}