:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #15233c;
  background: #edf3fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; }

.explorer {
  width: min(100% - 2rem, 1440px);
  margin: 1.5rem auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #d8e3ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 40px #15325c12;
}

.page-header { position: relative; text-align: center; }

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-bottom: .5rem;
}

.header-control {
  min-width: 2.8rem;
  min-height: 2.8rem;
  padding: .5rem .8rem;
  border: 1px solid #829dc4;
  border-radius: 10px;
  background: #f8fbff;
  color: #162c61;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.header-control:hover { background: #e7efff; }
.header-control:focus-visible { outline: 3px solid #a14900; outline-offset: 3px; }

#help-dialog, #picker-dialog {
  width: min(calc(100% - 2rem), 38rem);
  max-height: min(85dvh, 44rem);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #829dc4;
  border-radius: 16px;
  background: #fff;
  color: #15233c;
  line-height: 1.5;
  overflow: auto;
}

#help-dialog::backdrop, #picker-dialog::backdrop { background: #15233cbf; }
#help-dialog h3 { margin: 1.25rem 0 .4rem; font-size: 1rem; }
#help-dialog p { margin: .5rem 0 1rem; }
#help-close { margin-top: .5rem; }

h1 {
  margin: 0 0 .2rem;
  color: #162c61;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.2;
}

.subtitle {
  margin: 0 0 1.25rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
}

h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.depth-selector {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0;
  border: 0;
  text-align: center;
}

.depth-selector legend {
  width: 100%;
  margin-bottom: .65rem;
  font-weight: 700;
}

.depth-options { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }

/* The colour count sits beside the depth buttons without moving them off centre. */
.depth-row { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }

.depth-count {
  position: absolute;
  top: 50%;
  left: calc(100% + 1.75rem);
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateY(-50%);
}

.depth-option { position: relative; cursor: pointer; }

.depth-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.depth-option span {
  display: grid;
  min-width: 4.5rem;
  min-height: 2.8rem;
  padding: .5rem .8rem;
  place-items: center;
  border: 1px solid #a9bddb;
  border-radius: 10px;
  background: #f8fbff;
  font-weight: 700;
}

.depth-option input:checked + span { color: #fff; background: #194baf; border-color: #194baf; }
.depth-option input:focus-visible + span,
.bit-switch:focus-visible { outline: 3px solid #a14900; outline-offset: 3px; }

.result, .channels, .bits-panel {
  padding: 1.2rem;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  text-align: center;
}

.diagram { position: relative; }
.diagram > section { position: relative; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wiring {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.wire {
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: .65;
}

.wire-r { stroke: #c32b46; }
.wire-g { stroke: #25804b; }
.wire-b { stroke: #2863be; }

.result { background: #f6f9fe; }
.result h2 { margin-bottom: .65rem; }

.pixel-swatch {
  display: block;
  position: relative;
  z-index: 3;
  width: clamp(128px, 19vw, 176px);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 0;
  border: 5px solid #fff;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 2px 16px #1d315637;
  cursor: pointer;
}

.pixel-swatch:focus-visible, .hue-ring:focus-visible, .picker-range:focus-visible {
  outline: 3px solid #a14900;
  outline-offset: 4px;
}

#picker-dialog {
  width: min(calc(100% - 2rem), 30rem);
  max-height: 85vh;
  max-height: 85svh;
  max-height: 85dvh;
  padding: 0;
  overflow: hidden;
}
#picker-dialog[open] { display: flex; flex-direction: column; }
.picker-body {
  min-height: 0;
  padding: clamp(1rem, 3vw, 2rem);
  overflow-y: auto;
}
.picker-footer {
  flex: none;
  padding: .75rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid #dbe5f2;
}
#picker-instructions { margin: 0 0 1.25rem; }
.hue-ring {
  position: relative;
  width: min(100%, 16rem);
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  touch-action: none;
  cursor: crosshair;
}
.hue-ring::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: #fff;
}
.hue-marker {
  position: absolute;
  left: var(--marker-x, 50%);
  top: var(--marker-y, 8%);
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #15233c;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.picker-control { display: flex; justify-content: space-between; gap: .5rem; font-weight: 650; }
.picker-control output { font-variant-numeric: tabular-nums; }
.picker-range { display: block; width: 100%; min-height: 2.75rem; margin: 0 0 .5rem; accent-color: #194baf; }
.picker-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
#picker-preview { width: 2rem; height: 2rem; border: 1px solid #829dc4; border-radius: 6px; }

.colour-editor { position: relative; z-index: 3; width: min(100%, 30rem); margin: 1rem auto 0; text-align: center; }
.colour-editor #edit-hint { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.4; }
/* Fields are sized for their values (3 digits, #RRGGBB) and centred with their labels. */
.rgb-editor { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem .9rem; }
.colour-editor label {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: .2rem;
  font-size: .85rem;
  font-weight: 650;
  white-space: nowrap;
}
.colour-editor input {
  width: calc(6ch + .8rem + 2px);
  min-width: 0;
  min-height: 2.75rem;
  padding: .35rem .4rem;
  border: 1px solid #829dc4;
  border-radius: 6px;
  background: #fff;
  color: #15233c;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.colour-editor #edit-hex { width: calc(9.5ch + .8rem + 2px); }
.colour-editor input:focus-visible { outline: 3px solid #a14900; outline-offset: 2px; }
.colour-editor input[aria-invalid="true"] { border: 2px solid #a11b2c; }
.hex-editor { width: fit-content; margin: .5rem auto 0; }
.edit-error { min-height: 1.25em; margin: .35rem 0 0; color: #9b1628; font-size: .85rem; font-weight: 700; }

.channels, .bits-panel { margin-top: 2rem; }
.channels h2 {
  position: relative;
  z-index: 3;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  padding: 0 .5rem;
  background: #fff;
}

.channel-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.3rem, 2vw, 1rem);
  width: min(100%, 780px);
  margin: 0 auto;
}

.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  margin: 0;
  padding: .75rem .3rem;
  border: 1px solid #d4e0ee;
  border-radius: 10px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}

.channel > span, .channel > strong { position: relative; z-index: 3; }
.channel > strong { padding: 0 .25rem; background: #fff; font-size: 1.1rem; }
.bulb {
  position: relative;
  display: block;
  width: clamp(2.5rem, 7vw, 4.25rem);
  height: clamp(4rem, 10vw, 6.25rem);
}

.bulb-glass {
  position: absolute;
  inset: 0 0 30%;
  border: 2px solid #61738b;
  border-radius: 48% 48% 42% 42%;
  background: radial-gradient(circle at 35% 25%, var(--bulb-shine, transparent) 0 6%, transparent 35%),
    var(--bulb-colour, transparent);
  box-shadow: 0 0 var(--glow-size, 5px) var(--bulb-glow, transparent);
}

.bulb-glass::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 19%;
  bottom: -12%;
  left: 29%;
  border: 2px solid #61738b;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: var(--bulb-colour, transparent);
}

.bulb-filament {
  position: absolute;
  left: 32%;
  top: 47%;
  width: 36%;
  height: 12%;
  border: 2px solid #8a6223;
  border-top: 0;
  border-radius: 0 0 50% 50%;
}

.bulb-filament::before, .bulb-filament::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 1px;
  height: 1.3rem;
  background: #bac7d5;
}

.bulb-filament::before { left: 15%; transform: rotate(-12deg); }
.bulb-filament::after { right: 15%; transform: rotate(12deg); }

.bulb-base {
  position: absolute;
  top: 77%;
  left: 27%;
  width: 46%;
  height: 20%;
  border: 1px solid #465366;
  border-radius: 2px 2px 6px 6px;
  background: repeating-linear-gradient(0deg, #526071 0 2px, #c0cad5 2px 5px);
}

.bulb-base::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 25%;
  width: 50%;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: #233147;
}

.channel-red { border-top: 3px solid #c72c39; }
.channel-green { border-top: 3px solid #238048; }
.channel-blue { border-top: 3px solid #226ad0; }

.switch-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  width: 100%;
  margin: 0 auto;
}

.switch-groups:has(.bit-group:only-child) {
  display: flex;
  justify-content: center;
}

.bit-group {
  min-width: 0;
  margin: 0;
  padding: .6rem .35rem;
  border: 1px solid #d4e0ee;
  border-radius: 12px;
}

.bit-group legend { position: relative; z-index: 3; padding: 0 .3rem; background: #fff; font-weight: 700; }
.bit-group[data-channel="r"] { border-top: 3px solid #c72c39; }
.bit-group[data-channel="g"] { border-top: 3px solid #238048; }
.bit-group[data-channel="b"] { border-top: 3px solid #226ad0; }

.bit-grid {
  display: grid;
  grid-template-columns: repeat(var(--bit-count), minmax(0, 1fr));
  gap: .4rem;
}

.bit-group[data-width="8"] .bit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bit-switch {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  min-height: 6.8rem;
  padding: .35rem;
  border: 1px solid #a9bddb;
  border-radius: 10px;
  background: #f5f8fc;
  color: #172b4f;
  font: inherit;
  cursor: pointer;
}

.bit-switch:hover { border-color: #194baf; }
.bit-switch[aria-checked="true"] { background: #e6efff; border-color: #426fbd; }
.bit-digit { font-weight: 800; font-variant-numeric: tabular-nums; }

.switch-track {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 2.7rem;
  border: 2px solid #61738b;
  border-radius: 7px;
  background: #cbd7e5;
}

.switch-lever {
  position: absolute;
  inset: auto 2px 2px;
  height: 1.05rem;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px #0005;
}

.bit-switch[aria-checked="true"] .switch-lever { inset: 2px 2px auto; background: #285cba; }
.bit-state {
  width: 100%;
  min-height: 2.8em;
  color: #a11b2c;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bit-switch[aria-checked="true"] .bit-state { color: #126333; }

/* Keep the pixel centred while placing its heading immediately above it. */
@media (min-width: 1000px) {
  .explorer { padding: 1.25rem; }
  .result { display: grid; grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr); align-items: center; gap: .5rem; }
  .result h2 { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .pixel-swatch { grid-column: 2; grid-row: 2; }
  .colour-editor { grid-column: 3; grid-row: 1 / 3; min-width: 0; margin: 0 auto; }
  .bits-panel { padding: 1rem .5rem; }
  .switch-groups { gap: .5rem; }
  .bit-group { padding: .6rem .25rem; }
  .bit-group[data-width="8"] .bit-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .bit-grid { gap: .2rem; }
  .bit-switch { min-height: 8.3rem; padding: .35rem .1rem; }
  .bit-state { min-height: 4.2em; }
}

@media (max-width: 760px) {
  /* No room beside the buttons: show the colour count directly below them. */
  .depth-count { position: static; width: fit-content; margin: .6rem auto 0; transform: none; }
  .bit-group[data-width="8"] .bit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .explorer { width: min(100% - 1rem, 1040px); margin: .5rem auto; padding: .85rem; }
  .result, .channels, .bits-panel { padding: .85rem .5rem; }
  .switch-groups { grid-template-columns: minmax(0, 1fr); width: min(100%, 28rem); justify-items: center; }
  .bit-group { width: calc(100% - 2.5rem); }
  .bit-group[data-width="8"] .bit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .channel { padding: .55rem .1rem; font-size: .85rem; }
  .channel-values { gap: .3rem; }
}

@media (max-width: 380px) {
  .bit-grid { gap: .15rem; }
  .bit-group { padding: .4rem; }
  .bit-switch { padding: .25rem 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .switch-lever { transition: inset .16s ease, background-color .16s ease; }
  .bulb-glass { transition: background-color .16s ease, box-shadow .16s ease; }
}

/*
 * Colourful theme: child-friendly visual layer approved from the design mockup.
 * Visual properties only (colours, backgrounds, same-width borders, radii,
 * shadows and non-layout decorations), so every themed element keeps its box.
 * The pixel swatch, bulbs and wires are deliberately left untouched.
 */

:root {
  --ink: #2b1a3d;          /* main text, dark plum */
  --plum: #5a189a;         /* headings and selected states */
  --sun: #ffd23f;          /* sunny yellow */
  --sun-ink: #7a4b00;      /* text and borders on yellow */
  --sky: #e3f4ff;          /* channels panel */
  --sky-edge: #1f78b4;
  --lilac: #f1eaff;        /* switches panel */
  --lilac-edge: #7046c2;
  --coral: #ff8fab;
  --mint: #7ee0b5;
  --neutral: #f7f7f8;      /* frame around the pixel stays neutral */

  color: var(--ink);
  /* Soft confetti dots over a warm multi-colour gradient. */
  background:
    radial-gradient(circle, #ff8fab99 0 3px, transparent 3.5px) 0 0 / 140px 140px,
    radial-gradient(circle, #4cc9f099 0 3px, transparent 3.5px) 70px 40px / 140px 140px,
    radial-gradient(circle, #ffd23fcc 0 4px, transparent 4.5px) 30px 95px / 140px 140px,
    radial-gradient(circle, #7ee0b599 0 3px, transparent 3.5px) 105px 110px / 140px 140px,
    linear-gradient(135deg, #fff1c9 0%, #ffe0ec 45%, #dcf1ff 100%) fixed;
}

/* Main card: sticker look with an outer ring drawn by shadows (no layout). */
.explorer {
  border-color: #f2b705;
  border-radius: 32px;
  background: #fffdf9;
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px #ffd23f, 0 18px 40px #9b5de533;
}

/* Decorative "pixel" sticker in the empty top-left corner of the header. */
.page-header::before {
  content: "";
  position: absolute;
  top: .45rem;
  left: 0;
  width: 3.3rem;
  height: 1.1rem;
  border-radius: 6px;
  background: linear-gradient(90deg, #e63946 0 33.3%, #2a9d4b 33.3% 66.6%, #2563eb 66.6%);
  box-shadow: 0 0 0 3px #fff, 0 3px 0 4px #2b1a3d22;
  pointer-events: none;
}

h1, h2, .subtitle, .depth-selector legend {
  font-family: ui-rounded, "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
}

h1 { color: var(--plum); }
.subtitle { color: #c2185b; }

/* Header badges: round, bright, with a chunky sticker shadow. */
.header-control {
  border-radius: 999px;
  color: var(--ink);
}

#language-toggle {
  border-color: var(--sun-ink);
  background: var(--sun);
  color: #3a2600;
  box-shadow: 0 3px 0 var(--sun-ink);
}
#language-toggle:hover { background: #ffe27a; }

#help-open {
  border-color: #0b6e99;
  background: #9ee6ff;
  color: #053b52;
  box-shadow: 0 3px 0 #0b6e99;
}
#help-open:hover { background: #c4f0ff; }

#help-close, #picker-close {
  border-color: var(--lilac-edge);
  background: var(--lilac);
  color: var(--plum);
  box-shadow: 0 3px 0 var(--lilac-edge);
}
#help-close:hover, #picker-close:hover { background: #e4d6ff; }

/* Colour depth: candy pills, each with its own flavour. */
.depth-selector legend { color: var(--plum); }

.depth-option span {
  border-color: #6b5a86;
  border-radius: 999px;
  color: var(--ink);
  box-shadow: 0 3px 0 #6b5a8655;
}
.depth-option:nth-child(1) span { background: #fff1a8; }
.depth-option:nth-child(2) span { background: #c9f5dc; }
.depth-option:nth-child(3) span { background: #d3ebff; }
.depth-option:nth-child(4) span { background: #ffd6e5; }
.depth-option:hover span { border-color: var(--plum); }

/* Colour count: a lilac sticker; informational, so no hover or pressed look. */
/* Plain figure, not a pill, so it is not mistaken for a depth button. */
.depth-count { color: var(--plum); }

/* Selected depth: dark fill, inner yellow ring and a tick badge, not colour alone. */
.depth-option input:checked + span {
  border-color: #3c0f66;
  background: var(--plum);
  color: #fff;
  box-shadow: inset 0 0 0 3px var(--sun), 0 3px 0 #3c0f66;
}
.depth-option input:checked + span::after {
  content: "\2713" / "";
  position: absolute;
  top: -.5rem;
  right: -.4rem;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid #3c0f66;
  border-radius: 50%;
  background: var(--sun);
  color: #3a2600;
  font-size: .8rem;
  line-height: 1.05rem;
  text-align: center;
  pointer-events: none;
}

/* Panels: rounder corners, accent borders and offset sticker shadows. */
.result, .channels, .bits-panel { border-radius: 24px; }

.result {
  border-color: #c99700;
  background: var(--neutral);
  box-shadow: 0 6px 0 #ffd23f;
}
.result h2 { color: var(--sun-ink); }

.channels {
  border-color: var(--sky-edge);
  background: var(--sky);
  box-shadow: 0 6px 0 #9ed8ff;
}
.channels h2 {
  border-radius: 999px;
  color: #0b4f7a;
  box-shadow: 0 0 0 2px var(--sky-edge);
}

.bits-panel {
  border-color: var(--lilac-edge);
  background: var(--lilac);
  box-shadow: 0 6px 0 #cbb6f5;
}

/* RGB editor fields. */
.colour-editor input {
  border-color: #6b5a86;
  border-radius: 10px;
  color: var(--ink);
}

/* Channel cards stay white (neutral behind the bulbs); accents stay R/G/B. */
.channel {
  border-color: #b9c6d6;
  border-radius: 16px;
  box-shadow: 0 3px 0 #1f78b422;
}
.channel-red { border-top-color: #c72c39; }
.channel-green { border-top-color: #238048; }
.channel-blue { border-top-color: #226ad0; }
.channel-red > span:first-child { color: #a11b2c; }
.channel-green > span:first-child { color: #146b38; }
.channel-blue > span:first-child { color: #1d4fa8; }

.bit-group {
  border-color: #c4b5e3;
  border-radius: 18px;
  background: #fff;
}
.bit-group legend { border-radius: 999px; }
.bit-group[data-channel="r"] legend { color: #a11b2c; }
.bit-group[data-channel="g"] legend { color: #146b38; }
.bit-group[data-channel="b"] legend { color: #1d4fa8; }
.bit-group[data-channel="all"] { border-top-color: #6b5a86; }

/* Switches: calm when OFF, warm and "lit" when ON; same dimensions. */
.bit-switch {
  border-color: #7a87a3;
  border-radius: 14px;
  background: #f4f6fb;
  color: var(--ink);
  box-shadow: 0 3px 0 #7a87a355;
}
.bit-switch:hover { border-color: var(--plum); }

.bit-switch[aria-checked="true"] {
  border-color: #b86200;
  background: #fff3c4;
  box-shadow: 0 0 0 2px #ffd23f, 0 0 16px #ffb70099, 0 3px 0 #b86200;
}

.switch-track { border-radius: 10px; background: #d9dfeb; }
.switch-lever { border-radius: 7px; }
.bit-switch[aria-checked="true"] .switch-track { border-color: #8a4b00; background: #ffe08a; }
.bit-switch[aria-checked="true"] .switch-lever {
  background: #ff8a00;
  box-shadow: 0 0 8px #ffb700, 0 1px 3px #0005;
}

/* Dialogs: rainbow top stripe on white, purple-tinted backdrop. */
#help-dialog, #picker-dialog {
  border-color: var(--lilac-edge);
  border-radius: 24px;
  color: var(--ink);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px #ffd23f;
}
#help-dialog {
  background:
    linear-gradient(90deg, #ff6b6b, #ffd23f, #06d6a0, #4cc9f0, #9b5de5) top / 100% 8px no-repeat local,
    #fff;
}
#picker-dialog .picker-body {
  background: linear-gradient(90deg, #ff6b6b, #ffd23f, #06d6a0, #4cc9f0, #9b5de5) top / 100% 8px no-repeat local;
}
#help-dialog::backdrop, #picker-dialog::backdrop { background: #2d1b4ebf; }
#help-dialog h2, #picker-dialog h2 { color: var(--plum); }
.picker-footer { border-top-color: #e4d6ff; background: #faf7ff; }
.picker-range { accent-color: var(--plum); }

/* Optional playful lift; motion only when the user has not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .header-control, .depth-option span { transition: transform .15s ease, background-color .15s ease; }
  .header-control:hover, .depth-option:hover span { transform: translateY(-2px); }
}

/* Footer: copyright and a GitHub link after all the content, so nothing above it moves. */
.app-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .35rem;
  margin-top: 1.25rem;
  color: var(--plum);
  font-size: .9rem;
  font-weight: 650;
}
.source-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--plum);
}
.source-link:hover { background: var(--lilac); }
.source-link:focus-visible { outline: 3px solid #a14900; outline-offset: 2px; }