:root{color-scheme:light;--bg: #faf7f3;--panel: #ffffff;--panel-2: #f2ede7;--line: #ddd4cb;--text: #221c17;--muted: #6b625a;--accent: #b4651c;--good: #2f8a4f;--bad: #c9392b;--paper: #fffdfb;--ink: #17130f;--radius: 14px}*{box-sizing:border-box}html,body{margin:0}body{min-height:100vh;background:var(--bg);color:var(--text);font:20px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%}h1,h2,h3{margin:0;font-weight:620;letter-spacing:-.01em}h1{font-size:2.2rem}h2{font-size:1.55rem}h3{font-size:1.15rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}a{color:var(--accent)}.wrap{max-width:56rem;margin:0 auto;padding:1.5rem 1rem 4rem}.muted{color:var(--muted)}.small{font-size:.95rem}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.btn{appearance:none;border:1px solid transparent;background:var(--accent);color:#fff8f0;font-weight:650;font-size:1.15rem;padding:.85rem 1.5rem;border-radius:12px;cursor:pointer}.btn:disabled{opacity:.55;cursor:default}.btn--ghost{background:transparent;color:var(--text);border-color:var(--line);font-weight:550;padding:.7rem 1.2rem}.btn--danger{background:transparent;color:var(--bad);border-color:var(--line);font-weight:550;padding:.7rem 1.2rem}.row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}.field{display:grid;gap:.4rem}.field>span{font-size:1rem;color:var(--muted)}.field input,.field select{width:100%;padding:.75rem .9rem;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit}.field input:focus-visible,.field select:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}.notice{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:.85rem 1.1rem;font-size:1.05rem;color:var(--muted)}.home{max-width:42rem;margin:0 auto;padding:4.5rem 1.5rem;display:grid;gap:2rem}.home p{color:var(--muted);margin:0}.recents{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.recents li{display:flex;align-items:center;gap:.75rem;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.65rem .65rem .65rem 1rem}.recents a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-decoration:none}.practice{min-height:100dvh;display:flex;flex-direction:column}.stage{flex:1;display:grid;place-items:center;gap:1.25rem;padding:1.5rem 1rem calc(8.5rem + env(safe-area-inset-bottom));text-align:center}.sheet{appearance:none;border:none;font:inherit;cursor:pointer;background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:2.5rem 2rem;display:grid;place-items:center safe center;max-width:min(94vw,52rem);overflow-x:auto;box-shadow:0 1px 3px #1e140a14}.sheet svg.staff{height:clamp(17rem,42vh,30rem);width:auto}.sheet .target{color:var(--accent)}.status{font-size:1.3rem;min-height:2.1rem;text-align:center;margin:.5rem 0 0;color:var(--muted)}.status[data-tone=good]{color:var(--good)}.status[data-tone=bad]{color:var(--bad)}.metronome{position:relative;width:min(94vw,52rem);margin:0 auto;height:.75rem}.metronome[hidden]{display:none}.metronome .beat{position:absolute;top:0;width:.75rem;height:.75rem;border-radius:999px;border:1.5px solid var(--line);background:transparent;transform:translate(-50%);transition:background-color 80ms ease,border-color 80ms ease,transform 80ms ease}.metronome .beat.active{background:var(--accent);border-color:var(--accent);transform:translate(-50%) scale(1.3)}.answer{display:grid;gap:.6rem;justify-items:center;margin-top:1.25rem}.answer[hidden]{display:none}.answer svg.holes{width:220px;height:auto;color:var(--text);--hole-bg: var(--bg)}.legend{font-size:.95rem;color:var(--muted)}.unverified{color:var(--accent);font-size:.95rem}.controls{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom))}.icon-btn{appearance:none;width:4.5rem;height:4.5rem;flex:none;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;box-shadow:0 1px 3px #1e140a14}.icon-btn svg{width:2rem;height:2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn[aria-pressed=true]{background:var(--accent);color:#fff8f0;border-color:transparent}.stats{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:1.1rem;color:var(--muted);margin-top:1.25rem;justify-content:center}.stats b{color:var(--text);font-weight:600}dialog#settings-dialog{width:min(56rem,100%);max-height:min(85dvh,100%);margin:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--text);padding:1.5rem 1.75rem 2rem;overflow-y:auto}dialog#settings-dialog::backdrop{background:#140e0873}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .85rem;position:sticky;top:0;background:var(--panel);padding-bottom:.7rem}.dialog-head h2{margin:0}.dialog-head .icon-btn{width:3rem;height:3rem}.dialog-head .icon-btn svg{width:1.45rem;height:1.45rem}.session{padding-bottom:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line)}.session .stats{margin-top:1rem}.settings-grid{display:grid;gap:1.75rem;margin-top:1rem}.settings-cols{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.25rem,1fr));gap:.6rem}.note-toggle{display:grid;justify-items:center;gap:.25rem;padding:.6rem .4rem;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);cursor:pointer;font-size:1rem;position:relative}.note-toggle input{position:absolute;opacity:0;pointer-events:none}.note-toggle:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel-2))}.note-toggle:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.note-toggle svg.holes{width:100%;max-width:4.5rem;height:auto;color:var(--text);--hole-bg: var(--bg)}.note-toggle .name{font-weight:600}.note-toggle .flag{color:var(--accent);font-size:.85rem}.checks{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem}.checks label{display:flex;gap:.45rem;align-items:center;font-size:1.1rem}.editor{display:grid;gap:1.1rem;justify-items:center}.editor svg.holes{width:330px;height:auto;color:var(--text);--hole-bg: var(--bg)}.editor .hole--interactive{cursor:pointer}.editor .hole--interactive:hover circle{opacity:.75}.editor .hole--interactive:focus-visible{outline:2px solid var(--accent)}