/* SPDX-License-Identifier: GPL-3.0-or-later */
/* Copyright (C) 2026 the tapey-1 contributors */

/* The docs: style.css's look, a contents column, and drawings of the panel. */

:root {
  --blue: #2f80ea;
  --green: #13923f;
  --orange: #ec4610;
  --knob-blue: #58a0f3;
  --knob-green: #3fd16a;
  --knob-white: #f7f7f5;
  --knob-orange: #ff6420;
  --t-blue: #1f6fd6;
  --t-green: #0f8037;
  --t-orange: #c4400f;
  --t-white: #6d6f73;
  --unit: #f4f3f0;
  --unit-edge: #cfccc5;
  --doc: 780px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blue: #5c9df2;
    --green: #37b866;
    --orange: #f45a22;
    --t-blue: #7cb1f6;
    --t-green: #5ccf83;
    --t-orange: #ff8a52;
    --t-white: #d8d7d3;
    --unit: #2b2d31;
    --unit-edge: #3b3e43;
  }
}

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

.docs {
  display: grid;
  grid-template-columns: 210px minmax(0, var(--doc));
  gap: clamp(32px, 5vw, 72px);
  justify-content: center;
  padding-top: clamp(16px, 3vw, 40px);
}

/* ---------------------------------------------------------------- contents */

.toc { position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow: auto; font-size: 14.5px; }
.toc summary { font: 12.5px/1 var(--mono); color: var(--ink-3); list-style: none; cursor: default; padding: 6px 0 12px; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 10px; margin-left: -10px; border-radius: 8px;
  text-decoration: none; color: var(--ink-2);
}
.toc a::before { content: counter(toc, decimal-leading-zero); font: 11.5px/1 var(--mono); color: var(--ink-3); min-width: 1.6em; }
.toc a:hover { color: var(--ink); background: var(--tile); }
.toc a.here { color: var(--ink); background: var(--tile); box-shadow: inset 2px 0 0 var(--accent); }

/* ---------------------------------------------------------------- the text */

.doc { min-width: 0; padding-bottom: 40px; }
.doc-head { padding: 0 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: clamp(40px, 6vw, 72px); }
.doc-head .lede { margin: 22px 0 18px; }
.doc-alpha { font-size: 14.5px; color: var(--ink-3); margin: 0; }
.doc-alpha .tag { margin: 0 8px 0 0; vertical-align: 0.1em; }
.doc-alpha a { color: var(--accent-text); }

.doc section { padding: clamp(40px, 6vw, 64px) 0 0; scroll-margin-top: 12px; }
.doc section .label { margin-bottom: 10px; }
.doc h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.doc h3 { font-size: 20px; font-weight: 640; margin: 30px 0 8px; scroll-margin-top: 12px; }
.doc p, .doc li, .doc dd { color: var(--ink-2); }
.doc p b, .doc li b, .doc td b, .doc dd b { color: var(--ink); font-weight: 600; }
.doc p { margin: 0 0 14px; }
.doc a { color: var(--ink); }
.small { font-size: 14.5px; color: var(--ink-3) !important; }

kbd {
  display: inline-block; min-width: 1.7em;
  padding: 0.1em 0.45em 0.15em; margin: 0 0.05em;
  font: 500 0.82em/1.3 var(--mono); text-align: center; color: var(--ink);
  background: var(--cap-face); border-radius: 6px;
  box-shadow: var(--cap-shadow);
  white-space: nowrap;
}

.ticks { list-style: none; padding: 0; margin: 16px 0; }
.ticks li { position: relative; padding-left: 22px; margin: 9px 0; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.howto { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 14px; }
.howto li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); }
.howto .cap { margin-top: -2px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 36px; }
.two h3 { margin-top: 26px; }

.chips { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--tile); border: 1px solid var(--line); font: 13.5px/1.3 var(--mono); color: var(--ink); }

.callout {
  margin: 28px 0 0; padding: 4px 22px 8px;
  border-radius: var(--radius);
  background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-left: 3px solid var(--accent);
}
.callout h3 { margin-top: 18px; }

.doc .screen { margin: 18px 6px 18px; }

/* Tables: plain rows, the knob colours on their headings. */
.table-wrap { overflow-x: auto; margin: 16px 0 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--tile); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
tr:last-child td { border-bottom: 0; }
th { font: 12.5px/1.3 var(--mono); color: var(--ink-3); font-weight: 400; background: var(--tile-hi); }
td code { font-size: 12.5px; white-space: nowrap; }
.c-blue { color: var(--t-blue) !important; }
.c-green { color: var(--t-green) !important; }
.c-white { color: var(--t-white) !important; }
.c-orange { color: var(--t-orange) !important; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -0.05em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.d-blue { background: var(--knob-blue); }
.d-green { background: var(--knob-green); }
.d-white { background: var(--knob-white); }
.d-orange { background: var(--knob-orange); }
.tk {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
  background: var(--cap-face); box-shadow: var(--cap-shadow);
  font: 500 12.5px/1 var(--mono); color: var(--ink);
}

/* ---------------------------------------------------------------- caps, shared */

.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ico.blue, .trick.blue { color: var(--blue); }
.ico.green, .trick.green, .legend.green { color: var(--green); }
.ico.orange, .trick.orange { color: var(--orange); }
.trick { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.num { font: 500 1em/1 var(--sans); color: var(--ink); }
.legend { font: 600 0.5em/1 var(--mono); color: var(--ink-3); letter-spacing: 0.02em; }

.pcap {
  display: inline-grid; place-items: center; align-content: center; gap: 2px;
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--cap-face); box-shadow: var(--cap-shadow);
  font-size: 17px; color: var(--ink);
}
.pcap .ico { width: 22px; height: 22px; }
.pcap .trick { width: 22px; height: 9px; }
.pcap-wide { width: 92px; border-radius: 12px; padding: 0 8px; }
.pcap-wide .mini-kb { width: 100%; height: 30px; }

.mini-kb { --kw: #fbfbf9; --kws: #c9c6bf; --kb: #2a2c30; }
@media (prefers-color-scheme: dark) {
  .mini-kb { --kw: #e9e8e4; --kws: #6d6f73; --kb: #121315; }
}

.knob {
  display: block; border-radius: 50%; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, #fff 35%, var(--k)), var(--k) 62%, color-mix(in srgb, #000 12%, var(--k)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 0 4px var(--tile-hi), 0 0 0 5px var(--line);
}
.k-blue { --k: var(--knob-blue); }
.k-green { --k: var(--knob-green); }
.k-white { --k: var(--knob-white); }
.k-orange { --k: var(--knob-orange); }

/* ---------------------------------------------------------------- the panel drawing */

.explore { margin: 22px 0 18px; }
.pd {
  --cols: 16; --rows: 6;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  aspect-ratio: 16 / 6.2;
  padding: clamp(8px, 1.4vw, 14px);
  gap: 2px;
  background: var(--unit);
  border: 1px solid var(--unit-edge);
  border-radius: clamp(10px, 1.6vw, 18px);
  box-shadow: var(--shadow), 0 24px 40px -24px rgba(40, 36, 30, 0.4);
  container-type: inline-size;
  --cell: calc(100cqw / 16);
}
.pc {
  grid-area: var(--d);
  position: relative;
  display: grid; place-items: center;
  min-width: 0; min-height: 0;
  text-decoration: none; color: var(--ink);
  border-radius: 10px;
  font-size: calc(var(--cell) * 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pc:focus-visible { outline-offset: -2px; }
.pc-cap { display: grid; place-items: center; align-content: center; gap: 1px; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.is-key .pc-cap {
  width: calc(var(--cell) * 0.8); height: calc(var(--cell) * 0.8);
  border-radius: 50%;
  background: var(--cap-face); box-shadow: var(--cap-shadow);
}
.is-key .pc-cap .ico { width: calc(var(--cell) * 0.36); height: calc(var(--cell) * 0.36); }
.is-key .pc-cap .trick { width: calc(var(--cell) * 0.38); height: calc(var(--cell) * 0.16); }
.is-key .legend { font-size: calc(var(--cell) * 0.15); }
.is-rec .rec-dot { width: calc(var(--cell) * 0.36); aspect-ratio: 1; border-radius: 50%; background: var(--knob-orange); box-shadow: 0 0 0 2px color-mix(in srgb, var(--knob-orange) 25%, transparent); }
.is-knob .pc-cap { width: calc(var(--cell) * 1.4); }
.is-knob .knob { width: 100%; }
.is-vol .pc-cap { width: calc(var(--cell) * 0.72); }
.vknob { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--cap-face); box-shadow: var(--cap-shadow); position: relative; }
.vknob::after { content: ""; position: absolute; left: 50%; top: 12%; width: 2px; height: 26%; margin-left: -1px; border-radius: 1px; background: var(--ink-3); }
.is-screen, .is-speaker, .is-kb { place-items: stretch; }
.is-screen .pc-cap, .is-speaker .pc-cap, .is-kb .pc-cap { position: absolute; inset: calc(var(--cell) * 0.1); display: block; }
.is-screen .mini-screen, .is-speaker .grille, .is-kb .mini-kb { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-screen {
  display: block; width: 100%; height: 100%; border-radius: 8px;
  background: #0c0d0e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 3px var(--tile-hi);
  position: relative; overflow: hidden;
}
.mini-screen i {
  position: absolute; top: 22%; width: 22%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid #e6e4df; opacity: 0.85;
  background: radial-gradient(circle, #e6e4df 0 12%, transparent 13%);
}
.mini-screen i:first-child { left: 18%; }
.mini-screen i:last-child { right: 18%; }
.mini-screen::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 18%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--knob-blue) 0 25%, var(--knob-green) 25% 50%, #e6e4df 50% 75%, var(--knob-orange) 75%); opacity: 0.9; }
.grille {
  display: block; width: 100%; height: 100%;
  background: radial-gradient(circle, var(--ink-3) 0 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  border-radius: 50%; opacity: 0.55;
  mask-image: radial-gradient(circle, #000 64%, transparent 66%);
}
.is-kb .mini-kb { display: block; }
.is-kb .mini-kb.kb8, .cl-cap .mini-kb.kb8 { display: none; }

.pc:hover .pc-cap, .pc.lit .pc-cap { transform: translateY(-1px); }
.pc.lit::after, .pc:focus-visible::after {
  content: ""; position: absolute; inset: 2px; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--accent);
  pointer-events: none;
}
.pd.pointing .pc:not(.lit) { opacity: 0.55; }
.pd .pc { transition: opacity 0.15s ease; }

/* The readout: the unit's black screen, saying what is pointed at. */
.readout {
  position: relative; bottom: 12px; z-index: 2;
  margin: 14px 6px 0 !important; padding: 0 0 16px;
  min-height: 132px;
}
.readout .screen-bar { padding-top: 12px; }
#ro-key { color: var(--accent); }
.ro-name { margin: 8px 18px 4px !important; font-weight: 650; font-size: 21px; color: var(--screen-ink) !important; }
.ro-what { margin: 0 18px !important; font-size: 15.5px; color: color-mix(in srgb, var(--screen-ink) 78%, transparent) !important; max-width: 46em; }
.explore.active .readout { position: sticky; }
.ro-more[hidden] { display: none; }
.ro-more { display: inline-block; margin: 10px 18px 0; font-size: 14px; color: var(--accent) !important; }

.all-controls { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--tile); padding: 2px 16px; }
.all-controls summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.clist { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 2px; }
.clist li { display: flex; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); scroll-margin-top: 60px; }
.clist li:target { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 8px; }
.cl-cap { flex: none; width: 40px; height: 40px; display: grid; place-items: center; align-content: center; gap: 1px; border-radius: 50%; background: var(--cap-face); box-shadow: var(--cap-shadow); font-size: 15px; overflow: hidden; }
.cl-cap .ico { width: 20px; height: 20px; }
.cl-cap .trick { width: 20px; height: 8px; }
.cl-cap .knob { width: 30px; box-shadow: none; }
.cl-cap .vknob { width: 30px; }
.cl-cap .rec-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--knob-orange); }
.pcap-screen, .pcap-speaker, .pcap-kb { border-radius: 9px; }
.cl-cap .mini-screen { width: 40px; height: 40px; }
.cl-cap .grille { width: 40px; height: 40px; }
.cl-cap .mini-kb { width: 40px; height: 40px; }
.cl-cap .mini-kb.kb8 { display: none; }
.cl-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 15px; color: var(--ink-2); }
.cl-text b { color: var(--ink); }
.cl-text kbd { font-size: 0.78em; }
.cl-text > span { flex-basis: 100%; }

/* ---------------------------------------------------------------- knob demo */

.knob-demo { margin: 20px 0 10px; padding: 22px; border-radius: var(--radius); background: var(--unit); border: 1px solid var(--unit-edge); box-shadow: var(--shadow); }
.kd-screen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 16px 18px; border-radius: 10px; background: #0c0d0e;
  font: 12.5px/1.2 var(--mono);
}
.kd-screen span { display: grid; gap: 6px; }
.kd-screen b { font: 600 clamp(15px, 2.2vw, 22px)/1 var(--sans); }
.kd-screen .c-blue { color: var(--knob-blue) !important; }
.kd-screen .c-green { color: var(--knob-green) !important; }
.kd-screen .c-white { color: #f2f1ed !important; }
.kd-screen .c-orange { color: var(--knob-orange) !important; }
.kd-knobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; justify-items: center; }
.kd-knobs .knob { width: min(84px, 62%); }
.knob-demo figcaption { margin-top: 18px; font-size: 14px; color: var(--ink-3); text-align: center; }

/* ---------------------------------------------------------------- modes */

.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.mode { padding: 20px; border-radius: var(--radius); background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mode h3 { margin: 14px 0 6px; font-size: 22px; }
.mode p { font-size: 15.5px; margin: 0; }
.mode .mode-k { margin-top: 12px; font: 12.5px/1.5 var(--mono); color: var(--ink-3); }
.m-blue { border-top: 3px solid var(--blue); }
.m-green { border-top: 3px solid var(--green); }
.m-orange { border-top: 3px solid var(--orange); }
.m-ink { border-top: 3px solid var(--ink); }

/* ---------------------------------------------------------------- sampling */

.flow { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: flow; }
.flow li {
  position: relative; display: grid; gap: 8px; justify-items: start;
  padding: 20px; border-radius: var(--radius); background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow);
  counter-increment: flow;
}
.flow li::before { content: counter(flow); position: absolute; top: 16px; right: 18px; font: 12.5px/1 var(--mono); color: var(--ink-3); }
.flow li > b { margin-top: 6px; font-size: 17px; }
.flow li > span:last-child { font-size: 14.5px; color: var(--ink-2); }

.smodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.smodes article { padding: 16px 18px 18px; border-radius: var(--radius); background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow); }
.smodes h3 { margin: 12px 0 6px; font-family: var(--mono); font-size: 16px; font-weight: 400; letter-spacing: 0; }
.smodes p { font-size: 14.5px; margin: 0; }
.sdraw { display: block; width: 100%; height: auto; border-radius: 8px; background: #0c0d0e; }
.sdraw .wave { fill: none; stroke: #e6e4df; stroke-width: 1.6; stroke-linejoin: round; }
.sdraw .faint { opacity: 0.4; }
.sdraw .mk { stroke: #8b8d91; stroke-width: 1.2; stroke-dasharray: 3 3; }
.sdraw .mk-white { stroke: #f2f1ed; stroke-dasharray: none; }
.sdraw .mk-orange { stroke: var(--knob-orange); stroke-dasharray: none; }
.sdraw .mk-blue { stroke: var(--knob-blue); stroke-dasharray: none; }
.sdraw .spray { fill: color-mix(in srgb, var(--knob-orange) 18%, transparent); stroke: var(--knob-orange); stroke-width: 1; }
.sdraw .grain { fill: none; stroke: var(--knob-green); stroke-width: 1.8; stroke-linecap: round; }
.sdraw text { fill: #8b8d91; font: 9px var(--mono); }

/* ---------------------------------------------------------------- tape tricks */

.tricks-list { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.tricks-list li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; font-size: 14.5px; }
.tricks-list .pcap { grid-row: span 2; width: 42px; height: 42px; font-size: 15px; }
.tricks-list b { align-self: end; font-size: 15.5px; }
.tricks-list li { line-height: 1.35; }

/* ---------------------------------------------------------------- sequencers */

.seqs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.seqs article { padding: 16px 18px 18px; border-radius: var(--radius); background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow); }
.seqs svg { display: block; width: 100%; height: auto; padding: 10px; border-radius: 8px; background: #0c0d0e; }
.seqs h3 { margin: 12px 0 4px; font-family: var(--mono); font-size: 16px; font-weight: 400; letter-spacing: 0; }
.seqs p { font-size: 14.5px; margin: 0; }
.sq rect, .sq circle { fill: var(--knob-blue); }
.seqs article:nth-child(2) .sq rect { fill: #2a2c30; }
.seqs article:nth-child(2) .sq rect.on { fill: var(--knob-green); }
.sqline { fill: none; stroke: #5a5d62; stroke-width: 1.4; }

/* ---------------------------------------------------------------- the computer keyboard */

.ckeys {
  margin: 20px 0 12px; padding: 16px;
  border-radius: var(--radius); background: var(--unit); border: 1px solid var(--unit-edge); box-shadow: var(--shadow);
  display: grid; gap: 6px;
  overflow-x: auto;
}
.ck-row { display: flex; gap: 6px; min-width: 620px; }
.ck-space { justify-content: center; }
.ck-space .ck { flex: 0 0 40%; }
.ck {
  flex: var(--w) 1 0; min-width: 0;
  display: grid; align-content: space-between;
  height: 50px; padding: 6px 7px 5px;
  border-radius: 8px;
  background: var(--tile-hi); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.12);
}
.ck b { font: 500 12px/1 var(--mono); color: var(--ink-3); }
.ck i { font: 600 11px/1.1 var(--sans); font-style: normal; color: var(--ink); white-space: nowrap; letter-spacing: -0.01em; }
.k-none { opacity: 0.45; }
.k-white { background: #fbfbf9; }
.k-black { background: #2a2c30; }
.k-black b { color: #8b8d91; }
.k-black i { color: #f2f1ed; }
.k-mode { background: color-mix(in srgb, var(--blue) 16%, var(--tile-hi)); }
.k-t { background: color-mix(in srgb, var(--green) 15%, var(--tile-hi)); }
.k-slot { background: color-mix(in srgb, var(--ink) 7%, var(--tile-hi)); }
.k-top { background: color-mix(in srgb, #9b6cf0 15%, var(--tile-hi)); }
.k-tr, .k-rec { background: color-mix(in srgb, var(--orange) 16%, var(--tile-hi)); }
.k-ed { background: color-mix(in srgb, #d1a400 18%, var(--tile-hi)); }
.k-sys { background: var(--tile-hi); }
@media (prefers-color-scheme: dark) {
  .k-white { background: #e9e8e4; }
  .k-white b { color: #6d6f73; }
  .k-white i { color: #1b1d20; }
  .k-black { background: #111214; }
}
.ck-legend { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-3); }
.ck-legend li { display: flex; align-items: center; gap: 7px; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- settings */

.setlist { margin: 18px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.setlist div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setlist dt { font-weight: 600; }
.setlist dd { margin: 0; }

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1020px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: 12px; background: var(--tile); padding: 4px 16px; }
  .toc summary { cursor: pointer; font: 600 15px/1 var(--sans); color: var(--ink); padding: 14px 0; display: flex; justify-content: space-between; }
  .toc summary::after { content: "+"; font: 400 20px/0.8 var(--mono); color: var(--ink-3); }
  .toc details[open] summary::after { content: "–"; }
  .toc ol { columns: 2; column-gap: 24px; padding-bottom: 10px; }
}
@media (max-width: 760px) {
  .flow, .smodes, .seqs, .modes, .two { grid-template-columns: 1fr; }
  .tricks-list { grid-template-columns: 1fr; }
  .setlist div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .toc ol { columns: 1; }
  /* The vertical skin: 8 columns, each split in three so < > and shift share a row. */
  .pd { --cols: 24; --rows: 15; --cell: calc(100cqw / 8); aspect-ratio: 8 / 15.4; max-width: 420px; margin: 0 auto; gap: 1px; }
  .pc { grid-area: var(--v); }
  .is-vol .pc-cap { width: calc(var(--cell) * 0.7); }
  .is-speaker .grille { border-radius: 8px; mask-image: none; }
  .is-kb .mini-kb.kb13 { display: none; }
  .is-kb .mini-kb.kb8 { display: block; }
  .readout { min-height: 0; padding-bottom: 12px; }
  .readout .screen-bar { padding-top: 10px; }
  .ro-more { margin-top: 6px; }
  .ro-name { font-size: 18px; }
  .ro-what { font-size: 14.5px; }
  .knob-demo { padding: 14px; }
  .kd-screen { padding: 12px 10px; font-size: 10.5px; gap: 4px; }
  .kd-screen b { font-size: 14px; }
  th, td { padding: 9px 10px; font-size: 14px; }
}

/* ---------------------------------------------------------------- plugin folders */

.folders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; }
.folders > div { padding: 14px 16px; border-radius: 12px; background: var(--tile); border: 1px solid var(--line); min-width: 0; }
.folders h4 { margin: 0 0 8px; font-size: 15px; }
.folders dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: baseline; }
.folders dt { font: 600 12.5px/1.4 var(--mono); color: var(--accent-text); }
.folders dd { margin: 0; }
.folders code { font-size: 12.5px; overflow-wrap: anywhere; }
.only-sm { display: none; }
@media (max-width: 760px) {
  .folders { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .only-sm { display: block; margin: -4px 0 10px !important; }
}

/* Four steps in a row: sharing to the library. */
.flow.four { grid-template-columns: repeat(4, 1fr); }
.flow.four li { align-content: start; }
.flow.four li code { font-size: 0.9em; background: none; border: 0; padding: 0; color: var(--ink); overflow-wrap: anywhere; }
.doc .tree { margin: 18px 6px 22px; }
.doc .tree pre { font-size: 13.5px; line-height: 1.7; }
@media (max-width: 1100px) { .flow.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .flow.four { grid-template-columns: 1fr; } }