/* Boomerang: a two ink risograph print of an 8-bit game.
   Two inks, one paper, one pixel grid. Nothing on this sheet is a bordered CSS box pretending to
   be a surface: the ink blocks are generated plates, nine sliced.

   TWO FACES, and the split is the whole readability rule of this site:
     Pixeloid (a 9 px bitmap grid) shouts. It sets the wordmark, the section titles, the step
     numbers, the big figures, the button labels and the mint, so every one of its sizes is a
     multiple of 9 and it is never scaled off its grid.
     Satoshi reads. It sets every line a visitor actually reads: the premise, the steps, the
     tables, the notes, the form. A bitmap face at 18 px is a headline face doing a paragraph's
     job, and it was unreadable, which is why this split exists. */

@font-face { font-family: "Pixeloid"; src: url("/fonts/PixeloidSans.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixeloid"; src: url("/fonts/PixeloidSansBold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pixeloid Mono"; src: url("/fonts/PixeloidMono.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f2f0e9;
  --ink: #101010;
  --blue: #1b2be8;

  --f-pixel: "Pixeloid", ui-monospace, monospace;
  --f-mono: "Pixeloid Mono", ui-monospace, monospace;
  --f-text: "Satoshi", -apple-system, "Segoe UI", system-ui, sans-serif;

  --t-display: 90px;
  --t-head: 54px;
  --t-title: 36px;
  --t-lead: 27px;
  --t-body: 18px;
  --t-small: 16px;
  --t-label: 16px;
  --t-key: 18px;
  --t-num: 45px;
  --t-huge: 90px;

  --s1: 9px;
  --s2: 18px;
  --s3: 27px;
  --s4: 36px;
  --s5: 54px;
  --s6: 72px;
  --s7: 108px;

  --rule: 3px;
  --hair: 1px;
  --gutter: 36px;
  --page: 1740px;

  --key-h: 54px;
  --key-h-lg: 63px;

  font-synthesis: none;
}

* { box-sizing: border-box; }
/* A display rule on a class beats [hidden] on its own: LESSONS 14.3. */
[hidden] { display: none !important; }

html { overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("/img/paper.webp");
  background-size: 512px 512px;
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: 0.005em;
  text-rendering: optimizeLegibility;
}

/* The bitmap face is drawn, not rendered: any smoothing turns its hard pixels to mush. */
.masthead__name,
.masthead__ticker,
.section__title,
.step__no,
.tally__value,
.readout__value,
.coinhead__name,
.coinhead__sym,
.index__no,
.imprint__ca,
.key,
.coin__tag,
.coin__left,
.arc__clock {
  font-family: var(--f-pixel);
  font-weight: 700;
  -webkit-font-smoothing: none;
  font-smooth: never;
  letter-spacing: 0;
}
.imprint__ca, .coin__left { font-family: var(--f-mono); font-weight: 400; }

p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

img { max-width: 100%; height: auto; }
.px { image-rendering: pixelated; }

a { color: var(--ink); }

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s7);
}

/* ---- masthead -------------------------------------------------------------------------- */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: var(--s5);
  align-items: start;
  padding: var(--s5) 0 var(--s3);
}
.masthead__name {
  margin: 0;
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.masthead__ticker {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-lead);
  line-height: 1.3;
  color: var(--blue);
}
.masthead__premise {
  margin: 0;
  padding-top: 10px; /* the first line sits on the wordmark's cap line */
  font-size: var(--t-body);
  line-height: 1.6;
  max-width: 54ch;
}
.masthead__premise b { color: var(--blue); font-weight: 700; }
.masthead--inner .masthead__premise { padding-top: 6px; }
.rule { height: var(--rule); background: var(--ink); }
.hair { height: var(--hair); background: var(--ink); }

/* ---- the numbered index, and the numbered step columns ---------------------------------- */

.index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: var(--hair) solid var(--ink);
}
.index__item {
  display: block;
  padding: var(--s2) var(--s2) var(--s2) 0;
  text-decoration: none;
  border-right: var(--hair) solid var(--ink);
  min-height: var(--key-h);
}
.index__item:last-child { border-right: 0; }
.index__no { display: block; font-size: var(--t-body); line-height: 1.35; color: var(--blue); font-weight: 700; }
.index__word {
  display: block;
  margin-top: 2px;
  line-height: 1.3;
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
}
.index__item[aria-current="page"] .index__word { color: var(--blue); }
.index__item:hover .index__word { color: var(--blue); }
.index__item:focus-visible { outline: var(--rule) solid var(--blue); outline-offset: -3px; }

/* ---- the sky: the sheet's one picture --------------------------------------------------- */

/* The plate is a background so the band can be shorter than the picture: the only thing cut off
   the top is bare paper. The horizon line of sky.png sits 17.3% up from its bottom edge, and the
   picture is scaled to the band's WIDTH (the band is always wider than 16:9), so the ground line
   is at 0.173 * 0.562 = 9.72% of the band's width up from the bottom. 1cqw is 1% of that width. */
.sky {
  position: relative;
  margin-top: var(--s4);
  height: clamp(360px, 34vw, 640px);
  container-type: inline-size;
  background: url("/img/sky.png") bottom center / cover no-repeat;
  image-rendering: pixelated;
  isolation: isolate;
  --ground: 9.72cqw;
  --coin-w: 120px;
  /* the boomerangs start to the right of the kangaroo, so nothing ever lands on him */
  --flight-inset: 220px;
}
.sky__roo {
  position: absolute;
  left: 3%;
  bottom: var(--ground);
  width: 168px;
  height: auto;
  transform-origin: 50% 100%;
  animation: sway 9s ease-in-out infinite;
  z-index: 2;
}
@keyframes sway {
  0%, 100% { transform: rotate(-0.35deg); }
  50% { transform: rotate(0.35deg); }
}
.flight {
  position: absolute;
  left: var(--flight-inset);
  right: 0;
  top: 0;
  bottom: var(--ground);
  z-index: 3;
  pointer-events: none;
}
/* The whole sprite, its tag and its clock are placed by calc so they can never poke out of the
   band, at any width: the box travels from the left edge to (100% minus its own width). */
.coin {
  position: absolute;
  height: 132px;
  width: var(--coin-w);
  text-decoration: none;
  pointer-events: auto;
  text-align: center;
  transition: transform 0.15s steps(2), filter 0.15s;
}
.coin:hover, .coin:focus-visible { transform: scale(1.06); filter: drop-shadow(0 0 6px var(--blue)); }
.coin:focus-visible { outline: none; }
/* Four baked frames on one strip, played with steps(): a pixel sprite is never rotated at runtime. */
.coin__boom {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  background: url("/img/boom-spin.png") 0 0 / 400% 100% no-repeat;
  image-rendering: pixelated;
  animation: spin 0.52s steps(4) infinite;
}
/* With background-size 400%, a position percentage is a fraction of (box minus image), so the four
   frames sit at 0, 33.33, 66.67 and 100 percent. steps(4) shows the first four of five stops, so
   the animation has to run to 133.33 percent for the last frame to be the fourth one. */
@keyframes spin { to { background-position: 133.3333% 0; } }
.coin__tag {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.coin__left { display: block; font-size: 16px; line-height: 1.3; color: var(--blue); }

/* ---- ink plates: every pressable surface is one of these two generated blocks ------------ */

.ink {
  border-image: url("/img/ink-black.webp") 18 fill / 18px / 0 stretch;
  color: var(--paper);
}
.ink--blue { border-image-source: url("/img/ink-blue.webp"); }

.key {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--key-h);
  padding: 0 26px;
  border: 0;
  border-image: url("/img/ink-black.webp") 18 fill / 18px / 0 stretch;
  background: none;
  color: var(--paper);
  font-family: inherit;
  font-size: var(--t-key);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s steps(1);
}
.key:hover { transform: translate(-2px, -2px); }
.key:active { transform: translate(1px, 1px); }
.key:focus-visible { outline: var(--rule) solid var(--blue); outline-offset: 3px; }
.key--lg { min-height: var(--key-h-lg); font-size: var(--t-lead); padding: 0 var(--s4); }
.key--blue { border-image-source: url("/img/ink-blue.webp"); }
.key--paper {
  border-image-source: url("/img/ink-paper.webp");
  color: var(--ink);
}
.key[aria-disabled="true"], .key:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.key__mark { width: 26px; height: 26px; flex: none; }

/* ---- the imprint: the blue band where the token lives ----------------------------------- */

.imprint {
  margin-top: var(--s5);
  padding: var(--s4) var(--s4) var(--s4);
  border-image: url("/img/ink-blue.webp") 18 fill / 18px / 0 stretch;
  color: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
}
.imprint__label {
  display: block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}
.imprint__ca {
  margin: var(--s1) 0 0;
  font-family: "Pixeloid Mono", ui-monospace, monospace;
  font-size: var(--t-title);
  line-height: 1.25;
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
}
.imprint__ca--empty {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  max-width: 34ch;
}
.imprint__keys { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }

/* ---- sections -------------------------------------------------------------------------- */

.section { margin-top: var(--s7); }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: var(--rule) solid var(--ink);
  flex-wrap: wrap;
}
.section__title { margin: 0; font-size: var(--t-title); font-weight: 700; line-height: 1.2; }
.section__note { margin: 0; font-size: var(--t-body); line-height: 1.6; max-width: 62ch; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.step {
  display: flex;
  flex-direction: column;
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-right: var(--hair) solid var(--ink);
}
.step:last-child { border-right: 0; padding-right: 0; }
.step__no { font-size: var(--t-title); font-weight: 700; color: var(--blue); line-height: 1.2; }
.step__title {
  margin: var(--s2) 0 var(--s1);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}
.step__text { margin: 0 0 var(--s3); font-size: var(--t-body); line-height: 1.6; max-width: 40ch; }
.step__pic { margin-top: auto; width: 100%; max-width: 260px; }

/* ---- the one live number ---------------------------------------------------------------- */

.tally { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.tally__cell { padding: var(--s4) var(--s4) var(--s4) 0; border-right: var(--hair) solid var(--ink); align-self: start; }
.tally__cell:last-child { border-right: 0; padding-right: 0; }
.tally__label { display: block; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.tally__value {
  display: flex;
  align-items: flex-end;
  min-height: calc(var(--t-huge) * 1.08);
  margin-top: var(--s2);
  font-size: var(--t-huge);
  font-weight: 700;
  line-height: 1.08;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tally__value--small { font-size: var(--t-num); line-height: 1.2; color: var(--ink); }
.tally__unit { font-size: var(--t-lead); color: var(--ink); }

/* ---- lists of coins --------------------------------------------------------------------- */

/* A wide table on a narrow phone slides sideways inside its own strip, and only sideways: the
   page's own vertical scroll is never swallowed. */
.scroller { overflow-x: auto; overflow-y: visible; scrollbar-width: thin; }
.scroller::-webkit-scrollbar-button { display: none; }
.list { width: 100%; min-width: 460px; border-collapse: collapse; }
.list th, .list td {
  padding: var(--s2) var(--s2) var(--s2) 0;
  text-align: left;
  border-bottom: var(--hair) solid var(--ink);
  font-size: var(--t-body);
  vertical-align: middle;
}
.list th {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: var(--rule) solid var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.list td.num, .list th.num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.list__name { display: flex; align-items: center; gap: var(--s2); font-weight: 700; text-decoration: none; }
.list td { font-variant-numeric: tabular-nums; }
.list__name img { width: 36px; height: 36px; flex: none; }
.list__state { color: var(--blue); font-weight: 700; }
.list__empty { padding: var(--s5) 0; font-size: 20px; line-height: 1.55; max-width: 58ch; }

/* ---- forms ------------------------------------------------------------------------------ */

.field { display: block; margin-bottom: var(--s4); }
.field__label {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--s1);
}
.field__hint { display: block; font-size: var(--t-small); line-height: 1.55; margin-top: 6px; max-width: 52ch; }
.field input[type="text"], .field input[type="number"], .field textarea {
  width: 100%;
  min-height: var(--key-h);
  padding: 12px 14px;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-body);
}
.field input:focus-visible, .field textarea:focus-visible { outline: var(--rule) solid var(--blue); outline-offset: 2px; }

/* ---- dialog ----------------------------------------------------------------------------- */

dialog {
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: var(--s4);
  max-width: 640px;
  width: calc(100% - var(--s5));
}
dialog::backdrop { background: rgba(16, 16, 16, 0.55); }

.notice { font-size: var(--t-body); line-height: 1.55; margin: var(--s2) 0 0; min-height: 28px; }
.notice--ok { color: var(--blue); font-weight: 700; }

/* ---- the arc diagram on a coin page ----------------------------------------------------- */

/* The coin's own flight band, the same picture and the same ground line as the front sheet. */
.arc {
  position: relative;
  margin-top: var(--s4);
  height: clamp(300px, 26vw, 420px);
  container-type: inline-size;
  background: url("/img/sky.png") bottom center / cover no-repeat;
  image-rendering: pixelated;
  --ground: 9.72cqw;
}
.arc__boom {
  position: absolute;
  width: 84px;
  height: 84px;
  background: url("/img/boom-spin.png") 0 0 / 400% 100% no-repeat;
  image-rendering: pixelated;
  animation: spin 0.52s steps(4) infinite;
  z-index: 2;
}
.arc__target { position: absolute; right: 16%; bottom: var(--ground); width: 88px; height: auto; z-index: 2; }
.arc__roo { position: absolute; left: 3%; bottom: var(--ground); width: 120px; height: auto; z-index: 2; }

/* ---- phone ------------------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .masthead { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2) { border-right: 0; padding-right: 0; }
  .tally { grid-template-columns: minmax(0, 1fr); }
  .tally__cell { border-right: 0; padding-right: 0; border-bottom: var(--hair) solid var(--ink); }
  .tally__cell:last-child { border-bottom: 0; }
  .imprint { grid-template-columns: minmax(0, 1fr); }
  .imprint__keys { justify-content: flex-start; }
}

@media (max-width: 700px) {
  :root {
    --t-display: 45px;
    --t-head: 36px;
    --t-title: 27px;
    --t-lead: 18px;
    --t-huge: 54px;
    --t-num: 36px;
    --gutter: 18px;
  }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index__item { border-bottom: var(--hair) solid var(--ink); padding-left: 0; }
  .index__item:nth-child(2n) { border-right: 0; }
  .index__item:last-child { border-bottom: 0; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { border-right: 0; padding-right: 0; border-bottom: var(--hair) solid var(--ink); }
  .step:last-child { border-bottom: 0; }
  .step__pic { max-width: 200px; }
  .imprint__ca { font-size: var(--t-lead); }
  .sky__roo { width: 104px; }
  .sky { --coin-w: 112px; --flight-inset: 130px; }
  .coin__boom { width: 44px; height: 44px; }
  .sky { --ground: 32.89cqw; background-image: url("/img/sky-tall.png"); height: clamp(300px, 92vw, 460px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- the throw form and its terms -------------------------------------------------------- */

.masthead--inner .masthead__name { font-size: var(--t-head); }
.masthead--inner .masthead__ticker { color: var(--ink); opacity: 0.7; }

.throw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--s6); margin-top: var(--s5); align-items: start; }
.throw__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.throw__pic { display: block; width: 100%; max-width: 360px; }
.terms { margin: var(--s4) 0 0; }
.terms__row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s2); padding: var(--s2) 0; border-bottom: var(--hair) solid var(--ink); }
.terms__row:last-child { border-bottom: 0; }
.terms dt { font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.terms dd { margin: 0; font-size: var(--t-body); line-height: 1.55; }

/* ---- one coin's sheet -------------------------------------------------------------------- */

.coinhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s4) 0; }
.coinhead__pic { width: 144px; height: 144px; flex: none; }
.coinhead__name { margin: 0; font-size: var(--t-head); font-weight: 700; line-height: 1.2; }
.coinhead__sym { display: block; font-size: var(--t-lead); line-height: 1.3; color: var(--blue); }
.coinhead__state { font-size: var(--t-lead); font-weight: 700; text-align: right; }

.readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin-top: var(--s4); }
.readout__cell { padding: var(--s3) var(--s3) var(--s3) 0; border-right: var(--hair) solid var(--ink); }
.readout__cell:last-child { border-right: 0; padding-right: 0; }
.readout__label { display: block; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.readout__value {
  display: flex;
  align-items: flex-end;
  min-height: calc(var(--t-num) * 1.2);
  margin-top: var(--s1);
  font-size: var(--t-num);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.readout__value--blue { color: var(--blue); }

.trade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s5); }
.trade__side { padding: var(--s4); border-image: url("/img/ink-paper.webp") 18 fill / 18px / 0 stretch; }

@media (max-width: 1100px) {
  .throw { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout__cell:nth-child(2) { border-right: 0; padding-right: 0; }
  .trade { grid-template-columns: minmax(0, 1fr); }
  .coinhead { grid-template-columns: auto minmax(0, 1fr); }
  .coinhead__state { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 700px) {
  .terms__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .readout { grid-template-columns: minmax(0, 1fr); }
  .readout__cell { border-right: 0; padding-right: 0; border-bottom: var(--hair) solid var(--ink); }
  .readout__cell:last-child { border-bottom: 0; }
  .coinhead__pic { width: 96px; height: 96px; }
}

/* An unknown number says so in words: never a dash standing in for a value. */
.tally__none { font-family: var(--f-text); font-size: 20px; font-weight: 500; color: var(--ink); opacity: 0.55; -webkit-font-smoothing: antialiased; }
.readout__value .tally__none { font-size: var(--t-body); }

/* Nothing to show: one line in the reader's words, never a page of empty boxes. */
.empty {
  margin: var(--s5) 0 var(--s6);
  font-size: 22px;
  line-height: 1.55;
  max-width: 58ch;
}

/* The picture picker: our own key, because a native file input prints the browser's language. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.pick { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pick__name { font-size: var(--t-small); overflow-wrap: anywhere; min-width: 0; opacity: 0.75; }
.visually-hidden:focus-visible + .pick .key { outline: var(--rule) solid var(--blue); outline-offset: 3px; }

/* A cell showing "not yet" does not need a 144 px line box. */
.tally__value:has(.tally__none) { font-size: 20px; line-height: 1.3; }

@media (max-width: 360px) {
  /* "Boomerang" at 45 px is wider than a 320 px sheet, and a pixel face only stays crisp on its
     own grid, so the display step drops to the next multiple of 9 rather than scaling fluidly. */
  :root { --t-display: 36px; --t-huge: 45px; }
  .key { padding: 0 16px; gap: 8px; font-size: 16px; }
  .key--lg { padding: 0 18px; }
  .list { min-width: 380px; }
}