:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#080808;color:#f7f7f7}
*{box-sizing:border-box}body{margin:0}.profile,#viewer{margin:auto;max-width:52rem;padding:calc(2rem + env(safe-area-inset-top)) 1.25rem 5rem}
.eyebrow{color:#ffd60a;font-weight:800}.inactive{color:#aaa}.primary{background:#ffd60a;border-radius:99px;color:#000;display:inline-block;font-weight:800;padding:.8rem 1.1rem;text-decoration:none}
header{border-bottom:1px solid #333}nav,footer{align-items:center;display:flex;gap:.5rem;padding:1rem 0;position:sticky;z-index:2}nav{background:#080808;top:0}footer{bottom:0;background:#080808}
button{background:#222;border:1px solid #555;border-radius:.6rem;color:#fff;font:inherit;min-height:44px;padding:.55rem .8rem}button[aria-pressed=true]{background:#ffd60a;color:#000}
#chart{font-size:var(--chart-size,1.15rem);line-height:1.55;min-height:55vh}.line{margin:.45em 0;white-space:pre-wrap}.section{color:#ffd60a;font-weight:800}.chords{color:#82d9ff;font:inherit;font-weight:700;margin:0;min-height:1em;overflow-x:auto;white-space:pre}
#status{color:#aaa;margin-left:auto}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}