/* Layout: one column on narrow screens, two from 820px (see the end of this sheet). The name and a few words, then six tabs. The first three are the generator's own kinds of
   sound; the other three are the Solfeggio tones, the instruments and the brainwave states. Each tab is a part
   of its own, with its own controls and its own Play bar: choosing a tab changes what is shown and what plays. */
:root {
  /* single night-sky look, by choice: the page stays dark in every viewer theme */
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  /* one hue for each tab */
  --k-pure: #E3A0BE;
  --k-bin: #B7A2FF;
  --k-iso: #5FD3C0;
  --k-sf: #F2B84B;
  --k-in: #F5A46B;
  --k-bw: #7FA0FF;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
body {
  background: radial-gradient(900px 420px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
.app {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eyebrow { margin: 0; }
h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
.app > header .lede { margin: 0; color: var(--muted); max-width: 56ch; }
.app > header .lede + .lede { margin-top: 8px; }

/* the six tabs, three to a row */
.ktabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ktab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--k);
  cursor: pointer;
}
/* the Brainwaves tab: the full name on wider screens; on a phone only its first word ("Ondes", "Ondas"),
   so it stays on one line beside the other tabs. The screen it opens carries the full name. */
.ktab .ksub { margin-left: 0.28em; }
html[lang="en"] .ktab .ksub { display: none; }
@media (max-width: 560px) { #ktab-bw .ksub { display: none; } }
/* on a phone, the full name of the tab that is open, under the tabs (on a computer it heads the left column) */
.tabname2 { display: flex; align-items: center; gap: 9px; margin: 2px 0 -4px; color: var(--k, var(--ink)); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.tabname2::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
@media (min-width: 820px) { .tabname2 { display: none; } }
.ktab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k); flex: none; }
.ktab[aria-selected="true"] { background: color-mix(in srgb, var(--k) 16%, var(--surface-2)); border-color: var(--k); font-weight: 600; }
/* a ring round the dot of the tab whose sound is playing */
.ktab.live::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 35%, transparent); }
.ktab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 380px) { .ktab { gap: 5px; padding: 10px 2px; font-size: 0.8rem; } }
@media (max-width: 340px) { .ktab { gap: 4px; font-size: 0.72rem; } .ktab::before { width: 6px; height: 6px; } }

/* each tab's part is its own column; a part may open with a few words of its own */
.screen { display: flex; flex-direction: column; gap: 16px; }
.parthead { display: flex; flex-direction: column; gap: 8px; }
.parthead .lede { margin: 0; color: var(--muted); max-width: 56ch; }

.fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); }
.legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   /* small enough that the longest translation stays clearly shorter than the company name */
  color: var(--muted);
  text-align: center;
}
.legal p { margin: 0; }
.legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}
/* ---------- gen: its own styles, confined to it ---------- */
#scr-gen {
  
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  --scope-bg: #050817;
  --scope-grid: #182043;
  --scope-trace: #E3A0BE;
  --scope-trace-2: #F2B84B;
  
  --tone-3: #5FD3C0;
  --tone-4: #B7A2FF;
  --tone-5: #9DB4FF;
  --tone-6: #7FD68A;
  --scope-label: #8D99C0;
  --c-pure: #E3A0BE;
  --c-bin: #B7A2FF;
  --c-iso: #5FD3C0;
  --mode: var(--c-pure);
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
#scr-gen[data-mode="pure"] { --mode: var(--c-pure); --scope-trace: #E3A0BE; }
#scr-gen[data-mode="bin"] { --mode: var(--c-bin); --scope-trace: #B7A2FF; }
#scr-gen[data-mode="iso"] { --mode: var(--c-iso); --scope-trace: #5FD3C0; }
#scr-gen {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#scr-gen header { display: flex; flex-direction: column; gap: 4px; }
#scr-gen .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#scr-gen h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
#scr-gen .lede { margin: 0; color: var(--muted); max-width: 56ch; }
#scr-gen .lede + .lede { margin-top: 8px; }
#scr-gen .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#scr-gen .label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#scr-gen button { font: inherit; color: inherit; cursor: pointer; }
#scr-gen button:focus-visible, #scr-gen .seg input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#scr-gen .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#scr-gen .tab {
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.92rem;
}
#scr-gen .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--tab-c);
}
#scr-gen .tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tab-c); flex: none; }
#scr-gen .tab[data-mode="pure"] { --tab-c: var(--c-pure); }
#scr-gen .tab[data-mode="bin"] { --tab-c: var(--c-bin); }
#scr-gen .tab[data-mode="iso"] { --tab-c: var(--c-iso); }
#scr-gen .tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--tab-c) 16%, var(--surface-2));
  border-color: var(--tab-c);
  font-weight: 600;
}
#scr-gen .engine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mode);
}
#scr-gen .engine::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mode); }
#scr-gen .engine small { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#scr-gen .modeinfo { margin: -4px 0 0; color: var(--muted); min-height: 3em; max-width: 56ch; }
#scr-gen .scope {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--scope-bg);
  border: 1px solid var(--line);
}
#scr-gen .scope canvas { display: block; width: 100%; height: 180px; }
#scr-gen .scope[data-view="cym"] canvas { height: min(calc(100vw - 32px), 356px); }
#scr-gen .viewrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: -6px; }
#scr-gen .viewrow .seg label { padding: 6px 10px; font-size: 0.84rem; }
#scr-gen .viewrow .seg svg.sq { width: 14px; height: 14px; }
#scr-gen .scope .tag {
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scope-label);
  pointer-events: none;
}
#scr-gen .scope .tag.l { left: 12px; }
#scr-gen .scope .tag.r { right: 12px; }
#scr-gen .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#scr-gen .dot.l { background: var(--scope-trace); }
#scr-gen .dot.r { background: var(--scope-trace-2); margin-left: 6px; }
#scr-gen .param { display: flex; flex-direction: column; gap: 10px; }
#scr-gen .readout { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#scr-gen .readout input {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.8rem, 9vw, 2.6rem);
  line-height: 1.1;
  width: 8.6ch;
  min-width: 0;
  padding: 0 0 2px;
  color: var(--mode);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
#scr-gen .readout input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-bottom-color: transparent; }
#scr-gen .readout .unit { font-family: var(--font-mono); font-size: 1.15rem; color: var(--muted); }
#scr-gen .noteline { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); min-height: 1.4em; overflow-wrap: anywhere; }
#scr-gen input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; height: 28px; }
#scr-gen .ticks { position: relative; height: 1.1em; margin-top: -6px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
#scr-gen .ticks span { position: absolute; top: 0; white-space: nowrap; }
#scr-gen .nudge-grid { display: grid; gap: 6px; }
#scr-gen .nudge {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 9px 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#scr-gen .nudge:active { transform: translateY(1px); }
#scr-gen .seg { display: flex; flex-wrap: wrap; gap: 6px; }
#scr-gen .seg input { position: absolute; opacity: 0; pointer-events: none; }
#scr-gen .seg label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}
#scr-gen .seg input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#scr-gen .mode-seg label svg { color: var(--mode); }
#scr-gen .mode-seg input:checked + label {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
  color: var(--ink);
}
#scr-gen .param input[type="range"], #scr-gen #gen-depth { accent-color: var(--mode); }
#scr-gen .seg svg { width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#scr-gen .slidrow { display: flex; align-items: center; gap: 12px; }
#scr-gen .slidrow output { font-family: var(--font-mono); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
#scr-gen .notice {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.88rem;
}
#scr-gen .notice b { font-weight: 600; }
#scr-gen .preset-group { display: flex; flex-direction: column; gap: 8px; }
#scr-gen .presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
#scr-gen .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  min-width: 0;
}
#scr-gen .chip b { font-family: var(--font-mono); font-weight: 500; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
#scr-gen .chip span { font-size: 0.72rem; color: var(--muted); }
#scr-gen .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
}
#scr-gen .chip[aria-pressed="true"] b { color: var(--mode); }
#scr-gen .dock {
  position: sticky;
  bottom: var(--dock-bottom, 0px);   
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-inline: -16px;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
#scr-gen .play {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
#scr-gen .play[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
#scr-gen .timeleft { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#scr-gen .now { color: var(--mode); }
#scr-gen .help { font-size: 0.88rem; color: var(--muted); }
#scr-gen .help summary { cursor: pointer; color: var(--ink); font-weight: 500; }
#scr-gen .help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#scr-gen .help p { margin: 8px 0 0; max-width: 60ch; }
#scr-gen .fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
#scr-gen .legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   
  color: var(--muted);
  text-align: center;
}
#scr-gen .legal p { margin: 0; }
#scr-gen .legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}
#scr-gen .tonerow { display: flex; flex-wrap: wrap; gap: 6px; }
#scr-gen .tonechip { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); overflow: hidden; }
#scr-gen .tonechip button { border: 0; background: transparent; }
#scr-gen .tonesel { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; font-family: var(--font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
#scr-gen .tonesel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone-c); flex: none; }
#scr-gen .tonedel { padding: 0 9px 1px; border-left: 1px solid var(--line) !important; color: var(--muted); font-size: 1.05rem; line-height: 1; }
#scr-gen .tonechip.on { background: color-mix(in srgb, var(--mode) 16%, var(--surface-2)); border-color: var(--mode); }
#scr-gen .tonechip.on .tonesel { color: var(--mode); }
#scr-gen .toneadd { padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; font-size: 0.9rem; color: var(--ink); }
#scr-gen .tonerow button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#scr-gen .mode[hidden] { display: none; }
@media (max-width: 380px) {
#scr-gen .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; }
}
/* the page already gives the column its width and margins */
#scr-gen { max-width: none; margin: 0; padding: 0; }
/* ---------- sf: its own styles, confined to it ---------- */
#scr-sf {
  
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  
  --t-174: #F28B82;
  --t-285: #F5A46B;
  --t-396: #F2B84B;
  --t-417: #D3CC5C;
  --t-528: #7FD68A;
  --t-639: #5FD3C0;
  --t-741: #6FB8F5;
  --t-852: #8F9BFF;
  --t-963: #C29BFF;
  --mode: var(--t-528);
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
#scr-sf {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#scr-sf header { display: flex; flex-direction: column; gap: 4px; }
#scr-sf .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#scr-sf h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
#scr-sf .lede { margin: 0; color: var(--muted); max-width: 56ch; }
#scr-sf .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#scr-sf .label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#scr-sf button { font: inherit; color: inherit; cursor: pointer; }
#scr-sf button:focus-visible, #scr-sf .seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
#scr-sf .hint { margin: -4px 0 0; font-size: 0.86rem; color: var(--muted); }
#scr-sf .tones { display: flex; flex-direction: column; gap: 6px; }
#scr-sf .tone {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: start;
  gap: 2px 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone-c);
  border-radius: 8px;
  text-align: left;
}
#scr-sf .tone .hz { grid-row: span 2; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--tone-c); font-variant-numeric: tabular-nums; white-space: nowrap; }
#scr-sf .tone .hz small { font-size: 0.7rem; color: var(--muted); }
#scr-sf .tone .name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 600; font-size: 0.98rem; }
#scr-sf .tone .syl { font-family: var(--font-mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }
#scr-sf .tone .what { font-size: 0.86rem; color: var(--muted); }
#scr-sf .tone[aria-pressed="true"] { background: color-mix(in srgb, var(--tone-c) 16%, var(--surface-2)); border-color: var(--tone-c); }
#scr-sf .tone[aria-pressed="true"] .what { color: var(--ink); }
#scr-sf .seg { display: flex; flex-wrap: wrap; gap: 6px; }
#scr-sf .seg input { position: absolute; opacity: 0; pointer-events: none; }
#scr-sf .seg label {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}
#scr-sf .seg input:checked + label { background: color-mix(in srgb, var(--mode) 16%, var(--surface-2)); border-color: var(--mode); }
#scr-sf .noteline { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); min-height: 2.8em; overflow-wrap: anywhere; }
#scr-sf input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; height: 28px; }
#scr-sf .slidrow { display: flex; align-items: center; gap: 12px; }
#scr-sf .slidrow output { font-family: var(--font-mono); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
#scr-sf .noteline { min-height: 1.4em; }
#scr-sf .dock {
  position: sticky;
  bottom: var(--dock-bottom, 0px);   
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-inline: -16px;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
#scr-sf .play {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
#scr-sf .play[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
#scr-sf .timeleft { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#scr-sf .now { color: var(--mode); }
#scr-sf .help { font-size: 0.88rem; color: var(--muted); }
#scr-sf .help summary { cursor: pointer; color: var(--ink); font-weight: 500; }
#scr-sf .help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#scr-sf .help p { margin: 8px 0 0; max-width: 60ch; }
#scr-sf .fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
#scr-sf .legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   
  color: var(--muted);
  text-align: center;
}
#scr-sf .legal p { margin: 0; }
#scr-sf .legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}
@media (max-width: 380px) {
#scr-sf .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; }
}
/* the page already gives the column its width and margins */
#scr-sf { max-width: none; margin: 0; padding: 0; }
/* ---------- in: its own styles, confined to it ---------- */
#scr-in {
  
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  --scope-bg: #050817;
  --scope-grid: #182043;
  --scope-trace: #E3A0BE;
  --scope-trace-2: #F2B84B;
  --scope-label: #8D99C0;
  --c-pure: #E3A0BE;
  --c-bin: #B7A2FF;
  --c-iso: #5FD3C0;
  --mode: var(--c-pure);
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
#scr-in[data-mode="pure"] { --mode: var(--c-pure); --scope-trace: #E3A0BE; }
#scr-in[data-mode="bin"] { --mode: var(--c-bin); --scope-trace: #B7A2FF; }
#scr-in[data-mode="iso"] { --mode: var(--c-iso); --scope-trace: #5FD3C0; }
#scr-in {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#scr-in header { display: flex; flex-direction: column; gap: 4px; }
#scr-in .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#scr-in h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
#scr-in .lede { margin: 0; color: var(--muted); max-width: 56ch; }
#scr-in .lede + .lede { margin-top: 8px; }
#scr-in .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#scr-in .label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#scr-in button { font: inherit; color: inherit; cursor: pointer; }
#scr-in button:focus-visible, #scr-in .seg input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#scr-in .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#scr-in .tab {
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.92rem;
}
#scr-in .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--tab-c);
}
#scr-in .tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tab-c); flex: none; }
#scr-in .tab[data-mode="pure"] { --tab-c: var(--c-pure); }
#scr-in .tab[data-mode="bin"] { --tab-c: var(--c-bin); }
#scr-in .tab[data-mode="iso"] { --tab-c: var(--c-iso); }
#scr-in .tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--tab-c) 16%, var(--surface-2));
  border-color: var(--tab-c);
  font-weight: 600;
}
#scr-in .engine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mode);
}
#scr-in .engine::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mode); }
#scr-in .engine small { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#scr-in .modeinfo { margin: -4px 0 0; color: var(--muted); min-height: 3em; max-width: 56ch; }
#scr-in .scope {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--scope-bg);
  border: 1px solid var(--line);
}
#scr-in .scope canvas { display: block; width: 100%; height: 180px; }
#scr-in .scope[data-view="cym"] canvas { height: min(calc(100vw - 32px), 356px); }
#scr-in .viewrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: -6px; }
#scr-in .viewrow .seg label { padding: 6px 10px; font-size: 0.84rem; }
#scr-in .viewrow .seg svg.sq { width: 14px; height: 14px; }
#scr-in .scope .tag {
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scope-label);
  pointer-events: none;
}
#scr-in .scope .tag.l { left: 12px; }
#scr-in .scope .tag.r { right: 12px; }
#scr-in .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#scr-in .dot.l { background: var(--scope-trace); }
#scr-in .dot.r { background: var(--scope-trace-2); margin-left: 6px; }
#scr-in .param { display: flex; flex-direction: column; gap: 10px; }
#scr-in .readout { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#scr-in .readout input {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.8rem, 9vw, 2.6rem);
  line-height: 1.1;
  width: 8.6ch;
  min-width: 0;
  padding: 0 0 2px;
  color: var(--mode);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
#scr-in .readout input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-bottom-color: transparent; }
#scr-in .readout .unit { font-family: var(--font-mono); font-size: 1.15rem; color: var(--muted); }
#scr-in .noteline { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); min-height: 1.4em; overflow-wrap: anywhere; }
#scr-in input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; height: 28px; }
#scr-in .ticks { position: relative; height: 1.1em; margin-top: -6px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
#scr-in .ticks span { position: absolute; top: 0; white-space: nowrap; }
#scr-in .nudge-grid { display: grid; gap: 6px; }
#scr-in .nudge {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 9px 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#scr-in .nudge:active { transform: translateY(1px); }
#scr-in .seg { display: flex; flex-wrap: wrap; gap: 6px; }
#scr-in .seg input { position: absolute; opacity: 0; pointer-events: none; }
#scr-in .seg label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}
#scr-in .seg input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#scr-in .mode-seg label svg { color: var(--mode); }
#scr-in .mode-seg input:checked + label {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
  color: var(--ink);
}
#scr-in .param input[type="range"], #scr-in #depth { accent-color: var(--mode); }
#scr-in .seg svg { width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#scr-in .slidrow { display: flex; align-items: center; gap: 12px; }
#scr-in .slidrow output { font-family: var(--font-mono); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
#scr-in .notice {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.88rem;
}
#scr-in .notice b { font-weight: 600; }
#scr-in .preset-group { display: flex; flex-direction: column; gap: 8px; }
#scr-in .presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
#scr-in .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  min-width: 0;
}
#scr-in .chip b { font-family: var(--font-mono); font-weight: 500; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
#scr-in .chip span { font-size: 0.72rem; color: var(--muted); }
#scr-in .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
}
#scr-in .chip[aria-pressed="true"] b { color: var(--mode); }
#scr-in .dock {
  position: sticky;
  bottom: var(--dock-bottom, 0px);   
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-inline: -16px;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
#scr-in .play {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
#scr-in .play[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
#scr-in .timeleft { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#scr-in .now { color: var(--mode); }
#scr-in .help { font-size: 0.88rem; color: var(--muted); }
#scr-in .help summary { cursor: pointer; color: var(--ink); font-weight: 500; }
#scr-in .help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#scr-in .help p { margin: 8px 0 0; max-width: 60ch; }
#scr-in .fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
#scr-in .legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   
  color: var(--muted);
  text-align: center;
}
#scr-in .legal p { margin: 0; }
#scr-in .legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}
#scr-in .mode[hidden] { display: none; }
#scr-in { --c-tib: #F2B84B; --c-cry: #B7A2FF; --c-fork: #5FD3C0; --c-bell: #E3A0BE; }
#scr-in[data-mode="tib"] { --mode: var(--c-tib); --scope-trace: #F2B84B; }
#scr-in[data-mode="cry"] { --mode: var(--c-cry); --scope-trace: #B7A2FF; }
#scr-in[data-mode="fork"] { --mode: var(--c-fork); --scope-trace: #5FD3C0; }
#scr-in[data-mode="bell"] { --mode: var(--c-bell); --scope-trace: #E3A0BE; }
#scr-in .tab[data-mode="tib"] { --tab-c: var(--c-tib); }
#scr-in .tab[data-mode="cry"] { --tab-c: var(--c-cry); }
#scr-in .tab[data-mode="fork"] { --tab-c: var(--c-fork); }
#scr-in .tab[data-mode="bell"] { --tab-c: var(--c-bell); }
#scr-in .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#scr-in .stack { display: flex; flex-direction: column; gap: 14px; }
#scr-in .presets.wide { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
#scr-in .dockrow { display: flex; gap: 8px; }
#scr-in .dockrow .play { flex: 1; min-width: 0; }
#scr-in .damp {
  min-height: 54px;
  padding: 0 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 600;
}
@media (max-width: 380px) {
#scr-in .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; }
}
/* the page already gives the column its width and margins */
#scr-in { max-width: none; margin: 0; padding: 0; }
/* ---------- bw: its own styles, confined to it ---------- */
#scr-bw {
  
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  
  --c-delta: #7FA0FF;
  --c-theta: #B7A2FF;
  --c-alpha: #5FD3C0;
  --c-beta: #F2B84B;
  --c-gamma: #E3A0BE;
  --mode: var(--c-alpha);
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
#scr-bw[data-band="0"] { --mode: var(--c-delta); }
#scr-bw[data-band="1"] { --mode: var(--c-theta); }
#scr-bw[data-band="2"] { --mode: var(--c-alpha); }
#scr-bw[data-band="3"] { --mode: var(--c-beta); }
#scr-bw[data-band="4"] { --mode: var(--c-gamma); }
#scr-bw {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#scr-bw header { display: flex; flex-direction: column; gap: 4px; }
#scr-bw .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#scr-bw h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
#scr-bw .lede { margin: 0; color: var(--muted); max-width: 56ch; }
#scr-bw .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#scr-bw .label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#scr-bw button { font: inherit; color: inherit; cursor: pointer; }
#scr-bw button:focus-visible, #scr-bw .seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
#scr-bw .scale { display: flex; flex-direction: column; gap: 4px; }
#scr-bw .scalebar { position: relative; display: flex; gap: 2px; height: 14px; }
#scr-bw .scalebar span { min-width: 0; border-radius: 3px; background: var(--seg-c); opacity: 0.28; }
#scr-bw .scalebar span.on { opacity: 1; }
#scr-bw .scalebar i {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 20px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--bg);
}
#scr-bw .scaleticks { position: relative; height: 1.1em; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
#scr-bw .scaleticks span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
#scr-bw .scaleticks span:first-child { transform: none; }
#scr-bw .scaleticks span:last-child { transform: translateX(-100%); }
#scr-bw .tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
#scr-bw .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--tab-c);
}
#scr-bw .tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--tab-c) 16%, var(--surface-2));
  border-color: var(--tab-c);
  font-weight: 600;
}
#scr-bw .bandname {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mode);
}
#scr-bw .bandname small { font-family: var(--font-mono); font-weight: 400; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--muted); }
#scr-bw .ranges { display: flex; flex-direction: column; gap: 4px; }
#scr-bw .ranges p { margin: 0; font-size: 0.86rem; color: var(--muted); }
#scr-bw .ranges b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
#scr-bw .presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
#scr-bw .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  min-width: 0;
}
#scr-bw .chip b { font-family: var(--font-mono); font-weight: 500; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
#scr-bw .chip span { font-size: 0.72rem; color: var(--muted); }
#scr-bw .chip[aria-pressed="true"] { background: color-mix(in srgb, var(--mode) 16%, var(--surface-2)); border-color: var(--mode); }
#scr-bw .chip[aria-pressed="true"] b { color: var(--mode); }
#scr-bw .about {
  margin: 0;
  min-height: 3.4em;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mode);
  border-radius: 8px;
  font-size: 0.92rem;
}
#scr-bw .about b { font-family: var(--font-mono); font-weight: 500; color: var(--mode); white-space: nowrap; }
#scr-bw .seg { display: flex; flex-wrap: wrap; gap: 6px; }
#scr-bw .seg input { position: absolute; opacity: 0; pointer-events: none; }
#scr-bw .seg label {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}
#scr-bw .seg input:checked + label { background: color-mix(in srgb, var(--mode) 16%, var(--surface-2)); border-color: var(--mode); }
#scr-bw .noteline { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); min-height: 2.8em; overflow-wrap: anywhere; }
#scr-bw input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; height: 28px; }
#scr-bw .slidrow { display: flex; align-items: center; gap: 12px; }
#scr-bw .slidrow output { font-family: var(--font-mono); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
#scr-bw .dock {
  position: sticky;
  bottom: var(--dock-bottom, 0px);   
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-inline: -16px;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
#scr-bw .play {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
#scr-bw .play[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
#scr-bw .timeleft { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#scr-bw .now { color: var(--mode); }
#scr-bw .help { font-size: 0.88rem; color: var(--muted); }
#scr-bw .help summary { cursor: pointer; color: var(--ink); font-weight: 500; }
#scr-bw .help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#scr-bw .help p { margin: 8px 0 0; max-width: 60ch; }
#scr-bw .fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
#scr-bw .legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   
  color: var(--muted);
  text-align: center;
}
#scr-bw .legal p { margin: 0; }
#scr-bw .legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}
@media (max-width: 380px) {
#scr-bw .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; }
}
/* the page already gives the column its width and margins */
#scr-bw { max-width: none; margin: 0; padding: 0; }

/* top of the page: beside the title, the language drop-down (a flag). The title and the text under it run alongside it.
   Moving between pages is done from the bar along the bottom on phones and tablets, and from the bar across the top on computers (see the end of this sheet). */
.app > header { display: block; }
.app > header::after { content: ""; display: block; clear: both; }
.app > header h1 + .lede, .app > header .titleline + .lede { margin-top: 6px; }
.tools { float: right; display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px 14px; }
.langpick { position: relative; }
.langbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.langbtn[aria-expanded="true"] { border-color: var(--accent); }
/* the one line at the bottom of every page sits in the middle, over the company name */
.fineprint, #awScreen .fineprint { max-width: none; margin-inline: auto; text-align: center; }
/* a short line set beside the title */
.titleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.titleline .eyebrow { font-size: 0.64rem; letter-spacing: 0.06em; white-space: nowrap; }
.langpick svg { display: block; width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.langmenu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.langmenu button {
  display: flex;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.langmenu button:hover { background: var(--surface-2); }
.langmenu button[aria-selected="true"] { background: var(--surface-2); border-color: var(--accent); }
.langbtn:focus-visible, .langmenu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* longer words in other languages still fit the tabs on narrow phones */
@media (max-width: 380px) { .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; } }

/* ================= website format =================
   A bar across the top of every page: the mark and the name on the left, the flag in the right corner.
   On phones and tablets the pages run along the bottom, each a sign over its name; a play bar that sticks
   to the bottom of a page rests on top of them (--dock-bottom). On computers the pages move up into the
   bar across the top. */
:root { --nav-h: 56px; --tabbar-h: 60px; --dock-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
body { padding-top: var(--nav-h); padding-bottom: var(--tabbar-h); }

.topbar {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar-in { display: flex; align-items: center; gap: 10px; height: var(--nav-h); max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.brand { flex: none; display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border-radius: 8px; }
.brandmark { display: block; width: auto; height: 28px; overflow: visible; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.topbar .tools { flex: none; float: none; margin: 0 0 0 auto; }

/* the pages, along the bottom */
.navlinks {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--tabbar-h) - 1px);   /* with its top line, the bar is --tabbar-h tall */
  padding: 0 max(6px, calc(50% - 280px)) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.navlinks a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.navlinks a svg { display: block; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navlinks a:hover { color: var(--ink); }
.navlinks a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.navlinks a[aria-current="page"] svg { stroke-width: 2.1; }
.navlinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* a dot on Account says someone is signed in */
.navlinks a[data-in="true"]::after { content: ""; position: absolute; top: 7px; left: calc(50% + 6px); width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ok, #5FD3C0); }
/* six names side by side: smaller letters on narrower phones, so the longest (Générateur, Protocolos) still fit */
@media (max-width: 380px) { .navlinks { padding-inline: 2px; } .navlinks a { font-size: 0.64rem; letter-spacing: -0.01em; } }
@media (max-width: 340px) { .navlinks a { font-size: 0.58rem; } .navlinks a svg { width: 23px; height: 23px; } }

/* computers (a wide screen worked with a mouse or trackpad): the pages sit in the bar across the top */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root { --nav-h: 64px; --dock-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: 0; }
  .topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .topbar-in { gap: 14px; padding-inline: 32px; }
  .brandmark { height: 30px; }
  .topbar .tools { margin-left: 0; }
  .navlinks { position: static; display: flex; gap: 2px; height: auto; margin-left: auto; padding: 0; border: 0; background: none; }
  .navlinks a { flex-direction: row; gap: 8px; padding: 8px 13px; border-radius: 8px; font-size: 0.93rem; }
  .navlinks a svg { display: none; }
  .navlinks a:hover { background: var(--surface); }
  .navlinks a[aria-current="page"] { background: var(--surface-2); }
  .navlinks a:focus-visible { outline-offset: 3px; }
  .navlinks a[data-in="true"]::after { position: static; border: 0; }
}

.tabname { display: none; }

/* on narrow screens each part keeps its one column: the two groups made for the wide layout dissolve */
.g-left, .g-right { display: contents; }

/* the wave displays of the Solfeggio and Brainwaves parts, made like the generator's own */
#scr-sf, #scr-bw { --scope-bg: #050817; --scope-grid: #182043; --scope-label: #8D99C0; }
:is(#scr-sf, #scr-bw) .scope { position: relative; border-radius: 10px; overflow: hidden; background: var(--scope-bg); border: 1px solid var(--line); }
:is(#scr-sf, #scr-bw) .scope canvas { display: block; width: 100%; height: 180px; }
#scr-sf .scope[data-view="cym"] canvas { height: min(calc(100vw - 32px), 356px); }
:is(#scr-sf, #scr-bw) .scope .tag { position: absolute; top: 10px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--scope-label); pointer-events: none; }
:is(#scr-sf, #scr-bw) .scope .tag.l { left: 12px; }
:is(#scr-sf, #scr-bw) .scope .tag.r { right: 12px; }
#scr-sf .viewrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: -6px; }
#scr-sf .viewrow .seg label { gap: 8px; padding: 6px 10px; font-size: 0.84rem; }
#scr-sf .viewrow .seg svg { width: 24px; height: 12px; fill: none; stroke: var(--mode); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#scr-sf .viewrow .seg svg.sq { width: 14px; height: 14px; }

@media (min-width: 820px) {
  body { background: radial-gradient(1400px 520px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg); }
  .app { max-width: 1200px; padding-inline: clamp(20px, 3vw, 32px); padding-block: 40px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); row-gap: 0; align-items: start; --stick: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px); }

  /* the two columns: the words open the left one and the six tabs open the right one; under each, the
     group of the part on show (its top margin is the height of what stands above it, measured by the page) */
  .app > header { grid-column: 1; grid-row: 1; }
  .app > .ktabs { grid-column: 2; grid-row: 1; }
  .app > :is(#scr-gen, #scr-sf, #scr-in, #scr-bw):not([hidden]) { display: contents; }
  .app .g-left, .app .g-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; grid-row: 1; }
  .app .g-left { grid-column: 1; margin-top: calc(var(--head-h, 260px) + 14px); }
  .app .g-right { grid-column: 2; margin-top: calc(var(--ktabs-h, 104px) + 20px); }
  .app > .fineprint { grid-column: 1 / -1; grid-row: 2; margin-top: 56px; }
  .app > .legal { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }

  .app > header h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); letter-spacing: -0.02em; }
  .app > header h1 + .lede { margin-top: 14px; }
  .app > header .lede { max-width: 50ch; font-size: 1.04rem; line-height: 1.6; }
  .app > header .lede + .lede { margin-top: 10px; }
  .tabname { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; color: var(--k, var(--ink)); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
  .tabname::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
  .app :is(#scr-gen, #scr-in) .g-left .modeinfo { margin: 0; max-width: 50ch; min-height: 0; font-size: 1.04rem; line-height: 1.6; }

  .ktabs { gap: 8px; }
  .ktab { padding: 13px 6px; font-size: 0.95rem; }

  /* on the left the wave display stands larger and Play sits right under it, no longer a bar */
  .app :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .g-left .dock { position: static; margin: 0; padding: 0; border: 0; background: none; }
  .app :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .g-left .scope canvas { height: 260px; }
  .app :is(#scr-gen, #scr-sf, #scr-in) .g-left .scope[data-view="cym"] canvas { height: clamp(260px, calc(100vh - 310px - var(--dock-bottom, 0px)), 470px); }
  .app :is(#scr-gen, #scr-sf) .g-left .viewrow { margin-bottom: -4px; }
}
/* once the words have scrolled away, the wave display and Play stay in view (on screens tall enough to hold them) */
@media (min-width: 820px) and (min-height: 800px), (min-width: 1024px) and (min-height: 740px) and (hover: hover) and (pointer: fine) {
  .app .g-left { position: sticky; top: var(--stick); }
}

/* ---------- protocols of the classic Generator ---------- */
#scr-gen .protos { margin-top: 6px; border-top: 1px solid var(--line, rgba(143,208,255,.16)); padding-top: 12px; }
#scr-gen .protos > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(143,208,255,.18)); background: rgba(255,255,255,.03); font-weight: 600; }
#scr-gen .protos > summary::-webkit-details-marker { display: none; }
#scr-gen .protos > summary::after { content: '+'; font-family: var(--font-mono); color: var(--muted); }
#scr-gen .protos[open] > summary::after { content: '−'; }
#scr-gen .protos > summary em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: .8rem; color: var(--mode); }
#scr-gen .protos > .noteline { margin: 10px 2px 4px; }
#scr-gen .protos .pgroup { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
#scr-gen .protos .pnote { margin: 0 0 2px; font-size: .78rem; color: var(--muted); }
#scr-gen .protos .plist { display: flex; flex-direction: column; gap: 5px; }
#scr-gen .protos .prow { display: grid; grid-template-columns: minmax(64px, auto) 1fr; gap: 12px; align-items: start; text-align: left; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line, rgba(143,208,255,.14)); background: rgba(255,255,255,.025); color: inherit; font: inherit; cursor: pointer; }
#scr-gen .protos .prow:hover { border-color: color-mix(in srgb, var(--mode) 50%, transparent); }
#scr-gen .protos .prow[aria-pressed="true"] { border-color: var(--mode); background: color-mix(in srgb, var(--mode) 14%, transparent); }
#scr-gen .protos .prow b { font-family: var(--font-mono); font-weight: 500; font-size: .9rem; color: var(--mode); white-space: nowrap; font-variant-numeric: tabular-nums; }
#scr-gen .protos .prow b small { font-size: .68rem; margin-left: 3px; color: var(--muted); }
#scr-gen .protos .prow span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#scr-gen .protos .prow strong { font-weight: 600; font-size: .9rem; }
#scr-gen .protos .prow i { font-style: normal; font-size: .78rem; color: var(--muted); }
#scr-gen .protos .prow { grid-template-columns: minmax(56px, 32%) minmax(0, 1fr); }
#scr-gen .protos .prow b { white-space: normal; overflow-wrap: anywhere; }