/* Light is the base palette; dark is layered on top via the media query (for
   "system") and the [data-theme] attribute (for an explicit choice), so both
   directions of the toggle win over the system preference.

   The token scale, hairline borders, ring focus and segmented controls follow
   shadcn/ui's conventions, written as plain CSS -- the app is vanilla JS, and
   the design language is what was wanted, not the React runtime. The neutral
   ramp stays warm on purpose: a cold slate grey fights engraved notation. */

:root {
  --bg: #fbfaf9;
  --card: #ffffff;
  --muted-bg: #f5f4f1;
  --border: #e7e4de;
  --border-strong: #d6d1c7;
  --fg: #1c1a17;
  --muted-fg: #78716c;
  --accent: #b45309;
  --accent-fg: #ffffff;
  --accent-soft: #fdf5ea;
  /* The selection sits under black notation on white paper, so it can take a
     good deal more tint than a normal UI hover before it fights the notes. */
  --sel: rgba(180, 83, 9, 0.18);
  --sel-edge: rgba(180, 83, 9, 0.65);
  /* Deep vermillion: unmistakably not the black of every other note, and still
     dark enough to read against white. */
  --play: #dc2626;
  --play-glow: rgba(220, 38, 38, 0.5);
  --ink: #1c1a17;
  --paper: #ffffff;
  --ring: rgba(180, 83, 9, 0.35);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(28, 26, 23, 0.1), 0 2px 6px -2px rgba(28, 26, 23, 0.06);
  --shadow-lg: 0 16px 40px -12px rgba(28, 26, 23, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0a09;
    --card: #16140f;
    --muted-bg: #1c1917;
    --border: #292524;
    --border-strong: #44403c;
    --fg: #f5f5f4;
    --muted-fg: #a8a29e;
    --accent: #f59e0b;
    --accent-fg: #1c1917;
    --accent-soft: #251c0e;
    --sel: rgba(245, 158, 11, 0.2);
    --sel-edge: rgba(245, 158, 11, 0.7);
    --play: #fb7185;
    --play-glow: rgba(251, 113, 133, 0.55);
    --ink: #ede9e4;
    --paper: #14120f;
    --ring: rgba(245, 158, 11, 0.4);
    --shadow-xs: none;
    --shadow-md: 0 4px 14px -4px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 20px 50px -16px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  --bg: #0c0a09;
  --card: #16140f;
  --muted-bg: #1c1917;
  --border: #292524;
  --border-strong: #44403c;
  --fg: #f5f5f4;
  --muted-fg: #a8a29e;
  --accent: #f59e0b;
  --accent-fg: #1c1917;
  --accent-soft: #251c0e;
  --sel: rgba(245, 158, 11, 0.2);
  --sel-edge: rgba(245, 158, 11, 0.7);
  --play: #fb7185;
  --play-glow: rgba(251, 113, 133, 0.55);
  --ink: #ede9e4;
  --paper: #14120f;
  --ring: rgba(245, 158, 11, 0.4);
  --shadow-xs: none;
  --shadow-md: 0 4px 14px -4px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 20px 50px -16px rgba(0, 0, 0, 0.8);
}

* {
  box-sizing: border-box;
}

/* Components below set an explicit `display`, which would otherwise win over
   the `hidden` attribute and leave hidden elements on screen. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  /* The page itself never scrolls -- the score pane is the only scroller, so
     there is never a scrollbar inside a scrollbar. */
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring);
}

.muted {
  color: var(--muted-fg);
  font-size: 12px;
}

.spacer {
  flex: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

code {
  background: var(--muted-bg);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 12px;
}

kbd {
  font: inherit;
  font-size: 10.5px;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--muted-bg);
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

/* --- app shell --------------------------------------------------------- */

.app {
  height: 100dvh;
  display: grid;
  /* minmax(0, 1fr) is what lets the stage shrink to the viewport instead of
     being pushed taller by its own content. */
  grid-template-rows: auto auto minmax(0, 1fr);
}

.app[data-focus="on"] > .appbar,
.app[data-focus="on"] > .toolbar {
  display: none;
}

/* Nothing to drive until a score is loaded. */
.app[data-loaded="no"] .toolbar {
  opacity: 0.45;
  pointer-events: none;
}

/* --- appbar ------------------------------------------------------------ */

.appbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.8) blur(12px);
}

.titleblock {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.titleblock h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta {
  font-size: 12.5px;
  color: var(--muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta .sep {
  opacity: 0.4;
  margin: 0 6px;
  font-style: normal;
}

.meta b {
  color: var(--fg);
  font-weight: 500;
}

.vsep {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex: none;
}

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn:hover {
  background: var(--muted-bg);
  border-color: var(--border-strong);
}

.btn.ghost {
  border-color: transparent;
  background: transparent;
}

.btn.ghost:hover {
  background: var(--muted-bg);
}

.btn.icon {
  width: 32px;
  padding: 0;
}

.btn.tiny {
  height: 24px;
  padding: 0 7px;
  font-size: 11.5px;
  color: var(--muted-fg);
}

.btn.tiny:hover {
  color: var(--fg);
}

.btn.sm {
  height: 30px;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  min-width: 86px;
}

.btn.primary:hover {
  background: var(--accent);
  filter: brightness(1.07);
}

.btn.primary.sm {
  min-width: 76px;
}

.play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}

.playing .play-icon {
  width: 8px;
  height: 10px;
  border: none;
  background: linear-gradient(
    to right,
    currentColor 0 34%,
    transparent 34% 66%,
    currentColor 66%
  );
}

/* --- toolbar ----------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

/* label / track / value on one line, rather than stacked */
.ctl {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--muted-fg);
  flex: none;
}

.ctl > .lbl {
  font-weight: 500;
}

.ctl > output {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  min-width: 52px;
  text-align: right;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-xs);
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
}

input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--accent);
}

/* segmented toggle group */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius);
  background: var(--muted-bg);
  border: 1px solid var(--border);
  flex: none;
}

.seg label,
.seg-one {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted-fg);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}

.seg label:hover,
.seg-one:hover {
  color: var(--fg);
}

.seg input,
.seg-one input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg label:has(input:checked),
.seg-one:has(input:checked) {
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}

.seg label:has(input:focus-visible),
.seg-one:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--ring);
}

.sel {
  height: 32px;
  padding: 0 26px 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-fg) 50%),
    linear-gradient(135deg, var(--muted-fg) 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.sel:disabled {
  opacity: 0.5;
  cursor: default;
}

.sel:focus,
.input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* --- stage ------------------------------------------------------------- */

.stage {
  position: relative;
  min-height: 0;
  display: grid;
  background: var(--bg);
}

.score {
  overflow: auto;
  background: var(--paper);
  padding: 8px 16px 26px;
  scrollbar-width: thin;
  /* Bars are draggable; stop the browser turning it into a text selection. */
  user-select: none;
}

.score.busy {
  opacity: 0.4;
}

.score:empty {
  display: none;
}

.score-msg {
  color: var(--muted-fg);
  font-size: 13px;
  padding: 40px 8px;
  text-align: center;
}

.empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--muted-fg);
  background: var(--bg);
}

.app[data-loaded="yes"] .empty {
  display: none;
}

.statusbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  font-size: 11.5px;
  color: var(--muted-fg);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.statusbar b {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.statusbar .hint {
  opacity: 0.75;
}

.app[data-focus="on"] .statusbar,
.app[data-loaded="no"] .statusbar {
  display: none;
}

/* --- transport rail (focus mode) ---------------------------------------
   At rest this is one small handle in the bottom-right corner: nothing is
   reserved beside the notation, so a system uses the full width of the stage.
   Hovering (or focusing) the handle unfurls the transport leftwards along the
   bottom edge, over the margin below the lowest system, and it folds away
   again shortly after the pointer leaves. */

.rail {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.app[data-focus="on"] ~ .rail {
  display: flex;
}

.rail-handle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: saturate(1.8) blur(14px);
  box-shadow: var(--shadow-lg);
  color: var(--muted-fg);
  cursor: pointer;
  /* Faded until wanted -- it sits over the score, and at rest it is furniture,
     not a control. */
  opacity: 0.55;
  transition: opacity 0.18s, color 0.18s;
}

.rail:hover .rail-handle,
.rail[data-open="yes"] .rail-handle {
  opacity: 1;
  color: var(--fg);
}

/* The strip itself. Collapsed it is clipped to nothing rather than hidden, so
   the unfurl can be animated and the contents keep their natural width. */
.rail-items {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: max-width 0.24s ease, opacity 0.18s ease, padding 0.24s ease;
}

.rail[data-open="yes"] .rail-items {
  max-width: 420px;
  padding: 7px 10px;
  border-color: var(--border);
  backdrop-filter: saturate(1.8) blur(14px);
  box-shadow: var(--shadow-lg);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .rail-items {
    transition: none;
  }
}

.rail-play {
  justify-content: center;
  align-items: center;
  padding: 7px 12px;
}

/* The icon carries the state on its own here; the word would not fit and is
   kept for screen readers. */
.rail-play .play-icon {
  margin: 0;
}

.rail-tempo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

/* Typed, not dragged: a slider would stretch the strip out across the score,
   and a tempo is a number the player already knows. */
.rail-bpm {
  width: 52px;
  padding: 4px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}

.rail-bpm::-webkit-outer-spin-button,
.rail-bpm::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.rail-unit {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.rail-toggle {
  display: block;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.rail-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rail-toggle:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

.rail-toggle:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.rail-exit {
  padding: 5px 10px;
  font-size: 11px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- library drawer ---------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(28, 26, 23, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

body.lib-open .scrim {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  z-index: 51;
  top: 0;
  left: 0;
  bottom: 0;
  width: 340px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--card);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

body.lib-open .drawer {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition: none;
  }
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.drawer-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.drawer-body {
  min-height: 0;
  padding: 12px 14px;
  display: grid;
  gap: 9px;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.input {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
}

.input::placeholder {
  color: var(--muted-fg);
}

.facets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-items: center;
}

.facets .sel {
  width: 100%;
  min-width: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chips:empty {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  font: inherit;
  font-size: 11.5px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
}

.chip span {
  color: var(--muted-fg);
  font-size: 13px;
  line-height: 1;
}

.chip:hover span {
  color: var(--fg);
}

.results {
  list-style: none;
  margin: 0;
  padding: 3px;
  overflow-y: auto;
  align-content: start;
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  scrollbar-width: thin;
}

.results li {
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  gap: 1px;
}

.results li:hover {
  background: var(--muted-bg);
}

.results li.active {
  background: var(--accent-soft);
}

.r-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.r-sub {
  font-size: 11.5px;
  color: var(--muted-fg);
}

.status:empty {
  display: none;
}

.status {
  margin: 0;
}

/* --- score ------------------------------------------------------------- */

/* One page per section, stacked to read as a single continuous score: a rule
   between them would land between hanes, where the short closing line already
   says the section has ended. */
.score .page + .page {
  margin-top: 4px;
}

.score svg {
  display: block;
  max-width: none;
}

/* Verovio paints with explicit fills; steer them onto the theme ink so the
   engraving stays legible in dark mode. */
.score svg g.definition-scale,
.score svg .staff,
.score svg .barLine,
.score svg .note,
.score svg .rest,
.score svg .clef,
.score svg .meterSig,
.score svg .accid,
.score svg .stem,
.score svg .beam,
.score svg .tie,
.score svg .tuplet,
.score svg .verse,
.score svg .dir,
.score svg .dynam {
  color: var(--ink);
  fill: var(--ink);
}

.score svg .staff path,
.score svg .barLine path,
.score svg .stem path,
.score svg .ledgerLines path,
.score svg .tie path {
  stroke: var(--ink);
}

.score svg .beam polygon {
  fill: var(--ink);
}

.score svg g.measure {
  cursor: pointer;
}

/* Invisible, but it is what makes the whole bar grabbable rather than just
   the glyphs inside it. */
.bar-hit {
  fill: transparent;
  pointer-events: all;
}

.bar-highlight {
  fill: var(--sel);
  stroke: var(--sel-edge);
  stroke-width: 2;
  pointer-events: none;
}

/* The subdivision reading grid (long bars only). Deliberately faint and short
   of the full staff height, so it reads as a reading aid rather than a
   barline or a claim about the usul's real grouping -- see
   docs/beat-cells-plan.md. */
.beat-tick {
  stroke: var(--muted-fg);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  opacity: 0.45;
  pointer-events: stroke;
}

/* The playing note has to win against a page of identical black glyphs, so it
   takes a colour plus weight: the stroke thickens the glyph itself and the
   halo lifts it off the staff lines behind it.

   Scoped to the notation parts on purpose. A note's <g> also carries its verse
   -- which for this corpus is where the section names live -- and dragging the
   words along would set "1. HANE" on fire every time its bar came round. */
.score svg g.note.playing .notehead,
.score svg g.note.playing .notehead *,
.score svg g.note.playing .stem,
.score svg g.note.playing .stem *,
.score svg g.note.playing .accid,
.score svg g.note.playing .accid *,
.score svg g.note.playing .dots,
.score svg g.note.playing .dots * {
  fill: var(--play);
  color: var(--play);
  stroke: var(--play);
}

.score svg g.note.playing .notehead,
.score svg g.note.playing .accid {
  paint-order: stroke fill;
  stroke-width: 12;
  filter: drop-shadow(0 0 5px var(--play-glow));
}

/* --- narrow screens ---------------------------------------------------- */

@media (max-width: 1100px) {
  .toolbar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .titleblock .meta {
    display: none;
  }
}

@media (max-width: 640px) {
  .drawer {
    width: 100%;
  }
  #focusBtn kbd,
  .statusbar .hint {
    display: none;
  }
}

/* ---- about dialog -------------------------------------------------------
   Attribution the licence requires, kept out of the way until asked for.
   A native <dialog>, so the backdrop and Esc are the platform's. */
.about {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.about::backdrop {
  background: rgba(28, 26, 23, 0.35);
  backdrop-filter: blur(2px);
}

.about-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.about-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.about-body {
  padding: 14px;
  overflow-y: auto;
  max-height: calc(min(80vh, 720px) - 48px);
  font-size: 12.5px;
  line-height: 1.55;
}

.about-body p {
  margin: 0 0 10px;
}

.about-body section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.about-body h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-fg);
}

.about-body a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.about-body details {
  margin: 10px 0;
}

.about-body summary {
  cursor: pointer;
  color: var(--muted-fg);
  font-size: 12px;
  user-select: none;
}

.about-body summary:hover {
  color: var(--fg);
}

.about-body details ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted-fg);
}

.about-body details li {
  margin-bottom: 5px;
}

.about-body blockquote {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--border);
  background: var(--muted-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted-fg);
  font-size: 11.5px;
  line-height: 1.5;
}