.astro-route-announcer{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;top:0;left:0;overflow:hidden}:root{--bg:oklch(98% .006 85);--surface:oklch(95% .01 85);--card:oklch(94% .01 85);--ink:oklch(20% .012 60);--ink-soft:oklch(42% .012 60);--ink-faint:oklch(60% .012 70);--line:oklch(91% .012 85);--accent:oklch(72% .16 82);--accent-ink:oklch(20% .04 70);--danger:oklch(55% .16 25);--board:oklch(22% .012 60);--fret:oklch(74% .03 85);--string:oklch(88% .015 85);--tone:oklch(97% .008 85);--root:var(--accent);--scrim:oklch(20% .012 60/.35);--radius:2px;--display:"Fraunces", Georgia, serif;--text:"Schibsted Grotesk", Helvetica, Arial, sans-serif;--mono:"JetBrains Mono", Menlo, monospace;--t-xs:13px;--lh-xs:1.5;--t-base:16px;--lh-base:1.55;--t-md:20px;--lh-md:1.45;--t-lg:28px;--lh-lg:1.25;--t-xl:44px;--lh-xl:1.08;--t-2xl:clamp(40px, 6.5vw, 88px);--lh-2xl:1;--track-tight:-.02em;--track-caps:.12em}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;color-scheme:light;-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}.skip{z-index:100;background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:8px 12px;text-decoration:none;position:absolute;top:-100px;left:16px}.skip:focus{top:16px}body{background:var(--bg);color:var(--ink);font:var(--t-base)/var(--lh-base) var(--text);margin:0;font-weight:400}a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{opacity:.8;transition:opacity .15s}h1,h2{font-family:var(--display);font-optical-sizing:auto;font-variation-settings:"SOFT" 50,"WONK" 0;letter-spacing:var(--track-tight);font-weight:500}h1{font-size:var(--t-xl);line-height:var(--lh-xl);text-wrap:balance;margin:4px 0 8px}h2{font-size:var(--t-lg);line-height:var(--lh-lg);text-wrap:balance;margin:40px 0 8px}h3{font-size:var(--t-base);line-height:var(--lh-base);margin:24px 0 4px;font-weight:700}p{max-width:64ch;margin:12px 0}strong,b{font-weight:700}em{font-style:normal;font-weight:700}ol,ul{padding-left:22px}li{margin:4px 0}table{border-collapse:collapse;width:100%;font-size:var(--t-xs);margin:12px 0}th,td{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:10px 8px}th{color:var(--ink-soft);font-weight:700}code,.mono{font-family:var(--mono);font-size:var(--t-xs);font-variant-numeric:tabular-nums}code{background:var(--card);border-radius:var(--radius);padding:1px 6px}hr{border:0;border-top:1px solid var(--line);margin:32px 0}button{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;min-height:44px;padding:10px 14px;transition:opacity .15s}button:hover{opacity:.85}select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px}.board{width:100%;max-width:600px;height:auto;margin:16px 0;display:block}svg[data-player] g[data-order]{transition:opacity .12s}svg[data-player] g[data-order] circle{transition:fill .12s,stroke-width .12s}svg[data-player] g.on circle{fill:var(--accent);stroke-width:2px}svg[data-player] g.was{opacity:.6}.play-shape{margin:-8px 0 16px}.chord{width:auto;height:150px;margin:8px 12px 8px 0;display:inline-block}.note{border-left:1px solid var(--ink-soft);margin:16px 0;padding:2px 0 2px 16px}.notes{font-family:var(--mono);font-size:var(--t-md);letter-spacing:.08em;margin:16px 0;font-weight:500}.muted{color:var(--ink-soft)}.faint{color:var(--ink-faint)}.small{font-size:var(--t-xs);line-height:var(--lh-xs)}.kicker{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}.lesson-nav{border-top:1px solid var(--line);justify-content:space-between;gap:16px;margin-top:48px;padding-top:16px;display:flex}.crumb{font-size:var(--t-xs);color:var(--ink-soft);margin:0}.crumb a{color:var(--ink-soft);text-decoration:none}.crumb a:hover{opacity:1;text-decoration:underline}
