: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, 0.65);--staff-wrap-bg:rgba(255, 255, 255, 0.9);--pill-bg:#ffffff;--keyboard-bg:#f8fafc;--focus-title-text:#334155;--focus-title-bg:rgba(255, 255, 255, 0.9);--focus-title-border:#cbd5e1;--disabled-bg:#e5e7eb;--disabled-text:#6b7280;--disabled-line:#cbd5e1}*{box-sizing:border-box}body{margin:0;font-family:"Trebuchet MS","Segoe UI",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 calc(env(safe-area-inset-bottom,0px) + 72px)}.top h1{margin:0;font-size:1.8rem}.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}.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}.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 0 rgba(255,255,255,.85),0 2px 8px rgba(15,23,42,.08)}.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}.tab-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}.tabs-spacer{flex:1 1 auto}.feedback-wrap,.language-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}.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:10px;border-radius:12px;border:1px solid var(--settings-popover-border);background:var(--settings-popover-bg);box-shadow:0 10px 24px rgba(15,23,42,.16)}.settings-popover h3{margin:0 0 8px;font-size:.86rem}.settings-row{margin:0 0 8px;display:block;font-size:.84rem;color:var(--settings-row-text)}.settings-row:last-child{margin-bottom:0}.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-toggle input[type=checkbox]{width:18px;height:18px}.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:4px;border-top:1px solid var(--panel-border)}.settings-sync-group .settings-range-row{grid-template-columns:auto 1fr auto}.settings-sync-group .settings-range-row label{font-size:.8rem;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,color .2s,border-color .2s}.tab-midi-indicator.is-connected{color:#166534;background:#dcfce7;border-color:#86efac}.tab-panel{display:none}.tab-panel.active{display:block}.panel{background:0 0;border:0;border-radius:0;padding:8px 0;margin-bottom:8px;box-shadow:none}.panel h2{margin:0 0 6px;font-size:.98rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.load-source-block{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft-bg)}.source-title{margin:0 0 8px;font-size:.86rem;font-weight:700;color:var(--ink)}.import-actions{margin-top:8px;display:flex;justify-content:flex-end}.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}.midi-step-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.midi-step .status{margin-top:8px}.midi-step #securityHint.hint{margin-top:6px}.btn,input[type=file],select{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.95rem;background:var(--control-bg);color:var(--control-text)}input[type=file]{width:100%}.btn{cursor:pointer;background:var(--brand);color:#fff;border-color:var(--brand)}.btn.secondary{background:var(--control-bg);color:var(--ink)}.btn.secondary:disabled,.btn:disabled{background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--disabled-line);cursor:not-allowed;box-shadow:none}.status{margin:10px 0 0;font-weight:700}.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}.exercise-info{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-weight:700}body.feedback-hidden #panelExercise .exercise-info,body.feedback-hidden #panelFeedback{display:none}.practice-tools{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.staff-wrap{margin-top:7px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;border:1px dashed var(--line);border-radius:10px;background:var(--staff-wrap-bg)}#staffCanvas{width:auto;max-width:none;min-width:0;height:auto;display:block}.feedback-row{display:flex;gap:6px;flex-wrap:wrap}.pill{border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:var(--pill-bg);font-size:.82rem}.lamp{margin-top:6px;width:100%;height:12px;border-radius:999px;border:1px solid var(--line);transition:background .2s}.lamp.neutral{background:#e2e8f0}.lamp.ok{background:#4ade80}.lamp.bad{background:#f87171}.lamp.warn{background:#fbbf24}.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}.result-actions{margin-top:6px;display:flex;flex-direction:column;gap:4px}.mini-result-btn{width:fit-content;padding:3px 8px;font-size:.76rem}.mini-result-btn:disabled{opacity:.55;cursor:not-allowed}.feedback-panel{padding:4px 0}.feedback-panel h2{margin-bottom:6px}body.focus-mode .app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:6px;padding-top:max(62px,calc(env(safe-area-inset-top,0px) + 58px));padding-bottom:calc(env(safe-area-inset-bottom,0px) + 88px)}body.focus-mode .focus-top-bar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:0;right:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;pointer-events:none}body.focus-mode .focus-exercise-title{grid-column:2;justify-self:center;max-width:min(64vw,640px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;color:var(--focus-title-text);background:var(--focus-title-bg);border:1px solid var(--focus-title-border);border-radius:999px;padding:2px 10px;text-align:center}body.focus-mode .focus-reset-btn{grid-column:3;justify-self:end;pointer-events:auto}body.focus-mode #panelExercise .exercise-info,body.focus-mode #panelExercise .grid,body.focus-mode #panelExercise .hint,body.focus-mode #panelExercise h2,body.focus-mode #panelFeedback .result-actions,body.focus-mode #playbackStatus,body.focus-mode #settingsPopover,body.focus-mode #tab-load,body.focus-mode #tab-midi,body.focus-mode .midi-volume-row,body.focus-mode .tabs,body.focus-mode .top{display:none}body.focus-mode .panel{margin-bottom:6px;padding:4px 0}body.focus-mode #panelExercise .staff-wrap{margin-top:0}body.focus-mode #panelKeyboard .keyboard{margin:0}body.focus-mode #btnFocusMode,body.focus-mode #btnFocusMode.active{border-color:var(--line);background:var(--control-bg);color:var(--muted);box-shadow:none;opacity:.82}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, 0.78);--staff-wrap-bg:#f8fafc;--pill-bg:#0f172a;--keyboard-bg:#1e293b;--focus-title-text:#e2e8f0;--focus-title-bg:rgba(15, 23, 42, 0.88);--focus-title-border:#334155;--disabled-bg:#1f2937;--disabled-text:#94a3b8;--disabled-line:#334155;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:rgba(146,64,14,.34)}@media (max-width:740px){.app{padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 72px)}.midi-step-row{grid-template-columns:1fr}.midi-step-row .btn{width:100%}.keyboard-row{gap:6px}.focus-inline-btn{flex:0 0 92px;width:92px;min-width:92px;min-height:112px;height:112px;padding:0 10px;font-size:.78rem}}