/* Caller Index: one field terminal, built on his picture.
   Every surface is a pixel plate from assets/ui (drawn by tools/drawui.mjs) stretched with
   border-image on the cell grid of the reference: stroke 1 cell, chamfer 2 cells, no radius,
   no gradient, no shadow. Desktop cell 6 px, phone cell 3 px, both rastered, never scaled. */

@font-face {
  font-family: "Departure Mono";
  src: url("../assets/font/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Pixeloid";
  src: url("../assets/font/PixeloidSans-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Pixeloid";
  src: url("../assets/font/PixeloidSans.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}

:root {
  --ink: #5ae74b;
  --plate: #5dc769;   /* the exact green his machine stands on */
  --dim: #2f7a33;
  --dimmer: #245c27;
  --knock: #0b2410;
  --panel: #172b22;
  --deep: #11201a;
  --ground: #11241e;
  --pale: #b9f2b4;
  --warn: #e7d24b;

  --slice-frame: 24;
  --slice-panel: 24;
  --slice-well: 12;
  --slice-key: 12;
  --slice-tab: 18;
  --slice-field: 30;
  --w-frame: 24px;
  --w-panel: 24px;
  --w-well: 12px;
  --w-key: 12px;
  --w-tab: 18px;
  --w-field: 30px;

  --pad: 30px;
  --gap: 24px;
  --ui: "";
  --stripe: url("../assets/ui/stripe.png");
  --stripe-panel: url("../assets/ui/stripe-panel.png");

  --t-body: 22px;
  --t-line: 33px;
  --t-label: 22px;
  --t-head: 30px;
  --t-big: 60px;
}

* { box-sizing: border-box; }
html { background: var(--ground); overflow-x: clip; }
body {
  margin: 0;
  background: var(--ground) var(--stripe) repeat;
  color: var(--pale);
  font: 400 var(--t-body)/var(--t-line) "Departure Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
  -webkit-font-smoothing: none;
}
img { max-width: 100%; height: auto; image-rendering: pixelated; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--t-line); overflow-wrap: anywhere; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the world behind the glass ---------------------------------------- */
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.world-plate {
  position: absolute; inset: -8%;
  background: var(--ground) url("../assets/img/world.png") center / cover no-repeat;
  filter: blur(18px) saturate(0.7) brightness(0.52);
  opacity: 0.85;
  animation: drift 96s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(1.04); } to { transform: translate3d(2%, 1%, 0) scale(1.1); } }

/* ---- the device -------------------------------------------------------- */
.device {
  position: relative;
  margin: 18px;
  padding: calc(var(--pad) + 24px) var(--pad) calc(var(--pad) + 24px);
  border: var(--w-frame) solid transparent;
  border-image: url("../assets/ui/frame.png") var(--slice-frame) / var(--w-frame) / 0 stretch;
  background: rgba(13, 32, 25, 0.86);
  min-height: calc(100vh - 36px);
}
.notch {
  position: absolute;
  z-index: 2;
  height: 56px;
  padding: 0 28px;
  background: var(--ground);
  color: var(--dim);
  font-size: 22px;   /* his frame labels are about two thirds of the body text */
  line-height: 56px;
  white-space: nowrap;
}
.notch i { font-style: normal; color: var(--dimmer); margin-left: 18px; }
.notch-tl { top: -16px; left: 44px; color: var(--ink); }
.notch-bl { bottom: -16px; left: 44px; }
.notch-br { bottom: -16px; right: 44px; }

.deck { display: grid; grid-template-columns: minmax(0, 1fr) 26%; gap: var(--gap); align-items: start; }
.column { display: flex; flex-direction: column; min-width: 0; }

/* ---- tabs -------------------------------------------------------------- */
.tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: -6px; position: relative; z-index: 2; }
.tab {
  border: var(--w-tab) solid transparent;
  border-bottom-width: 0;
  border-image: url("../assets/ui/tab-off.png") var(--slice-tab) fill / var(--w-tab) var(--w-tab) 0 / 0 stretch;
  padding: 0 22px 18px;
  justify-content: center;
  font: 700 var(--t-label)/1 "Pixeloid", "Departure Mono", monospace;
  color: var(--ink);
  letter-spacing: 0.06em;
  min-height: 92px;
  display: flex; align-items: center;
}
.tab:hover { color: var(--pale); }
.tab[aria-current="page"] {
  border-image-source: url("../assets/ui/tab-on.png");
  color: var(--knock);
}
.tab:focus-visible { outline: 6px solid var(--pale); outline-offset: -6px; }

/* ---- the panel --------------------------------------------------------- */
.body {
  border: var(--w-panel) solid transparent;
  border-image: url("../assets/ui/panel.png") var(--slice-panel) / var(--w-panel) / 0 stretch;
  background: var(--panel) var(--stripe-panel) repeat;
  padding: var(--pad);
  min-height: 56vh;
  position: relative;
}
.head {
  font: 700 var(--t-head)/1.2 "Pixeloid", monospace;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: 0.02em;
}
.lede { max-width: 62ch; color: var(--pale); overflow-wrap: anywhere; }
.label {
  font: 700 var(--t-label)/1.3 "Pixeloid", monospace;
  color: var(--ink);
  margin: 36px 0 12px;
  letter-spacing: 0.05em;
}
.note { color: var(--plate); max-width: 62ch; overflow-wrap: anywhere; }
.empty { color: var(--dim); }
.mono { font-family: "Departure Mono", monospace; overflow-wrap: anywhere; }
.num {
  font: 700 var(--t-head)/1 "Pixeloid", monospace;
  color: var(--dim);
  display: block;
  min-width: 2.5ch;
}

/* ---- rows, wells, cards ------------------------------------------------ */
.rows { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 0; }
.row {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline;
  border: var(--w-well) solid transparent;
  border-image: url("../assets/ui/well.png") var(--slice-well) / var(--w-well) / 0 stretch;
  background: var(--deep);
  padding: 14px 20px;
  min-width: 0;
}
.row .k { color: var(--dim); overflow-wrap: anywhere; }
.row .v { color: var(--pale); text-align: right; min-width: 0; overflow-wrap: anywhere; }
/* an address that has to wrap reads left aligned; a short value is sized by its own text, so this
   never pulls a one line value away from the right edge of its row */
.row .v.mono { text-align: left; }
.row .v.up { color: var(--ink); }
.row .v.down { color: var(--warn); }

.well {
  border: var(--w-well) solid transparent;
  border-image: url("../assets/ui/well.png") var(--slice-well) / var(--w-well) / 0 stretch;
  background: var(--deep);
  padding: 16px 22px;
  min-width: 0;
}
.card {
  border: var(--w-panel) solid transparent;
  border-image: url("../assets/ui/panel-dim.png") var(--slice-panel) / var(--w-panel) / 0 stretch;
  background: var(--deep);
  padding: 24px;
  margin: 30px 0 0;
}
.card-head { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; }
.card-head .label { margin: 0; }
.card-head .value { font: 700 var(--t-head)/1 "Pixeloid", monospace; color: var(--pale); }

/* ---- keys -------------------------------------------------------------- */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: var(--w-key) solid transparent;
  border-image: url("../assets/ui/key.png") var(--slice-key) / var(--w-key) / 0 stretch;
  background: var(--deep);
  color: var(--ink);
  font: 700 var(--t-label)/1 "Pixeloid", monospace;
  letter-spacing: 0.05em;
  padding: 14px 22px;
  min-height: 72px;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none; appearance: none;
}
.key:hover { background: #16311f; color: var(--pale); }
.key:active { border-image-source: url("../assets/ui/key-on.png"); background: var(--ink); color: var(--knock); }
.key:focus-visible { outline: 6px solid var(--pale); outline-offset: -6px; }
.key[disabled], .key[aria-disabled="true"] {
  border-image-source: url("../assets/ui/key-dim.png");
  color: var(--dimmer); cursor: not-allowed; background: transparent;
}
.key.on { border-image-source: url("../assets/ui/key-on.png"); background: var(--ink); color: var(--knock); }
.key.small { min-height: 60px; padding: 10px 28px; }
.key.mark img { image-rendering: auto; }
.key.mark { flex-direction: column; gap: 10px; min-height: 118px; }
.key.mark img { height: 28px; width: auto; }
.key[aria-disabled="true"] img { opacity: 0.35; }
.keys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---- fields ------------------------------------------------------------ */
.field-row { display: block; min-width: 0; }
.field {
  display: block;
  border: var(--w-field) solid transparent;
  border-image: url("../assets/ui/field.png") var(--slice-field) / var(--w-field) / 0 stretch;
  background: var(--deep);
  min-width: 0;
}
.field input {
  display: block; width: 100%;
  background: transparent; border: 0; outline: 0;
  color: var(--pale);
  font: 400 var(--t-body)/var(--t-line) "Departure Mono", monospace;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  min-height: 44px;
}
.field input::placeholder { color: var(--dim); opacity: 1; }
.field:focus-within { border-image-source: url("../assets/ui/field.png"); background: #16352a; }

/* ---- the call console -------------------------------------------------- */
.console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "field quota call" "state state state";
  gap: 18px;
  align-items: center;
  margin-top: var(--gap);
  border: var(--w-panel) solid transparent;
  border-image: url("../assets/ui/panel.png") var(--slice-panel) / var(--w-panel) / 0 stretch;
  background: var(--panel) var(--stripe-panel) repeat;
  padding: 24px;
}
.console-field { grid-area: field; }
.quota { grid-area: quota; display: flex; gap: 6px; }
.quota span {
  display: block; width: 36px; height: 72px;
  border: var(--w-key) solid transparent;
  border-image: url("../assets/ui/key-dim.png") var(--slice-key) / var(--w-key) / 0 stretch;
}
.quota span.left { border-image-source: url("../assets/ui/key-on.png"); background: var(--ink); }
.key-wide { grid-area: call; min-width: 280px; }
.console-state { grid-area: state; color: var(--dim); margin: 0; }
.console-state.bad { color: var(--warn); }
.console-state.good { color: var(--ink); }

/* ---- the rail ---------------------------------------------------------- */
.rail { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.slab {
  border: var(--w-panel) solid transparent;
  border-image: url("../assets/ui/slab.png") var(--slice-panel) / var(--w-panel) / 0 stretch;
  background: var(--plate);
  padding: 12px;
  display: block;
}
.slab img { display: block; width: 100%; height: auto; }
.name-plate {
  position: relative;
  border: var(--w-panel) solid transparent;
  border-image: url("../assets/ui/name.png") var(--slice-panel) / var(--w-panel) / 0 stretch;
  background: var(--deep);
  padding: 14px 24px;
  text-align: center;
}
.name-plate span { font: 700 var(--t-head)/1.2 "Pixeloid", monospace; color: var(--ink); letter-spacing: 0.08em; }
.name-plate::before, .name-plate::after {
  content: ""; position: absolute; top: 50%; margin-top: -6px;
  width: 6px; height: 12px; background: url("../assets/ui/ear.png") center / 100% 100% no-repeat;
}
.name-plate::before { left: -6px; }
.name-plate::after { right: -6px; }

.id-panel {
  border: var(--w-panel) solid transparent;
  border-image: url("../assets/ui/panel.png") var(--slice-panel) / var(--w-panel) / 0 stretch;
  background: var(--panel) var(--stripe-panel) repeat;
  padding: var(--pad);
}
.id-panel .label:first-child { margin-top: 0; }
.id-panel .well.mint { display: block; word-break: break-all; color: var(--ink); line-height: 30px; }
.id-panel .well.mint.empty-state { color: var(--dimmer); }
.id-panel .key { width: 100%; margin-top: 12px; }
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; margin-top: 18px; }
.links .key { width: 100%; margin-top: 0; font-size: var(--t-body); padding: 14px 24px; }
.pot-row { margin-top: 24px; }

/* ---- lists ------------------------------------------------------------- */
.list { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.call-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px 24px;
  border: var(--w-well) solid transparent;
  border-image: url("../assets/ui/well.png") var(--slice-well) / var(--w-well) / 0 stretch;
  background: var(--deep);
  padding: 16px 22px;
  align-items: center;
  min-width: 0;
}
.call-row .who { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.call-row .what { color: var(--pale); min-width: 0; overflow-wrap: anywhere; }
.call-row .x { font: 700 var(--t-label)/1 "Pixeloid", monospace; text-align: right; color: var(--pale); }
.call-row .x.up { color: var(--ink); }
.call-row .x.down { color: var(--warn); }
.call-row .sub { color: var(--dim); display: block; }
.call-row.own { border-image-source: url("../assets/ui/panel-dim.png"); }
.rank-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 24px; align-items: center; }
.rank-row .rank { font: 700 var(--t-head)/1 "Pixeloid", monospace; color: var(--dim); min-width: 2.5ch; }
.rank-row.first { border-image-source: url("../assets/ui/key-on.png"); background: var(--ink); color: var(--knock); }
.rank-row.first .rank, .rank-row.first .who, .rank-row.first .x, .rank-row.first .sub { color: var(--knock); }
a.rank-row:hover, a.call-row:hover { background: #16352a; }
a.rank-row.first:hover { background: #6ff95e; }

/* ---- rules strip, steps, how ------------------------------------------- */
.rules, .split { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 36px 0 0; }
.rules .k, .split .k { display: block; color: var(--dim); }
.rules .v, .split .v { display: block; color: var(--pale); }
.steps { display: flex; flex-direction: column; gap: 6px; margin-top: 36px; }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 30px; align-items: start;
  border: var(--w-well) solid transparent;
  border-image: url("../assets/ui/well.png") var(--slice-well) / var(--w-well) / 0 stretch;
  background: var(--deep);
  padding: 24px;
}
.step .label { margin-top: 0; }
.step > .key { grid-column: 3; align-self: center; margin: 0; }
.step .step-body > .key { margin-top: 18px; }
.step.done { border-image-source: url("../assets/ui/panel-dim.png"); }
.step.done .num { color: var(--ink); }
.step[hidden] { display: none; }
.well.code { font: 700 var(--t-head)/1.2 "Pixeloid", monospace; color: var(--ink); margin: 18px 0; letter-spacing: 0.08em; text-align: center; padding: 22px 34px; }
.field-row + .key { margin-top: 18px; }

.how { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 6px; }
.how-step {
  display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 30px; align-items: center;
  border: var(--w-well) solid transparent;
  border-image: url("../assets/ui/well.png") var(--slice-well) / var(--w-well) / 0 stretch;
  background: var(--deep);
  padding: 24px;
}
.how-step img { display: block; width: 100%; }
.how-step .label { margin: 6px 0 12px; }

/* ---- the week ---------------------------------------------------------- */
.pot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 30px;
  border: var(--w-well) solid transparent;
  border-image: url("../assets/ui/well.png") var(--slice-well) / var(--w-well) / 0 stretch;
  background: var(--deep);
  padding: 24px 30px;
}
.pot-figure { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; min-width: 0; }
.big { font: 700 var(--t-big)/1 "Pixeloid", monospace; color: var(--ink); }
.big-sm { font: 700 var(--t-head)/1 "Pixeloid", monospace; color: var(--pale); margin: 0; }
.unit { font: 700 var(--t-head)/1 "Pixeloid", monospace; color: var(--dim); }
.pot-side .k { color: var(--dim); display: block; }
.calc { margin-top: 36px; }
.slider-row { display: block; margin: 18px 0; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 54px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 30px; background: var(--deep) url("../assets/ui/stripe.png") repeat; border: 6px solid var(--dim); }
input[type="range"]::-moz-range-track { height: 30px; background: var(--deep) url("../assets/ui/stripe.png") repeat; border: 6px solid var(--dim); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 54px; margin-top: -18px; background: var(--ink) url("../assets/ui/key-on.png") center / 100% 100% no-repeat; border: 0; }
input[type="range"]::-moz-range-thumb { width: 36px; height: 54px; background: var(--ink) url("../assets/ui/key-on.png") center / 100% 100% no-repeat; border: 0; border-radius: 0; }
input[type="range"]:focus-visible { outline: 6px solid var(--pale); outline-offset: 4px; }

.ticket { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 30px;
  border: var(--w-panel) solid transparent;
  border-image: url("../assets/ui/panel.png") var(--slice-panel) / var(--w-panel) / 0 stretch;
  background: var(--deep); padding: 24px; }
.ticket-art { display: block; width: 100%; }
.ticket-text p { color: var(--ink); margin: 0; }

/* ---- the printing line in the slab ------------------------------------- */
.tape {
  border: var(--w-well) solid transparent;
  border-image: url("../assets/ui/well.png") var(--slice-well) / var(--w-well) / 0 stretch;
  background: var(--knock);
  color: var(--ink);
  padding: 16px 24px;
  font-size: var(--t-body);
  line-height: 30px;
  min-height: 122px;
  overflow-wrap: anywhere;
}
.tape b { font-weight: 400; color: var(--plate); }
.nb { white-space: nowrap; }
.caret { display: inline-block; width: 12px; height: 22px; background: var(--ink); vertical-align: -3px; animation: blink 1.1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- widths ------------------------------------------------------------ */
/* His picture sets the scale: its body text is about 1.6 percent of the screen height, which is 33 px
   on a 1080 screen, three times Departure Mono's own 11 px grid so every stem lands on a pixel. That
   scale needs the room of a wide screen; under it the same page steps down a size. */
@media (min-width: 1701px) {
  :root { --t-body: 33px; --t-line: 44px; --t-label: 36px; --t-head: 45px; --t-big: 72px; --pad: 30px; }
  .tab { padding: 0 30px 18px; font-size: 27px; }   /* his tab labels sit a step under the body text */
}
@media (max-width: 1500px) {
  :root { --pad: 24px; }
  .deck { grid-template-columns: minmax(0, 1fr) 24%; }
  .tab { padding: 0 18px 12px; }
}
@media (max-width: 1100px) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .rail { display: contents; }
  .slab { order: 1; }
  .tape { order: 2; }
  .name-plate { order: 3; }
  .column { order: 4; }
  .id-panel { order: 5; }
  .deck { gap: var(--gap); }
  .how-step { grid-template-columns: minmax(0, 1fr); }
  .rules, .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slab img { max-height: 46vh; width: auto; margin: 0 auto; }
}
@media (max-width: 760px) {
  :root {
    --slice-frame: 12; --slice-panel: 12; --slice-well: 6; --slice-key: 6; --slice-tab: 9; --slice-field: 15;
    --w-frame: 12px; --w-panel: 12px; --w-well: 6px; --w-key: 6px; --w-tab: 9px; --w-field: 15px;
    --pad: 20px; --gap: 16px; --t-head: 27px; --t-label: 22px; --t-big: 45px;
  }
  .device { margin: 10px; padding: calc(var(--pad) + 40px) var(--pad) calc(var(--pad) + 30px); min-height: calc(100vh - 20px); border-image-source: url("../assets/ui/frame-sm.png"); }
  .body, .console, .id-panel { border-image-source: url("../assets/ui/panel-sm.png"); }
  .card, .step.done, .call-row.own { border-image-source: url("../assets/ui/panel-dim-sm.png"); }
  .row, .well, .call-row, .step, .how-step { border-image-source: url("../assets/ui/well-sm.png"); }
  .key { border-image-source: url("../assets/ui/key-sm.png"); min-height: 60px; padding: 10px 16px; }
  .key:active, .key.on, .rank-row.first, .quota span.left { border-image-source: url("../assets/ui/key-on-sm.png"); }
  .key[disabled], .key[aria-disabled="true"], .quota span { border-image-source: url("../assets/ui/key-dim-sm.png"); }
  .tab { border-image-source: url("../assets/ui/tab-off-sm.png"); min-height: 56px; padding: 0 12px 8px; }
  .tab[aria-current="page"] { border-image-source: url("../assets/ui/tab-on-sm.png"); }
  .field { border-image-source: url("../assets/ui/field-sm.png"); }
  .name-plate { border-image-source: url("../assets/ui/name-sm.png"); }
  .slab { border-image-source: url("../assets/ui/slab-sm.png"); }
  .notch { height: 52px; line-height: 52px; padding: 0 24px; font-size: 22px; }
  .notch-tl { left: 20px; top: -14px; }
  .notch-bl { left: 20px; bottom: -14px; }
  .notch-br { right: 20px; bottom: -14px; }
  .notch i { display: none; }
  .tabs { gap: 4px; grid-template-columns: 1fr 1fr; }
  .tab { justify-content: center; padding: 0 24px 10px; }
  .console { grid-template-columns: minmax(0, 1fr); grid-template-areas: "field" "quota" "call" "state"; }
  .key-wide { min-width: 0; width: 100%; }
  .quota { justify-content: space-between; }
  .quota span { width: 100%; height: 48px; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .call-row { grid-template-columns: minmax(0, 1fr) auto; }
  .call-row .what { grid-column: 1 / -1; }
  .pot { grid-template-columns: minmax(0, 1fr); }
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .links { grid-template-columns: 1fr; }
  .well.code { padding: 18px 24px; }
  .tape { min-height: 150px; }
  .rules, .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  :root { --t-head: 22px; --t-label: 22px; --pad: 16px; --t-big: 27px; }
  .pot { padding: 18px 36px; }
  .well.code { font-size: 22px; padding: 16px 20px; word-break: break-all; }
  .step { padding: 18px; }
  .notch-br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .world-plate { animation: none; }
  .caret { animation: none; }
  * { scroll-behavior: auto; }
}
[hidden] { display: none !important; }