/* Orrery homepage.
   Concept: a planetarium at night. The hero is always the night sky with the viewer window in it,
   the window itself is styled exactly like the app (same panels, same colours). Brass gold from the
   icon's orbit is the one accent; the orbit ellipse is the recurring mark beside headings.
   Display type is a book serif (Palatino on Windows and macOS), like an instrument maker's catalogue;
   body text is Segoe UI Variable. No external fonts or requests. */

:root {
  --night: #0d0c1f;
  --night-2: #17163a;
  --night-ink: #eceaf8;
  --night-ink-2: #a9a6c9;
  --night-line: #2c2a55;

  --page: #f6f2e9;
  --surface: #fffdf8;
  --ink: #17152e;
  --ink-2: #57536f;
  --line: #ddd5c4;
  --accent: #8a5a00;
  --brass: #ffc75f;
  --brass-2: #ffe3a3;
  --brass-ink: #1a1200;
  --cyan: #5fd0ff;
  --violet: #8a4dff;
  --ok: #1d7a55;
  --no: #b03a2e;
  --code-bg: #15142c;
  --code-ink: #e3e1f5;

  /* the app's own viewer colours, identical in both themes */
  --app-bg: #1e1f24;
  --app-ink: #e8e8e8;
  --app-panel: rgba(0, 0, 0, 0.55);

  --display: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", "URW Palladio L", Georgia, serif;
  --text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #100f24;
    --surface: #17163a;
    --ink: #eceaf8;
    --ink-2: #a9a6c9;
    --line: #2c2a55;
    --accent: #ffc75f;
    --ok: #4fd69c;
    --no: #ff8a7a;
    --code-bg: #0a0918;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1.0625rem/1.62 var(--text);
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }

code, kbd { font-family: var(--mono); font-size: 0.86em; }
:not(pre) > code {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  padding: 0.08em 0.35em;
  border-radius: 4px;
}
kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.05em 0.45em;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-bottom-width: 2px;
  border-radius: 5px;
  text-align: center;
  line-height: 1.4;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0; font-weight: 600; }
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  letter-spacing: -0.005em;
  max-width: 22ch;
  padding-top: 34px;
  background: url("assets/orbit.svg") left top / 72px auto no-repeat;
}
h3 { font-size: 1.28rem; }
p { margin: 0 0 1em; }
em { font-style: italic; }
q { quotes: "\201C" "\201D"; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--brass); color: var(--brass-ink);
  padding: 8px 14px; border-radius: 6px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- night (header and hero, always dark) ---------- */

.night {
  position: relative;
  isolation: isolate;
  color: var(--night-ink);
  background:
    radial-gradient(1200px 620px at 78% 38%, rgba(92, 124, 255, 0.22), transparent 62%),
    radial-gradient(900px 500px at 10% 0%, rgba(138, 77, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #0d0c1f 0%, #121130 70%, #100f24 100%);
  overflow: hidden;
}
.night a { color: var(--brass); }
.night :not(pre) > code { background: rgba(255, 255, 255, 0.08); }

/* a CSS-only star field: three layers of tiny radial gradients, tiled at different sizes */
.stars {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1px 1px at 140px 90px, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 90px 160px, rgba(255, 227, 163, 0.8), transparent 60%),
    radial-gradient(1px 1px at 230px 210px, rgba(185, 246, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 300px 50px, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 60px 260px, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: 320px 300px, 320px 300px, 410px 380px, 410px 380px, 530px 470px, 530px 470px;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  opacity: 0.85;
}
/* the night ends on a horizon arc, the orbit seen edge-on */
.night::after {
  content: "";
  position: absolute; left: -10%; right: -10%; bottom: -1px; height: 90px; z-index: -1;
  background: var(--page);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -1px 0 rgba(255, 199, 95, 0.45), 0 -18px 60px rgba(255, 199, 95, 0.08);
}

.top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--night-ink) !important; text-decoration: none;
  font: 600 1.35rem/1 var(--display);
}
.top nav { display: flex; gap: clamp(12px, 2.4vw, 28px); flex-wrap: wrap; }
.top nav a { color: var(--night-ink-2); text-decoration: none; font-size: 0.95rem; }
.top nav a:hover { color: var(--night-ink); text-decoration: underline; }
.top nav .nav-gh { color: var(--night-ink); font-weight: 600; }

.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px) var(--gutter) clamp(90px, 10vw, 130px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.kicker { font-size: 0.92rem; color: var(--night-ink-2); margin-bottom: 18px; }
.pill {
  display: inline-block; margin-right: 8px;
  padding: 1px 10px; border-radius: 999px;
  border: 1px solid var(--brass);
  color: var(--brass); font-weight: 600; font-size: 0.84rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  max-width: 13ch;
}
.hero h1 em { color: var(--brass); }
.lede { font-size: 1.15rem; color: var(--night-ink-2); margin: 24px 0 28px; max-width: 46ch; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.98rem/1 var(--text);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-2); text-decoration: none; }
.btn-primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink) !important; }
.btn-primary:hover { background: var(--brass-2); border-color: var(--brass-2); }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.22); color: var(--night-ink) !important; }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); }
.btn-small { min-height: 34px; padding: 0 14px; font-size: 0.88rem; }
.night .btn-small { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: var(--night-ink); }
.night .btn-small:hover { border-color: var(--brass); }

.facts {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 28px;
}
.facts li { display: flex; flex-direction: column; }
.facts b { font: 600 1.7rem/1.1 var(--display); color: var(--night-ink); }
.facts span { font-size: 0.86rem; color: var(--night-ink-2); }

/* ---------- the viewer window (mirrors the app) ---------- */

.window {
  margin: 0;
  border-radius: 10px;
  background: #202127;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 120px -30px rgba(92, 124, 255, 0.45);
  overflow: hidden;
}
.titlebar {
  height: 34px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 0 0 12px;
  background: #18191d;
  color: #c9cad1;
  font: 400 12px/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  user-select: none;
}
.titlebar .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wctl { display: flex; height: 100%; }
.wctl i { width: 46px; height: 100%; position: relative; }
.wctl i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; translate: -50% -50%; }
.wctl i:nth-child(1)::before { height: 1px; background: #c9cad1; }
.wctl i:nth-child(2)::before { height: 10px; border: 1px solid #c9cad1; }
.wctl i:nth-child(3)::before { height: 10px; background:
  linear-gradient(45deg, transparent calc(50% - 0.6px), #c9cad1 calc(50% - 0.6px), #c9cad1 calc(50% + 0.6px), transparent calc(50% + 0.6px)),
  linear-gradient(-45deg, transparent calc(50% - 0.6px), #c9cad1 calc(50% - 0.6px), #c9cad1 calc(50% + 0.6px), transparent calc(50% + 0.6px)); }

.viewport {
  position: relative;
  aspect-ratio: 16 / 10.5;
  background: var(--app-bg);
  color: var(--app-ink);
  font: 12px/1.4 "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.viewport:active { cursor: grabbing; }
.viewport:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; border-radius: 0; }
.viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.panel { background: var(--app-panel); border-radius: 6px; padding: 8px 10px; }
.v-info { position: absolute; top: 8px; left: 8px; max-width: 300px; white-space: pre-line; pointer-events: none; }
.v-info b { color: #fff; }
.v-err {
  position: absolute; left: 8px; right: 8px; bottom: 56px;
  background: rgba(160, 30, 30, 0.9); color: #fff;
  white-space: pre-wrap; max-height: 34%; overflow: auto;
}
.v-help { position: absolute; top: 8px; right: 8px; max-width: 34%; color: #9aa; font-size: 11px; text-align: right; pointer-events: none; }
.v-ctl {
  position: absolute; left: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: calc(100% - 16px);
  cursor: default;
}
.v-ctl button, .v-ctl select {
  background: #2a2c33; color: #eee; border: 1px solid #555; border-radius: 4px;
  padding: 3px 8px; font: inherit;
}
.v-ctl button { cursor: pointer; min-width: 30px; }
.v-ctl button:hover { background: #3a3d46; }
.v-ctl input[type="range"] { width: clamp(80px, 16vw, 200px); accent-color: var(--brass); }
.v-ctl label { display: inline-flex; align-items: center; gap: 4px; }
.v-ctl input[type="checkbox"] { accent-color: var(--brass); margin: 0; }
.v-time { font-variant-numeric: tabular-nums; min-width: 9.5em; }
.v-ctl select[data-demo-clips] { max-width: 170px; }

.v-fallback {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center; color: #b9bac4;
}
.v-fallback p { max-width: 40ch; margin: 0; font-size: 14px; }
.no-webgl .v-fallback { display: flex; }

.v-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--app-bg);
}
.v-loading[hidden] { display: none; }
.v-logo { position: relative; width: 96px; height: 96px; }
.v-logo img { position: absolute; inset: 14px; width: 68px; height: 68px; }
.v-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(255, 199, 95, 0.18); border-top-color: var(--brass);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.v-lname { font-size: 14px; color: #fff; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.v-drop {
  position: absolute; inset: 10px; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--brass); border-radius: 10px;
  background: rgba(13, 12, 31, 0.72);
  color: var(--brass-2); font: 600 18px/1.2 var(--display);
  pointer-events: none;
}
.v-drop[hidden] { display: none; }

.window figcaption {
  display: grid; gap: 10px;
  padding: 12px 14px 14px;
  background: #18191d;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #b4b5c0; font-size: 0.86rem; line-height: 1.5;
}
.window figcaption b { color: #fff; }
.window figcaption kbd { color: #e8e8e8; }
.own { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.own-note { font-size: 0.82rem; color: #8f909c; }
.own [hidden] { display: none; }

/* ---------- bands ---------- */

main { display: block; }
.band {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(52px, 7vw, 96px) var(--gutter);
  border-top: 1px solid var(--line);
}
main > .band:first-child { border-top: 0; padding-top: clamp(24px, 4vw, 48px); }
.intro { max-width: 70ch; font-size: 1.1rem; color: var(--ink-2); margin: 22px 0 36px; }
.aside { color: var(--ink-2); font-size: 0.95rem; max-width: 80ch; margin-top: 28px; }
.prose p { max-width: 62ch; }
.prose h2 { margin-bottom: 22px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.split-rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

.ledger, .bones {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
}
.ledger-title { font: 600 1.15rem/1.2 var(--display); margin-bottom: 14px; }
.ledger-foot { font-size: 0.9rem; color: var(--ink-2); margin: 14px 0 0; }

.overlay-key { margin: 0; display: grid; gap: 0; }
.overlay-key div { display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.overlay-key div:first-child { border-top: 0; }
.overlay-key dt { font-family: var(--mono); font-size: 0.85rem; padding-top: 2px; color: var(--accent); }
.overlay-key dd { margin: 0; font-size: 0.95rem; color: var(--ink-2); }

.keys { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 0.92rem; }
.keys kbd { margin-right: 6px; }

/* gallery of real app captures */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.shot { margin: 0; }
.shot-wide { grid-column: 1 / -1; }
.shot img { width: 100%; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.55); background: var(--app-bg); }
.shot figcaption { font-size: 0.92rem; color: var(--ink-2); margin-top: 10px; }

/* texture search: a ladder of steps joined by an orbit-gold rail */
.search {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  position: relative;
}
.search::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px;
  background: linear-gradient(90deg, var(--brass), color-mix(in srgb, var(--brass) 70%, var(--no)));
  opacity: 0.8;
}
.search li { position: relative; padding-right: 22px; }
.step {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--page);
  border: 2px solid var(--brass);
  font: 600 1.1rem/1 var(--display);
  color: var(--ink);
  margin-bottom: 14px;
}
.search h3 { font-size: 1.08rem; margin-bottom: 6px; }
.search p { font-size: 0.93rem; color: var(--ink-2); margin: 0; }
.search .miss .step { border-color: var(--no); color: var(--no); }

/* bone table */
.bones table { width: 100%; border-collapse: collapse; font-size: 0.9rem; table-layout: fixed; }
.bones th:nth-child(1) { width: 44%; }
.bones th:nth-child(2) { width: 30%; }
.bones th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 0.8rem; padding: 0 8px 8px 0; }
.bones td { padding: 9px 8px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.bones td code { background: none; padding: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.bones .key { font-family: var(--mono); font-size: 0.84rem; color: var(--accent); overflow-wrap: anywhere; }
.bones .key::before { content: "\2192\00a0"; color: var(--ink-2); }
.bones tr.drop td:last-child { color: var(--no); }
.bones tfoot td { border-top: 2px solid var(--line); padding-top: 12px; }
.bones input {
  width: 100%; min-width: 0;
  font: 0.85rem/1.3 var(--mono);
  padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--page); color: var(--ink);
}
.bones .try { color: var(--ink-2); font-size: 0.82rem; }

/* safety gate */
.gate { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.gate-col { padding: 24px 26px; }
.gate-col + .gate-col { border-left: 1px solid var(--line); }
.gate h3 { margin-bottom: 14px; }
.gate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gate li { position: relative; padding-left: 28px; font-size: 0.97rem; }
.gate li::before {
  position: absolute; left: 0; top: 0.1em;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.72rem/1 var(--text);
}
.gate .ok li::before { content: "\2713"; color: #fff; background: var(--ok); }
.gate .no li::before { content: "\2715"; color: #fff; background: var(--no); }

/* trio */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 52px); }
.trio h2 { font-size: 1.55rem; margin-bottom: 18px; padding-top: 30px; background-size: 60px auto; }
.trio p, .trio li { font-size: 0.97rem; color: var(--ink-2); }
.meter { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 0.95rem; }
.meter th { text-align: left; font-weight: 400; color: var(--ink-2); padding: 8px 10px 8px 0; white-space: nowrap; }
.meter td { padding: 8px 0; border-top: 1px solid var(--line); }
.meter tr:first-child td, .meter tr:first-child th { border-top: 0; }
.meter th { border-top: 1px solid var(--line); }
.meter b { color: var(--ink); }
.limits { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }

/* download */
.download h2 { margin-bottom: 30px; }
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dl { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; }
.dl h3 { margin-bottom: 12px; }
.dl .cta { margin: 16px 0 20px; }
.dl-sub { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
.steps { margin: 0 0 18px; padding-left: 1.3em; display: grid; gap: 6px; font-size: 0.97rem; }
pre {
  margin: 14px 0 16px;
  padding: 16px 18px;
  background: var(--code-bg); color: var(--code-ink);
  border-radius: 10px;
  overflow-x: auto;
  font: 0.86rem/1.6 var(--mono);
}

/* footer */
.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px;
  color: var(--ink-2); font-size: 0.92rem;
}
.foot p { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot p a + a { margin-left: 6px; }

/* privacy page */
.doc { max-width: 760px; margin: 0 auto; padding: 32px var(--gutter) 64px; }
.doc h1 { font-size: 2.6rem; margin-bottom: 26px; }
.doc h2 { font-size: 1.5rem; margin: 34px 0 12px; padding-top: 0; background: none; }
.plain-top { border-bottom: 1px solid var(--line); }
.plain-top .brand { color: var(--ink) !important; }

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 14ch; }
  .split, .split-rev { grid-template-columns: minmax(0, 1fr); }
  .split-rev > .prose { order: -1; }
  .search { grid-template-columns: 1fr; gap: 18px; }
  .search::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: linear-gradient(180deg, var(--brass), var(--no)); }
  .search li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 0; }
  .search .step { margin: 0; }
  .trio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .top nav a:not(.nav-gh) { display: none; }
  .gate, .dl-grid, .gallery { grid-template-columns: minmax(0, 1fr); }
  .gate-col + .gate-col { border-left: 0; border-top: 1px solid var(--line); }
  .viewport { aspect-ratio: 4 / 4.4; }
  .v-help { display: none; }
  .v-info { font-size: 11px; max-width: 70%; }
  .bones th:nth-child(3), .bones td:nth-child(3) { display: none; }
  .overlay-key div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-ring { animation-duration: 3s; }
}