/* Kid zone styles: /play/slice/, /play/slice/ep1, /play/slice/train, /play/slice/ep2. Owner: kid-ui.
   Training and lock styles live in a section marked "train-lock" at the end (owner: train-lock).
   Builds on tokens.css and components.css; never restyles their classes globally. */

/* ---------- reader page ---------- */

.reader {
  padding-block: var(--s5) var(--s16);
}
.reader__title {
  display: grid;
  gap: var(--s1);
  margin-block-end: var(--s6);
}
.reader__ep {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--grape-dark);
}
.reader__name {
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  color: var(--ink);
}

.feed {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.feed__block {
  scroll-margin-block-start: calc(var(--hud-h) + var(--s3));
}

/* ---------- HUD (KX-2): full-bleed ink strip, content on the reader column ---------- */

.hud {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--ink);
  border-block-end: var(--line) solid var(--sun);
}
.hud--static {
  position: static;
}
.hud--static ~ main .feed__block {
  scroll-margin-block-start: var(--s3);
}
.hud__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  max-width: calc(var(--w-reader) + 2 * var(--gutter-reader));
  min-height: calc(var(--hud-h) - var(--line));
  margin-inline: auto;
  padding: var(--s1) var(--gutter-reader);
}
.hud__ep {
  flex: none;
  font-size: var(--fs-base);
  color: var(--sun);
  white-space: nowrap;
}
.hud__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s1) 6px;
}
.hud__pill,
.hud__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hud__pill {
  padding: 3px var(--s2);
  border: var(--line-thin) solid var(--hud-pill);
  border-radius: var(--r-pill);
  background: var(--hud-pill);
  color: var(--white);
}
.hud__time {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--ink);
}
/* 3 minutes or less: coral fill plus a white outline, so the change does not rest on color. */
.hud__time--low {
  background: var(--coral);
  border-color: var(--white);
}
.hud__icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.hud__flag {
  padding: 2px 6px;
  border: var(--line-thin) solid var(--hud-off);
  border-radius: var(--r-panel);
  color: var(--hud-off);
}
.hud__flag--on {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--ink);
}

/* ---------- panels: talk strip, overlays, slot ids, the exact-slice slash ---------- */

.panel__talk .cap--below {
  align-self: flex-start;
}
/* SFX words belong to the art: they scale with the panel, not with the reading text size. */
.panel__art {
  container-type: inline-size;
}
.panel__art .sfx {
  font-size: min(10cqi, 2.75rem);
}
/* Label overlays sit centered on their (x, y); fraction-model overlays start at their (x, y). */
.panel__art .art-label {
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-start: calc(var(--y) * 1%);
  z-index: 1;
  padding: 1px var(--s1);
  white-space: nowrap;
  translate: -50% -50%;
}
.art-overlay--viz {
  position: absolute;
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-start: calc(var(--y) * 1%);
  z-index: 1;
  width: calc(var(--w) * 1%);
  padding: var(--s1);
  background: var(--white);
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--r-panel);
}
.art-placeholder > span {
  max-width: 30ch;
}
.art-slot-id {
  position: absolute;
  inset-inline: var(--s1);
  inset-block-end: var(--s1);
  z-index: 2;
  margin: 0;
  padding: 2px var(--s2);
  background: var(--white);
  border: 1px dashed var(--ink);
  border-radius: var(--r-panel);
  font-size: var(--fs-label);
  line-height: 1.35;
  color: var(--ink);
}
.slash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(155deg, transparent calc(50% - 4px), var(--white) calc(50% - 4px), var(--white) calc(50% + 2px), var(--ink) calc(50% + 2px), var(--ink) calc(50% + 4px), transparent calc(50% + 4px));
}

/* ---------- decision cards ---------- */

.dcard {
  position: relative;
  display: grid;
  gap: var(--s4);
  padding: var(--s4) var(--s3);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-surface);
}
.dcard--slice {
  background: var(--grape-50);
  border-color: var(--grape);
}
.dcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
.dcard__tag {
  padding: 2px 10px;
  background: var(--coral);
  color: var(--ink);
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--r-panel);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--track-display);
  line-height: 1.15;
  transform: rotate(-2deg);
}
.dcard--slice .dcard__tag {
  background: var(--grape);
  color: var(--white);
}
.dcard__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
}
.dcard__prompt {
  font-size: var(--fs-read);
  font-weight: 600;
  line-height: var(--lh-read);
}

/* Story choice options (C2, KX-6). */
.copts {
  display: grid;
  gap: var(--s3);
}
.copt {
  display: grid;
  justify-items: start;
  gap: var(--s1);
  width: 100%;
  min-height: 56px;
  padding: var(--s3);
  background: var(--white);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-control);
  box-shadow: var(--sh-press-sm);
  text-align: start;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-press), box-shadow var(--dur-press) var(--ease-press);
  -webkit-tap-highlight-color: transparent;
}
.copt:active:not([aria-disabled="true"]) {
  transform: translateY(2px);
  box-shadow: var(--sh-pressed);
}
.copt__label {
  font-size: var(--fs-read);
  font-weight: 700;
  line-height: 1.3;
}
.copt__sub {
  font-size: var(--fs-cap);
  line-height: var(--lh-read);
  color: var(--ink-soft);
}
.copt__lock {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-faint);
}
.copt--locked {
  background: var(--locked);
  border-style: dashed;
  border-color: var(--ink-faint);
  box-shadow: none;
  cursor: not-allowed;
}
.copt--locked .copt__label,
.copt--locked .copt__sub {
  color: var(--ink-faint);
}
.copt--picked {
  background: var(--sun);
  cursor: default;
}
.copt--quiet {
  padding: calc(var(--s3) + 1px);
  border-width: var(--line-thin);
  border-color: var(--ink-faint);
  box-shadow: none;
  color: var(--ink-faint);
  cursor: default;
}
.copt--quiet .copt__sub,
.copt--quiet .copt__lock {
  color: var(--ink-faint);
}
.copt__tag,
.sopt__tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  background: var(--white);
  color: var(--ink);
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--r-panel);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Fraction options (KX-3, KX-6, KX-8): three across, at least 96 x 56 at 390px. */
.sopts {
  display: grid;
  gap: var(--s3);
}
.sopts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}
.sopt {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s1);
  min-height: 88px;
  padding: var(--s2) var(--s1);
  background: var(--white);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-control);
  box-shadow: var(--sh-press);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-press), box-shadow var(--dur-press) var(--ease-press);
  -webkit-tap-highlight-color: transparent;
}
.sopt:active:not([aria-disabled="true"]) {
  transform: translateY(3px);
  box-shadow: var(--sh-pressed);
}
@media (hover: hover) {
  .sopt:hover:not([aria-disabled="true"]),
  .copt:hover:not([aria-disabled="true"]) {
    background: var(--sun-50);
  }
}
.sopt--picked {
  background: var(--sun);
  box-shadow: none;
  cursor: default;
}
.sopt--quiet {
  padding: calc(var(--s2) + 1px) calc(var(--s1) + 1px);
  border-width: var(--line-thin);
  border-color: var(--ink-faint);
  box-shadow: none;
  color: var(--ink-faint);
  cursor: default;
}
.sopt--exact {
  background: var(--teal-50);
  border-color: var(--teal-dark);
  box-shadow: none;
  cursor: default;
}
.sopt__tag--exact {
  border-color: var(--teal-dark);
  color: var(--teal-dark);
}
.sopts__stamp {
  justify-self: center;
}
.sopts__stamp--not {
  background: var(--white);
  transform: rotate(3deg);
}
.check-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Ask Tally (B5) ---------- */

.tally-help {
  display: grid;
  gap: var(--s3);
}
.tally-help__list {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hint {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--teal-50);
  border: var(--line-thin) solid var(--teal-dark);
  border-radius: var(--r-control);
  scroll-margin-block: calc(var(--hud-h) + var(--s3)) var(--s4);
}
.hint__body {
  display: grid;
  gap: var(--s1);
}
.hint__label,
.explain__label {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  letter-spacing: var(--track-display);
  line-height: 1.2;
  color: var(--teal-dark);
}
.hint__text {
  font-size: var(--fs-base);
  line-height: 1.45;
}
.hint .viz {
  margin-block-start: var(--s2);
}
.tally-icon {
  width: 36px;
  height: auto;
}
.tally-help__ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
.ask-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s1) var(--s4) var(--s1) var(--s2);
  background: var(--teal);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-press-sm);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-press), box-shadow var(--dur-press) var(--ease-press);
  -webkit-tap-highlight-color: transparent;
}
.ask-btn:active {
  transform: translateY(2px);
  box-shadow: var(--sh-pressed);
}
.ask-btn .tally-icon {
  width: 30px;
}
.tally-help__left {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* ---------- after a pick: Tally explains, the memory chip, Continue ---------- */

.explain {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--teal-50);
  border: var(--line) solid var(--teal-dark);
  border-radius: var(--r-surface);
}
.explain .tally-icon {
  width: 44px;
}
.explain__body {
  display: grid;
  gap: var(--s2);
}
.explain__text {
  font-size: var(--fs-base);
  line-height: 1.45;
}
.explain__eq {
  font-size: var(--fs-lg);
}
.verdict {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px 10px;
  border: var(--line-thin) solid var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}
.verdict--exact {
  background: var(--success-50);
}
.verdict--not {
  background: var(--sun-50);
}

.remember {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 100%;
  padding: 6px var(--s4);
  background: var(--ink);
  color: var(--sun);
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}
.remember::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--sun);
  transform: rotate(45deg);
}

.cont {
  display: flex;
  justify-content: center;
}
.cont .btn {
  min-width: 12rem;
}

/* ---------- fraction models (viz.js) ---------- */

.viz {
  display: grid;
  gap: var(--s2);
  margin: 0;
}
.viz__label {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-soft);
}
.vbars {
  display: grid;
  gap: var(--s2);
  max-width: 26rem;
}
.vbars--caps {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s2);
}
.vbars--marker {
  padding-block-start: 1.9em;
}
.vbars__cap {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.vbar {
  position: relative;
  display: flex;
  width: calc(var(--w) * 100%);
  height: 28px;
  background: var(--white);
  border: var(--line-thin) solid var(--ink);
  border-radius: 4px;
}
.vcell {
  flex: 1 1 0;
  min-width: 0;
}
.vcell + .vcell {
  border-inline-start: var(--line-thin) solid var(--ink);
}
.vcell--group-end + .vcell {
  border-inline-start-width: 5px;
}
.vcell--shaded {
  background: var(--viz-fill);
}
.vcell--striped {
  background: repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--glow) 2px 8px);
}
.vbar__marker {
  position: absolute;
  inset-block: -1.9em -6px;
  inset-inline-start: calc(var(--at) * 100%);
  width: 0;
  border-inline-start: var(--line) solid var(--ink);
  translate: -1.5px 0;
}
.vbar__marker-label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  translate: calc(var(--at) * -100%) 0;
  padding: 0 var(--s1);
  background: var(--sun);
  border: var(--line-thin) solid var(--ink);
  border-radius: 4px;
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.vgrid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--line-thin);
  max-width: calc(var(--cols) * 2rem);
  padding: var(--line-thin);
  background: var(--ink);
}
.vgrid .vcell {
  aspect-ratio: 1;
  background: var(--white);
  border: 0;
}
.vgrid .vcell--shaded {
  background: var(--viz-fill);
}
.vpie {
  width: 8.5rem;
  height: auto;
}
.vmeasure {
  width: 9rem;
  height: auto;
}
.viz-fill {
  fill: var(--viz-fill);
  stroke: var(--ink);
  stroke-width: 2;
}
.viz-empty {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 2;
}
.viz-outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.viz-cross {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.viz-line {
  stroke: var(--ink);
  stroke-width: 2;
}
.viz-mark {
  stroke: var(--grape-dark);
  stroke-width: 3;
  stroke-dasharray: 6 4;
}
.viz-text {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
}
.viz--compact .vbars {
  gap: var(--s1);
}
.viz--compact .vbar {
  height: 16px;
}
.viz--compact .vbars--marker {
  padding-block-start: 1.6em;
}

/* ---------- ending card (KX-1) ---------- */

.ending {
  display: grid;
  gap: var(--s4);
  padding: var(--s5) var(--s4);
  background: var(--space);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-surface);
  text-align: center;
}
.ending__n {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--space-text);
}
.ending__title {
  font-size: var(--fs-4xl);
  letter-spacing: 0.05em;
  color: var(--sun);
}
.ending__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--s4);
  font-size: var(--fs-base);
}
.ending__stats b {
  color: var(--sun);
}
.ending__block {
  display: grid;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--space-2);
  border-radius: var(--r-control);
  text-align: start;
}
.ending__sub {
  font-size: var(--fs-base);
  font-weight: 700;
}
.ending__path {
  display: grid;
  gap: var(--s1);
  margin: 0;
  padding-inline-start: 1.4em;
  font-size: var(--fs-base);
  line-height: 1.4;
}
.ending__path li::marker {
  color: var(--sun);
  font-weight: 700;
}
.dots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dot {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s1);
  text-align: center;
}
.dot__n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--line-thin) dashed var(--space-text);
  border-radius: 50%;
  color: var(--space-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dot--found .dot__n {
  background: var(--sun);
  border-style: solid;
  border-color: var(--sun);
  color: var(--ink);
}
.dot__title {
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.25;
}
.ending__clue {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--space-text);
}
.ending__clue b {
  color: var(--white);
}
.ending__tbc {
  font-size: var(--fs-base);
}
.ending__tbc b {
  color: var(--sun);
}
.ending__links {
  display: grid;
  justify-items: center;
}

/* ---------- replay start card (C5) ---------- */

.replay {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--teal-50);
  border: var(--line) solid var(--teal-dark);
  border-radius: var(--r-surface);
}
.replay .tally-icon {
  width: 56px;
}
.replay__body {
  display: grid;
  gap: var(--s2);
}
.replay__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-display);
  line-height: 1.1;
}
.replay__found {
  font-size: var(--fs-base);
  color: var(--ink-soft);
}
.replay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-block-start: var(--s2);
}

/* ---------- kid start /play/slice/ (KX-2, MA-6) ---------- */

[data-zone="kid"] body.handoff-page {
  background: var(--space);
}
.handoff {
  padding-block: var(--s5) var(--s12);
}
.handoff__col {
  display: grid;
  gap: var(--s5);
}
.handoff__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s2);
  font-size: var(--fs-cap);
}
.handoff__note .link-btn {
  padding-inline: 0;
  font-size: var(--fs-cap);
}
.handoff__art {
  border-color: var(--sun);
  box-shadow: none;
}
.handoff__title {
  font-size: var(--fs-6xl);
  color: var(--sun);
}
.handoff__lede {
  font-size: var(--fs-read);
  line-height: var(--lh-body);
}
.handoff__lede b {
  color: var(--sun);
}
.handoff__found {
  font-weight: 700;
  color: var(--sun);
  font-variant-numeric: tabular-nums;
}
.handoff__meta {
  font-size: var(--fs-sm);
  color: var(--space-text);
  text-align: center;
}
.inapp {
  display: grid;
  gap: var(--s2);
  font-size: var(--fs-cap);
}
.inapp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.inapp__status {
  overflow-wrap: anywhere;
}

/* ---------- train-lock ---------- */
/* /play/slice/train and /play/slice/ep2. Owner: train-lock. Only .train* and .lock* classes live here. */

/* Training header: a night strip with the progress dots (KX-5). */
.train {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}
.train-head {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--space);
  border: var(--line) solid var(--ink);
  border-block-end-color: var(--sun);
  border-radius: var(--r-surface);
}
.train-head__title {
  font-size: var(--fs-5xl);
  color: var(--sun);
}
.train-head__sub {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.train-dots {
  display: flex;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.train-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: var(--line-thin) solid var(--space-text);
  border-radius: var(--r-pill);
}
.train-dot--now {
  border: var(--line) solid var(--sun);
}
.train-dot--done {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--ink);
}
.train-dot .check-icon {
  width: 18px;
  height: 18px;
}
/* Wider screens: dots sit beside the title so the first slice's options stay above the fold. */
@media (min-width: 600px) {
  .train-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title dots" "sub sub";
    align-items: center;
  }
  .train-head__title {
    grid-area: title;
  }
  .train-head__sub {
    grid-area: sub;
  }
  .train-dots {
    grid-area: dots;
  }
}

/* One practice slice: art, the reader's grape slice card, then Tally's explanation and the next button. */
.train-body {
  display: flex;
  flex-direction: column;
}
.train-task,
.train-reward {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.train-task__tag {
  font-weight: 400;
}
.train-task__art,
.train-reward__art {
  margin: 0;
}
.train-task__result {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.train-task__result:empty {
  display: none;
}

/* Reward after the third slice: no score, no count (KX-5). */
.train-reward {
  align-items: stretch;
  text-align: center;
}
.train-reward__title {
  font-size: var(--fs-6xl);
  color: var(--ink);
}
.train-reward__text {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
}

/* Lock: night page, Estimator cover with the COMING SOON stamp, Play again first (decisions E1, B3, B9). */
[data-zone="kid"] .lock-page {
  background: var(--space);
}
.lock {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.lock__cover {
  position: relative;
  padding-block-start: var(--s3);
}
.lock__stamp {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--s3);
  z-index: 1;
}
.lock__art {
  overflow: hidden;
  border: var(--line) solid var(--sun);
  border-radius: var(--r-surface);
}
.lock__title {
  font-size: var(--fs-5xl);
  line-height: 1.02;
  color: var(--sun);
}
.lock__bubble {
  color: var(--ink);
}
.lock__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
.lock__found {
  color: var(--space-text);
  font-size: var(--fs-cap);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lock__grownup {
  margin-block-start: var(--s2);
}