@layer theme,base,theory-ui;@layer chord-practice-ui{:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mode-toggle{justify-content:center;gap:8px;margin-bottom:20px;display:flex}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mode-toggle-btn{background:var(--surface-soft);color:var(--muted);border-radius:var(--radius-sm);cursor:pointer;border:1px solid #ffffff1f;padding:12px 26px;font-size:.95rem;font-weight:700;transition:background .14s,border-color .14s,color .14s,transform .14s}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mode-toggle-btn:hover,:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mode-toggle-btn:focus-visible{outline:none;transform:translateY(-1px)}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mode-toggle-btn.is-active{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);color:#0b1220;border-color:#0000}@media (width<=760px){:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mode-toggle-btn{flex:auto}}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .progress-strip{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px;display:flex}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .progress-pill{min-width:46px;height:46px;color:var(--text);cursor:pointer;background:#ffffff0a;border:2px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:800;transition:transform .14s,border-color .14s,background .14s;display:flex;position:relative}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .progress-pill:hover,:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .progress-pill:focus-visible{outline:none;transform:translateY(-2px)}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .progress-pill.is-current{border-color:var(--accent);background:#4ecca324}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .progress-pill.is-learned{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);color:#0b1220;border-color:#0000}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .progress-pill .pill-check{background:var(--accent-strong);color:#0b1220;border:2px solid var(--bg);border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:.65rem;display:flex;position:absolute;bottom:-4px;right:-4px}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .chord-card{border-radius:var(--radius-lg);text-align:center;padding:26px;transition:box-shadow .2s}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .chord-card h2{margin:4px 0 6px;font-size:2rem}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .chord-notes{color:var(--muted);letter-spacing:.02em;margin:0 0 18px;font-size:1.1rem;font-weight:700}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .chord-card .piano-wrap{max-width:640px;margin:0 auto}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .chord-tip{max-width:52ch;color:var(--muted);margin:16px auto 0}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .chord-actions{flex-direction:column;align-items:center;gap:10px;margin-top:20px;display:flex}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .play-chord-btn{border-radius:var(--radius-sm);background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);color:#0b1220;cursor:pointer;border:none;padding:16px 36px;font-size:1.05rem;font-weight:800;transition:transform .14s,box-shadow .14s;box-shadow:0 14px 30px #4ecca33d}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .play-chord-btn:hover,:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .play-chord-btn:focus-visible{outline:none;transform:translateY(-2px);box-shadow:0 18px 36px #4ecca352}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .text-button{color:var(--muted);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;padding:6px 10px;font-size:.88rem;text-decoration:underline}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .text-button:hover,:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .text-button:focus-visible{color:var(--text);outline:none}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mark-learned-btn{color:var(--text);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff24;margin-top:22px;padding:14px 28px;font-size:.95rem;font-weight:700;transition:background .16s,border-color .16s,transform .14s}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mark-learned-btn:hover,:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mark-learned-btn:focus-visible{outline:none;transform:translateY(-1px)}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .mark-learned-btn.is-learned{color:#cffff0;background:#4ecca329;border-color:#4ecca380}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-nav{justify-content:space-between;align-items:center;gap:14px;margin:20px 0;display:flex}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-btn{background:var(--surface-soft);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;border:1px solid #ffffff1f;padding:14px 22px;font-weight:700;transition:background .14s,transform .14s,opacity .14s}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-btn:hover:not(:disabled),:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-btn:focus-visible:not(:disabled){background:#ffffff14;outline:none;transform:translateY(-1px)}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-btn:disabled{opacity:.35;cursor:not-allowed}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-hint{color:var(--muted);text-align:center;flex:1;margin:0;font-size:.85rem}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .celebration-card{border-radius:var(--radius-lg);text-align:center;background:linear-gradient(160deg,#4ecca324,#ffd76a1a);margin-bottom:20px;padding:28px;border:1px solid #4ecca359!important}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .celebration-card h2{margin:0 0 10px}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .celebration-card p{max-width:56ch;color:var(--text);margin:0 auto 8px}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .celebration-note{font-size:.9rem;color:var(--muted)!important}@media (width<=760px){:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .chord-card{padding:20px 16px}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .chord-card h2{font-size:1.6rem}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .play-chord-btn{width:100%}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-nav{flex-wrap:wrap}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-hint{flex-basis:100%;order:3}:root:is([data-page=chord-game],[data-page=chords],[data-page=guitar-chords]) .stepper-btn{flex:auto}}}@layer guitar-ui,page;
