:root{--bg: #f4f7fb;--panel: #ffffff;--ink: #1f2937;--muted: #54606f;--line: #c8d1dd;--brand: #1d4ed8;--ok: #16a34a;--bad: #dc2626;--warn: #d97706;--tabs-border: #bfcee4;--tabs-bg: linear-gradient(135deg, #dbe9ff 0%, #edf5ff 45%, #f6fbff 100%);--control-bg: #ffffff;--control-text: var(--ink);--settings-icon-bg: #ffffff;--settings-icon-text: #334155;--settings-active-bg: #dbeafe;--settings-active-text: #1e3a8a;--settings-popover-bg: #ffffff;--settings-popover-border: #bfcee4;--settings-row-text: #334155;--panel-soft-bg: rgba(255, 255, 255, .65);--staff-wrap-bg: rgba(255, 255, 255, .9);--pill-bg: #ffffff;--keyboard-bg: #f8fafc;--focus-title-text: #334155;--focus-title-bg: rgba(255, 255, 255, .9);--focus-title-border: #cbd5e1;--disabled-bg: #e5e7eb;--disabled-text: #6b7280;--disabled-line: #cbd5e1;--motion-duration-fast: .12s;--motion-duration-base: .18s;--motion-easing-standard: cubic-bezier(.2, 0, 0, 1);--select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2354606f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}*{box-sizing:border-box}html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea,select,[contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}body{margin:0;font-family:Inter,sans-serif;color:var(--ink);background:radial-gradient(circle at top right,#d6ecff 0%,transparent 45%),radial-gradient(circle at bottom left,#eafbe3 0%,transparent 40%),var(--bg)}.app{width:100%;max-width:none;margin:0;padding:10px 12px 72px;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 72px)}html.i18n-pending .app{opacity:0;pointer-events:none}html.i18n-ready .app{opacity:1;transition:opacity .14s ease-out}.top h1{margin:0;font-size:1.8rem;line-height:1.05;white-space:nowrap}.top-brand{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}.top-main-anchor{display:flex;align-items:center;gap:10px;min-width:0}.top-drawer-toggle{flex:0 0 auto}.drawer-toggle-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--control-bg);color:var(--control-text);font-size:1.16rem;line-height:1;cursor:pointer;flex:0 0 auto}.drawer-tab-icon{display:none}.top-logo{width:auto;height:1.95rem;border-radius:4px;object-fit:contain;flex:0 0 auto;display:block}.top-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.top-right-actions{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-width:0}.top-practice-selector-wrap{display:inline-flex;align-items:center;gap:8px;min-width:min(48vw,460px)}.top-practice-selector-label{font-size:.74rem;font-weight:700;color:var(--muted);white-space:nowrap}.top-practice-selector-wrap select{min-width:min(48vw,360px);max-width:100%;border-radius:999px;padding:8px 12px;font-size:.84rem;text-overflow:ellipsis}.beta-tag{display:inline-flex;align-items:center;justify-content:center;border:1px solid #f59e0b;color:#92400e;background:#fef3c7;border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:700;letter-spacing:.04em}.top p{margin:.25rem 0 .6rem;color:var(--muted)}.focus-top-bar{display:none}.mini-btn{border:1px solid var(--line);background:var(--control-bg);color:var(--control-text);border-radius:999px;padding:2px 8px;font-size:.72rem;cursor:pointer;transition:transform var(--motion-duration-fast) var(--motion-easing-standard)}.mini-btn:disabled{background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--disabled-line);cursor:not-allowed}.mini-btn.active{border-color:var(--brand);background:var(--settings-active-bg);color:var(--settings-active-text)}.tiny-hint{margin:6px 0 0;color:var(--muted);font-size:.76rem}.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:relative;margin:8px 0 12px;padding:8px;border:1px solid var(--tabs-border);border-radius:14px;background:var(--tabs-bg);box-shadow:inset 0 1px #ffffffd9,0 2px 8px #0f172a14}.app-drawer-backdrop{display:none}.tab-btn{border:1px solid var(--line);background:var(--control-bg);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:.9rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color var(--motion-duration-fast) var(--motion-easing-standard),border-color var(--motion-duration-fast) var(--motion-easing-standard)}.tab-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}.tabs-spacer{flex:1 1 auto}.language-wrap{display:inline-flex;align-items:center}.theme-wrap{display:inline-flex;flex-direction:column;gap:4px}.theme-quick-label{font-size:.7rem;color:var(--muted);font-weight:700;letter-spacing:.01em}.feedback-wrap{display:inline-flex;align-items:center}.feedback-mail-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--control-bg);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap}.feedback-mail-btn:hover{border-color:var(--brand)}.feedback-mail-icon{line-height:1;font-size:.86rem}.top-title-row .feedback-mail-btn{padding:4px 10px;font-size:.74rem}.language-select{border:1px solid var(--line);border-radius:999px;background:var(--control-bg);color:var(--control-text);font-size:.8rem;font-weight:700;padding:7px 10px;min-width:64px}.theme-select{border:1px solid var(--line);border-radius:10px;background:var(--control-bg);color:var(--control-text);font-size:.82rem;font-weight:700;padding:7px 10px;min-width:132px}.settings-wrap{position:relative;margin-left:auto}.settings-btn{border:1px solid var(--line);background:var(--settings-icon-bg);color:var(--settings-icon-text);width:36px;height:36px;border-radius:999px;font-size:1rem;cursor:pointer;line-height:1}.settings-btn.active{border-color:var(--brand);background:var(--settings-active-bg);color:var(--settings-active-text)}.settings-popover{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(92vw,320px);padding:12px;border-radius:14px;border:1px solid var(--settings-popover-border);background:var(--settings-popover-bg);box-shadow:0 14px 30px #0f172a24;transform-origin:top right}.settings-popover:not(.hidden){animation:ui-fade-up-in var(--motion-duration-base) var(--motion-easing-standard) both}.settings-popover h3{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--line) 74%,transparent);font-size:.9rem}.settings-section{margin-bottom:10px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent)}.settings-section:first-of-type{border-top:0}.settings-section-title{margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800}.settings-row{margin:0;display:block;font-size:.84rem;color:var(--settings-row-text);padding:4px 0}.settings-row:last-child{margin-bottom:0}.settings-action-row{padding-top:10px;border-top:1px solid var(--line);display:grid;gap:6px}.settings-cookie-btn{width:100%;border-radius:8px;padding:6px 8px;font-size:.74rem;font-weight:700}.settings-debug-btn{opacity:.66;font-size:.69rem;font-weight:600}.settings-debug-btn:hover{opacity:.9}.settings-debug-toggle{opacity:.84}.settings-debug-toggle>span{font-size:.72rem;font-weight:600}#debugMetricsStatus{margin-top:4px;line-height:1.3}.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-toggle>span{flex:1 1 auto;min-width:0}.settings-toggle input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:0 0 42px;min-width:42px;width:42px;height:24px;border-radius:999px;border:1px solid var(--line);background:#94a3b8;position:relative;cursor:pointer;transition:background .18s ease,border-color .18s ease}.settings-toggle input[type=checkbox]:before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 2px #0f172a42;transition:transform .18s ease}.settings-toggle input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}.settings-toggle input[type=checkbox]:checked:before{transform:translate(18px)}.settings-toggle input[type=checkbox]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.settings-range-row{margin-top:4px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.settings-range-row input[type=range]{width:100%}.settings-sync-group{padding-top:0;border-top:0}.settings-sync-group .settings-range-row{grid-template-columns:auto 1fr auto auto}.settings-sync-group .settings-range-row label{font-size:.8rem;white-space:nowrap}.settings-sync-group .settings-range-row-two-line{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"label label label" "slider value action";row-gap:6px}.settings-sync-group .settings-range-row-two-line label{grid-area:label;white-space:normal}.settings-sync-group .settings-range-row-two-line input[type=range]{grid-area:slider;min-width:0}.settings-sync-group .settings-range-row-two-line #twoHandSyncToleranceValue{grid-area:value;min-width:32px;text-align:right}.settings-sync-group .settings-range-row-two-line #btnTwoHandSyncRecommended{grid-area:action}.settings-recommended-btn{min-width:46px;padding:3px 8px;border-radius:999px;font-size:.74rem;font-weight:700;white-space:nowrap}.settings-select-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.settings-select-row select{min-width:110px;padding:6px 8px;font-size:.84rem}.settings-zoom-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.settings-zoom-controls{display:flex;align-items:center;gap:6px}.settings-mini-btn{min-width:28px;padding:2px 0;text-align:center;font-weight:700}#staffZoomValue{min-width:48px;text-align:center;font-size:.82rem}.tab-midi-indicator{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;font-size:.72rem;line-height:1;color:#6b7280;background:#e5e7eb;border:1px solid #cbd5e1;transition:background .2s ease,color .2s ease,border-color .2s ease}.tab-midi-indicator.is-connected{color:#166534;background:#dcfce7;border-color:#86efac}.tab-panel{display:none}.tab-panel.active{display:block;animation:ui-fade-up-in var(--motion-duration-base) var(--motion-easing-standard) both}@keyframes ui-fade-up-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.panel{background:transparent;border:0;border-radius:0;padding:8px 0;margin-bottom:8px;box-shadow:none}body.theme-layout-app:not(.focus-mode){--app-header-height: 74px;--app-header-gap: 12px;--drawer-width: 260px;--drawer-collapsed-width: 98px;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}body.theme-layout-app.theme-dark:not(.focus-mode){--bg: #0a0a0a;--panel: #141414;--ink: #f5f5f5;--muted: #b3b3b3;--line: #2a2a2a;--brand: #7c6aef;--ok: #22c55e;--bad: #f87171;--warn: #fbbf24;--tabs-border: #2a2a2a;--tabs-bg: #111111;--control-bg: #1a1a1a;--control-text: #f5f5f5;--settings-icon-bg: #1a1a1a;--settings-icon-text: #f5f5f5;--settings-active-bg: #242424;--settings-active-text: #f5f5f5;--settings-popover-bg: #131313;--settings-popover-border: #2a2a2a;--settings-row-text: #e7e7e7;--panel-soft-bg: #121212;--staff-wrap-bg: #f8fafc;--pill-bg: #1a1a1a;--keyboard-bg: #141414;--focus-title-text: #f5f5f5;--focus-title-bg: #1a1a1a;--focus-title-border: #2a2a2a;--disabled-bg: #242424;--disabled-text: #7a7a7a;--disabled-line: #2a2a2a;--select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23a8b0be' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background:#0a0a0a}body.theme-layout-app.theme-paper:not(.focus-mode){--bg: #f6f2e8;--panel: #fffdf8;--ink: #2b241d;--muted: #6b5d4f;--line: #d7c8b6;--brand: #73563d;--ok: #2f8f56;--bad: #b84c4c;--warn: #a2722f;--tabs-border: #d9cdbd;--tabs-bg: #f8f3ea;--control-bg: #fffdf9;--control-text: #2b241d;--settings-icon-bg: #fffdf9;--settings-icon-text: #3d3024;--settings-active-bg: #efe4d6;--settings-active-text: #4f3b2b;--settings-popover-bg: #fffcf7;--settings-popover-border: #d8c9b8;--settings-row-text: #4d3f32;--panel-soft-bg: #fffdf9;--staff-wrap-bg: #fffdfb;--pill-bg: #fffaf4;--keyboard-bg: #f5ece0;--focus-title-text: #3f3225;--focus-title-bg: #fffaf4;--focus-title-border: #d8c9b8;--disabled-bg: #ece2d6;--disabled-text: #7a6958;--disabled-line: #d3c3b1;background:#f6f2e8}body.theme-layout-app.drawer-collapsed:not(.focus-mode){--drawer-width: var(--drawer-collapsed-width)}body.theme-layout-app:not(.focus-mode) .app{max-width:none;margin:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;min-width:0;gap:0;overflow:hidden;padding-top:calc(env(safe-area-inset-top,0px) + var(--app-header-height) + var(--app-header-gap) + 10px);padding-left:calc(env(safe-area-inset-left,0px) + var(--drawer-width) + 26px);padding-right:calc(env(safe-area-inset-right,0px) + 12px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}body.theme-layout-app:not(.focus-mode) .tab-panel{display:none;min-height:0}body.theme-layout-app:not(.focus-mode) .tab-panel.active{display:flex;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}body.theme-layout-app:not(.focus-mode) #tab-about.active,body.theme-layout-app:not(.focus-mode) #tab-midi.active,body.theme-layout-app:not(.focus-mode) #tab-load.active{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}body.theme-layout-app:not(.focus-mode) #tab-practice.active{display:flex;flex-direction:column;gap:8px;overflow:hidden}body.theme-layout-app:not(.focus-mode) .top{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);z-index:36;margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft-bg);backdrop-filter:blur(6px)}body.theme-layout-app:not(.focus-mode) .top-title-row{justify-content:space-between;min-height:48px}body.theme-layout-app:not(.focus-mode) .top h1{font-size:1.95rem}body.theme-layout-app:not(.focus-mode) .top-logo{height:1.85rem}body.theme-layout-app:not(.focus-mode) .top-right-actions{display:inline-flex}body.theme-layout-app:not(.focus-mode) .top p{display:none}body.theme-layout-app.practice-tab-active:not(.focus-mode){--app-header-height: 50px;--app-header-gap: 12px}body.theme-layout-app.practice-tab-active:not(.focus-mode) .app{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}body.theme-layout-app.practice-tab-active:not(.focus-mode) .top{right:auto;width:var(--drawer-width);padding:8px 10px}body.theme-layout-app.practice-tab-active:not(.focus-mode) .top-title-row{min-height:34px}body.theme-layout-app.practice-tab-active:not(.focus-mode) .top-main-anchor{width:100%;gap:8px}body.theme-layout-app.practice-tab-active:not(.focus-mode) .top-brand{gap:6px;min-width:0}body.theme-layout-app.practice-tab-active:not(.focus-mode) .top-right-actions{display:none}body.theme-layout-app.practice-tab-active:not(.focus-mode) .top h1{display:block;font-size:clamp(1rem,.95rem + .22vw,1.2rem);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.theme-layout-app.practice-tab-active:not(.focus-mode) .top-logo{height:1.45rem}body.theme-layout-app.practice-tab-active:not(.focus-mode) .top .drawer-toggle-btn{width:34px;height:34px;border-radius:10px;font-size:1rem}body.theme-layout-app.practice-tab-active.drawer-collapsed:not(.focus-mode) .top h1{display:none}body.theme-layout-app:not(.focus-mode) .top .drawer-toggle-btn{display:inline-flex;width:40px;height:40px;border-radius:12px;font-size:1.12rem}body.theme-layout-app:not(.focus-mode) .tabs{position:fixed;left:calc(env(safe-area-inset-left,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + var(--app-header-height) + var(--app-header-gap) + 10px);bottom:calc(env(safe-area-inset-bottom,0px) + 10px);width:var(--drawer-width);margin:0;padding:12px 10px;border-radius:18px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px;overflow-y:auto;overflow-x:visible;z-index:30;-ms-overflow-style:none;scrollbar-width:none;box-shadow:none}body.theme-layout-app:not(.focus-mode) .tabs::-webkit-scrollbar{width:0;height:0;display:none}body.theme-layout-app:not(.focus-mode) .tabs-spacer{display:block;flex:1 1 auto}body.theme-layout-app:not(.focus-mode) .tab-btn{width:100%;justify-content:flex-start;border-radius:12px;padding:9px 12px}body.theme-layout-app:not(.focus-mode) .tab-btn:hover{border-color:var(--line);background:var(--settings-active-bg)}body.theme-layout-app:not(.focus-mode) .tab-btn.active{border-color:var(--brand);background:var(--brand);color:#fff}body.theme-layout-app.theme-dark:not(.focus-mode) .tab-btn.active{color:#0f1024}body.theme-layout-app:not(.focus-mode) .drawer-tab-icon{width:23px;height:23px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;background:var(--control-bg);color:var(--muted)}body.theme-layout-app:not(.focus-mode) .tab-btn.active .drawer-tab-icon{background:#ffffff38;color:inherit}body.theme-layout-app:not(.focus-mode) .tab-midi-indicator{margin-left:auto;width:23px;height:23px;font-size:.84rem}body.theme-layout-app:not(.focus-mode) .language-wrap{width:100%}body.theme-layout-app:not(.focus-mode) .language-select{width:100%}body.theme-layout-app:not(.focus-mode) .theme-wrap{width:100%}body.theme-layout-app:not(.focus-mode) .theme-select{width:100%}body.theme-layout-app:not(.focus-mode) .settings-wrap{margin-left:0;width:100%;position:relative}body.theme-layout-app:not(.focus-mode) .settings-btn{width:100%;border-radius:12px}body.theme-layout-app.drawer-collapsed:not(.focus-mode) .tabs{align-items:center;padding:12px 8px}body.theme-layout-app.drawer-collapsed:not(.focus-mode) .tab-btn{width:100%;justify-content:center;padding:10px 8px}body.theme-layout-app.drawer-collapsed:not(.focus-mode) .tab-label,body.theme-layout-app.drawer-collapsed:not(.focus-mode) .tab-midi-indicator{display:none}body.theme-layout-app.drawer-collapsed:not(.focus-mode) .language-wrap,body.theme-layout-app.drawer-collapsed:not(.focus-mode) .theme-wrap,body.theme-layout-app.drawer-collapsed:not(.focus-mode) .settings-wrap{display:flex;width:100%}body.theme-layout-app.drawer-collapsed:not(.focus-mode) .theme-quick-label{display:none}body.theme-layout-app.drawer-collapsed:not(.focus-mode) .language-select,body.theme-layout-app.drawer-collapsed:not(.focus-mode) .theme-select{width:100%;min-width:0;padding:7px 8px;font-size:.72rem;text-overflow:ellipsis}body.theme-layout-app.drawer-collapsed:not(.focus-mode) .settings-btn{width:100%;padding:0;font-size:1.05rem}body.theme-layout-app:not(.focus-mode) .panel{margin-bottom:10px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 8px 20px #0f172a0f}body.theme-layout-app:not(.focus-mode) .tab-panel.active>.panel{margin-bottom:0}body.theme-layout-app:not(.focus-mode) .btn{border-radius:999px}body.theme-layout-app:not(.focus-mode) .btn.secondary{background:#171717;color:#f5f5f5;border-color:#2a2a2a}body.theme-layout-app:not(.focus-mode) .btn.secondary:hover{border-color:#3a3a3a}body.theme-layout-app:not(.focus-mode) #panelExercise{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-bottom:0;overflow:hidden}body.theme-layout-app:not(.focus-mode) .top-practice-selector-wrap{max-width:min(56vw,560px)}body.theme-layout-app:not(.focus-mode) .top-practice-selector-wrap select{width:100%;min-width:0;background:var(--control-bg)}body.theme-layout-app:not(.focus-mode) #panelExercise .practice-transport-bar{display:grid;grid-template-rows:auto auto;gap:8px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--line) 36%,transparent);border-radius:16px;background:var(--panel-soft-bg)}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-row{display:grid;gap:8px;align-items:end;min-width:0}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-row-primary{grid-template-columns:minmax(0,1fr) minmax(220px,340px)}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-primary-left{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;min-width:0}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-row-secondary{grid-template-columns:minmax(0,1fr) auto;align-items:end}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-main-actions{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-end}body.theme-layout-app:not(.focus-mode) #panelExercise .practice-main-cta{min-height:38px;min-width:176px;padding:7px 14px;font-size:.93rem;font-weight:800;letter-spacing:.01em;box-shadow:0 6px 12px color-mix(in srgb,var(--brand) 24%,transparent)}body.theme-layout-app:not(.focus-mode) #panelExercise .practice-main-cta.active{background:#111827;border-color:#111827;color:#f8fafc;box-shadow:0 8px 16px #0f172a3d}body.theme-layout-app:not(.focus-mode) #panelExercise .practice-midi-play-btn{min-height:38px;min-width:146px;padding:7px 12px;font-size:.8rem;font-weight:700}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-controls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:end}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-field{display:grid;grid-template-rows:auto auto;gap:3px;min-width:0}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-label{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:800;line-height:1.2}body.theme-layout-app:not(.focus-mode) #panelExercise #handModeSelect,body.theme-layout-app:not(.focus-mode) #panelExercise #practiceSpeedSelect,body.theme-layout-app:not(.focus-mode) #panelExercise #practiceDifficultySelect,body.theme-layout-app:not(.focus-mode) #panelExercise #exerciseSelect{width:100%;min-width:0;text-overflow:ellipsis;height:38px;padding:6px 10px;font-size:.8rem;border:1px solid color-mix(in srgb,var(--line) 22%,transparent);border-radius:10px;background:color-mix(in srgb,var(--control-bg) 92%,transparent)}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-toggle{min-height:38px;padding:0;border:none;border-radius:10px;background:transparent;font-size:.79rem}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-toggle-compact{justify-content:flex-start;gap:0;padding:0}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-toggle-compact>span{display:none}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-loop-actions{display:flex;align-items:end;justify-content:flex-end;gap:8px;min-width:0}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-loop-field .transport-label{white-space:nowrap}body.loop-system-disabled .transport-loop-actions,body.loop-system-disabled #practiceRangeBar,body.loop-system-disabled #btnFocusLoopToggle,body.loop-system-disabled .focus-loop-btn{display:none!important}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-metronome-inline-field{display:flex;justify-content:flex-end;min-width:0;align-items:end}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-metronome-inline-control{display:grid;grid-template-columns:auto minmax(110px,1fr);align-items:center;gap:8px;min-height:38px}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-metronome-toggle{justify-content:flex-start;gap:8px}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-metronome-toggle>span{flex:0 0 auto;font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:800;line-height:1.2;white-space:nowrap}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-metronome-volume{display:grid;grid-template-columns:minmax(76px,1fr) auto;gap:6px;align-items:center;min-height:0;padding:0;border:none;border-radius:0;background:transparent}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-metronome-volume input[type=range]{width:100%;min-width:72px}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-secondary-actions{display:flex;align-items:center;justify-content:flex-start;min-height:38px}body.theme-layout-app:not(.focus-mode) #panelExercise .practice-measure-actions{flex-wrap:nowrap;align-items:center}body.theme-layout-app:not(.focus-mode) #panelExercise .practice-measure-actions .practice-range-summary{margin-left:2px;flex:0 1 auto;white-space:nowrap}body.theme-layout-app:not(.focus-mode) #panelExercise .staff-wrap{flex:1 1 auto;min-height:0;overflow-y:auto;margin-bottom:0;border-style:solid;border-radius:14px;background:#fff}body.theme-layout-app:not(.focus-mode) #panelFeedback{flex:0 0 auto;margin-bottom:0}body.theme-layout-app:not(.focus-mode) #panelFeedback .feedback-sheet-progress{margin-top:2px}body.theme-layout-app:not(.focus-mode) #panelFeedback .feedback-sheet-progress .hud-progress-text{display:none}body.theme-layout-app:not(.focus-mode) #panelFeedback .feedback-sheet-head{display:none}body.theme-layout-app:not(.focus-mode) #panelFeedback .feedback-sheet-body{display:grid;gap:0}body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback{overflow:hidden;max-height:min(42vh,340px);transition:max-height var(--motion-duration-base) var(--motion-easing-standard),border-color var(--motion-duration-fast) var(--motion-easing-standard)}body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback .feedback-sheet-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback .feedback-sheet-toggle{min-height:30px;padding:4px 8px;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback .feedback-sheet-toggle-icon{font-size:.7rem;line-height:1}body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback .feedback-sheet-summary{flex:1 1 auto;min-width:0;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback .feedback-sheet-progress{margin-top:0;margin-bottom:6px}body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback .feedback-sheet-body{min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:max-height var(--motion-duration-base) var(--motion-easing-standard),opacity var(--motion-duration-fast) var(--motion-easing-standard),transform var(--motion-duration-fast) var(--motion-easing-standard)}body.theme-layout-app.practice-tab-active.feedback-sheet-collapsed:not(.focus-mode) #panelFeedback{max-height:88px}body.theme-layout-app.practice-tab-active.feedback-sheet-collapsed:not(.focus-mode) #panelFeedback .feedback-sheet-progress{gap:3px}body.theme-layout-app.practice-tab-active.feedback-sheet-collapsed:not(.focus-mode) #panelFeedback .feedback-sheet-progress .hud-progress-track{height:8px}body.theme-layout-app.practice-tab-active.feedback-sheet-collapsed:not(.focus-mode) #panelFeedback .feedback-sheet-progress .hud-progress-text{font-size:.74rem;color:var(--muted)}body.theme-layout-app.practice-tab-active.feedback-sheet-collapsed:not(.focus-mode) #panelFeedback .feedback-sheet-body{max-height:0;opacity:0;pointer-events:none;transform:translateY(8px);overflow:hidden}body.theme-layout-app:not(.focus-mode) #panelKeyboard{flex:0 0 auto;position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);z-index:18;margin-bottom:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:none}body.theme-layout-app:not(.focus-mode) #panelKeyboard .keyboard{min-height:128px}body.theme-layout-app:not(.focus-mode) #panelKeyboard .focus-inline-btn{min-height:128px;height:128px}body.theme-layout-app:not(.focus-mode) .app-drawer-backdrop{display:none}body.theme-layout-app:not(.focus-mode) .settings-popover{position:absolute;left:0;right:0;bottom:calc(100% + 10px);top:auto;width:auto;max-height:min(78vh,660px);overflow:auto;border-radius:14px;box-shadow:0 12px 24px #0f172a24}@media (max-width: 1080px){body.theme-layout-app:not(.focus-mode) #panelExercise .transport-row-primary,body.theme-layout-app:not(.focus-mode) #panelExercise .transport-row-secondary{grid-template-columns:1fr}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-loop-actions{justify-content:flex-start}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-metronome-inline-field{justify-content:flex-start}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-controls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.theme-layout-app:not(.focus-mode) .feedback-row.live-pill-row,body.theme-layout-app:not(.focus-mode) .hud-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 980px),(hover: none) and (pointer: coarse){body.theme-layout-app:not(.focus-mode){--drawer-tablet-collapsed-width: 82px;--drawer-tablet-open-width: min(82vw, 300px);--drawer-width: var(--drawer-tablet-collapsed-width)}body.theme-layout-app.drawer-open:not(.focus-mode){--drawer-width: var(--drawer-tablet-open-width)}body.theme-layout-app.drawer-collapsed:not(.focus-mode){--drawer-width: var(--drawer-tablet-collapsed-width)}body.theme-layout-app:not(.focus-mode) .app{padding-left:calc(env(safe-area-inset-left,0px) + var(--drawer-width) + 12px)!important;padding-top:calc(env(safe-area-inset-top,0px) + var(--app-header-height) + var(--app-header-gap) + 8px)}body.theme-layout-app.practice-tab-active:not(.focus-mode) .app{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}body.theme-layout-app:not(.focus-mode) .top{top:calc(env(safe-area-inset-top,0px) + 6px);left:calc(env(safe-area-inset-left,0px) + 6px);right:calc(env(safe-area-inset-right,0px) + 6px)}body.theme-layout-app:not(.focus-mode) .top-right-actions{gap:6px}body.theme-layout-app:not(.focus-mode) .beta-tag{display:inline-flex}body.theme-layout-app:not(.focus-mode) .tabs{width:var(--drawer-width);transform:none!important;transition:width .22s cubic-bezier(.22,1,.36,1);box-shadow:none}body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs .tab-label,body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs .tab-midi-indicator{display:none}body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs .tab-btn{justify-content:center;padding:8px 6px}body.theme-layout-app.practice-tab-active:not(.focus-mode):not(.drawer-open) .top h1{display:none}body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs{padding:10px 6px;gap:6px}body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs .drawer-tab-icon{width:20px;height:20px;border-radius:5px;font-size:.82rem}body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs .theme-quick-label{display:none}body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs .language-select,body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs .theme-select{min-width:0;width:100%;padding:6px;font-size:.69rem;text-overflow:ellipsis}body.theme-layout-app:not(.focus-mode):not(.drawer-open) .tabs .settings-btn{min-height:34px;font-size:.96rem}body.theme-layout-app.practice-tab-active:not(.focus-mode):not(.drawer-open) .top-logo{display:none}body.theme-layout-app.practice-tab-active:not(.focus-mode):not(.drawer-open) .top-brand{display:none}body.theme-layout-app.practice-tab-active:not(.focus-mode):not(.drawer-open) .top-main-anchor{justify-content:center}body.theme-layout-app.practice-tab-active:not(.focus-mode):not(.drawer-open) .top .drawer-toggle-btn{width:40px;height:40px;border-radius:12px;font-size:1.12rem;justify-content:center}body.theme-layout-app.practice-tab-active:not(.focus-mode):not(.drawer-open) .tabs .language-wrap{flex-direction:column;align-items:center;gap:6px}body.theme-layout-app.practice-tab-active:not(.focus-mode):not(.drawer-open) .tabs .language-wrap:before{content:"";width:min(40px,100%);height:24px;background:center / contain no-repeat url(/assets/logo-header-B6B60gBx.png);opacity:.96}body.theme-layout-app.drawer-open:not(.focus-mode) .tabs .tab-btn{justify-content:flex-start;padding:9px 12px}body.theme-layout-app.drawer-open:not(.focus-mode) #panelExercise .transport-main-actions{flex-direction:column;align-items:stretch}body.theme-layout-app.drawer-open:not(.focus-mode) #panelExercise .practice-main-cta,body.theme-layout-app.drawer-open:not(.focus-mode) #panelExercise .practice-midi-play-btn{width:100%;min-width:0;justify-content:center}body.theme-layout-app:not(.focus-mode) .app-drawer-backdrop{display:none!important}body.theme-layout-app:not(.focus-mode) #panelFeedback{margin-bottom:0}body.theme-layout-app:not(.focus-mode) #panelKeyboard{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);box-shadow:none}body.theme-layout-app:not(.focus-mode) .settings-popover{left:0;right:0;top:auto;bottom:calc(100% + 10px);width:auto;max-height:min(70vh,560px)}}@media (max-width: 699px){body.theme-layout-app:not(.focus-mode) .app{padding-left:calc(env(safe-area-inset-left,0px) + 12px)!important;padding-top:calc(env(safe-area-inset-top,0px) + var(--app-header-height) + 10px)}body.theme-layout-app.practice-tab-active:not(.focus-mode) .app{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}body.theme-layout-app:not(.focus-mode) .tabs{position:static;width:100%;margin:8px 0 10px;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:8px}body.theme-layout-app:not(.focus-mode) .tab-btn{flex:1 1 calc(50% - 8px);min-width:0;justify-content:center}body.theme-layout-app:not(.focus-mode) .tabs-spacer{display:none}body.theme-layout-app:not(.focus-mode) .language-wrap,body.theme-layout-app:not(.focus-mode) .theme-wrap,body.theme-layout-app:not(.focus-mode) .settings-wrap{display:flex;flex:1 1 calc(50% - 8px);width:auto}body.theme-layout-app:not(.focus-mode) .settings-popover{left:12px;right:12px;bottom:calc(100% + 10px);width:auto}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-controls-grid{grid-template-columns:1fr}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-primary-left{grid-template-columns:1fr}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-main-actions{flex-direction:column;align-items:stretch}body.theme-layout-app:not(.focus-mode) #panelExercise .transport-loop-actions{flex-direction:column;align-items:stretch}body.theme-layout-app:not(.focus-mode) #panelExercise .practice-main-cta,body.theme-layout-app:not(.focus-mode) #panelExercise .practice-midi-play-btn{width:100%;min-width:0;justify-content:center}}@media (min-width: 700px) and (max-width: 1080px){body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .practice-transport-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"primary primary" "metronome loop" "controls controls";gap:6px 8px}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-row{display:contents}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-primary-left{grid-area:primary;grid-template-columns:minmax(0,1fr) auto;align-items:end}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-metronome-inline-field{grid-area:metronome;justify-content:flex-start;align-items:stretch}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-metronome-inline-control{display:grid;grid-template-columns:auto minmax(110px,1fr);grid-template-rows:auto auto;gap:3px 8px;align-items:end}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-metronome-toggle{display:grid;grid-template-rows:auto auto;justify-items:start;align-items:center;gap:3px;min-height:0}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-metronome-toggle>span{white-space:nowrap}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-metronome-volume{align-self:center}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-loop-actions{grid-area:loop;flex-direction:row;align-items:end;justify-content:flex-end}body.theme-layout-app:not(.focus-mode):not(.drawer-open) #panelExercise .transport-controls-grid{grid-area:controls;grid-template-columns:repeat(3,minmax(0,1fr))}}.panel h2{margin:0 0 6px;font-size:.98rem}.about-panel{max-width:100%}.about-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.9fr);gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--panel-soft-bg) 0%,var(--panel) 100%)}.about-hero-copy h2{margin:0 0 6px;font-size:clamp(1.18rem,1.2rem + .48vw,1.68rem)}.about-lead{margin:0;font-size:.95rem;color:var(--muted);line-height:1.42}.about-hero-feature{margin-top:11px;padding:0;border:0;border-radius:0;background:transparent}.about-hero-feature strong{display:block;font-size:.9rem;margin-bottom:4px}.about-hero-visual{position:relative;border:0;border-radius:14px;min-height:176px;background:linear-gradient(125deg,var(--panel-soft-bg) 0%,var(--panel) 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}.about-hero-logo{width:min(68%,180px);height:auto;opacity:.95;transform:translateY(4px)}.about-note-float{position:absolute;font-size:1.6rem;color:var(--brand);opacity:.72;animation:aboutFloat 3.6s ease-in-out infinite}.about-note-float.note-a{top:16px;left:14px}.about-note-float.note-b{right:18px;top:40px;animation-delay:.8s}.about-note-float.note-c{right:28px;bottom:14px;animation-delay:1.6s}@keyframes aboutFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.about-steps{border:1px dashed var(--line);border-radius:12px;padding:10px 12px;background:var(--panel-soft-bg)}.about-steps-shell{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:stretch}.about-steps-shell.about-steps-shell-with-install{grid-template-columns:minmax(0,1fr) minmax(0,290px)}.about-steps h3{margin:0 0 4px;font-size:.9rem}.about-steps-list{margin:0;padding:0;display:grid;gap:6px;list-style:none}.about-steps-list li{position:relative;padding:8px 10px 8px 12px;border-left:3px solid var(--brand);background:var(--panel);border-radius:8px;font-size:.85rem;line-height:1.4}.about-install-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel-soft-bg);min-width:240px;width:min(100%,290px);display:grid;grid-template-rows:auto auto auto auto;gap:8px}.about-install-card h3{margin:0;font-size:.88rem}.about-install-body{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:flex-start}.about-install-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));background:color-mix(in srgb,var(--brand) 14%,transparent);color:color-mix(in srgb,var(--brand) 82%,var(--ink));font-size:.95rem;line-height:1}.about-install-body p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.36}.about-install-btn{border:1px solid var(--line);border-radius:999px;background:var(--control-bg);color:var(--ink);padding:7px 12px;font-size:.8rem;font-weight:700;cursor:pointer;width:fit-content}.about-install-btn:hover{border-color:color-mix(in srgb,var(--brand) 44%,var(--line));color:color-mix(in srgb,var(--brand) 82%,var(--ink))}.about-install-status{margin:0;font-size:.76rem;color:var(--muted);line-height:1.34}.about-seo-block{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel-soft-bg)}.about-seo-block h3{margin:0 0 6px;font-size:.9rem}.about-keyword-list,.about-featured-list{margin:0;padding-left:18px;display:grid;gap:5px}.about-keyword-list li,.about-featured-list li{font-size:.84rem;line-height:1.36}.about-feature-list{margin:12px 0 0;padding:0;list-style:none;display:grid}.about-feature-list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}.about-feature-list li:last-child{border-bottom:0}.about-feature-icon{font-size:1.05rem;line-height:1.3;opacity:.9}.about-feature-copy strong{display:block;font-size:.88rem;margin-bottom:1px}.about-feature-copy p,.about-feedback-note{margin:0;font-size:.84rem;color:var(--muted);line-height:1.38}.about-quick-actions{margin-top:6px;display:flex;flex-wrap:wrap;gap:7px}.about-quick-link{border:1px solid color-mix(in srgb,var(--ok) 36%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--ok) 14%,var(--control-bg));color:color-mix(in srgb,var(--ok) 62%,var(--ink));padding:6px 11px;font-size:.79rem;font-weight:700;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.about-quick-link:hover{border-color:color-mix(in srgb,var(--ok) 60%,var(--line));background:color-mix(in srgb,var(--ok) 22%,var(--control-bg));color:color-mix(in srgb,var(--ok) 82%,var(--ink))}@media (max-width: 980px){.about-hero{grid-template-columns:1fr}.about-hero-visual{min-height:128px}.about-steps-shell,.about-steps-shell.about-steps-shell-with-install{grid-template-columns:1fr}}@media (max-width: 760px){.about-install-card{display:none!important}}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.panel-load .hint{margin-top:4px}.load-micro-steps{margin-top:10px}.load-input-row{display:block}.load-action-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.load-action-row .btn{min-width:180px}.load-compat-details{margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft-bg)}.load-compat-summary{cursor:pointer;font-size:.86rem;font-weight:700;color:var(--ink);list-style:none}.load-compat-summary::-webkit-details-marker{display:none}.load-compat-summary:before{content:"▸";display:inline-block;margin-right:6px;transform:translateY(-1px)}.load-compat-details[open] .load-compat-summary:before{content:"▾"}.load-compat-details .tiny-hint{margin-top:8px}.load-compat-details .tiny-hint+.tiny-hint{margin-top:4px}@media (max-width: 720px){.load-action-row .btn{min-width:0;width:100%}}.midi-volume-row{margin-top:8px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.midi-volume-row label{font-size:.85rem;color:var(--muted)}.midi-volume-row input[type=range]{width:100%}.midi-volume-row strong{font-size:.85rem;min-width:2.4rem;text-align:right}.panel-midi .hint{margin-top:6px}.midi-steps{margin-top:10px;display:grid;gap:10px}.midi-step{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft-bg)}.midi-step-title{margin:0 0 8px;font-size:.86rem;font-weight:700;color:var(--ink)}.midi-step-actions{display:flex;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:wrap}.midi-step-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center}.midi-step .status{margin-top:8px}.midi-step-actions .status{margin:0}.midi-step #securityHint.hint{margin-top:6px}.btn,select,input[type=file]{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.95rem;background:var(--control-bg);color:var(--control-text)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:var(--select-chevron-icon);background-repeat:no-repeat;background-position:right 11px center;background-size:14px 14px;padding-right:36px}select::-ms-expand{display:none}select:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 48%,transparent);outline-offset:2px}body.theme-dark select{background-color:var(--control-bg);color:var(--control-text);border-color:var(--line)}input[type=file]{width:100%;min-height:44px;padding:5px;cursor:pointer}input[type=file]::file-selector-button{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--control-bg) 72%,var(--brand) 28%);color:var(--control-text);font:inherit;font-size:.86rem;font-weight:700;line-height:1;padding:9px 12px;margin-right:10px;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}input[type=file]::file-selector-button:hover{border-color:color-mix(in srgb,var(--brand) 56%,var(--line));background:color-mix(in srgb,var(--control-bg) 58%,var(--brand) 42%)}input[type=file]::-webkit-file-upload-button{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--control-bg) 72%,var(--brand) 28%);color:var(--control-text);font:inherit;font-size:.86rem;font-weight:700;line-height:1;padding:9px 12px;margin-right:10px;cursor:pointer}.btn{cursor:pointer;background:var(--brand);color:#fff;border-color:var(--brand);transition:transform var(--motion-duration-fast) var(--motion-easing-standard)}.btn.is-loading{position:relative;padding-right:34px}.btn.is-loading:after{content:"";position:absolute;right:12px;top:50%;width:13px;height:13px;border-radius:999px;border:2px solid rgba(255,255,255,.34);border-top-color:#fffffff5;animation:midi-btn-spin .76s linear infinite}.btn.is-ready:disabled{background:var(--ok);border-color:var(--ok);color:#fff}.btn.secondary{background:var(--control-bg);color:var(--ink)}.btn:disabled,.btn.secondary:disabled{background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--disabled-line);cursor:not-allowed;box-shadow:none}@media (hover: hover){.btn:hover:not(:disabled),.mini-btn:hover:not(:disabled){transform:scale(1.02)}}.btn:active:not(:disabled),.mini-btn:active:not(:disabled){transform:scale(.98)}@keyframes midi-btn-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.status{margin:10px 0 0;font-weight:700}.status a{color:inherit;text-decoration:underline;text-underline-offset:2px}.status.ok{color:var(--ok)}.status.bad{color:var(--bad)}.status.neutral{color:var(--muted)}.hint{margin:8px 0 0;color:var(--muted);font-size:.9rem}.hidden{display:none!important}@media (prefers-reduced-motion: reduce){.tab-panel.active,.settings-popover:not(.hidden){animation:none!important}.tab-btn,.btn,.mini-btn{transition:none!important}body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback,body.theme-layout-app.practice-tab-active:not(.focus-mode) #panelFeedback .feedback-sheet-body{transition:none!important}.btn:hover:not(:disabled),.mini-btn:hover:not(:disabled),.btn:active:not(:disabled),.mini-btn:active:not(:disabled){transform:none!important}.btn.is-loading:after{animation:none!important}}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-modal{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:16px;background:#0f172a8f}.app-modal.hidden{display:none}.app-modal-card{width:100%;max-width:460px;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel);color:var(--ink);box-shadow:0 18px 36px #0f172a47}.app-modal-card h3{margin:0 0 6px}.app-modal-card p{margin:0;color:var(--muted)}.app-modal-actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.cookie-banner{position:fixed;left:12px;right:12px;bottom:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:80;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel);box-shadow:0 10px 28px #0f172a38}.cookie-banner-text{margin:0;font-size:.86rem;color:var(--ink)}.cookie-banner-actions{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cookie-banner-links{margin:8px 0 0;font-size:.8rem}.cookie-banner-links a{color:var(--brand);font-weight:700;text-decoration:none}.cookie-banner-links a:hover{text-decoration:underline}.exercise-info{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;color:var(--ink);font-weight:700}.exercise-info>*{display:block;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft-bg);line-height:1.25}#panelFeedback .exercise-info{margin-top:0;margin-bottom:8px}#timingText{font-size:.84rem}.timing-guide{--timing-beat-strength: 0;display:grid;gap:6px}.timing-guide-track{position:relative;height:14px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(90deg,#cbd5e142,#cbd5e114),var(--panel);overflow:hidden}.timing-guide-track:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(var(--timing-beat-strength, 0) * .72);background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--brand) 36%,transparent) 0%,color-mix(in srgb,var(--brand) 18%,transparent) 35%,transparent 70%);transition:opacity 44ms linear}.timing-guide-window{position:absolute;top:1px;bottom:1px;left:35%;width:30%;border-radius:999px;background:color-mix(in srgb,var(--ok) 22%,transparent)}.timing-guide-center{position:absolute;top:1px;bottom:1px;left:50%;width:2px;transform:translate(-50%);background:color-mix(in srgb,var(--ink) 38%,transparent)}.timing-guide-needle{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translate(-50%);border-radius:999px;background:color-mix(in srgb,var(--ink) 74%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--panel) 70%,transparent);transition:left 80ms linear,background-color .12s ease,opacity .12s ease}.timing-guide-text{font-size:.8rem}.timing-guide-mini{gap:4px}.timing-guide-mini .timing-guide-track{height:10px}.timing-guide-mini .timing-guide-text{font-size:.67rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timing-guide.timing-guide-on-time .timing-guide-needle{background:color-mix(in srgb,var(--ok) 78%,transparent)}.timing-guide.timing-guide-early .timing-guide-needle,.timing-guide.timing-guide-late .timing-guide-needle{background:color-mix(in srgb,var(--bad) 74%,transparent)}.timing-guide.timing-guide-pending .timing-guide-needle,.timing-guide.timing-guide-idle .timing-guide-needle,.timing-guide.timing-guide-ignored .timing-guide-needle{background:color-mix(in srgb,var(--ink) 52%,transparent);opacity:.62}.timing-guide.timing-guide-beat-flash .timing-guide-center{background:color-mix(in srgb,var(--brand) 62%,transparent)}body.feedback-hidden #panelFeedback,body.keyboard-hidden #panelKeyboard{display:none}.practice-transport-bar{margin-top:4px}.transport-main-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.practice-main-cta{min-height:44px}.transport-controls-grid{display:grid;gap:8px}.transport-field{display:grid;gap:6px}.transport-label{font-size:.75rem;color:var(--muted);font-weight:700}.transport-metronome{display:grid;gap:8px}.transport-metronome-volume{display:grid;grid-template-columns:auto minmax(100px,1fr) auto;gap:8px;align-items:center}.transport-metronome-volume label{font-size:.78rem;color:var(--muted)}.transport-secondary-actions{display:flex;align-items:center;gap:8px}.practice-measure-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.practice-measure-actions .practice-range-summary{margin-left:2px;margin-top:0;flex:1 1 220px}.practice-range-nudge{width:32px;height:32px;padding:0;font-size:.9rem;font-weight:700}.staff-wrap{--staff-system-dim-opacity: .36;margin-top:7px;display:flex;align-items:flex-start;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;touch-action:pan-x pan-y;border:1px dashed var(--line);border-radius:10px;background:var(--staff-wrap-bg);position:relative}.staff-wrap.staff-fixed-viewport{--staff-fixed-hud-top: 64px;height:var(--staff-fixed-viewport-height, clamp(320px, 53vh, 760px));min-height:var(--staff-fixed-viewport-height, clamp(320px, 53vh, 760px));max-height:var(--staff-fixed-viewport-height, clamp(320px, 53vh, 760px));overflow-y:hidden;touch-action:none}.staff-wrap::-webkit-scrollbar{width:0;height:0;display:none}@media (hover: hover) and (pointer: fine){.staff-wrap{cursor:grab}.staff-wrap.staff-dragging{cursor:grabbing}}.staff-layer{position:relative;display:inline-block;width:fit-content;min-width:0;align-self:flex-start;margin-top:0;margin-bottom:0}.staff-layer:only-child{margin-left:auto;margin-right:auto}#staffCanvas{width:auto;max-width:none;min-width:0;height:auto;display:block;position:relative;z-index:1}.staff-vexflow{width:auto;max-width:none;min-width:0;height:auto;display:block;position:relative;z-index:1;background:#fff}.staff-vexflow svg{width:100%;height:100%;display:block}.staff-vexflow .staff-system-focus-node{transition:opacity .15s ease-out}.staff-wrap.staff-system-focus-active .staff-vexflow .staff-system-focus-node.staff-system-focus-dimmed{opacity:var(--staff-system-dim-opacity, .36)}.staff-wrap.staff-system-focus-active .staff-vexflow .staff-system-focus-node.staff-system-focus-active-band{opacity:1}.staff-playhead-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}.staff-metronome-trace-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}.staff-metronome-trace-mark{position:absolute;top:0;bottom:0;width:2px;transform:translate(-50%);background:linear-gradient(180deg,#22d3eed9,#22d3ee73 35%,#22d3ee33);box-shadow:0 0 7px #22d3ee6b;opacity:.8}.staff-metronome-trace-mark.is-accent{width:3px;background:linear-gradient(180deg,#f97316eb,#f9731680 35%,#f973163d);box-shadow:0 0 8px #f9731680;opacity:.9}.staff-playhead-line{position:absolute;top:0;bottom:0;width:8px;transform:translate(-50%);background:#94a3b82e;border:1px solid rgba(100,116,139,.28);border-radius:0;box-shadow:none;opacity:.72;transition:opacity 50ms linear}.staff-playhead-line:after{content:none}.staff-playhead-countdown{position:absolute;top:9px;transform:translate(-50%);min-width:22px;padding:2px 6px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel) 88%,transparent);color:var(--ink);font-size:.72rem;font-weight:800;line-height:1.15;text-align:center;white-space:nowrap}.staff-playhead-overlay.is-countdown-bottom .staff-playhead-countdown{top:auto;bottom:10px}.staff-wrap.staff-fixed-viewport .staff-playhead-countdown{top:8px}.staff-wrap.staff-fixed-viewport .staff-playhead-overlay.is-countdown-bottom .staff-playhead-countdown{top:8px;bottom:auto}.staff-playhead-overlay.is-running .staff-playhead-countdown{display:none}.staff-playhead-overlay.is-waiting .staff-playhead-line{opacity:0}.staff-playhead-overlay.is-count-in .staff-playhead-line{opacity:.64}.staff-range-overlay{position:absolute;inset:0;z-index:3;pointer-events:auto;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;overflow:visible}.staff-wrap.staff-fixed-viewport .staff-range-overlay{top:0}.staff-range-overlay.is-disabled{opacity:.6}.staff-range-segments{position:absolute;inset:0;pointer-events:none}.staff-range-segment{position:absolute;height:6px;border-radius:999px;transform:translateY(-50%);background:#60a5fa1f;box-shadow:0 0 0 1px #60a5fa0f,0 1px 4px #2563eb14;pointer-events:none}.staff-range-selection{position:absolute;top:0;height:0;opacity:0;border-radius:999px;background:#2563eb59;pointer-events:none}.staff-range-pin{position:absolute;transform:translate(-50%,-50%);min-width:36px;height:36px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--brand);font-size:.76rem;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:grab;z-index:2;box-shadow:0 0 0 1px #2563eb38,0 3px 12px #0f172a33;touch-action:none}.staff-range-pin:before{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);border-radius:999px;background:transparent}.staff-range-pin:active{cursor:grabbing}.staff-range-pin:disabled{background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--disabled-line);cursor:not-allowed}.staff-range-pin-start{background:#eff6ff}.staff-range-pin-end{background:#dbeafe}.staff-range-pin.is-armed{border-color:color-mix(in srgb,var(--brand) 75%,#0f172a);box-shadow:0 0 0 2px #2563eb47,0 6px 14px #2563eb47}@media (hover: none),(pointer: coarse){.staff-range-pin{min-width:46px;height:46px;font-size:.9rem}.staff-range-pin:before{width:76px;height:76px}}.hud-progress{display:grid;gap:6px}.hud-progress-track{position:relative;height:12px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-soft-bg) 84%,transparent);overflow:hidden}.hud-progress-fill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 72%,#ffffff 28%) 0%,var(--brand) 100%);border-radius:inherit;transition:width .14s ease-out}.hud-progress-text{font-size:.84rem;font-weight:700;color:var(--ink)}.hud-stats{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hud-stat-pill{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:color-mix(in srgb,var(--pill-bg) 90%,transparent);font-size:.8rem;line-height:1.3}.feedback-row{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}.feedback-row.live-pill-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch}.pill{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--pill-bg);font-size:.8rem;line-height:1.25}.hud-toast-wrap{margin-top:8px;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 86%,transparent);background:color-mix(in srgb,var(--panel-soft-bg) 84%,transparent)}.result-toast{font-size:.82rem;font-weight:700;line-height:1.2;color:var(--ink)}.lamp{width:11px;height:11px;margin:0;border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);transition:background .2s ease}.lamp.neutral{background:#94a3b8}.lamp.ok{background:#22c55e}.lamp.bad{background:#ef4444}.lamp.warn{background:#f59e0b}.keyboard{position:relative;min-height:112px;border:1px solid var(--line);border-radius:12px;background:var(--keyboard-bg);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0}.keyboard-inner{position:relative;height:106px}.keyboard-row{display:flex;align-items:center;gap:8px}.focus-inline-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;align-self:stretch;flex:0 0 96px;width:96px;min-width:96px;white-space:normal;min-height:112px;height:112px;border-radius:12px;padding:0 12px;font-size:.86rem;font-weight:700;line-height:1.05}.focus-btn-line{display:block;text-align:center;white-space:nowrap}.key{position:absolute;border:1px solid #a5b4c2;border-radius:0 0 8px 8px;cursor:pointer;user-select:none;touch-action:none;display:flex;align-items:flex-end;justify-content:center;font-size:.5rem;padding-bottom:2px}.key.white{height:106px;background:#fff;z-index:1}.key.black{height:64px;color:#fff;background:#111827;border-color:#111827;z-index:2}.key.active.white{background:#bbf7d0}.key.active.black{background:#4b5563}.key.hint-active:not(.active).white{background:#fef3c7;box-shadow:inset 0 0 0 2px #f59e0b}.key.hint-active:not(.active).black{background:#334155;border-color:#334155;box-shadow:inset 0 0 0 1px #93c5fd}.result-actions{margin-top:6px;display:flex;flex-direction:column;gap:4px}.focus-feedback-btn{display:none;flex:0 0 auto;width:150px;min-width:150px;min-height:40px;height:40px;align-self:center;border-radius:10px;margin-left:auto}body.keyboard-hidden #panelFeedback .feedback-row{align-items:center;gap:8px}body.keyboard-hidden #panelFeedback .focus-feedback-btn,.focus-score-fab{display:none}body.keyboard-hidden:not(.focus-mode) #panelExercise{position:relative}body.keyboard-hidden:not(.focus-mode) #panelExercise .focus-score-fab{display:flex;position:absolute;right:6px;bottom:2px;z-index:8;align-items:center;justify-content:center;text-align:center;min-height:36px;height:36px;padding:0 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 82%,var(--brand));background:color-mix(in srgb,#ffffff 90%,var(--control-bg));box-shadow:0 1px 3px #0f172a1f;font-size:.8rem;font-weight:700;line-height:1.1}body.keyboard-hidden:not(.focus-mode) #panelExercise .staff-wrap{border:0;border-radius:0}body.focus-mode .focus-score-fab{display:none!important}.mini-result-btn{width:fit-content;padding:3px 8px;font-size:.76rem}.mini-result-btn:disabled{opacity:.55;cursor:not-allowed}.feedback-panel{padding:10px}body.focus-mode{--focus-keyboard-height: 170px;--focus-top-clearance: 62px;--focus-staff-top-gap: 18px;--focus-staff-bottom-gap: 76px;--focus-bottom-controls-gap: 10px;--focus-top-right-width: clamp(420px, 29vw, 560px);--focus-top-pill-gap: 12px;--focus-pill-bg: color-mix(in srgb, var(--bg) 68%, transparent);--focus-pill-border: color-mix(in srgb, var(--line) 74%, transparent);--focus-pill-shadow: 0 14px 32px rgba(15, 23, 42, .22);height:100vh;height:100dvh;overflow:hidden}body.focus-mode.keyboard-hidden{--focus-keyboard-height: 0px}body.focus-mode.keyboard-hidden #panelExercise{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--focus-top-clearance))}body.focus-mode .app{min-height:100vh;min-height:100dvh;height:100%;max-height:100%;display:flex;flex-direction:column;gap:0;margin:0;padding:0;background:#fff;overflow:hidden}body.focus-mode .top,body.focus-mode .tabs,body.focus-mode #tab-midi,body.focus-mode #tab-load,body.focus-mode #panelExercise h2,body.focus-mode #panelExercise .grid,body.focus-mode #panelExercise .practice-transport-bar,body.focus-mode #playbackStatus,body.focus-mode #panelExercise .hint,body.focus-mode .midi-volume-row,body.focus-mode #panelFeedback,body.focus-mode #settingsPopover{display:none}body.focus-mode #tab-practice{display:flex;flex:1 1 auto;height:100%;max-height:100%;min-height:0;min-width:0;width:100%;max-width:100vw;position:relative;background:#fff}body.focus-mode #panelExercise{--focus-staff-viewport-limit: max( 140px, calc( 100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--focus-top-clearance) - var(--focus-keyboard-height) - var(--focus-staff-top-gap) - var(--focus-staff-bottom-gap) ) );flex:1 1 auto;height:100%;max-height:100%;min-height:0;min-width:0;margin:0;padding:calc(env(safe-area-inset-top,0px) + var(--focus-top-clearance)) 0 calc(var(--focus-keyboard-height) + env(safe-area-inset-bottom,0px));border:0;border-radius:0;background:#fff;box-shadow:none;display:flex;flex-direction:column;max-width:100vw;overflow:hidden}body.focus-mode #panelExercise .staff-wrap{flex:1 1 auto;margin:var(--focus-staff-top-gap) 0 var(--focus-staff-bottom-gap);border:0;border-radius:0;background:#fff;box-shadow:none;min-height:0;min-width:0;width:100%;max-width:100vw;align-items:flex-start;justify-content:flex-start;padding-bottom:0;overflow-x:hidden;overflow-y:auto}body.focus-mode #panelExercise .staff-wrap.staff-fixed-viewport{flex:0 1 auto;height:min(var(--staff-fixed-viewport-height, clamp(320px, 53vh, 760px)),var(--focus-staff-viewport-limit));min-height:min(220px,var(--focus-staff-viewport-limit));max-height:var(--focus-staff-viewport-limit);overflow-y:hidden;touch-action:none}body.focus-mode #panelExercise .staff-layer{width:fit-content;min-width:100%;min-height:0;align-self:flex-start;background:#fff}body.focus-mode #panelExercise .staff-layer:only-child{margin-left:0;margin-right:0}body.focus-mode #panelKeyboard{position:fixed;left:0;right:0;bottom:0;z-index:36;width:100vw;max-width:100vw;margin:0;padding:0;border:0;border-top:1px solid color-mix(in srgb,#1f2937 12%,#ffffff);border-radius:0;background:#fff;box-shadow:0 -3px 14px #0f172a1a}body.focus-mode #panelKeyboard .keyboard-row{display:flex;width:100%;gap:0}body.focus-mode #panelKeyboard .keyboard{margin:0;flex:1 1 100%;min-width:100%;width:100%;border-radius:0;box-shadow:0 -10px 24px #0f172a42,inset 0 1px #ffffffb3}body.focus-mode #panelKeyboard .keyboard-inner{min-width:100%}body.focus-mode #panelKeyboard #btnFocusMode{display:none}body.focus-mode .focus-top-bar{display:block;position:fixed;inset:0;z-index:55;pointer-events:none}body.focus-mode .focus-hud-module{position:relative;width:100%;height:100%}body.focus-mode .focus-glass-pill{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:16px;border:1px solid var(--focus-pill-border);background:var(--focus-pill-bg);box-shadow:var(--focus-pill-shadow);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);transition:opacity .16s ease,transform .18s ease}body.focus-mode .focus-pill-top-left{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;max-width:calc(100vw - 10px - max(8px,calc(env(safe-area-inset-right,0px) + 8px)) - var(--focus-top-right-width) - var(--focus-top-pill-gap))}body.focus-mode .focus-pill-top-right{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:max(8px,calc(env(safe-area-inset-right,0px) + 8px));width:var(--focus-top-right-width);max-width:calc(100vw - 16px - env(safe-area-inset-right,0px))}body.focus-mode .focus-pill-bottom-center,body.focus-mode .focus-pill-running-stop{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + var(--focus-keyboard-height) + var(--focus-bottom-controls-gap));transform:translate(-50%);gap:10px}body.focus-mode .focus-exit-btn{min-height:34px;padding:6px 9px;font-weight:800;gap:5px}body.focus-mode .focus-inline-select{min-height:34px;min-width:clamp(108px,16vw,170px);max-width:min(42vw,240px);border-radius:11px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--control-bg) 76%,transparent);color:var(--ink);padding:5px 8px;font-weight:600;font-size:.8rem}body.focus-mode #focusExerciseSelect{flex:1 1 auto;width:100%;min-width:clamp(320px,46vw,820px);max-width:min(74vw,980px);font-size:.88rem}body.focus-mode .focus-inline-select-narrow{min-width:clamp(78px,12vw,112px)}body.focus-mode .focus-toggle-chip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;margin:0;min-height:34px;border-radius:11px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--control-bg) 76%,transparent);padding:5px 8px;min-width:0}body.focus-mode .focus-toggle-chip>span{font-size:.72rem;font-weight:700;min-width:0;white-space:nowrap}body.focus-mode .focus-toggle-chip input[type=checkbox]{display:inline-block;justify-self:end;margin:0}body.focus-mode .focus-pill-top-right .focus-toggle-chip{min-width:176px}body.focus-mode .focus-loop-btn,body.focus-mode .focus-play-btn,body.focus-mode .focus-start-btn,body.focus-mode .focus-stop-btn{min-height:38px;padding:7px 14px;font-weight:800}body.focus-mode .focus-top-bar .mini-btn{appearance:none;-webkit-appearance:none;border-radius:999px;background-clip:padding-box;overflow:hidden}body.focus-mode .focus-stop-btn{min-width:170px}body.focus-mode .focus-play-btn.active,body.focus-mode .focus-start-btn.active,body.focus-mode .focus-loop-btn.active{background:color-mix(in srgb,var(--brand) 22%,var(--control-bg))}body.focus-mode.focus-running .focus-pill-top-left,body.focus-mode.focus-running .focus-pill-top-right,body.focus-mode.focus-running .focus-pill-bottom-center{opacity:0;pointer-events:none;transform:translateY(-8px)}body.focus-mode.focus-running .focus-pill-bottom-center{transform:translate(-50%) translateY(8px)}body.focus-mode .focus-pill-running-stop.hidden{display:none}@media (max-width: 1400px){body.focus-mode .focus-pill-top-right{width:clamp(360px,33vw,430px);max-width:calc(100vw - 18px - env(safe-area-inset-right,0px));flex-wrap:nowrap;justify-content:flex-start}body.focus-mode .focus-inline-select-narrow{min-width:clamp(64px,9vw,92px)}body.focus-mode .focus-pill-top-right .focus-toggle-chip{flex:0 1 168px;width:auto;min-width:140px;max-width:178px}body.focus-mode .focus-pill-top-right .focus-toggle-chip>span{max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media (min-width: 1700px){body.focus-mode{--focus-keyboard-height: 154px;--focus-staff-top-gap: 14px;--focus-staff-bottom-gap: 30px;--focus-bottom-controls-gap: 36px;--focus-top-right-width: clamp(560px, 32vw, 720px);--focus-top-pill-gap: 14px}body.focus-mode .focus-pill-top-right .focus-toggle-chip{min-width:206px}body.focus-mode .focus-inline-select-narrow{min-width:142px}body.focus-mode #panelExercise .staff-wrap.staff-fixed-viewport{height:min(max(var(--staff-fixed-viewport-height, clamp(320px, 53vh, 760px)),calc(var(--focus-staff-viewport-limit) - 64px)),var(--focus-staff-viewport-limit));min-height:min(max(220px,calc(var(--focus-staff-viewport-limit) - 64px)),var(--focus-staff-viewport-limit))}}@media (pointer: coarse) and (min-width: 981px){body.focus-mode{--focus-keyboard-height: 132px;--focus-top-clearance: 58px;--focus-staff-top-gap: 14px;--focus-staff-bottom-gap: 36px}}@media (max-width: 980px){body.focus-mode{--focus-keyboard-height: 148px;--focus-top-clearance: 56px;--focus-staff-top-gap: 16px;--focus-staff-bottom-gap: 84px;--focus-top-right-width: min(48vw, 450px);--focus-top-pill-gap: 10px}body.focus-mode .focus-pill-top-left{max-width:calc(100vw - 10px - max(8px,calc(env(safe-area-inset-right,0px) + 8px)) - var(--focus-top-right-width) - var(--focus-top-pill-gap))}body.focus-mode .focus-pill-top-right{width:var(--focus-top-right-width);max-width:calc(100vw - 16px - env(safe-area-inset-right,0px))}body.focus-mode .focus-pill-top-right .focus-toggle-chip{flex:1 1 100%;width:100%;min-width:0}body.focus-mode .focus-inline-select{min-width:clamp(82px,18vw,116px);max-width:min(34vw,170px);font-size:.76rem}body.focus-mode #focusExerciseSelect{width:100%;min-width:clamp(184px,30vw,360px);max-width:100%;font-size:.8rem}body.focus-mode .focus-inline-select-narrow{min-width:clamp(68px,12vw,96px)}body.focus-mode .focus-pill-top-right .focus-toggle-chip>span{max-width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media (max-width: 760px){body.focus-mode{--focus-keyboard-height: 124px;--focus-top-clearance: 106px;--focus-staff-top-gap: 14px;--focus-staff-bottom-gap: 92px}body.focus-mode .focus-pill-top-left{left:8px;right:8px;max-width:none}body.focus-mode .focus-pill-top-right{top:calc(env(safe-area-inset-top,0px) + 58px);left:8px;right:8px;max-width:none}body.focus-mode .focus-glass-pill{width:auto;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}body.focus-mode .focus-pill-bottom-center,body.focus-mode .focus-pill-running-stop{left:8px;right:8px;transform:none;justify-content:center}body.focus-mode.focus-running .focus-pill-bottom-center{transform:translateY(8px)}body.focus-mode .focus-inline-select{min-width:120px}}body.theme-dark{--bg: #0b1220;--ink: #e5e7eb;--muted: #9aa9be;--line: #334155;--brand: #60a5fa;--ok: #22c55e;--bad: #f87171;--warn: #fbbf24;--tabs-border: #334155;--tabs-bg: linear-gradient(135deg, #0f172a 0%, #17243a 45%, #111b2e 100%);--control-bg: #0f172a;--control-text: #e5e7eb;--settings-icon-bg: #0f172a;--settings-icon-text: #cbd5e1;--settings-active-bg: #1e293b;--settings-active-text: #93c5fd;--settings-popover-bg: #0b1629;--settings-popover-border: #334155;--settings-row-text: #cbd5e1;--panel-soft-bg: rgba(15, 23, 42, .78);--staff-wrap-bg: #f8fafc;--pill-bg: #0f172a;--keyboard-bg: #1e293b;--focus-title-text: #e2e8f0;--focus-title-bg: rgba(15, 23, 42, .88);--focus-title-border: #334155;--disabled-bg: #1f2937;--disabled-text: #94a3b8;--disabled-line: #334155}body.theme-dark{background:radial-gradient(circle at top right,#1b2c47 0%,transparent 45%),radial-gradient(circle at bottom left,#203426 0%,transparent 40%),var(--bg)}body.theme-dark .tab-midi-indicator{color:#9ca3af;background:#111827;border-color:#334155}body.theme-dark .tab-midi-indicator.is-connected{color:#86efac;background:#123122;border-color:#166534}body.theme-dark .beta-tag{border-color:#f59e0b;color:#fcd34d;background:#92400e57}body.theme-dark .staff-range-selection{background:#60a5fa61}body.theme-dark .staff-range-pin-start{background:#1e3a8a}body.theme-dark .staff-range-pin-end{background:#1d4ed8}@media (max-width: 740px){.app{padding:8px 10px 72px;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 72px)}.top h1{font-size:1.5rem}.top-title-row .feedback-mail-label{display:none}.hud-stats,.feedback-row.live-pill-row,.midi-step-row{grid-template-columns:1fr}.keyboard-row{flex-wrap:wrap;gap:6px}.keyboard-row .keyboard{width:100%}.focus-inline-btn{flex:1 1 100%;width:100%;min-width:0;min-height:46px;height:46px;padding:0 10px;font-size:.78rem;flex-direction:row;gap:4px}.focus-inline-btn .focus-btn-line{display:inline}.cookie-banner-actions{grid-template-columns:1fr}.practice-loop-toggle{max-width:100%}}body.theme-ocean{--bg: #e6f4fb;--panel: #f8fdff;--ink: #0f2f43;--muted: #3b5f73;--line: #9dc4d8;--brand: #0b5f8a;--ok: #0e9f6e;--bad: #d64545;--warn: #c07c15;--tabs-border: #8bb7cf;--tabs-bg: linear-gradient(135deg, #d8eefb 0%, #e8f7ff 45%, #f3fbff 100%);--control-bg: #ffffff;--control-text: var(--ink);--settings-icon-bg: #ffffff;--settings-icon-text: #0f2f43;--settings-active-bg: #cfe9f8;--settings-active-text: #0a4362;--settings-popover-bg: #ffffff;--settings-popover-border: #9dc4d8;--settings-row-text: #1f4a60;--panel-soft-bg: rgba(255, 255, 255, .72);--staff-wrap-bg: rgba(255, 255, 255, .92);--pill-bg: #ffffff;--keyboard-bg: #eef8ff;--focus-title-text: #0f2f43;--focus-title-bg: rgba(255, 255, 255, .9);--focus-title-border: #9dc4d8;--disabled-bg: #dde9ef;--disabled-text: #5f7280;--disabled-line: #bfd2de;background:radial-gradient(circle at top right,#bde2f7 0%,transparent 44%),radial-gradient(circle at bottom left,#caecd9 0%,transparent 40%),var(--bg)}body.theme-sunset{--bg: #fff3e8;--panel: #fffaf4;--ink: #4a2a1b;--muted: #7a5a4a;--line: #e1bfa8;--brand: #b45309;--ok: #2f9e44;--bad: #c0392b;--warn: #b7791f;--tabs-border: #dbb59a;--tabs-bg: linear-gradient(135deg, #ffe4cf 0%, #fff0e0 45%, #fff8ee 100%);--control-bg: #fffdf9;--control-text: var(--ink);--settings-icon-bg: #fffdf9;--settings-icon-text: #5b3723;--settings-active-bg: #ffe2cd;--settings-active-text: #8f3b08;--settings-popover-bg: #fffaf3;--settings-popover-border: #e1bfa8;--settings-row-text: #6a4431;--panel-soft-bg: rgba(255, 252, 247, .8);--staff-wrap-bg: rgba(255, 253, 250, .94);--pill-bg: #fffdf9;--keyboard-bg: #fff6ed;--focus-title-text: #5b3723;--focus-title-bg: rgba(255, 253, 248, .9);--focus-title-border: #e1bfa8;--disabled-bg: #f1e1d4;--disabled-text: #8a6e5a;--disabled-line: #d8c0af;background:radial-gradient(circle at top right,#ffd6b6 0%,transparent 45%),radial-gradient(circle at bottom left,#ffe5c9 0%,transparent 40%),var(--bg)}body.theme-paper{--bg: #f7f2ea;--panel: #fdfaf3;--ink: #3b3026;--muted: #6d5b4a;--line: #d2c4b2;--brand: #6b4f3a;--ok: #3d8d5a;--bad: #b24545;--warn: #9b6b2f;--tabs-border: #cbbba8;--tabs-bg: linear-gradient(135deg, #efe5d8 0%, #f5eddf 45%, #fbf6ef 100%);--control-bg: #fffdf8;--control-text: var(--ink);--settings-icon-bg: #fffdf8;--settings-icon-text: #4b3b2e;--settings-active-bg: #ece0d1;--settings-active-text: #5a4432;--settings-popover-bg: #fffcf6;--settings-popover-border: #d2c4b2;--settings-row-text: #5b4938;--panel-soft-bg: rgba(255, 253, 249, .8);--staff-wrap-bg: rgba(255, 253, 249, .94);--pill-bg: #fffdf8;--keyboard-bg: #f7efe4;--focus-title-text: #4b3b2e;--focus-title-bg: rgba(255, 252, 247, .9);--focus-title-border: #d2c4b2;--disabled-bg: #e9dfd4;--disabled-text: #7d6c5c;--disabled-line: #cec0b0;background:radial-gradient(circle at top right,#e6d8c4 0%,transparent 45%),radial-gradient(circle at bottom left,#ede3d3 0%,transparent 40%),var(--bg)}