: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;
  --other-scale: 0.875;

  
  --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);
}


.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;
  transform-origin: calc(var(--cam-x, 0.5) * 100%)
                    calc(var(--cam-origin-y) * 100%);
  transition: transform var(--dur-push) var(--ease);
}


.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);

  
  --wide-h: calc(var(--mark-scale) * max(calc(var(--mark-frac) * 100cqh),
                calc((var(--read-thumb) + var(--read-slack)) / var(--head-hr))));
  --wide-head-h: calc(var(--wide-h) * var(--head-hr));
  --wide-head-w: calc(var(--wide-h) * var(--head-wr));
  --wide-x: clamp(calc(var(--wide-head-w) / 2 + var(--frame-inset)),
                  calc(var(--slot-x, 0.5) * 100cqw),
                  calc(100cqw - var(--wide-head-w) / 2 - var(--frame-inset)));
  
  --wide-aim-y: calc(var(--floor) - (1 - var(--head-cy))
                                    * var(--mark-frac) * var(--mark-scale));
  --wide-y: clamp(calc(var(--wide-head-h) / 2 + var(--frame-inset)),
                  calc(var(--wide-aim-y) * 100cqh),
                  calc(100cqh - var(--wide-head-h) / 2 - var(--frame-inset)));

  
  --rig-h: var(--wide-h);
  --aim-x: calc(var(--slot-x, 0.5) * 100cqw);
  --aim-y: calc(var(--wide-aim-y) * 100cqh);
  --head-h: calc(var(--rig-h) * var(--head-hr));
  --head-w: calc(var(--rig-h) * var(--head-wr));
  
  --place-x: clamp(calc(var(--head-w) / 2 + var(--frame-inset)),
                   var(--aim-x),
                   calc(100cqw - var(--head-w) / 2 - var(--frame-inset)));
  --place-y: clamp(calc(var(--head-h) / 2 + var(--frame-inset)),
                   var(--aim-y),
                   calc(100cqh - var(--head-h) / 2 - var(--frame-inset)));
}

.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);
  --prop-h: calc(var(--prop-scale, 0) * 100cqh);
  --prop-aim-x: calc(var(--slot-x, 0.5) * 100cqw);
  --prop-aim-y: calc(var(--floor) * 100cqh);
  left: var(--prop-aim-x);
  top: var(--prop-aim-y);
  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);
  --bg-h: calc(var(--bg-scale, 0) * 100cqh);
  --bg-aim-x: calc(var(--slot-x, 0.5) * 100cqw);
  --bg-aim-y: calc(var(--floor) * 100cqh);
  left: var(--bg-aim-x);
  top: var(--bg-aim-y);
  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;
}




.picture[data-camera="group"] .bgchild {
  --bg-h: calc(var(--bg-scale, 0) * 100cqh * var(--zoom));
  --bg-aim-x: calc((var(--slot-x, 0.5) * var(--zoom) + var(--cam-tx)) * 100cqw);
  --bg-aim-y: calc((var(--cam-origin-y)
                    + (var(--floor) - var(--cam-origin-y)) * var(--zoom))
                   * 100cqh);
}


.picture[data-camera="group"] .prop {
  --prop-h: calc(var(--prop-scale, 0) * 100cqh * var(--zoom));
  --prop-aim-x: calc((var(--slot-x, 0.5) * var(--zoom) + var(--cam-tx)) * 100cqw);
  --prop-aim-y: calc((var(--cam-origin-y)
                      + (var(--floor) - var(--cam-origin-y)) * var(--zoom))
                     * 100cqh);
}


.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;
  --rig-h: calc((var(--read-strip) + var(--read-slack)) / var(--head-hr));
  --aim-y: 50cqh;
}

.picture[data-camera="face"] .mark:not([data-foreground="true"]) {
  --rig-h: calc((var(--read-strip) + var(--read-slack)) * var(--other-scale)
               / var(--head-hr));
  --aim-y: 50cqh;
}


.picture[data-camera="face"] .backdrop { transform: scale(var(--bg-zoom)); }


.picture[data-camera="group"] > .backdrop {
  transform-origin: 0 calc(var(--cam-origin-y) * 100%);
  transform: translateX(calc(var(--cam-tx) * 100%)) scale(var(--zoom));
}

.picture[data-camera="group"] .mark {
  --rig-h: calc(var(--wide-h) * var(--zoom));
  --aim-x: calc((var(--slot-x, 0.5) * var(--zoom) + var(--cam-tx)) * 100cqw);
  --aim-y: calc((var(--cam-origin-y)
                 + (var(--wide-aim-y) - var(--cam-origin-y)) * var(--zoom))
                * 100cqh);
}


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


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


.mark[data-speaking="true"] {
  z-index: 2;
  
  --rig-h: calc(var(--mark-scale) * max(calc(var(--mark-frac) * 1.06 * 100cqh),
               calc((var(--read-thumb) + var(--read-slack)) / var(--head-hr))));
}


.tag {
  position: absolute;
  left: var(--place-x);
  top: calc(var(--place-y) - var(--head-h) / 2 - var(--pad) * 0.35);
  transform: translate(-50%, -100%) 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"] {
  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 { transform: 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"] .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; }

.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);
}