/* ── blueskydl ───────────────────────────────────────────────────────────────
   The page is a ringer's record card. Rules are printed, boxes wait to be
   filled, and a colour-ring code marks every measurement. See DESIGN.md.
   ─────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--z7) var(--z10);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* The card sits on a field desk: faint ruling shows through the ground. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(var(--z9) var(--line), transparent var(--line));
  background-size: 100% 2rem;
  opacity: 0.55;
}

body > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--z10);
}
::-webkit-scrollbar-thumb {
  background: var(--z7);
  border: 3px solid var(--z10);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--z6);
}

img {
  max-width: 100%;
  height: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--z10);
  padding: 0.6rem 1rem;
  z-index: 40;
  text-decoration: none;
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ── card frame ───────────────────────────────────────────────────────────── */

.mast,
.deck,
.foot {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
}

.mast {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: var(--gap-wide) 0 var(--gap);
  border-bottom: 2px solid var(--ink);
}

.ident {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--face-label);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.ident::before {
  content: "";
  width: 0.7rem;
  height: 1.15rem;
  border-radius: 1px;
  /* The ring itself: three coded bands, the scheme's own identifier. */
  background: linear-gradient(
    var(--ring-blue) 0 33.3%,
    var(--ring-metal) 33.3% 66.6%,
    var(--ring-red) 66.6% 100%
  );
  box-shadow: inset 0 0 0 1px rgba(16, 21, 15, 0.25);
  transform: translateY(0.12rem);
}

.ident--static {
  cursor: default;
}

.nav {
  font-family: var(--face-label);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav ul,
.langs ul {
  display: flex;
  gap: var(--gap-wide);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navlink__p {
  font-family: var(--face-code);
  color: var(--ink-faint);
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}
.nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.screen__clock,
.screen__page {
  font-family: var(--face-code);
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.deck {
  padding-block: var(--gap-band) var(--gap-section);
}

/* ── the record itself ────────────────────────────────────────────────────── */

.screen {
  background: var(--card);
  border: var(--line) solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  overflow: hidden;
}

.screen__body {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.dh {
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 var(--gap) 0;
  text-wrap: balance;
  max-width: 20ch;
}

.lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  margin: 0 0 var(--gap-tight) 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* The ceiling, stated before anyone can be disappointed by it. */
.lede--flag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--face-label);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent-pale);
  border-left: var(--line) solid var(--accent);
  padding: 0.35rem 0.7rem;
  margin-bottom: var(--gap-wide);
}

/* ── the field you write in ───────────────────────────────────────────────── */

.addr {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label label"
    "field go"
    "hint  hint";
  gap: var(--gap-tight) var(--gap);
  align-items: stretch;
  margin-top: var(--gap-wide);
}

.addr__label {
  grid-area: label;
  font-family: var(--face-label);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.addr__field {
  grid-area: field;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--z10);
  border: var(--line) solid var(--rule-strong);
  /* The writing line of a ruled form. */
  border-bottom-width: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 0.75rem;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.addr__field:focus-within {
  border-bottom-color: var(--accent);
  background: #fff;
}

.addr__caret {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: border-color 0.15s var(--ease);
}
.addr__field:focus-within .addr__caret,
.addr__field.is-filled .addr__caret {
  border-color: var(--accent);
}

.addr__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--face-code);
  font-size: var(--step-0);
  color: var(--ink);
  caret-color: var(--accent);
  padding: 0.85rem 0;
}
.addr__input:focus {
  outline: none;
}
.addr__input::placeholder {
  color: var(--ink-faint);
  font-family: var(--face);
}

.addr__clear {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--face-label);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.4rem;
}
.addr__clear:hover {
  color: var(--fault);
}

.addr__hint {
  grid-area: hint;
  margin: var(--gap-hair) 0 0 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ── stamps ───────────────────────────────────────────────────────────────── */

.key {
  grid-area: go;
  font-family: var(--face-label);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: var(--line) solid var(--accent);
  border-radius: var(--radius);
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--lift);
  transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease),
    transform 0.1s var(--ease);
}
.key:hover {
  background: #1339a4;
  box-shadow: var(--lift-raised);
}
.key:active {
  transform: translateY(1px);
  box-shadow: none;
}
.key[aria-busy="true"] {
  background: var(--ink-faint);
  border-color: var(--ink-faint);
  cursor: progress;
}
.key:disabled {
  background: var(--z8);
  border-color: var(--z8);
  color: var(--z5);
  cursor: not-allowed;
  box-shadow: none;
}

.key--danger {
  background: var(--fault);
  border-color: var(--fault);
}
.key--danger:hover {
  background: #a91b1b;
}

.key--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
  box-shadow: none;
}
.key--ghost:hover {
  background: var(--z9);
  border-color: var(--ink);
  box-shadow: none;
}

.noscript {
  margin: var(--gap) 0 0 0;
  font-size: var(--step--1);
}

/* ── the filled-in record ─────────────────────────────────────────────────── */

.out:not(:empty) {
  border-top: var(--line) solid var(--rule);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--z10);
}

.row {
  display: flex;
  align-items: baseline;
  gap: var(--gap);
  flex-wrap: wrap;
}

/* The ring number: a stamped code, mono because it is one. */
.code {
  font-family: var(--face-code);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  background: var(--z8);
  color: var(--ink);
  white-space: nowrap;
}
.code--err {
  background: var(--fault);
  color: #fff;
}
.code--ok {
  background: var(--recorded);
  color: #fff;
}
.code--busy {
  background: var(--hold);
  color: var(--z0);
}

.row__line {
  font-weight: 500;
}

.row__fix {
  margin: var(--gap-tight) 0 0 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
  max-width: 60ch;
}

.res {
  display: grid;
  gap: var(--gap-wide);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
}

.res__pic {
  margin: 0;
  border: var(--line) solid var(--rule-strong);
  background: var(--card);
  padding: 0.4rem;
  box-shadow: var(--lift);
}
.res__pic img {
  display: block;
  width: 100%;
  border-radius: 1px;
}
.res__pic figcaption {
  font-family: var(--face-label);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.4rem;
}
.res__pic--empty {
  display: grid;
  place-items: center;
  min-height: 8rem;
  color: var(--ink-faint);
  font-size: var(--step--1);
  text-align: center;
}

.res__title {
  font-size: var(--step-2);
  line-height: 1.25;
  margin: 0 0 var(--gap-tight) 0;
  text-wrap: pretty;
}

.res__meta {
  margin: 0 0 var(--gap-wide) 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.res__meta b {
  font-family: var(--face-code);
  font-variant-numeric: tabular-nums;
}

.ladder__h {
  font-family: var(--face-label);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--gap-tight) 0;
  padding-bottom: var(--gap-hair);
  border-bottom: 2px solid var(--ink);
}

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One ruled row per rung, like measurements down a card. */
.q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--gap);
  padding: 0.7rem 0;
  border-bottom: var(--line) solid var(--rule);
}

.q__label {
  font-family: var(--face-code);
  font-weight: 600;
  font-size: var(--step-0);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
/* Each rung wears its ring colour. */
.q__label::before {
  content: "";
  width: 0.55rem;
  height: 1.1rem;
  border-radius: 1px;
  background: var(--ring-metal);
  box-shadow: inset 0 0 0 1px rgba(16, 21, 15, 0.25);
}
.q:first-child .q__label::before {
  background: var(--ring-blue);
}
.q:nth-child(2) .q__label::before {
  background: var(--ring-green);
}

.q__dims,
.q__size {
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.q__size small {
  color: var(--ink-faint);
}

.q .key {
  grid-area: auto;
  padding: 0.5rem 1rem;
  font-size: var(--step--1);
}

/* Rungs Bluesky does not have, drawn on purpose rather than hidden.
   An empty box on a record card means "measured, absent" — not "forgotten". */
.q--absent {
  color: var(--ink-faint);
}
.q--absent .q__label {
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
  color: var(--ink-faint);
}
.q--absent .q__label::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--z7);
}
.q--absent .q__note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  grid-column: 2 / -1;
}

.ladder__note,
.res__links {
  margin: var(--gap) 0 0 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
  max-width: 60ch;
}
.res__links a {
  color: var(--accent);
}

/* ── recording in progress ────────────────────────────────────────────────── */

.dl__head {
  display: flex;
  align-items: baseline;
  gap: var(--gap);
  flex-wrap: wrap;
  padding-bottom: var(--gap-tight);
  border-bottom: 2px solid var(--ink);
}

.dl__h {
  font-size: var(--step-1);
  margin: 0;
  flex: 1 1 auto;
}

.dl__count {
  font-family: var(--face-code);
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.dl__pct {
  font-family: var(--face-code);
  font-size: var(--step-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* The signature moment: one box per segment, filling as each one lands.
   This is the whole answer to "is it broken?" — you can count the work. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr));
  gap: 0.3rem;
  margin: var(--gap) 0;
}

.mosaic i {
  display: block;
  aspect-ratio: 3 / 2;
  border: var(--line) solid var(--rule);
  border-radius: 1px;
  background: var(--card);
}

.mosaic i.on {
  background: var(--accent);
  border-color: var(--accent);
  animation: ignite 0.32s var(--ease) both;
}

.mosaic i.now {
  border-color: var(--accent);
  background: var(--accent-pale);
  animation: pulse 1.1s ease-in-out infinite;
}

.mosaic--done i.on {
  background: var(--recorded);
  border-color: var(--recorded);
  animation: none;
}

@keyframes ignite {
  from {
    transform: scale(0.72);
    opacity: 0.3;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0%,
  100% {
    background: var(--accent-pale);
  }
  50% {
    background: var(--card);
  }
}

.mosaic--still i {
  background: var(--z8);
  border-color: var(--z7);
}
.mosaic--still i.on {
  background: var(--accent);
  border-color: var(--accent);
  animation: none;
}
.mosaic--still i.now {
  background: var(--accent-pale);
  animation: none;
}

.dl__warn {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0 0 var(--gap) 0;
  max-width: 60ch;
}

.dl__acts {
  display: flex;
  gap: var(--gap-tight);
  flex-wrap: wrap;
}
.dl__acts .key {
  grid-area: auto;
}

/* ── image results ────────────────────────────────────────────────────────── */

.plate {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--gap);
  list-style: none;
  margin: var(--gap) 0 0 0;
  padding: 0;
}

.plate__item {
  border: var(--line) solid var(--rule-strong);
  background: var(--card);
  padding: 0.4rem;
  box-shadow: var(--lift);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plate__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--z9);
  border-radius: 1px;
}

.plate__meta {
  font-family: var(--face-code);
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.plate__item .key {
  grid-area: auto;
  width: 100%;
  padding: 0.5rem;
  font-size: var(--step--1);
}

/* ── prose bands ──────────────────────────────────────────────────────────── */

.page {
  margin-top: var(--gap-section);
}

.page__bar,
.screen__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  padding-bottom: var(--gap-tight);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--gap-wide);
}

.screen__name,
.doc__h,
.demo__h {
  font-family: var(--face-label);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

.doc {
  max-width: var(--measure);
}
.doc + .doc {
  margin-top: var(--gap-band);
}
.doc__h {
  margin-bottom: var(--gap-tight);
  padding-bottom: var(--gap-hair);
  border-bottom: var(--line) solid var(--rule);
}
.doc__p {
  margin: 0 0 var(--gap) 0;
  text-wrap: pretty;
}
.doc__p:last-child {
  margin-bottom: 0;
}
.doc a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.doc a:hover {
  text-decoration-thickness: 2px;
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-wide);
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
  padding-bottom: var(--gap-wide);
  border-bottom: var(--line) solid var(--rule);
}
.step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Numbered because the sequence is the information: you cannot join
   segment four before segment three. */
.step__n {
  font-family: var(--face-code);
  font-size: var(--step--1);
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 0.15rem 0.5rem;
  font-variant-numeric: tabular-nums;
}

.step__t {
  font-size: var(--step-1);
  font-weight: 600;
  margin: 0 0 var(--gap-hair) 0;
}
.step__b {
  margin: 0;
  color: var(--ink-soft);
  max-width: 58ch;
  text-wrap: pretty;
}

.qas {
  display: grid;
  gap: 0;
  max-width: var(--measure);
}

.qa {
  border-bottom: var(--line) solid var(--rule);
  padding: var(--gap) 0;
}
.qa__q {
  font-size: var(--step-1);
  font-weight: 600;
  margin: 0 0 var(--gap-hair) 0;
  text-wrap: pretty;
}
.qa__a {
  margin: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.qa__a a {
  color: var(--accent);
}

.teases {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tease {
  border-bottom: var(--line) solid var(--rule);
}

.tease__a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap);
  align-items: baseline;
  padding: var(--gap) 0.6rem;
  margin-inline: -0.6rem;
  text-decoration: none;
  color: inherit;
  /* Padding stays put: animating it thrashes layout. The shift is a transform. */
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.tease__a:hover {
  background: var(--z9);
  transform: translateX(3px);
}

.tease__t {
  font-size: var(--step-1);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.tease__p {
  grid-column: 1 / -1;
  margin: var(--gap-hair) 0 0 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
  max-width: 60ch;
}
.tease__b {
  font-family: var(--face-code);
  font-size: var(--step--1);
  color: var(--ink-faint);
  white-space: nowrap;
}

.more,
.note,
.updated {
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.more a {
  color: var(--accent);
}

.fastext {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-top: var(--gap-wide);
  padding-top: var(--gap);
  border-top: var(--line) solid var(--rule);
  font-family: var(--face-label);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fastext a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.fastext a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.demo {
  margin-top: var(--gap-band);
}
.demo__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--gap-tight);
  margin-bottom: var(--gap);
}
.demo__count {
  font-family: var(--face-code);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.demo__cap,
.shot__cap {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin: var(--gap-tight) 0 0 0;
}
.shot {
  margin: var(--gap) 0 0 0;
}
.shot__img {
  border: var(--line) solid var(--rule-strong);
  background: var(--card);
}

/* ── foot ─────────────────────────────────────────────────────────────────── */

.foot {
  border-top: 2px solid var(--ink);
  padding: var(--gap-wide) 0 var(--gap-section) 0;
  display: grid;
  gap: var(--gap);
}

.foot__line {
  display: flex;
  gap: var(--gap-wide);
  flex-wrap: wrap;
  font-family: var(--face-label);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.foot__line a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.foot__line a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.foot__legal {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin: 0;
  max-width: var(--measure);
}

.langs {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  font-size: var(--step--1);
}

/* ── narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  /* The clock and page number are card-stock flourishes, not information.
     On a phone they crowd the two things that identify the site. */
  .screen__clock,
  .screen__page {
    display: none;
  }
  .screen__name {
    font-size: var(--step-0);
    color: var(--ink-soft);
  }
  .mast {
    padding-top: var(--gap);
  }
  .nav ul {
    gap: var(--gap);
  }
  .dh {
    max-width: none;
  }
  .lede {
    font-size: var(--step-0);
    line-height: 1.5;
  }
  .addr {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "field"
      "go"
      "hint";
  }
  .key--go {
    width: 100%;
  }
  .res {
    grid-template-columns: minmax(0, 1fr);
  }
  .res__pic {
    max-width: 16rem;
  }
  .q {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--gap-tight);
  }
  .q .key {
    grid-column: 1 / -1;
  }
  .q__size {
    text-align: right;
  }
}

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