/* The page's structure, shared by the landing and the theme pages. Every color, display face, corner and gesture comes from the
   costume tokens in costumes.css; the brand's skeleton (wordmark, body copy, layout, badges, footer) is fixed here.
   Evolved from demos/d2-eight-stagings/css/site.css. */

:root {
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-io: cubic-bezier(0.645, 0.045, 0.355, 1);
  --gutter: 20px;
  --maxw: 1240px;
  /* one section rhythm: 2 × --sec-y between sections (112 px on phones, 160 on desktops) */
  --sec-y: clamp(56px, 2.5vw + 44px, 80px);
  /* surfaces: five radii, one media shadow (costumes keep their own through --stage-radius, --tile-shadow and so on) */
  --r-sm: 9px;
  --r-md: 12px;
  --r-media: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --sh-media: 0 24px 48px -24px rgba(52, 35, 44, 0.5);
  /* type roles (the house sizes, before a costume's --d-scale) */
  --t-display: clamp(36px, 2.4vw + 22px, 66px);
  --t-h2: clamp(30px, 1.5vw + 22px, 46px);
  --t-h3: clamp(24px, 0.5vw + 20px, 28px);
  --f-body: 'DC Instrument', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --panel-px: 20px;
  color-scheme: light dark;
}
@media (min-width: 900px) {
  :root {
    --gutter: 32px;
  }
}
@media (min-width: 1600px) {
  :root {
    --maxw: 1400px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
video {
  display: block;
  max-width: 100%;
}
a {
  color: var(--link);
  text-underline-offset: 0.18em;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 3px solid var(--focus, var(--accent));
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--surface-ink);
}
.skip:focus {
  left: 8px;
}

/* ---------- the ground (fixed, behind everything) ---------- */
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}
.ground > i {
  position: absolute;
  display: block;
}
.ground .petal {
  display: none;
}

/* ---------- header: the wordmark never changes clothes ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  background: var(--head-bg);
  color: var(--head-ink, var(--ink));
  border-bottom: var(--head-rule, 1px solid transparent);
  backdrop-filter: var(--head-blur, blur(14px) saturate(1.2));
  -webkit-backdrop-filter: var(--head-blur, blur(14px) saturate(1.2));
}
@media (min-width: 900px) {
  .top {
    height: 64px;
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.brand img {
  border-radius: 8px;
}
.brand-word {
  font-family: 'DC Instrument', system-ui, sans-serif;
  font-weight: 650;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.nav {
  display: none;
  gap: 24px;
  margin-left: auto;
}
.nav a {
  color: inherit;
  text-decoration: none;
  font-family: var(--f-ui);
  font-weight: var(--ui-weight);
  letter-spacing: var(--ui-track);
  text-transform: var(--ui-case);
  font-size: var(--nav-size, 15px);
  opacity: 0.86;
}
.nav a:hover {
  opacity: 1;
  text-decoration: underline;
}
.top-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nav a {
  white-space: nowrap;
}
@media (min-width: 1120px) {
  .nav {
    display: flex;
    gap: clamp(16px, 1.6vw, 24px);
  }
  .top-end {
    margin-left: 8px;
  }
}

/* the wardrobe button and its drawer (the app's Themes drawer, in the header) */
.wardrobe-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 3px 12px 3px 3px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--ink);
}
.wardrobe-btn img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
}
.wb-text {
  display: grid;
  text-align: left;
  line-height: 1.05;
}
.wb-label {
  font:
    500 10.5px/1.2 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wb-name {
  font-family: var(--f-ui);
  font-weight: var(--ui-weight);
  letter-spacing: var(--ui-track);
  text-transform: var(--ui-case);
  font-size: 14px;
}
@media (max-width: 520px) {
  .wardrobe-btn {
    padding-right: 3px;
  }
  .wb-text {
    display: none;
  }
}
.wardrobe-btn {
  flex: none;
}
@media (max-width: 399.98px) {
  .top {
    gap: 10px;
  }
  .top-end {
    gap: 6px;
  }
}
/* the narrowest phones (320 px): the app icon stands for the wordmark, and the call to action drops the costume's wide
   tracking, so the theme button and "Get the app" both fit */
@media (max-width: 359.98px) {
  .top .btn-get {
    padding: 0 10px;
    letter-spacing: 0.02em;
  }
  .brand-word {
    display: none;
  }
}
.wardrobe {
  position: absolute;
  right: var(--gutter);
  top: calc(100% + 8px);
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  padding: 16px;
  border-radius: 18px;
  background: var(--dock-bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.wardrobe[hidden] {
  display: none;
}
.wardrobe-title {
  font:
    600 13px/1.3 'DC Instrument',
    system-ui,
    sans-serif;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 10px;
}
.wardrobe .cover-name {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink);
}
.wardrobe .cover-kind {
  display: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 20px;
  border: var(--btn-border, 0);
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-ink);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--f-ui);
  font-weight: var(--ui-weight);
  letter-spacing: var(--ui-track);
  text-transform: var(--ui-case);
  font-size: 15px;
  box-shadow: var(--btn-shadow, none);
  transform: var(--btn-skew, none);
  transition:
    transform 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    background-color 160ms;
}
.btn:hover {
  transform: var(--btn-hover, translateY(-1px));
}
.btn:active {
  transform: var(--btn-skew, none) scale(0.97);
}
.btn-small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}
.top .btn-get {
  min-height: 40px;
}
@media (max-width: 899.98px) {
  .top .btn-get {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13.5px;
  }
}

/* ---------- name plates (the stage's name carrier, worn by the page) ---------- */
.plate {
  display: inline-flex;
  margin: 0 0 14px;
}
.plate > span {
  display: inline-block;
  padding: var(--plate-pad, 4px 13px);
  border-radius: var(--plate-radius, 999px);
  background: var(--plate-bg, var(--voice));
  color: var(--plate-ink, #fff);
  font-family: var(--f-ui);
  font-weight: var(--plate-weight, var(--ui-weight));
  font-size: var(--plate-size, 13px);
  letter-spacing: var(--plate-track, var(--ui-track));
  text-transform: var(--plate-case, var(--ui-case));
  line-height: 1.3;
  border: var(--plate-border, 0);
  box-shadow: var(--plate-shadow, none);
  transform: var(--plate-transform, none);
  transform-origin: var(--plate-origin, left center);
  clip-path: var(--plate-clip, none);
}
.plate-a {
  --voice: var(--voice-a);
}
.plate-b {
  --voice: var(--voice-b);
}

/* ---------- the subline's genre (revealed by the sweep, js/app.js) ---------- */
.kind {
  position: relative;
  white-space: nowrap;
}
.kind-text {
  display: inline-block;
}

/* ---------- display type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  font-stretch: var(--d-stretch);
  font-style: var(--d-style, normal);
  letter-spacing: var(--d-track);
  text-transform: var(--d-case);
  line-height: var(--d-lh, 1.02);
  font-variation-settings: var(--d-fvs, normal);
}

/* ---------- hero ---------- */
/* Desktops: copy on 5/12 beside the stage and its rail on 7/12, one row, on the page's container.
   Tablets (600–899): stacked, the 16:9 clip at full width, the eight covers in one row under it.
   Phones: stacked, a 1:1 stage, the eight covers in one row, the store badge: all of it on the first screen. */
.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'title' 'sub' 'stage' 'railhead' 'rail' 'cta';
  gap: 0;
  padding: 20px var(--gutter) 40px;
}
.hero-copy,
.hero-stage,
.rail-wrap {
  display: contents;
}
.hero h1 {
  grid-area: title;
  font-size: calc(var(--d-scale, 1) * var(--fit-size));
  text-wrap: balance;
}
.hero-sub {
  grid-area: sub;
  font-family: var(--f-display);
  font-weight: var(--sub-weight, 600);
  font-style: var(--sub-style, normal);
  font-stretch: var(--sub-stretch, 100%);
  letter-spacing: var(--sub-track, 0);
  text-transform: var(--sub-case, none);
  font-size: calc(var(--sub-scale, 1) * var(--fit-size));
  line-height: 1.36;
  color: var(--ink);
  margin: 12px 0 20px;
  max-width: 24em;
}
.hero .cta-row {
  grid-area: cta;
  margin-top: 16px;
}
.hero .stage-card {
  grid-area: stage;
}
.rail-head {
  grid-area: railhead;
  margin: 14px 0 8px;
}
.rail-title {
  font-family: var(--f-ui);
  font-weight: var(--ui-weight);
  letter-spacing: var(--ui-track);
  text-transform: var(--ui-case);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-soft);
}
.rail {
  grid-area: rail;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
}
@media (max-width: 359.98px) {
  .rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero {
    padding: 24px var(--gutter) 48px;
  }
  .hero-sub {
    margin: 12px 0 24px;
  }
  .rail-head {
    margin: 20px 0 10px;
  }
  .rail-title {
    font-size: 14px;
  }
  .rail {
    gap: 12px;
  }
  .hero .cta-row {
    margin-top: 24px;
  }
}
@media (min-width: 900px) {
  .hero {
    padding: 48px var(--gutter);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: 'copy stage';
    column-gap: clamp(40px, 4vw, 64px);
    align-items: center;
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    grid-area: copy;
  }
  .hero-sub {
    margin: 20px 0 0;
  }
  .hero .cta-row {
    margin-top: 32px;
  }
  .hero-stage {
    display: block;
    grid-area: stage;
  }
  .rail-wrap {
    display: block;
    margin-top: 24px;
  }
  .rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
  }
  .rail-title {
    font-size: 15px;
    line-height: 1.3;
  }
  .rail {
    gap: 12px;
    padding: 0;
  }
}

/* ---------- the stage (real CLI renders; the page never redraws it) ---------- */
.stage-card {
  margin: 0;
  position: relative;
}
.stage {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  border-radius: var(--stage-radius, 14px);
  border: var(--stage-border, 0);
  box-shadow: var(--stage-shadow, 0 20px 50px -20px rgba(0, 0, 0, 0.5));
  touch-action: pan-y;
}
#hero-stage {
  aspect-ratio: 1 / 1;
}
@media (min-width: 600px) {
  #hero-stage {
    aspect-ratio: 16 / 9;
  }
}
.stage > img,
.stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stage > video {
  opacity: 0;
  z-index: 1;
}
.stage > video.on {
  opacity: 1;
  z-index: 2;
}
.stage-poster {
  z-index: 0;
}

/* ---------- theme covers (the wardrobe on the hanger) ---------- */
.cover {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.cover img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--cover-radius, 12px);
  transition:
    transform 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
  box-shadow: 0 0 0 0 transparent;
}
.cover:hover img {
  transform: translateY(-3px);
}
.cover[aria-pressed='true'] img {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--ring, var(--accent));
}
.rail .cover img {
  border-radius: min(var(--cover-radius, 12px), 10px);
}
.cover-name,
.cover-kind {
  display: none;
}
@media (min-width: 600px) {
  .rail .cover img {
    border-radius: var(--cover-radius, 12px);
  }
  .cover[aria-pressed='true'] img {
    box-shadow:
      0 0 0 3px var(--bg),
      0 0 0 6px var(--ring, var(--accent));
  }
  .rail .cover-name {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.1;
    color: var(--ink);
    white-space: nowrap;
  }
  .rail .cover-name[data-f='mist'],
  .rail .cover-name[data-f='deadline'] {
    font-size: 11px;
  }
}
@media (min-width: 900px) {
  .rail .cover-name {
    font-size: 15px;
  }
  .rail .cover-name[data-f='quest'] {
    font-size: 14px;
  }
  .rail .cover-name[data-f='mist'],
  .rail .cover-name[data-f='deadline'] {
    font-size: 12px;
  }
}
@media (min-width: 900px) and (max-width: 1279.98px) {
  .rail .cover-name {
    display: none;
  }
}
/* each theme's name is set in its own face, whatever the page wears */
[data-f='novel'] {
  font-family: 'DC Instrument';
  font-weight: 650;
  letter-spacing: -0.02em;
}
[data-f='quest'] {
  font-family: 'DC Name Quest', 'DC Departure';
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
[data-f='impact'] {
  font-family: 'DC Name Impact', 'DC Archivo';
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
[data-f='mist'] {
  font-family: 'DC Name Mist', 'DC Inter Tight';
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}
[data-f='velvet'] {
  font-family: 'DC Name Velvet', 'DC Fraunces';
  font-weight: 500;
  font-variation-settings: 'opsz' 144;
}
[data-f='glitter'] {
  font-family: 'DC Name Glitter', 'DC Fredoka';
  font-weight: 600;
}
[data-f='deadline'] {
  font-family: 'DC Name Deadline', 'DC Mona';
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
[data-f='flirt'] {
  font-family: 'DC Name Flirt', 'DC Fraunces';
  font-style: italic;
  font-weight: 500;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 100;
}

/* ---------- sections ---------- */
.sec {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sec-y) var(--gutter);
}

/* the section header is a title card: Label · Title · Subtitle. The house wears it as plain type; costumes box it. */
/* The card is exactly its text in every costume; a costume's box, rules and ornaments are drawn on .tc-frame, which bleeds
   into space the section already has (its padding above, the card's margin below), so the house look carries no reserve
   for Impact's frame and the layout is the same in all eight. */
.title-card {
  --tc-bleed: var(--tc-bleed-m, 24px);
  position: relative;
  isolation: isolate;
  margin: 0 0 48px;
  padding: 0;
  color: var(--title-ink);
  text-align: var(--tc-align, left);
}
@media (min-width: 900px) {
  .title-card {
    --tc-bleed: var(--tc-bleed-d, 32px);
    margin-bottom: 64px;
  }
}
.tc-frame {
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--tc-bleed)) 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--title-bg);
  border: var(--tc-border, 0);
  border-radius: var(--tc-radius, var(--radius-lg));
  box-shadow: var(--tc-shadow, none);
}
.tc-label {
  font-family: var(--f-ui);
  font-weight: var(--ui-weight);
  letter-spacing: var(--tc-label-track, 0.12em);
  text-transform: uppercase;
  font-size: 12.5px;
  margin-bottom: 10px;
  color: var(--title-label, inherit);
}
.tc-title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  font-stretch: var(--d-stretch);
  font-style: var(--d-style, normal);
  letter-spacing: var(--d-track);
  text-transform: var(--d-case);
  font-variation-settings: var(--d-fvs, normal);
  line-height: var(--d-lh, 1.04);
  font-size: calc(var(--d-scale, 1) * var(--t-h2));
  text-wrap: balance;
}
.tc-sub {
  margin-top: 14px;
  max-width: 34em;
  font-size: 1.04em;
  opacity: 0.9;
  margin-inline: var(--tc-sub-inline, 0);
}

/* panels are the theme's box */
.panel {
  position: relative;
  background: var(--surface);
  color: var(--surface-ink);
  outline: var(--panel-border, 1px solid var(--edge));
  border-radius: var(--radius-lg);
  padding: var(--panel-pad, 24px 20px);
  box-shadow: var(--panel-shadow, none);
  backdrop-filter: var(--panel-blur, none);
  -webkit-backdrop-filter: var(--panel-blur, none);
}
@media (min-width: 900px) {
  .panel {
    padding: var(--panel-pad-d, 38px 40px);
  }
}

/* ---------- showcase: a wall on desktop, the feed on phones ---------- */
.feed-head,
.feed-nav {
  display: none;
}
.wall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 24px;
  align-items: start;
}
.half {
  display: grid;
  min-width: 0;
}
.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 24px;
  align-items: start;
}
.tile {
  position: relative;
  min-width: 0;
}
.tile-progress {
  display: none;
}
@media (min-width: 640px) {
  .tile-frame {
    aspect-ratio: var(--ar, 16/9);
  }
}
.tile-frame {
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: var(--tile-radius, 12px);
  border: var(--tile-border, 0);
  box-shadow: var(--tile-shadow, 0 16px 36px -22px rgba(0, 0, 0, 0.55));
}
.tile-frame > img,
.tile-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.tile-frame video {
  opacity: 0;
  transition: opacity 200ms;
}
.tile.playing .tile-frame video {
  opacity: 1;
}
.tile-info {
  padding: 10px 2px 24px;
}
.tile-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}
.tile-meta a {
  color: inherit;
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

@media (max-width: 639.98px) {
  .tile-progress {
    display: block;
  }
  /* The Feed: one story at a time, full width, swipe sideways; the next one starts when this one ends. */

  .half,
  .pair {
    display: contents;
  }
  .tile[data-o='1'] {
    order: 1;
  }
  .tile[data-o='2'] {
    order: 2;
  }
  .tile[data-o='3'] {
    order: 3;
  }
  .tile[data-o='4'] {
    order: 4;
  }
  .tile[data-o='5'] {
    order: 5;
  }
  .tile[data-o='6'] {
    order: 6;
  }
  .tile[data-o='7'] {
    order: 7;
  }
  .tile[data-o='8'] {
    order: 8;
  }
  .tile[data-o='9'] {
    order: 9;
  }
  .tile[data-o='10'] {
    order: 10;
  }
  .tile[data-o='11'] {
    order: 11;
  }
  .tile[data-o='12'] {
    order: 12;
  }
  .wall {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .wall::-webkit-scrollbar {
    display: none;
  }
  .tile,
  .tile.wide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .tile-frame {
    height: min(68svh, 560px);
  }
  .tile-frame::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: var(--poster) center / cover;
    filter: blur(22px) brightness(0.62) saturate(1.15);
  }
  .tile-frame > img,
  .tile-frame > video {
    object-fit: contain;
  }
  .tile-progress {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 10px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
    z-index: 3;
    overflow: hidden;
  }
  .tile-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: #fff;
  }
  .tile-info {
    padding: 12px 2px 0;
  }
  .feed-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 12px;
  }
  .feed-nav button {
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--rule);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
  }
  .feed-count {
    font-size: 13px;
    color: var(--ink-soft);
    min-width: 4.5em;
    text-align: center;
  }
  .feed-count b {
    color: var(--ink);
    font-weight: 650;
  }
}

/* ---------- how it works ---------- */
.steps {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}
.steps > li {
  min-width: 0;
}
@media (min-width: 900px) {
  .steps {
    gap: 24px;
  }
  .step {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
    align-items: start;
  }
  .step-look,
  .step-export {
    display: block;
  }
  .step-look .step-text,
  .step-export .step-text {
    max-width: 36em;
  }
  .step-look .step-vis,
  .step-export .step-vis {
    margin-top: 32px;
  }
  .step-look .controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
}
.step-title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  font-stretch: var(--d-stretch);
  font-style: var(--d-style, normal);
  letter-spacing: var(--d-track);
  text-transform: var(--d-case);
  font-variation-settings: var(--d-fvs, normal);
  font-size: calc(var(--d-scale, 1) * var(--t-h3));
  line-height: 1.12;
  margin-bottom: 12px;
  text-wrap: balance;
}
.step-text p {
  color: var(--surface-ink);
}
.step-text p + p {
  margin-top: 10px;
}
.step-try {
  font-size: 14px;
  color: var(--surface-soft) !important;
}
.step-vis {
  margin-top: 20px;
  min-width: 0;
}
@media (min-width: 900px) {
  .step-vis {
    margin-top: 0;
  }
}

/* 02 · the script, the app's way */
.editor {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: start;
}
@media (min-width: 900px) {
  .editor {
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 26px;
  }
}
.script-pane {
  min-width: 0;
}
.script {
  display: grid;
  gap: 6px;
}
.row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  cursor: pointer;
  border-radius: var(--row-radius, 12px);
  padding: 0;
}
.row .bust,
.row .r-icon {
  width: 34px;
  height: 34px;
  margin-top: 6px;
}
.row .bust {
  object-fit: contain;
  object-position: 50% 0;
  border-radius: 0;
}
.row .slug {
  font:
    650 10.5px/1.3 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--surface-soft);
}
.row .words {
  font-size: 15px;
  line-height: 1.4;
}
@media (max-width: 899.98px) {
  .row {
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 7px;
  }
  .row .bust,
  .row .r-icon {
    width: 26px;
    height: 26px;
  }
  .row .words {
    font-size: 13.5px;
  }
}
.mini .stage {
  border-radius: var(--stage-radius, 12px);
}
.mini-cap {
  margin-top: 8px;
  font:
    600 12px/1.2 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--surface-soft);
  text-align: center;
}
.mini {
  position: sticky;
  top: 76px;
}
@media (min-width: 900px) {
  .mini {
    top: 90px;
  }
}
/* phones: the preview above the script, wide, as the app's editor stacks them */
@media (max-width: 639px) {
  .editor {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .mini {
    position: static;
    order: -1;
  }
  .mini .stage {
    aspect-ratio: 16 / 9;
  }
  .mini-cap {
    display: none;
  }
  .script-pane {
    max-height: 440px;
    padding-right: 8px;
  }
  .beat {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .beat .bust {
    left: 4px;
    width: 50px;
    height: 50px;
  }
}

/* 03 · the look */
.controls {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--surface-soft);
}
.controls b {
  display: block;
  color: var(--surface-ink);
  font-weight: 650;
  font-size: 14px;
}

/* the eight themes, each card in its own costume (css/costumes.css .tcard[data-t]); the one worn is ringed */
/* the scroller keeps room for the worn card's ring (3 px at 4 px out) and snaps cards to the panel's content edge, not its own */
.theme-grid {
  display: grid;
  gap: 12px;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--panel-px, 20px));
  padding: 10px var(--panel-px, 20px) 14px;
  scroll-padding-inline: var(--panel-px, 20px);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.theme-grid::-webkit-scrollbar {
  display: none;
}
.theme-grid > li {
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .theme-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* phones: all eight at once, two by two, compact (no sideways scroller, nothing cut at the panel's edge) */
@media (max-width: 639.98px) {
  .theme-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    margin: 0;
    padding: 4px;
    scroll-snap-type: none;
  }
  .tcard-desc,
  .tcard-looks {
    display: none;
  }
  .tcard-body {
    padding: 12px;
    gap: 4px;
  }
  .tcard-name {
    font-size: 20px;
  }
  .tcard.wearing {
    outline-offset: 2px;
  }
}
.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--sw-radius, 12px);
  overflow: hidden;
  background: var(--sw-surface);
  color: var(--sw-ink);
  border: 1px solid var(--sw-edge);
}
.tcard-art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tcard-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcard-art .still {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms var(--ease-io);
}
.tcard:hover .tcard-art .still {
  opacity: 1;
}
.tcard-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  flex: 1;
}
.tcard-name {
  font-size: 24px;
  line-height: 1;
  color: var(--sw-ink);
}
.tcard-kind {
  font:
    650 11px/1.3 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-accent);
}
.tcard-desc {
  font:
    400 13.5px/1.45 'DC Instrument',
    system-ui,
    sans-serif;
  opacity: 0.92;
}
.tcard-looks {
  font:
    500 12px/1.4 'DC Instrument',
    system-ui,
    sans-serif;
  opacity: 0.72;
}
.tcard.wearing {
  outline: 3px solid var(--ring, var(--accent));
  outline-offset: 3px;
}

/* 04 · export */
.formats {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--panel-px, 20px));
  padding-inline: var(--panel-px, 20px);
}
.formats::-webkit-scrollbar {
  display: none;
}
.fmt {
  flex: none;
}

/* each format's ratio, and its share of the row on desktop */
.fmt-9x16s {
  --ar: 9/16;
  --arn: 0.5625;
}
.fmt-3x4 {
  --ar: 3/4;
  --arn: 0.75;
}
.fmt-1x1 {
  --ar: 1/1;
  --arn: 1;
}
.fmt-4x3 {
  --ar: 4/3;
  --arn: 1.3333;
}
.fmt-16x9 {
  --ar: 16/9;
  --arn: 1.7778;
}
.fmt img {
  height: 170px;
  width: auto;
  aspect-ratio: var(--ar);
  object-fit: cover;
  border-radius: var(--tile-radius, 10px);
  background: #000;
}
.fmt figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--surface-soft);
  display: grid;
}
.fmt figcaption b {
  color: var(--surface-ink);
  font-size: 13px;
}
@media (min-width: 900px) {
  .formats {
    gap: 16px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .fmt {
    flex: var(--arn) 1 0;
    min-width: 0;
  }
  .fmt img {
    width: 100%;
    height: auto;
  }
}

/* ---------- the app: real screens, frameless, in their true shapes ---------- */
.screens {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 6px;
  scroll-padding-inline: var(--gutter);
}
.screens::-webkit-scrollbar {
  display: none;
}
.scr {
  flex: none;
  scroll-snap-align: start;
}
.scr img {
  height: 400px;
  width: auto;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 24px 50px -24px rgba(0, 0, 0, 0.6);
  background: #000;
}
.scr-ipad img,
.scr-duo img {
  border-radius: 16px;
}
.scr p {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.scr p b {
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: var(--ui-weight);
  letter-spacing: var(--ui-track);
  text-transform: var(--ui-case);
}
@media (max-width: 899.98px) {
  .scr img {
    height: 360px;
  }
  .scr-ipad img,
  .scr-duo img {
    height: 250px;
  }
}
@media (min-width: 900px) {
  .screens {
    overflow: visible;
    margin: 0;
    padding: 0;
    gap: 18px;
    justify-content: space-between;
  }
  .scr {
    flex: var(--w) 1 0;
    min-width: 0;
  }
  .scr img {
    width: 100%;
    height: auto;
  }
  .scr-phone {
    --w: 0.624;
  }
  .scr-ipad {
    --w: 1.383;
  }
  .scr-duo {
    --w: 1.421;
  }
  .scr-android {
    --w: 0.611;
  }
  .scr-ipad,
  .scr-duo {
    margin-bottom: 0;
  }
}
.app-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.app-cta-title {
  font-size: calc(var(--d-scale, 1) * clamp(24px, 4vw, 34px));
}

/* ---------- questions ---------- */
.faq-list {
  padding-top: 6px;
  padding-bottom: 6px;
}
.faq-list details {
  border-bottom: 1px solid color-mix(in srgb, var(--surface-ink) 14%, transparent);
}
.faq-list details:last-child {
  border-bottom: 0;
}
.faq-list summary {
  cursor: pointer;
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--f-ui);
  font-weight: var(--ui-weight);
  letter-spacing: var(--ui-track);
  text-transform: var(--faq-case, none);
  font-size: 17.5px;
  line-height: 1.35;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 9px;
  margin-top: 8px;
  background: var(--cue-c, var(--accent));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 200ms var(--ease-out);
}
.faq-list details[open] summary::after {
  transform: rotate(180deg);
}
.faq-list details p {
  padding: 0 0 20px;
  max-width: 38em;
}

/* ---------- free and pro: calm ---------- */
.pro-cols {
  display: grid;
  gap: 24px;
  margin: 0 0 24px;
}
@media (min-width: 900px) {
  .pro-cols {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}
.pro-cols h3 {
  font-family: var(--f-ui);
  font-weight: var(--ui-weight);
  letter-spacing: var(--ui-track);
  text-transform: var(--ui-case);
  font-size: 17px;
}
.pro-lead {
  margin: 4px 0 12px;
  color: var(--surface-soft);
}
.ticks {
  display: grid;
  gap: 9px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--voice-a);
  border-bottom: 2px solid var(--voice-a);
  transform: rotate(-45deg);
}
.pro-close {
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--surface-ink) 12%, transparent);
  color: var(--surface-soft);
  font-size: 15px;
}

/* ---------- the close: credits ---------- */
.credits-card {
  --focus: #ffffff;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0c0810;
  color: #fff;
  min-height: 560px;
  display: grid;
  align-items: center;
  justify-items: center;
  outline: var(--stage-border, 0);
  box-shadow: var(--stage-shadow, none);
}
.credits-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.credits-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 80% at 50% 50%,
    rgba(8, 5, 12, 0.7),
    rgba(8, 5, 12, 0.25)
  );
}
.credits-roll {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
  padding: 56px 22px;
  max-width: 760px;
}
.credits-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.88);
}
.credits-line .plate {
  margin: 0;
}
.credits-line q {
  quotes: '\201C' '\201D';
}
.credits-title {
  font-size: calc(var(--d-scale, 1) * var(--fit-size));
  color: #fff;
  width: 100%;
}
.credits-list {
  display: grid;
  gap: 10px;
  margin: 8px 0 14px;
}
.credits-list div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: baseline;
}
.credits-list dt {
  text-align: right;
  font:
    500 12px/1.6 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.credits-list dd {
  text-align: left;
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  font-style: var(--d-style, normal);
  font-stretch: var(--d-stretch);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-variation-settings: var(--d-fvs, normal);
  font-size: calc(var(--d-scale, 1) * 22px);
  line-height: 1.2;
  color: #fff;
}
.credits .cta-row {
  justify-content: center;
}
.credits .qr figcaption {
  color: #222;
}
@media (max-width: 599.98px) {
  .credits-list div {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .credits-list dt,
  .credits-list dd {
    text-align: center;
  }
  .credits-list {
    gap: 12px;
  }
}
/* the roll: each credit fades up in turn when the card comes into view */
.credits-roll > * {
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.credits-card.pre .credits-roll > * {
  opacity: 0;
  transform: translateY(18px);
}
.credits-roll > :nth-child(2) {
  transition-delay: 160ms;
}
.credits-roll > :nth-child(3) {
  transition-delay: 420ms;
}
.credits-roll > :nth-child(4) {
  transition-delay: 760ms;
}

/* ---------- store CTAs (device-aware; badges are official art, never restyled) ---------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.badge {
  display: block;
  line-height: 0;
  border-radius: 9px;
}
.badge img {
  height: 48px;
  width: auto;
}
.qr {
  display: none;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-sm);
  background: #fff;
  color: #222;
}
.qr img {
  width: 40px;
  height: 40px;
}
@media (max-width: 1599.98px) {
  .hero .qr {
    padding: 4px;
  }
  .hero .qr figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
.qr figcaption {
  font:
    600 12px/1.25 'DC Instrument',
    system-ui,
    sans-serif;
  max-width: 7.5em;
  color: #222 !important;
}
@media (min-width: 900px) {
  html[data-device='desktop'] .qr {
    display: flex;
  }
}
@media (max-width: 1279.98px) {
  html[data-device='desktop'] .hero .qr {
    display: none;
  }
}
.credits .badges {
  justify-content: center;
}
.credits-line .plate {
  --voice: #4573c0;
}
html[data-device='ios'] .hero .badge-play,
html[data-device='ios'] .credits .badge-play {
  display: none;
}
html[data-device='android'] .hero .badge-apple,
html[data-device='android'] .credits .badge-apple {
  display: none;
}

/* ---------- footer: the brand's, in every costume ---------- */
.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sec-y) var(--gutter) 48px;
  font-size: 15px;
}
.foot-cols {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  padding-top: 48px;
}
@media (min-width: 900px) {
  .foot-cols {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.foot-brand {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  align-content: start;
}
@media (min-width: 900px) {
  .foot-brand {
    grid-column: auto;
  }
}
.foot-follow {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.socials svg {
  width: 18px;
  height: 18px;
}
.socials a:hover {
  text-decoration: underline;
}
.foot h2 {
  font:
    650 12px/1.3 'DC Instrument',
    system-ui,
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--ink-soft);
}
.foot nav a {
  display: block;
  padding: 3px 0;
  color: var(--ink);
  text-decoration: none;
}
.foot nav a:hover {
  text-decoration: underline;
}
.legal {
  margin-top: 36px;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 70em;
}

/* ---------- the costume change: each incoming theme enters the way its stage enters (from d2) ---------- */
/* the header changes clothes on its own short crossfade, outside the page's reveal: inside it, it was wiped, faded
   through black (Mist) or shaken (Impact) with the page, which read as the header flickering */
.top {
  view-transition-name: site-top;
}
::view-transition-group(site-top) {
  animation-duration: 220ms;
}
::view-transition-old(site-top),
::view-transition-new(site-top) {
  animation-duration: 220ms;
  animation-timing-function: ease;
}
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: vt-rise 460ms var(--ease-out) both;
}
html[data-vt='novel']::view-transition-new(root) {
  animation: vt-rise 470ms var(--ease-out) both;
}
html[data-vt='quest']::view-transition-new(root) {
  animation: vt-power 380ms steps(7, end) both;
}
html[data-vt='impact']::view-transition-new(root) {
  animation:
    vt-slam 300ms var(--ease-out) both,
    vt-shake 110ms linear 300ms both;
}
html[data-vt='mist']::view-transition-old(root) {
  animation: vt-fade-out 200ms var(--ease-in) both;
}
html[data-vt='mist']::view-transition-new(root) {
  animation: vt-fade-in 320ms var(--ease-io) 170ms both;
}
html[data-vt='mist']::view-transition {
  background: #000;
}
html[data-vt='velvet']::view-transition-new(root) {
  animation: vt-curtain 520ms var(--ease-out) both;
}
html[data-vt='glitter']::view-transition-new(root) {
  animation: vt-iris 520ms var(--ease-out) both;
}
html[data-vt='deadline']::view-transition-new(root) {
  animation: vt-strip 340ms var(--ease-out) both;
}
html[data-vt='flirt']::view-transition-new(root) {
  animation: vt-bloom 560ms var(--ease-out) both;
}
@keyframes vt-rise {
  from {
    clip-path: polygon(0 100%, 100% 100%, 100% 112%, 0 112%);
  }
  to {
    clip-path: polygon(0 -12%, 100% -12%, 100% 100%, 0 100%);
  }
}
@keyframes vt-power {
  0% {
    clip-path: inset(49.6% 0 49.6% 0);
  }
  30% {
    clip-path: inset(49% 0 49% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes vt-slam {
  from {
    clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%);
  }
  to {
    clip-path: polygon(0 0, 140% 0, 110% 100%, -30% 100%);
  }
}
@keyframes vt-shake {
  0% {
    transform: translate(5px, 0);
  }
  50% {
    transform: translate(-3px, 0);
  }
  100% {
    transform: none;
  }
}
@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes vt-curtain {
  from {
    clip-path: inset(0 50% 0 50%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes vt-iris {
  from {
    clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%));
  }
  to {
    clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%));
  }
}
@keyframes vt-strip {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes vt-bloom {
  from {
    clip-path: circle(0 at 50% 50%);
    opacity: 0.4;
  }
  60% {
    opacity: 1;
  }
  to {
    clip-path: circle(150vmax at 50% 50%);
    opacity: 1;
  }
}

/* ---------- reduced motion: the switch is a cut, the ground holds still, nothing autoplays ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .ground *,
  .ground *::before,
  .ground *::after {
    animation: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  .btn,
  .cover img,
  .credits-roll > * {
    transition: none !important;
  }
  .credits-card.pre .credits-roll > * {
    opacity: 1;
    transform: none;
  }
}
html[data-still] *,
html[data-still] *::before,
html[data-still] *::after {
  animation-play-state: paused !important;
  transition: none !important;
}
html[data-still] .credits-card.pre .credits-roll > * {
  opacity: 1;
  transform: none;
}

/* ---------- the Script tab, as the app draws it (the Android app's tokens: DCTokens ScriptRow, TintedQuote, Bust) ---------- */
.script-pane {
  background: #ffffff;
  border-radius: 22px;
  padding: 14px 12px 14px 0;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 18px 40px rgba(31, 22, 40, 0.1);
  font-family: -apple-system, 'SF Pro Text', Roboto, 'Segoe UI', system-ui, sans-serif;
  color: #000;
  max-height: 640px;
  overflow: auto;
  scrollbar-width: none;
}
.script-pane::-webkit-scrollbar {
  display: none;
}
/* the pane scrolls: its last rows fade out rather than end on a row cut in half */
.script-pane {
  padding-bottom: 56px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
}
.script {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.beat {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: stretch;
  cursor: pointer;
  --voice: #8f8f8f;
}
.beat .margin {
  position: relative;
}
.beat .glyph {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  color: #aeaeb2;
}
.beat .bust {
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 58px;
  height: 58px;
  object-fit: cover;
  object-position: top;
}
.block {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 58px;
  padding: 12px 44px 12px 16px;
  background: #f4f4f4;
  border-radius: 4px 14px 14px 4px;
  transition: background-color 0.2s ease;
}
/* the rule: its own straight bar over the block's leading edge (TintedQuoteBlockView), not a shadow bent by the corners */
.block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 1.5px;
  background: var(--voice);
  transition: width 0.2s ease;
}
.voice-mika .block {
  background: #fbeced;
}
.voice-jun .block {
  background: #ecf2fb;
} /* before color-mix (Safari 16.2) */
.voice .block {
  background: color-mix(in srgb, var(--voice) 10%, #ffffff);
}
.voice-mika {
  --voice: #d9434f;
}
.voice-jun {
  --voice: #3e7bdb;
}
.slug {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(69, 54, 83, 0.6);
  margin-bottom: 6px;
}
.voice .slug {
  color: rgba(69, 54, 83, 0.298);
}
.voice .slug b {
  color: var(--voice);
  font-weight: 600;
}
.line {
  font-size: 16px;
  line-height: 21px;
}
.line q {
  quotes: '\201C' '\201D';
}
.line q::before,
.line q::after {
  color: rgba(69, 54, 83, 0.298);
}
.narration {
  font-size: 16px;
  line-height: 21px;
  font-style: italic;
  color: #3a3a3f;
}
.card-label,
.card-sub {
  font-size: 15px;
  line-height: 20px;
  color: rgba(69, 54, 83, 0.6);
}
.card-title {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  margin: 4px 0;
}
.block .card-label {
  padding-top: 4px;
}
.block .card-sub {
  padding-bottom: 4px;
}
.media {
  align-self: flex-start;
  width: 240px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.more {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: rgba(69, 54, 83, 0.6);
}
.more-glyph {
  width: 20px;
  height: 20px;
}
.beat.on .block {
  background: #e9e9e9;
}
.beat.on .block::before {
  width: 5px;
}
.beat.voice-mika.on .block {
  background: #f7d9dc;
}
.beat.voice-jun.on .block {
  background: #d8e5f8;
}
.beat.voice.on .block {
  background: color-mix(in srgb, var(--voice) 20%, #ffffff);
}
.beat:focus-visible {
  outline: none;
}
.beat:focus-visible .block {
  outline: 2px solid var(--voice);
  outline-offset: 2px;
}
.tile-meta b {
  color: var(--ink);
  font-weight: 600;
}

/* one layout in every costume (app.js fitHeads): a fitted heading keeps the house line box; the badge, a fixed height */
html {
  overflow-anchor: none;
}
[data-fit] {
  overflow-wrap: normal;
}
.faq-q {
  display: block;
  min-width: 0;
}
.plate {
  display: inline-flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
/* the house size of each fitted heading (Novel's, before its --d-scale): the line box every costume keeps */
.hero h1 {
  --fit-size: clamp(34px, 9vw, 52px);
}
.hero-sub {
  --fit-size: 18px;
}
.rail-title {
  --fit-size: 15px;
  flex: 1 1 auto;
  min-width: 0;
}
.tc-title {
  --fit-size: var(--t-h2);
}
.step-title {
  --fit-size: var(--t-h3);
}
.app-cta-title {
  --fit-size: clamp(24px, 4vw, 34px);
}
.credits-title {
  --fit-size: var(--t-display);
}
.faq-q {
  --fit-size: 17.5px;
  flex: 1 1 auto;
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero h1 {
    --fit-size: 52px;
  }
  .hero-sub {
    --fit-size: 21px;
  }
}
@media (min-width: 900px) {
  .hero h1 {
    --fit-size: clamp(44px, 2.4vw + 22px, 66px);
  }
  .hero-sub {
    --fit-size: clamp(19px, 0.35vw + 16px, 22px);
  }
}
/* a section's title card: its text, the same in every costume; the frame is paint (.tc-frame) */
.title-card {
  display: flex;
  flex-direction: column;
}
.title-card > * {
  flex: none;
}
.tc-label {
  line-height: 20px;
  min-height: 20px;
}
/* a title card's text: the card's width less the deepest frame (Impact's padding and border), in every costume */
.sec {
  container-type: inline-size;
}
.title-card {
  --tc-frame: 56px;
}
.title-card > :not(.tc-frame) {
  max-width: calc(100cqw - var(--tc-frame));
  margin-inline: var(--tc-sub-inline, 0) var(--tc-sub-inline, 0);
  margin-inline-start: var(--tc-indent, var(--tc-sub-inline, 0));
}
.title-card > .tc-sub {
  max-width: min(34em, calc(100cqw - var(--tc-frame)));
}
@media (min-width: 900px) {
  .title-card {
    --tc-frame: 108px;
  }
}
.credits-list dd {
  --fit-size: 22px;
}
/* definite widths, so a centred costume's auto margins never shrink a fitted line to its own text */
.title-card > .tc-title,
.title-card > .tc-sub {
  width: 100%;
}
.credits-list {
  width: min(100%, 560px);
}
.faq-q {
  width: 100%;
}
.app-cta-title {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}