/* Local system fonts and responsive, code-native diagrams. No remote assets. */
:root {
  --manual-mint: #6ce5d0;
  --manual-border: #363636;
}
[data-md-color-scheme="slate"] {
  color-scheme: dark;
  --md-default-bg-color: #171717;
  --md-default-fg-color: #d2dbe4;
  --md-default-fg-color--light: #acb9c7;
  --md-default-fg-color--lighter: #647789;
  --md-primary-fg-color: #161616;
  --md-primary-bg-color: #f1f1f1;
  --md-accent-fg-color: #6ce5d0;
  --md-typeset-a-color: #6ce5d0;
  --md-code-bg-color: #222222;
  --md-code-fg-color: #d9e3ec;
  --md-footer-bg-color: #131313;
  --md-footer-bg-color--dark: #0f0f0f;
}
body, input, button { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
code, pre { font-family: Consolas, "SFMono-Regular", monospace; }
.md-header { border-bottom: 1px solid var(--manual-border); box-shadow: none; }
.md-header__title { font-weight: 600; letter-spacing: .025em; }
.md-header__button.md-logo img { width: 1.65rem; height: 1.65rem; }
.md-grid { max-width: 78rem; }
.md-main__inner { margin-top: 1rem; }
.md-typeset { font-size: .8rem; line-height: 1.45; }
.md-typeset h1 { color: #f2f7fb; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 .75em; }
.md-typeset h2 { color: #edf3f8; font-weight: 600; letter-spacing: -.02em; margin: 1.5em 0 .55em; }
.md-typeset h3 { color: #e0e9f0; font-weight: 600; margin: 1.2em 0 .45em; }
/* Compact reading rhythm shared by every manual page. */
.md-typeset p, .md-typeset ul, .md-typeset ol { margin-top: .65em; margin-bottom: .65em; }
.md-typeset ul li, .md-typeset ol li { margin-bottom: .3em; }
.md-typeset li > p { margin-top: .35em; margin-bottom: .35em; }
.md-typeset table:not([class]) th, .md-typeset table:not([class]) td { padding: .65em 1em; }
.md-typeset .admonition, .md-typeset details { margin: .9em 0; }
.md-typeset hr { margin: 1.4em 0; }
.md-nav__link { margin-top: .45em; }
.md-typeset strong { color: #edf6fb; }
.md-typeset a:focus-visible { outline: 2px solid var(--manual-mint); outline-offset: 4px; }
.md-nav { font-size: .73rem; }
.md-nav--primary .md-nav__title { color: #f2f7fb; }
.md-nav__link--active { font-weight: 650; }
.md-sidebar--secondary { border-left: 1px solid var(--manual-border); }
.eyebrow { color: var(--manual-mint); font-size: .61rem; font-weight: 700; letter-spacing: .17em; margin: 0 0 .65rem; }
.manual-hero {
  padding: 1.25rem 1.5rem 0;
  border: 1px solid #414141;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at 90% 5%, #343434 0%, transparent 57%), #212121;
}
.md-typeset .manual-hero h1 { font-size: clamp(2rem, 4vw, 3.35rem); margin: 0 0 .75rem; }
.manual-hero > p:not(.eyebrow) { max-width: 37rem; color: #c2cfdb; }
.md-typeset .md-button { border-radius: 5px; padding: .56em 1em; font-size: .7rem; font-weight: 600; margin: .4rem .4rem .3rem 0; }
.md-typeset .md-button--primary { color: #102322; background: var(--manual-mint); border-color: var(--manual-mint); }
.md-typeset .md-button:hover { color: #0b1f1d; background: #e4e4e4; border-color: #a0f4e5; }
.curve-illustration { margin: .75rem -1.5rem 0; height: 6rem; }
.curve-illustration svg { width: 100%; height: 100%; }
.curve-grid { stroke: #31424a; stroke-width: 1; opacity: .5; }
.curve-primary { stroke: #6ce5d0; stroke-width: 2.5; }
.curve-secondary { stroke: #6087af; stroke-width: 1.5; opacity: .65; }
.curve-illustration circle { fill: #17222c; stroke: #a7f4e5; stroke-width: 2; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin: 1rem 0 1.2rem; }
.feature-card { padding: .75rem; border: 1px solid var(--manual-border); border-radius: 7px; background: #1e1e1e; }
.card-index { font-size: .57rem; font-weight: 700; letter-spacing: .12em; color: #88a5b8; margin-top: 0; }
.md-typeset .feature-card h3 { font-size: .93rem; margin: .75rem 0 .5rem; }
.feature-card p:last-child { font-size: .75rem; color: #b5c4d1; margin-bottom: 0; }
.reading-note { border-left: 3px solid var(--manual-mint); background: #232323; padding: .1rem 1rem; margin: 1.2rem 0 .75rem; font-size: .76rem; }
.md-typeset table:not([class]) { font-size: .74rem; border: 1px solid var(--manual-border); border-radius: 6px; background: #1d1d1d; }
.md-typeset table:not([class]) th { background: #282828; color: #eaf3f8; }
.md-typeset table:not([class]) td { border-top: 1px solid #333333; }
.md-typeset table:not([class]) tr:hover { background: #292929; }

/* Native 1200 x 800 layout: left 75%, right 25%. Rows follow resized(). */
.psy-workspace {
  display:grid; aspect-ratio:3 / 2; box-sizing:border-box;
  grid-template-columns:minmax(0,3fr) minmax(0,1fr);
  grid-template-rows:24fr 58fr 6fr 4fr 4fr 4fr;
  grid-template-areas:"scope side" "main side" "selector side" "switcher side" "program side" "console side";
  gap:3px; background:#131313; border:1px solid #444;
  padding:5px; border-radius:9px; margin:1rem 0;
}
.psy-workspace>div, .psy-side>div {
  min-width:0; min-height:0; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  gap:4px; background:#252525; border:1px solid #444;
  border-radius:3px; padding:6px 8px; font-size:.56rem;
}
.psy-workspace strong {color:#6ce5d0;font-size:.58rem;line-height:1.15}
.psy-workspace span {color:#b5c4d1;line-height:1.15}
.psy-scope {grid-area:scope}
.psy-main {grid-area:main;text-align:center}
.psy-workspace>.psy-side {
  grid-area:side; display:grid; justify-content:stretch; grid-template-columns:minmax(0,1fr); grid-template-rows:5fr 19fr 10fr 41fr 25fr;
  gap:2px; border:0; padding:0; background:transparent;
}
.psy-side>div {text-align:center;padding:2px;font-size:.53rem}
.psy-side .psy-side-space {border:0;background:#1b1b1b}
.psy-selector {grid-area:selector}
.psy-switcher {grid-area:switcher}
.psy-program {grid-area:program}
.psy-console {grid-area:console}
.psy-workspace :is(.psy-selector,.psy-switcher,.psy-program,.psy-console) {
  flex-direction:row; justify-content:flex-start; align-items:center;
  gap:8px; padding:1px 5px; white-space:nowrap;
}
.psy-workspace :is(.psy-selector,.psy-switcher,.psy-program,.psy-console) strong {flex-shrink:0;font-size:.5rem}
.psy-workspace :is(.psy-selector,.psy-switcher,.psy-program,.psy-console) span {font-size:.45rem;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px) {
  .psy-workspace {aspect-ratio:auto;min-height:410px;grid-template-rows:24fr 58fr 6fr 4fr 4fr 4fr;gap:2px;padding:3px}
  .psy-workspace strong {font-size:.5rem}
  .psy-workspace :is(.psy-selector,.psy-switcher,.psy-program,.psy-console) span {display:none}
  .psy-workspace :is(.psy-selector,.psy-switcher,.psy-program,.psy-console) strong {font-size:.43rem}
  .psy-side>div {padding:1px}
}

/* Native JUCE captures preserve the full-resolution source on click. */
.md-typeset .manual-capture {margin:1rem 0 1.4rem;text-align:left}
.manual-capture a {display:block;border:1px solid #444;border-radius:6px;overflow:hidden;background:#252525}
.manual-capture a:hover {border-color:#6ce5d0}
.manual-capture img {display:block;width:100%;height:auto;margin:0}
.md-typeset .manual-capture figcaption {text-align:left;font-size:.67rem;color:#a4b7c7;margin:.4rem 0;max-width:none;font-style:normal}
.manual-capture[data-capture-id="modulation-matrix"] {max-width:24rem}
.manual-capture[data-capture-id="recorder"] {max-width:24rem}

.manual-capture[data-capture-id="modulation-panel"] {max-width:18rem}

.manual-capture[data-capture-id="eq-cutoff"] {max-width:14rem}

.manual-capture[data-capture-id="dw-global"] {max-width:12rem}

.manual-capture[data-capture-id="recorder-fader-record"] {max-width:13rem}

/* Native menu beside its parameter reference, with a stacked mobile layout. */
.menu-reference {display:grid;grid-template-columns:minmax(160px, .8fr) minmax(0, 2fr);gap:1.1rem;align-items:start;margin:1rem 0 2rem}
.menu-reference .menu-picture {position:sticky;top:4rem;min-width:0}
.md-typeset .menu-reference .manual-capture {margin:0;max-width:100%}
.menu-reference .menu-parameters {min-width:0}
.md-typeset .menu-reference table:not([class]) {font-size:.67rem;display:table;width:100%;margin:0}
.md-typeset .menu-reference table:not([class]) th,.md-typeset .menu-reference table:not([class]) td {padding:.5em .65em}
.md-typeset .menu-reference table:not([class]) td:first-child {width:29%}
@media(max-width:760px) {
 .menu-reference {grid-template-columns:minmax(0,1fr);gap:.6rem}
 .menu-reference .menu-picture {position:static;max-width:22rem}
}

@media(min-width:761px) { .menu-reference.menu-wide {grid-template-columns:minmax(280px,1.2fr) minmax(0,1.6fr)} }

/* The TPT variant only needs the menu header through the Type row. */
.manual-capture[data-capture-id="menu-phase-tpt"] a {
  position:relative; aspect-ratio:462 / 382;
}
.manual-capture[data-capture-id="menu-phase-tpt"] img {
  position:absolute; top:0; left:0; width:100%; height:auto; max-height:none;
}