:root {

  --text-scale: 1;
  --face-fraction: 0.3;

  --mark-frac: 0.8;
  --floor-frac: 0.95;

  --sway-deg: 0.35;

  --cam-origin-y: 0.3;

  --ref-w: 375;
  --ref-h: 440;
  --ref-inset: 16;
  --art-ar: 1.5;
  --read-thumb-n: 0;
  --read-slack-n: 0.0625;

  --head-cx: 0.5;
  --head-cy: 0.5;
  --head-wr: 1;
  --head-hr: 1;
  --push: 1;
  --read-strip: 0px;
  --read-thumb: 0px;
  --bg-zoom: 1;

  --read-slack: 0.0625px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

svg.sprite { display: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;

  background: var(--paper-gate);

  font-family: Andika, system-ui, sans-serif;
  font-size: var(--size-body);
  line-height: var(--line);
  color: var(--ink);
}

#app { display: block; }

#app > main {
  position: relative;
  display: flex;
  flex-direction: column;

  min-height: 100vh;
  min-height: 100dvh;

  border-style: solid;
  border-color: var(--border-paint);

  border-width: var(--pad);
  border-width: calc(var(--pad) + var(--safe-top))
                calc(var(--pad) + var(--safe-right))
                calc(var(--pad) + var(--safe-bottom))
                calc(var(--pad) + var(--safe-left));
  padding: 0;

  background: var(--paper);
  overflow-y: auto;

  max-width: calc(var(--font-at-scale) * 40);
  margin-inline: auto;
}

@media (min-aspect-ratio: 5/4) {
  #app > main:has(> .picture) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "rail  rail"
                         "band  words"
                         "band  controls";
    column-gap: var(--pad);
    max-width: calc(var(--font-at-scale) * 68);
  }
  #app > main:has(> .picture) > .rail { grid-area: rail; }
  #app > main:has(> .picture) > .picture { grid-area: band; }
  #app > main:has(> .picture) > .text { grid-area: words; }
  #app > main:has(> .picture) > .controls { grid-area: controls; }

  #app > main:has(> .picture) > .text {

    margin: 0 var(--pad) 0 0;

    align-self: safe center;
  }
  #app > main:has(> .picture) > .controls { padding: var(--pad) var(--pad) 0 0; }
}

.rail {
  flex: 0 0 auto;
  height: var(--rail);
  display: flex;
  align-items: center;
  gap: calc(var(--pad) / 4);
  padding: 0 var(--pad);

  background: var(--paper);
}

.rail > i {
  display: block;
  flex: 1 1 0;
  height: calc(var(--rail) / 4);
  background: var(--card);
  opacity: 0.35;
}

.rail > i[data-done="true"] { opacity: 1; }

.picture {
  position: relative;
  flex: 1 1 auto;

  min-height: calc((100dvh - var(--chrome)) * var(--face-fraction));
  min-height: calc((100dvh - var(--chrome) - var(--safe-top) - var(--safe-bottom))
                   * var(--face-fraction));
  overflow: hidden;
  background: var(--paper);

  --frame-inset: var(--pad);

  --paint-h: max(100cqh, calc(100cqw / var(--art-ar)));
  --paint-w: calc(var(--paint-h) * var(--art-ar));
  --paint-x: calc((100cqw - var(--paint-w)) * var(--crop-x, 0.5));
  --paint-y: calc(100cqh - var(--paint-h));
  --ref-paint-h: max(var(--ref-h), calc(var(--ref-w) / var(--art-ar)));
  --ref-x0: calc((var(--ref-w) - var(--ref-paint-h) * var(--art-ar)) * var(--crop-x, 0.5));
  --ref-y0: calc(var(--ref-h) - var(--ref-paint-h));
  --paint-k: calc(var(--paint-h) / var(--ref-paint-h));

  --view-z: 1;
  --view-tx: 0;
  --view-ty: 0;
}

.picture > .scene {
  position: absolute;
  inset: 0;

  container-type: size;
}

.picture > .backdrop {
  position: absolute;
  inset: 0;

  background-position: calc(var(--crop-x, 0.5) * 100%) bottom;
  background-size: cover;
  background-repeat: no-repeat;

}

.picture[data-framing] > .backdrop {
  background-size: calc(var(--view-bw) * 1px) calc(var(--view-bh) * 1px);
  background-position: calc(var(--view-bx) * 1px) calc(var(--view-by) * 1px);
}

.picture > .backdrop::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: color-mix(in srgb, var(--paper) 22%, transparent);
}

.picture > .backdrop.matte {
  z-index: 2;
  clip-path: var(--matte-clip, none);

  pointer-events: none;
}

.picture > .backdrop.matte::after { content: none; }

.mark {
  position: absolute;
  inset: 0;
  z-index: 1;

  --mark-scale: 1;
  --floor: var(--floor-frac);

  --ref-fig: calc(var(--mark-scale)
                  * max(calc(var(--mark-frac) * var(--ref-h)),
                        calc((var(--read-thumb-n) + var(--read-slack-n)) / var(--read-hr, var(--head-hr)))));
  --ref-head-w: calc(var(--ref-fig) * var(--head-wr));
  --ref-head-h: calc(var(--ref-fig) * var(--head-hr));
  --ref-head-x: clamp(calc(var(--ref-head-w) / 2 + var(--ref-inset)),
                      calc(var(--slot-x, 0.5) * var(--ref-w)),
                      calc(var(--ref-w) - var(--ref-head-w) / 2 - var(--ref-inset)));
  --ref-head-y: clamp(calc(var(--ref-head-h) / 2 + var(--ref-inset)),
                      calc((var(--floor) - (1 - var(--head-cy))
                            * var(--mark-frac) * var(--mark-scale)) * var(--ref-h)),
                      calc(var(--ref-h) - var(--ref-head-h) / 2 - var(--ref-inset)));
  --ref-feet: calc(var(--ref-head-y) + (1 - var(--head-cy)) * var(--ref-fig));

  --w-grow: 1;
  --fig-h: calc(var(--ref-fig) * var(--paint-k) * var(--w-grow));
  --read-floor-h: calc(var(--mark-scale) * (var(--read-thumb) + var(--read-slack))
                       / var(--read-hr, var(--head-hr)));

  --wide-h: var(--fig-h);
  --wide-x: calc(var(--paint-x) + (var(--ref-head-x) - var(--ref-x0)) * var(--paint-k));
  --wide-feet: calc(var(--paint-y) + (var(--ref-feet) - var(--ref-y0)) * var(--paint-k));
  --wide-y: calc(var(--wide-feet) - (1 - var(--head-cy)) * var(--wide-h));

  --rig-h: calc(var(--fig-h) * var(--view-z));
  --place-x: calc(var(--wide-x) * var(--view-z) + var(--view-tx) * 1px);
  --place-y: calc(var(--wide-feet) * var(--view-z) + var(--view-ty) * 1px
                  - (1 - var(--head-cy)) * var(--rig-h));
  --head-h: calc(var(--rig-h) * var(--head-hr));
  --head-w: calc(var(--rig-h) * var(--head-wr));
}

.mark > .rig {
  position: absolute;
  left: var(--place-x);
  top: var(--place-y);
  height: var(--rig-h);
  width: auto;
  transform: translate(calc(var(--head-cx) * -100%), calc(var(--head-cy) * -100%));
}

.prop {
  position: absolute;
  z-index: 1;
  --floor: var(--floor-frac);

  --wide-prop-h: calc(var(--prop-scale, 0) * var(--ref-h) * var(--paint-k));
  --wide-x: calc(var(--paint-x)
                 + (var(--slot-x, 0.5) * var(--ref-w) - var(--ref-x0)) * var(--paint-k));
  --wide-y: calc(var(--paint-y)
                 + (var(--floor) * var(--ref-h) - var(--ref-y0)) * var(--paint-k));
  --prop-h: calc(var(--wide-prop-h) * var(--view-z));
  left: calc(var(--wide-x) * var(--view-z) + var(--view-tx) * 1px);
  top: calc(var(--wide-y) * var(--view-z) + var(--view-ty) * 1px);
  height: var(--prop-h);
  width: calc(var(--prop-h) * var(--prop-ar, 1));
  transform: translate(-50%, -100%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.bgchild {
  position: absolute;
  z-index: 1;
  --floor: var(--floor-frac);
  --wide-bg-h: calc(var(--bg-scale, 0) * var(--ref-h) * var(--paint-k));
  --wide-x: calc(var(--paint-x)
                 + (var(--slot-x, 0.5) * var(--ref-w) - var(--ref-x0)) * var(--paint-k));
  --wide-y: calc(var(--paint-y)
                 + (var(--floor) * var(--ref-h) - var(--ref-y0)) * var(--paint-k));
  --bg-h: calc(var(--wide-bg-h) * var(--view-z));
  left: calc(var(--wide-x) * var(--view-z) + var(--view-tx) * 1px);
  top: calc(var(--wide-y) * var(--view-z) + var(--view-ty) * 1px);
  height: var(--bg-h);
  width: calc(var(--bg-h) * var(--bg-ar, 1));

  transform: translate(-50%, -100%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  filter: blur(var(--bg-blur, 0px));

  pointer-events: none;
}

.layer {
  position: absolute;
  z-index: 1;
  --wide-x: calc(var(--paint-x) + var(--layer-x, 0) * var(--paint-w));
  --wide-y: calc(var(--paint-y) + var(--layer-y, 0) * var(--paint-h));
  --wide-layer-w: calc(var(--layer-w, 0) * var(--paint-w));
  --wide-layer-h: calc(var(--layer-h, 0) * var(--paint-h));
  left: calc(var(--wide-x) * var(--view-z) + var(--view-tx) * 1px);
  top: calc(var(--wide-y) * var(--view-z) + var(--view-ty) * 1px);
  width: calc(var(--wide-layer-w) * var(--view-z));
  height: calc(var(--wide-layer-h) * var(--view-z));
  background-size: 100% 100%;
  background-repeat: no-repeat;

  pointer-events: none;
}

.picture .mark[data-framed="false"],
.picture .prop[data-framed="false"] { visibility: hidden; }

.mark[data-facing="mirrored"] > .rig {
  transform-origin: 50% 50%;
  transform: translate(calc((1 - var(--head-cx)) * -100%),
                       calc(var(--head-cy) * -100%)) scaleX(-1);
}

.picture[data-camera="face"] .mark[data-foreground="true"] {
  z-index: 2;
}

.picture[data-camera="face"] .mark:not([data-foreground="true"]) .shadow {
  display: none;
}

.mark[data-speaking="true"] {
  z-index: 2;
  --w-grow: 1.06;
}

.scene[data-stacked="true"][data-layered="true"] .mark[data-speaking="true"],
.scene[data-stacked="true"][data-layered="true"] .mark[data-foreground="true"] {
  z-index: 1;
}

.tag {
  position: absolute;
  left: var(--place-x);
  top: calc(var(--place-y) - var(--head-h) / 2 - var(--pad) * 0.35);

  transform: translate(calc(-50% + var(--tag-dx, 0px)),
                       calc(-100% + var(--tag-dy, 0px))) rotate(-3deg);
  padding: calc(var(--pad) * 0.15) calc(var(--pad) * 0.55);
  background: var(--card);
  color: var(--ink);
  font-size: var(--size-speaker);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: var(--shadow-paper);
  clip-path: var(--cut-edge);
  pointer-events: none;
}

.rig .face * { stroke-width: var(--face-line); }

.text {
  position: relative;

  flex: 0 1 auto;
  min-height: 0;

  margin: calc(var(--pad) * -1) var(--pad) 0;
  padding: calc(var(--pad) * 1.5) var(--pad) var(--pad);
  background: var(--card);
  color: var(--ink);
  clip-path: var(--cut-edge);
  box-shadow: var(--shadow-card);
  transform: rotate(-0.6deg);

  overflow: visible;
  hyphens: none;
}

.pin {
  position: absolute;
  top: calc(var(--pad) * -0.55);
  left: var(--pad);
  width: calc(var(--pad) * 1.75);
  height: calc(var(--pad) * 1.75);
  overflow: visible;
}

.page-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--pad) * 1.25);
  height: calc(var(--pad) * 1.25);
  background: linear-gradient(315deg, var(--paper) 50%, transparent 50%);
  border-top-left-radius: 2px;
  pointer-events: none;
}

.text > p { margin: 0 0 calc(var(--pad) * 0.75); }
.text > p:last-child { margin-bottom: 0; }

.prompt { font-weight: 700; font-size: var(--size-prompt); }

.text b {
  font-size: var(--size-speaker);
  font-weight: 700;
}

.controls {
  flex: 0 0 auto;

  margin-top: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--target-gap);
  padding: var(--pad);
}

fieldset {
  border: 0;
  margin: calc(var(--pad) * 0.75) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--target-gap);
}

legend { padding: 0; }

button {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--pad) * 0.5);
  width: 100%;
  min-height: var(--target-min);
  padding: calc(var(--pad) * 0.5) var(--pad);
  font: inherit;
  font-size: var(--size-body);
  text-align: left;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-paper);
  cursor: pointer;
}

.controls button {
  width: auto;
  flex: 1 1 0;
  justify-content: center;
  padding: calc(var(--pad) * 0.25) calc(var(--pad) * 0.5);
  text-align: center;
}

.controls .word { font-size: var(--size-speaker); line-height: 1.15; }

.controls button[data-control="back"],
.controls button[data-control="home"],
.controls button[data-control="choices-close"] {
  flex: 0 0 var(--target-min);
  width: var(--target-min);
  padding: 0;
}

.controls button[data-control="next"],
.controls button[data-control="commit"] {
  flex: 1.4 1 0;
  border-width: 3px;
  font-weight: 700;
}

.glyph {
  flex: 0 0 auto;
  display: block;
  width: calc(var(--font-at-scale) * 1.1);
  height: calc(var(--font-at-scale) * 1.1);
  fill: var(--ink);
}

[data-view="faces"] .controls .word {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[data-view="faces"] .controls button { padding: 0; }

[aria-checked="true"] {
  border-width: 4px;
  font-weight: 700;
}

[aria-checked="true"]::before {
  content: "";
  flex: 0 0 auto;
  width: calc(var(--font-at-scale) * 0.9);
  height: calc(var(--font-at-scale) * 0.9);
  background: var(--ink);
  clip-path: polygon(12% 50%, 25% 37%, 42% 56%, 75% 17%, 90% 27%, 42% 83%);
}

.cue-n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--font-at-scale) * 1.1);
  height: calc(var(--font-at-scale) * 1.1);
  background: var(--ink);
  color: var(--card);
  font-size: calc(var(--font-at-scale) * 0.7);
  font-weight: 700;
  clip-path: var(--cut-edge);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

[disabled] { opacity: 0.5; cursor: default; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[data-present="text"] .controls button[data-control="hear-again"] { display: none; }

[data-present="audio"][data-kind="beat"] .text { display: none; }

[data-present="audio"][data-kind="beat"] .text[data-fallback="true"],
[data-present="audio"][data-kind="beat"] .text[data-revealed="true"] { display: block; }

.words-tab {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  min-width: var(--target-min);
  min-height: var(--target-min);
  justify-content: center;
  clip-path: var(--cut-edge);
  z-index: 3;
}

.voice {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--pad) * 0.5);
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  z-index: 2;
}

.voice > i {
  display: block;
  height: 100%;
  width: calc(var(--played, 0) * 100%);
  background: var(--paint-sunflower);
  transition: width var(--dur-swap) linear;
}

.text > p[data-speaking="true"] {
  background-image: linear-gradient(var(--paint-sunflower), var(--paint-sunflower));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% calc(var(--font-at-scale) * 0.28);
}

@keyframes settle {
  from { transform: translateY(calc(var(--pad) * -0.5)) rotate(-1.6deg); opacity: 0; }
  to   { transform: rotate(-0.6deg); opacity: 1; }
}

@keyframes pin {
  from { transform: scale(0.2); }
  to   { transform: scale(1); }
}

@keyframes breathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -0.6%; }
}

@keyframes sway {
  0%, 100% { rotate: calc(var(--sway-deg) * -1deg); }
  50%      { rotate: calc(var(--sway-deg) *  1deg); }
}

@property --slot-x {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.5;
}

@keyframes walk-x { from { --slot-x: var(--walk-from); } }

main[data-register="alive"] .mark[data-walk="true"] {
  animation: walk-x var(--walk-ms) linear both;
}

@keyframes cast-push {
  from { height: var(--wide-h); left: var(--wide-x); top: var(--wide-y); }
}

@keyframes cam-in {
  from {
    background-size: calc(var(--view0-bw) * 1px) calc(var(--view0-bh) * 1px);
    background-position: calc(var(--view0-bx) * 1px) calc(var(--view0-by) * 1px);
    clip-path: var(--matte-clip0, none);
  }
}

.text { animation: settle var(--dur-settle) var(--ease) both; }
.pin { animation: pin var(--dur-swap) var(--ease) both; }
.mark > .rig { animation: breathe 4s var(--ease) infinite; }

main[data-register="alive"] .mark > .rig {
  animation: breathe 4s var(--ease) infinite,
             sway 8s var(--ease) infinite;

  transform-origin: 50% 100%;
}

.picture[data-camera="face"] .mark[data-foreground="true"] > .rig {
  animation: cast-push var(--dur-push) var(--ease) both;
}

.picture[data-camera="face"] .mark:not([data-foreground="true"]) > .rig {
  animation: cast-push var(--dur-push) var(--ease) both,
             breathe 4s var(--ease) infinite;
}

@keyframes prop-push {
  from { height: var(--wide-prop-h); left: var(--wide-x); top: var(--wide-y); }
}

.picture[data-camera="face"] .prop {
  animation: prop-push var(--dur-push) var(--ease) both;
}

@keyframes layer-push {
  from {
    left: var(--wide-x); top: var(--wide-y);
    width: var(--wide-layer-w); height: var(--wide-layer-h);
  }
}

.picture[data-camera="face"] .layer {
  animation: layer-push var(--dur-push) var(--ease) both;
}

.picture[data-camera="face"] .backdrop {
  animation: cam-in var(--dur-push) var(--ease) both;
}

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

[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-contrast: more) {
  button { box-shadow: none; }

  .mark .shadow { display: none; }
  button { border-width: 3px; }
  .tag { box-shadow: none; border: 2px solid var(--ink); }
}

#app > main[data-kind="shelf"] > .text,
#app > main[data-kind="grownups-gate"] > .text {

  margin-top: var(--pad);
}

#app > main[data-kind="shelf"] > .text > h1 {
  font-size: calc(var(--font-at-scale) * 1.5);
  line-height: 1.15;
}

#app > main[data-kind="shelf"] > nav.shelf {
  display: flex;
  flex-direction: column;
  gap: var(--target-gap);
  padding: var(--pad);
  margin: 0;
}

#app > main[data-kind="shelf"] .shelf > a,
#app > main[data-kind="grownups-gate"] .gate-extras > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--pad) * 0.5);
  width: 100%;
  min-height: var(--target-min);
  padding: calc(var(--pad) * 0.5) var(--pad);
  font: inherit;
  font-size: var(--size-body);
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-paper);
  clip-path: var(--cut-edge);
}

#app > main[data-kind="shelf"] > nav.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--font-at-scale) * 15), 1fr));
  align-items: start;
}

.shelf-title { flex: 1 1 auto; }

#app > main[data-kind="shelf"] .shelf > a > .pin,
#app > main[data-kind="shelf"] .shelf > a > .tick {

  position: static;
  flex: 0 0 auto;
  width: var(--size-body);
  height: var(--size-body);
}

#app > main[data-kind="shelf"] .shelf > a[aria-current="true"] {
  border-width: 4px;
  font-weight: 700;
}

@media (prefers-contrast: more) {
  #app > main[data-kind="shelf"] .shelf .played.visually-hidden,
  #app > main[data-kind="shelf"] .shelf .paused.visually-hidden {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
  }
}

.slot {
  display: block;
  width: 100%;
  min-height: var(--target-min);
  margin: calc(var(--pad) * 0.5) 0 0;
  padding: calc(var(--pad) * 0.5) var(--pad);
  font: inherit;
  font-size: var(--size-body);
  color: var(--ink);
  background: var(--card);

  border: 3px solid var(--ink);
  border-radius: 0;
}

.hint,
.gate-wrong { margin: calc(var(--pad) * 0.5) 0 0; font-size: var(--size-speaker); }

.gate-wrong:empty { display: none; }

[data-armed="true"] { border-width: 4px; }

#app > main[data-kind="grownups-gate"] > nav.gate-extras {
  display: flex;
  flex-direction: column;
  gap: var(--target-gap);
  padding: 0 var(--pad);
  margin: var(--target-gap) 0 0;
}

#app > main[data-kind="grownups"] > .text { margin-top: var(--target-gap); }
#app > main[data-kind="grownups"] > .text:first-of-type { margin-top: var(--pad); }

.played-list {
  list-style: none;
  margin: calc(var(--pad) * 0.5) 0 0;
  padding: 0;
}
.played-list > li { padding: calc(var(--pad) * 0.25) 0; }

.choice-list {
  list-style: none;
  margin: calc(var(--pad) * 0.75) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--target-gap);
}
.choice-note { font-size: var(--size-speaker); }

#app > main[data-view="choice"] h2,
#app > main[data-view="choice"] h3 {
  margin: 0;
  font-size: var(--size-speaker);
  font-weight: 700;
}
#app > main[data-view="choice"] h1 { font-size: var(--size-prompt); }

#app > main[data-view="choice"] h1[tabindex="-1"]:focus { outline: none; }
#app > main[data-view="choice"] h3 { margin-top: calc(var(--pad) * 0.75); }
#app > main[data-view="choice"] .text > p { margin: calc(var(--pad) * 0.25) 0 0; }
#app > main[data-view="choice"] .text > .choice-note { margin-top: calc(var(--pad) * 0.5); }

.starters {
  list-style: none;
  margin: calc(var(--pad) * 0.5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pad) * 0.75);
}
.starters > li {
  padding-left: calc(var(--pad) * 0.75);
  border-left: calc(var(--pad) * 0.25) solid var(--paint-teal);
}

.decisions { margin: calc(var(--pad) * 0.5) 0 0; }
.decisions > div + div { margin-top: calc(var(--pad) * 0.5); }
.decisions dt { font-size: var(--size-speaker); font-weight: 700; }
.decisions dd { margin: calc(var(--pad) * 0.125) 0 0; }

.present-none { margin: calc(var(--pad) * 0.5) 0 0; }

[data-reading="spaced"] .text,
[data-reading="spaced"] .sheet {
  line-height: 1.5;
  letter-spacing: 0.05em;
  word-spacing: 0.18em;
}

.confirm {
  display: flex;
  flex-direction: column;
  gap: var(--target-gap);
  margin-top: calc(var(--pad) * 0.5);
}

.report > pre {
  max-height: 40dvh;
  overflow: auto;
  font-size: var(--size-speaker);
  white-space: pre-wrap;
  word-break: break-word;
}

#app > main[data-kind="episode-start"] {
  background-position: calc(var(--crop-x, 0.5) * 100%) bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

#app > main[data-kind="episode-start"] > .picture { background: transparent; }

#app > main[data-kind="episode-start"] .episode-title {
  font-size: calc(var(--font-at-scale) * 1.5);
  line-height: 1.15;
  margin: 0 0 var(--pad);
}

#app > main[data-kind="episode-start"] button[data-line-id="screen.start.play"] {
  border-width: 3px;
  font-weight: 700;
  font-size: var(--size-prompt);
  min-height: calc(var(--target-min) * 1.25);
}

#app > main[data-kind="episode-start"] button[data-line-id="screen.start.grownups"] {
  font-size: var(--size-speaker);
}

.episode-title { margin: 0 0 calc(var(--pad) * 0.5); font-size: var(--size-body); }

#app > main[data-kind="shelf"] h1,
#app > main[data-kind="grownups-gate"] h1,
#app > main[data-kind="grownups"] h1 { margin: 0; font-size: var(--size-body); }
#app > main[data-kind="grownups"] h2 { margin: 0; font-size: var(--size-body); }

.controls > [data-slot] { min-width: 0; }
.controls > [data-slot="back"] {
  flex: 0 0 var(--target-min);
  width: var(--target-min);
  padding: 0;
}

.controls > [data-slot="hear"] {
  flex: 0 0 var(--target-min);
  width: var(--target-min);
  padding: 0;
}
.controls > [data-slot="forward"] { flex: 1 1 0; }

.controls > button[data-slot="forward"] {
  border-width: 3px;
  font-weight: 700;
}

.control-slot {
  display: block;
  min-height: var(--target-min);
  padding: calc(var(--pad) * 0.25) calc(var(--pad) * 0.5);
  border: 2px solid transparent;
  visibility: hidden;
  pointer-events: none;
}
.control-slot[data-slot="back"],
.control-slot[data-slot="hear"] { padding: 0; }
.control-slot[data-slot="forward"] { border-width: 3px; }

.controls > button[data-slot="hear"] .glyph {
  width: calc(var(--target-min) * 0.62);
  height: calc(var(--target-min) * 0.62);
}

.controls > button[data-slot="hear"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.controls > button[data-slot="hear"] .tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--target-gap));
  z-index: 3;
  padding: calc(var(--pad) * 0.3) calc(var(--pad) * 0.7);
  background: var(--card);
  color: var(--ink);
  font-size: var(--size-body);
  font-weight: 700;
  line-height: 1.15;

  width: max-content;
  max-width: calc(100vw - var(--target-min) * 2 - var(--target-gap) - var(--pad) * 5);
  text-wrap: balance;
  box-shadow: var(--shadow-paper);
  clip-path: var(--cut-edge);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--pad) * 0.25)) rotate(-2deg);
  transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 180ms;
}
.controls > button[data-slot="hear"][data-tip-open="true"] .tip,
.controls > button[data-slot="hear"]:focus-visible .tip {
  opacity: 1;
  visibility: visible;
  transform: rotate(-2deg);
  transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
  .controls > button[data-slot="hear"]:hover .tip {
    opacity: 1;
    visibility: visible;
    transform: rotate(-2deg);
    transition-delay: 0s;
  }
}
@media (prefers-contrast: more) {
  .controls > button[data-slot="hear"] .tip {
    box-shadow: none;
    outline: 2px solid var(--ink);
    clip-path: none;
  }
}

.leave-tab {
  position: absolute;
  top: var(--rail);
  left: 0;
  z-index: 4;
  width: auto;
  min-width: var(--target-min);
  min-height: var(--target-min);
  justify-content: center;
  padding: calc(var(--pad) * 0.25) calc(var(--pad) * 0.75);
  font-size: var(--size-speaker);
  font-weight: 700;
  clip-path: var(--cut-edge);
}

.text button[role="radio"] {
  transition: transform var(--dur-swap) var(--ease),
              box-shadow var(--dur-swap) var(--ease);
}

.text button[role="radio"][data-reading="true"] {
  transform: translateY(calc(var(--pad) * -0.25));
  box-shadow: var(--shadow-card);
  z-index: 1;
}

.reading-mark {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: calc(var(--pad) * 1.1);
  height: calc(var(--pad) * 1.1);
  padding: calc(var(--pad) * 0.15);
  box-sizing: content-box;
  fill: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
}

.text button[data-reading="true"] > .reading-mark { display: block; }

[data-present="text"] .text button[data-reading="true"] {
  transform: none;
  box-shadow: var(--shadow-paper);
}
[data-present="text"] .reading-mark { display: none !important; }

#app > main[data-kind="shelf"] .shelf > a > .bookmark {
  flex: 0 0 auto;
  align-self: flex-start;
  width: calc(var(--font-at-scale) * 0.75);
  height: calc(var(--font-at-scale) * 1.3);
  margin-top: calc(var(--pad) * -0.5 - 2px);
  background: var(--paint-poppy);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.wordmark {
  display: block;

  height: calc(var(--font-at-scale) * 1.25);
  width: auto;
  max-width: 100%;
  aspect-ratio: 384 / 92;
  margin: 0 0 calc(var(--pad) * 0.75);
  overflow: visible;
  fill: var(--ink);
}

#app > main[data-sheet="true"] {
  height: 100vh;
  height: 100dvh;
}
#app > main[data-sheet="true"] > .sheet-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;

  margin: var(--pad) var(--pad) 0;
}
#app > main[data-sheet="true"] > .sheet-wrap > .sheet-pin {
  position: absolute;
  top: calc(var(--pad) * -0.55);
  left: var(--pad);
  z-index: 3;
}
#app > main[data-sheet="true"] > .sheet-wrap > .sheet {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  padding: calc(var(--pad) * 1.5) var(--pad) var(--pad);
  background: var(--card);
  color: var(--ink);
  clip-path: var(--cut-edge);
  box-shadow: var(--shadow-card);
  transform: rotate(-0.4deg);
  hyphens: none;
}
#app > main[data-sheet="true"] .sheet > h1 {
  margin: 0;
  font-size: calc(var(--font-at-scale) * 1.5);
  line-height: 1.15;
}
#app > main[data-sheet="true"] .count {
  margin: calc(var(--pad) * 0.25) 0 var(--target-gap);
  font-size: calc(var(--font-at-scale) * 0.833);
}
.sign-in {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--target-gap);
}
.sign-in > li {
  display: flex;
  align-items: center;
  gap: calc(var(--pad) * 0.5);
  min-height: var(--target-min);
}

.sign-in .n {
  flex: 0 0 2ch;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sign-in a.row {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pad) * 0.5);
  min-height: var(--target-min);
  padding: calc(var(--pad) * 0.5) var(--pad);
  font: inherit;
  font-size: var(--size-body);
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-paper);
}
.sign-in .t { flex: 1 1 auto; }
.sign-in .state {
  font-size: calc(var(--font-at-scale) * 0.833);
  font-weight: 700;
  white-space: nowrap;
}

.sign-in a.row > .pin,
.sign-in a.row > .tick {
  position: static;
  flex: 0 0 auto;
  width: var(--size-body);
  height: var(--size-body);
  animation: none;
}

.sign-in a.row[aria-current="true"] { border-width: 4px; font-weight: 700; }

.sign-in a.row > .bookmark {
  flex: 0 0 auto;
  width: calc(var(--font-at-scale) * 0.6);
  height: calc(var(--font-at-scale) * 0.9);
  background: var(--paint-poppy);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

.sign-in > li[data-state="locked"] {
  flex-wrap: wrap;
  padding: calc(var(--pad) * 0.5) 0;
}
.sign-in > li[data-state="locked"] > .t {
  align-self: flex-end;
  height: 0;
  margin-bottom: calc(var(--pad) * 0.5);
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.sign-in > li[data-state="locked"] > .state { font-weight: 400; }

.sign-in > li[data-state="locked"] > .again {
  flex: 1 1 100%;
  padding-left: calc(2ch + var(--pad) * 0.5);
  font-size: calc(var(--font-at-scale) * 0.833);
  font-weight: 700;
}

@media (prefers-contrast: more) {
  .sign-in > li[data-state="locked"] > .t { border-bottom-color: var(--ink); }
  .sign-in a.row { border-width: 3px; }
}

.text > .kicker {
  margin: 0 0 calc(var(--pad) * 0.25);
  font-size: calc(var(--font-at-scale) * 0.833);
  font-weight: 700;
}
.text > .door-note {
  margin: calc(var(--pad) * 0.25) 0 var(--target-gap);
}

.mark-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pad) * 0.35);
  margin: calc(var(--pad) * 0.5) 0 0;
  padding: calc(var(--pad) * 0.15) calc(var(--pad) * 0.6);
  background: var(--card);
  color: var(--ink);
  font-size: calc(var(--font-at-scale) * 0.833);
  font-weight: 700;
  box-shadow: var(--shadow-paper);
  clip-path: var(--cut-edge);
  transform: rotate(1.5deg);
}
p.mark-tag { width: fit-content; }
.mark-tag > .fold {
  flex: 0 0 auto;
  width: calc(var(--font-at-scale) * 0.6);
  height: calc(var(--font-at-scale) * 0.6);
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

button > .mark-tag { margin: 0; transform: none; box-shadow: none; }

.text > .kept {
  margin: calc(var(--pad) * 0.5) 0 0;
  font-weight: 700;
}

#app > main[data-kind="route_choice"] > .text {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#app > main[data-kind="route_choice"] > .text > fieldset[data-options] {
  flex: 0 1 auto;

  min-height: min(100%, calc(var(--target-min) * 1.5 + var(--target-gap)));
  overflow-y: auto;
  overscroll-behavior: contain;

  scroll-padding-bottom: calc(var(--font-at-scale) * 1.6 + var(--target-gap));
}

#app > main[data-kind="route_choice"] > .text > fieldset[data-options] > button {
  flex-shrink: 0;
}

#app > main[data-kind="route_choice"] {
  height: 100vh;
  height: 100dvh;
}
@media (min-aspect-ratio: 5/4) {

  #app > main[data-kind="route_choice"] > .text {
    height: 100%;
    max-height: max-content;
  }
}

fieldset[data-options] > .more-below {
  visibility: hidden;
  --more-h: calc(var(--font-at-scale) * 1.6);
  position: sticky;
  bottom: 0;
  z-index: 1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--target-min) * 1.25);
  height: var(--more-h);
  margin-top: calc(-1 * (var(--more-h) + var(--target-gap)));
  background: var(--card);
  border: 2px solid var(--ink);
  border-bottom: 0;
  box-shadow: var(--shadow-paper);
  clip-path: var(--cut-edge);
  pointer-events: none;
}
fieldset[data-options][data-more="below"] > .more-below { visibility: visible; }
fieldset[data-options] > .more-below > .glyph { transform: rotate(90deg); }

.text {
  margin-left: max(var(--pad), calc((100% - var(--measure)) / 2));
  margin-right: max(var(--pad), calc((100% - var(--measure)) / 2));
}
#app > main[data-sheet="true"] > .sheet-wrap {
  margin-left: max(var(--pad), calc((100% - var(--measure)) / 2));
  margin-right: max(var(--pad), calc((100% - var(--measure)) / 2));
}
.controls {
  margin-left: max(0px, calc((100% - var(--measure)) / 2));
  margin-right: max(0px, calc((100% - var(--measure)) / 2));
}

@media (min-aspect-ratio: 5/4) {
  #app > main:has(> .picture) > .text {
    margin-left: max(0px, calc((100% - var(--measure)) / 2));
    margin-right: max(var(--pad), calc((100% - var(--measure)) / 2));
  }
  #app > main:has(> .picture) > .controls {
    margin-left: max(0px, calc((100% - var(--measure)) / 2));
    margin-right: max(0px, calc((100% - var(--measure)) / 2));
  }
}