/*
 * Visual's landing, pricing and desktop-only pages, on Design system 1.
 *
 * The page is graphite, as the studio is, and every panel the window's whole width in its own
 * colours whatever the reader's theme (Ezo's landing shape): its name at three times the text's
 * size, what it is in a line, its ways on, and its picture standing on the panel's foot. Pale panels
 * (film leader, the halo's pastel) read in the light scheme, so the DS1 controls on them are drawn
 * for their colour.
 *
 * Every measure is the page's square (`--ds-unit`, scaled by `--sf` on a phone). The pictures are
 * drawn on their own unscaled square (`data-ds-surface` with `--ds-sf: 1`, so DS1's tokens inside
 * read 20px) and scaled whole to the width they have (`.fit`, landing.ts), so a picture keeps its
 * grid at any size. Motion animates transform and opacity only, every box stays upright, and
 * everything holds still for less motion and off screen. Colours are Visual's tokens
 * (src/brand/palette.css) and DS1's; no raw values.
 */

/* ---- Foundations ------------------------------------------------------- */

:root {
  color-scheme: dark;
  /* DS1's components read --ds-sf; the page's scale (head.ts) is --sf. */
  --ds-sf: var(--sf, 1);
  --ds-accent-color: var(--visual-phosphor);
  --ds-focus-ring: var(--visual-phosphor);
  --ds-button-text-color-on-accent: var(--visual-console);
  --visual-logotype: "Hoefler Text", Baskerville, Georgia, serif;
  --ink: var(--visual-legend);
  --dim: var(--visual-label);
  --line: var(--visual-rail);
  --paper: var(--visual-console);
  --ds-paper: var(--paper);
  --ds-background: var(--paper);
  --background: var(--paper);
  --ds-text-color: var(--ink);
  --ds-text-color-muted: var(--dim);
  --ds-title-color: var(--dim);
  --ds-border-color: var(--line);
  --ds-fill: var(--visual-fader);
  --ds-fill-hover: var(--visual-rail);
  --ds-row-fill-hover: var(--visual-fader);
  /* The figures' face: GT America Compressed, large. */
  --figure-face: var(--ds-typeface-compressed);
  background: var(--visual-console);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(3 * var(--ds-unit));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--visual-console);
  color: var(--ink);
  font-family: var(--ds-typeface-regular);
  font-feature-settings: var(--ds-font-features);
  font-size: var(--ds-type-size-default);
  font-weight: var(--ds-type-weight-default);
  line-height: var(--ds-unit);
  letter-spacing: var(--ds-type-letterspacing-default);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Words that only a screen reader reads. */
.hidden-words {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* What only a computer, or only a phone or tablet, shows; head.ts marks the root before the first paint. */
:root[data-mobile] .on-computer,
:root:not([data-mobile]) .on-phone,
:root[data-session] .signed-out,
:root:not([data-session]) .signed-in {
  display: none !important;
}

/* DS1's icon files, drawn by DS1's .ds-icon (controls.css) as a mask in the text's colour. */
.icon-check { --ds-icon: url("/vendor/ds1/icons/check.svg"); }
.icon-close { --ds-icon: url("/vendor/ds1/icons/close.svg"); }
.icon-minus { --ds-icon: url("/vendor/ds1/icons/minus.svg"); }
.icon-cloud { --ds-icon: url("/vendor/ds1/icons/cloud.svg"); }
.icon-folder { --ds-icon: url("/vendor/ds1/icons/folder.svg"); }
.icon-video { --ds-icon: url("/vendor/ds1/icons/video.svg"); }
.icon-image { --ds-icon: url("/vendor/ds1/icons/image.svg"); }
.icon-window { --ds-icon: url("/vendor/ds1/icons/window.svg"); }
.icon-play { --ds-icon: url("/vendor/ds1/icons/play-alt.svg"); }
.icon-pause { --ds-icon: url("/vendor/ds1/icons/pause.svg"); }
.icon-loop { --ds-icon: url("/vendor/ds1/icons/loop.svg"); }
.icon-grid { --ds-icon: url("/vendor/ds1/icons/2xgrid.svg"); }
.icon-camera { --ds-icon: url("/vendor/ds1/icons/camera.svg"); }
.icon-email { --ds-icon: url("/vendor/ds1/icons/email.svg"); }
.icon-code { --ds-icon: url("/vendor/ds1/icons/code.svg"); }
.icon-gallery { --ds-icon: url("/vendor/ds1/icons/gallery.svg"); }
.icon-curve { --ds-icon: url("/vendor/ds1/icons/curve.svg"); }
.icon-phone { --ds-icon: url("/vendor/ds1/icons/phone.svg"); }
.icon-sparkle { --ds-icon: url("/vendor/ds1/icons/sparkle.svg"); }
.icon-stats { --ds-icon: url("/vendor/ds1/icons/stats.svg"); }
.icon-download { --ds-icon: url("/vendor/ds1/icons/download.svg"); }
.icon-up-right { --ds-icon: url("/vendor/ds1/icons/up-right.svg"); }
.icon-history { --ds-icon: url("/vendor/ds1/icons/history.svg"); }
.icon-compose { --ds-icon: url("/vendor/ds1/icons/compose.svg"); }
.icon-views { --ds-icon: url("/vendor/ds1/icons/views.svg"); }
.icon-bolt { --ds-icon: url("/vendor/ds1/icons/bolt.svg"); }
.icon-lock { --ds-icon: url("/vendor/ds1/icons/lock.svg"); }
.icon-eye { --ds-icon: url("/vendor/ds1/icons/eye.svg"); }
.icon-tabs { --ds-icon: url("/vendor/ds1/icons/tabs.svg"); }
.icon-star { --ds-icon: url("/vendor/ds1/icons/star.svg"); }

/* ---- Site chrome -------------------------------------------------------- */

ds-header.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  --ds-header-paper: color-mix(in srgb, var(--visual-console) 82%, transparent);
  --ds-header-line: var(--visual-rail);
  -webkit-backdrop-filter: blur(calc(var(--ds-unit) / 2)) saturate(1.4);
  backdrop-filter: blur(calc(var(--ds-unit) / 2)) saturate(1.4);
}

/* The brand: the italic serif logotype, on the header's one square. */
.logotype {
  color: var(--ink);
  font-family: var(--visual-logotype);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-feature-settings: normal;
}

ds-header .logotype {
  font-size: calc(var(--ds-type-size-default) * 1.375);
  line-height: var(--ds-unit);
}

/* The phone's quiet state where a computer has Sign in. */
.quiet-state {
  display: inline-flex;
  align-items: flex-end;
  gap: calc(4px * var(--ds-sf));
  height: var(--ds-unit);
  color: var(--dim);
  line-height: var(--ds-type-lineheight-default);
  white-space: nowrap;
}

.quiet-state .ds-icon,
.with-icon .ds-icon {
  --ds-icon-size: 16px;
}

ds-footer.site-footer {
  display: block;
  border-top: 1px solid var(--visual-rail);
  background: var(--visual-console);
  color: var(--ink);
}

ds-footer .logotype {
  font-size: calc(var(--ds-type-size-default) * 1.375);
  line-height: var(--ds-unit);
}

/* ---- Panels ------------------------------------------------------------- */

/*
 * A panel in rows: three above its name, the name on three at three times the text's size, what
 * it is on lines of a square and a half at half as large again, a square, its ways on, two squares,
 * and its picture standing on the panel's foot.
 */
.panel {
  --paper: var(--visual-console);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: calc(4 * var(--ds-unit)) var(--ds-unit) 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  --ds-paper: var(--paper);
  --ds-background: var(--paper);
  --background: var(--paper);
  --ds-text-color: var(--ink);
  --ds-text-color-muted: var(--dim);
  --ds-title-color: var(--dim);
  --ds-border-color: var(--line);
}

.panel[data-tone="console"] { --paper: var(--visual-console); }
.panel[data-tone="casing"] { --paper: var(--visual-casing); }

/* Film leader, the storyboard's paper: the light scheme, the graphite for words. */
.panel[data-tone="leader"],
.panel[data-tone="halo"],
.panel[data-tone="phosphor"] {
  color-scheme: light;
  --ink: var(--visual-console);
  --dim: color-mix(in srgb, var(--visual-console) 58%, var(--paper));
  --line: color-mix(in srgb, var(--visual-console) 14%, var(--paper));
  --ds-fill: color-mix(in srgb, var(--visual-console) 8%, var(--paper));
  --ds-fill-hover: color-mix(in srgb, var(--visual-console) 13%, var(--paper));
  --ds-row-fill-hover: var(--ds-fill);
}

.panel[data-tone="leader"] { --paper: var(--visual-leader); }
.panel[data-tone="halo"] { --paper: var(--visual-halo-pastel); }
.panel[data-tone="phosphor"] { --paper: var(--visual-phosphor-pastel); }

/* The landing keeps the render ribbon's graphite, violet and pink, with deep blue panels. */
body[data-page="index"] {
  --dim: color-mix(in srgb, var(--visual-label) 75%, var(--visual-legend));
  --landing-blue: color-mix(in srgb, var(--visual-scope-dim) 45%, var(--visual-phosphor-dim));
}

.panel[data-tone="graphite"] { --paper: var(--visual-casing); }
.panel[data-tone="blue"] { --paper: var(--landing-blue); }
.panel[data-tone="violet"] { --paper: var(--visual-phosphor-dim); }

.panel__kicker {
  box-sizing: border-box;
  height: var(--ds-unit);
  margin: 0;
  padding-top: calc(4px * var(--ds-sf));
  color: var(--dim);
  font-size: calc(var(--ds-type-size-default) * 1.25);
  line-height: var(--ds-type-lineheight-default);
}

.panel__title {
  box-sizing: border-box;
  max-width: calc(44 * var(--ds-unit));
  margin: 0;
  color: var(--ink);
  font-family: var(--ds-typeface-medium);
  font-size: calc(var(--ds-type-size-default) * 3);
  font-weight: var(--ds-type-weight-default);
  line-height: calc(3 * var(--ds-unit));
  letter-spacing: calc(-1.2px * var(--ds-sf));
  text-wrap: balance;
}

/* The second sentence of a headline pair, in the panel's grey. */
.panel__title .then {
  color: var(--dim);
}

/* The hero's name: the logotype on five squares, glowing as the box's frames do. */
.panel__title.logotype {
  font-family: var(--visual-logotype);
  font-size: calc(5 * var(--ds-unit));
  font-weight: 500;
  line-height: calc(5 * var(--ds-unit));
  letter-spacing: calc(-2px * var(--ds-sf));
  text-shadow: 0 0 calc(var(--ds-unit) * 1.5) color-mix(in srgb, var(--visual-phosphor) 45%, transparent);
}

.panel__line {
  box-sizing: border-box;
  max-width: calc(34 * var(--ds-unit));
  margin: calc(var(--ds-unit) / 2) 0 0;
  color: var(--dim);
  font-size: calc(var(--ds-type-size-default) * 1.5);
  line-height: calc(1.5 * var(--ds-unit));
  letter-spacing: calc(-0.45px * var(--ds-sf));
  text-wrap: balance;
}

/* On a phone the line is a size down, so it takes three lines where a computer takes two. */
:root[data-mobile] .panel__line {
  font-size: calc(var(--ds-type-size-default) * 1.25);
  line-height: calc(1.5 * var(--ds-unit));
  letter-spacing: calc(-0.4px * var(--ds-sf));
}

.panel__line strong {
  color: var(--ink);
  font-weight: inherit;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--ds-unit) / 2);
  min-height: var(--ds-unit);
  margin-top: calc(1.5 * var(--ds-unit));
}

.panel__art {
  width: 100%;
  margin-top: calc(3 * var(--ds-unit));
}

/* A picture that does not stand on the foot keeps four squares under it. */
/* On a phone a picture runs to the screen's edges, so it is drawn as large as it can be. */
:root[data-mobile] .panel__art {
  width: calc(100% + 2 * var(--ds-unit));
  margin-inline: calc(-1 * var(--ds-unit));
}

.panel__art--padded {
  margin-bottom: calc(4 * var(--ds-unit));
}

.panel__note + .panel__art {
  margin-top: 0;
}

.panel__end {
  height: calc(4 * var(--ds-unit));
}

/* A note under a picture: a line of the panel's grey, a square above and two below. */
.panel__note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0 var(--ds-unit);
  margin: var(--ds-unit) 0 calc(3 * var(--ds-unit));
  color: var(--dim);
  line-height: var(--ds-type-lineheight-default);
}

.panel__note > span {
  display: inline-flex;
  white-space: nowrap;
  align-items: flex-end;
  gap: calc(4px * var(--ds-sf));
  min-height: var(--ds-unit);
}

/* A signal's lamp: a dot one control's half high, lit in its colour. */
.lamp {
  display: inline-block;
  flex: none;
  width: calc(8px * var(--ds-sf));
  height: calc(8px * var(--ds-sf));
  margin: 0 calc(4px * var(--ds-sf)) calc(4px * var(--ds-sf));
  border-radius: 50%;
  background: var(--lamp, var(--visual-chroma));
  box-shadow: 0 0 calc(6px * var(--ds-sf)) var(--lamp, var(--visual-chroma));
}

/* ---- Pictures that scale to fit ---------------------------------------- */

/*
 * A picture drawn on its own unscaled square, `--fit-w` by `--fit-h` pixels, scaled whole to the
 * room it has: landing.ts measures it and sets `--fit` and its height. A phone gets the same from
 * its scale before the script has run: the picture takes all 280 units a phone is drawn as.
 */
.fit {
  --w: var(--fit-w, 1120);
  --h: var(--fit-h, 600);
  --fit: 1;
  position: relative;
  width: 100%;
  height: calc(var(--h) * 1px * var(--fit));
  container-type: inline-size;
}

:root[data-mobile] .fit {
  --w: var(--fit-w-phone, var(--fit-w, 1120));
  --h: var(--fit-h-phone, var(--fit-h, 600));
  --fit: min(1, calc(var(--sf, 1) * 280 / var(--w)));
}

.fit > .fit__art {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(var(--fit));
  transform-origin: top center;
}

/* Inside a picture DS1's measures are the unscaled square: the whole picture is scaled instead. */
[data-ds-surface] {
  --ds-sf: 1;
  --q: var(--ds-1, 20px);
  font-size: var(--ds-type-size-default);
  line-height: var(--ds-unit);
  letter-spacing: var(--ds-type-letterspacing-default);
  text-align: start;
}

/* The button faces still read Design system 1's older names, which one.css would give them;
   Visual loads the component tokens alone, so they are given here, per panel, from the DS1 tokens. */
:root,
.panel {
  --accent-color: var(--ds-accent-color);
  --button-background-color-secondary: var(--ds-fill);
  --button-text-color: var(--ds-text-color);
  --ds-button-text-color: var(--ds-text-color);
  --button-text-color-on-light: var(--ds-button-text-color-on-accent);
  --black: var(--ds-black);
  --white: var(--ds-white);
}

/* Everything that moves holds still off screen (landing.ts marks the panel) and for less motion. */
[data-motion]:not([data-playing]) *,
[data-motion]:not([data-playing]) *::before,
[data-motion]:not([data-playing]) *::after {
  animation-play-state: paused !important;
}

.mono {
  font-family: var(--ds-typeface-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---- The hero: the studio ----------------------------------------------- */

/*
 * The studio, drawn as it is: the window's bar, the library, the stage with the four format frames
 * glowing as on Visual's box, the inspector, and the timeline with its tracks, clips, keyframes and
 * the playhead sweeping nine seconds. 56 squares by 31; below 900 pixels of room the library and
 * the inspector fold away and the stage and timeline stand alone, 34 squares wide.
 */
.studio {
  --tl-second: calc(5 * var(--q));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: calc(10 * var(--q)) calc(34 * var(--q)) calc(12 * var(--q));
  grid-template-rows: calc(2 * var(--q)) calc(17 * var(--q)) calc(12 * var(--q));
  grid-template-areas: "bar bar bar" "lib stage insp" "tl tl tl";
  width: calc(56 * var(--q));
  height: calc(31 * var(--q));
  overflow: hidden;
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
  background: var(--visual-casing);
  box-shadow:
    inset 0 0 0 1px var(--visual-rail),
    0 0 calc(4 * var(--q)) color-mix(in srgb, var(--visual-phosphor) 16%, transparent),
    0 0 calc(12 * var(--q)) color-mix(in srgb, var(--visual-phosphor) 10%, transparent);
  color: var(--visual-legend);
}

@container (max-width: 900px) {
  .studio {
    grid-template-columns: calc(34 * var(--q));
    grid-template-areas: "bar" "stage" "tl";
    width: calc(34 * var(--q));
  }
  .studio .st-lib,
  .studio .st-insp,
  .studio .st-hide-compact {
    display: none;
  }
  .studio {
    --tl-second: calc(3.5 * var(--q));
  }
  .studio .st-tl {
    --tl-head: 0px;
  }
  .studio .st-track {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio .st-head {
    display: none;
  }
}

.st-row {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  gap: calc(4px);
  height: var(--q);
  line-height: 16px;
  white-space: nowrap;
}

.st-row .ds-icon {
  --ds-icon-size: 16px;
}

.st-muted { color: var(--visual-label); }

/* The window's bar: two squares, the title in its middle, Share and Render at its end. */
.st-bar {
  grid-area: bar;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--q);
  box-shadow: inset 0 -1px var(--visual-rail);
}

.st-lights {
  display: flex;
  gap: 8px;
}

.st-lights i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--visual-rail);
}

.st-title {
  display: flex;
  align-items: baseline;
  gap: var(--q);
}

.st-title b {
  font-family: var(--ds-typeface-medium);
  font-weight: var(--ds-type-weight-bold);
}

.st-bar-end {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: calc(var(--q) / 2);
}

/* A button in the picture: one control high, 4px corners, as DS1 draws one. */
.st-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--visual-fader);
  line-height: 16px;
  white-space: nowrap;
}

.st-btn--accent {
  background: var(--visual-phosphor);
  color: var(--visual-console);
  box-shadow: 0 0 var(--q) color-mix(in srgb, var(--visual-phosphor) 45%, transparent);
}

.st-btn .ds-icon {
  --ds-icon-size: 16px;
  margin-inline-start: -4px;
}

.st-avatar {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--visual-amber);
  color: var(--visual-console);
  font-size: 10px;
  line-height: 1;
}

.st-avatar + .st-avatar {
  margin-inline-start: -7px;
  background: var(--visual-scope);
  box-shadow: 0 0 0 1px var(--visual-casing);
}

/* The library: one square a row, a level a square further in. */
.st-lib {
  grid-area: lib;
  padding: calc(var(--q) / 2) calc(var(--q) / 2) 0;
  box-shadow: inset -1px 0 var(--visual-rail);
}

.st-lib .st-row {
  padding-inline: 4px;
}

.st-lib .st-row.is-in {
  padding-inline-start: calc(var(--q) + 4px);
}

.st-lib .st-row.is-current {
  border-radius: 2px;
  background: var(--visual-fader);
  font-family: var(--ds-typeface-medium);
}

.st-lib .st-row .lamp {
  width: 6px;
  height: 6px;
  margin: 0 0 5px auto;
}

.st-heading {
  color: var(--visual-label);
}

/* The stage: its bar of formats, then the canvas on the console with the grid on it. */
.st-stage {
  grid-area: stage;
  display: grid;
  grid-template-rows: var(--q) minmax(0, 1fr);
  min-width: 0;
  padding-top: calc(var(--q) / 2);
  background: var(--visual-console);
}

.st-stagebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 calc(var(--q) / 2);
}

.st-formats {
  display: flex;
  gap: 4px;
}

.st-chip {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  color: var(--visual-label);
  font-family: var(--ds-typeface-mono);
  font-size: 13px;
  line-height: 16px;
}

.st-chip.is-on {
  background: var(--visual-fader);
  color: var(--visual-legend);
}

.st-canvas {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--visual-halo) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--visual-halo) 7%, transparent) 1px, transparent 1px);
  background-size: var(--q) var(--q);
  background-position: -1px -1px;
}

/* The four format frames, as on Visual's box: overlapping, upright, each a little brighter. */
.frames {
  position: absolute;
  width: 310px;
  height: 260px;
}

.st-canvas .frames {
  left: 185px;
  top: 25px;
}

.frame {
  position: absolute;
  box-sizing: border-box;
  border-radius: 1px;
  background: var(--visual-panel);
  box-shadow:
    inset 0 0 0 1px var(--frame-line),
    0 0 6px color-mix(in srgb, var(--visual-phosphor) 55%, transparent);
}

/* The glow breathes: a halo over each frame, its opacity alone, each frame a beat after the last. */
.frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px var(--frame-line),
    0 0 14px 1px color-mix(in srgb, var(--visual-phosphor) 70%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--visual-phosphor) 25%, transparent);
  opacity: 0.35;
  animation: frame-breathe 6s ease-in-out infinite;
  animation-delay: var(--beat, 0s);
}

@keyframes frame-breathe {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.frame--wide { left: 0; top: 45px; width: 240px; height: 135px; --frame-line: var(--visual-halo-dark); --beat: 0s; }
.frame--post { left: 25px; top: 105px; width: 120px; height: 150px; --frame-line: color-mix(in srgb, var(--visual-halo-dark) 50%, var(--visual-halo)); --beat: -1.5s; }
.frame--story { left: 175px; top: 0; width: 135px; height: 240px; --frame-line: color-mix(in srgb, var(--visual-halo) 70%, var(--visual-halo-dark)); --beat: -3s; }
.frame--square { left: 105px; top: 120px; width: 140px; height: 140px; --frame-line: var(--visual-leader); --beat: -4.5s; }

.frame__ratio {
  position: absolute;
  top: 4px;
  left: 6px;
  color: var(--frame-line);
  font-family: var(--ds-typeface-mono);
  font-size: 10px;
  line-height: 12px;
}

/* The highlight: a dot on its motion path, the path dotted, a keyframe at each end. */
.st-path {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.st-path path {
  fill: none;
  stroke: color-mix(in srgb, var(--visual-phosphor) 70%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.diamond {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--visual-amber);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.st-mover-x {
  position: absolute;
  left: 0;
  top: 0;
  animation: st-move-x 9s infinite;
}

.st-mover-y {
  animation: st-move-y 9s infinite;
}

/* Out along the path for four seconds, a breath, and back: x eased in and out, y eased out, so it arcs. */
@keyframes st-move-x {
  0% { transform: translateX(40px); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  45% { transform: translateX(255px); }
  50% { transform: translateX(255px); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  95%, 100% { transform: translateX(40px); }
}

@keyframes st-move-y {
  0% { transform: translateY(205px); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  45% { transform: translateY(60px); }
  50% { transform: translateY(60px); animation-timing-function: cubic-bezier(0.7, 0, 0.8, 0.1); }
  95%, 100% { transform: translateY(205px); }
}

.st-dot {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--visual-phosphor);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--visual-phosphor) 30%, transparent),
    0 0 16px 4px color-mix(in srgb, var(--visual-phosphor) 75%, transparent);
}

/* The selected layer's handles: four small squares at the square frame's corners. */
.st-handles {
  position: absolute;
  left: 105px;
  top: 120px;
  width: 140px;
  height: 140px;
  box-shadow: 0 0 0 1px var(--visual-phosphor);
  pointer-events: none;
}

.st-handles i {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px;
  background: var(--visual-console);
  box-shadow: inset 0 0 0 1px var(--visual-phosphor);
}

.st-handles i:nth-child(1) { left: 0; top: 0; }
.st-handles i:nth-child(2) { left: 100%; top: 0; }
.st-handles i:nth-child(3) { left: 0; top: 100%; }
.st-handles i:nth-child(4) { left: 100%; top: 100%; }

/* The inspector: twelve squares, a value a row, a keyframe's diamond where one is set. */
.st-insp {
  grid-area: insp;
  padding: calc(var(--q) / 2) var(--q) 0 calc(var(--q) / 2);
  box-shadow: inset 1px 0 var(--visual-rail);
}

.st-insp .st-row {
  justify-content: space-between;
}

.st-insp .st-row > span:first-child {
  color: var(--visual-label);
}

.st-insp .st-row b {
  font-family: var(--ds-typeface-medium);
  font-weight: var(--ds-type-weight-bold);
  color: var(--visual-legend);
}

.st-value {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--ds-typeface-mono);
  font-size: 13px;
}

.st-value .diamond {
  position: static;
  margin: 0 0 4px;
}

.st-value .diamond.is-off {
  background: var(--visual-rail);
}

.st-gap { height: var(--q); }

.st-curve {
  display: block;
  width: calc(10 * var(--q) + 10px);
  height: calc(4 * var(--q));
  margin-top: 0;
  overflow: visible;
}

.st-curve .grid { stroke: var(--visual-rail); stroke-width: 1; }
.st-curve .curve { fill: none; stroke: var(--visual-phosphor); stroke-width: 1.5; }
.st-curve .arm { stroke: var(--visual-halo-dark); stroke-width: 1; }
.st-curve .knob { fill: var(--visual-console); stroke: var(--visual-halo); stroke-width: 1; }

.st-insp .ds-icon.icon-check { color: var(--visual-chroma); }

/* The timeline: the transport on two squares, the ruler, eight tracks, the playhead over them. */
.st-tl {
  --tl-head: calc(10 * var(--q));
  grid-area: tl;
  position: relative;
  display: grid;
  grid-template-rows: calc(2 * var(--q)) var(--q) repeat(8, var(--q)) var(--q);
  background: var(--visual-panel);
  box-shadow: inset 0 1px var(--visual-rail);
}

.st-transport {
  display: flex;
  align-items: flex-end;
  gap: var(--q);
  padding: 0 var(--q) calc(var(--q) / 2);
}

.st-transport .st-time {
  font-family: var(--ds-typeface-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.st-transport .st-time b {
  color: var(--visual-phosphor);
  font-weight: 400;
  text-shadow: 0 0 8px color-mix(in srgb, var(--visual-phosphor) 60%, transparent);
}

.st-transport .st-end {
  display: flex;
  gap: calc(var(--q) / 2);
  margin-inline-start: auto;
}

.st-btn.is-on {
  background: var(--visual-phosphor-dim);
  color: var(--visual-phosphor-pastel);
  box-shadow: inset 0 0 0 1px var(--visual-phosphor-dark);
}

.st-track {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-head) minmax(0, 1fr);
  box-shadow: inset 0 -1px color-mix(in srgb, var(--visual-rail) 60%, transparent);
}

.st-head {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 4px 0 var(--q);
  box-shadow: inset -1px 0 var(--visual-rail);
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
}

.st-head .lamp {
  width: 6px;
  height: 6px;
  margin: 0 0 5px;
  box-shadow: none;
}

.st-lane {
  position: relative;
  overflow: hidden;
}

.st-ruler .st-lane {
  background-image:
    linear-gradient(to right, var(--visual-label) 1px, transparent 1px),
    linear-gradient(to right, var(--visual-rail) 1px, transparent 1px);
  background-size: var(--tl-second) 8px, calc(var(--tl-second) / 4) 4px;
  background-position: var(--q) 100%, var(--q) 100%;
  background-repeat: repeat-x;
}

.st-tick {
  position: absolute;
  top: 2px;
  transform: translateX(3px);
  color: var(--visual-label);
  font-family: var(--ds-typeface-mono);
  font-size: 10px;
  line-height: 10px;
}

/* A clip: 19 pixels and a pixel between, its words 4px in on the sixteen, in its track's colour. */
.clip {
  --tone: var(--visual-phosphor);
  position: absolute;
  top: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  height: 19px;
  padding: 0 4px 0 8px;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tone) 22%, var(--visual-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 70%, transparent);
  color: color-mix(in srgb, var(--tone) 40%, var(--visual-legend));
  line-height: 16px;
  white-space: nowrap;
}

.clip--scope { --tone: var(--visual-scope); }
.clip--chroma { --tone: var(--visual-chroma); }
.clip--matte { --tone: var(--visual-matte); }
.clip--amber { --tone: var(--visual-amber); }
.clip--halo { --tone: var(--visual-halo-dark); }

.clip .wave {
  position: absolute;
  inset: 2px 0 1px;
  width: 100%;
  height: 16px;
  color: color-mix(in srgb, var(--tone) 60%, transparent);
}

.clip > span {
  position: relative;
}

.clip .diamond {
  top: 10px;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
}

/* The playhead: a phosphor line over the ruler and tracks with its head on the ruler. */
.st-playhead {
  position: absolute;
  top: calc(2 * var(--q));
  bottom: var(--q);
  left: calc(var(--tl-head) + var(--q));
  width: 1px;
  margin-left: -0.5px;
  background: var(--visual-phosphor);
  box-shadow: 0 0 8px var(--visual-phosphor);
  animation: st-playhead 9s linear infinite;
  z-index: 2;
}

.st-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 11px;
  height: 10px;
  background: var(--visual-phosphor);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}

@keyframes st-playhead {
  from { transform: translateX(0); }
  to { transform: translateX(calc(9 * var(--tl-second))); }
}

@media (prefers-reduced-motion: reduce) {
  .st-playhead { animation: none; transform: translateX(calc(3.4 * var(--tl-second))); }
  .st-mover-x { animation: none; transform: translateX(150px); }
  .st-mover-y { animation: none; transform: translateY(90px); }
  .frame::after { animation: none; opacity: 0.6; }
}

/* ---- One story, every frame -------------------------------------------- */

/*
 * The same six-second film in a story, a wide screen, a post and a square at once: one set of
 * keyframes, four layouts, every part sized by its frame (container units), so each format
 * places it its own way. 55 squares by 22; on a phone two rows of two, 26 squares by 34.
 */
.formats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: calc(16 * var(--q)) var(--q) var(--q) calc(2 * var(--q)) var(--q);
  grid-template-areas:
    "story wide post square"
    ". . . ."
    "l-story l-wide l-post l-square"
    ". . . ."
    "scrub scrub scrub scrub";
  column-gap: calc(2 * var(--q));
  align-items: end;
  width: calc(55 * var(--q));
  height: calc(22 * var(--q));
  color: var(--ink);
}

@container (max-width: 1000px) {
  .formats {
    /* Column lines at 0, 9, 10, 16, 17, 25 and 26 squares: the story and the square over the
       wide screen and the post, each a square from the next. */
    grid-template-columns: calc(9 * var(--q)) var(--q) calc(6 * var(--q)) var(--q) calc(8 * var(--q)) var(--q);
    grid-template-rows: calc(16 * var(--q)) var(--q) var(--q) var(--q) calc(10 * var(--q)) var(--q) var(--q) var(--q) var(--q);
    grid-template-areas:
      "story . square square square square"
      ". . . . . ."
      "l-story . l-square l-square l-square l-square"
      ". . . . . ."
      "wide wide wide . post ."
      ". . . . . ."
      "l-wide l-wide l-wide . l-post ."
      ". . . . . ."
      "scrub scrub scrub scrub scrub scrub";
    column-gap: 0;
    width: calc(26 * var(--q));
    height: calc(34 * var(--q));
  }
  .formats .screen--square { width: calc(16 * var(--q)); height: calc(16 * var(--q)); }
  .formats .screen--post { width: calc(8 * var(--q)); height: calc(10 * var(--q)); }
}

/* A screen: the film's paper, a picture's corners, its glow on the pale panel. */
.screen {
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-radius);
  background: var(--visual-casing);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--visual-console) 70%, transparent),
    0 calc(var(--q) / 2) calc(2 * var(--q)) color-mix(in srgb, var(--visual-phosphor-dark) 35%, transparent);
  container-type: size;
  color: var(--visual-legend);
}

.screen--story { grid-area: story; width: calc(9 * var(--q)); height: calc(16 * var(--q)); }
.screen--wide { grid-area: wide; width: calc(16 * var(--q)); height: calc(9 * var(--q)); }
.screen--post { grid-area: post; width: calc(12 * var(--q)); height: calc(15 * var(--q)); }
.screen--square { grid-area: square; width: calc(12 * var(--q)); height: calc(12 * var(--q)); }

.screen-label {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: var(--q);
  color: var(--dim);
  line-height: 16px;
  white-space: nowrap;
}

.screen-label b {
  color: var(--ink);
  font-weight: 400;
}

.l-story { grid-area: l-story; }
.l-wide { grid-area: l-wide; }
.l-post { grid-area: l-post; }
.l-square { grid-area: l-square; }

/* The film: a mark, the words, and a product on a card, laid out per format by grid areas. */
.film {
  --pad: 7cqmin;
  position: absolute;
  inset: 0;
  display: grid;
  gap: 4cqmin;
  padding: var(--pad);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--visual-halo) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--visual-halo) 6%, transparent) 1px, transparent 1px);
  background-size: 10cqmin 10cqmin;
}

.screen--story .film,
.screen--post .film {
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "mark" "words" "card";
}

.screen--square .film {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "mark mark" "words card";
}

.screen--wide .film {
  grid-template-columns: 1fr 0.8fr;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "mark card" "words card";
}

.film__mark {
  grid-area: mark;
  width: 11cqmin;
  height: 11cqmin;
  border-radius: 2.5cqmin;
  background: var(--visual-phosphor);
  box-shadow: 0 0 5cqmin color-mix(in srgb, var(--visual-phosphor) 70%, transparent);
  animation: film-mark 6s infinite both;
}

.film__words {
  grid-area: words;
  align-self: end;
  font-family: var(--ds-typeface-medium);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.film__head {
  display: block;
  font-size: 13cqmin;
  animation: film-rise 6s infinite both;
}

.screen--wide .film__head { font-size: 15cqmin; }

.film__sub {
  display: block;
  margin-top: 2cqmin;
  color: var(--visual-phosphor-pastel);
  font-family: var(--ds-typeface-regular);
  font-size: 6.5cqmin;
  animation: film-rise-late 6s infinite both;
}

.film__card {
  grid-area: card;
  align-self: end;
  justify-self: stretch;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3cqmin;
  min-height: 0;
  align-self: stretch;
  padding: 3cqmin;
  overflow: hidden;
  border-radius: 2cqmin;
  background: var(--visual-panel);
  box-shadow: inset 0 0 0 1px var(--visual-rail);
  color: var(--visual-legend);
  animation: film-card 6s infinite both;
}

.screen--square .film__card { max-height: none; }
.screen--wide .film__card { max-height: none; }

.film__picture {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.5cqmin;
  background: var(--landing-blue);
}

.product-headphones { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-shadow { fill: var(--visual-console); opacity: 0.45; }
.product-band { fill: none; stroke: var(--visual-phosphor); stroke-width: 15; stroke-linecap: round; }
.product-band-light { fill: none; stroke: var(--visual-halo); stroke-width: 2; stroke-linecap: round; }
.product-arm { fill: none; stroke: var(--visual-halo); stroke-width: 8; }
.product-cup { fill: var(--visual-phosphor); }
.product-cushion { fill: var(--visual-casing); stroke: var(--visual-rail); stroke-width: 2; }
.product-highlight { fill: none; stroke: var(--visual-matte); stroke-width: 3; stroke-linecap: round; }

.film__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqmin;
  font-size: 5.5cqmin;
  line-height: 1;
}

.film__price {
  padding: 1cqmin 2cqmin;
  border-radius: 1cqmin;
  background: var(--visual-console);
  color: var(--visual-leader);
  animation: film-price 6s infinite both;
}

/* A sheen crossing the card once it has landed: a band of light, its position and opacity alone. */
.film__card::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--ds-white) 55%, transparent) 50%, transparent 60%);
  animation: film-sheen 6s infinite both;
}

@keyframes film-mark {
  0% { opacity: 0; transform: scale(0.4); }
  8%, 80% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes film-rise {
  0%, 8% { opacity: 0; transform: translateY(30%); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  20%, 80% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes film-rise-late {
  0%, 14% { opacity: 0; transform: translateY(40%); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  26%, 80% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes film-card {
  0%, 22% { opacity: 0; transform: translateY(18%) scale(0.96); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  36%, 80% { opacity: 1; transform: translateY(0) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes film-price {
  0%, 44% { transform: scale(1); }
  48% { transform: scale(1.18); }
  54%, 100% { transform: scale(1); }
}

@keyframes film-sheen {
  0%, 40% { opacity: 0; transform: translateX(-70%); }
  42% { opacity: 1; }
  58% { opacity: 1; transform: translateX(70%); }
  60%, 100% { opacity: 0; transform: translateX(70%); }
}

/* The one clock under the four: the film's time in Iosevka and its progress. */
.scrub {
  grid-area: scrub;
  display: grid;
  grid-template-columns: calc(6 * var(--q)) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--q);
  height: var(--q);
  color: var(--dim);
  line-height: 16px;
}

.scrub__time {
  color: var(--ink);
  font-family: var(--ds-typeface-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.scrub__rail {
  position: relative;
  height: 2px;
  margin-bottom: 7px;
  overflow: hidden;
  border-radius: 1px;
  background: color-mix(in srgb, var(--visual-console) 15%, transparent);
}

.scrub__rail i {
  position: absolute;
  inset: 0;
  background: var(--visual-phosphor-dark);
  transform-origin: left;
  animation: scrub 6s linear infinite;
}

@keyframes scrub {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .film__mark, .film__head, .film__sub, .film__card, .film__price, .scrub__rail i { animation: none; opacity: 1; transform: none; }
  .film__card::after { animation: none; opacity: 0; }
  .scrub__rail i { transform: scaleX(0.5); }
}

/* ---- Motion that lands on the grid ------------------------------------- */

/*
 * A real Motion film seen from the director's chair (grid-motion.ts, grid-film.ts): the stage at
 * 1×, the Title travelling with its onion skins
 * and dotted path to the cell it lands on, the camera's frame in matte panning after it and pushing
 * in, and a monitor of what the camera sees; beside it the Title's curve, its speed and the
 * camera's zoom, one playhead through all three. 56 squares by 24; on a phone one above the other,
 * 28 by 47. Under it, outside the picture, the same film as its .vis file.
 */
.grid-motion {
  --cell: color-mix(in srgb, var(--visual-halo) 4%, transparent);
  --square: color-mix(in srgb, var(--visual-halo) 9%, transparent);
  position: relative;
  display: grid;
  grid-template-columns: calc(28 * var(--q)) calc(26 * var(--q));
  grid-template-rows: calc(22 * var(--q)) var(--q) calc(22 * var(--q)) calc(3 * var(--q));
  grid-template-areas: "stage output" ". output" "graph output" "read read";
  column-gap: calc(2 * var(--q));
  width: calc(56 * var(--q));
  height: calc(48 * var(--q));
  color: var(--visual-legend);
}

@container (max-width: 1000px) {
  .grid-motion {
    grid-template-columns: calc(28 * var(--q));
    grid-template-rows: calc(22 * var(--q)) var(--q) calc(22 * var(--q)) calc(3 * var(--q)) calc(47 * var(--q));
    grid-template-areas: "stage" "." "graph" "read" "output";
    width: calc(28 * var(--q));
    height: calc(95 * var(--q));
  }
}

.gm-stage,
.gm-graph {
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-radius);
  background-color: var(--visual-console);
  box-shadow: inset 0 0 0 1px var(--visual-rail);
}

.gm-stage {
  grid-area: stage;
  background-image:
    linear-gradient(to right, var(--square) 1px, transparent 1px),
    linear-gradient(to bottom, var(--square) 1px, transparent 1px),
    linear-gradient(to right, var(--cell) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cell) 1px, transparent 1px);
  background-size: var(--q) var(--q), var(--q) var(--q), 5px 5px, 5px 5px;
}

.gm-graph {
  grid-area: graph;
}

/* The graph's drawing is 26 squares wide; on a phone its box is 28, so it stands a square in. */
.gm-plot {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(26 * var(--q));
  height: calc(22 * var(--q));
}

@container (max-width: 1000px) {
  .gm-plot { left: var(--q); }
}

.gm-plot svg,
.gm-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gm-layer {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  width: calc(4 * var(--q));
  height: calc(2 * var(--q));
  margin: calc(-1 * var(--q)) 0 0 calc(-2 * var(--q));
  padding: 0 0 2px calc(var(--q) + 4px);
  border-radius: var(--ds-radius);
  background: var(--visual-panel);
  box-shadow: inset 0 0 0 1px var(--visual-phosphor), 0 0 var(--q) color-mix(in srgb, var(--visual-phosphor) 50%, transparent);
  font-family: var(--ds-typeface-medium);
  line-height: 16px;
}

.gm-layer::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 6px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--visual-phosphor);
}

.gm-ghost {
  position: absolute;
  box-sizing: border-box;
  width: calc(4 * var(--q));
  height: calc(2 * var(--q));
  margin: calc(-1 * var(--q)) 0 0 calc(-2 * var(--q));
  border-radius: var(--ds-radius);
  box-shadow: inset 0 0 0 1px var(--visual-phosphor);
}

.gm-snap {
  position: absolute;
  box-sizing: border-box;
  width: var(--q);
  height: var(--q);
  background: color-mix(in srgb, var(--visual-amber) 22%, transparent);
  box-shadow: inset 0 0 0 1px var(--visual-amber);
}

.gm-tag {
  position: absolute;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--visual-amber);
  color: var(--visual-console);
  font-family: var(--ds-typeface-mono);
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
}

/* The camera: four 1px edges in matte, each stretched along its length alone, and its label. */
.gm-camera {
  position: absolute;
  left: 0;
  top: 0;
}

.gm-edge {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--visual-matte);
  box-shadow: 0 0 6px color-mix(in srgb, var(--visual-matte) 60%, transparent);
  transform-origin: 0 0;
}

.gm-edge--across { width: calc(18 * var(--q)); height: 1px; }
.gm-edge--down { width: 1px; height: calc(18 * var(--q)); }

.gm-camera-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 4px;
  border-radius: 0 0 4px 0;
  background: var(--visual-matte);
  color: var(--visual-console);
  font-family: var(--ds-typeface-mono);
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
}

.gm-camera-label b { font-weight: 400; }

/* What the camera sees: the same world through its frame, five squares a side. */
.gm-view {
  position: absolute;
  overflow: hidden;
  border-radius: var(--ds-radius);
  background: var(--visual-console);
}

.gm-view::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--visual-matte);
  pointer-events: none;
}

.gm-view__world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

/* Lines three pixels wide in the world draw about one on the monitor. */
.gm-view__grid {
  position: absolute;
  inset: calc(-18 * var(--q));
  background-image:
    linear-gradient(to right, var(--square) 3px, transparent 3px),
    linear-gradient(to bottom, var(--square) 3px, transparent 3px);
  background-size: var(--q) var(--q);
  background-position: -1px -1px;
}

.gm-view-label {
  position: absolute;
  box-sizing: border-box;
  height: var(--q);
  padding-top: 4px;
  color: var(--visual-label);
  font-family: var(--ds-typeface-mono);
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
}

.gm-path { fill: none; stroke: var(--visual-phosphor); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.gm-axis { stroke: var(--visual-rail); stroke-width: 1; }
.gm-faint { stroke: color-mix(in srgb, var(--visual-halo) 7%, transparent); stroke-width: 1; }
.gm-linear { stroke: var(--visual-label); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.gm-curve { fill: none; stroke: var(--visual-phosphor); stroke-width: 2; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--visual-phosphor) 70%, transparent)); }
.gm-curve--camera { stroke: var(--visual-matte); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--visual-matte) 70%, transparent)); }
.gm-arm { stroke: var(--visual-halo-dark); stroke-width: 1; }
.gm-knob { fill: var(--visual-console); stroke: var(--visual-halo); stroke-width: 1.5; }
.gm-key { fill: var(--visual-amber); }
.gm-speed { fill: none; stroke: var(--visual-scope); stroke-width: 2; }
.gm-speed-fill { fill: color-mix(in srgb, var(--visual-scope) 14%, transparent); stroke: none; }
.gm-zoom-speed { fill: none; stroke: var(--visual-matte-dark); stroke-width: 1; }
.gm-zoom-speed-fill { fill: color-mix(in srgb, var(--visual-matte) 12%, transparent); stroke: none; }
.gm-label { fill: var(--visual-label); font-family: var(--ds-typeface-regular); font-size: 14px; letter-spacing: -0.3px; }
.gm-label--mono { font-family: var(--ds-typeface-mono); font-size: 10px; letter-spacing: 0; }

.gm-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--visual-phosphor);
  box-shadow: 0 0 6px var(--visual-phosphor);
}

.gm-rider {
  position: absolute;
  left: 0;
  top: 0;
}

.gm-rider i {
  display: block;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--visual-phosphor);
  box-shadow: 0 0 10px 2px var(--visual-phosphor);
}

.gm-rider--scope i {
  background: var(--visual-scope);
  box-shadow: 0 0 10px 2px var(--visual-scope);
}

.gm-rider--matte i {
  background: var(--visual-matte);
  box-shadow: 0 0 10px 2px var(--visual-matte);
}

.gm-read {
  grid-area: read;
  display: flex;
  align-items: flex-end;
  gap: calc(2 * var(--q));
  height: calc(2 * var(--q));
  color: var(--visual-label);
  font-family: var(--ds-typeface-mono);
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
}

.gm-read b {
  color: var(--visual-legend);
  font-weight: 400;
}

.gm-read .is-amber { color: var(--visual-amber); }

@container (max-width: 1000px) {
  .gm-read { padding-inline: var(--q); }
  .gm-read > :nth-child(2) { display: none; }
}

/*
 * The film as its file, at the page's own scale under the picture: its name, size and formats,
 * then its text cut with a fade over the last square, and Copy. One line beside the wide picture;
 * beside the narrow one the facts take their own lines.
 */
.gm-room {
  container-type: inline-size;
}

.gm-file {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--ds-unit);
  width: min(100%, calc(56 * var(--ds-unit)));
  margin: var(--ds-unit) auto 0;
  color: var(--dim);
  font-family: var(--ds-typeface-mono);
  font-size: calc(13px * var(--ds-sf));
  line-height: var(--ds-unit);
  letter-spacing: 0;
  text-align: start;
}

.gm-file[hidden] { display: none; }

.gm-file__facts {
  margin: 0;
  white-space: nowrap;
}

.gm-file__facts > span:empty { display: none; }
.gm-file__facts > span + span::before { content: " · "; }
.gm-file__name { color: var(--ink); }

.gm-file__text {
  display: block;
  min-width: 0;
  overflow: hidden;
  font: inherit;
  white-space: nowrap;
  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
}

.gm-file:not([data-ready]) .gm-file__text,
.gm-file:not([data-ready]) .gm-file__copy {
  visibility: hidden;
}

@container (max-width: 1000px) {
  .gm-file {
    grid-template-columns: minmax(0, 1fr) auto;
    width: min(100%, calc(28 * var(--ds-unit)));
  }

  .gm-file__facts { grid-column: 1 / -1; }
  .gm-file__formats { display: block; }
  .gm-file__formats::before { content: none !important; }
}

:root[data-mobile] .gm-file {
  padding-inline: var(--ds-unit);
  font-size: calc(10px * var(--ds-sf));
}

/* ---- Your real app, in every film ------------------------------------- */

/* Standard Visual Mac chrome and the iPhone artwork shared by Ezo and DS1.
 * Nine-slice the original Mac artwork so its lights and corners retain their proportions.
 * iPhone screen bounds follow DS1's ExampleDevice and Ezo's landingHero. */
.kits {
  position: relative;
  width: calc(56 * var(--q));
  height: calc(29 * var(--q));
  color: var(--visual-console);
}

.demo-window {
  position: absolute;
  left: var(--q);
  bottom: var(--q);
  width: calc(42 * var(--q));
  height: calc(26 * var(--q));
  overflow: hidden;
  border-radius: 16px;
  background: var(--ds-white);
  box-shadow: 0 var(--q) calc(3 * var(--q)) color-mix(in srgb, var(--visual-console) 35%, transparent);
}
.demo-window__content { position: absolute; inset: calc(2 * var(--q)) 2px 2px; }
.demo-window__chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-style: solid;
  border-color: transparent;
  border-width: 40px 24px 24px 64px;
  border-image: url("/landing/assets/mac-chrome-light.png") 100 60 60 160 / 40px 24px 24px 64px stretch;
}

.demo-phone {
  position: absolute;
  right: var(--q);
  bottom: 0;
  width: calc(12 * var(--q));
  aspect-ratio: 910 / 1855;
}
.demo-phone__glass {
  position: absolute;
  top: calc(100% * 60 / 3710);
  left: calc(100% * 98 / 1819);
  width: calc(100% * 1622 / 1819);
  height: calc(100% * 1622 / 1819 * 2.212 * 910 / 1855);
  border-radius: 14.2857% / 6.4583%;
  overflow: hidden;
  background: var(--ds-white);
  display: flex;
  flex-direction: column;
}
.demo-phone__status { display: block; width: 100%; height: auto; flex: none; }
.demo-phone__glass .app--phone { flex: 1; min-height: 0; height: auto; border-radius: 0; padding-top: 0; }
.demo-phone__home { display: grid; flex: none; height: 4%; place-items: center; }
.demo-phone__home::after { content: ''; width: 34%; height: 15%; border-radius: 999px; background: var(--visual-console); }
.demo-phone__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--visual-console) 35%, transparent)); }

@container (max-width: 1000px) {
  .kits { width: calc(40 * var(--q)); height: calc(29 * var(--q)); }
  .demo-window { left: auto; right: 0; width: calc(36 * var(--q)); height: calc(24 * var(--q)); }
  .demo-phone { left: 0; right: auto; }
  .app__side { display: none; }
  .demo-window .app { grid-template-columns: minmax(0, 1fr); }
  .app__detail { width: calc(14 * var(--q)); }
}

/* The sample app: its own pale paper and an accent of its own (Scope), drawn on the square. */
.app {
  position: relative;
  display: grid;
  grid-template-columns: calc(8 * var(--q)) minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ds-white);
  color: var(--visual-console);
}

.app__side {
  padding: calc(var(--q) / 2) calc(var(--q) / 2) 0;
  background: color-mix(in srgb, var(--visual-console) 4%, var(--ds-white));
  box-shadow: inset -1px 0 color-mix(in srgb, var(--visual-console) 10%, transparent);
}

.app__brand {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: calc(2 * var(--q));
  padding: 0 4px calc(var(--q) / 2 + 2px);
  box-sizing: border-box;
  font-family: var(--ds-typeface-medium);
}

.app__brand i {
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: 2px;
  border-radius: 3px;
  background: var(--visual-scope-dark);
}

.app__place {
  display: flex;
  align-items: flex-end;
  height: var(--q);
  padding: 0 4px;
  line-height: 16px;
  color: color-mix(in srgb, var(--visual-console) 65%, var(--ds-white));
}

.app__place.is-current {
  border-radius: 2px;
  background: color-mix(in srgb, var(--visual-console) 8%, var(--ds-white));
  color: var(--visual-console);
}

.app__main {
  position: relative;
  padding: calc(var(--q) / 2) var(--q) 0;
}

.app__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: calc(2 * var(--q));
  padding-bottom: calc(var(--q) / 2);
  box-sizing: border-box;
}

.app__title {
  font-family: var(--ds-typeface-medium);
  font-size: 20px;
  line-height: 20px;
}

.app__button {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--visual-scope);
  line-height: 16px;
}

.app__row {
  position: relative;
  display: grid;
  grid-template-columns: calc(3 * var(--q)) minmax(0, 1fr) calc(5 * var(--q)) calc(4 * var(--q));
  align-items: end;
  height: var(--q);
  line-height: 16px;
  white-space: nowrap;
  box-shadow: inset 0 -1px color-mix(in srgb, var(--visual-console) 8%, transparent);
}

.app__row > :last-child { text-align: end; font-variant-numeric: tabular-nums; }
.app__row .muted { color: color-mix(in srgb, var(--visual-console) 55%, var(--ds-white)); }
.app__row.is-head { color: color-mix(in srgb, var(--visual-console) 55%, var(--ds-white)); }

.app__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.app__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status, var(--visual-chroma-dark));
}

.app__status.is-waiting { --status: var(--visual-amber-dark); }

/* The order the pointer opens: its row lit, then the detail sliding in from the edge. */
.app__row.is-picked::before {
  content: "";
  position: absolute;
  inset: 0 -4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--visual-scope) 22%, transparent);
  opacity: 0;
  animation: kit-pick 8s infinite both;
}

@keyframes kit-pick {
  0%, 18% { opacity: 0; }
  22%, 78% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

.app__detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  width: calc(12 * var(--q));
  padding: var(--q);
  background: var(--ds-white);
  box-shadow: -1px 0 color-mix(in srgb, var(--visual-console) 10%, transparent), calc(-1 * var(--q)) 0 calc(2 * var(--q)) color-mix(in srgb, var(--visual-console) 8%, transparent);
  animation: kit-detail 8s infinite both;
}

@keyframes kit-detail {
  0%, 22% { opacity: 0; transform: translateX(105%); animation-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1); }
  23% { opacity: 1; }
  32%, 76% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.2); }
  83% { opacity: 1; }
  84%, 100% { opacity: 0; transform: translateX(105%); }
}

.app__detail .app__title { font-size: 14px; line-height: 16px; height: var(--q); display: flex; align-items: flex-end; }
.app__detail .app__line { display: flex; justify-content: space-between; align-items: flex-end; height: var(--q); line-height: 16px; }
.app__detail .app__line span:first-child { color: color-mix(in srgb, var(--visual-console) 55%, var(--ds-white)); }

.app__photo {
  position: relative;
  height: calc(5 * var(--q));
  margin: calc(var(--q) / 2) 0;
  border-radius: 4px;
  background: var(--landing-blue);
}

.app__ship {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  margin-top: calc(var(--q) / 2);
  border-radius: 4px;
  background: var(--visual-scope);
}

/* The toast after shipping. */
.app__toast {
  position: absolute;
  left: 50%;
  bottom: var(--q);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 16px;
  margin-left: calc(-5 * var(--q));
  padding: 0 8px;
  border-radius: 4px;
  background: var(--visual-console);
  color: var(--visual-legend);
  white-space: nowrap;
  line-height: 16px;
  animation: kit-toast 8s infinite both;
}

@keyframes kit-toast {
  0%, 52% { opacity: 0; transform: translateY(8px); }
  56%, 72% { opacity: 1; transform: translateY(0); }
  76%, 100% { opacity: 0; transform: translateY(0); }
}

/* The pointer: a ring where a finger or mouse presses, its place and a press in transform alone. */
.app__pointer {
  position: absolute;
  left: 0;
  top: 0;
  animation: kit-pointer 8s infinite both;
}

.app__pointer i {
  display: block;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--visual-console) 18%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--visual-console);
  animation: kit-press 8s infinite both;
}

@keyframes kit-pointer {
  0% { transform: translate(560px, 380px); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  4% { opacity: 1; }
  18% { transform: translate(300px, 150px); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  40% { transform: translate(300px, 150px); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  50% { transform: translate(650px, 300px); }
  80% { transform: translate(650px, 300px); opacity: 1; }
  86%, 100% { transform: translate(650px, 300px); opacity: 0; }
}

@keyframes kit-press {
  0%, 18% { transform: scale(1); }
  20% { transform: scale(0.7); }
  23%, 50% { transform: scale(1); }
  52% { transform: scale(0.7); }
  55%, 100% { transform: scale(1); }
}

/* The phone's app: the same orders a row of two lines each, a new one arriving at the top. */
.app--phone {
  display: block;
  height: 100%;
  border-radius: calc(1.5 * var(--q));
  padding: var(--q) calc(var(--q) / 2) 0;
  box-sizing: border-box;
}

.app--phone .app__title { font-size: 20px; height: calc(2 * var(--q)); display: flex; align-items: flex-end; padding: 0 4px calc(var(--q) / 2 - 2px); box-sizing: border-box; }

.app__list {
  position: relative;
}

.app__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: var(--q) var(--q);
  align-items: end;
  padding: 0 4px calc(var(--q) / 2);
  line-height: 16px;
  box-shadow: inset 0 -1px color-mix(in srgb, var(--visual-console) 8%, transparent);
}

.app__card .muted { color: color-mix(in srgb, var(--visual-console) 55%, var(--ds-white)); }
.app__card > :nth-child(2), .app__card > :nth-child(4) { text-align: end; }

.app__stack {
  animation: kit-push 8s infinite both;
}

.app__card.is-new {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: color-mix(in srgb, var(--visual-scope) 16%, var(--ds-white));
  border-radius: 4px;
  animation: kit-new 8s infinite both;
}

@keyframes kit-push {
  0%, 40% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1); }
  48%, 86% { transform: translateY(calc(2.5 * var(--q))); }
  92%, 100% { transform: translateY(0); }
}

@keyframes kit-new {
  0%, 42% { opacity: 0; transform: translateY(-50%); animation-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1); }
  50%, 86% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .app__row.is-picked::before { animation: none; opacity: 1; }
  .app__detail { animation: none; transform: none; }
  .app__toast, .app__pointer { animation: none; opacity: 0; }
  .app__pointer i { animation: none; }
  .app__stack { animation: none; transform: translateY(calc(2.5 * var(--q))); }
  .app__card.is-new { animation: none; opacity: 1; }
}

/* ---- Rendered in the cloud -------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, calc(12 * var(--ds-unit)));
  gap: var(--ds-unit) calc(2 * var(--ds-unit));
  justify-content: center;
  margin-top: calc(3 * var(--ds-unit));
  text-align: start;
}

.stats ds-stat {
  --ds-stat-size: 72px;
  --ds-stat-lines: 4;
  --ds-stat-typeface: var(--ds-typeface-compressed);
}

@media (max-width: 760px) {
  .stats { grid-template-columns: calc(12 * var(--ds-unit)); text-align: center; }
  .stats ds-stat { --ds-stat-size: 56px; --ds-stat-lines: 3; }
}

/* The render queue: four files from one story, each bar in the tally's red while it renders and
   the chroma's green once it is ready, then the email that says so. 36 squares by 13. */
.queue {
  box-sizing: border-box;
  width: calc(36 * var(--q));
  height: calc(13 * var(--q));
  padding: calc(var(--q) / 2) var(--q) 0;
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
  background: var(--visual-panel);
  box-shadow: inset 0 0 0 1px var(--visual-rail), 0 0 calc(4 * var(--q)) color-mix(in srgb, var(--visual-phosphor) 12%, transparent);
  color: var(--visual-legend);
}

.queue__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: calc(2 * var(--q));
  padding-bottom: calc(var(--q) / 2);
  box-sizing: border-box;
  line-height: 16px;
}

.queue__head b {
  font-family: var(--ds-typeface-medium);
  font-weight: var(--ds-type-weight-bold);
}

.job {
  display: grid;
  grid-template-columns: calc(8 * var(--q)) calc(7 * var(--q)) minmax(0, 1fr) calc(5 * var(--q));
  align-items: end;
  height: calc(2 * var(--q));
  padding-bottom: calc(var(--q) / 2);
  box-sizing: border-box;
  line-height: 16px;
  white-space: nowrap;
}

.job .mono { color: var(--visual-label); font-size: 13px; }

@container (max-width: 700px) {
  .queue { width: calc(26 * var(--q)); }
  .job { grid-template-columns: calc(6 * var(--q)) minmax(0, 1fr) calc(4 * var(--q)); }
  .job .mono { display: none; }
}

.job__bar {
  position: relative;
  height: 4px;
  margin: 0 var(--q) 6px 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--visual-fader);
}

.job__bar i {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  transform-origin: left;
}

.job__bar .is-rendering {
  background: var(--visual-tally);
  box-shadow: 0 0 6px var(--visual-tally);
  animation: job-fill-1 10s linear infinite both;
}

.job__bar .is-ready {
  background: var(--visual-chroma);
  box-shadow: 0 0 6px var(--visual-chroma);
  animation: job-ready-1 10s infinite both;
}

.job__state {
  position: relative;
  display: grid;
  justify-items: end;
}

.job__state > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
}

.job__state .is-rendering { color: var(--visual-tally); animation: job-word-1 10s infinite both; }
.job__state .is-ready { color: var(--visual-chroma); animation: job-ready-1 10s infinite both; }

.job:nth-child(2) .job__bar .is-rendering { animation-name: job-fill-1; }
.job:nth-child(2) .job__bar .is-ready, .job:nth-child(2) .job__state .is-ready { animation-name: job-ready-1; }
.job:nth-child(2) .job__state .is-rendering { animation-name: job-word-1; }
@keyframes job-fill-1 {
  0%, 2% { transform: scaleX(0); opacity: 1; }
  36% { transform: scaleX(1); opacity: 1; }
  39%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes job-ready-1 {
  0%, 36% { opacity: 0; }
  38%, 92% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes job-word-1 {
  0%, 36% { opacity: 1; }
  37%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

.job:nth-child(3) .job__bar .is-rendering { animation-name: job-fill-2; }
.job:nth-child(3) .job__bar .is-ready, .job:nth-child(3) .job__state .is-ready { animation-name: job-ready-2; }
.job:nth-child(3) .job__state .is-rendering { animation-name: job-word-2; }
@keyframes job-fill-2 {
  0%, 5% { transform: scaleX(0); opacity: 1; }
  46% { transform: scaleX(1); opacity: 1; }
  49%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes job-ready-2 {
  0%, 46% { opacity: 0; }
  48%, 92% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes job-word-2 {
  0%, 46% { opacity: 1; }
  47%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

.job:nth-child(4) .job__bar .is-rendering { animation-name: job-fill-3; }
.job:nth-child(4) .job__bar .is-ready, .job:nth-child(4) .job__state .is-ready { animation-name: job-ready-3; }
.job:nth-child(4) .job__state .is-rendering { animation-name: job-word-3; }
@keyframes job-fill-3 {
  0%, 8% { transform: scaleX(0); opacity: 1; }
  55% { transform: scaleX(1); opacity: 1; }
  58%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes job-ready-3 {
  0%, 55% { opacity: 0; }
  57%, 92% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes job-word-3 {
  0%, 55% { opacity: 1; }
  56%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

.job:nth-child(5) .job__bar .is-rendering { animation-name: job-fill-4; }
.job:nth-child(5) .job__bar .is-ready, .job:nth-child(5) .job__state .is-ready { animation-name: job-ready-4; }
.job:nth-child(5) .job__state .is-rendering { animation-name: job-word-4; }
@keyframes job-fill-4 {
  0%, 11% { transform: scaleX(0); opacity: 1; }
  66% { transform: scaleX(1); opacity: 1; }
  69%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes job-ready-4 {
  0%, 66% { opacity: 0; }
  68%, 92% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes job-word-4 {
  0%, 66% { opacity: 1; }
  67%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

.queue__mail {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: calc(2 * var(--q));
  padding-bottom: calc(var(--q) / 2);
  box-sizing: border-box;
  color: var(--visual-phosphor-pastel);
  line-height: 16px;
  animation: job-mail 10s infinite both;
}

.queue__mail .ds-icon { --ds-icon-size: 16px; }

@keyframes job-mail {
  0%, 70% { opacity: 0; transform: translateY(6px); }
  74%, 92% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .job__bar .is-rendering { animation: none; opacity: 0; }
  .job__bar .is-ready, .job__state .is-ready, .queue__mail { animation: none; opacity: 1; transform: none; }
  .job__state .is-rendering { animation: none; opacity: 0; }
}

/* ---- The rest: a bento of cards --------------------------------------- */

.bento {
  box-sizing: border-box;
  width: min(100%, calc(56 * var(--ds-unit)));
  margin: calc(3 * var(--ds-unit)) 0 calc(4 * var(--ds-unit));
  text-align: start;
  --ds-bento-row: calc(14 * var(--ds-unit));
}

.bento ds-card {
  color-scheme: dark;
  --ds-text-color: var(--visual-legend);
  --ds-text-color-muted: color-mix(in srgb, var(--visual-legend) 70%, var(--ds-fill));
}

.bento ds-card[data-paint="phosphor"] { --ds-fill: var(--visual-phosphor-dim); }
.bento ds-card[data-paint="scope"] { --ds-fill: var(--landing-blue); }
.bento ds-card[data-paint="chroma"],
.bento ds-card[data-paint="halo"] { --ds-fill: var(--visual-panel); }
.bento ds-card[data-paint="amber"] { --ds-fill: color-mix(in srgb, var(--visual-phosphor-dim) 50%, var(--visual-panel)); }
.bento ds-card[data-paint="matte"] { --ds-fill: color-mix(in srgb, var(--visual-matte-dim) 60%, var(--visual-console)); }
.bento ds-card[data-paint="console"] { --ds-fill: var(--visual-console); }

.bento [slot="title"] { max-width: calc(20 * var(--ds-unit)); }

/* The cards' pictures, drawn on the page's square. */
.board {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ds-unit) / 2);  width: 100%;
}

:root[data-mobile] .board__sheet {
  width: calc((100% - var(--ds-unit) / 2) / 2);
}

:root[data-mobile] .board__frame {
  height: calc(4 * var(--ds-unit));
}

.board__sheet {
  box-sizing: border-box;
  flex: none;
  width: calc(8 * var(--ds-unit));
  padding: calc(var(--ds-unit) / 4);
  border-radius: var(--ds-radius);
  background: var(--visual-leader);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--visual-console) 14%, transparent);
  color: var(--visual-console);
  font-size: var(--ds-type-size-small);
  line-height: calc(var(--ds-unit) * 0.75);
}

.board__frame {
  position: relative;
  height: calc(5 * var(--ds-unit));
  margin-bottom: calc(var(--ds-unit) / 4);
  overflow: hidden;
  border-radius: 2px;
  background: var(--visual-casing);
}

.board__frame i {
  position: absolute;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px var(--frame-line, var(--visual-phosphor));
}

.still {
  position: relative;
  width: calc(9 * var(--ds-unit));
  height: calc(11 * var(--ds-unit));
}

.still__sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--ds-radius);
  background: var(--visual-casing);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--visual-console) 20%, transparent);
}

.still__sheet:nth-child(1) { transform: translateX(calc(2 * var(--ds-unit))) scale(0.9); opacity: 0.35; }
.still__sheet:nth-child(2) { transform: translateX(var(--ds-unit)) scale(0.95); opacity: 0.6; }

.still__sheet .film__picture {
  position: absolute;
  inset: var(--ds-unit) var(--ds-unit) calc(3 * var(--ds-unit));
}

.still__sheet span {
  position: absolute;
  left: var(--ds-unit);
  bottom: var(--ds-unit);
  color: var(--visual-legend);
  font-family: var(--ds-typeface-mono);
  font-size: var(--ds-type-size-small);
  line-height: var(--ds-unit);
}

.terminal,
.code {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: calc(var(--ds-unit) / 2) var(--ds-unit);
  overflow: hidden;
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
  background: var(--visual-casing);
  box-shadow: inset 0 0 0 1px var(--visual-rail);
  color: var(--visual-legend);
  font-family: var(--ds-typeface-mono);
  font-size: calc(13px * var(--ds-sf));
  line-height: var(--ds-unit);
  white-space: pre;
}

.terminal .prompt { color: var(--visual-phosphor); }
.terminal .ok { color: var(--visual-chroma); }
.terminal .dim, .code .dim { color: var(--visual-label); }
.code .tag { color: var(--visual-phosphor); }
.code .attr { color: var(--visual-matte); }
.code .value { color: var(--visual-halo); }
.code .key { color: var(--visual-phosphor); }

.terminal .caret {
  display: inline-block;
  width: 0.6em;
  height: calc(16px * var(--ds-sf));
  vertical-align: bottom;
  background: var(--visual-phosphor);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal .caret { animation: none; }
}

/* On a phone the code wraps where it must rather than running off the card. */
:root[data-mobile] :is(.terminal, .code) {
  font-size: calc(11px * var(--ds-sf));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.post {
  display: grid;
  grid-template-columns: calc(9 * var(--ds-unit));
  gap: calc(var(--ds-unit) / 2);
}

.post__frame {
  position: relative;
  height: calc(11 * var(--ds-unit));
  overflow: hidden;
  border-radius: var(--ds-radius);
  background: var(--visual-casing);
}

.post__frame .film__picture {
  position: absolute;
  inset: calc(3 * var(--ds-unit)) var(--ds-unit) var(--ds-unit);
}

.post__frame b {
  position: absolute;
  left: var(--ds-unit);
  top: var(--ds-unit);
  color: var(--visual-legend);
  font-family: var(--ds-typeface-medium);
  font-weight: 400;
  font-size: var(--ds-type-size-display);
  line-height: var(--ds-unit);
}

.tree {
  width: calc(12 * var(--ds-unit));
  line-height: var(--ds-type-lineheight-default);
}

.tree > span {
  display: flex;
  align-items: flex-end;
  gap: calc(4px * var(--ds-sf));
  height: var(--ds-unit);
  white-space: nowrap;
}

.tree > span.is-in { padding-inline-start: var(--ds-unit); }
.tree .ds-icon { --ds-icon-size: 16px; }
.tree .lamp { width: calc(6px * var(--ds-sf)); height: calc(6px * var(--ds-sf)); margin: 0 0 calc(5px * var(--ds-sf)) calc(var(--ds-unit) / 2); box-shadow: none; }

/* ---- How Visual compares ----------------------------------------------- */

.compare {
  box-sizing: border-box;
  width: min(100%, calc(46 * var(--ds-unit)));
  margin: calc(3 * var(--ds-unit)) 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  text-align: start;
}

.compare table {
  width: 100%;
  min-width: calc(40 * var(--ds-unit));
}

.compare th:first-child,
.compare td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: calc(14 * var(--ds-unit));
  background: var(--paper);
}

.compare thead th:not(:first-child),
.compare td:not(:first-child) {
  text-align: center;
}

.compare .is-visual {
  color: var(--visual-phosphor);
}

.compare thead .is-visual {
  font-family: var(--visual-logotype);
  font-style: italic;
  font-size: calc(var(--ds-type-size-default) * 1.25);
}

.compare td.is-visual {
  background: color-mix(in srgb, var(--visual-phosphor) 8%, transparent);
}

.compare .ds-icon {
  --ds-icon-size: 16px;
  vertical-align: bottom;
}

.compare .icon-close,
.compare .icon-minus {
  color: var(--visual-label);
}

.compare .icon-check {
  color: var(--visual-legend);
}

.compare td.is-visual .icon-check {
  color: var(--visual-phosphor);
}

.compare-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ds-unit);
  justify-content: center;
  margin-top: var(--ds-unit);
  color: var(--dim);
  line-height: var(--ds-type-lineheight-default);
}

.compare-key > span {
  display: inline-flex;
  align-items: flex-end;
  gap: calc(4px * var(--ds-sf));
  height: var(--ds-unit);
}

.compare-key .ds-icon { --ds-icon-size: 16px; }

/* ---- Questions ---------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--ds-unit);
  width: min(100%, calc(32 * var(--ds-unit)));
  margin: calc(3 * var(--ds-unit)) 0 calc(5 * var(--ds-unit));
  text-align: start;
  --ds-accordion-width: 100%;
}

/* ---- Pricing ------------------------------------------------------------ */

.pricing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--ds-unit) calc(2 * var(--ds-unit));
  margin-top: calc(2 * var(--ds-unit));
}

.early {
  display: inline-flex;
  align-items: flex-end;
  gap: calc(4px * var(--ds-sf));
  min-height: var(--ds-unit);
  margin-top: var(--ds-unit);
  color: var(--ink);
  line-height: var(--ds-type-lineheight-default);
}

.early .lamp { --lamp: var(--visual-amber); }
/* Plans open to this member: the line says their plan, lit as ready. */
.early[data-open] .lamp { --lamp: var(--visual-chroma); }

/* Four plans, twelve squares each and a square apart; two by two in a narrower window; one column on a phone. */
.plans {
  display: grid;
  grid-template-columns: repeat(4, calc(12 * var(--ds-unit)));
  gap: var(--ds-unit);
  justify-content: center;
  margin: calc(3 * var(--ds-unit)) 0 var(--ds-unit);
  text-align: start;
}

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, calc(14 * var(--ds-unit))); }
}

@media (max-width: 640px) {
  .plans { grid-template-columns: minmax(0, calc(16 * var(--ds-unit))); width: 100%; }
}

.plans ds-card {
  --ds-fill: var(--visual-panel);
  height: 100%;
  box-shadow: inset 0 0 0 1px var(--visual-rail);
  border-radius: var(--ds-radius-card);
}

.plans ds-card.is-recommended {
  --ds-fill: color-mix(in srgb, var(--visual-phosphor) 10%, var(--visual-panel));
  box-shadow:
    inset 0 0 0 1px var(--visual-phosphor),
    0 0 calc(2 * var(--ds-unit)) color-mix(in srgb, var(--visual-phosphor) 30%, transparent);
}

.plan {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: var(--ds-unit);
}

.plan__name {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--ds-unit) / 2);
  height: var(--ds-unit);
  font-family: var(--ds-typeface-medium);
  font-size: var(--ds-type-size-default);
  line-height: var(--ds-type-lineheight-default);
}

.plan__name ds-tag {
  --ds-tag-accent: var(--visual-phosphor);
}

.plan__figure {
  display: flex;
  align-items: flex-end;
  gap: calc(4px * var(--ds-sf));
  height: calc(3 * var(--ds-unit));
  margin-top: var(--ds-unit);
  font-family: var(--figure-face);
  font-size: calc(56px * var(--ds-sf));
  font-variant-numeric: tabular-nums;
  line-height: calc(3 * var(--ds-unit));
  letter-spacing: 0;
  white-space: nowrap;
}

.plan__figure small {
  color: var(--dim);
  font-family: var(--ds-typeface-regular);
  font-size: var(--ds-type-size-default);
  line-height: var(--ds-unit);
}

.plan__per {
  min-height: calc(2 * var(--ds-unit));
  margin: 0;
  color: var(--dim);
  line-height: var(--ds-unit);
}

.plan__what {
  min-height: calc(3 * var(--ds-unit));
  margin: var(--ds-unit) 0 0;
  line-height: var(--ds-unit);
}

.plan ds-button {
  margin-top: var(--ds-unit);
  align-self: flex-start;
}

.plan__list {
  margin: var(--ds-unit) 0 0;
  padding: var(--ds-unit) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  line-height: var(--ds-unit);
}

.plan__list li {
  display: grid;
  grid-template-columns: var(--ds-unit) minmax(0, 1fr);
  align-items: start;
}

.plan__list .ds-icon {
  --ds-icon-size: 16px;
  margin-top: calc(4px * var(--ds-sf));
  color: var(--visual-phosphor);
}

.plan__list .is-limited .ds-icon { color: var(--dim); }

.pricing-note {
  display: inline-flex;
  align-items: flex-end;
  gap: calc(4px * var(--ds-sf));
  max-width: calc(40 * var(--ds-unit));
  margin: var(--ds-unit) 0 calc(4 * var(--ds-unit));
  color: var(--dim);
  line-height: var(--ds-unit);
  text-align: start;
}

.table-wrap {
  box-sizing: border-box;
  width: min(100%, calc(56 * var(--ds-unit)));
  margin: calc(3 * var(--ds-unit)) 0 calc(4 * var(--ds-unit));
  text-align: start;
}

/* ---- Desktop only ------------------------------------------------------- */

.desktop {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--ds-unit) var(--ds-unit) calc(2 * var(--ds-unit));
  background: var(--visual-console);
  text-align: center;
}

.desktop .logotype {
  font-size: calc(var(--ds-type-size-default) * 3);
  line-height: calc(3 * var(--ds-unit));
}

.desktop__frames {
  width: 100%;
  margin: var(--ds-unit) 0;
}

.desktop .panel__title {
  font-size: calc(var(--ds-type-size-default) * 2);
  line-height: calc(2 * var(--ds-unit));
  max-width: calc(16 * var(--ds-unit));
  letter-spacing: calc(-0.8px * var(--ds-sf));
}

:root .desktop .panel__line {
  max-width: calc(16 * var(--ds-unit));
  font-size: var(--ds-type-size-default);
  line-height: var(--ds-unit);
  letter-spacing: var(--ds-type-letterspacing-default);
}

.desktop__link {
  margin-top: var(--ds-unit);
  color: var(--visual-phosphor-pastel);
  font-family: var(--ds-typeface-mono);
  font-size: calc(13px * var(--ds-sf));
  line-height: var(--ds-unit);
}

.desktop__actions {
  display: grid;
  gap: calc(var(--ds-unit) / 2);
  justify-items: center;
  margin-top: calc(1.5 * var(--ds-unit));
}

/* The frames on their own, standing larger on the console as on the box. */
.frames-alone {
  position: relative;
  width: 310px;
  height: 260px;
}

.frames-alone .frames {
  left: 0;
  top: 0;
}

/* The render figures stand in front of a slowly breathing fan of light. */
.render-scale { position: relative; isolation: isolate; width: 100%; max-width: calc(48 * var(--ds-unit)); margin-top: calc(2 * var(--ds-unit)); }
.render-scale .stats { position: relative; z-index: 1; grid-template-columns: calc(13 * var(--ds-unit)); justify-content: start; gap: calc(2 * var(--ds-unit)); text-align: start; margin: var(--ds-unit) 0 calc(2 * var(--ds-unit)); }
.render-scale ds-stat { --ds-text-color: var(--visual-phosphor); }
.render-ribbon { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.render-ribbon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.render-ribbon path { animation: render-strand 12s ease-in-out infinite; animation-delay: var(--strand-delay); }
@keyframes render-strand { 0%, 100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(-12px); opacity: 1; } }
@media (max-width: 760px) {
  .render-scale .stats { grid-template-columns: calc(12 * var(--ds-unit)); }
  .render-ribbon { inset: 0 calc(-1 * var(--ds-unit)); }
  .render-ribbon svg { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .render-ribbon path { animation: none; } }

/* Reels shares the film clock; platform chrome keeps its native geometry. */
.gm-output { grid-area:output; display:flex; justify-content:center; align-items:center; min-width:0; }
.gm-output ds-device-bezel { --ds-device-width:400px; }
.gm-output ds-app-chrome { height:100%; }
.gm-film { position:relative; overflow:hidden; background:#594dff; display:flex !important; align-items:center; justify-content:center; }