:root{--bg:#0f1216;--surface:#171b21;--surface-raised:#1f242c;--border:#2c323c;--text:#e7e9ee;--text-muted:#8b93a1;--nut:#e7e9ee;--fret-wire:#3a4048;--inlay:#4a5361;--string-line:#5b6472;--accent:#2dd4bf;--accent-dark:#0f766e;--correct:#22c55e;--correct-dim:#14532d;--incorrect:#ef4444;--font-sans:"Segoe UI", system-ui, -apple-system, Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);min-height:100vh}#root{flex-direction:column;min-height:100vh;display:flex}button{font-family:inherit}h1,h2,h3{margin:0}.mode-select{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;display:flex}.mode-select h1{font-size:2.2rem}.mode-select__subtitle{color:var(--text-muted);max-width:32rem;margin:0 0 24px}.mode-select__cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;width:100%;max-width:640px;display:grid}.mode-card{background:var(--surface);border:1px solid var(--border);color:var(--text);text-align:left;cursor:pointer;border-radius:14px;padding:24px;transition:border-color .15s,transform .15s}.mode-card:hover,.mode-card:focus-visible{border-color:var(--accent);outline:none;transform:translateY(-2px)}.mode-card h2{color:var(--accent);margin-bottom:8px;font-size:1.15rem}.mode-card p{color:var(--text-muted);margin:0;font-size:.95rem}.fretboard{background:var(--surface);border:1px solid var(--border);border-radius:12px;grid-template-rows:30px repeat(4,66px);gap:0;max-width:100%;padding:10px 14px 16px;display:grid;overflow-x:auto}.fretboard__corner{grid-row:1}.fretboard__fret-label{color:var(--text-muted);grid-row:1;justify-content:center;align-items:flex-end;padding-bottom:6px;font-size:13px;display:flex;position:relative}.fretboard__fret-label--open{letter-spacing:.06em;text-transform:uppercase;font-size:11px}.fretboard__inlay{background:var(--inlay);border-radius:50%;width:6px;height:6px;position:absolute;bottom:-3px;left:50%;transform:translate(-50%)}.fretboard__inlay--double{box-shadow:-9px 0 0 var(--inlay)}.fretboard__row{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.fretboard__string-label{color:var(--text-muted);justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex}.fretboard__cell{background:linear-gradient(var(--string-line), var(--string-line)) center / 100% 2px no-repeat, transparent;cursor:default;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative}.fretboard__cell--fret{border-left:2px solid var(--fret-wire)}.fretboard__cell--open+.fretboard__cell--fret{border-left:4px solid var(--nut)}.fretboard__cell--interactive{cursor:pointer}.fretboard__cell--interactive:hover .marker,.fretboard__cell--interactive:hover:after{outline:2px solid var(--accent)}.fretboard__cell--interactive:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.marker{z-index:1;color:#062b1b;text-align:center;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:11px;font-weight:600;line-height:1;display:flex;position:relative}.marker--target{background:var(--correct);animation:1.4s ease-in-out infinite pulse}.marker--correct{background:var(--correct);padding:2px}.marker--incorrect{background:var(--incorrect);color:#2b0606}@keyframes pulse{0%,to{box-shadow:0 0 #22c55e8c}50%{box-shadow:0 0 0 8px #22c55e00}}.round{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:980px;margin:0 auto;padding:32px 16px;display:flex}.round__header{width:100%;color:var(--text-muted);justify-content:space-between;font-size:.95rem;display:flex}.round__prompt{margin:0;font-size:1.15rem}.round__form{flex-direction:column;align-items:center;gap:12px;display:flex}.round__input-pair{gap:12px;display:flex}.round__input{background:var(--surface-raised);border:1px solid var(--border);color:var(--text);border-radius:8px;width:200px;padding:10px 14px;font-size:1rem}.round__input:focus{border-color:var(--accent);outline:none}.round__button{background:var(--accent);color:#06201c;cursor:pointer;border:none;border-radius:8px;padding:10px 22px;font-size:1rem;font-weight:600}.round__button:hover{background:#5eead4}.round__feedback{margin:0;font-weight:600}.round__feedback--correct{color:var(--correct)}.round__feedback--incorrect{color:var(--incorrect)}.summary{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:64px 24px;display:flex}.summary__score{color:var(--accent);margin:8px 0 0;font-size:3rem;font-weight:700}.summary__pct{color:var(--text-muted);margin:0 0 24px}.summary__actions{gap:12px;display:flex}.round__button--ghost{color:var(--text);border:1px solid var(--border);background:0 0}.round__button--ghost:hover{background:var(--surface-raised)}