@layer theme,base,theory-ui,chord-practice-ui,guitar-ui;@layer page{:root[data-page=note-map] .intro-card{border-radius:var(--radius-lg);margin-bottom:24px;padding:22px 24px;line-height:1.7}:root[data-page=note-map] .intro-card h2{margin:0 0 10px}:root[data-page=note-map] .intro-card p{margin:10px 0 0}:root[data-page=note-map] .intro-note{color:var(--muted)}:root[data-page=note-map] .walk-card,:root[data-page=note-map] .reveal-card,:root[data-page=note-map] .practice-card,:root[data-page=note-map] .recap-card{border-radius:var(--radius-lg);margin-bottom:24px;padding:24px}:root[data-page=note-map] .chromatic-row{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}:root[data-page=note-map] .chromatic-chip{text-align:center;background:var(--surface-soft);border:1px solid #ffffff1a;border-radius:12px;flex:auto;min-width:44px;padding:10px 8px;font-size:.92rem;font-weight:700}:root[data-page=note-map] .chromatic-chip.is-gap-chip{color:#ffe2a6;background:#ffd76a2e;border-color:#ffd76a8c}:root[data-page=note-map] .walk-readout{justify-content:center;align-items:baseline;gap:14px;margin:4px 0 16px;display:flex}:root[data-page=note-map] .walk-note{color:var(--accent);text-align:center;min-width:1.6ch;font-size:2.6rem;font-weight:800}:root[data-page=note-map] .walk-step{color:var(--muted);font-weight:600}:root[data-page=note-map] .stepper-controls{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px;display:flex}:root[data-page=note-map] .stepper-btn{background:var(--surface-soft);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;border:1px solid #ffffff1f;padding:12px 20px;font-weight:700;transition:transform .14s,background .14s,border-color .14s}:root[data-page=note-map] .stepper-btn:hover,:root[data-page=note-map] .stepper-btn:focus-visible{background:#ffffff14;outline:none;transform:translateY(-1px)}:root[data-page=note-map] .stepper-btn-play{background:#4ecca324;border-color:#4ecca366}:root[data-page=note-map] .walk-tip{color:var(--muted);margin:16px 2px 0;line-height:1.6}:root[data-page=note-map] .reveal-teaser{text-align:center;padding:18px 8px 6px}:root[data-page=note-map] .reveal-teaser p{color:var(--muted);margin:0 0 16px;font-size:1.02rem}:root[data-page=note-map] .piano-wrap.has-brackets{padding-bottom:84px}:root[data-page=note-map] .reveal-explain{grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;display:grid}:root[data-page=note-map] .explain-block{border-radius:var(--radius-md);background:#ffffff0a;border:1px solid #ffffff14;padding:16px 18px;line-height:1.6}:root[data-page=note-map] .explain-block p:last-child{margin:6px 0 0}:root[data-page=note-map] .mnemonic-callout,:root[data-page=note-map] .guitar-contrast{border-radius:var(--radius-md);margin-top:16px;padding:16px 18px;line-height:1.6}:root[data-page=note-map] .mnemonic-callout{background:#ffd76a1f;border:1px solid #ffd76a66}:root[data-page=note-map] .guitar-contrast{background:#6facff1a;border:1px solid #6facff59}:root[data-page=note-map] .practice-score strong{color:var(--accent)}:root[data-page=note-map] .practice-return-banner{border-radius:var(--radius-md);color:var(--text);background:#6facff1a;border:1px solid #6facff4d;margin:0 0 18px;padding:12px 16px}:root[data-page=note-map] .practice-sub{border-top:1px solid #ffffff14;margin-top:24px;padding-top:20px}:root[data-page=note-map] .practice-sub:first-of-type{border-top:none;margin-top:8px;padding-top:0}:root[data-page=note-map] .practice-sub h3{margin:0 0 8px}:root[data-page=note-map] .quiz-question{margin:12px 0 14px;font-size:1.05rem;font-weight:700}:root[data-page=note-map] .quiz-answer-buttons{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}:root[data-page=note-map] .quiz-choice-btn{text-align:center;height:auto;min-height:0;padding:14px 16px;font-size:.92rem;font-weight:600}:root[data-page=note-map] .recap-mnemonic{color:var(--muted);margin:16px 2px 0;line-height:1.6}@media (width<=760px){:root[data-page=note-map] .reveal-explain{grid-template-columns:1fr}:root[data-page=note-map] .walk-note{font-size:2.1rem}}}
