/* Cosmix map app. Same type, palette and 4px corners as the landing page. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --bg: #0a0a0c;
  --panel: #121317;
  --panel-2: #191b20;
  --line: #23262c;
  --line-warm: #3a3020;
  --text: #ece7de;
  --muted: #97918a;
  --navy: #003049;
  --accent: #f77f00;
  --amber: #fcbf49;
  --red: #d62828;
  --r: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 'Space Grotesk', system-ui, sans-serif;
  overflow: hidden;
  animation: page-in 0.45s ease-out;
}

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

button {
  font: 500 inherit; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px; cursor: pointer;
}
button:hover { border-color: var(--amber); background: #22201a; }
button.on { background: var(--accent); border-color: #ffa53a; color: #140a00; font-weight: 700; }

input[type="text"], input[type="password"], input:not([type]) {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; width: 100%;
}
input:focus { outline: none; border-color: var(--accent); }

.muted { color: var(--muted); }
.small { font-size: 12px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

.x {
  position: absolute; top: 8px; right: 8px; border: 0; background: none;
  color: var(--muted); font-size: 18px; padding: 4px 8px;
}
.x:hover { color: var(--text); background: none; }

/* Top bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.home { display: inline-flex; align-items: center; gap: 9px; color: var(--amber); text-decoration: none; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; }
.home .wm { color: var(--amber); }
.home span:not(.wm):not(.brand-logo) { color: var(--muted); font-weight: 500; font-family: 'Space Grotesk', sans-serif; font-size: 14px; }
.brand-logo {
  width: 22px; height: 22px; flex: none; display: inline-block;
  background-color: var(--amber);
  -webkit-mask: url("../assets/logo.svg") center / contain no-repeat;
  mask: url("../assets/logo.svg") center / contain no-repeat;
}
.home:hover { color: var(--accent); }
.topbar-right { display: flex; gap: 8px; align-items: center; }
/* Language switcher — identical markup and rules on the landing and the map page. */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.2;
  font: 500 14px 'Space Grotesk', system-ui, sans-serif; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-warm); border-radius: 4px;
  padding: 8px 12px; cursor: pointer;
}
.lang-btn:hover, .lang-btn.open { border-color: var(--amber); }
.lang-cur { white-space: nowrap; }
.lang-chev {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--amber); transition: transform 0.15s ease;
}
.lang-btn.open .lang-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 100%; width: max-content; padding: 4px;
  background: var(--panel); border: 1px solid var(--line-warm); border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.lang-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; white-space: nowrap;
  font: 500 14px 'Space Grotesk', system-ui, sans-serif; color: var(--text);
  background: none; border: 0; border-radius: 3px; padding: 7px 10px; cursor: pointer;
}
.lang-opt:hover { background: var(--panel-2); }
.lang-opt.on { color: var(--amber); }
.lang-tick { width: 12px; flex: none; color: var(--amber); opacity: 0; }
.lang-opt.on .lang-tick { opacity: 1; }

.mode-switch button { border-radius: 0; }
.mode-switch button:first-child { border-radius: var(--r) 0 0 var(--r); border-right: 0; }
.mode-switch button:last-child { border-radius: 0 var(--r) var(--r) 0; }

/* Sidebar */
.sidebar {
  position: fixed; top: 48px; bottom: 0; left: 0; width: 260px; z-index: 15;
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
}
.side-tabs { display: flex; }
.side-tabs button { flex: 1; border-radius: 0; }
.side-tabs button:first-child { border-radius: var(--r) 0 0 var(--r); border-right: 0; }
.side-tabs button:last-child { border-radius: 0 var(--r) var(--r) 0; }

#side-list { list-style: none; overflow-y: auto; flex: 1; }
#side-list li {
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
#side-list li:hover { background: var(--panel-2); }
#side-list li.sel { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
#side-list .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
#side-list .cradle-dot { background: var(--amber); box-shadow: 0 0 6px var(--accent); border-radius: 2px; }
#side-list li.cradle-row .who { color: var(--amber); font-weight: 600; }
#side-list li.cradle-row { border-bottom: 1px solid var(--line); }
#side-list .who { margin-left: auto; color: var(--muted); font-size: 12px; }

/* Layers popover */
.layers-pop {
  /* Same right rail as the account/detail panels, and above them (they are mutually
     exclusive in JS, so this popover never has to fight the panel column for space). */
  position: fixed; top: 54px; right: 12px; z-index: 33; width: 220px;
  background: var(--panel); border: 1px solid var(--line-warm); border-radius: var(--r);
  padding: 10px 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
.layers-pop label { display: block; padding: 5px 0; color: var(--muted); cursor: pointer; }
.layers-pop label:hover { color: var(--text); }
.layers-pop input { margin-right: 8px; accent-color: var(--accent); }

/* Hover tooltip */
.tooltip {
  position: fixed; z-index: 30; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line-warm); border-radius: var(--r);
  padding: 5px 9px; font-size: 13px; white-space: nowrap;
}
.tooltip .muted { font-size: 11px; }

/* Right-hand panel stack. Cards sit in a flex column, so hiding one (display:none)
   pulls the cards under it up. Gaps stay click-through to the map underneath. */
.panel-stack {
  position: fixed; top: 60px; right: 12px; z-index: 22;
  width: 324px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 72px);
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px;
  pointer-events: none;
}
.card {
  position: relative; flex: none; pointer-events: auto;
  background: var(--panel); border: 1px solid var(--line-warm); border-radius: var(--r);
  padding: 16px 18px 18px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  animation: card-in 0.18s ease-out;
}
@keyframes card-in { from { opacity: 0; transform: translateY(-4px); } }
.card h2, .card h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--amber);
  line-height: 1.2; padding-right: 20px;
}
.card h2 { font-size: 20px; }
.card h3 { font-size: 18px; }
.card h4 {
  margin: 14px 0 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}

/* Detail card */
.detail-head { display: flex; gap: 11px; align-items: center; margin-bottom: 10px; }
.detail-head img { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line-warm); }
.facts { width: 100%; border-collapse: collapse; margin: 10px 0; }
.facts td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.facts tr:last-child td { border-bottom: 0; }
.facts td:first-child { color: var(--muted); }
.facts td:last-child { text-align: right; }
.detail-actions { display: flex; gap: 8px; margin-top: 12px; }
.detail-actions button { flex: 1; }
#detail-bluemap { background: var(--accent); border-color: var(--accent); color: #140a00; font-weight: 600; }
#detail-bluemap:hover { background: var(--amber); border-color: var(--amber); }

.filebtn {
  display: block; text-align: center; margin-top: 8px; padding: 8px 10px; font-size: 13px;
  border: 1px dashed var(--line-warm); border-radius: var(--r); color: var(--muted); cursor: pointer;
}
.filebtn:hover { color: var(--amber); border-color: var(--amber); }

/* Account card */
.account input { margin: 9px 0; }
#acc-go { width: 100%; margin-top: 6px; background: var(--accent); border-color: var(--accent); color: #140a00; font-weight: 600; }
#acc-go:hover { background: var(--amber); border-color: var(--amber); }
#acc-error:not(:empty) { margin-top: 8px; color: var(--red); }
.acc-head { display: flex; gap: 11px; align-items: center; }
.acc-head h3 { padding-right: 0; }
.face {
  width: 48px; height: 48px; flex: none; border-radius: var(--r); border: 1px solid var(--line-warm);
  background: var(--panel-2) center/cover; image-rendering: pixelated;
}
.wardrobe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wardrobe .slot {
  aspect-ratio: 1; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--panel-2) center/cover; image-rendering: pixelated; cursor: pointer; padding: 0;
}
.wardrobe .slot.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wardrobe .slot.empty { color: var(--muted); cursor: default; }
.linkish { border: 0; background: none; color: var(--muted); margin-top: 12px; padding: 0; }
.linkish:hover { color: var(--amber); background: none; }

/* Clock */
.clockbar {
  position: fixed; left: 272px; bottom: 10px; z-index: 15;
  background: var(--panel); border: 1px solid var(--line-warm); border-radius: var(--r);
  padding: 5px 10px; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Modal */
.modal-back {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.62);
  display: grid; place-items: center;
}
.modal, .emblem-editor {
  position: relative;
  background: var(--panel); border: 1px solid var(--line-warm); border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.modal { width: 360px; max-width: calc(100vw - 32px); padding: 18px; }
.modal input { margin: 10px 0; }
.modal h3, .emblem-editor h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--amber);
  font-size: 18px; margin-bottom: 4px; padding-right: 20px;
}

/* Emblem editor */
.btn-emblem {
  width: 100%; margin-top: 8px; background: var(--accent); border-color: var(--accent);
  color: #140a00; font-weight: 600;
}
.emblem-editor { padding: 18px; width: 560px; max-width: calc(100vw - 32px); }
.emblem-body { display: flex; gap: 16px; margin-top: 12px; }
#emblem-canvas {
  image-rendering: pixelated; border: 1px solid var(--line-warm); border-radius: var(--r);
  background:
    repeating-conic-gradient(#1b1f25 0% 25%, #14171b 0% 50%) 0 0 / 24px 24px;
  cursor: crosshair; touch-action: none;
}
.emblem-side { display: flex; flex-direction: column; gap: 10px; width: 150px; }
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.palette .sw {
  aspect-ratio: 1; border-radius: 5px; border: 2px solid transparent; cursor: pointer;
}
.palette .sw.sel { border-color: #fff; }
.palette .sw.eraser { background: repeating-conic-gradient(#333 0% 25%, #222 0% 50%) 0 0 / 8px 8px; }
.emblem-opt { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.emblem-opt input { accent-color: var(--accent); }
.emblem-preview {
  width: 56px; height: 64px; align-self: center; image-rendering: pixelated;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.btn-ghost { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.btn-save {
  background: var(--accent); border: 1px solid var(--accent); color: #140a00; font-weight: 600;
  border-radius: var(--r); padding: 8px;
}
.btn-save:hover { background: var(--amber); border-color: var(--amber); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r); }

/* The grip only exists on phones, where the sidebar becomes a bottom sheet. */
.sheet-grip { display: none; }

@media (max-width: 720px) {
  .clockbar { left: 10px; }
  .panel-stack { left: 12px; width: auto; }
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   The sidebar used to be hidden outright here, which left no way to find a town
   on a phone. It becomes a bottom sheet instead: a grip you drag or tap, peeking
   above the fold so it is discoverable without covering the globe. */
@media (max-width: 620px) {
  .topbar { height: 44px; padding: 0 10px; gap: 8px; flex-wrap: nowrap; }
  /* The map is a tool: keep the mark, drop the wordmark, give the room to controls. */
  .home { flex: none; }
  .home .wm, .home span:last-child { display: none; }
  .topbar-right { gap: 6px; flex: 1; justify-content: flex-end; flex-wrap: nowrap; min-width: 0; }
  .mode-switch { flex: none; display: flex; }
  .topbar-right button { white-space: nowrap; }
  .topbar-right button { padding: 6px 9px; font-size: 13px; }
  #btn-account { display: none; }                  /* signing in belongs on the landing page */
  .lang-btn { padding: 6px 8px; font-size: 13px; }
  .lang-cur { max-width: 3.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
  .lang-menu { right: 0; left: auto; }
  .layers-pop { right: 10px; left: auto; top: 50px; width: auto; min-width: 220px; }

  .sidebar {
    display: flex;
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: 62dvh; max-height: 62dvh;
    border-right: 0; border-top: 1px solid var(--line-warm);
    border-radius: 14px 14px 0 0; padding: 0 12px 12px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(calc(62dvh - 74px));     /* peek: grip + tabs */
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    touch-action: pan-y;
  }
  .sidebar.open { transform: translateY(0); }

  .sheet-grip {
    display: block; width: 100%; height: 26px; flex: none;
    background: none; border: 0; padding: 0; cursor: grab;
  }
  .sheet-grip::before {
    content: ""; display: block; width: 42px; height: 4px; margin: 11px auto 0;
    border-radius: 999px; background: var(--line-warm);
  }
  .sidebar.open .sheet-grip { cursor: grabbing; }

  .side-tabs button { padding: 10px 12px; font-size: 14px; }
  #side-search { padding: 11px 12px; font-size: 16px; }   /* 16px stops iOS zooming on focus */
  #side-list li { padding: 12px 10px; }                   /* comfortable thumb targets */

  /* Keep the readouts clear of the sheet's peeking edge, and out of the way entirely
     once it is raised — otherwise the clock floats on top of the town list. */
  .clockbar { bottom: 78px; left: 10px; right: 10px; font-size: 12px; transition: opacity 0.2s; }
  .sidebar.open ~ .clockbar { opacity: 0; pointer-events: none; }
  #latlon-readout { bottom: 116px !important; }
  .panel-stack { top: 52px; right: 10px; left: 10px; max-height: calc(100dvh - 150px); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Chrome, second pass.

   The map is the thing worth looking at, and the old panels competed with it:
   solid slabs of #121317 sitting on top of a lit globe, each one a hole punched
   in the picture. The instrument is glass now — the world shows through it,
   dimmed and blurred, and the amber only appears where it means something.

   Nothing below touches the scene, the globe or any behaviour. It is surfaces,
   spacing, focus states and hit targets.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --glass: color-mix(in oklab, #0d0e12 78%, transparent);
  --glass-hi: color-mix(in oklab, #16171d 82%, transparent);
  --hair: color-mix(in oklab, #ece7de 12%, transparent);
  --hair-warm: color-mix(in oklab, #fcbf49 22%, transparent);
  --lift-1: 0 1px 2px rgba(0, 0, 0, .5);
  --lift-2: 0 8px 24px -6px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
  --lift-3: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .45);
  --r: 10px;
  --r-sm: 7px;
  --tap: 40px;
}

/* Keyboard users get a ring that reads on glass; mouse users never see it. */
:where(button, input, label, li, a):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar {
  height: 56px;
  padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  background: linear-gradient(to bottom,
      color-mix(in oklab, #08090c 88%, transparent),
      color-mix(in oklab, #08090c 62%, transparent));
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--hair);
}
.topbar .home { letter-spacing: .01em; }
.topbar .wm { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }

/* ── Controls ─────────────────────────────────────────────────────────────── */
button {
  min-height: 34px;
  border-radius: var(--r-sm);
  background: var(--glass-hi);
  border-color: var(--hair);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
button:hover { background: color-mix(in oklab, #2a2620 70%, transparent); border-color: var(--hair-warm); }
button:active { transform: translateY(.5px); }
button.on {
  background: linear-gradient(180deg, #ffa53a, var(--accent));
  border-color: #ffb862; color: #150a00; box-shadow: var(--lift-1);
}

/* Segmented controls read as one object, not three buttons in a row. */
.mode-switch, .side-tabs {
  background: var(--glass); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 2px; gap: 2px;
}
.mode-switch button, .side-tabs button {
  border: 0; background: none; border-radius: calc(var(--r-sm) - 2px);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.mode-switch button:first-child, .mode-switch button:last-child,
.side-tabs button:first-child, .side-tabs button:last-child {
  border-radius: calc(var(--r-sm) - 2px); border-right: 0;
}
.mode-switch button:hover, .side-tabs button:hover { background: color-mix(in oklab, #ece7de 8%, transparent); }
.mode-switch button.on, .side-tabs button.on {
  /* Re-asserted after the "background: none" above, which is later in the file than the base
     button.on rule and was quietly eating the selected state — amber text on nothing. */
  background: linear-gradient(180deg, #ffa53a, var(--accent));
  color: #150a00;
  box-shadow: var(--lift-1);
}

input[type="text"], input[type="password"], input:not([type]) {
  min-height: var(--tap);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, #06070a 70%, transparent);
  border-color: var(--hair);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4);
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4), 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
input::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }

/* ── Left rail ────────────────────────────────────────────────────────────── */
.sidebar {
  top: 56px; width: 276px; padding: 12px; gap: 10px;
  background: linear-gradient(to right,
      color-mix(in oklab, #0a0b0f 86%, transparent),
      color-mix(in oklab, #0a0b0f 70%, transparent));
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  border-right: 1px solid var(--hair);
}
#side-list { margin-inline: -4px; padding-inline: 4px; scrollbar-width: thin; }
#side-list li {
  min-height: var(--tap); padding: 8px 10px; border-radius: var(--r-sm);
  transition: background .12s ease, box-shadow .12s ease;
}
#side-list li:hover { background: color-mix(in oklab, #ece7de 7%, transparent); }
#side-list li.sel {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
#side-list li.cradle-row { border-bottom-color: var(--hair); }

/* ── Layers ───────────────────────────────────────────────────────────────── */
.layers-pop {
  top: 62px; width: 244px; padding: 8px;
  background: var(--glass); border-color: var(--hair-warm);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-radius: var(--r); box-shadow: var(--lift-3);
}
.layers-pop label {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 4px 8px; border-radius: var(--r-sm);
  transition: background .12s ease, color .12s ease;
}
.layers-pop label:hover { background: color-mix(in oklab, #ece7de 7%, transparent); }
.layers-pop input { margin: 0; width: 15px; height: 15px; }
.layers-pop label:has(input:checked) { color: var(--text); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.panel-stack { top: 68px; gap: 14px; }
.card {
  border-radius: var(--r); padding: 18px 20px 20px;
  background: var(--glass); border-color: var(--hair-warm);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: var(--lift-3);
}
.card h2 { font-size: 21px; letter-spacing: -.01em; }
.x {
  top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; line-height: 1;
  transition: background .12s ease, color .12s ease;
}
.x:hover { color: var(--text); background: color-mix(in oklab, #ece7de 10%, transparent); }

.tooltip {
  border-radius: var(--r-sm); padding: 6px 10px;
  background: var(--glass); border-color: var(--hair-warm);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--lift-2);
}

/* ── Small screens ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .topbar { height: 52px; }
  .sidebar { top: 52px; width: 100%; }
  .panel-stack { top: 60px; left: 12px; width: auto; }
  button { min-height: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}