:root {
  --bg: #f5f4ef;
  --fg: #12141a;
  --neg: #1f6fd8;
  --muted: #676b73;
  --fs: clamp(17px, 0.8rem + 0.55vw, 24px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #06080c; --fg: #eef2f7; --neg: #3a8dff; --muted: #9aa1ab; color-scheme: dark; }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font: 500 var(--fs)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* --ink is the amplitude a piece of text gets in the wave field (1 = full). */
main { --ink: 1; position: relative; max-width: 50rem; margin: 0 auto; padding: 0 max(6vw, 22px) 30vh; }
section { padding-block: 14vh 0; }
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 0; }
h1 { font-size: clamp(60px, 11vw, 140px); line-height: 1; font-weight: 750; margin: 0 0 0.25em; }
h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; font-weight: 750; margin: 0 0 0.55em; }
h3 { font-size: 1.12em; font-weight: 700; margin: 0 0 0.15em; }
p { margin: 0.3em 0; }
.lede { font-size: 1.45em; font-weight: 600; }
.muted { --ink: 0.6; color: var(--muted); }
.entry { margin-bottom: 1.3em; }
.links { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; margin-top: 1.2em; }
a { color: var(--neg); text-decoration: underline; text-underline-offset: 0.18em; }
sub, sup { font-size: 0.65em; }
#field, .hud { display: none; }

/* Live mode: the canvas draws everything. The HTML stays on top, invisible but
   selectable, clickable, searchable and readable by screen readers. */
.live #field { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; }
.live main, .live main * { color: transparent; }
.live a { text-decoration: none; }
.live ::selection { background: color-mix(in srgb, var(--neg) 30%, transparent); color: transparent; }
.live a:focus-visible { outline: 2px solid var(--neg); outline-offset: 3px; border-radius: 3px; }

.live .hud {
  display: block; position: fixed; z-index: 1;
  left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px - 120px); pointer-events: none;   /* clear of the waves button */
  font: 500 11.5px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--muted);
}
@media (max-width: 560px) { .live .hud { display: none; } }

/* Switch between the wave field and the plain page, and the carrier wavelength. */
.controls {
  position: fixed; z-index: 2;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.knob {
  display: flex; align-items: center; gap: 8px;
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--muted);
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 999px;
  padding: 4px 12px;
}
.knob[hidden] { display: none; }
.knob input { width: 110px; margin: 0; accent-color: var(--neg); }
.knob output { min-width: 4.5ch; text-align: right; color: var(--fg); }
.mode {
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--fg); background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 999px;
  padding: 7px 12px; cursor: pointer;
}
.mode:hover { border-color: var(--neg); }
.mode:focus-visible { outline: 2px solid var(--neg); outline-offset: 2px; }