/* Official Mom. One window, drawn in lit line on black, built to his INCOME.exe poster.
   Everything visible is either a 1 px stroke in the ink, type in one family, or the one generated
   picture (the spoon), which is a render on pure black screened onto the page's own ground.

   Measured off his picture (tools/_momref.mjs, tools/_mompal.mjs): ground #010101 at 74.8% of the
   frame, ink #91FD1C with a #CEFE9D core, title bar fill #021501, panel fill #050D00, frame rule
   reading #9ED256 through its own haze, 5.0% gutters, a 66/666 title bar, rounded 10 px corners,
   L brackets inset in every panel, a bar whose fill is a run of vertical ticks. */

:root {
  /* his palette, as measured */
  --ground: #010101;
  --panel: #050d00;
  --raised: #021501;
  --ink: #9bf828;          /* 15.8:1 on the ground */
  --hot: #d8ffa6;          /* the white hot core: values and the display word */
  --mid: #6fba20;          /*  8.7:1  labels and secondary */
  --mute: #5a9c22;         /*  6.2:1  separators, disabled, the dimmest thing allowed */
  --rule: #4a8b1c;
  --rule-dim: #27510f;

  /* type: one family, nothing under 14 px (mono on black has a higher floor than paper) */
  --face: "Intel One Mono", ui-monospace, monospace;
  --t-label: 15px;
  --t-body: 15px;
  --t-value: 17px;
  --t-head: 20px;
  --t-big: 28px;
  --t-display: 56px;

  --lh-label: 22px;
  --lh-body: 24px;
  --lh-value: 26px;
  --lh-head: 28px;

  /* space scale: nothing uses a value outside it */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --page: 1180px;
  --gutter: 24px;
  --row: 44px;
  --radius: 10px;
  --inset: var(--s6);      /* window body inset, his order of 2026-09-21 */
}

* { box-sizing: border-box; }
html { background: var(--ground); overflow-x: clip; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--t-body) / var(--lh-body) var(--face);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  padding: var(--gutter) var(--gutter) var(--s8);
  position: relative;
  z-index: 1;
}

@font-face { font-family: "Intel One Mono"; font-weight: 400; font-display: swap; src: url(/fonts/IntelOneMono-Regular.woff2) format("woff2"); }
@font-face { font-family: "Intel One Mono"; font-weight: 500; font-display: swap; src: url(/fonts/IntelOneMono-Medium.woff2) format("woff2"); }
@font-face { font-family: "Intel One Mono"; font-weight: 700; font-display: swap; src: url(/fonts/IntelOneMono-Bold.woff2) format("woff2"); }

/* The field behind the page: one even scan, 1 row of ink in 4, painted ONCE and never repeated
   inside the surfaces stacked on it, plus the vignette his picture has at its edges. */
.field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 42%, rgba(109, 196, 32, .09) 0%, rgba(0, 0, 0, 0) 62%),
    url(/img/v1/scan-4.png) repeat;
  background-size: auto, 4px 4px;
}

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

/* ---- the window -------------------------------------------------------------------------- */

.win {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  --win-w: min(100%, var(--page));
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--raised) 0 64px, rgba(2, 14, 0, .55) 64px 100%);
  box-shadow: 0 0 0 1px rgba(155, 248, 40, .12), 0 0 48px rgba(109, 196, 32, .13);
  position: relative;
}
body.is-wide .win { max-width: none; }
@supports (width: round(down, 3px, 2px)) {
  /* an odd viewport otherwise puts the frame on a half pixel and smears every hairline on the page */
  .win { margin-left: round(down, calc((100% - var(--win-w)) / 2), 1px); margin-right: auto; }
}

.bar {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s5) 0 var(--inset);
  position: relative;
}
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }
.bar__name {
  margin: 0;
  font-size: var(--t-head); line-height: var(--lh-head); font-weight: 500;
  color: var(--hot);
  text-shadow: 0 0 14px rgba(155, 248, 40, .45);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar__path { color: var(--mid); text-shadow: none; }
.bar__path:not(:empty)::before { content: " \00B7 "; }

.bar__ctl { display: flex; gap: var(--s3); flex: none; }
.ctl {
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--mid);
}
.ctl__box {
  width: 30px; height: 26px; border: 1px solid currentColor; border-radius: 4px;
  display: grid; place-items: center; transition: color .12s, background-color .12s;
}
.ctl:hover { color: var(--ink); }
.ctl[aria-pressed="true"] { color: var(--hot); }
.ctl[aria-pressed="true"] .ctl__box { background: rgba(155, 248, 40, .14); }
.ctl:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; border-radius: 4px; }
.ctl__min { width: 14px; height: 2px; background: currentColor; }
.ctl__max { width: 14px; height: 12px; border: 1px solid currentColor; }
.ctl__x { width: 14px; height: 14px; position: relative; }
.ctl__x::before, .ctl__x::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor;
}
.ctl__x::before { transform: rotate(45deg); }
.ctl__x::after { transform: rotate(-45deg); }

/* ---- the banner row: who this program is, and how to buy it ------------------------------- */

.ident {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--s5);
  padding: var(--s3) var(--inset);
  min-height: 72px;
  position: relative;
}
.ident::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-dim); }
.ident__who { margin: 0; font-size: var(--t-value); line-height: var(--lh-value); color: var(--hot); white-space: nowrap; }
.ident__who b { font-weight: 500; }
.ident__tick { color: var(--mid); margin-left: var(--s3); }
.ident__ca { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ident__addr { flex: 0 1 auto; max-width: calc(44ch + 40px); }   /* 44 characters of mint, its padding and its rule */
.ident__label { color: var(--mute); font-size: var(--t-label); line-height: var(--lh-label); flex: none; }
.ident__addr {
  font-size: var(--t-value); line-height: var(--lh-value); color: var(--mid);
  min-width: 0; overflow-wrap: anywhere; font-weight: 400;
  padding: 10px 18px;
  border: 1px solid var(--rule-dim); border-radius: 4px; background: rgba(0, 0, 0, .55);
}
.ident__addr.is-live { color: var(--hot); border-color: var(--rule); }
.ident__keys { display: flex; gap: var(--s2); flex: none; }

/* ---- keys: every pressable thing on the page ----------------------------------------------- */

.key {
  min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 11px 1.3em;
  font: 500 var(--t-body) / 1 var(--face);
  color: var(--ink); background: rgba(155, 248, 40, .05);
  border: 1px solid var(--rule); border-radius: 6px;
  cursor: pointer; text-decoration: none;
  transition: transform .08s ease, background-color .18s, color .18s, border-color .18s;
}
.key__word { display: block; line-height: 1; transform: translateY(.03em); }   /* optically centred */
.key:hover:not([disabled]):not([aria-disabled="true"]) { color: var(--hot); border-color: var(--ink); background: rgba(155, 248, 40, .12); }
.key:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.key[disabled], .key[aria-disabled="true"] { opacity: .74; cursor: not-allowed; }
.key--mark { width: 48px; padding: 0; }
.key--mark img { width: 22px; height: 22px; display: block; }
.key--go { flex: none; }
.key--copy { min-height: 44px; flex: none; }

/* ---- a panel: a dim 1 px frame with L brackets inside its corners, exactly as his sections --- */

.panel {
  position: relative;
  margin: var(--s5) var(--inset);
  padding: var(--s6);
  border: 1px solid var(--rule-dim);
  border-radius: 8px;
  background: var(--panel);
}
/* His corner brackets: ONE 1 px frame inset inside the panel, masked down to its four corners, so
   all four Ls are really there and they stay exactly 1 px at any size. */
.panel::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid var(--rule);
  --corner: linear-gradient(#000 0 0) no-repeat;
  -webkit-mask: var(--corner) 0 0 / 26px 26px, var(--corner) 100% 0 / 26px 26px, var(--corner) 0 100% / 26px 26px, var(--corner) 100% 100% / 26px 26px;
  mask: var(--corner) 0 0 / 26px 26px, var(--corner) 100% 0 / 26px 26px, var(--corner) 0 100% / 26px 26px, var(--corner) 100% 100% / 26px 26px;
}
.panel__head {
  margin: 0 0 var(--s4);
  font-size: var(--t-head); line-height: var(--lh-head); font-weight: 500; color: var(--hot);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
.panel__head small { font-size: var(--t-label); line-height: var(--lh-label); font-weight: 400; color: var(--mute); min-width: 0; overflow-wrap: anywhere; }

/* ---- the command strip --------------------------------------------------------------------- */

.cmd { display: flex; align-items: center; gap: var(--s3); }
.cmd__arrow, .echo__arrow { color: var(--mid); font-size: var(--t-value); line-height: var(--lh-value); flex: none; }
.cmd__in {
  flex: 1 1 auto; min-width: 0;
  height: 48px; padding: 0 var(--s4);
  font: 400 var(--t-value) / 1 var(--face);
  color: var(--hot); background: rgba(0, 0, 0, .6);
  border: 1px solid var(--rule); border-radius: 6px;
  caret-color: var(--hot);
}
.cmd__in::placeholder { color: var(--mute); }
.cmd__in:focus { outline: 2px solid var(--hot); outline-offset: 1px; border-color: var(--ink); }

.echo { margin: var(--s4) 0 0; display: flex; gap: var(--s3); align-items: baseline; color: var(--mid); min-height: var(--lh-value); }
.echo__text { min-width: 0; overflow-wrap: anywhere; }
.echo.is-bad .echo__text { color: var(--hot); }

.progress { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s4); }
.bar-track {
  flex: 1 1 auto; height: 34px; padding: 4px;
  border: 1px solid var(--rule); border-radius: 5px; background: rgba(0, 0, 0, .5);
  overflow: hidden;
}
.bar-fill {
  height: 100%; width: 0;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 8px);
  transition: width .32s ease;
}
.progress__pc { font-size: var(--t-value); line-height: var(--lh-value); color: var(--hot); font-variant-numeric: tabular-nums; width: 5ch; text-align: right; flex: none; }

/* Mom's other words are named inside her own sentence, not laid out as a row of links: his picture
   has two prompt lines and no navigation at all, and a word you can type is a word, not a tab. */
.echo--words { margin-top: var(--s4); }
.word {
  color: var(--ink); background: none; border: 0;
  font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  /* the hit area is 44 px tall and the line is not: the padding grows the target and the negative
     margin gives the height back to the sentence */
  padding: 13px 3px; margin: -13px 0;
}
.word:hover { color: var(--hot); }
.word:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.word[aria-current="page"] { color: var(--hot); text-decoration: none; }
/* the cursor sits at the END of the line, where a terminal puts it, and not against the word, where
   it opened a gap in front of the full stop */
.echo--words .echo__text::after {
  content: ""; width: 9px; height: 17px; background: var(--hot); display: inline-block;
  vertical-align: -3px; margin-left: 6px;
  animation: blink 1.06s steps(1, end) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 55.01%, 100% { opacity: 0; } }

/* ---- the answer -------------------------------------------------------------------------- */

.coin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.coin__cell { min-width: 0; }
.coin__k { display: block; color: var(--mute); font-size: var(--t-label); line-height: var(--lh-label); }
.coin__v { display: block; color: var(--hot); font-size: var(--t-value); line-height: var(--lh-value); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.coin__v--big { font-size: var(--t-big); line-height: 36px; font-weight: 500; }

.rules { display: grid; gap: 0; }
.rule-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 46%) 56px;
  align-items: center;
  gap: var(--s4);
  min-height: var(--row);
  padding: var(--s2) 0;
  position: relative;
}
.rule-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-dim); }
.rule-row:first-child::before { display: none; }
body.is-dense .rule-row { min-height: 34px; padding: 0; }
.rule-row__mark { width: 22px; height: 22px; border: 1px solid var(--mute); border-radius: 3px; position: relative; justify-self: start; }
.rule-row__mark::before, .rule-row__mark::after { content: ""; position: absolute; background: currentColor; }
.mark--pass { color: var(--ink); border-color: var(--rule); }
.mark--pass::before { left: 3px; top: 10px; width: 8px; height: 2px; transform: rotate(45deg); transform-origin: left center; }
.mark--pass::after { left: 7px; top: 13px; width: 14px; height: 2px; transform: rotate(-52deg); transform-origin: left center; }
.mark--fail { color: var(--hot); border-color: var(--ink); }
.mark--fail::before, .mark--fail::after { left: 3px; top: 9px; width: 14px; height: 2px; }
.mark--fail::before { transform: rotate(45deg); }
.mark--fail::after { transform: rotate(-45deg); }
.mark--unknown { color: var(--mute); }
.mark--unknown::before { left: 0; top: 0; right: 0; bottom: 0; background: none; content: "?"; color: var(--mute); display: grid; place-items: center; font-size: var(--t-label); line-height: 20px; }
.mark--unknown::after { content: none; }
.rule-row__rule { min-width: 0; overflow-wrap: anywhere; }
.rule-row--fail .rule-row__rule { color: var(--hot); }
.rule-row--unknown .rule-row__rule { color: var(--mid); }
.rule-row__read { min-width: 0; color: var(--mid); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rule-row--pass .rule-row__read, .rule-row--fail .rule-row__read { color: var(--hot); }
.rule-row__tag { text-align: right; color: var(--mid); font-weight: 500; }
.rule-row--fail .rule-row__tag { color: var(--hot); }
.rule-row--unknown .rule-row__tag { color: var(--mute); }
.rule-row__why { grid-column: 2 / -1; color: var(--mute); font-size: var(--t-label); line-height: var(--lh-label); margin: 0 0 var(--s2); }

/* the verdict band: his status plate, and his object beside it */
.verdict-band {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: var(--s5);
  align-items: stretch;
  margin: var(--s5) var(--inset);
}
@supports (width: round(down, 3px, 2px)) {
  .verdict-band { grid-template-columns: round(down, calc((100% - var(--s5)) * .62), 1px) minmax(0, 1fr); }
}
.verdict { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.plate {
  position: relative;
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: var(--s5) var(--s6) var(--s6);
  background: rgba(0, 0, 0, .6);
  min-height: 190px;
  display: flex; flex-direction: column; justify-content: center;
}
.plate::before {
  content: ""; position: absolute; inset: 9px; border: 1px solid var(--mid); pointer-events: none;
  --corner: linear-gradient(#000 0 0) no-repeat;
  -webkit-mask: var(--corner) 0 0 / 30px 30px, var(--corner) 100% 0 / 30px 30px, var(--corner) 0 100% / 30px 30px, var(--corner) 100% 100% / 30px 30px;
  mask: var(--corner) 0 0 / 30px 30px, var(--corner) 100% 0 / 30px 30px, var(--corner) 0 100% / 30px 30px, var(--corner) 100% 100% / 30px 30px;
}
.plate__label { margin: 0 0 var(--s3); color: var(--mid); font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: .08em; }
.plate__word {
  margin: 0; font-weight: 700; color: var(--hot);
  font-size: var(--t-display); line-height: 62px;
  text-shadow: 0 0 26px rgba(155, 248, 40, .38);
  overflow-wrap: anywhere;
}
.plate--dont { background: var(--ink); border-color: var(--ink); }
.plate--dont::before { border-color: #010101; }
.plate--dont .plate__label { color: #0a1a00; }
.plate--dont .plate__word { color: #010101; text-shadow: none; }
.plate--none .plate__word { color: var(--mid); text-shadow: none; }

.says { margin: 0; color: var(--ink); font-size: var(--t-value); line-height: 27px; }
.says__by { display: block; margin-top: var(--s3); color: var(--mute); font-size: var(--t-label); line-height: var(--lh-label); }

.object { position: relative; display: grid; place-items: center; min-width: 0; overflow: hidden; border-radius: 8px; }
.object img {
  width: min(100%, 470px); height: auto; display: block;
  mix-blend-mode: screen;                      /* his render stands in the same black the page is */
}
.object figcaption { position: absolute; left: var(--s3); bottom: var(--s3); margin: 0; color: var(--mute); font-size: var(--t-label); line-height: var(--lh-label); }

/* ---- the fridge, the watch desk, the rules sheet -------------------------------------------- */

.list { display: grid; }
.list-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 170px) minmax(0, 1fr) minmax(0, auto) 56px;
  align-items: center; gap: var(--s4);
  min-height: var(--row); padding: var(--s2) 0;
  color: var(--mid); text-decoration: none;
  position: relative;
}
.list-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-dim); }
.list-row:first-child::before { display: none; }
.list-row:hover { color: var(--hot); background: rgba(155, 248, 40, .05); }
.list-row:focus-visible { outline: 2px solid var(--hot); outline-offset: -2px; }
.list-row__sym { color: var(--hot); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__say { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.list-row__tag { text-align: right; font-weight: 500; }
.list-row--dont .list-row__tag, .list-row--dont .list-row__sym { color: var(--hot); }

.days { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.day {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s4);
  border: 1px solid var(--rule-dim); border-radius: 5px;
  color: var(--mid); text-decoration: none; font-size: var(--t-label); font-variant-numeric: tabular-nums;
}
.day:hover { color: var(--hot); border-color: var(--rule); }
.day.is-open { color: var(--hot); border-color: var(--ink); background: rgba(155, 248, 40, .1); }
.day:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }

.sheet { display: grid; gap: 0; }
.sheet-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 72px;
  gap: var(--s4); padding: var(--s4) 0; position: relative;
}
.sheet-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-dim); }
.sheet-row:first-child::before { display: none; }
.sheet-row__n { color: var(--mute); font-variant-numeric: tabular-nums; }
.sheet-row__rule { margin: 0; color: var(--hot); font-size: var(--t-value); line-height: var(--lh-value); }
.sheet-row__why { margin: var(--s2) 0 0; color: var(--mid); }
.sheet-row__w { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }
.sheet-row__w small { display: block; color: var(--mute); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 400; }

.note { margin: 0; color: var(--mid); }
.note + .note { margin-top: var(--s4); }
.note b { color: var(--hot); font-weight: 500; }
.note a { color: var(--ink); }
.closing, .example {
  position: relative;
  margin: var(--s5) var(--inset) 0;
  padding: var(--s4);
  color: var(--mute); font-size: var(--t-label); line-height: var(--lh-label);
}
.closing::before, .example::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule-dim);
}
.closing::before { top: 0; }
.example { padding: 0 var(--s4) var(--s4); margin-bottom: 0; color: var(--mid); }
.closing { margin-bottom: var(--s2); }
.example::after { bottom: 0; }
.example span, .closing span { display: block; }
.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4) var(--s5); margin: 0; }
.pairs div { min-width: 0; }
.pairs dt { color: var(--mute); font-size: var(--t-label); line-height: var(--lh-label); }
.pairs dd { margin: 0; color: var(--hot); font-size: var(--t-value); line-height: var(--lh-value); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.coins { display: grid; margin-top: var(--s4); }

/* ---- narrow ------------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* the panel's own inset narrows, so the biggest value in it narrows with it: a 28 px word needs
     28 px of air and there is not that much left at this width */
  :root { --inset: var(--s5); --t-big: 24px; }
  .ident { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-top: var(--s4); padding-bottom: var(--s4); }
  .ident__keys { justify-content: flex-start; }
  .verdict-band { grid-template-columns: minmax(0, 1fr); }
  .object img { width: min(100%, 380px); margin: 0 auto; }
  .coin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-row { grid-template-columns: 24px minmax(0, 1fr) 52px; row-gap: var(--s1); }
  .rule-row__read { grid-column: 2 / 4; text-align: left; }
  .rule-row__why { grid-column: 2 / -1; }
  .list-row { grid-template-columns: 24px minmax(0, 1fr) 52px; row-gap: var(--s1); }
  .list-row__say { grid-column: 2 / 4; }
  .list-row__num { grid-column: 2 / 4; text-align: left; }
}

@media (max-width: 640px) {
  :root { --t-display: 40px; --gutter: 12px; --inset: var(--s4); }
  body { padding: var(--gutter) var(--gutter) var(--s7); }
  .plate__word { line-height: 46px; }
  .bar { padding: 0 var(--s2) 0 var(--inset); height: 56px; }
  .bar__name { font-size: var(--t-value); }
  .ctl { width: 44px; height: 44px; }
  .cmd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); }
  .cmd__in { grid-column: 2; }
  .key--go { grid-column: 1 / -1; }
  .coin { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: var(--s5); margin-inline: var(--inset); }
  .panel::before {
    --corner: linear-gradient(#000 0 0) no-repeat;
    -webkit-mask: var(--corner) 0 0 / 18px 18px, var(--corner) 100% 0 / 18px 18px, var(--corner) 0 100% / 18px 18px, var(--corner) 100% 100% / 18px 18px;
    mask: var(--corner) 0 0 / 18px 18px, var(--corner) 100% 0 / 18px 18px, var(--corner) 0 100% / 18px 18px, var(--corner) 100% 100% / 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .echo--words .echo__text::after { opacity: 1; }
}