/* #ablauf film, played like a video. Loaded after process.css on the home page.
   Hardware surfaces use palette tokens because a device does not change colour with the page
   theme. */

@property --w{syntax:"<length>";inherits:true;initial-value:600px}

/* ---------- Separate facts instead of a squeezed line ---------- */
.fact-row{display:inline-flex;gap:.9em;white-space:nowrap}
.stage-num .fact-row{column-gap:var(--space-3)}
.stage-num .fact-row>:first-child{font-variant-numeric:tabular-nums}
.stage-num .fact-row>:last-child{color:var(--color-foreground)}
/* In the static list the phase line wraps inside its card, also at enlarged text. */
.process-phases .stage-num .fact-row{flex:0 1 auto;min-width:0;flex-wrap:wrap;white-space:normal;row-gap:0}
.process-phases .stage-num .fact-row>span{min-width:0;overflow-wrap:break-word;hyphens:auto}

/* ---------- Film layout: one stage as large as the window, caption at the bottom ---------- */
.film{overflow-x:clip}
.film .sticky{--cap:150px;display:block;width:100%;overflow-x:clip} /* sideways only: the glow may reach past the block above and below */
/* While the film plays, the six phases stay available to assistive technology as the real text. */
.film.story-ready>.process-static{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The stage ends where the caption begins (--cap is measured), so no device sits under it. */
.film-visual{position:absolute;inset:var(--space-12) 0 var(--cap);container-type:size}
.film-scene{position:absolute;inset:0;--w:min(92cqw,150cqh,1500px)}
.film-aura{
  position:absolute;left:50%;top:46%;width:min(90cqw,120cqh);aspect-ratio:1.5;translate:-50% -50%;border-radius:50%;
  background:var(--gradient-brand);filter:blur(min(9cqw,12cqh));opacity:0;pointer-events:none;
  transition:filter var(--motion-duration-standard) var(--motion-easing-standard);
}
.film-caption{
  position:absolute;left:50%;bottom:var(--space-6);translate:-50% 0;z-index:5;
  display:grid;justify-items:center;gap:var(--space-2);width:max-content;max-width:calc(100% - 2 * var(--page-padding));
  padding:var(--space-3) var(--space-6) var(--space-4);text-align:center;
  border-radius:var(--radius-lg);border:var(--stroke-default) solid var(--material-elevated-border);
  background:var(--color-surface-elevated);box-shadow:var(--elevation-md);
}
.film-caption .stage-steps{margin:0;width:min(100%,var(--space-12) * 3);justify-self:center}
.film-caption .stage-num{color:var(--color-link);display:flex;align-items:center;gap:var(--space-2);margin:0}
.film-caption .stage-num::before{content:"";width:var(--space-2);height:var(--space-2);flex:none;border-radius:var(--radius-round);background:var(--color-brand-signal)}
/* Every line of the caption wraps inside the card, also at enlarged text. */
.film-caption>*{min-width:0;max-width:100%}
.film-caption .stage-num{justify-content:center}
.film-caption .stage-num>.fact-row{flex:0 1 auto;min-width:0}
.film-caption .fact-row{flex-wrap:wrap;justify-content:center;white-space:normal;row-gap:0}
.film-caption :is(.fact-row>span,.caption-title){overflow-wrap:break-word;hyphens:auto;min-width:0}
.caption-title{margin:0;font:var(--type-title);color:var(--color-foreground);text-wrap:balance}
.film-caption :is(.stage-num,.caption-title){transition:opacity var(--motion-duration-exit) var(--motion-easing-exit)}
.film-caption.is-swap :is(.stage-num,.caption-title){opacity:0}

/* ---------- iMac ---------- */
.imac-rig,.phone-rig{position:absolute;inset:0;display:grid;place-items:center}
.imac-rig{perspective:calc(var(--w) * 2.4);perspective-origin:50% 40%}
/* No will-change on the iMac and its artboards: the browser then re-rasters them at the size they
   are shown, so text stays sharp where the camera zooms in (up to 2.3x on phones). */
.imac{position:relative;width:var(--w);height:calc(var(--w) * .83);transform-style:preserve-3d;--t:calc(var(--w) * .02)}
.imac-display{position:absolute;inset:0 0 auto;height:calc(var(--w) * .68);transform-style:preserve-3d}
.imac-display>*{position:absolute;inset:0;border-radius:calc(var(--w) * .022)}
.imac-slice{background:var(--palette-neutral-400)}
.imac-front,.imac-back{backface-visibility:hidden}
.imac-front{transform:translateZ(calc(var(--t) / 2 + .5px));background:linear-gradient(180deg,var(--palette-neutral-300),var(--palette-neutral-400));overflow:hidden}
.imac-glass{position:absolute;inset:0 0 calc(var(--w) * .105);background:var(--palette-neutral-950)}
.imac-screen{
  position:absolute;inset:calc(var(--w) * .02);border-radius:calc(var(--w) * .006);overflow:hidden;container-type:size;
  background:var(--color-background);color:var(--color-foreground);
}
.imac-off{position:absolute;inset:0;z-index:3;background:var(--palette-neutral-950);pointer-events:none}
.imac-back{
  transform:rotateY(180deg) translateZ(calc(var(--t) / 2 + .5px));display:grid;place-items:center;
  background:linear-gradient(155deg,var(--palette-neutral-300),var(--palette-neutral-400) 55%,var(--palette-neutral-500));
}
.imac-back .brand-word{font-size:calc(var(--w) * .05);color:var(--palette-neutral-550);translate:0 -40%}
.imac-neck{
  position:absolute;left:50%;top:calc(var(--w) * .42);bottom:0;width:calc(var(--w) * .2);margin-inline-start:calc(var(--w) * -.1);
  transform:translateZ(calc(var(--w) * -.035));border-radius:calc(var(--w) * .008);
  background:linear-gradient(180deg,var(--palette-neutral-400),var(--palette-neutral-350) 70%,var(--palette-neutral-500));
}
.imac-foot{
  position:absolute;left:50%;bottom:0;width:calc(var(--w) * .3);height:calc(var(--w) * .22);margin-inline-start:calc(var(--w) * -.15);
  transform-origin:50% 100%;transform:translateZ(calc(var(--w) * .075)) rotateX(90deg);border-radius:calc(var(--w) * .012);
  background:var(--palette-neutral-350);box-shadow:0 0 0 var(--stroke-default) var(--palette-neutral-500) inset;
}

/* ---------- Scenes on the monitor. Positions use container units so the same scene works on a
   landscape screen and on the close-up of a portrait stage. ---------- */
.scene{
  position:absolute;inset:0;opacity:0;font-family:var(--font-family-product);letter-spacing:normal;line-height:1.4;text-align:left;
  font-size:min(4.2cqw,2.9cqh);color:var(--color-foreground);
}
.imac-screen::before{content:"";position:absolute;inset:0;background:var(--gradient-prism);opacity:.16;pointer-events:none}
:where(.scene) svg{width:1.4em;height:1.4em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Idea: everything lies scattered (--s:1), then it comes together in one job (--s:0). */
.scene-idea{--s:1}
.loose{
  --x:0;--y:0;--r:0; /* each note sets its own place inline */
  position:absolute;left:50%;top:47%;width:13em;padding:1em 1.2em;border-radius:var(--radius-md);
  background:var(--material-standard-background);border:var(--stroke-default) solid var(--material-standard-border);box-shadow:var(--elevation-md);
  transform:translate(calc(-50% + var(--x) * 1cqw * var(--s) * var(--spread,1)),calc(-50% + var(--y) * 1cqh * var(--s))) rotate(calc(var(--r) * 1deg * var(--s))) scale(calc(.55 + .45 * var(--s)));
}
.loose small{display:block;font-size:.8em;letter-spacing:.08em;font-weight:var(--font-weight-label);color:var(--color-muted-foreground);margin-bottom:.4em}
.loose b{font-size:1.2em;font-weight:var(--font-weight-semibold);line-height:1.25}
.loose.chat{width:11em;border-radius:1.33em 1.33em 1.33em .3em;background:var(--color-accent);color:var(--color-accent-foreground);border-color:transparent}
.loose.photo{width:11em;height:8em;padding:0;flex:none}
.loose.tag{width:auto;padding:.5em 1em;border-radius:var(--radius-round);background:var(--color-muted);font-weight:var(--font-weight-label)}
.order-card{
  position:absolute;left:50%;top:47%;width:24em;max-width:86cqw;padding:1.6em 1.8em;border-radius:1.33em;translate:-50% -50%;
  background:var(--material-standard-background);border:var(--stroke-default) solid var(--color-primary);box-shadow:var(--elevation-lg);
}
.order-card small{display:block;font-size:.8em;letter-spacing:.08em;font-weight:var(--font-weight-label);color:var(--color-link)}
.order-card h3{font-family:var(--font-family-product);font-size:1.87em;font-weight:var(--font-weight-strong);line-height:1.2;margin:.3em 0 .2em}
.order-card p{font-size:.93em;color:var(--color-muted-foreground);margin:0}
.scene-title{
  position:absolute;left:0;right:0;top:calc(47% + 9.6em);margin:0;text-align:center;
  font-size:1.47em;font-weight:var(--font-weight-strong);color:var(--color-foreground);
}

/* Wireframes → design: two artboards share one geometry, so a wipe turns one into the other. */
.scene-screens{display:grid;place-items:center;perspective:140cqh}
/* As tall as the view on the screen allows (94 %), so the artboard needs no scale-up (sharp text). */
.arts-wrap{position:relative;width:min(72cqw,94cqh);height:94cqh;font-size:min(2cqw,2.33cqh);--wipe:0}
.arts{position:absolute;inset:0;display:flex}
/* The artboards are the app screens the iPhone shows later, in the proportions of its display
   (corners as a share of width and height, so they scale with the card that flies into the phone). */
/* One view: the first app screen, in the middle. */
.arts .app-artboards{display:grid;grid-template:100% / 100%;place-items:center;flex:1;padding:0}
.arts .app-artboard{height:100%;aspect-ratio:9/19.9;transform-origin:50% 100%}
.arts .app-artboard{padding:0;border-radius:10%/4.5%;overflow:hidden}
.arts .app-artboard>.screen{border-radius:inherit;box-shadow:none}
.arts-wire{clip-path:inset(-80% -60% -80% calc(var(--wipe) * 100%))}
.arts-design{clip-path:inset(-10% calc((1 - var(--wipe)) * 100%) -10% -10%)}
.arts-design.is-wiped{clip-path:none}
.arts-design.is-wiping::after{
  content:"";position:absolute;top:-4%;bottom:-4%;left:calc(var(--wipe) * 100% - var(--stroke-strong));width:var(--stroke-strong);
  background:var(--color-brand-signal);box-shadow:0 0 var(--space-6) var(--space-1) var(--color-primary);
}

/* ---------- iPhone ---------- */
.phone-rig{perspective:1600px;perspective-origin:50% 42%}
.phone3d,.phone-clone{grid-area:1/1;position:relative;height:min(92cqh,820px);aspect-ratio:9/19.2;--pt:14px;--pr:46px}
.phone3d{transform-style:preserve-3d}
.phone3d>*{position:absolute;inset:0;border-radius:var(--pr)}
.phone-slice{background:var(--palette-neutral-800)}
.film :is(.phone3d,.phone-clone) .phone{
  width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:var(--pr);
  transition:none;box-shadow:0 0 0 1px var(--palette-neutral-750) inset;
}
.film .phone3d .phone{transform:translateZ(calc(var(--pt) / 2 + .5px));backface-visibility:hidden}
.film .phone-clone{opacity:0}
.film .phone-clone .phone{transform:none;box-shadow:0 0 0 1px var(--palette-neutral-750) inset,var(--elevation-lg)}
.phone-back{
  transform:rotateY(180deg) translateZ(calc(var(--pt) / 2 + .5px));backface-visibility:hidden;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--palette-neutral-700),var(--palette-neutral-900) 60%,var(--palette-neutral-950));
  box-shadow:0 0 0 var(--stroke-default) var(--palette-neutral-675) inset;
}
.phone-back .brand-word{font-size:1.25rem;color:var(--palette-neutral-600)}
.phone-cam{
  position:absolute;top:3.2%;left:6%;width:44%;aspect-ratio:1;border-radius:24%;
  background:var(--palette-neutral-850);box-shadow:0 0 0 var(--stroke-default) var(--palette-neutral-675) inset;
}
.phone-cam i{
  position:absolute;width:40%;aspect-ratio:1;border-radius:var(--radius-round);
  background:radial-gradient(circle at 38% 34%,var(--palette-neutral-650),var(--palette-neutral-950) 58%);
  box-shadow:0 0 0 calc(var(--stroke-strong) * 1.5) var(--palette-neutral-700);
}
.phone-cam i:nth-child(1){top:8%;left:8%}
.phone-cam i:nth-child(2){bottom:8%;left:8%}
.phone-cam i:nth-child(3){top:30%;right:6%}

/* The four steps of the job glide past the phone as large words, alternating sides. */
.float-steps{position:absolute;inset:0;pointer-events:none}
.float-step{
  position:absolute;top:38%;margin:0;display:grid;gap:var(--space-1);opacity:0;
  font-family:var(--font-family-display);color:var(--color-foreground);line-height:1;
}
.float-step span{font:var(--type-code);font-size:min(2cqw,3cqh);color:var(--color-link);font-variant-numeric:tabular-nums}
.float-step b{font-size:min(3.6cqw,8cqh);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.float-step small{font:var(--type-body);color:var(--color-muted-foreground)}
.float-step:nth-child(odd){right:calc(50% + min(92cqh,820px) * .29);text-align:right;justify-items:end}
.float-step:nth-child(even){left:calc(50% + min(92cqh,820px) * .29)}

/* ---------- Compact ---------- */
@media (max-width:1023.98px){
  /* Laid out at the close-up size (2.3 x the wide shot) and scaled down, so text stays sharp. */
  .film-scene{--w:min(212cqw,345cqh,1500px)}
  /* Flex keeps the larger iMac centred where it is wider than the stage; wide stages keep the grid
     composition. */
  .imac-rig{display:flex;align-items:center;justify-content:center}
  .imac{flex:none}
  /* The camera is close: only the middle of the screen is in view, so the scenes keep to it. */
  .imac-screen .scene-idea{--spread:.42}
  .imac-screen .loose.tag:nth-child(7){--x:-30!important;--y:2!important}
  .imac-screen .loose.tag:nth-child(8){--x:32!important;--y:-4!important}
  .imac-screen .loose{width:10em;padding:.7em .9em}
  .imac-screen .loose.photo{width:8.5em;height:6em;padding:0}
  .imac-screen .loose.tag{width:auto;padding:.4em .8em}
  .imac-screen .order-card{width:17em;padding:1.2em 1.4em}
  .imac-screen .arts-wrap{width:min(45cqw,94cqh)}
  .phone3d,.phone-clone{height:min(76cqh,560px);--pt:11px}
  .phone-rig{padding-top:12cqh}
  .float-step{top:2cqh;left:0!important;right:0!important;text-align:center!important;justify-items:center!important}
  .float-step b{font-size:min(9cqw,6cqh)}
  .float-step span{font-size:min(3.6cqw,2.4cqh)}
  /* The two figures are visible together, so each gets its own half of the band above the phone.
     Their labels size with the stage like the figures, so the band keeps its height. */
  .float-step.float-kpi{width:50%}
  .float-step.float-kpi:nth-last-child(2){right:auto!important}
  .float-step.float-kpi:last-child{left:50%!important}
  .float-step.float-kpi small{font-size:min(3.6cqw,2.4cqh);line-height:1.2}
  .film-caption{bottom:var(--space-4);padding-inline:var(--space-4)}
}
@media (max-width:560px){
  .phone3d,.phone-clone{--pr:38px}
}

/* The store headline's 8ch measure is narrower than its longest word; keep the word whole. */
.film .store-art h4{max-width:10ch;overflow-wrap:normal;hyphens:manual}

/* ---------- Wireframes, low fidelity: square outlines without fills, every word in one grey
   typewriter face, a crossed box for the map. The words stay, so the screen can be read; colour,
   weight, rounding and surfaces arrive with the wipe. Boxes keep the size they have in the
   finished design, so the wipe still lines up. ---------- */
.arts-wire .artboard-wire{
  --wf-line:var(--color-muted-foreground);
  /* Same border widths as the design, so the wipe lines up to the pixel; the stronger
     outline and the lines of boxes without a border in the design are drawn as shadows. */
  background:transparent;border:var(--stroke-default) solid var(--wf-line);border-radius:.5em;
  box-shadow:0 0 0 calc(var(--stroke-strong) - var(--stroke-default)) var(--wf-line);
}
.arts-wire .artboard-wire *{
  font-family:var(--font-family-mono);font-weight:var(--font-weight-regular);color:var(--wf-line);
  background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.arts-wire .artboard-wire :is(h3,h3 *,h4,h4 *,.app-action,.app-action *){color:var(--color-foreground)}
.arts-wire .artboard-wire :is(.app-avatar,.project-sheet,.app-action,.map-caption){border-color:var(--wf-line);border-radius:.2em}
.arts-wire .artboard-wire :is(.app-badge,.app-map){box-shadow:inset 0 0 0 var(--stroke-default) var(--wf-line);border-radius:.2em}
.arts-wire .artboard-wire .project-sheet{border-style:dashed}
.arts-wire .artboard-wire .project-row+.project-row{border-top-color:var(--wf-line)}
.arts-wire .artboard-wire .todo-empty{border-color:var(--wf-line);border-radius:0}
.arts-wire .artboard-wire .app-home-indicator{background:var(--wf-line)}
.arts-wire .artboard-wire .app-badge::before{background:var(--wf-line)}
.arts-wire .artboard-wire .app-map{
  background:
    linear-gradient(to top right,transparent calc(50% - 1px),var(--wf-line) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(to bottom right,transparent calc(50% - 1px),var(--wf-line) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));
}
.arts-wire .artboard-wire .app-map>:not(.map-caption){visibility:hidden}
.arts-wire .artboard-wire .map-caption{background:var(--color-background)}

/* ---------- The iPhone's display stays black (switched off) until the app starts to be built. ---------- */
.phone-off{position:absolute;inset:0;z-index:11;border-radius:inherit;background:var(--palette-neutral-950);pointer-events:none}

/* ---------- Player: chapters and controls in the caption ---------- */
/* One block a little lower than the window, so it fits below the site's top navigation as a whole. */
.film.player .sticky{position:relative;height:100%}
.film.player .film-visual{top:var(--space-4);cursor:pointer}
.film.player:has(.film-toggle:disabled) .film-visual{cursor:default}
/* Six fixed touch targets of 44 px, whatever the caption text. */
.film.player .chapters{width:calc(6 * var(--size-target-web-touch) + 5 * var(--space-1));max-width:none;gap:var(--space-1)}
.chapter{flex:none;width:var(--size-target-web-touch);display:grid;align-items:center;height:var(--size-target-web-touch);margin-block:calc(var(--space-3) * -1);padding:0 var(--space-1);border:0;border-radius:var(--radius-sm);background:none;cursor:pointer}
.chapter:hover .tick{background:var(--color-border-strong)}
.chapter:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:calc(var(--focus-offset) * -1)}
/* No dot before the phase in the caption. */
.film.player .film-caption .stage-num::before{content:none}
/* Play and pause sit in the caption: phase and title are one button with a
   small play/pause mark before the phase; the stage stays clear, nothing dims it. The chapters
   lie above it, so their 44 px targets win where the two meet. At the end the button is
   disabled and its mark hidden; the replay button takes the chapters' row. */
.film-caption .chapters{position:relative;z-index:1}
.film-toggle{
  display:grid;justify-items:center;gap:var(--space-2);min-width:0;max-width:100%;margin:0;padding:0;
  border:0;border-radius:var(--radius-md);background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;
}
.film-toggle:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-width)}
.film-toggle:disabled{cursor:default}
.caption-head{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:0;max-width:100%}
.toggle-icon{
  /* No round button: the mark is part of the phase line, in the line's own
     link colour, the size of its text. Standing (before the start, paused) it is the filled play
     icon (solid style); while playing three level bars move like a running recording. */
  display:grid;place-items:center;flex:none;width:1em;height:1em;color:var(--color-link);
  transition:color var(--motion-duration-fast) var(--motion-easing-standard);
}
.toggle-icon>*{grid-area:1/1;display:none}
.toggle-icon svg{width:100%;height:100%}
.film-toggle:not([data-state="playing"]) .toggle-play{display:block}
.film-toggle[data-state="playing"] .toggle-level{display:flex}
.film-toggle:not(:disabled):hover .toggle-icon{color:var(--color-foreground)}
.toggle-level{width:100%;height:100%;align-items:end;justify-content:space-between}
.toggle-level i{display:block;width:22%;height:100%;border-radius:1px;background:currentColor;transform-origin:50% 100%;animation:level 1.1s ease-in-out infinite}
.toggle-level i:nth-child(2){animation-delay:-.35s}
.toggle-level i:nth-child(3){animation-delay:-.7s}
@keyframes level{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.film-toggle[data-state="ended"] .toggle-icon{display:none}

/* ---------- Phase 04, development: the iMac stays in the background (slightly dimmed) with the
   design on the left and the code editor on the right; the element being built is marked in the
   design, and a copy of it flies into the iPhone. ---------- */
.imac{--dim:0}
.imac-screen{filter:brightness(calc(1 - var(--dim) * .12))}
/* The code is set at a fixed size and scaled to the pane's width (film.ts, measure), so it fits
   whatever monospace face the device falls back to; the pane clips as a last resort. */
.code-pane{
  position:absolute;right:4cqw;top:50%;width:44cqw;translate:0 -50%;padding:1.4em 1.6em 1.6em;overflow:hidden;
  border-radius:1.2em;border:var(--stroke-default) solid var(--color-border);background:var(--color-surface);
  font-size:min(1.7cqw,3.6cqh);color:var(--color-foreground);opacity:0;
}
.code-body{width:max-content;font-family:var(--font-family-mono);font-size:16px;line-height:1.75;transform-origin:0 0;-webkit-text-size-adjust:none;text-size-adjust:none}
.code-tab{margin:0 0 1em;padding-bottom:.7em;border-bottom:var(--stroke-default) solid var(--color-border);color:var(--color-muted-foreground)}
.code-lines{margin:0;padding:0;list-style:none;counter-reset:line}
.code-lines>li{position:relative;min-height:1.75em;padding-left:3em;white-space:pre;counter-increment:line}
.code-lines>li::before{content:counter(line);position:absolute;left:0;width:1.8em;text-align:right;color:var(--color-muted-foreground)}
.code-lines .k{color:var(--color-link)}
.code-lines .s{color:var(--color-brand-signal)}
.code-lines>li.is-typing{background:color-mix(in srgb,var(--color-primary) 14%,transparent)}
.code-lines>li.is-typing::after{content:"";display:inline-block;width:.55em;height:1.1em;vertical-align:-.2em;background:var(--color-foreground)}
.arts-design .is-building{outline:var(--stroke-strong) solid var(--color-brand-signal);outline-offset:.35em;border-radius:.4em}
.build-flight{position:absolute;left:0;top:0;z-index:3;transform-origin:0 0;pointer-events:none;visibility:hidden}
/* The copy gets the part's rounded width; the one-line badge must not wrap on the lost fraction. */
.build-flight .app-badge{white-space:nowrap}
.build-flight>.layer{position:static;inset:auto;display:block;padding:0;opacity:1;transform:none;background:transparent;isolation:auto}
.build-flight>.layer>*{
  margin:0;border-radius:.6em;
  outline:var(--stroke-strong) solid var(--color-brand-signal);outline-offset:.35em;
  filter:drop-shadow(0 .6em 1.2em color-mix(in srgb,var(--color-primary) 45%,transparent));
}

/* ---------- End of the film: a replay button in the caption, in place of the chapters. ---------- */
.film-replay{
  /* Takes the chapters' row: visibly 36 px, the target 44 px. The target reaches up
     into the caption's padding and down to the phase line, never over it: 8 px above the
     visible button and 4 px below it are free. The row is 4 px taller than the chapters'. */
  position:relative;display:inline-flex;align-items:center;gap:var(--space-2);
  height:calc(var(--space-8) + var(--space-1));margin-block:calc(var(--space-2) * -1) calc(var(--space-1) * -1);
  padding:0 var(--space-5);border-radius:var(--radius-round);border:var(--stroke-default) solid var(--material-elevated-border);
  background:var(--color-accent);color:var(--color-accent-foreground);font:inherit;font-weight:var(--font-weight-label);cursor:pointer;
}
.film-replay[hidden],.film-caption .chapters[hidden]{display:none}
/* The 4 px the replay row adds come back between phase line and title, so the card keeps its height. */
.film-caption:has(.film-replay:not([hidden])) .caption-title{margin-top:calc(var(--space-1) * -1)}
.film-replay::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--size-target-web-touch);translate:0 -50%}
.film-replay svg{width:var(--space-5);height:var(--space-5);flex:none}
.film-replay:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-width)}

/* ---------- Sharp on 1x screens: once a device faces the camera and stands still, its own plane is
   drawn flat (2D) at whole pixels. In 3D the browser resamples the screen as a texture, which
   blurs text on screens without a Retina density. The 3D body (stand, foot, back) stays. ---------- */
.imac.is-flat .imac-display,.phone3d.is-flat{transform-style:flat}