/* The styles of index.html and de/index.html, one sheet for both languages. */
/* Buero (version 3 since 11 Oct 2026): fewer words, more pictures (REFERENCES.md, "the bar,
   since 11 Oct 2026"). Every idea is one picture drawn from the same five
   marks (v3.js), with a title and at most one grey line beside it. The
   hero is a schematic of the product, the steps are tabs with one picture
   at a time, the capabilities a grid of pictograms. The CI is version 1's:
   white, Geist, 0.5px hairlines, square corners, one orange, and orange is
   only ever you. */
:root {
  --bg: #fff;
  --ink: #0a0a0a;
  --muted: #767676;        /* 4.5:1 on white, the lightest grey that may carry words */
  --faint: #a8a8a8;
  --hair: #8c8c8c;
  --hair-soft: #d4d4d4;
  --grid: rgb(140 140 140 / 0.2);
  --inset: #f5f5f5;
  --accent: #f54e00;       /* black on it is 5.6:1 */
  --accent-hover: #ff6a1a;
  --col: min(1120px, calc(100% - 32px));
  --film: min(960px, calc(100vw - 64px));   /* the reel's width; the nav matches it at the top */
  --nav-top: var(--film);
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px/1.45 "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
.wrap { width: var(--col); margin-inline: auto; }
section[id] { scroll-margin-top: 88px; }
.mono { font-family: var(--mono); letter-spacing: 0.06em; }

/* ── Nav: pure type, no cells and no lines. At the top it is clear, a size
   larger, and as wide as the film (--nav-top; elsewhere 960px). As the page
   moves, assets/nav.js sets --p from 0 to 1 with the scroll, and the bar
   spreads to the content column, steps down a size and takes on a light
   white veil, in step with the film. Scrolling back undoes it. Always shown. */
.nav {
  --p: 0;
  --w0: var(--nav-top, min(960px, 100% - 64px));
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(32px - 4px * var(--p));
  height: calc(80px - 20px * var(--p));
  padding-inline: calc((100% - (var(--w0) + (var(--col) - var(--w0)) * var(--p))) / 2);
  font-size: calc(15px - 2px * var(--p));
  background: rgb(255 255 255 / calc(0.55 * var(--p)));
  -webkit-backdrop-filter: saturate(calc(1 + 0.8 * var(--p))) blur(calc(20px * var(--p)));
  backdrop-filter: saturate(calc(1 + 0.8 * var(--p))) blur(calc(20px * var(--p)));
}
.nav a { display: flex; align-items: baseline; flex: none; white-space: nowrap; text-decoration: none; }
.nav .home { align-self: center; margin-right: auto; }
/* The wordmark, assets/brand/buero-wordmark.svg. */
.nav .home svg { display: block; width: auto; height: calc(19px - 4px * var(--p)); }
.nav .link { gap: 5px; }
.nav .link small { font: 0.7em/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); transition: color 0.2s; }
@media (hover: hover) { .nav .link:hover small { color: var(--ink); } }
.nav .link[aria-current="page"] small { color: var(--accent); }
/* The one call to act: the same type, underlined in the one orange. */
.nav .wait {
  text-decoration: underline 1px var(--accent);
  text-underline-offset: 5px;
  transition: text-decoration-thickness 0.2s;
}
@media (hover: hover) { .nav .wait:hover { text-decoration-thickness: 2px; } }
@media (max-width: 480px) {
  .nav { gap: 18px; height: calc(64px - 8px * var(--p)); font-size: 14px; }
  .nav .home svg { height: 17px; }
  .nav .link small { display: none; }
}

/* Two-tone headings: the claim in ink, its second half in grey. */
.h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -0.035em; }
.h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.02em; }
.h1 span, .h2 span { display: block; color: var(--faint); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 16px;
  border: 0.5px solid var(--hair);
  background: transparent;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
@media (hover: hover) {
  .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn.ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
}

/* A section boundary: a hairline. */
.rule { position: relative; border-top: 0.5px solid var(--hair); }

/* ── The pictures (drawn by v3.js) ─────────────────────────────────────── */
.pic svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.pic svg * { vector-effect: non-scaling-stroke; }
svg .s { fill: none; stroke: currentColor; stroke-width: 1; }
svg .d { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 3; }
svg .h { fill: var(--bg); stroke: currentColor; stroke-width: 1; }
svg .f { fill: currentColor; stroke: none; }
svg .o { color: var(--accent); }
svg .g { color: var(--faint); }
/* Labels stay ~9px on screen whatever the picture's scale (--k, v3.js). */
svg .lbl { font: 400 calc(9px * var(--k, 1)) / 1 var(--mono); letter-spacing: 0.06em; fill: var(--muted); stroke: none; }
svg .lbl.ink { fill: var(--ink); }
svg .lbl.o { fill: var(--accent); }
/* The model (v3-model.js): glass a shade darker than paper, hairlines for
   mullions and floor edges, a heavier line for what changed. */
svg .glass { fill: #f0f0f0; stroke: currentColor; stroke-width: 0.5; }
svg .shade { fill: rgb(0 0 0 / 0.055); stroke: none; }
svg .thin { stroke-width: 0.5; }
svg .hl { stroke-width: 1.6; }
svg .dash { stroke-dasharray: 3 3; }
svg.model polygon, svg.model polyline { stroke-linejoin: round; }
svg .q { font: 400 17px/1 "Geist", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; fill: var(--ink); }
svg .bt { font: 400 11px/1 "Geist", ui-sans-serif, system-ui, sans-serif; fill: var(--ink); }
/* The cards in 01: a line of Geist and lines of mono, fixed in size. */
svg .ct { font: 400 12px/1 "Geist", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; fill: var(--ink); }
svg .cm { font: 400 8px/1 var(--mono); letter-spacing: 0.06em; fill: var(--muted); }
svg .cm.o { fill: var(--accent); }
@media (max-width: 720px) { svg .more { display: none; } }

/* Motion: .a fades in at --at once its picture runs; .x leaves at --out,
   .dim greys out at --out; .flow marches; .grow widens at --g. A picture
   marked .end shows its last frame (reduced motion, or a still). */
.js .a { opacity: 0; }
.run .a { animation: v3in 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--at, 0s) both; }
.run .x { animation: v3out 0.4s ease var(--out, 0s) forwards; }
.run .a.x { animation: v3in 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--at, 0s) both, v3out 0.4s ease var(--out, 0s) forwards; }
.run .dim { animation: v3dim 0.5s ease var(--out, 0s) forwards; }
.run .a.dim { animation: v3in 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--at, 0s) both, v3dim 0.5s ease var(--out, 0s) forwards; }
.run .flow { animation: v3march 1.1s linear infinite; }
.run .a.flow { animation: v3in 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--at, 0s) both, v3march 1.1s linear infinite; }
svg .grow { transform-box: fill-box; transform-origin: center; }
/* .pop opens out of a point (its inline transform-origin) like a window. */
svg .pop { transform-box: view-box; }
.run .a.pop { animation: v3pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--at, 0s) both; }
.run .a.x.pop { animation: v3pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--at, 0s) both, v3out 0.35s ease var(--out, 0s) forwards; }
@keyframes v3pop { from { opacity: 0; transform: scale(0.06); } to { opacity: 1; transform: scale(1); } }
.run .grow { animation: v3grow 0.9s cubic-bezier(0.65, 0, 0.35, 1) var(--g, 0s) both; }
.end .a { opacity: 1; }
.end .x { opacity: 0; }
.end .dim { opacity: 0.22; }
.end .grow { transform: scaleX(1.18); }
@keyframes v3in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3out { to { opacity: 0; } }
@keyframes v3dim { to { opacity: 0.22; } }
@keyframes v3march { to { stroke-dashoffset: -12; } }
@keyframes v3grow { from { transform: scaleX(1); } to { transform: scaleX(1.18); } }

/* The agents (v3-marks.js): letters whose diacritics are eyes. They blink,
   and bob while they talk. */
svg .agent .eyes, svg .agent .body { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  svg .agent .eyes { animation: v3blink 4.8s var(--blink, 0s) infinite; }
  svg .agent.talk .body { animation: v3bob 0.34s ease-in-out infinite alternate; }
}
@keyframes v3blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@keyframes v3bob { to { transform: translateY(-8%); } }
.glyph { display: inline-block; width: 6px; height: 11px; margin-right: 4px; vertical-align: -1px; overflow: visible; color: var(--ink); }
.glyph.o { color: var(--accent); }

/* ── 0 · The reel: V1's film, framed on the white page and smaller. The
   stage sticks while you scroll, the camera zooms into the film (v3.js),
   and the film gives way to white, where the page proper begins. Without
   motion it is a plain framed still. */
.reel { position: relative; }
.reel-stage { position: relative; display: grid; place-items: center; padding: 120px 0 24px; background: var(--bg); }
.reel-frame {
  position: relative;
  width: var(--film);
  aspect-ratio: 16 / 9;
  background: #0d0d0c;
  transform-origin: 50% 50%;
}
.reel-frame video, .reel-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(0.88) contrast(1.04) brightness(0.94); }
.reel-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 45%); }
.reel-title { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; color: #f4f1ea; }
.reel-title h1 { font-size: clamp(22px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
/* The first word cycles through the trades (v3.js, every 2 s). */
.reel-word { display: inline-block; white-space: nowrap; vertical-align: bottom; overflow-x: clip; overflow-y: visible; }
.reel-measure { position: absolute; visibility: hidden; white-space: nowrap; pointer-events: none; }
.reel-white { position: absolute; inset: 0; z-index: 4; background: var(--bg); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js { --film: min(960px, calc(100vw - 64px), calc((100vh - 240px) * 16 / 9)); }
  .js .reel { height: 240vh; }
  .js .reel-stage { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; }
  .js .reel-frame { width: var(--film); margin-top: 24px; will-change: transform; }
}
/* The studio (v3-studio.js, with WebGL2): in the film's frame the film
   dissolves into a white loft, the hero projected on its far wall; the frame
   opens to the whole screen as the camera walks in. The reel grows to hold
   it; the hero waits under its last screen, held to the top of the screen
   (sticky, its bottom set by v3-studio.js) until the page gets there. The man
   in the loft is an image of his own above the hero, so the projection stays
   behind him. */
.studio .reel { height: 340vh; }
.studio .reel-stage { z-index: 1; }
.studio .hero { position: sticky; z-index: 2; margin-top: -100vh; visibility: hidden; }
.studio-gl { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.studio-man, .studio-agent { position: fixed; left: 0; top: 0; z-index: 3; transform-origin: 0 0; pointer-events: none; visibility: hidden; will-change: transform; }
.studio-agent { overflow: visible; }
.studio-agent .look { transition: transform 0.6s ease; }

/* ── 1 · Hero: the claim, a schematic of the product, one line ─────────── */
.hero { padding: 104px 0 0; }
.scheme {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(440px, 44vw, 540px);
  margin-top: 44px;
  padding: 48px 24px;
  overflow: hidden;
  background: var(--inset);
}
.scheme .rays { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); opacity: 0.55; }
.scheme .rays line { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.wins { position: relative; display: flex; align-items: center; gap: 40px; }
.win { position: relative; width: 250px; background: var(--bg); border: 0.5px solid var(--ink); }
.win.mid, .win.wide { width: 290px; }
.win.wide .pic { padding: 6px 4px 4px; }
/* The dashed hand-over between two windows. */
.win + .win::before { content: ""; position: absolute; top: 50%; right: 100%; width: 40px; border-top: 1px dashed var(--ink); }
.win .bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 32px; padding: 0 10px; border-bottom: 0.5px solid var(--ink); font-size: 12px; }
.win .bar small { font: 9px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.win .pic { padding: 14px 12px 10px; }
.win.mid .pic { padding: 10px 10px 8px; }
.ask { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 14px; }
.ask .q { font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; }
.ask .why { color: var(--muted); }
.ask .sig { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 9px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.ask .sig b { font-weight: 400; color: var(--ink); }
.ask .ans { display: flex; gap: 6px; margin-top: 4px; }
.ask .ans span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 0.5px solid var(--hair); font-size: 11px; }
.js .scheme .ask > * { opacity: 0; }
.scheme.run .ask > * { animation: v3in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.scheme.run .ask > :nth-child(1) { animation-delay: 2.5s; }
.scheme.run .ask > :nth-child(2) { animation-delay: 2.65s; }
.scheme.run .ask > :nth-child(3) { animation-delay: 2.8s; }
.scheme.run .ask > :nth-child(4) { animation-delay: 3s; }
.scheme.end .ask > * { opacity: 1; }
.lede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 28px 0 0; }
.lede > div { grid-column: 2; display: flex; flex-direction: column; gap: 20px; }
.lede p { max-width: 400px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 2 · How it works: three tabs, one picture at a time ───────────────── */
.how { padding: 120px 0 112px; }
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 0.5px solid var(--hair-soft);
  background: none;
  text-align: left;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s;
}
.tab .n { font: 10px/1 var(--mono); letter-spacing: 0.08em; }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"] .n { color: var(--accent); }
.tab i { position: absolute; left: 0; bottom: -0.5px; height: 1px; width: 0; background: var(--ink); }
.tab[aria-selected="true"] i { width: 100%; }
.cycling .tab[aria-selected="true"] i { animation: v3fill var(--step, 7s) linear both; }
@keyframes v3fill { from { width: 0; } to { width: 100%; } }
@media (hover: hover) { .tab:hover { color: var(--ink); } }
.pane { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.pane[hidden] { display: none; }
.pane .pic {
  padding: clamp(16px, 3vw, 40px);
  background:
    radial-gradient(circle, rgb(140 140 140 / 0.3) 0.75px, transparent 1px) 0 0 / 14px 14px,
    var(--inset);
}
.pane .txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding-bottom: 4px; }
.pane .txt p { max-width: 300px; font-size: 15px; line-height: 1.45; }
.pane .txt a { align-self: flex-start; font-size: 12px; color: var(--muted); text-decoration: none; border-bottom: 0.5px solid var(--hair-soft); }
@media (hover: hover) { .pane .txt a:hover { color: var(--ink); border-color: var(--ink); } }

/* ── 3 · What it handles: six pictograms ───────────────────────────────── */
.caps { padding: 112px 0 120px; }
.grid6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 24px; margin-top: 56px; }
.cap { padding-top: 18px; border-top: 0.5px solid var(--hair-soft); }
.cap h3 { font-size: 13px; font-weight: 500; }
.cap p { max-width: 300px; margin-top: 2px; color: var(--muted); text-wrap: pretty; }
.cap .pic { width: 200px; max-width: 100%; margin: 36px auto 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cap:hover .d { animation: v3march 1.1s linear infinite; }
}

/* ── 4 · The playground: one sentence beside one picture ───────────────── */
.try { padding: 0 0 120px; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  min-height: 460px;
  overflow: hidden;
  background: var(--inset);
  text-decoration: none;
}
.row .txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 28px; }
.row .txt h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.row .txt h2 span { display: block; color: var(--muted); }
.row .txt .go { align-self: flex-start; font-size: 12px; border-bottom: 0.5px solid var(--hair); transition: color 0.2s, border-color 0.2s; }
@media (hover: hover) { .row:hover .txt .go { color: var(--accent); border-color: var(--accent); } }
.app { align-self: end; margin: 48px 0 0 0; background: var(--bg); border: 0.5px solid var(--ink); border-right: 0; border-bottom: 0; transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) { .row:hover .app { translate: -6px -6px; } }
.app-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-bottom: 0.5px solid var(--ink); font: 9px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.app-bar i { width: 7px; height: 7px; border: 0.5px solid var(--hair); border-radius: 50%; }
.app-bar span { margin-left: 8px; }
.app-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0.5px solid var(--hair-soft); font-size: 11px; color: var(--muted); }
.app-tabs span { padding: 10px 12px; }
.app-tabs span + span { border-left: 0.5px solid var(--hair-soft); }
.app-tabs .on { color: var(--ink); box-shadow: inset 0 1px var(--accent); }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); min-height: 300px; }
.app-list { margin: 0; padding: 8px 0; list-style: none; border-right: 0.5px solid var(--hair-soft); }
.app-list li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.app-list li.on { background: var(--inset); }
.app-list b { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.app-list li.on b { background: var(--accent); }
.app-list .t { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-list .sk { height: 6px; background: #e6e6e6; }
.app-body .pic { padding: 28px 24px 16px; }

/* ── 5 · Close ─────────────────────────────────────────────────────────── */
.close { padding: 120px 0 64px; text-align: center; }
.close h2 { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.close p { margin: 20px auto 0; max-width: 420px; color: var(--muted); }
.close .acts { justify-content: center; margin-top: 20px; }
/* The waitlist: one email field and the orange button, joined. */
.wl { display: flex; max-width: 440px; margin: 32px auto 0; }
.wl input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 0.5px solid var(--hair); border-right: 0; border-radius: 0; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; }
.wl input::placeholder { color: var(--muted); }
.wl input:focus-visible { outline-offset: -2px; }
.wl .btn { flex: none; }
.wl .btn:disabled { cursor: default; }
/* What the address is for, the consent the privacy notice rests on: it shows only while someone
   is in the field or has typed in it, and keeps its place so nothing below it jumps. The field
   names it (aria-describedby), so a screen reader reads it on focus either way. */
.close .wl-note { margin-top: 12px; font: 11px/1.6 var(--mono); letter-spacing: 0.04em; opacity: 0; visibility: hidden; }
.close .wl:focus-within + .wl-note { opacity: 1; visibility: visible; }
.close .wl:has(input[type="email"]:not(:placeholder-shown)) + .wl-note { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) { .close .wl-note { transition: opacity 0.2s, visibility 0.2s; } }
.close .wl-note a { text-decoration: none; border-bottom: 0.5px solid var(--hair); }
@media (hover: hover) { .close .wl-note a:hover { color: var(--accent); border-color: var(--accent); } }
.close .wl-msg { min-height: 1.45em; margin-top: 10px; font-size: 12px; }
.close .wl-msg.ok { color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 2 · One brief in (v3-space.js). One run of six steps on eighteen schemes:
   the brief's documents fly onto the agents' table, drawn in the page's own
   marks; then a three.js field of the schemes, as massing, programme,
   daylight and structure, and a card with one scheme's trace beside it
   (below it on phones). The tabs are How it works' tabs, joined into the
   run's scale; the tags are the hero's. */
.space { padding: 120px 0 112px; }
.sp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.sp-meta { display: flex; align-items: center; gap: 16px; font: 10px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sp-replay { padding: 0 0 2px; border: 0; border-bottom: 0.5px solid var(--hair-soft); background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
@media (hover: hover) { .sp-replay:hover { color: var(--ink); border-color: var(--ink); } }
.sp-wrap { position: relative; margin-top: 44px; }
.sp { position: relative; z-index: 0; height: clamp(460px, 78vh, 780px); overflow: hidden; background: var(--inset); }
.sp-field, .sp-labels, .sp-table, .sp-docs { position: absolute; inset: 0; }
.sp-field canvas { display: block; }
.sp-labels, .sp-docs { pointer-events: none; }
.sp::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle, rgb(140 140 140 / 0.3) 0.75px, transparent 1px) 0 0 / 14px 14px, var(--inset); pointer-events: none; transition: opacity 0.5s ease; }
.sp.ready:not(.p0)::before { opacity: 0; }
.sp-docs, .sp-table { z-index: 3; transition: opacity 0.4s ease; }
.sp-table svg { display: block; width: 100%; height: 100%; color: var(--ink); }
.sp:not(.p0) .sp-docs, .sp:not(.p0) .sp-table { opacity: 0; pointer-events: none; }
.sp-doc { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; gap: 5px; width: clamp(46px, 7.6vw, 96px); aspect-ratio: 72 / 92; padding: 7px 6px; translate: -50% -50%; rotate: var(--r); background: var(--bg); border: 0.5px solid var(--ink); transition: left 0.75s cubic-bezier(0.55, 0, 0.75, 0.2), top 0.75s cubic-bezier(0.55, 0, 0.75, 0.2), scale 0.75s ease-in, opacity 0.75s ease-in, rotate 0.75s ease; }
.sp-doc b { overflow: hidden; font: 400 clamp(5px, 0.7vw, 8px)/1.2 var(--mono); letter-spacing: 0.04em; white-space: nowrap; }
.sp-doc i { display: block; height: 3px; background: #e2e2e2; }
.sp-doc i:nth-of-type(2) { width: 70%; }
.sp-doc i:nth-of-type(4) { width: 55%; }
.sp-doc.eat { left: 50%; top: 50%; scale: 0.1; opacity: 0; rotate: 0deg; }
.sp-tag { position: absolute; z-index: 4; display: flex; height: 28px; background: var(--bg); border: 0.5px solid var(--ink); font: 9px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sp-tag > span { display: flex; align-items: center; padding: 0 10px; }
.sp-tag b { font-weight: 400; color: var(--ink); }
.sp-tag.tl { top: 16px; left: 16px; }
.sp-tag.bl { bottom: 16px; left: 16px; }
.sp-drag { pointer-events: none; opacity: 0; transition: opacity 0.6s ease 0.6s; }
.sp.ready:not(.p0) .sp-drag { opacity: 1; }
@media (pointer: coarse) { .sp-drag { display: none; } }
.sp-ftag { display: flex; height: 20px; background: var(--bg); border: 0.5px solid var(--ink); font: 8.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: opacity 0.4s; }
.sp-ftag span { display: flex; align-items: center; padding: 0 6px; }
.sp-ftag span + span { display: none; border-left: 0.5px solid var(--ink); color: var(--muted); }
.sp-ftag.val span + span { display: flex; }
.sp-ftag.sel { outline: 0.5px solid var(--ink); outline-offset: 2px; }
.sp-ftag.flag span + span { background: var(--ink); color: var(--bg); }
.sp-ftag.drop { opacity: 0.45; }
.sp-ftag.drop span + span { text-decoration: line-through; }
.sp-ftag.short span:first-child { background: var(--ink); color: var(--bg); }
.sp-ftag.pick span:first-child { background: var(--accent); color: var(--ink); }
/* The chart of 06: tick values, axis titles with their units, which way is
   better and what the front is, on the ground. */
.sp-axis { padding: 2px 0; font: 10px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.sp-axis.title { font-size: 9px; letter-spacing: 0.06em; color: var(--ink); }

/* The card: one scheme's trace. */
.sp-card { position: absolute; z-index: 5; top: 16px; right: 16px; width: 316px; max-height: calc(100% - 32px); overflow: auto; background: var(--bg); border: 0.5px solid var(--ink); opacity: 0; visibility: hidden; transition: opacity 0.5s ease 0.3s, visibility 0.5s 0.3s; }
.sp-wrap:has(.sp.ready:not(.p0)) .sp-card { opacity: 1; visibility: visible; }
.sp-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 0.5px solid var(--ink); }
.sp-card-head b { font: 400 11px/1 var(--mono); letter-spacing: 0.06em; }
.sp-card-head span { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sp-card-head button { height: 26px; min-width: 26px; padding: 0 7px; border: 0.5px solid var(--hair); background: var(--bg); font: 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.sp-card-head button[hidden] { display: none; }
@media (hover: hover) { .sp-card-head button:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); } }
.sp-trace { margin: 0; padding: 0; list-style: none; }
.sp-trace li { display: grid; grid-template-columns: 18px 10px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 9px 12px 10px 14px; color: var(--muted); cursor: pointer; transition: background 0.3s, color 0.3s; }
.sp-trace li + li { border-top: 0.5px solid var(--hair-soft); }
.sp-trace li.on { background: var(--inset); color: var(--ink); }
.sp-trace .n { padding-top: 2px; font: 10px/1 var(--mono); letter-spacing: 0.08em; }
.sp-trace li.on .n { color: var(--accent); }
.sp-trace i .glyph { display: block; width: 7px; height: 13px; margin: 0; }
.sp-trace div { display: flex; flex-direction: column; gap: 3px; }
.sp-trace b { font-weight: 400; font-size: 12px; line-height: 1.2; color: var(--ink); }
.sp-trace .t { font-size: 11.5px; line-height: 1.35; transition: color 0.3s; }
.sp-trace li.wait .t, .sp-trace li.wait b { color: var(--faint); }
.sp-trace em { align-self: center; padding: 3px 5px 2px; border: 0.5px solid transparent; font: normal 8.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.sp-trace em:empty { display: none; }
.sp-trace em.ok { border-color: var(--hair); color: var(--ink); }
.sp-trace em.flag, .sp-trace em.short { background: var(--ink); color: var(--bg); }
.sp-trace em.out { border-color: var(--hair-soft); color: var(--muted); text-decoration: line-through; }
.sp-trace em.call { background: var(--accent); color: var(--ink); }
@media (hover: hover) { .sp-trace li:not(.on):hover { color: var(--ink); } }

/* The steps under the field, one line that fills as the run goes and can be
   dragged. */
.sp-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: 20px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sp-tabs .tab { padding-right: 12px; font-size: 13px; }
.sp-tabs .tab i, .sp-tabs .tab[aria-selected="true"] i { width: calc(var(--p, 0) * 100%); }

@media (max-width: 960px) {
  .wins { flex-direction: column; gap: 32px; }
  .win, .win.mid, .win.wide { width: min(320px, 100%); }
  .win + .win::before { top: auto; right: auto; bottom: 100%; left: 50%; width: 0; height: 32px; border-top: 0; border-left: 1px dashed var(--ink); }
  .lede { grid-template-columns: 1fr; }
  .lede > div { grid-column: 1; }
  .pane { grid-template-columns: 1fr; }
  .grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { grid-template-columns: 1fr; }
  .row .txt { justify-content: flex-start; }
  .app { margin: 0 0 0 28px; }
}
@media (max-width: 720px) {
  :root, .js { --film: calc(100vw - 32px); }
  .reel-stage { padding-top: 88px; }
  .reel-frame, .js .reel-frame { width: var(--film); aspect-ratio: 4 / 5; }
  .js .reel-frame { max-height: calc(100vh - 200px); }
  .hero { padding-top: 88px; }
  .scheme { margin-top: 32px; padding: 32px 16px; }
  .tabs { grid-template-columns: 1fr; gap: 0; }
  .tab { padding: 14px 0; }
  .space, .how, .caps { padding: 88px 0; }
  .sp-wrap { margin-top: 32px; }
  .sp { height: clamp(420px, 70vh, 600px); }
  .sp-doc b { display: none; }
  .sp-drag { display: none; }
  .sp-card { position: static; width: auto; max-height: none; margin-top: 12px; }
  .sp-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .sp-tabs .tab { padding: 12px 0; font-size: 12px; }
  .try { padding-bottom: 88px; }
  .app-body { grid-template-columns: 1fr; }
  .app-body .pic { display: none; }
  .close { padding: 88px 0 48px; }
}
@media (max-width: 520px) {
  .grid6 { grid-template-columns: 1fr; gap: 48px; }
}