@layer theme,base,theory-ui,chord-practice-ui,guitar-ui;@layer page{:root[data-page=chords]{--chord-root:var(--accent);--chord-third:#6facff;--chord-fifth:#ffc169}:root[data-page=chords] .hand-shape-card{border-radius:var(--radius-lg);margin-bottom:20px;padding:24px}:root[data-page=chords] .hand-shape-card h2{margin:4px 0 18px}:root[data-page=chords] .hand-shape-row{grid-template-columns:minmax(160px,220px) minmax(0,1fr);align-items:center;gap:28px;display:grid}:root[data-page=chords] .hand-diagram-svg{justify-self:center;width:100%;max-width:220px;height:auto}:root[data-page=chords] .hand-palm{fill:#ffffff12;stroke:#ffffff24;stroke-width:2px}:root[data-page=chords] .finger-line{stroke-linecap:round;stroke-width:24px}:root[data-page=chords] .finger-line-1{stroke:var(--chord-root);stroke-width:26px}:root[data-page=chords] .finger-line-3{stroke:var(--chord-third);stroke-width:26px}:root[data-page=chords] .finger-line-5{stroke:var(--chord-fifth)}:root[data-page=chords] .finger-line-2,:root[data-page=chords] .finger-line-4{stroke:#ffffff24}:root[data-page=chords] .finger-badge-svg circle{fill:#ffffff24}:root[data-page=chords] .finger-badge-svg text{text-anchor:middle;fill:#ffffff8c;font-size:18px;font-weight:800}:root[data-page=chords] .finger-badge-1 circle{fill:var(--chord-root)}:root[data-page=chords] .finger-badge-3 circle{fill:var(--chord-third)}:root[data-page=chords] .finger-badge-5 circle{fill:var(--chord-fifth)}:root[data-page=chords] .finger-badge-1 text,:root[data-page=chords] .finger-badge-3 text,:root[data-page=chords] .finger-badge-5 text{fill:#0b1220}:root[data-page=chords] .hand-shape-copy p{margin:0 0 14px;line-height:1.7}:root[data-page=chords] .finger-key{flex-direction:column;gap:8px;margin:0 0 14px;padding:0;list-style:none;display:flex}:root[data-page=chords] .finger-key li{color:var(--muted);align-items:center;gap:10px;display:flex}:root[data-page=chords] .finger-dot{border-radius:50%;flex-shrink:0;width:14px;height:14px}:root[data-page=chords] .finger-dot-1{background:var(--chord-root)}:root[data-page=chords] .finger-dot-3{background:var(--chord-third)}:root[data-page=chords] .finger-dot-5{background:var(--chord-fifth)}:root[data-page=chords] .hand-shape-note{color:var(--muted);font-size:.88rem;margin:0!important}@media (width<=760px){:root[data-page=chords] .hand-shape-row{text-align:center;grid-template-columns:1fr}:root[data-page=chords] .finger-key{align-items:center}:root[data-page=chords] .hand-diagram-svg{max-width:170px}}}