.guide-detail{max-width:74rem;padding-top:clamp(2rem,4.5vw,3.5rem)}.guide-detail-head{border-bottom:1px solid var(--line-strong);max-width:58rem;padding-bottom:clamp(1.8rem,4vw,2.8rem)}.guide-detail-head h1{max-width:17ch;margin-top:.45rem;font-size:clamp(2.45rem,5.5vw,4.5rem)}.guide-detail-head .lede{max-width:66ch;margin-top:1rem;line-height:1.68}.guide-detail-meta{color:var(--ink-3);flex-wrap:wrap;gap:.35rem .55rem;margin:1rem 0 0;font-size:.8rem;display:flex}.guide-detail-meta a{color:var(--ink-2)}.guide-detail-layout{grid-template-columns:minmax(12rem,15rem) minmax(0,46rem);align-items:start;gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2rem,5vw,3.5rem);display:grid}.guide-reading{min-width:0}.guide-prose{margin:0;font-size:1.02rem;line-height:1.78}.guide-prose>:first-child{margin-top:0}.guide-reference{top:calc(var(--header-h) + 1.2rem);max-height:calc(100vh - var(--header-h) - 2.4rem);gap:1.2rem;padding-right:.35rem;display:grid;position:sticky;overflow-y:auto}.guide-reference-title{border-bottom:1px solid var(--line-strong);font-family:var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0;padding-bottom:.65rem;font-size:.66rem;font-weight:700}.guide-reference-block h2{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .65rem;font-size:.64rem;font-weight:700}.guide-reference-chords{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;display:grid}.guide-reference-chords a{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);justify-items:center;gap:.2rem;padding:.4rem .25rem .45rem;display:grid}.guide-reference-chords img{width:100%;max-width:5.5rem;height:auto;display:block}.guide-reference-chords span{color:var(--ink-2);font-size:.68rem}.guide-reference-figures{gap:.9rem;display:grid}.guide-reference-figures figure{margin:0}.guide-reference-figures img{border:1px solid var(--line);border-radius:var(--radius-sm);width:100%;height:auto;display:block}.guide-reference-figures figcaption{color:var(--ink-3);margin-top:.4rem;font-size:.72rem;line-height:1.45}.guide-faq{border-top:1px solid var(--line-strong);margin-top:clamp(3rem,7vw,5rem);padding-top:1.4rem}.guide-faq h2{margin-top:0}@media (width<=820px){.guide-detail-layout{grid-template-columns:1fr}.guide-reference{border-bottom:1px solid var(--line);max-height:none;padding:0 0 1.2rem;position:static;overflow:visible}.guide-reference-chords{scrollbar-width:none;gap:.5rem;display:flex;overflow-x:auto}.guide-reference-chords::-webkit-scrollbar{display:none}.guide-reference-chords a{flex:0 0 6rem}.guide-reference-figures{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=520px){.guide-detail-head h1{max-width:none}.guide-reference-figures{grid-template-columns:1fr}}@media (width<=820px){.guide-detail-layout,.guide-reference,.guide-reference-block,.guide-reference-chords{min-width:0;max-width:100%}.guide-reference-chords{overscroll-behavior-inline:contain;width:100%}}.guide-reference-block ol{gap:.1rem;margin:0;padding:0;list-style:none;display:grid}.guide-reference-block ol a{color:var(--ink-2);grid-template-columns:1.5rem minmax(0,1fr);gap:.4rem;padding:.4rem 0;font-size:.8rem;line-height:1.35;display:grid}.guide-reference-block ol a .mono{color:var(--ink-3);font-size:.62rem}.guide-reference-block ol a:hover{color:var(--accent)}
