/* ===========================================================================
   KONNAKOL — the rhythm engine's workspace.
   ---------------------------------------------------------------------------
   Built from the tokens in cipher.css, like every other panel. The one visual
   idea borrowed on purpose is the cipher card's: a surface tinted by its own
   colour, a 152° gradient that fades out across it, a border and a header rule
   drawn in that colour. Here the colour is the selected rhythm's level — the
   same --cat-* tokens the cipher categories use, none of them new — so a
   rhythm and a cipher read as parts of one product.

   The page has three parts, in the order they are used:

     .kon-stage    the instrument — rhythm, transport, tempo, modal rhythm, grid
     .kon-choose   where the rhythm comes from
     .kon-tools    practice session and tempo ramp, folded away

   The grid rules are unchanged from the layout work: cell widths and gaps are
   what js/konnakol-layout.js's measurements rely on.
   =========================================================================== */

#konnakol .page { max-width: 62rem; }

/* ----------------------------------------------------------------- head -- */

.kon-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-hair);
}
.kon-head .pub-eyebrow { margin: 0 0 4px; }
.kon-head .page-title { margin: 0; }

.kon-subtabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
}
.kon-subtab {
  background: none;
  border: 0;
  padding: 8px 14px;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  transition: color .12s var(--ease), background-color .12s var(--ease);
}
.kon-subtab:hover { color: var(--fg); }
.kon-subtab[aria-selected="true"] {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 11%, transparent);
  box-shadow: inset 0 -1px 0 var(--green-2);
}
.kon-subtab:focus-visible { outline: 1px solid var(--green-2); outline-offset: 1px; }

.kon-panel[hidden] { display: none; }
.kon-body { margin: 22px 0 0; }

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

.kon-stage {
  --kon-hue: var(--green);
  border: 1px solid var(--line-hair);
  border-color: color-mix(in srgb, var(--kon-hue) 26%, var(--line-hair));
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--kon-hue) 11%, transparent) 0%,
      color-mix(in srgb, var(--kon-hue) 3%, transparent) 48%,
      transparent 100%),
    var(--bg-1);
  padding: 18px 20px 18px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

/* Sounding: the surface says so, the same way the Encode transport does. */
.kon-stage[data-playing="true"] {
  border-color: color-mix(in srgb, var(--kon-hue) 44%, var(--line-hair));
  box-shadow: 0 0 30px -12px color-mix(in srgb, var(--kon-hue) 50%, transparent);
}

.kon-stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--kon-hue) 18%, var(--line-hair));
}

.kon-stage-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 7px;
}
.kon-stage-eyebrow .kon-tag { margin-right: 0; }

.kon-stage-level {
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kon-hue);
}

.kon-stage-name {
  margin: 0;
  font-family: var(--f-mono);
  font-size: clamp(17px, 2.3vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg);
  text-wrap: balance;
}

.kon-stage-meta {
  margin: 5px 0 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.kon-stage-meta b { color: var(--fg-2); font-weight: 400; }

.kon-shape { text-align: right; }
.kon-shape-key {
  display: block;
  font-family: var(--f-sans);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.kon-shape-value {
  display: block;
  font-family: var(--f-mono);
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--kon-hue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Under the grid: what the rhythm is and where it comes from, and the step
   that takes it to your word. Secondary on purpose — the rhythm has already
   been seen and heard by the time a reader gets here. */
.kon-stage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--kon-hue) 12%, var(--line-hair));
}

.kon-stage-note {
  margin: 0;
  flex: 1 1 28rem;
  max-width: 70ch;
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg-3);
}

.kon-stage-use { flex: 0 0 auto; margin: 0; }

/* The controls: transport first, because it is what a hand reaches for. */
.kon-stage-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 30px;
  padding: 16px 0 2px;
}

.kon-transport { display: flex; align-items: stretch; gap: 8px; }
.kon-transport .act { margin: 0; }
.kon-play { min-width: 7.5rem; }
.kon-play[disabled] { opacity: .45; }
.kon-loop { justify-content: center; }

.kon-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.kon-key {
  font-family: var(--f-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.kon-unit {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--fg-3);
}

.kon-tempo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kon-tempo-note { max-width: 40ch; }

.kon-bpm { display: flex; align-items: stretch; }
.kon-step {
  width: 30px;
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--fg-2);
  font-family: var(--f-mono);
  font-size: 14px;
  cursor: pointer;
}
.kon-step:hover:not(:disabled) { color: var(--fg); border-color: var(--line); }
.kon-step:disabled { opacity: .45; cursor: default; }

.kon-bpm-value {
  width: 4rem;
  border: 1px solid var(--line-soft);
  border-left: 0;
  border-right: 0;
  background: none;
  color: var(--fg);
  font-family: var(--f-mono);
  font-size: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 6px 0;
  -moz-appearance: textfield;
}
.kon-bpm-value::-webkit-outer-spin-button,
.kon-bpm-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kon-bpm-value:focus { outline: none; border-color: var(--green-2); }

.kon-tempo-presets .kon-tempo-preset {
  min-width: 2.4rem;
  padding: 6px 7px;
  align-items: center;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.kon-mode-note { max-width: 34ch; }

/* A mode chip: its number, and the syllable the mode begins on. */
.kon-mode-chip { min-width: 2.6rem; padding: 5px 8px; align-items: center; text-align: center; }
.kon-mode-chip .kon-chip-name { font-size: 13px; font-variant-numeric: tabular-nums; }
.kon-mode-chip .kon-chip-sub {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  text-transform: none;
}

/* ----------------------------------------------------------------- chips -- */

.kon-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kon-chips-tight { gap: 4px; }

.kon-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--fg-2);
  font-family: var(--f-mono);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}
.kon-chip:hover:not(:disabled) { border-color: var(--line); color: var(--fg); }
.kon-chip:focus-visible { outline: 1px solid var(--green-2); outline-offset: 1px; }
.kon-chip[data-active="true"] { color: var(--green); border-color: var(--green-2); }
.kon-chip:disabled { opacity: .45; cursor: default; }

/* Inside the stage the active chip takes the rhythm's colour. */
.kon-stage .kon-chip[data-active="true"] {
  color: var(--kon-hue);
  border-color: color-mix(in srgb, var(--kon-hue) 60%, var(--line));
  background: color-mix(in srgb, var(--kon-hue) 9%, transparent);
}

.kon-chip-name { font-size: 12px; }
.kon-chip-sub {
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.kon-chip[data-active="true"] .kon-chip-sub { color: var(--green-dim); }

.kon-chip-num { min-width: 3.4rem; align-items: center; text-align: center; }
.kon-chip-num .kon-chip-name { font-size: 15px; font-variant-numeric: tabular-nums; }

/* A derived spelling is marked on the control itself, quietly. */
.kon-chip[data-derived="true"] .kon-chip-name::after {
  content: '·';
  color: var(--amber);
  margin-left: .35em;
}

.kon-tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 1px 5px;
  margin-right: 4px;
  color: var(--amber);
  border: 1px solid rgba(200, 162, 74, .4);
}
.kon-tag-quoted { color: var(--fg-3); border-color: var(--line-soft); }
/* PHYTHAGRAM's own work carries the application's own colour. */
.kon-tag-phythagram { color: var(--green-2); border-color: var(--green-dim); }

.kon-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 62ch;
}

/* ----------------------------------------------------------------- grid -- */

/* The whole cycle stays in view: a grid of --kon-cols beats per line, set by
   js/konnakol-layout.js from the measured widths. The scroll is a safety net
   the layout keeps from ever being needed. */
.kon-gridwrap {
  overflow-x: auto;
  padding: 20px 0 4px;
}

.kon-grid {
  --kon-beat-gap: 10px;
  display: grid;
  grid-template-columns: repeat(var(--kon-cols, 16), max-content);
  justify-content: start;
  justify-items: start;
  align-items: end;
  column-gap: var(--kon-beat-gap);
  row-gap: 14px;
}

.kon-beat { display: flex; flex-direction: column; gap: 6px; }

/* A line after the first starts under a hairline: the cycle continuing. */
.kon-beat[data-line]:not([data-line="1"]) {
  padding-top: 10px;
  border-top: 1px solid var(--line-hair);
}

.kon-beat-no {
  font-family: var(--f-sans);
  font-size: 8.5px;
  letter-spacing: .16em;
  color: var(--fg-3);
  padding-left: 1px;
}
.kon-beat[data-first="true"] .kon-beat-no { color: var(--green); }
.kon-beat[data-first="true"] .kon-cells { border-left: 2px solid var(--green-2); padding-left: 6px; }

.kon-cells { display: flex; gap: 3px; }

.kon-cell {
  position: relative;
  min-width: 34px;
  height: 52px;
  padding: 0 4px;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
  color: var(--fg-2);
  font-family: var(--f-mono);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .08s var(--ease), color .08s var(--ease);
}
.kon-cell:hover:not(:disabled) { border-color: var(--line); }
.kon-cell:focus-visible { outline: 1px solid var(--green-2); outline-offset: 1px; }

/* The start of a group inside a beat: 3+3+2 has to be visible as 3+3+2. */
.kon-cell[data-group="true"] { border-left-color: var(--fg-3); }

/* Accent, as weight rather than colour alone. */
.kon-cell[data-accent="3"] .kon-syl { color: var(--green); font-weight: 500; }
.kon-cell[data-accent="2"] .kon-syl { color: var(--fg); }
.kon-cell[data-accent="1"] .kon-syl { color: var(--fg-3); }

/* A felt cell: present in time, not spoken. */
.kon-cell[data-kind="felt"] {
  background: transparent;
  border-style: dashed;
  cursor: default;
}
.kon-cell[data-kind="felt"] .kon-syl { color: var(--fg-3); opacity: .65; }

/* Where the clock has got to. */
.kon-cell[data-now="true"] {
  background: var(--green-dim);
  border-color: var(--green);
}
.kon-cell[data-now="true"] .kon-syl { color: var(--bg); font-weight: 600; }

.kon-syl { line-height: 1; }

/* In a mode other than the first: each note's place in the rhythm as written,
   and the note where the written rhythm begins — the same material, visibly
   begun somewhere else. */
.kon-cell-ord {
  position: absolute;
  top: 3px;
  right: 4px;
  font-family: var(--f-sans);
  font-size: 7.5px;
  line-height: 1;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.kon-cell[data-origin="1"] { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--kon-hue, var(--green)) 75%, transparent); }
.kon-cell[data-origin="1"] .kon-cell-ord { color: var(--kon-hue, var(--green)); }
.kon-cell[data-now="true"] .kon-cell-ord { color: var(--bg); }
.kon-grid[data-density="compact"] .kon-cell-ord { top: 2px; right: 2px; font-size: 7px; }

/* Compact: the smallest the cells are ever drawn. */
.kon-grid[data-density="compact"] { --kon-beat-gap: 6px; row-gap: 12px; }
.kon-grid[data-density="compact"] .kon-cells { gap: 2px; }
.kon-grid[data-density="compact"] .kon-cell {
  min-width: 24px;
  height: 44px;
  padding: 0 2px;
  font-size: 10px;
}
.kon-grid[data-density="compact"] .kon-beat[data-first="true"] .kon-cells { padding-left: 4px; }

/* Accents turned off by a practice level. */
.kon-grid[data-accents="false"] .kon-cell[data-accent="3"] .kon-syl,
.kon-grid[data-accents="false"] .kon-cell[data-accent="2"] .kon-syl,
.kon-grid[data-accents="false"] .kon-cell[data-accent="1"] .kon-syl {
  color: var(--fg-2);
  font-weight: 400;
}

/* ---------------------------------------------------------------- spoken -- */

.kon-spoken {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  margin: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--kon-hue) 16%, var(--line-hair));
}
.kon-spoken-syl {
  font-family: var(--f-mono);
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--kon-hue);
}

/* ---------------------------------------------------------------- status -- */

.kon-status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 14px 0 0;
}
.kon-status-cycle {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.kon-status-prompt { font-size: 11.5px; line-height: 1.5; color: var(--fg-3); max-width: 60ch; }
.kon-status[data-state="count-in"] .kon-status-cycle,
.kon-status[data-state="playing"] .kon-status-cycle { color: var(--green); }
.kon-status[data-state="complete"] .kon-status-cycle { color: var(--amber); }
.kon-status[data-listening="true"] .kon-status-cycle,
.kon-status[data-listening="true"] .kon-status-prompt { color: var(--amber); }

#kon-body[data-practice="response"] .kon-grid { opacity: .55; }
#kon-body[data-practice="response"] .kon-spoken-syl { color: var(--amber); }

/* ----------------------------------------------------------------- lock --- */

.kon-lock {
  margin: 14px 0 0;
  padding: 18px 20px;
  border: 1px solid rgba(219, 185, 104, .32);
  background:
    linear-gradient(152deg, rgba(219, 185, 104, .09) 0%, rgba(219, 185, 104, 0) 60%),
    var(--bg-1);
}
.kon-lock-eyebrow {
  margin: 0 0 6px;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}
.kon-lock-title { margin: 0 0 8px; font-size: 16px; color: var(--fg); }
.kon-lock-body { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--fg-2); max-width: 58ch; }

/* ------------------------------------------------------------- choose ----- */

.kon-choose { margin-top: 38px; }

.kon-choose-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-hair);
}

.kon-section-title {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.kon-sources { display: flex; }
.kon-source {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 8px 14px;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
}
.kon-source:hover:not(:disabled) { color: var(--fg); }
.kon-source[data-active="true"] { color: var(--green); border-bottom-color: var(--green-2); }
.kon-source:focus-visible { outline: 1px solid var(--green-2); outline-offset: 1px; }
.kon-source:disabled { opacity: .45; cursor: default; }

.kon-choose-body { padding-top: 18px; }

.kon-cycle-controls,
.kon-word-options { display: flex; flex-wrap: wrap; gap: 18px 28px; }

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

.kon-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; }
.kon-search { min-width: 12rem; flex: 1 1 12rem; max-width: 20rem; }
.kon-search-input { width: 100%; font-family: var(--f-mono); font-size: 12px; }

.kon-count {
  margin: 16px 0 8px;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.kon-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 8px;
}

/* A card is one button: press it and the rhythm is on the stage. It wears its
   level's colour in the cipher cards' tinted gradient, lighter, so a list of
   thirty does not shout. */
.kon-card {
  --kon-hue: var(--green);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px 12px;
  text-align: left;
  font: inherit;
  color: var(--fg-2);
  cursor: pointer;
  border: 1px solid var(--line-hair);
  border-color: color-mix(in srgb, var(--kon-hue) 18%, var(--line-hair));
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--kon-hue) 8%, transparent) 0%,
      transparent 62%),
    var(--bg-1);
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.kon-card[data-level="beginner"] { --kon-hue: var(--cat-modal); }
.kon-card[data-level="intermediate"] { --kon-hue: var(--cat-classic); }
.kon-card[data-level="advanced"] { --kon-hue: var(--cat-harmonic-minor); }
.kon-card[data-level="phythagram"] { --kon-hue: var(--green); }

.kon-card:hover { border-color: color-mix(in srgb, var(--kon-hue) 42%, var(--line-hair)); }
.kon-card:focus-visible { outline: 1px solid var(--kon-hue); outline-offset: 1px; }
.kon-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--kon-hue) 62%, var(--line-hair));
  box-shadow: inset 2px 0 0 var(--kon-hue);
}

.kon-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kon-card-name { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.35; color: var(--fg); }
.kon-card[aria-pressed="true"] .kon-card-name { color: var(--kon-hue); }
.kon-card-level {
  flex-shrink: 0;
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kon-hue);
}
.kon-card-shape { font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); white-space: pre; }
.kon-card-shape b { color: var(--kon-hue); font-weight: 400; }
.kon-card-syl {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kon-card .kon-tag { align-self: flex-start; margin: 2px 0 0; }

/* -------------------------------------------------------------- tools ----- */

.kon-tools { margin-top: 30px; border-top: 1px solid var(--line-hair); }

.kon-tools-summary {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 14px 0;
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
}
.kon-tools-summary::-webkit-details-marker { display: none; }
.kon-tools-summary::before {
  content: '+';
  width: 1ch;
  font-family: var(--f-mono);
  color: var(--fg-3);
}
.kon-tools[open] > .kon-tools-summary::before { content: '−'; }
.kon-tools-summary:hover { color: var(--fg); }
.kon-tools-summary:focus-visible { outline: 1px solid var(--green-2); outline-offset: 2px; }

.kon-tools-badge {
  font-size: 8px;
  letter-spacing: .14em;
  font-weight: 500;
  padding: 1px 6px;
  color: var(--green-2);
  border: 1px solid var(--green-dim);
}

.kon-tools-body { display: flex; flex-wrap: wrap; gap: 20px 32px; padding: 4px 0 22px; }
.kon-session { max-width: 22rem; }
.kon-practice { display: flex; flex-wrap: wrap; gap: 16px 26px; flex: 1 1 100%; }
.kon-ramp { flex: 1 1 18rem; }
.kon-ramp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kon-ramp-select { font-family: var(--f-mono); font-size: 11px; min-width: 0; }
.kon-ramp-note { max-width: 40ch; }

/* -------------------------------------------------------------- about ----- */

.kon-about { padding-top: 24px; }
.kon-about .page-lede { max-width: 38rem; margin-top: 0; }

.kon-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 10px;
  margin-top: 20px;
}

.kon-about-card {
  --kon-hue: var(--green);
  padding: 15px 16px 14px;
  border: 1px solid var(--line-hair);
  border-color: color-mix(in srgb, var(--kon-hue) 22%, var(--line-hair));
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--kon-hue) 9%, transparent) 0%,
      transparent 58%),
    var(--bg-1);
}
.kon-about-card:nth-child(2) { --kon-hue: var(--cat-modal); }
.kon-about-card:nth-child(3) { --kon-hue: var(--cat-classic); }
.kon-about-card:nth-child(4) { --kon-hue: var(--cat-harmonic-minor); }
.kon-about-card:nth-child(5) { --kon-hue: var(--cat-pentatonic); }
.kon-about-card:nth-child(6) { --kon-hue: var(--amber); }

.kon-about-card h3 {
  margin: 0 0 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--kon-hue) 18%, var(--line-hair));
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kon-hue);
}
.kon-about-card p { margin: 0 0 8px; font-size: 12px; line-height: 1.65; color: var(--fg-2); }
.kon-about-card p:last-child { margin-bottom: 0; }
.kon-about-card strong { color: var(--fg); font-weight: 500; }

.kon-about-sources { margin: 18px 0 0; max-width: 72ch; font-size: 10.5px; line-height: 1.65; color: var(--fg-3); }

/* ------------------------------------------------------------- motion ----- */

@media (prefers-reduced-motion: reduce) {
  .kon-cell, .kon-stage, .kon-card, .kon-subtab { transition: none; }
}

/* ------------------------------------------------------------- mobile ----- */

@media (max-width: 700px) {
  .kon-subtabs { width: 100%; }
  .kon-subtab { flex: 1 1 0; min-height: 40px; }

  .kon-stage { padding: 14px 12px 14px; }
  /* On a phone the grid is what should be reached first. The shape stays
     beside the name instead of taking a row of its own, and the two notes that
     explain a control step aside — what they say is in the tags, the titles
     and the About tab. */
  .kon-stage-head { gap: 4px 14px; }
  .kon-shape-value { font-size: 20px; white-space: normal; max-width: 42vw; }
  .kon-tempo-note, .kon-mode-note { display: none; }
  .kon-stage-controls { gap: 16px 18px; }
  .kon-transport { width: 100%; }
  .kon-transport .act, .kon-loop { flex: 1 1 0; min-height: 44px; }

  .kon-cell { min-width: 30px; height: 46px; }
  .kon-spoken { min-height: 62px; }
  .kon-chip-num { min-width: 3rem; }
  .kon-tempo-presets .kon-tempo-preset { min-width: 2.4rem; min-height: 40px; }

  .kon-choose { margin-top: 30px; }
  .kon-sources { width: 100%; }
  .kon-source { flex: 1 1 0; min-height: 40px; padding: 8px 6px; }
  .kon-search { max-width: none; }
  .kon-cards { grid-template-columns: 1fr; }
  .kon-practice { gap: 12px 18px; }
}