/* Page layout and composition, after the defuss-dataview landing page. Colours, radii and shadows come from
   defuss-shadcn tokens; only the song-card artwork uses literal hues. */
@layer components {
  /* the base reset the defuss-shadcn docs site applies, which its Landing Page blocks assume */
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; line-height: 1.6; background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  [hidden] { display: none !important; }
  /* the header is a direct child of the page, so it stays sticky over every section; clip keeps phones from scrolling sideways */
  .sc-page { position: relative; overflow-x: clip; }
  .sc-main { display: flex; flex-direction: column; gap: clamp(5rem, 11vw, 9rem); padding-block-end: clamp(5rem, 11vw, 9rem); }
  .sc-section { width: 100%; max-width: 76rem; padding-inline: 1rem; scroll-margin-top: 5rem; }
  .sc-page [tabindex="-1"]:focus, .sc-page[tabindex="-1"]:focus { outline: none; }
  .sc-icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sc-brand-icon { color: var(--chart-1); }
  .sc-ext { width: .75em; height: .75em; margin-inline-start: .15em; vertical-align: -.05em; opacity: .75; }
  .mk-hero-note a, .mk-footer-copy a, .mk-section-header-desc a, .sc-window-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  :where(.sc-main) :not(pre) > code { font-family: var(--font-mono); font-size: .875em; }
  .mk-hero-desc code { padding: .05em .3em; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--muted) 80%, transparent); }

  /* hero */
  .sc-flip { margin: 0; font-size: clamp(1.25rem, 4.5vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
  .sc-accent { background: linear-gradient(90deg, var(--chart-1), var(--chart-4)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .sc-intro { display: grid; gap: 2rem 2.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    width: 100%; max-width: 64rem; margin: clamp(5.5rem, 13vw, 10rem) auto 0; padding-inline: 1.25rem; text-align: start; }
  .sc-intro-item { display: flex; flex-direction: column; gap: .5rem; }
  .sc-intro-icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-xl); font-size: 2.25rem;
    color: var(--foreground); background: color-mix(in oklch, var(--chart-1) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--chart-1) 35%, transparent); }
  .sc-intro h3 { margin: .25rem 0 0; font-size: .9375rem; font-weight: 600; }
  .sc-intro p { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }
  .sc-intro strong { color: var(--foreground); font-weight: 600; }

  /* flythrough: the stage is viewport-high and only its middle 28rem band shows */
  .sc-flythrough { padding-inline: 1rem; margin-block: calc(-1 * clamp(4rem, 12vh, 9rem)); }
  .sc-flythrough .parallax-stage { clip-path: inset(max(0px, calc((100dvh - 28rem) / 2)) 0 round var(--radius-xl)); }
  .sc-fly-word { margin: 0; font-size: clamp(3rem, 10vw, 6rem); font-weight: 800; letter-spacing: -.04em; text-align: center;
    background: linear-gradient(90deg, #ffd58a, #ff9fb2); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* song picker */
  /* The library: songs, scales and chord progressions in defuss-shadcn's vertical tabs, stacked on narrow screens. */
  .sc-library { margin-block-start: 2.5rem; }
  .sc-library > .tab-list { flex: none; min-inline-size: 12rem; }
  .sc-library > .tab-content { flex: 1; min-inline-size: 0; }
  .sc-library .tab-trigger { white-space: nowrap; }
  @media (max-width: 48rem) {
    .tabs.sc-library { flex-direction: column; align-items: stretch; }
    .sc-library > .tab-list { max-inline-size: none; grid-auto-flow: column; grid-auto-columns: 1fr; overflow-x: auto; }
    .sc-progression-note { display: none; }
  }
  .sc-songs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
  .sc-practice { display: flex; flex-direction: column; gap: 1rem; }
  .sc-practice-intro, .sc-practice-note { margin: 0; max-width: 60rem; font-size: .875rem; color: var(--muted-foreground); text-wrap: pretty; }
  .sc-practice-note { font-size: .8125rem; }
  .sc-practice-form { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); align-items: end;
    padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--muted) 45%, transparent); }
  .sc-progressions { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
  .sc-progression { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: .25rem; padding: .75rem .875rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); transition: border-color .15s, box-shadow .15s; }
  .sc-progression:hover { box-shadow: var(--shadow-md); }
  .sc-progression:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .sc-progression[aria-pressed="true"] { border-color: color-mix(in oklch, var(--chart-1) 70%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklch, var(--chart-1) 70%, transparent); }
  .sc-progression-name { font-weight: 600; overflow-wrap: anywhere; }
  .sc-progression-chords { font: 500 .8125rem/1.4 var(--font-mono); color: var(--foreground); overflow-wrap: anywhere; }
  .sc-progression-count { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--muted-foreground); }
  .sc-progression-bar { flex: none; inline-size: calc(var(--share) * 5rem); min-inline-size: 2px; block-size: .375rem; border-radius: 999px; background: var(--chart-1); }
  .sc-progression-note { font-size: .75rem; color: var(--muted-foreground); }
  /* Two cards a row on phones: after the base rule, which would otherwise win. */
  @media (max-width: 48rem) {
    .sc-progressions { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
    .sc-progression-bar { inline-size: calc(var(--share) * 2.5rem); }
  }
  /* Inversion buttons inside the tab's chord names: the next inversion and back as written, extra small. */
  .sc-inversion { display: inline-flex; gap: 1px; margin-inline-start: .125rem; vertical-align: middle; }
  .sc-inversion .btn { inline-size: 1rem; block-size: 1rem; min-inline-size: 0; min-block-size: 0; padding: 0; border-radius: var(--radius-sm); color: inherit; opacity: .6; }
  .sc-inversion .btn:hover, .sc-inversion .btn:focus-visible { opacity: 1; }
  .sc-inversion .btn:disabled { opacity: .25; }
  .sc-inversion .sc-icon { inline-size: .6875rem; block-size: .6875rem; }
  [data-printing] .sc-inversion { display: none; }
  @media print { .sc-inversion { display: none; } }
  .sc-song { all: unset; box-sizing: border-box; display: flex; gap: 1rem; align-items: stretch; padding: .75rem; cursor: pointer;
    background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; }
  .sc-song:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .sc-song:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .sc-song[aria-pressed="true"] { border-color: color-mix(in oklch, var(--chart-1) 70%, var(--border));
    box-shadow: var(--shadow-lg), 0 0 0 3px color-mix(in oklch, var(--chart-1) 25%, transparent); }
  .sc-song-art { display: grid; place-items: center; flex: none; width: 5.5rem; border-radius: var(--radius-lg); font-size: 2.5rem; }
  .sc-song-art[data-art="rainbow"] { background: linear-gradient(160deg, #ffe3e3, #fff1c2 35%, #d9f7e3 65%, #d6e6ff); }
  .sc-song-art[data-art="wicked"] { background: radial-gradient(circle at 70% 30%, #4b3c8f, #16122e 70%); }
  .sc-song-art[data-art="rising"] { background: linear-gradient(180deg, #ffb46b, #e8505b 70%, #7a2048); }
  .sc-song-art[data-art="score"] { background: linear-gradient(160deg, #f4ead2, #d9c39a); }
  .sc-song-art[data-art="grace"] { background: linear-gradient(160deg, #eef4ff, #bcd2f5); }
  .sc-song-art[data-art="scarborough"] { background: linear-gradient(160deg, #f1f8e8, #b3d495); }
  .sc-song-art[data-art="shenandoah"] { background: linear-gradient(180deg, #d6eefa, #5f9fc7); }
  .sc-song-art[data-art="valley"] { background: linear-gradient(180deg, #ffe2b8, #c98146); }
  .sc-song-art[data-art="lomond"] { background: linear-gradient(180deg, #dcefe3, #6c9f80); }
  .sc-song-art[data-art="auld"] { background: linear-gradient(160deg, #fff4d8, #e9bd62); }
  .sc-song-art[data-art="silent"] { background: radial-gradient(circle at 70% 30%, #3b4c8c, #11183a 70%); }
  .sc-song-art[data-art="birthday"] { background: linear-gradient(160deg, #ffe6f1, #f7b6cf); }
  .sc-song-art[data-art="open"] { font-size: 2rem; color: var(--muted-foreground); background: transparent; border: 2px dashed var(--border); }
  .sc-song-open { border-style: dashed; box-shadow: none; }
  .sc-song:disabled { opacity: .5; cursor: not-allowed; }
  .sc-song-copy { display: flex; flex-direction: column; gap: .125rem; min-width: 0; padding-block: .25rem; }
  .sc-song-kind { font: 600 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
  .sc-song-title { font-size: 1.0625rem; line-height: 1.3; }
  .sc-song-credit { font-size: .8125rem; color: var(--muted-foreground); }
  .sc-song-meta { margin-block-start: auto; padding-block-start: .375rem; font-size: .75rem; color: var(--muted-foreground); }

  /* the playground window */
  .sc-window {
    display: flex; flex-direction: column; gap: 1rem; margin-block-start: 1.25rem; padding: clamp(1rem, 2.5vw, 1.75rem);
    background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-2xl),
      0 30px 80px -30px color-mix(in oklch, var(--chart-1) 45%, transparent);
  }
  .sc-player-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; }
  .sc-eyebrow, .sc-panel-label { font: 600 .6875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
  .sc-player-title { margin: .25rem 0 .25rem; font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; }
  .sc-player-desc { margin: 0; max-width: 46rem; color: var(--muted-foreground); text-wrap: pretty; }
  .sc-player-badges { display: flex; flex-wrap: wrap; gap: .375rem; }
  .sc-player-badges .badge:last-child { font-family: var(--font-mono); }
  /* The tuner: the tacho dial beside the strings of the instrument chosen below. */
  .sc-tuner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .sc-tuner .tacho { --tacho-size: 12rem; flex: 0 0 auto; }
  .sc-tuner-body { display: flex; flex: 1 1 20rem; flex-direction: column; gap: .625rem; min-width: 0; }
  .sc-tuner-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
  .sc-tuner-title { margin: 0; font-size: 1rem; font-weight: 600; }
  .sc-tuner-instrument { font: 500 .75rem var(--font-mono); color: var(--muted-foreground); }
  .sc-tuner-desc { margin: 0; font-size: .8125rem; color: var(--muted-foreground); text-wrap: pretty; }
  .sc-tuner-strings { display: flex; flex-wrap: wrap; gap: .375rem; }
  .sc-tuner-strings .btn { font-family: var(--font-mono); min-width: 3rem; }
  .sc-tuner-strings .btn[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
  .sc-tuner-strings .btn[data-heard] { box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 45%, transparent); }
  .sc-tuner-strings .btn[data-in-tune] { box-shadow: 0 0 0 2px var(--chart-2, oklch(0.65 0.15 150)); }
  .sc-tuner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
  .sc-tuner-status { font-size: .8125rem; color: var(--muted-foreground); }
  .sc-tuner-status[data-problem] { color: var(--destructive); }
  .sc-controls { display: grid; gap: 1rem 1.25rem; align-items: end;
    grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 1fr) minmax(14rem, 1.4fr);
    padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--muted) 45%, transparent); }
  @media (min-width: 64.01rem) {
    .sc-controls:has(> .sc-voices:not([hidden])) { grid-template-columns: minmax(11rem, 1.2fr) minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(13rem, 1.3fr); }
  }
  .sc-control { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
  .sc-control[hidden] { display: none; }
  .sc-capo .checkbox-item { min-height: 2.25rem; }
  .sc-custom { background: var(--card); }
  .sc-custom .collapsible-trigger { font-size: .9375rem; }
  .sc-custom-body { display: flex; flex-direction: column; gap: 1rem; color: var(--foreground); }
  .sc-custom-intro { margin: 0; color: var(--muted-foreground); max-width: 60rem; text-wrap: pretty; }
  .sc-custom-form { display: flex; flex-direction: column; gap: 1rem; }
  .sc-custom-group { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); align-items: end;
    margin: 0; padding: .75rem 1rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .sc-custom-group legend { padding-inline: .375rem; font-size: .8125rem; font-weight: 600; color: var(--muted-foreground); }
  .sc-custom-group .sc-wide { grid-column: span 2; }
  @media (max-width: 30rem) { .sc-custom-group .sc-wide { grid-column: auto; } }
  .sc-custom-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .sc-custom-spacer { flex: 1; }
  .sc-saved { display: flex; flex-direction: column; gap: .5rem; }
  .sc-saved-list { display: flex; flex-direction: column; gap: .375rem; margin: 0; padding: 0; list-style: none; }
  .sc-saved-item { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; padding: .5rem .75rem; border-radius: var(--radius-md); background: color-mix(in oklch, var(--muted) 55%, transparent); }
  .sc-saved-text { flex: 1 1 16rem; min-width: 0; font-size: .8125rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
  .sc-saved-text strong { color: var(--foreground); }
  .sc-saved-empty { margin: 0; font-size: .8125rem; color: var(--muted-foreground); }
  .sc-tempo .label { display: flex; justify-content: space-between; gap: .5rem; }
  .sc-tempo-value { font-family: var(--font-mono); font-weight: 500; color: var(--muted-foreground); }
  .sc-tempo .slider { display: block; margin-block: .875rem 1.375rem; }
  /* The original tempo: a notch under the track, centered where the thumb's center sits at that value (1.25rem thumb);
     --tempo-original is the value's fraction of the range, 0 to 1. */
  .sc-tempo-track { position: relative; }
  .sc-tempo-original { position: absolute; inset-block-start: 1.5rem; inset-inline-start: calc(.625rem + (100% - 1.25rem) * var(--tempo-original));
    translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: 0; border: 0; background: none;
    font: 500 .6875rem/1 var(--font-mono); color: var(--muted-foreground); cursor: pointer; white-space: nowrap; }
  .sc-tempo-original::before { content: ""; inline-size: 2px; block-size: .375rem; border-radius: 1px; background: currentColor; }
  .sc-tempo-original:hover, .sc-tempo-original:focus-visible { color: var(--foreground); }
  .sc-tempo-original[data-current] { color: var(--primary); }
  .sc-tempo-original[hidden] { display: none; }
  .sc-transport { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; grid-column: 1 / -1; }
  /* defuss-shadcn's Play Button (shadcn.defuss.org/actions/play-button): a round button whose triangle is drawn in
     CSS. The pinned release does not ship it yet, so it is defined here, with a pause state (aria-pressed). */
  .play-button { --play-button-size: 4.5rem; position: relative; display: inline-grid; place-items: center; flex: none; inline-size: var(--play-button-size); block-size: var(--play-button-size); padding: 0; border: 0; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .12), 0 4px 6px -4px rgb(0 0 0 / .12)); cursor: pointer; transition: scale .15s ease, background-color .15s ease; }
  .play-button[data-size="sm"] { --play-button-size: 3rem; }
  .play-button[data-size="lg"] { --play-button-size: 6rem; }
  .play-button::before { content: ""; inline-size: 34%; block-size: 34%; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); translate: 10% 0; }
  .play-button[aria-pressed="true"]::before { clip-path: none; translate: none; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
  .play-button:hover:not(:disabled) { scale: 1.06; background: color-mix(in oklch, var(--primary) 88%, var(--primary-foreground)); }
  .play-button:active:not(:disabled) { scale: .97; }
  .play-button:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
  .play-button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
  @media (prefers-reduced-motion: reduce) { .play-button { transition: none; } .play-button:hover:not(:disabled), .play-button:active:not(:disabled) { scale: none; } }
  @media (prefers-contrast: more) { .play-button { box-shadow: inset 0 0 0 2px var(--foreground); } }
  @media (forced-colors: active) { .play-button { forced-color-adjust: none; background: ButtonText; color: ButtonFace; } }
  .sc-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sc-fx { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-inline-start: auto; padding-inline: .25rem; }
  .sc-fx .switch-item > label { white-space: nowrap; }
  .sc-fx + .sc-fx { margin-inline-start: 0; padding-inline-start: 1rem; border-inline-start: 1px solid var(--border); }
  /* The loop swap reads as an outline button; its faces cross over (defuss-shadcn swap, flip). */
  .sc-loop { padding-inline: .625rem; min-height: 2rem; border: 1px solid var(--border); background: var(--background); }
  .sc-loop:hover { background: var(--accent); }
  .sc-loop:has(> input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  .sc-loop :is(.swap-on, .swap-off) { gap: .375rem; white-space: nowrap; }
  .sc-loop .sc-icon { width: 1rem; height: 1rem; }
  @media (max-width: 40rem) { .sc-fx, .sc-fx + .sc-fx { margin-inline-start: 0; flex-basis: 100%; padding-inline-start: .25rem; border-inline-start: 0; } }
  .sc-progress { height: .25rem; overflow: hidden; border-radius: 999px; background: var(--muted); }
  .sc-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--chart-1), var(--chart-4)); transition: width .1s linear; }
  .sc-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
  .sc-status { display: flex; align-items: center; gap: .5rem; margin: 0; min-height: 1.5rem; font-size: .875rem; color: var(--muted-foreground); }
  .sc-status[hidden] { display: none; }
  .sc-alert { margin: 0; }
  .sc-alert .alert-description p { margin: .25rem 0 0; }
  .sc-tab { min-width: 0; }
  .sc-window[data-status="searching"] .sc-tab, .sc-window[data-status="searching"] .sc-board { opacity: .45; transition: opacity .2s; }
  .sc-board { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* No chord symbols, no voicings to chart: the neck takes the whole row. */
  .sc-board[data-charts="none"] { grid-template-columns: minmax(0, 1fr); }
  .sc-board[data-charts="none"] .sc-charts-panel { display: none; }
  .sc-panel { display: flex; flex-direction: column; gap: .75rem; min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .sc-panel-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
  .sc-panel-label small { font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--font-sans); font-size: .75rem; }
  .sc-neck-panel .fretboard-neck { width: 100%; }
  .sc-charts { display: flex; flex-wrap: wrap; gap: .75rem; }
  /* Each chart sits in a slot as wide as an aura ring, so the golden ring of the chord sounding now moves nothing. */
  .sc-chart-slot { --shape-round: var(--radius-md); display: inline-grid; padding: 3px; border-radius: calc(var(--radius-md) + 3px); }
  .sc-chart-slot.aura > .chord-chart { background-color: var(--card); }
  .sc-chart-slot[data-next] > .chord-chart { border-style: dashed; border-color: color-mix(in oklab, var(--primary) 55%, transparent); }
  .sc-chart-slot[data-soon] > .chord-chart { animation: sc-next-blink var(--sc-beat, .75s) ease-in-out infinite; }
  @keyframes sc-next-blink { 50% { opacity: .3; } }
  @media (prefers-reduced-motion: reduce) { .sc-chart-slot[data-soon] > .chord-chart { animation: none; border-style: solid; border-color: var(--primary); } }
  .sc-chart-slot.aura > .chord-chart[data-active] { border-color: transparent; background-image: linear-gradient(color-mix(in oklab, var(--primary) 10%, transparent), color-mix(in oklab, var(--primary) 10%, transparent)); }
  .sc-facts { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin: 0; }
  .sc-facts > div { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; border-radius: var(--radius-lg); background: color-mix(in oklch, var(--muted) 55%, transparent); }
  .sc-facts dt { font-size: .75rem; color: var(--muted-foreground); }
  .sc-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .sc-details { border-block-start: 1px solid var(--border); padding-block-start: .75rem; }
  .sc-details summary { cursor: pointer; font-weight: 500; }
  .sc-details p { margin: .75rem 0; font-size: .875rem; color: var(--muted-foreground); max-width: 52rem; }
  .sc-json { max-height: 22rem; overflow: auto; margin: 0; padding: 1rem; border-radius: var(--radius-lg); background: var(--muted); font: .75rem/1.6 var(--font-mono); }
  .sc-window-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-block-start: .25rem; }
  .sc-window-note { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; color: var(--muted-foreground); }
  @media (max-width: 64rem) {
    .sc-controls { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
    .sc-transport { grid-column: 1 / -1; }
  }
  @media (max-width: 52rem) { .sc-board { grid-template-columns: minmax(0, 1fr); } }

  /* how it works */
  .sc-how-grid { display: grid; gap: 2.5rem 3rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; margin-block-start: clamp(2rem, 5vw, 3.5rem); }
  .sc-how-grid .mk-process-step-title { font-size: 1rem; }
  @media (max-width: 60rem) { .sc-how-grid { grid-template-columns: minmax(0, 1fr); } }
  .sc-dl { display: grid; gap: .5rem; margin: 0; }
  .sc-dl > div { display: grid; grid-template-columns: minmax(8.5rem, 34%) minmax(0, 1fr); gap: .75rem; align-items: baseline; padding-block: .375rem; border-block-end: 1px dashed var(--border); }
  .sc-dl > div:last-child { border-block-end: 0; }
  .sc-dl dt { font-size: .8125rem; color: var(--muted-foreground); }
  .sc-dl dd { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }

  /* API */
  .sc-api { margin-block-start: 2.5rem; }
  .sc-api .tab-list { max-width: 100%; overflow-x: auto; margin-block-end: 1.5rem; }
  .sc-api .tab-content { display: flex; flex-direction: column; gap: 1.5rem; }
  .sc-api .tab-content[hidden] { display: none !important; }
  .sc-api-lead { margin: 0; max-width: 52rem; color: var(--muted-foreground); }
  .sc-table .table-cell { vertical-align: top; }
  .sc-levels .table-cell { font-variant-numeric: tabular-nums; }

  /* install: one leaf-cornered panel on a faint dot pattern */
  .sc-use {
    --shape-round: 3rem; --shape-ink: color-mix(in oklch, var(--foreground) 9%, transparent); --shape-pattern: 18px;
    display: flex; flex-direction: column; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--border);
    background-color: color-mix(in oklch, var(--card) 75%, transparent);
    box-shadow: var(--shadow-xl), 0 30px 80px -40px color-mix(in oklch, var(--chart-1) 45%, transparent);
  }
  .sc-ways { display: flex; gap: 2.5rem; }
  .sc-way { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
  .sc-way-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.25rem; font-weight: 600; }
  .sc-way-desc { margin: 0; color: var(--muted-foreground); text-wrap: pretty; }
  .sc-use .mk-code-block { margin: 0; }
  /* the block's CSS-only tabs know npm / pnpm / bun; these are this page's own tab values */
  .mk-code-block:has(input[value="ukulele"]:checked) [data-tab="ukulele"], .mk-code-block:has(input[value="guitar"]:checked) [data-tab="guitar"],
  .mk-code-block:has(input[value="worker"]:checked) [data-tab="worker"], .mk-code-block:has(input[value="audio"]:checked) [data-tab="audio"],
  .mk-code-block:has(input[value="fretboard"]:checked) [data-tab="fretboard"], .mk-code-block:has(input[value="claude"]:checked) [data-tab="claude"],
  .mk-code-block:has(input[value="codex"]:checked) [data-tab="codex"], .mk-code-block:has(input[value="project"]:checked) [data-tab="project"] { display: block; }
  #skill pre code > span { white-space: pre-wrap; overflow-wrap: anywhere; }
  .mk-code-block-tabs { overflow-x: auto; }
  /* half-width columns: wrap instead of cutting, with continuation lines hanging past the number column */
  .sc-use .mk-code-block code > span { white-space: pre-wrap; overflow-wrap: anywhere; }
  .sc-use .mk-code-block pre[data-numbers] code > span { padding-inline-start: 3rem; text-indent: -3rem; }
  /* Long URLs (the CDN import map) scroll inside their block rather than wrap. */
  .sc-use .sc-code-scroll pre { overflow-x: auto; }
  .sc-use .sc-code-scroll code > span { white-space: pre; overflow-wrap: normal; }
  .sc-usage { display: flex; flex-direction: column; gap: 1.25rem; }
  .sc-sep-horizontal { display: none; }
  .sc-sep-wide { width: 100%; margin: 0; }
  @media (max-width: 56rem) {
    .sc-ways { flex-direction: column; }
    .sc-sep-vertical { display: none; }
    .sc-sep-horizontal { display: block; width: 100%; margin: 0; }
  }
  .sc-prompt { position: relative; }
  .sc-prompt .mockup-code { margin: 0; }
  .sc-prompt-copy { position: absolute; inset-block-start: .3rem; inset-inline-end: .5rem; }

  @media (min-width: 64rem) { .sc-footer-nav.mk-footer-nav { grid-template-columns: 1fr 1.3fr 1fr 1.2fr; } }

  @media (prefers-reduced-motion: reduce) {
    .sc-song, .sc-progression, .sc-progress span { transition: none; }
    .sc-song:hover { transform: none; }
  }
  @media (prefers-contrast: more) {
    .sc-intro p, .sc-way-desc, .sc-api-lead, .sc-player-desc, .sc-status { color: var(--foreground); }
  }
  @media (forced-colors: active) {
    .sc-accent, .sc-fly-word { color: CanvasText; background: none; }
    .sc-song[aria-pressed="true"] { outline: 2px solid Highlight; }
  }
}

/* print: the Print button fills #print-sheet with the title, the live tab and static chord charts, and shows only it */
.sc-print { display: none; }
html[data-printing] { overflow: hidden; }
html[data-printing] .sc-print { display: block; position: fixed; inset: 0; z-index: 1000; overflow: auto; padding: 2rem max(1rem, calc((100vw - 46rem) / 2)); background: #fff; color: #000; }
/* chord diagrams and tab lines are drawn with backgrounds, which browsers leave out of a print unless told */
.sc-print { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sc-print-close { float: inline-end; }
.sc-print-head { margin-block-end: 1rem; }
.sc-print-head h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 700; }
.sc-print-head p { margin: .25rem 0 0; font-size: .875rem; color: #444; }
.sc-print .fretboard { border: 0; overflow: visible; }
.sc-print .fretboard-header, .sc-print .fretboard-cursor { display: none; }
.sc-print .fretboard-sheet { max-block-size: none; overflow: visible; padding-inline: 0; }
.sc-print .fretboard-line { break-inside: avoid; }
.sc-print .fretboard-measure[data-loop], .sc-print .fretboard-measure[data-loop] .fretboard-number { background: none; color: inherit; }
.sc-print-charts-title { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: 600; break-after: avoid; }
.sc-print-charts { display: flex; flex-wrap: wrap; gap: .75rem; }
.sc-print-charts .chord-chart { break-inside: avoid; animation: none; border-style: solid; background: none; }
.sc-print-foot { margin-block-start: 1.5rem; font-size: .75rem; color: #666; }
@media print {
  @page { margin: 14mm 12mm; }
  html[data-printing], html[data-printing] body { overflow: visible; background: #fff; }
  html[data-printing] body > :not(#print-sheet) { display: none !important; }
  html[data-printing] .sc-print { position: static; overflow: visible; padding: 0; }
  .sc-print-close { display: none; }
}