@font-face{font-family:DM Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/dm-mono-400-mu0k-7m0.ttf) format("truetype")}@font-face{font-family:DM Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/dm-mono-500-BzMgDRs4.ttf) format("truetype")}@font-face{font-family:Fraunces;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fraunces-500-CBiEAUG_.ttf) format("truetype")}@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fraunces-600-_PSd6Qaz.ttf) format("truetype")}:root{color:#24231f;background:var(--page);color-scheme:light;--text: #24231f;--muted: #6c675e;--faint: #9d968c;--accent-muted: #987057;--accent: #b55d45;--accent-hover: #984b38;--surface: #fffdf8;--surface-muted: #f3eee4;--page: #f5f1e8;--border: #ded7ca;--rule: #eee8dd;--shadow: #6b584012;--backdrop: #24231f44;font-family:DM Mono,monospace;font-synthesis:none;text-rendering:optimizeLegibility}[data-theme=dark]{color-scheme:dark;--text: #eee9df;--muted: #b5aea1;--faint: #847d72;--accent-muted: #d09a7c;--accent: #d8795d;--accent-hover: #e18a70;--surface: #252321;--surface-muted: #312d28;--page: #181715;--border: #4a443b;--rule: #3b3731;--shadow: #00000040;--backdrop: #00000088}html[data-theme=dark],html[data-theme=dark] body,html[data-theme=dark] #root{background-color:#181715}*{box-sizing:border-box}html,body,#root{min-height:100vh;background-color:var(--page)}html,body{min-height:100vh}body{margin:0;min-width:320px;color:var(--text)}button,select{font:inherit}button{cursor:pointer}.app-shell{width:min(960px,calc(100% - 40px));margin:0 auto;padding:72px 0 36px}.masthead{position:relative;max-width:680px;margin-bottom:48px;padding-left:78px}.brand-mark{position:absolute;top:0;left:0;width:58px;height:58px;border-radius:11px;box-shadow:0 10px 24px #6b584026}.menu-button{position:fixed;z-index:11;top:28px;right:max(20px,calc((100vw - 960px)/2));display:grid;width:42px;height:42px;place-content:center;gap:5px;border:1px solid var(--border);border-radius:2px;color:var(--muted);background:var(--surface);box-shadow:0 8px 24px var(--shadow)}.menu-button:hover,.menu-button:focus-visible{border-color:#b55d45;color:#b55d45}.menu-button span{display:block;width:18px;height:1px;background:currentColor}.eyebrow{margin:0 0 12px;color:var(--accent-muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}h1,h2{font-family:Fraunces,Georgia,serif;font-weight:500}h1{margin:0;font-size:clamp(48px,8vw,86px);letter-spacing:-.055em;line-height:.95}h1 em{color:var(--accent);font-style:normal}h2{margin:0;font-size:27px;letter-spacing:-.03em}.intro{max-width:500px;margin:22px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.practice-card{padding:32px;border:1px solid var(--border);background:var(--surface);box-shadow:0 16px 50px var(--shadow)}.card-topline,.settings,.actions,.answer{display:flex;align-items:center;justify-content:space-between;gap:24px}.timer{min-width:72px;color:var(--accent);font-size:24px;font-weight:500;text-align:right}.notation-panel{display:grid;min-height:230px;place-items:center;margin:30px 0 18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow-x:auto}.staff{width:min(520px,100%)}.empty-note{color:var(--faint);font-size:13px}.instruction{min-height:20px;margin:0 0 24px;color:var(--muted);font-size:13px;text-align:center}.answer{justify-content:flex-start;margin:0 0 26px;padding:18px;background:var(--surface-muted)}.answer>div{display:grid;gap:7px}.answer-label{color:var(--accent-muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.answer strong{font-size:14px;font-weight:500}.actions{justify-content:center;flex-wrap:wrap}.primary-button,.secondary-button{padding:13px 22px;border-radius:2px;font-size:12px;letter-spacing:.03em}.secondary-button:disabled{cursor:default;opacity:.55}.primary-button{border:1px solid var(--accent);color:#fffdf8;background:var(--accent)}.primary-button:hover,.primary-button:focus-visible{background:var(--accent-hover)}.secondary-button{border:1px solid var(--border);color:var(--muted);background:transparent}.secondary-button:hover,.secondary-button:focus-visible{border-color:var(--accent);color:var(--accent)}.settings-drawer{position:fixed;z-index:10;top:0;right:0;display:grid;width:min(360px,100%);height:100vh;padding:96px 30px 30px;border-left:1px solid var(--border);background:var(--surface);box-shadow:-16px 0 50px var(--shadow);transform:translate(100%);transition:transform .18s ease}.settings-drawer.is-open{transform:translate(0)}.settings-controls{display:grid;align-content:start;gap:24px}.settings-drawer label,fieldset{display:grid;gap:8px;color:var(--muted);font-size:11px}fieldset{min-width:220px;margin:0;padding:0;border:0}legend{padding:0}.settings-hint{margin:0;color:var(--faint);font-size:11px;line-height:1.6}.checkbox-option{display:flex!important;grid-template-columns:auto 1fr;align-items:center;gap:8px!important}.checkbox-option input{accent-color:var(--accent)}.finger-options{display:flex;flex-wrap:wrap;gap:8px}.finger-option{display:flex!important;grid-template-columns:auto 1fr;align-items:center;gap:5px!important}.finger-option input{accent-color:var(--accent)}.settings-backdrop{position:fixed;z-index:9;inset:0;border:0;background:var(--backdrop)}select{padding:10px 28px 10px 12px;border:1px solid #ded7ca;border:1px solid var(--border);color:var(--text);background:var(--surface)}footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--border);padding-top:18px;color:var(--faint);font-size:11px}footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px}footer a{display:inline-flex;align-items:center;gap:6px;color:var(--accent-muted);text-decoration:none}footer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}footer a:hover,footer a:focus-visible{color:var(--accent);text-decoration:underline}@media(max-width:600px){.app-shell{width:min(100% - 28px,960px);padding-top:42px}.masthead{padding-left:0;padding-top:72px}.brand-mark{width:54px;height:54px}.practice-card{padding:20px 16px}.menu-button{top:16px;right:14px}.settings-drawer{padding:82px 20px 24px}.card-topline{align-items:start}footer{align-items:flex-start;flex-direction:column}footer nav{justify-content:flex-start}}