.login{max-width:400px;padding-top:64px;text-align:center}.login-brand{margin:0;font-size:44px;letter-spacing:-.02em;color:var(--text-h)}.login-form{margin-top:28px;text-align:left;display:grid;gap:4px}.login-form .btn{width:100%}.queue-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px;flex-wrap:wrap}.queue-hello{margin:0;color:var(--text-muted-1);font-size:var(--fs-sm)}.queue-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.queue-score{font-variant-numeric:tabular-nums;color:var(--text-h)}.queue-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}.queue-card{display:flex;flex-direction:column;gap:2px;width:100%;padding:14px 16px;text-align:left;font-family:inherit;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}.queue-card-topic{font-size:12px;color:var(--text-muted-2)}.queue-card-title{font-size:var(--fs-base);color:var(--text-h)}.queue-card-meta{font-size:var(--fs-sm);color:var(--text-muted-1)}.queue-empty{padding:28px 20px;text-align:center;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius)}.queue-empty-title{margin:0 0 8px;font-size:var(--fs-lg);color:var(--text-h)}.staff{width:100%;max-width:640px;height:auto;display:block;margin:0 auto;touch-action:manipulation}.staff-line,.staff-ledger{stroke:var(--staff-line);stroke-width:1.4}.staff-clef{font-size:84px;fill:var(--text-h);dominant-baseline:alphabetic}.staff-accidental{font-size:26px;fill:var(--text-h)}.staff-head{fill:var(--text-h)}.staff-stem{stroke:var(--text-h);stroke-width:2}.staff-hit{fill:transparent}.staff-note{cursor:pointer;outline:none}.staff-note--disabled{cursor:default}.staff-note:not(.staff-note--disabled):hover .staff-head,.staff-note:focus-visible .staff-head{fill:var(--accent)}.staff-note:not(.staff-note--disabled):hover .staff-stem,.staff-note:focus-visible .staff-stem{stroke:var(--accent)}.staff-note--selected .staff-head{fill:var(--accent)}.staff-note--selected .staff-stem{stroke:var(--accent)}.staff-note--correct .staff-head{fill:var(--success)}.staff-note--correct .staff-stem{stroke:var(--success)}.staff-note--wrong .staff-head{fill:var(--danger)}.staff-note--wrong .staff-stem{stroke:var(--danger)}.staff-ghost-mark{fill:var(--text-muted-2);opacity:.5}.staff-note--reveal .staff-head{fill:none;stroke:var(--success);stroke-width:2;stroke-dasharray:3 2}.staff-note--reveal .staff-stem{stroke:var(--success)}.practice-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.practice-meta{flex:1;min-width:0}.practice-topic{font-size:12px;color:var(--text-muted-2)}.practice-title{font-size:var(--fs-lg);margin:2px 0 0}.practice-score{font-variant-numeric:tabular-nums;color:var(--text-h)}.practice-task{margin:8px 0 20px;text-align:center;font-size:var(--fs-lg);color:var(--text)}.practice-task strong{color:var(--accent)}.practice-ghost-hint{margin-top:8px;text-align:center;font-size:var(--fs-sm);color:var(--text-muted-2)}.practice-result{margin-top:20px;padding:16px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.practice-result--correct{border-color:var(--success)}.practice-result--wrong{border-color:var(--danger)}.practice-verdict{margin:0 0 8px;font-size:var(--fs-lg);color:var(--text-h)}.practice-points{margin:0 0 12px;color:var(--text-muted-1)}.practice-box{color:var(--text-muted-2)}.practice-conflict{color:var(--danger);margin:0 0 12px;font-size:var(--fs-sm)}.teacher-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.teacher-header h1{margin:0;font-size:var(--fs-lg)}.course-list,.lesson-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}.lesson-list{margin-top:14px}.course{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--border);border-radius:10px}.course--active{border-color:var(--accent);background:var(--accent-bg)}.course-pick{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left;font-family:inherit;background:none;border:none;cursor:pointer;padding:0}.course-title{color:var(--text-h)}.course-meta{font-size:var(--fs-sm);color:var(--text-muted-1)}.note-palette{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}:root{--text: #3c3733;--text-h: #1f1b18;--text-muted-1: #6b625b;--text-muted-2: #948a82;--bg: #faf7f2;--surface: #fffdfa;--border: #e6ded3;--accent: #8a5a2b;--accent-bg: rgb(138 90 43 / 10%);--success: #2f7d44;--danger: #b23a2f;--staff-line: #6b625b;--shadow: 0 1px 2px rgb(31 27 24 / 6%);--fs-sm: 14px;--fs-base: 16px;--fs-lg: 20px;--fs-xl: 28px;--radius: 12px;--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif}@media (prefers-color-scheme: dark){:root{--text: #ddd5cc;--text-h: #f4efe8;--text-muted-1: #a89e94;--text-muted-2: #7d746c;--bg: #17150f;--surface: #211d17;--border: #362f26;--accent: #d9a05f;--accent-bg: rgb(217 160 95 / 14%);--success: #6fbf7f;--danger: #e0796c;--staff-line: #a89e94}}*{box-sizing:border-box}body{margin:0;font-family:var(--sans);font-size:var(--fs-base);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}.page{max-width:720px;margin:0 auto;padding:20px 16px 48px}h1{font-size:var(--fs-xl);color:var(--text-h);margin:4px 0 12px}h2{font-size:var(--fs-lg);color:var(--text-h);margin:0 0 12px}.muted{color:var(--text-muted-1)}.error{color:var(--danger)}.label{color:var(--text-muted-1);font-size:var(--fs-sm);margin:12px 0 6px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}.row{display:flex;gap:8px;align-items:center}.row--gap{flex-wrap:wrap;margin:12px 0}.input{width:100%;padding:12px;font-size:16px;font-family:inherit;color:var(--text-h);background:var(--bg);border:1px solid var(--border);border-radius:10px;margin-bottom:10px}.btn{padding:12px 16px;font-size:var(--fs-base);font-family:inherit;color:var(--surface);background:var(--accent);border:1px solid var(--accent);border-radius:10px;cursor:pointer;white-space:nowrap}.btn:disabled{opacity:.5;cursor:default}.btn--ghost{color:var(--text);background:transparent;border-color:var(--border)}.btn--small{padding:8px 12px;font-size:var(--fs-sm)}.chip{padding:8px 12px;font-size:var(--fs-sm);font-family:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;cursor:pointer}.chip--on{color:var(--accent);background:var(--accent-bg);border-color:var(--accent)}.chip-oct{margin-left:4px;font-size:11px;color:var(--text-muted-2)}