html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(#home:not([hidden])) { scroll-padding-top: 96px; }

/* Shared studio shell. The approved landing design is scoped below. */
:root {
  --sage: #829375;
  --sage-strong: #576b4d;
  --gutter: clamp(24px, 4.65vw, 76px);
  --col-max: 1440px;
  --bar-h: 118px;
}

/* Colours come from tokens.css (white paper, ink, signal orange). Only the scheme is chosen here. */
html:not([data-theme="dark"]) { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { color-scheme: dark; }
  html:not([data-theme]) .composer-box { background: var(--paper); }
}

.bar { position: relative; border-bottom: 0; }
.bar.is-scrolled { box-shadow: none; }
.bar-inner { max-width: var(--col-max); }
.wordmark {
  display: inline-flex;
  align-items: center;
  padding: 5px 0;
  color: var(--signal, var(--ink));
}
.wordmark-logo {
  display: block;
  width: 100px;
  aspect-ratio: 2087 / 753;
  background: currentColor;
  /* Frame the transparent artwork without recoloring or redrawing its letters. */
  mask-image: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp');
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.bar-links { gap: 34px; }
.bar-link { font: 400 16px/1.4 var(--sans); color: var(--ink); }
.profile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  font: 400 23px/1 var(--serif);
}

/* Shared brand: Satoshi, original orange wordmark, ink illustrations. */
.page[data-view="composer"] { --bar-h: 88px; --col-max: 1280px; --gutter: clamp(22px, 4vw, 64px); }
.page[data-view="composer"] .wordmark { color: var(--signal); }
.page[data-view="composer"] .bar .wordmark-logo { width: 94px; }
.page[data-view="composer"] .bar-links { margin-left: 18px; gap: 14px; }
.page[data-view="composer"] .profile { width: 32px; height: 32px; font: 500 14px/1 var(--sans); }
.page[data-view="composer"] .bar-link { font-size: 12px; }
.page[data-view="home"] > .studio-footer { display: none; }
@media (max-width: 860px) {
  .page[data-view="composer"] .bar-links { margin-left: 12px; }
}
@media (max-width: 640px) {
  .page[data-view="composer"] { --bar-h: 106px; --gutter: 22px; }
  .page[data-view="composer"] .bar-inner { flex-wrap: wrap; gap: 2px 12px; }
  .page[data-view="composer"] .bar .wordmark-logo { width: 80px; }
  .page[data-view="composer"] .bar-links { margin-left: 0; }
  .page[data-view="composer"] .profile { width: 28px; height: 28px; }
  .page[data-view="composer"] :is(#operator-lock, #operator-unlock) span { display: none; }
}
.create .recently .row-list { border: 0; border-radius: 0; }
.example-dialog { width: min(960px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); overflow: auto; }
.example-dialog::backdrop { background: #101312c9; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.example-dialog { box-shadow: 0 2px 4px #0000001f, 0 40px 90px -24px #000000a6; }
/* The print the viewer pressed opens into the player and folds back into it on close (app.js names the pair). */
::view-transition-group(ivan-film) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
::view-transition-old(ivan-film), ::view-transition-new(ivan-film) { height: 100%; object-fit: cover; animation-duration: 340ms; }
@supports not (view-transition-name: none) {
  .example-dialog[open] { animation: dialog-in 360ms cubic-bezier(.16, 1, .3, 1); }
  @keyframes dialog-in { from { opacity: 0; scale: .97; } }
}
.example-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.example-dialog h2 { margin: 0; font: 700 23px/1.3 var(--sans); letter-spacing: -.025em; }
#example-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; }
#example-close:hover { background: var(--paper-2); }
#example-video { display: block; width: 100%; aspect-ratio: 16/9; background: #fff; }
.example-dialog-footer { padding: 16px 22px; }
/* The film's music credit, which its licence asks for wherever the film plays. */
.example-credit { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.example-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.example-credit a:hover { color: var(--ink-2); }
#example-error { margin: 18px 22px; color: var(--oxide); }
.example-dialog .text-link { font-size: 14px; color: var(--sage-strong); }
:is(.choice-picker > summary, .example-card, .composer-box button, .wordmark, .profile, .example-dialog button, .landing-nav a, .landing-header-cta):focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 4px; }
@media (max-width: 640px) {
  .example-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 9px; }
  .example-dialog-header { padding: 12px 14px; gap: 10px; }
  .example-dialog h2 { font-size: 20px; }
  .example-dialog-footer { padding: 14px 16px; }
}
.composer-form { width: 100%; position: relative; z-index: 2; grid-column: 1; min-width: 0; container: composer / inline-size; }
 .composer-box {
  display: flex; flex-direction: column; height: 208px; min-height: 0; padding: 0; gap: 0;
  border: 1px solid var(--line-2); border-radius: 13px;
  background: var(--paper); box-shadow: none;
}
.composer-box::after { border-color: var(--sage); box-shadow: 0 0 0 3px #82937512; }
.composer-box:focus-within::after { opacity: .65; }
.composer-content { position: relative; flex: 1; min-height: 0; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.create .field { display: block; flex: 1; width: 100%; height: 0; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; resize: none; overflow-y: auto; field-sizing: fixed; font: 400 20px/1.4 var(--sans); letter-spacing: -.015em; box-shadow: none; background: transparent; caret-color: var(--ink); }
.create .field::placeholder { color: var(--ink-3); opacity: 1; }
.create .field:focus { box-shadow: none; }
.create .count { position: absolute; bottom: 2px; right: 20px; font: 11px var(--sans); }
.composer-toolbar, .composer-input-actions, .composer-settings { display: flex; align-items: center; }
.composer-toolbar { flex: none; min-height: 64px; padding: 9px 14px; border-top: 1px solid var(--line); gap: 12px; }
.composer-input-actions { gap: 4px; }
.create .upload, .create .dictate { display: flex; align-items: center; justify-content: center; padding: 0; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink); box-shadow: none; }
.create .upload:hover, .create .dictate:hover { background: var(--paper-2); }
.create .upload svg, .create .dictate svg { width: 21px; height: 21px; }
.composer-settings { gap: 4px; margin-left: auto; }
.choice-picker { position: relative; }
.choice-picker > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font: 400 14px/1.4 var(--sans);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, scale var(--motion-press) var(--motion-ease);
}
.choice-picker > summary::-webkit-details-marker { display: none; }
.choice-picker > summary svg { flex: none; }
.choice-picker > summary svg:last-child:not(:first-child) { width: 15px; height: 15px; transition: rotate var(--motion-menu) var(--motion-ease); }
.choice-picker[open] > summary svg:last-child:not(:first-child) { rotate: 180deg; }
.choice-picker[open] > summary, .choice-picker > summary:hover { background: var(--paper-2); border-color: var(--sage); }
.more-options > summary { width: 48px; padding: 0; }
.choice-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 4px 10px #17221908, 0 16px 40px #17221914;
  transform-origin: top right;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.choice-picker.opens-up > .choice-panel { top: auto; bottom: calc(100% + 10px); transform-origin: bottom right; --menu-enter-y: 3px; }
.choice-panel > label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font: 400 14px/20px var(--sans);
  color: var(--ink-2);
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.choice-panel input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice-panel > label::after {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  margin-left: auto;
  margin-right: 3px;
  border: solid currentColor;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg);
  opacity: 0;
  scale: .8;
  transition: opacity var(--motion-fast) ease, scale var(--motion-fast) var(--motion-ease);
}
.choice-panel > label:has(input:checked) { background: color-mix(in srgb, var(--sage) 12%, transparent); color: var(--ink); font-weight: 500; }
.choice-panel label:has(input:checked)::after { opacity: 1; scale: 1; color: var(--sage-strong); }
.choice-panel label:has(input:focus-visible) { outline: 2px solid var(--sage-strong); outline-offset: -2px; }
.options-panel { width: 296px; padding: 16px; }
/* Eighty-six languages do not read as one column, and nobody scrolls
   eighty-six rows to find one. Two columns, the captions spanning both,
   a filter box pinned above them, and a bounded height so the panel never
   outgrows a phone; one column when there is no room for two. */
.language-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 2px 6px;
  width: min(420px, calc(100vw - 32px));
  max-height: min(60dvh, 420px);
}
.language-choices > legend { grid-column: 1 / -1; }
.choice-filter {
  position: sticky;
  top: -6px;
  z-index: 1;
  grid-column: 1 / -1;
  min-width: 0;
  margin: -6px -6px 2px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/20px var(--sans);
}
.choice-filter::placeholder { color: var(--ink-3); }
.choice-filter:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: -2px; }
.choice-note {
  grid-column: 1 / -1;
  margin: 6px 12px 2px;
  color: var(--ink-3);
  font: 400 11px/1.55 var(--sans);
}
.choice-caption {
  grid-column: 1 / -1;
  margin: 8px 12px 2px;
  color: var(--ink-3);
  font: 500 10px/1.4 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.choice-caption:first-of-type { margin-top: 4px; }
.language-choices > label { min-height: 40px; padding: 8px 10px; gap: 8px; }
.choice-native { flex: none; }
.choice-english { color: var(--ink-3); font-size: 12px; }
.voice-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.voice-choices + .voice-choices { margin-top: 16px; }
.voice-choices legend { margin-bottom: 10px; padding: 0; font: 600 12px/18px var(--sans); letter-spacing: .01em; color: var(--ink-2); }
.voice-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--paper-2); }
.voice-segments label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px; color: var(--ink-2); font: 500 14px/20px var(--sans); cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.voice-segments label:has(input:checked) { background: var(--paper); color: var(--ink); border-color: color-mix(in srgb, var(--line) 65%, transparent); box-shadow: 0 1px 3px #1722190d; }
/* Two hosts is one choice about the whole reading, not a third narrator, so
   it takes its own full-width row under the pair. It is absent entirely on a
   studio with no Google key, or under the handwritten board. */
.voice-segments label[hidden] { display: none; }
.voice-segments label[data-podcast-option] { grid-column: 1 / -1; }
.voice-note { margin: 8px 0 0; color: var(--ink-2); font: 400 12px/17px var(--sans); }
.voice-note[hidden] { display: none; }
@media (hover: hover) {
  .choice-panel > label:hover { background: color-mix(in srgb, var(--sage) 8%, transparent); color: var(--ink); }
  .voice-segments label:hover { color: var(--ink); }
}
.choice-picker[open] > .choice-panel { animation: control-menu-enter var(--motion-menu) var(--motion-ease) both; }
.create .explain { position: static; display: flex; align-items: center; justify-content: center; flex: none; min-width: 108px; width: auto; height: 44px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--sage-strong); color: white; font: 500 16px/1 var(--sans); box-shadow: none; }
.create .explain:disabled { opacity: .5; cursor: not-allowed; }
.composer-error:empty, .engine:empty { display: none; }
.composer-error, .engine { margin: 12px 2px 0; font: 13px/20px var(--sans); }


/* A bounded request area with compact, independently readable sources. */
.create .choice-picker > summary { min-height: 44px; border-color: transparent; padding: 0 10px; gap: 7px; border-radius: 7px; }
.create .more-options > summary { width: 44px; padding: 0; }
.composer-notice { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 3px 2px 0; color: var(--ink-3); font: 12px/18px var(--sans); }
.composer-notice button { padding: 0; border: 0; background: transparent; color: var(--ink); text-decoration: underline; }
.source-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line-2); border-radius: 14px; color: var(--ink); background: var(--paper); overflow: auto; }
.source-dialog::backdrop { background: #0006; }
.source-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.source-dialog h2 { margin: 0; font: 500 22px/1.3 var(--sans); overflow-wrap: anywhere; }
.source-dialog p { margin: 6px 0 0; color: var(--ink-3); font: 12px/1.5 var(--sans); }
.source-dialog button { min-height: 44px; border: 1px solid var(--line-2); border-radius: 7px; padding: 0 12px; background: var(--paper); color: var(--ink); font: 13px var(--sans); }
.source-dialog #source-close { min-width: 44px; font-size: 22px; }
.source-search { display: flex; gap: 8px; margin-bottom: 12px; }
.source-search input { min-width: 0; flex: 1; border: 1px solid var(--line-2); border-radius: 7px; padding: 10px; background: var(--paper); color: var(--ink); font: 14px var(--sans); }
#source-preview-text { width: 100%; height: min(360px, 42dvh); resize: none; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--ink); font: 14px/1.6 var(--sans); }
#source-reader-status { min-height: 20px; }
.source-reader-footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 12px var(--sans); }
#source-download { margin-left: auto; }
.source-dialog button:disabled { opacity: .45; }
.source-dialog button:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: -3px; }
@container composer (max-width: 570px) {
 .composer-box { height: 264px; }
 .composer-content { padding: 16px; }
 /* Language, format and the options gear, then the input actions and Create
    on the row below. The gear keeps the fixed last column. */
 .composer-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; gap: 6px; padding: 8px 10px; }
 .composer-settings { display: contents; }
 .create .choice-picker { grid-row: 1; }
 .composer-input-actions { grid-row: 2; grid-column: 1 / 2; }
 .create .explain { grid-row: 2; grid-column: 2 / 4; min-width: 0; width: 100%; }
 .create .choice-picker > summary { padding: 0 5px; gap: 4px; font-size: 12px; }
 .create .choice-picker > summary > svg:first-child { display: none; }
 .create .more-options > summary > svg:first-child { display: block; }
 .source-dialog { padding: 16px; }
 .source-reader-footer { gap: 5px; }
 #source-download { margin-left: 0; }
}

/* Create composer controls retained from the Create-page branch. */
.composer-box { border-radius: 10px; }
.composer-content { padding: 18px; }
.composer-toolbar { gap: 6px; padding: 8px 10px; }
.composer-settings { gap: 0; }
.create .choice-picker > summary { padding-inline: 8px; font-size: 12px; }
.create .choice-picker > summary svg { width: 17px; height: 17px; }
.create .choice-picker > summary svg:last-child:not(:first-child) { width: 12px; height: 12px; }
.create .explain { gap: 10px; background: var(--signal); color: #171a19; font-size: 14px; font-weight: 700; }
.create .explain > span:last-child { font-size: 20px; font-weight: 400; }
.choice-picker > summary { justify-content: center; }
.choice-picker .choice-panel { left: 0; right: auto; }
.more-options .choice-panel { left: auto; right: 0; }
.composer-notice:has(#composer-notice-text:empty):has(#composer-notice-undo[hidden]) { min-height: 0; padding-top: 0; }
@container composer (max-width: 570px) {
  .create .choice-picker > summary { font-size: 12px; padding-inline: 5px; }
  .composer-toolbar { gap: 6px; }
  .create .explain { min-width: 0; }
  .source-dialog { padding: 16px; }
}

/* Locked landing: paper and ink. Shared surfaces above retain their existing rules. */
.page[data-view="home"] {
  --bar-h: 68px; --col: 1280px; --col-max: 1280px; --gutter: max(clamp(22px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --chapter: clamp(96px, 11.5vw, 168px); --ease: cubic-bezier(.16, 1, .3, 1); --scrub: cubic-bezier(.2, .7, .2, 1);
  --edge: var(--frame-edge);
  --sh-rest: 0 1px 1px var(--landing-shadow-soft), 0 12px 32px -14px var(--landing-shadow-deep);
  --sh-lift: 0 2px 3px var(--landing-shadow-soft), 0 28px 56px -18px var(--landing-shadow-deep);
  overflow-x: clip;
}
.page[data-view="home"] .main { padding: 0; }
.page:not([data-view="home"]) :is(.landing-nav, .landing-header-cta) { display: none; }
.page[data-view="home"] :is(#link-runs, #link-inspect, #link-new) { display: none; }
.page[data-view="home"] .bar { height: auto; padding: 0; flex: none; }
.page[data-view="home"] .bar-inner { width: min(var(--col), 100% - 2 * var(--gutter)); flex: none; justify-content: normal; }
#home {
  --landing-art-blend: multiply;
  --signal-hover: #f76342; --night: #171d1c; --night-2: #1b2220;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  position: relative; width: 100%; max-width: none; padding: 0; overflow-x: clip;
  font: 400 16px/1.5 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
/* Paper grain: the one texture on the page, 3.5% and fixed, so every sheet reads as material. */
#home::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#home .wrap { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; }
#home :is(.example-card, .arrow, .copy) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* Word masks: each word rises from behind its own baseline. The mask is a clip, so the italic keeps its baseline. */
#home .wm { display: inline-block; vertical-align: baseline; clip-path: inset(0); padding: .02em .07em .16em; margin: -.02em -.07em -.16em; }
#home .w { display: inline-block; }
#home .mark { position: relative; display: inline-block; white-space: nowrap; }
/* Wavy pen line: starts .11em below the baseline (the baseline sits .38em below the word centre in Satoshi). */
#home .stroke { position: absolute; left: -.02em; top: calc(50% + .49em); width: calc(100% + .04em); height: .16em; overflow: visible; color: var(--signal); pointer-events: none; }
#home .stroke path { fill: none; stroke: currentColor; stroke-width: .056em; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--pen, 1.2) calc(var(--pen, 1.2) + .3); }
/* The one signature: the emphasised word of the big headlines, set upright in Fraunces 500. Everything else on the page is Satoshi. */
#home .it { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-style: normal; font-weight: 500; font-optical-sizing: auto; font-variation-settings: "SOFT" 40; font-size: 1.06em; line-height: .9; letter-spacing: -.025em; }
#home .wm.it { padding-right: .04em; margin-right: -.04em; }
#home .mark:has(.it) .stroke { width: calc(100% + .06em); }
#home .it .w { color: var(--ink); }
/* Header: a glass bar, a quiet pill that glides under the pointer, one dark pill with the orange nib, the studio initial behind a hairline. */
.page[data-view="home"] .bar { position: sticky; top: 0; z-index: 40; background: var(--landing-bar-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.page[data-view="home"] .bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; }
.page[data-view="home"] .bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--signal); clip-path: inset(0 100% 0 0); }
.page[data-view="home"] .bar-inner { display: flex; align-items: center; gap: 6px; height: 68px; }
.page[data-view="home"] .wordmark { display: inline-flex; align-items: center; min-height: 44px; margin-right: 22px; padding: 0; color: var(--signal); }
.page[data-view="home"] .wordmark:hover { color: var(--signal); }
.page[data-view="home"] .wordmark-logo { display: block; width: 94px; aspect-ratio: 2087 / 753; background: currentColor; -webkit-mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; }
.page[data-view="home"] .landing-nav { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto 0 0; }
.page[data-view="home"] .landing-nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 999px; color: var(--ink-2); font: 500 14px/1 var(--sans); letter-spacing: -.004em; text-decoration: none; transition: color 160ms ease; }
.page[data-view="home"] .landing-nav a:hover, .page[data-view="home"] .landing-nav a[aria-current] { color: var(--ink); }
.page[data-view="home"] .nav-pill { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 36px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; pointer-events: none; transition: transform 460ms var(--ease), width 460ms var(--ease), opacity 180ms ease; }
.page[data-view="home"] .landing-nav.has-active .nav-pill { opacity: 1; }
.page[data-view="home"] .bar-links { display: flex; align-items: center; gap: 6px; margin: 0; }
.page[data-view="home"] .bar-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 500 14px/1 var(--sans); letter-spacing: -.004em; text-decoration: none; cursor: pointer; transition: color 160ms ease, background-color 160ms ease; }
.page[data-view="home"] .bar-link:hover { color: var(--ink); background: var(--paper-2); }
.page[data-view="home"] .bar-link svg { width: 16px; height: 16px; opacity: .85; }
.page[data-view="home"] .landing-header-cta { order: 1; display: inline-flex; align-items: center; gap: 12px; height: 40px; margin-left: 6px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--ink); --cta-ink: var(--paper); color: var(--cta-ink); font: 600 14px/1 var(--sans); letter-spacing: -.004em; text-decoration: none; box-shadow: 0 1px 2px #171a1933, 0 10px 22px -12px #171a198c, inset 0 1px 0 #ffffff1f; transition: background-color 200ms ease, transform 200ms var(--ease), box-shadow 200ms ease; }
/* The label sets its own ink, as the arrow does, and fills its letters with it directly: a browser boost or extension that
   recolours text would otherwise ink it in the pill's own colour and leave only the arrow. Registered, the ink always
   computes to a colour, so a mix such a tool rewrites into something unreadable falls back to white, not to the pill's ink. */
@property --cta-ink { syntax: "<color>"; inherits: true; initial-value: #fff; }
/* It eases with the pill's background, so the two never meet halfway in one grey. */
.page[data-view="home"] .landing-header-cta .cta-label { color: var(--cta-ink); transition: color 200ms ease, -webkit-text-fill-color 200ms ease; }
/* High contrast repaints the pill in system colours, and the letters must take the system's text colour, so the direct
   fill is left out there. */
@media (forced-colors: none) { .page[data-view="home"] .landing-header-cta .cta-label { -webkit-text-fill-color: var(--cta-ink); } }
.page[data-view="home"] .landing-header-cta:hover { background: #242a28; transform: translateY(-1px); box-shadow: 0 2px 3px #171a192e, 0 14px 28px -12px #171a1999, inset 0 1px 0 #ffffff24; }
.page[data-view="home"] .landing-header-cta:active { transform: translateY(0) scale(.98); }
.page[data-view="home"] .arr { display: inline-block; transition: translate 350ms var(--ease), rotate 300ms var(--ease); }
.page[data-view="home"] .landing-header-cta .arr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: #171a19; font: 500 15px/1 var(--sans); box-shadow: inset 0 1px 0 #ffffff47; transition: translate 220ms var(--ease), background-color 160ms ease; }
.page[data-view="home"] .landing-header-cta:hover .arr { translate: 2px -1px; background: #f76342; }
.page[data-view="home"] .profile { order: 2; position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 14px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 13px/1 var(--sans); transition: box-shadow 160ms ease, background-color 160ms ease; }
.page[data-view="home"] .profile::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.page[data-view="home"] .profile:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-4); }
/* Hero: one object (the question), one story (the page is drawn). */
#home .hero { display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 660fr); align-items: center; padding-top: clamp(28px, 3.6vw, 52px); }
#home .hero-copy { position: relative; z-index: 2; min-width: 0; }
/* What Ivan is, in one line above what it does. The pen draws its dash, and the line leads to the agents band. */
#home .hero-layer { margin: 0 0 clamp(14px, 1.5vw, 22px); font: 600 clamp(14px, 1.08vw, 15.5px)/1.4 var(--sans); letter-spacing: -.012em; }
#home .hero-layer a { display: inline-flex; align-items: center; gap: 11px; min-height: 32px; color: var(--ink-2); text-decoration: none; transition: color 160ms ease; }
#home .hero-layer a::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--signal); transform-origin: left; transition: width 320ms var(--ease); }
#home .hero-layer a:hover { color: var(--ink); }
#home .hero-layer a:hover::before { width: 30px; }
#home .hero-layer a:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 4px; border-radius: 4px; }
#home .h1 { margin: 0 0 0 -.04em; font: 800 clamp(44px, 6vw, 86px)/.98 var(--sans); letter-spacing: -.058em; }
/* The first line holds the one word that changes, so it sits on its own line; the gap keeps "Bring" clear of the line below. */
#home .h1 .l1 { display: block; margin-bottom: .1em; }
/* What people can bring, in the signal colour. landing-motion.js turns it over; the widest word ("your notes,") still fits
   the line at every width. Kerning is off so the whole word and its letters, split for motion, set identically. */
#home .rot { position: relative; display: inline-block; color: var(--signal); white-space: nowrap; font-kerning: none; }
#home .rot-word { display: inline-block; white-space: pre; }
#home .rot-word.is-out { position: absolute; left: 0; top: 0; }
#home .rot-ch { display: inline-block; white-space: pre; }
#home .rot-tail { color: var(--ink); }
#home .hero-deck { margin: clamp(22px, 2.4vw, 32px) 0 0; color: var(--ink); font: 700 clamp(22px, 2.3vw, 34px)/1.15 var(--sans); letter-spacing: -.03em; }
#home .hero-deck + .promise { margin-top: 14px; }
#home .promise { max-width: 470px; margin: 34px 0 0; color: var(--ink-2); font: 400 clamp(17px, 1.34vw, 19px)/1.55 var(--sans); }
#home .promise strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
/* The question box: one line at rest, text and button on one axis, corners concentric (18 outer, 8 padding, 10 inner). Home hands the prompt to Create. */
#home .hero-start { position: relative; z-index: 2; width: 100%; max-width: none; min-width: 0; margin-top: 34px; }
#home .hero-start-box { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--paper); box-shadow: var(--sh-rest), inset 0 1px 0 var(--paper); transition: border-color 160ms ease, box-shadow 320ms var(--ease), transform 320ms var(--ease); }
#home .hero-start-box:hover { box-shadow: var(--sh-lift), inset 0 1px 0 var(--paper); }
#home .hero-start-box:focus-within { border-color: #f04420a6; box-shadow: 0 0 0 4px #f044200f, var(--sh-lift); }
#home #hero-topic { flex: 1; box-sizing: border-box; min-width: 0; min-height: 48px; max-height: 190px; margin: 0; padding: 11.5px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: 400 18px/25px var(--sans); letter-spacing: -.012em; field-sizing: content; }
#home #hero-topic::placeholder { color: var(--ink-3); }
#home .caret { position: absolute; left: 19px; top: 21px; width: 2px; height: 22px; border-radius: 1px; background: var(--ink); opacity: 0; pointer-events: none; }
#home .hero-start-box:focus-within .caret, #home .hero-start-box:has(#hero-topic:not(:placeholder-shown)) .caret { display: none; }
/* The paperclip: a deck, a PDF, notes or a script go in the same box as a question. Files dropped anywhere on the page land here too. */
#home .hero-attach { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; transition: color 160ms ease, background-color 160ms ease, transform 120ms var(--ease); }
#home .hero-attach svg { transition: rotate 320ms var(--ease); }
#home .hero-attach:hover { background: var(--paper-2); color: var(--ink); }
#home .hero-attach:hover svg { rotate: -14deg; }
#home .hero-attach:active { transform: scale(.94); }
#home :is(.hero-attach, .hero-start-go):focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }
#home.is-dropping .hero-start-box { border-color: var(--signal); box-shadow: 0 0 0 4px #f044201f, var(--sh-lift); }
#home.is-dropping .hero-attach { background: var(--paper-2); color: var(--signal-text); }
#home .hero-start-go { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 10px; background: var(--signal); color: #171a19; box-shadow: 0 1px 0 #171a192e, inset 0 1px 0 #ffffff47; transition: background-color 160ms ease, transform 120ms var(--ease), box-shadow 160ms ease; }
#home .hero-start-go svg { transition: translate 160ms ease; }
#home .hero-start-go:hover { background: var(--signal-hover); box-shadow: 0 4px 10px -4px #f0442099, inset 0 1px 0 #ffffff47; }
#home .hero-start-go:hover svg { translate: 1.5px -1.5px; }
#home .hero-start-go:active { transform: scale(.94); }
/* Invite-only is said under the question before anyone answers it. The line
   hangs below the box, so its arrival moves nothing else on the page. */
#home .hero-visitor, #home .hero-visitor [data-visitor-says] { display: none; }
html[data-visitor] #home .hero-visitor { display: block; position: absolute; top: calc(100% + 14px); left: 6px; right: 6px; margin: 0; color: var(--ink-3); font: 400 14px/1.5 var(--sans); animation: fade-up .7s var(--ease) both; }
html[data-visitor="guest"] #home .hero-visitor [data-visitor-says="guest"],
html[data-visitor="listed"] #home .hero-visitor [data-visitor-says="listed"] { display: flex; align-items: flex-start; gap: 9px; }
#home .hero-visitor svg { flex: none; margin-top: 2.5px; }
#home .hero-visitor b { color: var(--ink-2); font-weight: 600; }
#home .hero-visitor .visitor-tick { stroke: var(--signal); stroke-width: 3; }
/* The illustration is a sheet laid on the desk, then inked in by a nib. Two sheets: the drawing and a blank one beneath. */
#home .hero-art { position: relative; z-index: 1; min-width: 0; margin: 0 -28px 0 20px; perspective: 1600px; }
#home .hero-sheet { position: relative; transform-origin: 40% 60%; }
#home .hero-sheet::before { content: ""; position: absolute; inset: 3% -1% -2.5% 2%; z-index: 0; background: var(--paper); border: 1px solid var(--edge); border-radius: 3px; rotate: 1.9deg; box-shadow: 0 1px 2px var(--landing-shadow-soft), 0 22px 40px -22px var(--landing-shadow-deep); }
#home .face { position: relative; z-index: 1; padding: 2.4% 2.8%; background: var(--paper); border: 1px solid var(--edge); border-radius: 3px; rotate: -1.3deg; box-shadow: var(--sh-rest); }
#home .clip { position: relative; }
#home .clip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
/* The hero's drawing tool is the round paint brush that paints the name on a first visit, held the same way: its tip rides
   the edge of the reveal, the handle trailing down and right toward the hand. The shadow offset is turned back by the
   same 35deg, so it falls straight down like every other shadow on the page. */
#home .nib { position: absolute; left: 0; top: 58%; z-index: 3; width: clamp(68px, 14%, 120px); aspect-ratio: 150 / 24; pointer-events: none; transform: translateY(-50%) rotate(35deg); transform-origin: 0 50%; }
#home .nib svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2.9px 4.1px 4px var(--landing-shadow-deep)); }
#home .nib .brush-handle { fill: var(--ink); }
#home .nib .brush-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
#home .nib .brush-ferrule { fill: var(--ink-4); stroke: var(--ink); stroke-width: 1; }
#home .nib .brush-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
#home .nib .brush-head { fill: color-mix(in srgb, var(--ink-4) 40%, var(--paper-2)); stroke: var(--ink); stroke-width: .8; }
#home .nib .brush-hairs { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: .5; }
#home .nib .brush-paint { fill: var(--signal); }
/* Chapters */
#home .landing-section { padding-top: var(--chapter); }
#home .head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(28px, 3.3vw, 48px); }
#home .h2 { margin: 0; font: 800 clamp(34px, 4.6vw, 66px)/1 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
#home .sub { max-width: 560px; margin: 18px 0 0; color: var(--ink-2); font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--sans); }
/* Proof: two films, physical prints. Each one starts as its question, Explain is pressed, and a render head inks the picture. */
#home .films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
#home .example { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#home .example-card { display: block; width: 100%; min-width: 0; color: var(--ink); text-align: left; }
#home .print { display: block; perspective: 1400px; }
#home .poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; border: 1px solid var(--edge); border-radius: 8px; background: #fff; box-shadow: var(--sh-rest); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: box-shadow 500ms var(--ease), transform 500ms var(--ease), border-color 200ms ease; will-change: transform; }
#home .poster-media { position: absolute; inset: 0; transition: transform 650ms var(--ease); }
#home .poster img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#home .play { position: absolute; left: 18px; bottom: 18px; display: grid; place-items: center; width: 56px; height: 56px; padding-left: 3px; border-radius: 50%; background: #171a19; color: #fff; box-shadow: 0 2px 4px #171a1933, 0 10px 20px -8px #171a1980, inset 0 1px 0 #ffffff29; transition: transform 400ms var(--ease), background-color 180ms ease; }
#home .play svg { width: 23px; height: 23px; }
#home .dur { position: absolute; right: 16px; bottom: 18px; padding: 4px 8px; border-radius: 4px; background: #171a19; color: #fff; font: 500 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#home .film-title { display: block; margin-top: 16px; font: 500 clamp(19px, 1.7vw, 24px)/1.3 var(--sans); letter-spacing: -.025em; text-wrap: balance; transition: color 180ms ease; }
/* What each film cost. The rule sits on one line across both films, whatever the title length. */
#home .example-facts { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
#home .example-facts dt { color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
#home .example-facts dd { margin: 4px 0 0; color: var(--ink); font: 700 clamp(20px, 1.85vw, 26px)/1.15 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  #home .example-card:hover .poster { border-color: var(--signal-text); box-shadow: var(--sh-lift); }
  #home .example-card:hover .poster-media { transform: scale(1.03); }
  #home .example-card:hover .play { transform: scale(1.1) rotate(-7deg); background: #bb3112; }
  #home .example-card:hover .film-title { color: var(--signal-text); }
}
/* A print comes alive when it is pointed at (or, on a phone, when it is the card in view): a silent time-lapse of the
   film being drawn plays over its cover. landing-motion.js fetches the loop only then. */
#home .poster-loop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; opacity: 0; pointer-events: none; transition: opacity 420ms ease; }
#home .poster-loop.is-live { opacity: 1; }
/* Rivals: one brief, three makers, one clock. The headline holds a single line at every width, so it is sized apart from .h2. */
#rivals .rivals-head { margin-bottom: clamp(20px, 2.2vw, 32px); overflow-x: clip; overflow-y: visible; text-align: center; }
#rivals .rivals-h2 { margin: 0; color: var(--ink); font: 800 clamp(15px, 4.6vw, 62px)/1.04 var(--sans); letter-spacing: -.05em; white-space: nowrap; }
/* The one input all three share, centred above the three outputs. */
#rivals .rivals-ask { margin: 0 auto clamp(34px, 4.2vw, 62px); text-align: center; }
#rivals .rivals-q-label { margin: 0 0 12px; color: var(--ink-3); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
#rivals .rivals-q { max-width: 24ch; margin: 0 auto; color: var(--ink); font: 600 clamp(22px, 2.3vw, 34px)/1.2 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
#rivals .rivals-quote { color: var(--signal-text); }
#rivals .rivals-lede { max-width: 42ch; margin: 16px auto 0; color: var(--ink-3); font: 400 clamp(15px, 1.1vw, 16.5px)/1.55 var(--sans); }
#rivals .rivals-brief { margin-top: 18px; }
#rivals .rivals-brief summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font: 500 13.5px/1 var(--sans); letter-spacing: -.01em; list-style: none; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
#rivals .rivals-brief summary::-webkit-details-marker { display: none; }
#rivals .rivals-brief summary:hover, #rivals .rivals-brief[open] summary { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--frame-edge); color: var(--ink); }
#rivals .rivals-chev { width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate 300ms var(--ease); }
#rivals .rivals-brief[open] .rivals-chev { rotate: -135deg; translate: 0 2px; }
/* The brief as it was sent: one card, addressed to all four makers at once. */
#rivals .rivals-brief-card { max-width: 640px; margin: 14px auto 0; padding: 16px 22px 20px; border-radius: 18px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--frame-edge); text-align: left; }
#rivals .rivals-brief[open] .rivals-brief-card { animation: rivals-brief-in 520ms var(--ease) both; }
@keyframes rivals-brief-in { from { opacity: 0; transform: translateY(-6px) scale(.985); clip-path: inset(0 0 100% 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
#rivals .rivals-brief-to { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); font: 500 13px/1.3 var(--sans); }
#rivals .rivals-stack { display: flex; }
#rivals .rivals-stack .rivals-mark { --mark: 26px; box-shadow: 0 0 0 2px var(--paper-2), inset 0 0 0 1px var(--frame-edge); background: var(--paper); }
#rivals .rivals-stack .rivals-mark + .rivals-mark { margin-left: -5px; }
#rivals .rivals-stack .rivals-mark-ivan { width: auto; padding-inline: 8px; box-shadow: 0 0 0 2px var(--paper-2); background: var(--signal); }
#rivals .rivals-stack .rivals-wordmark { width: 40px; background: #fff; }
#rivals .rivals-brief-text { margin: 0; color: var(--ink-2); font: 400 13px/1.85 var(--mono); white-space: pre-wrap; overflow-x: auto; }
/* Each maker is named by its own mark, for identification only: in ink, but for Claude's, which keeps its orange. Ivan is named by its wordmark alone. */
#rivals .rivals-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#rivals .rivals-mark { --mark: 40px; display: inline-grid; flex: none; place-items: center; width: var(--mark); height: var(--mark); border-radius: calc(var(--mark) * .28); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--frame-edge); color: var(--ink); }
#rivals .rivals-mark svg { width: 48%; height: 48%; fill: currentColor; }
#rivals .rivals-mark-claude { color: #d97757; }
#rivals .rivals-wordmark { display: block; aspect-ratio: 2087 / 753; background: var(--signal); -webkit-mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; }
/* High contrast repaints backgrounds as Canvas, which would hide the masked letters. */
@media (forced-colors: active) { #rivals :is(.rivals-wordmark, .rivals-stack .rivals-wordmark) { background: CanvasText; } }
/* Four lanes, one clock: four across, two by two on tablets. The receipt sits inside the card so a lane can fold into a row on a phone. */
#rivals .rivals-films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
#rivals .example-card { display: flex; flex-direction: column; height: 100%; }
#rivals .poster { container-type: inline-size; }
/* The films open unseen: each print carries only its maker's mark, in ink on the white print in either theme. */
#rivals .rivals-cover { display: grid; place-items: center; color: #171a19; }
#rivals .rivals-cover svg { width: 21cqi; height: 21cqi; fill: currentColor; }
#rivals .rivals-cover-claude { color: #d97757; }
#rivals .rivals-cover .rivals-wordmark { width: 38cqi; }
/* The print already carries the maker's mark, so the caption is the name alone. */
#rivals .rivals-name { display: grid; flex: 1; grid-template-rows: auto auto 1fr; margin-top: 18px; }
#rivals .film-title { margin-top: 0; line-height: 1.2; }
#rivals .rivals-by { display: block; margin-top: 3px; color: var(--ink-3); font: 500 13px/1.45 var(--sans); letter-spacing: normal; }
/* The time is the claim, so the figures carry it and the units step back. */
#rivals .rivals-made { display: block; grid-column: 1 / -1; align-self: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
#rivals .rivals-made-label { display: block; color: var(--ink-3); font: 600 13px/1.4 var(--sans); letter-spacing: -.008em; }
#rivals .rivals-made-val { display: block; margin-top: 8px; color: var(--ink-3); font: 500 clamp(14px, 1.1vw, 16px)/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
#rivals .rivals-made-val b { display: inline-block; color: var(--ink); font: 700 clamp(30px, 2.9vw, 44px)/1 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums; margin-right: .06em; }
#rivals .rivals-made-val b:not(:first-child) { margin-left: .14em; }
#rivals .rivals-ours :is(.film-title, .rivals-made-val b) { color: var(--signal-text); }
/* Four across leaves each poster about 300px wide, so the play button steps down to keep its proportion. */
@media (min-width: 1101px) {
  #rivals .play { left: 14px; bottom: 14px; width: 46px; height: 46px; }
  #rivals .play svg { width: 17px; height: 17px; }
}
/* At rest every film is already made; the script opts into the race and hides these again when it ends. */
#rivals .rivals-sheet, #rivals .rivals-nib, #rivals .rivals-run { display: none; }
#rivals.is-racing .rivals-sheet { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--paper); }
#rivals.is-racing .rivals-dial { color: var(--ink); font: 500 clamp(17px, 13cqi, 58px)/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#rivals.is-racing .rivals-run { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; height: 3px; background: var(--line); }
#rivals.is-racing .rivals-run i { display: block; height: 100%; background: var(--ink-4); transform: scaleX(var(--p, 0)); transform-origin: left; }
#rivals.is-racing .rivals-ours .rivals-run i { background: var(--signal); }
#rivals.is-racing .rivals-lane:not(.is-done) :is(.play, .rivals-made) { opacity: 0; }
/* A maker's time lands the moment its film does: the figures rise into place, a beat apart. */
#rivals.is-racing .rivals-lane.is-done .rivals-made-val b { animation: rivals-land 760ms var(--ease) both; }
#rivals.is-racing .rivals-lane.is-done .rivals-made-val b + b { animation-delay: 70ms; }
#rivals.is-racing .rivals-lane.is-done .rivals-made-label { animation: rivals-land-soft 520ms ease both; }
@keyframes rivals-land { from { opacity: 0; transform: translateY(.45em); filter: blur(4px); } }
@keyframes rivals-land-soft { from { opacity: 0; } }
/* The bill, drawn to scale. Every bar is its multiple of Ivan's price, and the dearer it is the longer it takes to draw. */
#rivals .rivals-cost { margin-top: clamp(46px, 5.4vw, 74px); }
#rivals .rivals-cost-label { margin: 0 0 6px; color: var(--ink-3); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
#rivals .rivals-bar { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) minmax(58px, auto); align-items: center; gap: clamp(14px, 2vw, 28px); padding-block: 18px; border-top: 1px solid var(--line); }
#rivals .rivals-bar-name { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-2); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
#rivals .rivals-bar-name .rivals-mark { --mark: 28px; }
#rivals .rivals-bar-name .rivals-wordmark { width: 72px; }
#rivals .rivals-ours .rivals-bar-name { color: var(--ink); }
#rivals .rivals-track { position: relative; display: block; height: 11px; }
#rivals .rivals-fill { position: absolute; inset-block: 0; left: 0; border-radius: 2px; background: var(--ink-4); transform-origin: left; }
#rivals .rivals-ours .rivals-fill { background: var(--signal); }
#rivals .rivals-bar[data-multiple="1"] { --draw: 340ms; }
#rivals .rivals-bar[data-multiple="1"] .rivals-fill { width: 5%; }
#rivals .rivals-bar[data-multiple="17"] { --draw: 1200ms; }
#rivals .rivals-bar[data-multiple="17"] .rivals-fill { width: 85%; }
#rivals .rivals-bar[data-multiple="20"] { --draw: 1400ms; }
#rivals .rivals-bar[data-multiple="20"] .rivals-fill { width: 100%; }
#rivals .rivals-bar-val { margin: 0; color: var(--ink); font: 700 clamp(20px, 1.85vw, 26px)/1.15 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; text-align: right; }
#rivals .rivals-ours .rivals-bar-val { color: var(--signal-text); }
#rivals .rivals-basis { margin: 14px 0 0; color: var(--ink-4); font: 400 13px/1.5 var(--sans); }
/* The answer to the headline's question, and the hand-off to the band below: the makers that take twenty minutes can call Ivan. */
#rivals .rivals-turn { margin-top: clamp(72px, 9vw, 132px); text-align: center; }
#rivals .rivals-turn-lede { max-width: 56ch; margin: 0 auto; color: var(--ink-2); font: 400 clamp(18px, 1.55vw, 22px)/1.5 var(--sans); text-wrap: balance; }
#rivals .rivals-turn-line { margin: clamp(14px, 1.6vw, 22px) 0 0; color: var(--ink); font: 800 clamp(34px, 5.4vw, 78px)/1 var(--sans); letter-spacing: -.055em; }
/* Vision: the manifesto inks in, the ribbon is drawn across the three drawings */
#home .manifesto { max-width: 11.6em; margin: 0; font: 800 clamp(40px, 6.4vw, 92px)/.96 var(--sans); letter-spacing: -.055em; text-wrap: balance; }
#home .vision-sub { max-width: 520px; margin: 30px 0 0; color: var(--ink-2); font: 400 clamp(18px, 1.55vw, 22px)/1.5 var(--sans); }
#home .paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(44px, 5.2vw, 76px); }
#home .path { display: flex; flex-direction: column; min-width: 0; }
#home .path-art { position: relative; aspect-ratio: 1000 / 563; }
#home .path-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#home .path:nth-child(1) .path-art img { translate: 0 6%; }
#home .path:nth-child(3) .path-art img { translate: 0 4%; }
#home .path-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 28px 0; border-left: 1px solid var(--line); }
#home .path:first-child .path-copy { padding-left: 0; border-left: 0; }
#home .path:last-child .path-copy { padding-right: 0; }
#home .path-copy h3 { margin: 0; font: 750 clamp(21px, 2.15vw, 31px)/1.15 var(--sans); letter-spacing: -.035em; }
#home .path-copy p { max-width: 30ch; margin: 12px 0 8px; color: var(--ink-2); font: 400 17px/1.5 var(--sans); }
#home .arrow { display: inline-flex; align-items: center; width: 56px; min-height: 48px; margin-top: auto; padding-top: 8px; color: var(--signal-text); font: 400 34px/1 var(--sans); text-decoration: none; }
#home .arrow:hover { color: var(--ink); }
#home .arrow:hover .arr { translate: 7px 0; }
#home .caps { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); align-items: center; min-height: 104px; margin-top: clamp(48px, 5vw, 72px); padding: 16px 24px; border: 1px solid var(--edge); border-radius: 14px; background: var(--paper); box-shadow: var(--sh-rest); transition: border-color 220ms ease, box-shadow 400ms var(--ease), background-color 320ms var(--ease); }
#home .caps:hover { box-shadow: var(--sh-lift); }
#home .caps:has(select:focus-visible) { border-color: var(--signal-text); }
#home .caps h3 { margin: 0; padding-right: 16px; font: 750 clamp(17px, 1.6vw, 23px)/1.2 var(--sans); letter-spacing: -.03em; }
#home .cap { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 6px 18px; border-left: 1px solid var(--line); cursor: pointer; }
#home .cap:last-child { padding-right: 0; }
#home .cap svg { flex: none; width: 24px; height: 24px; color: var(--ink-2); }
#home .cap-body { flex: 1; min-width: 0; }
#home .cap-label { display: block; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
#home .cap select { display: block; width: 100%; height: 30px; padding: 0 18px 0 0; border: 0; border-radius: 3px; appearance: none; -webkit-appearance: none; background: transparent var(--landing-select-arrow) right center / 14px no-repeat; color: var(--ink); font: 500 16px/1.4 var(--sans); cursor: pointer; }
/* The bar's menus (app.js, bindCapMenus). Where there is room the selects hand over to a segment button and a sheet in
   the top layer; on phones, and without script, the native selects stay. One paper glide follows the pointer along the
   bar and lifts to white under the open segment while the bar itself steps back to the second paper. */
#home .cap-trigger, #home .caps-glide { display: none; }
@media (min-width: 641px) {
  #home .caps.has-menus { position: relative; }
  #home .caps.has-menus > :is(h3, .cap) { position: relative; z-index: 1; }
  #home .caps.has-menus .cap { transition: border-color 200ms ease; }
  #home .caps.has-menus .cap select { display: none; }
  #home .caps.has-menus .cap.is-lit, #home .caps.has-menus .cap.is-lit + .cap { border-left-color: transparent; }
  #home .caps[data-open] { background: var(--paper-2); }
  #home .caps.has-menus .caps-glide { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: var(--glide-w, 0); height: var(--glide-h, 0); border-radius: 14px; background: var(--paper-2); opacity: 0; translate: var(--glide-x, 0) var(--glide-y, 0); pointer-events: none; transition: translate 480ms var(--ease), width 480ms var(--ease), height 480ms var(--ease), opacity 240ms ease, background-color 300ms ease, box-shadow 420ms var(--ease); }
  #home .caps.has-menus .caps-glide.is-on { opacity: 1; }
  #home .caps.has-menus .caps-glide.is-still { transition: none; }
  #home .caps.has-menus .caps-glide.is-raised { background: var(--cap-raise, var(--paper)); box-shadow: 0 0 0 1px var(--frame-edge), 0 1px 2px var(--landing-shadow-soft), 0 12px 30px -12px var(--landing-shadow-deep); }
  #home .caps.has-menus .cap-trigger { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 500 16px/1.4 var(--sans); letter-spacing: -.01em; text-align: left; cursor: pointer; }
  /* The whole segment is the button: icon and label answer the press too. */
  #home .cap-trigger::after { content: ""; position: absolute; inset: -12px -10px; border-radius: 14px; }
  #home .cap-trigger:focus-visible { outline: none; }
  #home .cap-trigger:focus-visible:not([data-quiet])::after { outline: 1.5px solid var(--signal-text); outline-offset: 0; }
  #home .cap-value { flex: 1; min-width: 0; margin-block: -3px; padding-block: 3px; overflow: hidden; }
  #home .cap-value-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #home .caps.has-menus .cap-trigger .icon-caret { width: 16px; height: 16px; color: var(--ink-3); transition: rotate 460ms var(--ease), translate 260ms var(--ease), color 200ms ease; }
  #home .caps.has-menus .cap:hover .cap-trigger .icon-caret { color: var(--ink); translate: 0 1.5px; }
  #home .caps.has-menus .cap-trigger[aria-expanded="true"] .icon-caret { color: var(--signal-text); rotate: 180deg; translate: none; }
}
#home .cap-menu { position: fixed; inset: auto; display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; --sheet: var(--cap-sheet, var(--paper)); border: 1px solid var(--cap-sheet-edge, var(--frame-edge)); border-radius: 18px; background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px var(--landing-shadow-soft), 0 8px 20px -10px var(--landing-shadow-soft), 0 34px 70px -26px var(--landing-shadow-deep); font: 400 15px/1.4 var(--sans); }
#home .cap-menu:not(:popover-open) { display: none; }
#home .cap-menu [hidden] { display: none; }
#home .cap-search { display: flex; flex: none; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--ink-4); cursor: text; transition: color 200ms ease; }
#home .cap-search:focus-within { color: var(--ink-2); }
#home .cap-search .icon-search { flex: none; }
#home .cap-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 15px/1 var(--sans); letter-spacing: -.01em; }
#home .cap-search input::placeholder { color: var(--ink-4); opacity: 1; }
#home .cap-scroll { position: relative; flex: 1 1 auto; min-height: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
#home .cap-list:focus { outline: 0; }
#home .cap-group { margin-top: 2px; }
/* Each region's name stays put while its languages pass under it. */
#home .cap-caption { position: sticky; top: -6px; z-index: 1; margin: 0 -6px; padding: 14px 18px 6px; background: var(--sheet); color: var(--ink-4); font: 600 12px/1.3 var(--sans); letter-spacing: -.004em; }
#home .cap-option { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink); cursor: pointer; transition: background-color 140ms ease; }
#home .cap-option:has(.cap-option-hint) { gap: 14px; min-height: 58px; }
#home .cap-option.is-active { background: var(--paper-2); }
#home .cap-option.is-chosen { animation: cap-chosen 340ms ease-out; }
#home .cap-option-words { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
#home .cap-option-name { overflow: hidden; font: 500 15px/1.35 var(--sans); letter-spacing: -.012em; white-space: nowrap; text-overflow: ellipsis; }
#home .cap-option[aria-selected="true"] .cap-option-name { font-weight: 650; }
#home .cap-option-hint { color: var(--ink-3); font: 400 13px/1.35 var(--sans); letter-spacing: -.004em; }
#home .cap-option-native { flex: 0 100 auto; min-width: 3em; overflow: hidden; color: var(--ink-3); font: 400 14px/1.35 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
#home .cap-option > :is(.icon-landscape, .icon-portrait) { flex: none; color: var(--ink-2); }
/* The tick is written, not switched on: the pen draws it in and lifts it off. */
#home .cap-option .icon-check { flex: none; color: var(--signal-text); stroke-width: 2; }
#home .cap-option .icon-check path { stroke-dasharray: 21; stroke-dashoffset: 21; transition: stroke-dashoffset 380ms cubic-bezier(.6, 0, .25, 1); }
#home .cap-option:not([aria-selected="true"]) .icon-check path { transition-duration: 120ms; }
#home .cap-option[aria-selected="true"] .icon-check path { stroke-dashoffset: 0; }
#home .cap-empty { margin: 0; padding: 22px 12px 26px; color: var(--ink-3); font: 400 14px/1.45 var(--sans); text-align: center; }
@keyframes cap-chosen { 35% { background-color: color-mix(in srgb, var(--signal) 13%, var(--sheet)); } }
@media (prefers-reduced-motion: reduce) {
  #home .caps-glide, #home .cap-trigger .icon-caret, #home .cap-option .icon-check path { transition: none; }
}
#home .pm { position: relative; flex: none; width: 18px; height: 18px; }
#home .pm::before, #home .pm::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8.25px; height: 1.5px; border-radius: 2px; background: currentColor; transition: rotate 300ms var(--ease); }
#home .pm::after { rotate: 90deg; }
#home details[open] > summary .pm::after { rotate: 0deg; }
/* Agents: the band opens like a lens; the request card floats above it in three dimensions and types itself, and the film it asked for lands on the card's corner. */
#home .night { position: relative; margin-top: var(--chapter); background: var(--night); color: #fff; overflow: clip; }
#home .night::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 78% 40%, #f044201a, transparent 55%), radial-gradient(90% 70% at 10% 100%, #ffffff0d, transparent 60%); }
#home .night-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(36px, 5vw, 80px); padding-block: clamp(84px, 10vw, 148px); }
#home .night .h2 { color: #fff; }
#home .dev-p { max-width: 30em; margin: 20px 0 30px; color: #eff2f0; font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--sans); }
/* Two ways on: the docs, as the band's one white pill, and a key. */
#home .dev-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
#home .dev-btn { display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 0 8px 0 24px; border-radius: 999px; background: #fff; color: #171a19; font: 600 15px/1 var(--sans); letter-spacing: -.006em; text-decoration: none; box-shadow: 0 1px 2px #0000004d, 0 16px 32px -16px #000000b3; transition: background-color 200ms ease, transform 200ms var(--ease); }
#home .dev-btn .arr { display: grid; place-items: center; width: 34px; height: 34px; overflow: clip; border-radius: 50%; background: var(--signal); color: #171a19; font: 500 17px/1 var(--sans); box-shadow: inset 0 1px 0 #ffffff47; }
#home .dev-btn:hover { background: #ecece8; color: #171a19; transform: translateY(-1px); }
#home .dev-btn:hover .arr > i { --through: 130%; animation: arrow-e 560ms both; }
#home .dev-btn:active { transform: translateY(0) scale(.98); }
#home .dev-link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font: 500 16px/1.5 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: #ffffff66; transition: text-decoration-color 200ms ease; }
#home .dev-link:hover { color: #fff; text-decoration-color: #fff; }
#home :is(.dev-btn, .dev-link):focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 999px; }
/* Where Ivan goes next, said the way a product page says it: the three marks in a row, not a sentence. Nothing here is a link until the connector exists. */
#home .dev-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(22px, 2.4vw, 34px); margin-top: clamp(38px, 4vw, 58px); padding-top: 24px; border-top: 1px solid #ffffff29; }
#home .dev-apps-lede { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #93a69c; font: 400 14.5px/1.4 var(--sans); white-space: nowrap; }
#home .dev-apps-lede::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--signal); border-radius: 50%; }
#home .dev-apps-list { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(22px, 2.2vw, 32px); margin: 0; padding: 0; list-style: none; }
#home .dev-apps-list li { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 600 17px/1 var(--sans); letter-spacing: -.014em; }
#home .dev-apps-list svg { flex: none; width: 21px; height: 21px; fill: currentColor; }
#home .stage { position: relative; min-width: 0; perspective: 1600px; }
#home .code { position: relative; min-width: 0; border: 1px solid #4a5450; border-radius: 12px; background: linear-gradient(180deg, #1f2724, var(--night-2)); box-shadow: 0 1px 0 #ffffff0f inset, 0 40px 90px -20px #000000b3, 0 0 0 1px #0000004d; transform: rotateY(-6deg) rotateX(2deg); transform-origin: 30% 50%; transition: transform 1100ms var(--ease), box-shadow 700ms var(--ease); }
#home .code:hover { transform: rotateY(0deg) rotateX(0deg) translateY(-4px); box-shadow: 0 1px 0 #ffffff14 inset, 0 60px 110px -20px #000000cc, 0 0 0 1px #0000004d; }
#home .code-head { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 12px 0 20px; border-bottom: 1px solid #3c4842; font: 400 13px/1.4 var(--mono); }
#home .code-tab { display: flex; align-items: center; height: 100%; margin-bottom: -1px; border-bottom: 1px solid #f66a49; }
#home .copy { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 8px; color: #f7faf8; font: 400 13px/1.4 var(--sans); }
#home .copy:hover { color: #ff9b82; }
#home .code pre { margin: 0; padding: 22px 22px 26px; overflow: auto; color: #e0e9e4; font: 400 clamp(12px, 1vw, 14px)/1.85 var(--mono); }
/* A long line wraps under a hanging indent rather than running off a narrow card. */
#home .cl { display: block; padding-left: 6ch; text-indent: -6ch; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The request leaves along the card's foot, and the film it asked for lands on the card's corner: a print, already drawing itself. */
#home .stage .code pre { padding-bottom: 62px; }
#home .code-run { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; border-radius: 0 0 11px 11px; pointer-events: none; }
#home .code-run i { display: block; height: 100%; background: var(--signal); opacity: 0; transform-origin: left; }
#home .reply { position: relative; z-index: 2; width: 54%; margin: -74px clamp(-26px, -1.5vw, -8px) 0 auto; rotate: 2.2deg; }
#home .reply-print { position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; border: 1px solid #ffffff38; border-radius: 8px; background: #fff; box-shadow: 0 2px 4px #0000004d, 0 34px 70px -20px #000000cc; }
#home .reply-print img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#home .reply .dur { right: 10px; bottom: 10px; }
#home .reply figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; color: #93a69c; font: 400 12.5px/1.5 var(--mono); }
#home .reply-ok { display: inline-flex; align-items: center; gap: 8px; color: #e0e9e4; }
#home .reply-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
/* Questions, in the open */
#home .faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 48px; }
#home .faq-intro { align-self: start; position: sticky; top: 112px; }
#home .faq-title { margin: 0; font: 800 clamp(30px, 3.3vw, 48px)/1.05 var(--sans); letter-spacing: -.045em; }
#home .faq-kicker { display: block; margin-top: 14px; color: var(--ink-2); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
#home .qa { border-top: 1px solid var(--line); }
#home .qa:last-child { border-bottom: 1px solid var(--line); }
#home .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 14px 0; list-style: none; cursor: pointer; font: 500 clamp(17px, 1.45vw, 20px)/1.4 var(--sans); letter-spacing: -.015em; transition: color 160ms ease; }
#home .qa summary::-webkit-details-marker { display: none; }
#home .qa summary:hover { color: var(--signal-text); }
#home .qa .pm { width: 20px; height: 20px; }
#home .qa .pm::before, #home .qa .pm::after { top: 9.25px; }
#home .qa p { max-width: 640px; margin: -2px 0 28px; color: var(--ink-2); font: 400 16px/1.7 var(--sans); }
#home :is(.qa p, .final-also) a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-2); transition: color 160ms ease, text-decoration-color 200ms ease; }
#home :is(.qa p, .final-also) a:hover { color: var(--signal-text); text-decoration-color: currentColor; }
/* Finale returns at hero scale */
/* The closing line is written by hand in Kalam (landing-hand.js); it rests as the same words set in
   the same face, so without script or motion it reads exactly as written. The pen can reach past
   the page edge on phones, where #home's own sideways clip keeps the page from scrolling. */
#home .final { padding-block: clamp(128px, 15vw, 224px) clamp(104px, 11vw, 168px); text-align: center; }
#home .h-final { position: relative; margin: 0; font: 700 clamp(50px, 7.95vw, 116px)/1.26 "Kalam Line", "Comic Sans MS", "Chalkboard SE", cursive; letter-spacing: 0; }
#home .h-final .br-phone { display: none; }
/* "as text." never splits across lines. */
#home .h-final .keep { white-space: nowrap; }
#home .h-final .hand-word { display: inline-block; overflow: visible; }
#home .h-final .hand-ink { fill: currentColor; }
/* A felt-tip marker, drawn lying flat; landing-hand.js tips it and moves it with the nib. */
#home .h-final .hand-pen { position: absolute; left: 0; top: 0; width: 2.3em; aspect-ratio: 200 / 24; opacity: 0; pointer-events: none; }
#home .h-final .hand-pen svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 50%; will-change: transform; }
#home .h-final .hand-shadow { filter: blur(3px); }
#home .h-final .hand-shadow path { fill: var(--landing-shadow-deep); }
#home .h-final .pen-body, #home .h-final .pen-ink { fill: var(--ink); }
#home .h-final .pen-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
#home .h-final :is(.pen-collar, .pen-nib) { stroke: var(--ink); stroke-width: 1; }
#home .h-final .pen-collar { fill: var(--ink-4); }
#home .h-final .pen-nib { fill: var(--paper-2); }
#home .h-final .pen-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
#home .btn { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 58px; margin-top: clamp(34px, 3.4vw, 50px); padding: 0 30px 0 32px; border-radius: 99px; background: var(--signal); color: #171a19; font: 700 16px/1 var(--sans); text-decoration: none; box-shadow: 0 1px 0 #171a192e, 0 12px 28px -12px #f04420b3, inset 0 1px 0 #ffffff4d; transition: background-color 200ms ease, transform 200ms var(--ease), box-shadow 200ms ease; }
#home .btn:hover { background: var(--signal-hover); color: #171a19; transform: translateY(-1px); box-shadow: 0 2px 0 #171a191f, 0 20px 36px -12px #f04420cc, inset 0 1px 0 #ffffff4d; }
#home .btn:active { transform: translateY(0) scale(.98); }
#home .btn .arr { font: 400 24px/1 var(--sans); }
#home .btn:hover .arr { translate: 4px 0; }
#home .final-also { margin: 22px 0 0; color: var(--ink-3); font: 400 15px/1.5 var(--sans); }
#home .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 36px; min-height: 96px; border-top: 1px solid var(--line); }
#home .foot-line { margin: 0 auto 0 -14px; color: var(--ink-3); font: 500 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
#home .foot nav { display: flex; gap: 28px; }
#home .foot a:not(.wordmark) { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font: 400 14px/1.4 var(--sans); text-decoration: none; }
#home .foot a:not(.wordmark):hover { color: var(--signal-text); }
@media (max-width: 1100px) {
  #home .foot > a:last-child { margin-left: auto; }
  #home .foot-line { flex-basis: 100%; order: 4; margin: -14px 0 22px; }
  #rivals .rivals-films { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(36px, 4.4vw, 48px); }
  .page[data-view="home"] .wordmark { margin-right: 10px; }
  #home .caps { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); padding-inline: 16px; }
  #home .cap { gap: 10px; padding-inline: 12px; }
  #home .cap svg { width: 20px; height: 20px; }
  #home .cap select, #home .caps.has-menus .cap-trigger { font-size: 14px; }
  #home .path-copy { padding-inline: 18px; }
}
@media (max-width: 860px) {
  #home .hero { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the art follows the box closely, so the line takes its own row. */
  html[data-visitor] #home .hero-visitor { position: static; margin: 12px 6px 0; }
  #home .h1 { font-size: clamp(44px, 10.2vw, 84px); }
  #home .hero-art { margin: 36px 0 0; }
  #home .example { gap: 16px; }
  #home .play { left: 14px; bottom: 14px; width: 48px; height: 48px; }
  #home .play svg { width: 20px; height: 20px; }
  #home .dur { right: 12px; bottom: 14px; font-size: 11px; }
  #home .film-title { font-size: 18px; }
  #home .example-facts { padding-top: 14px; }
  #home .example-facts dd { font-size: 19px; }
  #rivals .rivals-films { column-gap: 18px; }
  #home .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  #home .caps h3 { grid-column: 1 / -1; padding: 2px 0 14px; border-bottom: 1px solid var(--line); }
  #home .caps .cap:nth-of-type(odd) { padding-left: 0; border-left: 0; }
  #home .night-inner { grid-template-columns: minmax(0, 1fr); }
  #home .code, #home .code:hover { transform: none; }
  #home .reply { width: min(54%, 380px); }
  #home .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #home .faq-intro { position: static; }
  #home .head { flex-direction: column; align-items: start; gap: 18px; }
}
/* Phones: a native-app surface. A translucent sticky bar, large titles, swipeable cards, a grouped settings list,
       full-width actions, 17px text (inputs never zoom) and 44px touch targets. */
@media (max-width: 640px) {
  html:has(#home:not([hidden])) { scroll-padding-top: 72px; }
  .page[data-view="home"] { --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); --chapter: 84px; -webkit-tap-highlight-color: transparent; }
  .page[data-view="home"] .bar { padding-top: env(safe-area-inset-top); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .page[data-view="home"] .bar-inner { height: 56px; gap: 4px; }
  .page[data-view="home"] .wordmark { flex-shrink: 0; margin-right: 0; }
  .page[data-view="home"] .bar .wordmark-logo { width: 74px; }
  .page[data-view="home"] .landing-nav { display: none; }
  .page[data-view="home"] .bar-links { flex: 0 1 auto; min-width: 0; margin-left: auto; gap: 2px; }
  .page[data-view="home"] .bar-link { width: 36px; padding: 0; justify-content: center; }
  .page[data-view="home"] .bar-link span { display: none; }
  .page[data-view="home"] #account-button { display: block; flex: 1 1 0; width: auto; min-width: 0; max-width: 96px; padding: 0 10px; overflow: hidden; font-size: 12.5px; line-height: 36px; white-space: nowrap; text-overflow: ellipsis; }
  .page[data-view="home"] .landing-header-cta { flex-shrink: 0; height: 38px; margin-left: 4px; padding: 0 5px 0 14px; gap: 10px; font-size: 14px; white-space: nowrap; }
  .page[data-view="home"] .landing-header-cta .arr { width: 26px; height: 26px; font-size: 14px; }
  .page[data-view="home"] .profile { width: 34px; height: 34px; margin-left: 10px; }
  .page[data-view="home"] .profile::before { left: -10px; }
  #home .hero { padding-top: 20px; }
  #home .h1 { font-size: clamp(34px, 11.8vw, 54px); line-height: .98; letter-spacing: -.055em; }
  #home .hero-deck { font-size: 23px; }
  #home .promise { margin-top: 16px; font-size: 17px; }
  html:has(#home:not([hidden])) :is(input, select, textarea) { font-size: 16px; }
  html:has(#home:not([hidden])) #home .cap select { font-size: 17px; }
  html:has(#home:not([hidden])) #home #hero-topic { font-size: 16px; }
  #home .hero-start { margin-top: 24px; }
  #home .hero-start-box { padding-left: 16px; }
  #home .caret { left: 15px; }
  #home .hero-art { margin: 34px 0 0; }
  #home .head { margin-bottom: 20px; }
  #home .h2 { font-size: clamp(31px, 8.6vw, 38px); line-height: 1.04; letter-spacing: -.045em; }
  #home .films { display: flex; align-items: stretch; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  #home .films::-webkit-scrollbar { display: none; }
  #home .example { flex: 0 0 86%; gap: 14px; scroll-snap-align: start; }
  #home .poster { border-color: var(--line); border-radius: 16px; }
  #home .play { left: 12px; bottom: 12px; width: 44px; height: 44px; }
  #home .play svg { width: 19px; height: 19px; }
  #home .dur { right: 12px; bottom: 14px; padding: 3px 7px; border-radius: 6px; font-size: 11px; }
  #home .film-title { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
  #home .example-facts { padding-top: 12px; }
  #home .example-facts dd { font-size: 17px; }
  #rivals .rivals-films { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #rivals .example { padding-block: 16px; border-top: 1px solid var(--line); }
  #rivals .example:first-child { border-top: 0; padding-top: 0; }
  #rivals .example-card { display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; column-gap: 14px; height: auto; }
  #rivals .rivals-name { margin-top: 0; }
  #rivals .film-title { margin-top: 0; }
  #rivals .rivals-made { margin-top: 10px; padding-top: 0; border-top: 0; }
  #rivals .play { left: 10px; bottom: 10px; width: 36px; height: 36px; }
  #rivals .play svg { width: 16px; height: 16px; }
  #rivals .rivals-made-label { font-size: 12.5px; }
  #rivals .rivals-made-val { margin-top: 4px; font-size: 13px; }
  #rivals .rivals-made-val b { font-size: 24px; }
  #rivals .rivals-brief-text { font-size: 12px; }
  #rivals .rivals-brief-card { padding: 14px 16px 16px; }
  #rivals .rivals-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding-block: 14px; }
  #rivals .rivals-track { grid-column: 1 / -1; order: 3; }
  #home .manifesto { font-size: clamp(38px, 10.8vw, 50px); line-height: 1; }
  #home .vision-sub { margin-top: 16px; font-size: 17px; }
  #home .paths { display: flex; gap: 12px; margin: 32px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  #home .paths::-webkit-scrollbar { display: none; }
  #home .path { flex: 0 0 82%; overflow: clip; border-radius: 22px; background: var(--paper-2); scroll-snap-align: start; }
  #home .path-art { margin: 8px 8px 0; }
  #home .path .path-copy, #home .path:first-child .path-copy, #home .path:last-child .path-copy { padding: 6px 20px 18px; border-left: 0; }
  #home .path-copy h3 { font-size: 22px; }
  #home .path-copy p { margin: 6px 0 14px; font-size: 16px; }
  #home .arrow { align-self: flex-end; justify-content: center; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--paper); font-size: 22px; }
  #home .caps { display: block; min-height: 0; margin-top: 52px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #home .caps h3 { margin-bottom: 12px; padding: 0; border: 0; font-size: 22px; }
  #home .caps .cap, #home .caps .cap:nth-of-type(n) { position: relative; gap: 14px; min-height: 54px; padding: 0 16px; border-left: 0; background: var(--paper-2); }
  #home .caps .cap:nth-of-type(1) { border-radius: 18px 18px 0 0; }
  #home .caps .cap:last-child { border-radius: 0 0 18px 18px; }
  #home .caps .cap + .cap::before { content: ""; position: absolute; left: 52px; right: 0; top: 0; height: 1px; background: var(--line); }
  #home .cap svg { width: 22px; height: 22px; color: var(--ink); }
  #home .cap-body { display: flex; align-items: center; gap: 12px; }
  #home .cap-label { flex: none; color: var(--ink); font: 400 17px/1.4 var(--sans); letter-spacing: 0; }
  #home .cap select { flex: 1; min-width: 0; height: 54px; padding-right: 22px; text-align: right; text-align-last: right; color: var(--ink-3); font-size: 17px; font-weight: 400; background-image: var(--landing-select-disclosure); background-size: 16px; }
  #home .hero-layer { margin-bottom: 12px; font-size: 14px; }
  #home .hero-attach { width: 44px; }
  #rivals .rivals-turn { margin-top: 64px; }
  #rivals .rivals-turn-lede { font-size: 17px; }
  #rivals .rivals-turn-line { font-size: clamp(34px, 10.4vw, 46px); }
  #home .night-inner { gap: 40px; padding-block: 72px; }
  #home .night .h2 { font-size: clamp(32px, 9.2vw, 42px); }
  #home .dev-p { margin: 16px 0 22px; font-size: 17px; }
  #home .dev-acts { gap: 6px 22px; }
  #home .dev-btn { height: 52px; font-size: 16px; }
  #home .code { border-radius: 16px; }
  #home .code pre { padding: 16px 14px 20px; font-size: clamp(10.5px, 3vw, 12px); }
  #home .stage .code pre { padding-bottom: 54px; }
  /* A phone has no room for a seventy-character line, so the request wraps instead of scrolling sideways. */
  #home .code .cl { width: auto; }
  #home .reply { width: 68%; margin: -58px -4px 0 auto; }
  #home .reply figcaption { font-size: 11.5px; }
  #home .final-also { margin-top: 18px; }
  #home .foot-line { margin: 0; }
  #home .faq { gap: 16px; }
  #home .faq-title { font-size: 31px; }
  #home .qa summary { min-height: 60px; font-size: 17px; }
  #home .qa p { font-size: 16px; }
  #home .final { padding-block: 104px 72px; }
  #home .h-final { font-size: clamp(46px, 13.4vw, 61px); }
  #home .h-final .br-phone { display: inline; }
  #home .btn { display: flex; width: 100%; min-height: 56px; margin-top: 32px; font-size: 17px; }
  #home .foot { flex-wrap: wrap; column-gap: 20px; row-gap: 0; padding-block: 16px calc(16px + env(safe-area-inset-bottom)); }
  #home .foot nav { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 0 20px; }
}
/* Touch screens answer a press, not a hover. */
@media (hover: none) {
  #home .cap select { font-size: 16px; }
  .page[data-view="home"] .landing-header-cta, #home .btn, #home .example-card, #home .arrow { transition: scale 180ms var(--ease), background-color 180ms ease; }
  .page[data-view="home"] .landing-header-cta:active, #home .btn:active, #home .arrow:active { scale: .96; }
  #home .example-card:active { scale: .985; }
}

/* Adapt the live controls and preserve the lab's figure reset without inline styles. Drawings blend with the sheet they sit on. */
#home .clip, #home .path-art { mix-blend-mode: var(--landing-art-blend); }
#home .clip img, #home .path-art img { filter: var(--landing-art-filter) brightness(1.012); mix-blend-mode: normal; }
#home :is(.play, .dur) { background: #171a19; color: #fff; }
#home .code code { display: block; font: inherit; white-space: normal; }
#home .btn, #home .btn:hover, #home .poster-go { color: #171a19; }
@media (max-width: 640px) {
  .page[data-view="home"] { --bar-h: 56px; }
  .page[data-view="home"] #operator-lock { display: none; }
}
html[data-theme="dark"] #home { --landing-art-blend: screen; --cap-raise: #2c3330; --cap-sheet: #1e2321; --cap-sheet-edge: #333a37; }
html[data-theme="dark"] #home::after { mix-blend-mode: screen; opacity: .045; }
html[data-theme="dark"] .page[data-view="home"] .landing-header-cta:hover { background: var(--ink-2); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) #home { --landing-art-blend: screen; --cap-raise: #2c3330; --cap-sheet: #1e2321; --cap-sheet-edge: #333a37; }
  html:not([data-theme]) #home::after { mix-blend-mode: screen; opacity: .045; }
  html:not([data-theme]) .page[data-view="home"] .landing-header-cta:hover { background: var(--ink-2); }
}
html:has(#home:not([hidden])), body:has(#home:not([hidden])) { overflow-x: clip; }
html:has(#home:not([hidden])) { scroll-behavior: smooth; }

/* Details. Type is never faked, and reading lines never end on one word. */
#home { font-synthesis: none; font-kerning: normal; }
#home p { text-wrap: pretty; }
/* The question box: the placeholder steps back while you type, so the caret leads. */
#home #hero-topic::placeholder { transition: color 240ms ease; }
#home #hero-topic:focus::placeholder { color: var(--ink-4); }
/* One arrow grammar for the three "go" actions: the arrow leaves through its edge and comes back in. */
.page[data-view="home"] .arr > i { display: block; font-style: normal; }
.page[data-view="home"] :is(.landing-header-cta, .btn) .arr { overflow: clip; }
.page[data-view="home"] .landing-header-cta:hover .arr { translate: none; }
.page[data-view="home"] .landing-header-cta:hover .arr > i { --through: 125%; animation: arrow-ne 560ms both; }
#home .btn:hover .arr { translate: none; }
#home .btn:hover .arr > i { --through: 130%; animation: arrow-e 560ms both; }
#home .hero-start-go { overflow: clip; }
#home .hero-start-go:hover svg { --through: 175%; translate: none; animation: arrow-ne 560ms both; }
/* Footer links are underlined by a pen that draws in from the left and lifts off to the right. */
#home .foot a:not(.wordmark) { background: linear-gradient(currentColor, currentColor) no-repeat right 0 bottom 12px / 0 1px; transition: color 160ms ease, background-size 420ms var(--ease); }
#home .foot a:not(.wordmark):hover { background-position: left 0 bottom 12px; background-size: 100% 1px; }
/* A pressed print gives a little under the finger. */
#home .poster { transition: box-shadow 500ms var(--ease), transform 500ms var(--ease), border-color 200ms ease, scale 220ms var(--ease); }
#home .example-card:active .poster { scale: .985; }
#home .cap svg { transition: color 200ms ease; }
#home .cap:hover svg, #home .cap:focus-within svg { color: var(--signal-text); }
/* Answers glide open and closed instead of jumping (where the browser can size to auto). */
@supports (interpolate-size: allow-keywords) {
  #home { interpolate-size: allow-keywords; }
  #home details::details-content { block-size: 0; overflow-y: clip; transition: block-size 480ms var(--ease), content-visibility 480ms allow-discrete; }
  #home details[open]::details-content { block-size: auto; }
}
/* The hero sheet turns a degree or two toward the pointer; the blank sheet beneath drifts the other way. */
#home .face { transform: perspective(1400px) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg)); transition: transform 1100ms var(--ease); }
#home .hero-sheet::before { translate: var(--htx, 0px) var(--hty, 0px); transition: translate 1300ms var(--ease); }
/* The request, lightly inked: strings warm, flags and punctuation stepped back. */
#home .code .tk-c { color: #fff; }
#home .code .tk-f { color: #93a69c; }
#home .code .tk-p { color: #6f827a; }
#home .code .tk-k { color: #d3ded8; }
#home .code .tk-s { color: #ffc2b0; }
#home .code .tk-v { color: #ff8f73; }
#home .copy.is-copied { color: #ffc2b0; }
#home .copy.is-copied::before { content: ""; width: 10px; height: 5px; margin: -3px 1px 0 2px; border: solid currentColor; border-width: 0 0 1.6px 1.6px; rotate: -45deg; animation: pop 380ms var(--ease) both; }
/* A desk lamp follows the pointer across the night band. */
#home .night-inner { z-index: 1; }
#home .night::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 40%), #f044201f, transparent 70%); opacity: 0; transition: opacity 700ms ease; }
#home .night.is-lit::after { opacity: 1; }