/* Tokens from web/src/styles/base.css (copied by site/build.ts; edit them there). */
:root,
:root[data-theme='light'] .island {
  color-scheme: dark;
  /* color is inherited as a resolved value: an island sets it again, or text without a colour of its own keeps the
     page's ink (dark on dark in the light theme). */
  color: var(--fg);
  --ink-0: #070707;
  --ink-1: #0d0d0e;
  --ink-2: #131314;
  --ink-3: #1a1a1b;
  --ink-4: #232324;
  --ink-5: #2d2d2f;
  --line: #1f1f21;
  --line-2: #2c2c2e;
  --line-3: #444446;
  --line-4: #5a5a5c;
  --fg: #eeebe4;
  --fg-2: #bebab2;
  --muted: #8c8982;
  --faint: #5e5c58;
  --must: #ff453a;
  --should: #ffc043;
  --nice: #5ac8fa;
  --idea: #bf5af2;
  --ok: #3ddc97;
  --claude: #d97757;
  --must-bg: rgba(255, 69, 58, 0.12);
  --should-bg: rgba(255, 192, 67, 0.12);
  --idea-bg: rgba(191, 90, 242, 0.12);
  --ok-bg: rgba(61, 220, 151, 0.1);
  --claude-bg: rgba(217, 119, 87, 0.12);
  --sel: rgba(238, 235, 228, 0.07);
  /* a row that is the current one (the item in a preview, rows picked for a bar): a step deeper than --sel, still flat */
  --sel-on: rgba(238, 235, 228, 0.12);
  /* colours as text on light-on-dark tints, and text on filled buttons */
  --must-2: #ff8f86;
  --ok-2: #c9f6e2;
  --claude-2: #e8977a;
  --claude-3: #f0a58a;
  --edge: #8a6d2c;
  --edge-2: #c9a24a;
  --danger-hi: #ff5b51;
  /* a destructive button's fill: a crimson, not the must text colour — next to the orange primary an orange-red would
     read as the same kind of button; its white label passes AA (5.1:1) */
  --danger: #d3263e;
  --danger-glow: rgba(211, 38, 62, 0.34);
  --on-fg: #111;
  --on-fg-2: #333;
  --on-fg-3: #555;
  --on-fg-tint: #000;
  --on-fg-ok: #0a7a4d;
  --fg-hi: #fff;
  --hi: #fff;
  --on-must: #fff;
  --on-should: #2a1a00;
  --on-nice: #032030;
  --on-idea: #1c0626;
  --on-ok: #032417;
  --on-claude: #2a0f06;
  --scroll: #2a2a2c;
  /* behind a dialog: dimmed, not blacked out — the page stays readable as the place the dialog came from */
  --backdrop: rgba(0, 0, 0, 0.56);
  /* tooltips and toasts: a step lighter than the floats in the dark, so a passing message still stands out */
  --tip-bg: #2d2d2f;
  --tip-fg: var(--fg);
  --tip-fg-2: var(--fg-2);
  --tip-edge: rgba(238, 235, 228, 0.12);
  --tip-ok: var(--ok);
  --veil: rgba(5, 5, 5, 0.82);
  --well: #080808;
  /* the timeline (canvas reads these) */
  --tl-bg: #080808;
  --tl-film: #040404;
  --tl-hole: #1e1e20;
  --tl-lane: #0b0b0c;
  --tl-grid: #1b1b1c;
  --tl-tick: #3a3a3c;
  --tl-text: #79766f;
  --tl-wave: #333335;
  --tl-wave-rms: #7d7a73;
  --tl-wave-in: #8f8b83;
  --tl-wave-rms-in: #eeebe4;
  --tl-closed: #4a4a4c;
  --tl-verified: #3fd99a;
  --tl-words: #1c1c1e;
  --tl-word-text: #a19d95;
  --tl-seg-a: #262628;
  --tl-seg-b: #323234;
  --playhead: #eeebe4;
  --grain: var(--noise);
  --grain-o: 0.05;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-up: 0 -12px 32px rgba(0, 0, 0, 0.45);
  --must-glow: rgba(255, 69, 58, 0.28);
  /* Brand orange, "the frame you review, lit": the logo's window, and on the client's invitation pages the one light
     in the room and the way in. The same orange in both themes; ink on it (--brand-ink). A button in the brand's
     colour is a shade deeper (--brand-deep) so its white label (--on-brand) passes AA; the logo's orange stays exact.
     Not a colour of the working chrome. */
  --brand: #f25a1d;
  --brand-ink: #1a0b04;
  --brand-deep: #cf430c;
  --on-brand: #fff;
  --brand-hot: #ff9a5c;
  --brand-glow: rgba(242, 90, 29, 0.42);
  --brand-haze: rgba(242, 90, 29, 0.16);
  --cool-haze: rgba(120, 146, 255, 0.1);
  /* a timeline ruler: frame ticks, a longer one every fourth */
  --ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10'%3E%3Cpath d='M.5 1v8M8.5 3v4M16.5 2v6M24.5 3v4' stroke='%233a3a3d'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238c8982' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* The entrance's brand film (ui/Entrance.tsx): dark film over a faint warm lamp — the panel's ground and its light,
     the mat around the playing frame, the film stock and its perforations, the labels in the picture. The frame's own
     black under the picture (--film-view) is the same in both themes. */
  --film-a: #141416;
  --film-b: #060607;
  --film-hi: rgba(255, 228, 200, 0.045);
  --film-glow: rgba(242, 104, 42, 0.12);
  --film-mat: #0e0e10;
  --film-edge: rgba(238, 235, 228, 0.1);
  --film-top: rgba(255, 255, 255, 0.07);
  --film-view: #0b0b0c;
  --film-view-edge: rgba(255, 255, 255, 0.06);
  --film-stock: #0c0c0e;
  --film-stock-edge: rgba(238, 235, 228, 0.08);
  --film-label: #7b776f;
  --film-perf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Crect x='4' y='1' width='8' height='6' rx='1.5' fill='%23202023'/%3E%3C/svg%3E");
  --shadow-film: 0 2px 4px rgba(0, 0, 0, 0.45), 0 30px 60px -26px rgba(0, 0, 0, 0.85);
  /* The light table (the setup's pictures, onboarding/pictures.tsx; the entrance's panel family): glass over a warm lamp
     in the dark, paper in the light; frames on dark mats, their labels quiet; keys on it a soft grey. */
  --lt-a: #141416;
  --lt-b: #060607;
  --lt-hi: rgba(255, 228, 200, 0.045);
  --lt-glow: rgba(242, 104, 42, 0.12);
  --lt-lbl: #7b776f;
  --lt-key: #57575c;
  --fb-mat: #0e0e10;
  --fb-edge: rgba(238, 235, 228, 0.1);
  --fb-top: rgba(255, 255, 255, 0.07);
  --fb-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 30px 60px -26px rgba(0, 0, 0, 0.85);
  --fb-view-edge: rgba(255, 255, 255, 0.06);
  --ruler-lt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cpath d='M.5 1v8M30.5 3v4M60.5 3v4M90.5 3v4' stroke='%23343437'/%3E%3C/svg%3E");
  /* Get started's card: a lit corner on its ground */
  --gs-a: #1a1a1b;
  --gs-b: #131314;
}
:root,
:root[data-theme='light'] .island {
  /* Shadows cast onto the page: dark islands don't redeclare these, so a film strip on paper casts a paper shadow. */
  --cast: #000;
  --cast-k: 1;
  /* a sheet on the light table: the frames' mat (the setup's pictures) */
  --fr-bg: var(--fb-mat);
  --fr-edge: var(--fb-edge);
  --fr-top: var(--fb-top);
  --fr-shadow: var(--fb-shadow);
  /* a card that barely lifts off the page (Get started) */
  --shadow-hair: 0 1px 2px color-mix(in srgb, var(--cast) calc(8% * var(--cast-k)), transparent);
  /* a bar stuck to the bottom of what scrolls: the page fades into it */
  --shadow-fade-up: 0 -18px 18px -4px var(--ink-1);
  --shadow-small:
    0 1px 2px color-mix(in srgb, var(--cast) calc(22% * var(--cast-k)), transparent),
    0 6px 16px color-mix(in srgb, var(--cast) calc(22% * var(--cast-k)), transparent);
  /* what a phone's notch and home indicator take (0 elsewhere) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* The design system's scales (web/README.md, "The scales"). test/unit/design-scale.test.ts keeps stylesheets on them. */
  /* Type: seven sizes and a display size (a title that is the page: the client's invitation), three weights, three
     line heights. 16 px only for text fields on touch screens (iOS zoom). */
  /* 10 px only for type drawn inside a picture at its own scale (the entrance's film: its frame number and timecode) */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --fs-3xl: 36px;
  --fs-4xl: 56px;
  --fs-touch: 16px;
  --fw-text: 400;
  --fw-ui: 500;
  --fw-strong: 650;
  --lh-tight: 1.1;
  --lh-ui: 1.3;
  --lh-body: 1.5;
  --track-title: -0.02em;
  --track-eyebrow: 0.06em;
  /* Spacing: 4-based. 64 and 80 only for page-level room (empty states, bottom padding over a floating bar). */
  --sp-0_5: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  /* Radius: chips and keys · controls and rows · cards, popovers, dialogs · round things. */
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-full: 999px;
  --radius: var(--r-lg);
  --radius-sm: var(--r);
  /* Icons: in chips and menus · in buttons, nav and toolbars · in empty states and large buttons. */
  --ic-sm: 14px;
  --ic: 16px;
  --ic-lg: 20px;
  /* The play triangle's optical nudge: its weight sits left of its box, so it stands this much right of the middle of a
     round play button (dock.css .playbtn); pause bars stand exactly in the middle. */
  --ic-play-nudge: 1px;
  /* Three shadows: what floats (menus, popovers, dialogs, toasts), what is lifted (a dragged card), the focus ring. */
  /* What floats (menus, popovers, hover cards, dialogs, the palette): one material — the lightest surface, a hairline
     edge, a lit top edge and a shadow in three depths (contact, near, far) that softens on paper. */
  --shadow-float:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 6%, transparent), 0 1px 2px color-mix(in srgb, var(--cast) calc(24% * var(--cast-k)), transparent),
    0 8px 24px color-mix(in srgb, var(--cast) calc(26% * var(--cast-k)), transparent),
    0 24px 64px color-mix(in srgb, var(--cast) calc(34% * var(--cast-k)), transparent);
  /* a sheet's scrim without an element of its own: the page behind a menu that became a sheet (phones) dims */
  --shadow-scrim: 0 0 0 100vmax var(--backdrop);
  --float-bg: var(--ink-3);
  --float-line: color-mix(in srgb, var(--fg) 11%, transparent);
  /* the row under the pointer or the keys in a menu, a list in a popover, the palette */
  --float-sel: color-mix(in srgb, var(--fg) 8%, transparent);
  --shadow-raise:
    0 8px 24px color-mix(in srgb, var(--cast) calc(30% * var(--cast-k)), transparent),
    0 1px 3px color-mix(in srgb, var(--cast) calc(30% * var(--cast-k)), transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--fg) 14%, transparent);
  /* A sunken track (segmented controls, tabs, the timecode, the timeline): the opposite of the raised material. */
  --sunk: inset 0 1px 2px color-mix(in srgb, var(--cast) calc(18% * var(--cast-k)), transparent);
  /* The raised material: the one 3D look for primary actions and for everything selected or active (a segment, a
     chip, a tab, the current settings section) — a sheen from the top, a light top edge, a darker bottom edge and a
     soft drop. Pressed sinks in. Two tones share it: strong (the ink fill of a primary button) and surface (the
     lightest surface, for a selected item inside a sunken track). */
  --raise-sheen: linear-gradient(to bottom, color-mix(in srgb, var(--hi) 12%, transparent), transparent 60%);
  --raise-edge:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 38%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--cast) calc(22% * var(--cast-k)), transparent);
  --raise-drop:
    0 1px 2px color-mix(in srgb, var(--cast) calc(38% * var(--cast-k)), transparent),
    0 3px 10px color-mix(in srgb, var(--cast) calc(16% * var(--cast-k)), transparent);
  --raise: var(--raise-edge), var(--raise-drop);
  --press: inset 0 1px 3px color-mix(in srgb, var(--cast) calc(45% * var(--cast-k)), transparent);
  /* the brand orange's light: a primary in brand colour lifts on its own glow; the lit window throws light around it */
  --shadow-brand: 0 8px 28px var(--brand-glow), 0 1px 2px color-mix(in srgb, var(--cast) calc(30% * var(--cast-k)), transparent);
  /* a destructive button's hover: its own red light, like the orange primary's (a lighter fill would fail its label) */
  --shadow-danger: 0 8px 24px var(--danger-glow), 0 1px 2px color-mix(in srgb, var(--cast) calc(30% * var(--cast-k)), transparent);
  --shadow-window: 0 0 120px 24px var(--brand-glow), 0 0 32px var(--brand-haze);
  --focus-ring-brand: 0 0 0 4px color-mix(in srgb, var(--brand) 26%, transparent), 0 0 32px var(--brand-haze);
  /* the entrance film's gate: the lit frame under the playhead */
  --shadow-gate: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent), 0 0 24px color-mix(in srgb, var(--brand) 16%, transparent);
  /* One height scale for every control: side by side, controls share a step (quality.mjs checks rows). Touch screens
     widen tap areas invisibly (mobile.css) instead of growing the boxes. */
  --h-xs: 20px;
  --h-sm: 26px;
  --h: 30px;
  --h-lg: 40px;
  /* touch screens: the smallest a finger hits reliably */
  --h-touch: 44px;
  /* the one field and button a whole page is for: the way into a review */
  --h-xl: 52px;
  --ui: 'Instrument Sans Variable', 'Instrument Sans', -apple-system, sans-serif;
  /* Titles: the UI face, heavier and semi-condensed (its width axis) — a tool's type, not a film credit. */
  --display: 'Instrument Sans Variable', 'Instrument Sans', -apple-system, sans-serif;
  --mono: 'Martian Mono Variable', 'SF Mono', ui-monospace, monospace;
  /* key caps: letters in the UI face (the mono face's narrow capital O read as a zero: "Open in player [0]");
     ⌘ ⇧ ⌥ ↵, which it hasn't got, from the system face at their full size */
  --keys: 'Instrument Sans Variable', 'Instrument Sans', system-ui, -apple-system, 'Segoe UI Symbol', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Layers above the page, lowest first. Stacking inside one component (the stage's panes and handles) stays local
     with small numbers. */
  --z-topbar: 30;
  --z-inbox: 45;
  --z-overlay: 50;
  --z-sheet: 51;
  /* a dialog sits above the sheet or drawer it was opened from; a menu or popover above whatever opened it */
  --z-dialog: 52;
  --z-menu: 55;
  --z-float: 60;
  --z-palette: 61;
  --z-uploads: 70;
  --z-toast: 80;
  --z-top: 90;
  /* Motion: three speeds and four curves for everything that moves. Enter with ease-out, leave with ease-in (faster
     than entering), springs only for small things that snap into place (a switch, a toast). */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --dur-page: 140ms;
  --dur-page-in: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.3);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Keyframe glyphs (ui/glyphs.ts; test/unit/keyglyph.test.ts keeps these identical): masks, tinted by colour. */
  --kg-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 .8 11.2 6 6 11.2 .8 6Z'/%3E%3C/svg%3E");
  --kg-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 .8 11.2 6 6 11.2 .8 6ZM6 3 9 6 6 9Z'/%3E%3C/svg%3E");
  --kg-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 .8 11.2 6 6 11.2 .8 6ZM6 3 9 6 6 9 3 6Z'/%3E%3C/svg%3E");
  --kg-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 1.2A4.8 4.8 0 1 1 6 10.8 4.8 4.8 0 1 1 6 1.2ZM6 3.3A2.7 2.7 0 1 0 6 8.7 2.7 2.7 0 1 0 6 3.3Z'/%3E%3C/svg%3E");
  --kg-ease: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M1.6 1.4h8.8L6 6l4.4 4.6H1.6L6 6Z'/%3E%3C/svg%3E");
  --kg-hold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M3.1 1.6h5.8c.8 0 1.5.7 1.5 1.5v5.8c0 .8-.7 1.5-1.5 1.5H3.1c-.8 0-1.5-.7-1.5-1.5V3.1c0-.8.7-1.5 1.5-1.5Z'/%3E%3C/svg%3E");
}
:root[data-theme='light'] {
  color-scheme: light;
  --cast: #3a2e1c;
  --cast-k: 0.32;
  --ink-0: #e9e5dc;
  --ink-1: #f2efe7;
  --ink-2: #f8f6f0;
  --ink-3: #fffdf8;
  --ink-4: #e8e4da;
  --ink-5: #dcd7cc;
  --line: #e1dcd1;
  --line-2: #d4cec2;
  --line-3: #b4ad9f;
  --line-4: #8f887b;
  --fg: #1c1b19;
  --fg-2: #3b3833;
  --muted: #69645b;
  --faint: #868075;
  --must: #b31434;
  --should: #9a4f04;
  --nice: #00679a;
  --idea: #8b2db8;
  --ok: #157548;
  --claude: #a3461f;
  --must-bg: rgba(179, 20, 52, 0.09);
  --should-bg: rgba(154, 79, 4, 0.1);
  --idea-bg: rgba(139, 45, 184, 0.09);
  --ok-bg: rgba(21, 117, 72, 0.09);
  --claude-bg: rgba(163, 70, 31, 0.1);
  --sel: rgba(28, 27, 25, 0.06);
  --sel-on: rgba(28, 27, 25, 0.1);
  --must-2: #9a1030;
  --ok-2: #0f5f39;
  --claude-2: #924020;
  --claude-3: #86391c;
  --edge: #7a5a17;
  --edge-2: #7a5a17;
  --danger-hi: #9a1030;
  --danger: #b31434;
  --danger-glow: rgba(179, 20, 52, 0.22);
  --on-fg: #f7f4ec;
  --on-fg-2: #d6d0c4;
  --on-fg-3: #b9b3a7;
  --on-fg-tint: #fff;
  --on-fg-ok: #6fdcaa;
  --fg-hi: #3a3732;
  --hi: #fff;
  --on-must: #fff;
  --on-should: #fffaf0;
  --on-nice: #f0faff;
  --on-idea: #fbf3ff;
  --on-ok: #f2fff8;
  --on-claude: #fff6f1;
  --scroll: #cbc5b8;
  --backdrop: rgba(42, 34, 22, 0.2);
  /* on paper, tooltips and toasts are ink: a passing message in the page's own type colour */
  --tip-bg: var(--fg);
  --tip-fg: var(--on-fg);
  --tip-fg-2: var(--on-fg-2);
  --tip-edge: transparent;
  --tip-ok: var(--on-fg-ok);
  --veil: rgba(242, 239, 231, 0.86);
  --well: #e9e5dc;
  --tl-bg: #efebe3;
  --tl-film: #e2ddd2;
  --tl-hole: #f7f4ed;
  --tl-lane: #f7f5ef;
  --tl-grid: #e3ded4;
  --tl-tick: #b7b0a2;
  --tl-text: #6d685f;
  --tl-wave: #d2ccbf;
  --tl-wave-rms: #8d877b;
  --tl-wave-in: #9a9387;
  --tl-wave-rms-in: #2a2824;
  --tl-closed: #b3ada0;
  --tl-verified: #157548;
  --tl-words: #e6e1d7;
  --tl-word-text: #58534b;
  --tl-seg-a: #dcd6ca;
  --tl-seg-b: #cfc8bb;
  --playhead: #1c1b19;
  --grain: var(--noise-ink);
  --grain-o: 0.07;
  --shadow: 0 24px 60px rgba(58, 46, 28, 0.16), 0 2px 10px rgba(58, 46, 28, 0.1);
  --shadow-up: 0 -12px 32px rgba(58, 46, 28, 0.12);
  --must-glow: rgba(179, 20, 52, 0.18);
  --brand-hot: #ff8a4a;
  --brand-glow: rgba(242, 90, 29, 0.34);
  --brand-haze: rgba(242, 90, 29, 0.13);
  --cool-haze: rgba(70, 96, 210, 0.07);
  --ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10'%3E%3Cpath d='M.5 1v8M8.5 3v4M16.5 2v6M24.5 3v4' stroke='%23c4bdb0'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2369645b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* the brand film on paper: a white mat and white film on a clean paper ground, no lamp */
  --film-a: #fdfcf9;
  --film-b: #eeeae2;
  --film-hi: rgba(255, 255, 255, 0.95);
  --film-glow: rgba(255, 255, 255, 0);
  --film-mat: #fff;
  --film-edge: rgba(28, 27, 25, 0.12);
  --film-top: rgba(255, 255, 255, 1);
  --film-view-edge: rgba(0, 0, 0, 0.08);
  --film-stock: #fff;
  --film-stock-edge: rgba(28, 27, 25, 0.13);
  --film-label: #8f887b;
  --film-perf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Crect x='4' y='1' width='8' height='6' rx='1.5' fill='%23e6e0d5'/%3E%3C/svg%3E");
  --shadow-film: 0 1px 1px rgba(46, 36, 20, 0.07), 0 4px 10px rgba(46, 36, 20, 0.05), 0 28px 50px -26px rgba(46, 36, 20, 0.32);
  --lt-a: #fdfcf9;
  --lt-b: #eeeae2;
  --lt-hi: rgba(255, 255, 255, 0.95);
  --lt-glow: rgba(255, 255, 255, 0);
  --lt-lbl: #8f887b;
  --lt-key: #b4ad9f;
  --fb-mat: #ffffff;
  --fb-edge: rgba(28, 27, 25, 0.12);
  --fb-top: rgba(255, 255, 255, 1);
  --fb-shadow: 0 1px 1px rgba(46, 36, 20, 0.07), 0 4px 10px rgba(46, 36, 20, 0.05), 0 28px 50px -26px rgba(46, 36, 20, 0.32);
  --fb-view-edge: rgba(0, 0, 0, 0.08);
  --ruler-lt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cpath d='M.5 1v8M30.5 3v4M60.5 3v4M90.5 3v4' stroke='%23cfc8bb'/%3E%3C/svg%3E");
  --gs-a: #fffdf8;
  --gs-b: #f8f6f0;
}
/* Lampo's site. Every colour, size and curve comes from the app's tokens (prepended at build time from
   web/src/styles/base.css); what is added here is the site's own scale for long reading and big headlines. */

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url(fonts/instrument-sans-latin-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Martian Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  src: url(fonts/martian-mono-latin.woff2) format('woff2');
}

/* the site's surfaces, named from the app's inks; inside an island they are worked out again from the island's own (a
   custom property takes the values where it is declared), or a chip on a video kept the light theme's surface */
:root,
:root[data-theme='light'] .island {
  --page: var(--ink-1);
  --panel: var(--ink-2);
  --panel-2: var(--ink-3);
}
:root {
  --video-page: #0a0a0a;
  --col: 1160px;
  --read: 72ch;
  --gut: clamp(16px, 4vw, 40px);
  --bar-h: 56px;
  --ruler-h: 22px;
  --fs-hero: clamp(40px, 6.2vw, 74px);
  --fs-h1: clamp(34px, 4.6vw, 56px);
  --fs-h2: clamp(28px, 3.8vw, 46px);
  --fs-h3: 19px;
  --fs-lede: clamp(17px, 1.45vw, 20px);
  --fs-body: 16.5px;
  --band: clamp(80px, 11vw, 148px);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + var(--ruler-h) + 24px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--fg);
  font: var(--fw-text) var(--fs-body) / 1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,
video,
svg,
canvas {
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
b,
strong {
  font-weight: var(--fw-strong);
}
::selection {
  background: var(--brand);
  color: var(--brand-ink);
}
:focus-visible {
  outline: 2px solid var(--brand-hot);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.win {
  fill: var(--win, var(--brand));
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  z-index: var(--z-top);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r);
  background: var(--fg);
  color: var(--page);
  font-weight: var(--fw-ui);
  text-decoration: none;
}
.skip:focus {
  top: var(--sp-2);
}
.wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.ic {
  width: var(--ic);
  height: var(--ic);
  flex: none;
}
.ic.sm {
  width: var(--ic-sm);
  height: var(--ic-sm);
  vertical-align: -2px;
}
.kg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: currentColor;
}
.logo {
  display: block;
  height: 30px;
  width: auto;
  fill: currentColor;
}

/* type */
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-stretch: 87.5%;
  font-weight: var(--fw-strong);
  letter-spacing: var(--track-title);
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.04;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}
p {
  margin: 0;
}
.lede {
  font-size: var(--fs-lede);
  color: var(--fg-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .tc {
  color: var(--brand-deep);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
:root:not([data-theme='light']) .eyebrow .tc {
  color: var(--brand-hot);
}
.mono {
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
}
code,
.code {
  font: var(--fw-ui) 0.86em / 1.4 var(--mono);
  font-stretch: 87.5%;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  color: var(--fg);
  overflow-wrap: anywhere;
}
kbd {
  font: var(--fw-ui) 0.82em / 1 var(--keys);
  display: inline-block;
  min-width: 1.6em;
  padding: 3px 5px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-3);
  border-bottom-width: 2px;
  background: var(--panel-2);
  text-align: center;
}

/* buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--h-xl);
  padding-inline: 22px;
  border-radius: var(--r-lg);
  font: var(--fw-strong) var(--fs-lg) / 1 var(--ui);
  text-decoration: none;
  color: var(--fg);
  background: var(--raise-sheen), var(--panel-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--raise);
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur);
}
.btn:hover {
  transform: translateY(-1px);
  border-color: var(--line-3);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: var(--press);
}
.btn.primary {
  background: var(--raise-sheen), var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand-deep) 70%, #000);
  color: var(--on-brand);
}
.btn.primary:hover {
  box-shadow: var(--raise), var(--shadow-brand);
}
.btn .kg {
  transition: transform var(--dur-slow) var(--ease-spring);
}
.btn:hover .kg {
  transform: rotate(90deg) scale(1.1);
}
.btn .ic {
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover .ic.go,
.more:hover .ic {
  transform: translateX(3px);
}
.more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-strong);
  text-decoration: none;
  color: var(--fg);
}
.more span {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
  padding-bottom: 1px;
}
.more:hover span {
  background-size: 100% 1.5px;
}
.more .ic {
  transition: transform var(--dur-slow) var(--ease-out);
}

/* ------------------------------------------------------------ the bar: the page as a timeline */
.bar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: color-mix(in srgb, var(--page) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  overflow-x: clip;
}
.bar-row {
  /* the logo and the readout at the start, the pages in the middle, Sign in, Start free and the phone's menu at the end */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
  height: var(--bar-h);
}
.bar-start {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.bar-row > .nav {
  grid-column: 2;
}
.brand {
  display: inline-flex;
  color: var(--fg);
  border-radius: var(--r-sm);
}
.bar .logo {
  height: 28px;
}
.nav {
  display: flex;
  gap: var(--sp-6);
  font-size: var(--fs-lg);
  color: var(--fg-2);
}
.nav a {
  position: relative;
  text-decoration: none;
  padding-block: 6px;
  transition: color var(--dur);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.nav a:hover,
.nav a[aria-current='page'],
.nav a[aria-current='true'] {
  color: var(--fg);
}
.nav a:hover::after,
.nav a[aria-current='page']::after,
.nav a[aria-current='true']::after {
  transform: scaleX(1);
}
/* Product: its menu opens on hover and on focus, so it works without a script, under the bar in the float material;
   a bridge over the gap keeps it open while the pointer travels down to it */
.nav-menu {
  position: relative;
}
.nav-product {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-chev {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  opacity: 0.6;
}
.nav-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 12px);
  left: 50%;
  display: grid;
  grid-template-columns: repeat(2, 292px);
  gap: 4px 16px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition:
    opacity 0.15s,
    visibility 0.15s,
    transform 0.2s var(--ease-out);
}
.nav-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.nav-menu:hover .nav-panel,
.nav-menu:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-col {
  display: grid;
  align-content: start;
  gap: 2px;
}
.nav-head {
  margin: 0 0 6px;
  padding: 0 10px;
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav .nav-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  padding: 8px 10px;
  border-radius: var(--r);
  font-size: var(--fs-md);
  line-height: 1.35;
}
.nav .nav-item::after {
  display: none;
}
.nav .nav-item:hover,
.nav .nav-item:focus-visible,
.nav .nav-item[aria-current='page'] {
  background: var(--float-sel);
}
.nav-item .kg {
  grid-row: 1 / 3;
  align-self: center;
  width: 11px;
  height: 11px;
  color: var(--fg-2);
}
.nav-item b {
  grid-column: 2;
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.nav-item span {
  grid-column: 2;
  color: var(--muted);
  font-size: var(--fs-sm);
}
/* an item without a keyframe (around the loop) starts where its heading does */
.nav .nav-item.bare {
  grid-template-columns: minmax(0, 1fr);
}
.nav-item.bare b,
.nav-item.bare span {
  grid-column: 1;
}
.bar-end {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* the open-source app's repository: GitHub's mark beside Sign in (the phone menu names it instead) */
.bar-gh {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  color: var(--fg-2);
  transition:
    color var(--dur),
    background var(--dur);
}
.bar-gh:hover {
  color: var(--fg);
  background: var(--panel);
}
.bar-gh .ic {
  width: 19px;
  height: 19px;
}
@media (max-width: 760px) {
  .bar-gh {
    display: none;
  }
}
.actions.oss-acts {
  justify-content: flex-start;
  margin-top: var(--sp-6);
}
.oss-acts .btn .ic,
.more.gh .ic:first-child {
  width: 17px;
  height: 17px;
}
.bar-signin {
  padding: 6px 4px;
  font-size: var(--fs-lg);
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur);
}
.bar-signin:hover {
  color: var(--fg);
}
.bar .btn.bar-cta {
  height: 36px;
  padding-inline: 14px;
  border-radius: var(--r);
  font-size: var(--fs-md);
  white-space: nowrap;
}
/* the readout stands beside the logo where the bar has the room; below that the ruler and its playhead tell the time */
@media (max-width: 1099px) {
  .bar .readout {
    display: none;
  }
}
.readout {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font: var(--fw-ui) var(--fs-md) / 1 var(--mono);
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  padding: 8px 10px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: var(--sunk);
}
.readout .fr {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.readout .fr b {
  color: var(--brand-deep);
  font-weight: var(--fw-ui);
}
:root:not([data-theme='light']) .readout .fr b {
  color: var(--brand-hot);
}
.theme {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: var(--sunk);
}
.theme button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur);
}
.theme button:hover {
  color: var(--fg);
}
.theme button[aria-checked='true'] {
  color: var(--fg);
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
}
.theme .ic {
  width: 15px;
  height: 15px;
}
.ruler {
  position: relative;
  height: var(--ruler-h);
  cursor: pointer;
  touch-action: pan-y;
}
.ruler::before {
  content: '';
  position: absolute;
  inset: 0 var(--gut);
  background: var(--ruler) left bottom / 32px 10px repeat-x;
  opacity: 0.9;
}
.track {
  position: absolute;
  inset: 0 var(--gut);
}
.mk {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  display: grid;
  padding: 2px 3px;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color var(--dur);
}
.mk .kg {
  grid-area: 1 / 1;
  width: 11px;
  height: 11px;
  transition:
    opacity var(--dur),
    transform var(--dur-slow) var(--ease-spring);
}
.mk .b {
  opacity: 0;
  transform: scale(0.4);
}
.mk.past {
  color: var(--muted);
}
.mk.past .a,
.mk.on .a {
  opacity: 0;
}
.mk.past .b,
.mk.on .b {
  opacity: 1;
  transform: none;
}
.mk.on {
  color: var(--brand);
}
.mk.on .b {
  transform: scale(1.25);
}
.mk:hover {
  color: var(--fg);
}
.mk .tip {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translate(-50%, -4px);
  opacity: 0;
  pointer-events: none;
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  white-space: nowrap;
  color: var(--tip-fg);
  background: var(--tip-bg);
  border: 1px solid var(--tip-edge);
  border-radius: var(--r);
  padding: 7px 9px;
  box-shadow: var(--shadow-float);
  transition:
    opacity var(--dur),
    transform var(--dur) var(--ease-out);
}
.mk:hover .tip,
.mk:focus-visible .tip {
  opacity: 1;
  transform: translate(-50%, 0);
}
.mk.l .tip {
  left: 0;
  transform: translate(-6px, -4px);
}
.mk.l:hover .tip,
.mk.l:focus-visible .tip {
  transform: translate(-6px, 0);
}
.mk.r .tip {
  left: auto;
  right: 0;
  transform: translate(6px, -4px);
}
.mk.r:hover .tip,
.mk.r:focus-visible .tip {
  transform: translate(6px, 0);
}
.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  pointer-events: none;
  will-change: transform;
}
.playhead::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -1px;
  width: 2px;
  background: var(--brand);
  border-radius: 1px;
}
.playhead::after {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  border: 5px solid transparent;
  border-top: 6px solid var(--brand);
}
.ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fg-2);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .ruler:hover .ghost {
    opacity: 0.4;
  }
}
.menu {
  display: none;
  position: relative;
}
.menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--panel);
  cursor: pointer;
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu .shut,
.menu[open] .open {
  display: none;
}
.menu[open] .shut {
  display: block;
}
.menu:not([open]) .menu-sheet {
  display: none;
}
.menu-sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  display: grid;
  padding: var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
}
.menu-sheet a {
  padding: 10px 12px;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: var(--fw-ui);
}
.menu-sheet a:hover {
  background: var(--float-sel);
}
/* the product's pages first, two to a row, the loop's steps with their keyframes (the bar's Product menu on a phone) */
.menu-product {
  display: grid;
  gap: 6px;
  padding: 6px 0 10px;
}
.menu-head {
  margin: 0;
  padding: 6px 12px 0;
  color: var(--faint);
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-sheet .menu-p {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  font-size: var(--fs-md);
}
.menu-sheet .menu-p[aria-current='page'] {
  background: var(--float-sel);
  border-radius: var(--r);
}
.menu-p .kg {
  flex: none;
  width: 10px;
  height: 10px;
  color: var(--fg-2);
}
@media (max-width: 900px) {
  .nav {
    display: none;
  }
  .menu {
    display: block;
  }
  /* on a phone the menu is the screen's width, right under the bar, with rows a thumb finds */
  .menu-sheet {
    position: fixed;
    top: calc(var(--bar-h) + var(--ruler-h));
    left: 0;
    right: 0;
    min-width: 0;
    padding: var(--sp-2) var(--gut) var(--sp-4);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    border-width: 0 0 1px;
  }
  .menu-sheet a {
    padding: 14px 12px;
    font-size: var(--fs-lg);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .menu-sheet a:last-child {
    border-bottom: 0;
  }
  .menu-sheet {
    max-height: calc(100dvh - var(--bar-h) - var(--ruler-h));
    overflow-y: auto;
  }
  .menu-sheet .menu-p {
    padding: 11px 12px;
    font-size: var(--fs-md);
    border-bottom: 0;
  }
  .menu-product {
    border-bottom: 1px solid var(--line);
  }
  .bar-signin {
    display: none;
  }
  .bar .btn.bar-cta {
    height: 40px;
  }
  .menu-sheet .menu-acts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--sp-3);
    padding-top: var(--sp-4);
  }
  .menu-sheet .menu-acts .btn {
    justify-content: center;
    height: 48px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
  }
  .menu-sheet .menu-acts .btn.primary {
    border-color: color-mix(in srgb, var(--brand-deep) 70%, #000);
  }
}

/* between pages: the new page dissolves in over the old one, which stays opaque underneath until it is covered. The
   old page fading out on its own clock left both half there at once (text dimmed, and whatever a browser paints
   behind a page could show through) and the new one slid: a flicker. Nothing moves now; the bar is the same on every
   page, so it stands still by itself. None under reduced motion. The opt-in is in each page's head (lib/layout.ts
   BOOT_STYLE): read from here, Chrome sometimes decided before it had applied this sheet */
::view-transition-group(root) {
  animation-duration: 0.22s;
}
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: 0.22s ease both vt-in;
}
@keyframes vt-in {
  from {
    opacity: 0;
  }
}
/* a page changed in place (nav.js): its main content takes the focus for screen readers, without a ring round the
   whole page; arriving home that way, the logo's stage is empty until the pen writes it (not the still, then a wipe) */
#main:focus {
  outline: none;
}
.stage.to-write .poster {
  visibility: hidden;
}
@media (max-width: 420px) {
  .readout .fr {
    display: none;
  }
}

/* ------------------------------------------------------------ pages: a head, prose, tables, code */
.page-head {
  padding-block: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 48px);
  display: grid;
  gap: var(--sp-4);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font: var(--fw-ui) var(--fs-sm) / 1 var(--mono);
  color: var(--muted);
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--fg);
}
.crumbs span[aria-hidden] {
  color: var(--faint);
}
.prose {
  max-width: var(--read);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--fg-2);
}
.prose > * + * {
  margin-top: 1.05em;
}
.prose h2,
.prose h3,
.prose h4 {
  color: var(--fg);
  scroll-margin-top: calc(var(--bar-h) + var(--ruler-h) + 24px);
}
.prose h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin-top: 2.2em;
}
.prose h3 {
  font-size: 20px;
  margin-top: 1.8em;
}
.prose h4 {
  font-size: 17px;
  margin-top: 1.5em;
}
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.7em;
}
.prose a {
  color: var(--fg);
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose strong {
  color: var(--fg);
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 0.35em;
}
.prose li > ul,
.prose li > ol {
  margin-top: 0.35em;
}
.prose li > p + p,
.prose li > pre {
  margin-top: 0.6em;
}
.prose li::marker {
  color: var(--faint);
}
.prose blockquote {
  margin-inline: 0;
  padding: 2px 0 2px var(--sp-4);
  border-left: 2px solid var(--line-3);
  color: var(--muted);
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 2.4em;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
}
/* a picture of the app (or a diagram) stands in a box of its own: a quiet panel with room around it, the shot at its
   real size in the panel's middle and lifted off it, so it reads as a screen and not as part of the page */
.prose figure.shot {
  margin: 1.8em 0 2em;
  padding: clamp(14px, 2.4vw, 28px);
  border-radius: calc(var(--r-lg) + 6px);
  background: color-mix(in srgb, var(--fg) 3.5%, var(--page));
  border: 1px solid var(--line);
}
.prose figure.shot img {
  display: block;
  margin-inline: auto;
  box-shadow: var(--shadow-float);
}
.prose figure.shot .diagram {
  display: block;
}
.prose figure.shot .diagram svg {
  display: block;
  width: 100%;
  height: auto;
}
.prose pre,
pre.block {
  position: relative;
  margin: 1.2em 0 0;
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--well);
  border: 1px solid var(--line);
  box-shadow: var(--sunk);
  overflow-x: auto;
  font: var(--fw-ui) var(--fs-md) / 1.65 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg);
}
/* code in a sentence: quiet (regular weight, no frame, a faint tint), so a line with a few names in it still reads as a
   sentence; what is typed or copied stands in the blocks */
.prose :not(pre) > code {
  font-weight: var(--fw-text);
  font-size: 0.84em;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-color: transparent;
  padding: 1px 4px;
  color: var(--fg);
}
.prose pre code,
pre.block code {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  /* never wrapped: diagrams, file trees and aligned comments keep their columns; the docs keep their lines short
     instead (test/unit/docs-shape.test.ts) */
  overflow-wrap: normal;
  white-space: pre;
}
.copy-code {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-sm);
  padding-inline: 8px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--muted);
  font: var(--fw-ui) var(--fs-sm) / 1 var(--ui);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--dur),
    color var(--dur);
}
pre:hover .copy-code,
.copy-code:focus-visible {
  opacity: 1;
}
.copy-code:hover {
  color: var(--fg);
}
.copy-code.done {
  color: var(--ok);
  opacity: 1;
}
.copy-code .ic {
  width: 14px;
  height: 14px;
}
@media (hover: none) {
  .copy-code {
    opacity: 1;
  }
  /* always shown on a touch screen, so it gets a row of its own above the code instead of covering a line's end; every
     block gets one (site.js), and the room is there from the first paint, so nothing moves when the button comes */
  .prose pre,
  pre.block {
    padding-top: calc(var(--h-sm) + 16px);
  }
}
.table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-top: 1.2em;
}
.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.table th,
.table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.table tr:last-child td {
  border-bottom: 0;
}
.table th {
  font: var(--fw-ui) var(--fs-xs) / 1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
}
.table td code {
  white-space: nowrap;
  overflow-wrap: normal;
}
.table td:first-child code {
  white-space: normal;
}

/* ------------------------------------------------------------ docs: the list (with the page's sections under it), the page.
   One column with every other page: the bar never changes its width between pages */
.docs {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: var(--band);
}
/* the page fills its column, so its right edge is the bar's (the column is about the reading width anyway) */
.docs .prose {
  max-width: none;
}
.docs .page-head h1 {
  font-size: clamp(32px, 3.4vw, 46px);
}
.docs-nav {
  position: sticky;
  top: calc(var(--bar-h) + var(--ruler-h) + 28px);
  max-height: calc(100vh - var(--bar-h) - var(--ruler-h) - 56px);
  overflow-y: auto;
  /* the links' pills reach 10px left of the text; a scroller clips at its padding box, so the room is inside it */
  padding-inline: 10px;
  margin-inline: -10px;
  /* level with the page's head at the top; a margin, not padding, so the list moves up under the bar once it sticks */
  margin-top: clamp(48px, 7vw, 96px);
  font-size: var(--fs-md);
}
.docs-nav h2,
.docs-pick h2 {
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-3);
}
.docs-nav a {
  display: block;
  padding: 5px 10px;
  margin-left: -10px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--muted);
  line-height: 1.35;
}
.docs-nav a:hover {
  color: var(--fg);
  background: var(--sel);
}
.docs-nav a[aria-current='page'] {
  color: var(--fg);
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
}
/* the page's own sections, under its link: a line down their left, the one read now lit on it */
.docs-toc {
  display: grid;
  margin: 2px 0 6px 6px;
  padding-left: 7px;
  border-left: 1px solid var(--line-2);
  font-size: var(--fs-sm);
}
.docs-nav .docs-toc a {
  position: relative;
  margin-left: 0;
  padding: 4px 8px;
}
.docs-toc a.on {
  color: var(--fg);
}
.docs-toc a.on::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 1px;
  background: var(--fg);
}
.docs-pick {
  display: none;
}
@media (max-width: 860px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-nav {
    display: none;
  }
  .docs-pick {
    display: block;
    margin-bottom: var(--sp-4);
  }
}
.docs-pick summary {
  cursor: pointer;
  font-weight: var(--fw-ui);
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--panel);
}
.docs-pick nav {
  display: grid;
  padding: var(--sp-2) 0;
}
/* the phone's menu is the list beside the page on a wider screen: the same small group labels, the page itself lit */
.docs-pick h2 {
  padding-inline: 14px;
  margin-bottom: var(--sp-1);
}
.docs-pick a {
  padding: 8px 14px;
  text-decoration: none;
  color: var(--fg-2);
}
.docs-pick a[aria-current='page'] {
  color: var(--fg);
  font-weight: var(--fw-ui);
}
.docs-pick .docs-toc {
  margin-left: 20px;
}
.docs-pick .docs-toc a {
  position: relative;
  padding: 6px 12px;
}
.edit {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--muted);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.card {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-6) var(--sp-6) 22px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  transition:
    border-color var(--dur),
    transform var(--dur-slow) var(--ease-out),
    background var(--dur);
}
a.card:hover {
  border-color: var(--line-3);
  background: var(--panel-2);
}
/* the docs' cards sit inside the prose: its heading margins would leave an empty band at the top of each card */
.card h3 {
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.card h3 .kg {
  color: var(--faint);
  transition:
    color var(--dur),
    transform var(--dur-slow) var(--ease-spring);
}
a.card:hover h3 .kg {
  color: var(--brand);
  transform: rotate(90deg);
}
.card p {
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: 1.5;
}
/* the docs' front door: three ways in, by who is reading; Lampo Cloud's first and lit */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.door-k {
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.door.lead {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line-2));
}
.door.lead:hover {
  border-color: var(--brand);
}
/* Connect your agent (pages/connect.ts): a tab per agent, the setup for the one picked. The tabs are radio buttons, as
   pricing's switches are; picked is raised, never orange */
.cx {
  display: grid;
  gap: var(--sp-3);
  padding: 18px 20px 20px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line-2);
}
.cx p {
  margin: 0;
  color: var(--fg-2);
}
.cx .cx-k {
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cx-tabs input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cx-tabs label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--h);
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-weight: var(--fw-ui);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur),
    background var(--dur),
    box-shadow var(--dur);
}
.cx-tabs label:hover {
  color: var(--fg);
}
.cx-tabs input:checked + label {
  color: var(--fg);
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
}
.cx-tabs input:focus-visible + label {
  box-shadow: var(--focus-ring);
}
.cx-mark {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}
.cx-panel {
  display: none;
  gap: var(--sp-2);
}
.cx:has(#cx-claude-code:checked) [data-cx='claude-code'],
.cx:has(#cx-codex:checked) [data-cx='codex'],
.cx:has(#cx-cursor:checked) [data-cx='cursor'],
.cx:has(#cx-vscode:checked) [data-cx='vscode'],
.cx:has(#cx-antigravity:checked) [data-cx='antigravity'],
.cx:has(#cx-windsurf:checked) [data-cx='windsurf'],
.cx:has(#cx-gemini:checked) [data-cx='gemini'],
.cx:has(#cx-zed:checked) [data-cx='zed'],
.cx:has(#cx-claude:checked) [data-cx='claude'],
.cx:has(#cx-chatgpt:checked) [data-cx='chatgpt'],
.cx:has(#cx-other:checked) [data-cx='other'] {
  display: grid;
}
.cx pre {
  margin: 0;
}
/* code in its sentences is quiet, as in the docs' prose, and a command or a path never breaks inside */
.cx :not(pre) > code {
  font-weight: var(--fw-text);
  font-size: 0.84em;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-color: transparent;
  padding: 1px 4px;
  color: var(--fg);
  white-space: nowrap;
}
.cx .cx-foot {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ------------------------------------------------------------ blog */
.posts {
  display: grid;
  gap: var(--sp-3);
  max-width: 820px;
  padding-bottom: var(--band);
}
.post-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  transition:
    border-color var(--dur),
    background var(--dur);
}
.post-row:hover {
  border-color: var(--line-3);
  background: var(--panel-2);
}
.post-row time {
  font: var(--fw-ui) var(--fs-sm) / 1.6 var(--mono);
  color: var(--muted);
}
.post-row h2 {
  font-size: 24px;
  line-height: 1.15;
}
.post-row p {
  margin-top: var(--sp-2);
  color: var(--muted);
}
@media (max-width: 600px) {
  .post-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  font: var(--fw-ui) var(--fs-sm) / 1.4 var(--mono);
  color: var(--muted);
}
.tag {
  display: inline-flex;
  align-items: center;
  height: var(--h-xs);
  padding-inline: 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  color: var(--muted);
}
.draft {
  color: var(--should);
  border-color: color-mix(in srgb, var(--should) 45%, var(--line-2));
}
.post-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  max-width: var(--read);
  margin-top: var(--sp-16);
  padding-bottom: var(--band);
}
.post-foot a {
  display: grid;
  gap: 4px;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  text-decoration: none;
}
.post-foot a:hover {
  border-color: var(--line-3);
}
.post-foot small {
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.post-foot .next {
  text-align: right;
}

/* ------------------------------------------------------------ the changelog: releases on a timeline */
.log {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: var(--band);
}
.log-toc {
  position: sticky;
  top: calc(var(--bar-h) + var(--ruler-h) + 28px);
  align-self: start;
  display: grid;
  gap: 2px;
  font-size: var(--fs-md);
}
.log-toc a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 10px;
  margin-left: -10px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--muted);
}
.log-toc a:hover {
  color: var(--fg);
  background: var(--sel);
}
.log-toc .kg {
  color: var(--faint);
}
.release {
  position: relative;
}
.release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.release-head .tag {
  color: var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line-2));
}
.log .prose {
  max-width: 78ch;
}
.log .prose h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 22px;
  margin-top: 2em;
}
.log .prose h3::before {
  content: '';
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--brand);
  mask: var(--kg-diamond) center / contain no-repeat;
  -webkit-mask: var(--kg-diamond) center / contain no-repeat;
}
@media (max-width: 860px) {
  .log {
    grid-template-columns: minmax(0, 1fr);
  }
  .log-toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .log-toc a {
    margin-left: 0;
    border: 1px solid var(--line-2);
  }
}

/* ------------------------------------------------------------ the footer */
.foot {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-16) var(--sp-12);
  color: var(--muted);
  font-size: var(--fs-lg);
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
}
.foot .logo {
  height: 30px;
  color: var(--fg);
}
.foot-line {
  color: var(--fg-2);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.foot-cols nav {
  display: grid;
  gap: 10px;
  align-content: start;
}
.foot-cols h2 {
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.foot-cols a {
  text-decoration: none;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
}
.foot-cols a:hover {
  color: var(--fg);
}
.foot-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
}
.foot-end p {
  max-width: 70ch;
}
.foot-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.foot-meta a {
  text-decoration: none;
}
.foot-meta a:hover {
  color: var(--fg);
}
@media (max-width: 999px) {
  .foot-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .foot-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ reveal: at rest everything shows */
.rv {
  transition:
    opacity 0.8s var(--ease-out),
    transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.armed .rv {
  opacity: 0;
  transform: translateY(16px);
}
.armed.in .rv {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* ============================================================ the home page: the film's story, the loop's four steps */
:root[data-theme='light'] {
  --video-page: var(--ink-1);
}
:root[data-theme='light'] .for-dark,
:root:not([data-theme='light']) .for-light {
  display: none !important;
}
.hero {
  position: relative;
  isolation: isolate;
  /* the light blends with the page, so the hero carries the page's colour inside its own group; in the dark, the
     black the logo's video decodes to, so its box never shows */
  background: var(--video-page, var(--page));
  padding-block: clamp(16px, 3vw, 40px) clamp(72px, 9vw, 120px);
  overflow-x: clip;
}
/* above the logo and the words, so the light falls on them too; it never takes a click */
.hero-light {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
:root[data-theme='light'] .hero-light {
  mix-blend-mode: multiply;
}
.hero-light.on {
  opacity: 1;
}
.hero-in {
  position: relative;
  z-index: 1;
}
.stage {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  aspect-ratio: 2.4 / 1;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent);
  mask-composite: intersect;
}
.stage .poster,
.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stage video {
  opacity: 0;
  transition: opacity 0.2s;
}
.stage video.playing {
  opacity: 1;
}
.replay {
  position: absolute;
  right: 1.5%;
  bottom: 3%;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring),
    color var(--dur);
}
.replay.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.replay:hover {
  color: var(--fg);
}
.hero-copy {
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
  margin-top: clamp(4px, 1vw, 12px);
}
.hero-copy h1 {
  font-size: var(--fs-hero);
  line-height: 0.98;
}
.hero-copy > * {
  animation: up 1s var(--ease-out) both;
  animation-delay: calc(0.12s + var(--i, 0) * 0.09s);
}
@keyframes up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin: 4px 0 0;
}
/* under the way in: the film, a quiet link (it opens over the page: .film-box) */
.hero-film {
  margin-top: -6px;
}
.hero-film a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  color: var(--fg-2);
  font-size: var(--fs-md);
  text-decoration: none;
  transition:
    color var(--dur),
    border-color var(--dur);
}
.hero-film a:hover {
  color: var(--fg);
  border-color: var(--line-3);
}
.hero-film .ic {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--page);
}
.hero-film .mono {
  color: var(--muted);
  font-size: var(--fs-sm);
}
/* under the way in: the trial every account starts with (a brand moment: the orange keyframe) */
.hero-trial {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: -8px;
  color: var(--fg-2);
  font-size: var(--fs-md);
}
.hero-trial b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.hero-trial .kg {
  width: 11px;
  height: 11px;
  color: var(--brand);
  filter: drop-shadow(0 0 6px var(--brand-glow));
}
.chapter,
.band {
  position: relative;
  padding-block: var(--band);
  border-top: 1px solid var(--line);
  overflow-x: clip;
}
/* a step's second scene (recording in Note it, what changed in Your agent fixes it, final in Approve it): part of the
   step before it, so no line, no label and no keyframe of its own */
.chapter.sub {
  padding-top: 0;
  border-top: 0;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.split.flip > .text {
  order: 2;
}
@media (max-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split.flip > .text {
    order: 0;
  }
}
.text {
  display: grid;
  gap: 18px;
  align-content: start;
}
.text.center {
  justify-items: center;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.text.center .lede {
  margin-inline: auto;
}
.gives,
.proofs {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 14px;
}
.gives li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--fg-2);
}
.gives .kg {
  margin-top: 7px;
  color: var(--brand);
}
.gives b {
  color: var(--fg);
}

/* around the loop, open source, latest */
.kit {
  margin-top: clamp(32px, 4vw, 48px);
}
/* everything around the loop: a menu of the docs, three columns, each line a link */
.else {
  margin-top: clamp(28px, 3.6vw, 44px);
}
.else-more {
  margin-top: clamp(28px, 3.6vw, 44px);
}
.else ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.else ul {
  row-gap: clamp(22px, 2.6vw, 34px);
}
.else a {
  display: grid;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
/* each feature's picture (featureArt.ts): a fixed box, one piece of the app in it, in the app's own look; the dark
   ones (a terminal, the film, the phone) are islands, the rest the page's own surfaces */
.fa {
  position: relative;
  container: fa / inline-size;
  aspect-ratio: 2 / 1;
  margin-bottom: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 3%, var(--page));
  border: 1px solid var(--line);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  transition: border-color var(--dur);
}
/* a picture is laid out once, at its size in a desktop's box (331 px inside the border), then centred and scaled with
   its box like an image (tan(atan2()) turns the width into a ratio): the same composition in every column, never cut.
   .else raises it over the parts' own rules (.sc-stage is relative) */
.else .fa > * {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  scale: tan(atan2(100cqw, 331px));
}
.else a:hover .fa {
  border-color: var(--line-3);
}
.fa-doc {
  display: grid;
  gap: 8px;
  width: 300px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-float);
  color: var(--fg-2);
}
.fa-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
}
.fa-head b {
  color: var(--fg);
}
.fa-rule,
.fa-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
}
.fa-rule .kg,
.fa-item .kg {
  flex: none;
  width: 9px;
  height: 9px;
  color: var(--muted);
}
.fa-item b,
.fa-q {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.fa-sub {
  color: var(--muted);
  font-size: 11px;
}
.fa-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fa-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-size: 11px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.fa-btn.primary {
  background: var(--raise-sheen), var(--brand-deep);
  border-color: transparent;
  color: var(--on-brand);
}
.fa-url {
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 10.5px;
  overflow-wrap: anywhere;
}
.fa-seg {
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
}
.fa-seg.on {
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
  color: var(--fg);
}
.fa-seg:has(.fa-pm) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fa-pm {
  width: 11px;
  height: 11px;
  flex: none;
}
/* the stages on one track, each in its colour */
.fa-stages {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 18px 14px 16px;
}
.fa-track {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 25px;
  height: 1px;
  background: var(--line-3);
}
.fa-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--fg-2);
}
.fa-stage .kg {
  width: 11px;
  height: 11px;
  padding: 0 3px;
  box-sizing: content-box;
  background: var(--panel);
  color: var(--fg-2);
}
.fa-stage.now .kg {
  width: 15px;
  height: 15px;
  margin-top: -2px;
  color: var(--fg);
}
.fa-stage:not(.done, .now) {
  opacity: 0.5;
}
.fa-stage.now span {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.st-tr {
  color: var(--should);
}
.st-ip {
  color: var(--claude);
}
.st-cf {
  color: var(--nice);
}
.st-ap {
  color: var(--ok);
}
.st-fi {
  color: var(--fg);
}
.fa-stage span {
  color: var(--fg-2);
}
.fa-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--brand-deep);
  color: var(--on-brand) !important;
  font-size: 10px;
}
.fa-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--fg);
}
.fa-line .mono {
  color: var(--faint);
  font-size: 10px;
}
.fa-line mark {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--fg);
}
/* a terminal: what is typed, then what it prints */
.fa-term {
  display: grid;
  gap: 4px;
  width: 303px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #101011;
  border: 1px solid #2a2a2c;
  box-shadow: var(--shadow-float);
  font-size: 10px;
}
.fa-cmd {
  color: #eeebe4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fa-cmd b {
  color: var(--brand);
}
.fa-out {
  color: #a7a39a;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fa-tree {
  gap: 2px;
}
/* the film's end card with what Auto-check found on it */
.fa-film {
  width: 303px;
  border-radius: 8px;
}
/* an Auto-check finding on the frame, as the player marks it (web/src/player/marks.ts) */
.fa-qa {
  position: absolute;
  border: 1.5px dashed #ffc043;
  border-radius: 3px;
  background: rgb(255 192 67 / 0.12);
}
.fa-qa > .mono {
  position: absolute;
  left: 0;
  bottom: calc(100% + 2px);
  color: #ffc043;
  font-size: max(7px, 0.9cqw);
  white-space: nowrap;
  text-shadow: 0 0 2px rgb(0 0 0 / 0.8);
}
.fa-rowpic {
  flex: none;
  width: 34px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}
.fa-i {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  border-radius: var(--r-full);
  border: 1px solid currentColor;
  font-size: 8px;
  font-style: italic;
  vertical-align: 1px;
}
.fa-flag {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgb(10 10 10 / 0.78);
  color: #eeebe4;
  font-size: 10.5px;
}
.fa-flag .kg {
  width: 8px;
  height: 8px;
  color: #ffc043;
}
/* a phone rising from the box's foot, a notification on it: hung from the top and scaled from there */
.else .fa > .fa-phone {
  top: calc(14 / 331 * 100cqw);
  translate: -50% 0;
  transform-origin: 50% 0;
}
.fa-phone {
  width: 133px;
  aspect-ratio: 9 / 19;
  border-radius: 18px 18px 0 0;
  border: 5px solid #1a1a1b;
  border-bottom: 0;
  background: #000;
  overflow: hidden;
}
.fa-phone .fa-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fa-note {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 14px;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 11px;
  background: rgb(250 248 243 / 0.95);
  color: #1b1a18;
  font-size: 10px;
  line-height: 1.3;
}
.else-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-strong);
  font-size: var(--fs-lg);
  color: var(--fg);
}
.else-t .ic {
  margin-left: auto;
  color: var(--faint);
  transition: color var(--dur);
}
.else-d {
  color: var(--fg-2);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.else a:hover .else-t .ic,
.else a:focus-visible .else-t .ic {
  color: var(--brand);
}
.else a:hover .else-t {
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 4px;
}
@media (max-width: 900px) {
  .else ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .else ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* under the agent's window: what you see while it works, and where to set it up */
.ag-caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-3);
  max-width: 62ch;
  margin: clamp(24px, 3vw, 36px) auto 0;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.ag-caption .kg {
  flex: none;
  color: var(--brand);
  transform: translateY(1px);
}
/* the agents it works with: their marks in one quiet row, names under them, and the way in */
.ag-with {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 44px);
}
.ag-with-head {
  color: var(--faint);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ag-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ag-logos li {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  width: 104px;
  height: 84px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.ag-logos li:hover {
  color: var(--fg);
  border-color: var(--line-3);
}
.ag-logo {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.ic.ag-logo {
  fill: none;
}
@media (max-width: 560px) {
  .ag-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .ag-logos li {
    width: auto;
    height: 72px;
    padding-inline: 4px;
    gap: 6px;
    font-size: 10.5px;
    line-height: 1.2;
    text-align: center;
  }
  .ag-logo {
    width: 20px;
    height: 20px;
  }
}
/* what you get, as one quiet panel of facts: a keyframe, the fact and a line on it, and a word to remember it by */
.proofs {
  gap: 0;
  padding: 6px 22px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.proofs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 18px 0;
}
.proofs li + li {
  border-top: 1px solid var(--line);
}
.proofs h3 {
  font-size: var(--fs-lg);
}
.proofs .kg {
  width: 12px;
  height: 12px;
  color: var(--brand);
}
.proofs p {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-md);
}
.proofs li > .mono {
  color: var(--faint);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .proofs li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .proofs li > .mono {
    display: none;
  }
}
.small {
  font-size: var(--fs-lg);
  color: var(--muted);
}
/* under the last scene: where the scenes' footage comes from */
.footage-note {
  margin-top: var(--sp-5);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.latest {
  margin-top: clamp(32px, 4vw, 48px);
}

/* the end: the o of the logo film, written and popping into its frame once more; its window lights the room and
   shines through the words, which cast their shadows down the section (the top's light, with the words in its way) */
.finale {
  position: relative;
  /* its light blends with the page, as the hero's does */
  isolation: isolate;
  background: var(--page);
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
  padding-block: clamp(96px, 13vw, 170px);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.finale .lede {
  text-align: center;
}
.finale > :not(.finale-light, .finale-o) {
  padding-inline: var(--gut);
}
/* the o alone, in a square with room for its bloom (the o itself is about a third of it); the edges fade into the page */
.finale-o {
  --o: clamp(300px, 34vw, 420px);
  position: relative;
  width: var(--o);
  aspect-ratio: 1;
  margin-block: calc(var(--o) * -0.3) calc(var(--o) * -0.24);
}
.finale-o-film {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent);
  mask-image: radial-gradient(closest-side, #000 70%, transparent);
}
.finale-o-film .poster,
.finale-o-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.finale-o-film video {
  opacity: 0;
  transition: opacity 0.2s;
}
.finale-o-film video.playing {
  opacity: 1;
}
/* when the film is going to play, the o isn't there yet: the pen writes it (the still is for no motion, no film) */
.finale-o-film.to-write .poster {
  visibility: hidden;
}
.finale-o .replay {
  right: 22%;
  bottom: 26%;
}
/* the film's square reaches under the words; they stay above it */
.finale > h2,
.finale > p {
  position: relative;
  z-index: 1;
}
/* the headline's words, each free to take the wave's push */
.finale .kw {
  display: inline-block;
}
/* the light lies over everything, as at the top: screened onto the dark page, a warm tint and shadows on paper */
.finale-light {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
:root[data-theme='light'] .finale-light {
  mix-blend-mode: multiply;
}
.finale-light.on {
  opacity: 1;
}

/* 404 */
.lost {
  min-height: 60vh;
  display: grid;
  align-content: center;
  gap: 18px;
  padding-block: var(--band);
}
.lost .actions {
  justify-content: start;
}

/* the brand kit (/brand/): tiles on the brand's own grounds (night and paper, whatever the theme), the logo measured,
   the colours to copy, every file to download */
.bk {
  padding-bottom: var(--band);
}
.bk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}
.bk-stage {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--video-page, var(--page));
  border: 1px solid var(--line);
}
.bk-stage .poster,
.bk-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bk-stage video {
  opacity: 0;
  transition: opacity 0.2s;
}
.bk-stage video.playing {
  opacity: 1;
}
.bk-stage .replay {
  right: 14px;
  bottom: 14px;
}
.bk-get {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: var(--sp-3);
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line-2);
}
.bk-get h2 {
  font-size: var(--fs-h3);
}
.bk-get p:not(.mono) {
  color: var(--fg-2);
}
.bk-get .mono {
  color: var(--muted);
}
@media (max-width: 860px) {
  .bk-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bk-sec {
  margin-top: var(--band);
  scroll-margin-top: calc(var(--bar-h) + var(--ruler-h) + 24px);
}
.bk-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.bk-head h2 {
  font-size: clamp(28px, 3.2vw, 40px);
}
.bk-grid {
  display: grid;
  gap: var(--sp-3);
}
.bk-logos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bk-marks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .bk-logos {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bk-tile {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.bk-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 8;
  padding: 8% 10%;
}
.bk-sm .bk-art {
  aspect-ratio: 4 / 3;
  padding: 14%;
}
.bk-night .bk-art {
  background: #0d0d0e;
}
.bk-paper .bk-art {
  background: #f2efe7;
}
.bk-art img {
  width: 100%;
  height: auto;
  max-height: 100%;
}
.bk-sm .bk-art img {
  width: auto;
  height: 100%;
}
.bk-art img.inv {
  filter: invert(1);
}
.bk-tile figcaption,
.bk-icon figcaption,
.bk-film figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 16px 14px;
  font-size: var(--fs-md);
}
.bk-dl {
  font: var(--fw-ui) var(--fs-sm) / 1.5 var(--mono);
  font-stretch: 87.5%;
  color: var(--muted);
}
.bk-dl a {
  color: var(--fg-2);
  text-underline-offset: 3px;
  text-decoration-color: var(--line-3);
}
.bk-dl a:hover {
  color: var(--fg);
}
.bk-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
@media (max-width: 900px) {
  .bk-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bk-plate {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.bk-plate svg {
  display: block;
  width: 100%;
  height: auto;
}
.bk-plate figcaption {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  color: var(--fg-2);
}
.bk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font: var(--fw-ui) var(--fs-sm) / 1.4 var(--mono);
  font-stretch: 87.5%;
  color: var(--muted);
}
.bk-legend b {
  font-weight: var(--fw-strong);
}
.bk-legend .k-oc {
  color: var(--fg);
}
/* the construction: the square, the outline's box, the slant, the two centres */
.bk-build .g-sq {
  fill: none;
  stroke: var(--line-3);
  stroke-width: 0.45;
  stroke-dasharray: 2 1.6;
}
.bk-build .g-box {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.35;
}
.bk-build .g-mark {
  fill: var(--fg);
}
.bk-build .g-mark .fw {
  fill: var(--brand);
}
.bk-build .g-slant {
  stroke: var(--brand);
  stroke-width: 0.55;
}
.bk-build .g-vert {
  stroke: var(--muted);
  stroke-width: 0.35;
  stroke-dasharray: 1.4 1.2;
}
.bk-build .g-bc {
  stroke: var(--muted);
  stroke-width: 0.5;
}
.bk-build .g-oc {
  stroke: var(--fg);
  stroke-width: 0.9;
}
.bk-build .g-t {
  font: 500 3.2px var(--mono);
  fill: var(--muted);
}
.bk-build .g-t.on {
  fill: var(--fg);
}
/* the room: the zone the logo keeps clear, the logo, x on every side */
.bk-room .g-zone {
  fill: color-mix(in srgb, var(--brand) 7%, transparent);
  stroke: var(--brand);
  stroke-width: 1.4;
  stroke-dasharray: 7 6;
}
.bk-room .g-ink {
  fill: var(--panel);
  stroke: var(--line-3);
  stroke-width: 1;
}
.bk-room .g-logo {
  fill: var(--fg);
}
.bk-room .g-dim {
  stroke: var(--brand);
  stroke-width: 1.6;
}
.bk-room .g-x,
.g-xl {
  font: italic 650 22px var(--ui);
  fill: var(--brand-deep);
  color: var(--brand-deep);
}
:root:not([data-theme='light']) .bk-room .g-x,
:root:not([data-theme='light']) .g-xl {
  fill: var(--brand-hot);
  color: var(--brand-hot);
}
.bk-min {
  display: grid;
  gap: var(--sp-3);
}
.bk-min-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.bk-min-row .mono {
  color: var(--muted);
}
.logo.bk-20 {
  height: 20px;
}
.bk-mk {
  display: block;
  fill: currentColor;
}
.bk-mk.bk-16 {
  width: 16px;
  height: 16px;
}
/* the app icons, with the corners the system gives them */
.bk-icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.bk-icon {
  margin: 0;
  display: grid;
  justify-items: center;
  padding: clamp(24px, 4vw, 48px) 16px 4px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.bk-icon img {
  width: min(220px, 60%);
  height: auto;
  border-radius: 22.4%;
  box-shadow: var(--shadow-raise);
}
.bk-icon figcaption {
  width: 100%;
  margin-top: var(--sp-4);
}
.bk-fav {
  grid-column: 1 / -1;
  color: var(--fg-2);
}
@media (max-width: 560px) {
  .bk-icons {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* colour */
.bk-swatches {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.bk-swatch {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}
.bk-chip {
  aspect-ratio: 16 / 7;
  border-bottom: 1px solid var(--line);
}
.bk-swatch figcaption {
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
}
.bk-swatch .small {
  color: var(--fg-2);
}
.bk-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.bk-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-sm);
  padding-inline: 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--fg-2);
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  font-stretch: 87.5%;
  cursor: pointer;
  transition:
    color var(--dur),
    border-color var(--dur);
}
.bk-copy:hover {
  color: var(--fg);
  border-color: var(--line-3);
}
.bk-copy.done {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line-2));
}
.bk-files {
  margin-top: var(--sp-4);
  color: var(--fg-2);
}
/* type */
.bk-type {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .bk-type {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bk-face {
  margin: 0;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.bk-spec {
  min-height: 56px;
  display: flex;
  align-items: center;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
}
.bk-spec.ui {
  font-family: var(--display);
  font-weight: var(--fw-strong);
  font-stretch: 87.5%;
  letter-spacing: -0.025em;
}
.bk-spec .logo {
  height: 46px;
}
.bk-spec-sm {
  color: var(--muted);
  font-size: var(--fs-md);
}
.bk-face figcaption {
  display: grid;
  gap: 4px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.bk-face figcaption .small:not(a) {
  color: var(--fg-2);
}
/* motion */
.bk-films {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .bk-films {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bk-film {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.bk-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.bk-film.bk-night video {
  background: #0a0a0a;
}
.bk-film.bk-paper video {
  background: #f2efe7;
}
/* the app */
.bk-screens {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .bk-screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .bk-screens {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bk-screen {
  margin: 0;
  display: grid;
  gap: 10px;
}
.bk-screen img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.bk-screen figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: var(--fs-md);
  color: var(--fg-2);
}
/* what not to do: the real logo, misused on purpose */
.bk-donts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .bk-donts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .bk-donts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bk-dont .bk-art {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.bk-dont .logo {
  width: 62%;
  height: auto;
  color: #1b1a18;
}
.bk-dont figcaption {
  justify-content: start;
  gap: 8px;
  color: var(--fg-2);
}
.bk-x {
  color: var(--danger);
  align-self: center;
}
.bk-no-stretch .logo {
  transform: scaleX(1.42);
}
.bk-no-recolour .logo {
  color: #2d3a8c;
  --win: #29a3d6;
}
.bk-no-effects .logo {
  filter: drop-shadow(0 7px 5px rgb(0 0 0 / 0.45)) drop-shadow(0 0 14px rgb(242 90 29 / 0.85));
}
.bk-no-outline .logo {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  --win: none;
}
.bk-no-slant .logo {
  transform: rotate(-11deg);
}
.bk-typed {
  font: 600 clamp(40px, 4.6vw, 58px) / 1 var(--ui);
  letter-spacing: -0.02em;
  color: #1b1a18;
}
.bk-typed b {
  display: inline-block;
  margin-left: 0.04em;
  padding: 0 0.1em;
  border-radius: 0.14em;
  background: #f25a1d;
  font-weight: 600;
}
/* the name and the words */
.bk-wordset {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 900px) {
  .bk-wordset {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bk-words {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.bk-words figcaption {
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-words blockquote {
  margin: 0;
  color: var(--fg);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.bk-again {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}
.bk-again .mono {
  color: var(--muted);
}
pre.licence {
  white-space: pre-wrap;
  font: var(--fw-text) var(--fs-md) / 1.6 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-2);
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.gives.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 40px;
  margin-top: var(--sp-8);
  max-width: 980px;
  margin-inline: auto;
}
@media (max-width: 760px) {
  .gives.grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ pricing: two switches (where Lampo runs, how it is
   billed), each place's plans, what holds everywhere, questions. The switches are radio buttons this sheet reads with
   :has(); a browser without it shows both tables and both prices */
.pricing {
  padding-bottom: var(--band);
}
.price-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-8);
}
.seg {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: var(--panel);
}
.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.seg :is(label, button) {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--h);
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: var(--fw-ui);
  cursor: pointer;
  transition:
    color var(--dur),
    background var(--dur),
    box-shadow var(--dur);
}
.seg :is(label, button):hover {
  color: var(--fg);
}
.seg :is(input:checked + label, [aria-pressed='true']) {
  color: var(--fg);
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
}
.seg :is(input:focus-visible + label, button:focus-visible) {
  box-shadow: var(--focus-ring);
}
/* what billing yearly saves: a small green pill beside Yearly, in the page's own type */
.seg-note {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
  font: var(--fw-strong) var(--fs-xs) / 1 var(--ui);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pricing:has(#run-self:checked) :is(.tier-cloud, .n-cloud, .cmp-cloud),
.pricing:has(#run-cloud:checked) :is(.tier-self, .n-self, .cmp-self) {
  display: none;
}
/* a price rolls between its yearly and monthly amounts: both stand in one cell (it is as wide as the wider), the one
   going out lifts away, the one coming in rises from under it; the cards follow one another */
.roll {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
}
.roll > * {
  grid-area: 1 / 1;
  transition:
    transform 0.6s var(--ease-out),
    opacity 0.35s,
    visibility 0.6s;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.pricing:has(#bill-year:checked) .roll > .p-month {
  transform: translateY(80%);
  opacity: 0;
  visibility: hidden;
}
.pricing:has(#bill-month:checked) .roll > .p-year {
  transform: translateY(-80%);
  opacity: 0;
  visibility: hidden;
}
/* a browser without :has() shows the yearly prices only */
@supports not selector(:has(*)) {
  .roll > .p-month {
    display: none;
  }
}
/* the switches' picked side is a thumb that slides there (pricing.js places it; without it the label is raised) */
.seg {
  position: relative;
}
.seg-thumb {
  display: none;
}
.seg.slides .seg-thumb {
  display: block;
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--w, 0);
  border-radius: var(--r-full);
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
  transform: translateX(var(--x, 0));
  transition:
    transform 0.45s var(--ease-spring),
    width 0.45s var(--ease-spring);
}
.seg.slides .seg-thumb.still {
  transition: none;
}
.seg.slides :is(input:checked + label, [aria-pressed='true']) {
  background: none;
  box-shadow: none;
}
.seg :is(label, button) {
  position: relative;
}
/* the plans come in one after another: on the page's first paint and when the switch shows the other place's */
@media (prefers-reduced-motion: no-preference) {
  .tier .plan,
  .cmp-table tbody {
    transition:
      opacity 0.5s var(--ease-out),
      translate 0.6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .cmp-table tbody {
    transition-delay: calc(80ms + var(--g, 0) * 40ms);
  }
  @starting-style {
    .tier .plan {
      opacity: 0;
      translate: 0 18px;
    }
    .cmp-table tbody {
      opacity: 0;
    }
  }
}
.tier-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-h3);
}
.tier-name span {
  font: var(--fw-text) var(--fs-md) / 1.4 var(--ui);
  color: var(--muted);
}
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.plans.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .plans.three {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}
.plan {
  display: grid;
  /* the plans' rows line up: name, who it is for, price, billing, the button, what it holds */
  grid-row: span 6;
  grid-template-rows: subgrid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.plan.lead {
  border-color: var(--line-3);
}
.plan h3 {
  font-size: 20px;
}
.plan-line {
  color: var(--muted);
  font-size: var(--fs-md);
}
.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sp-2);
  margin-top: var(--sp-2);
}
.plan-price b {
  font-family: var(--display);
  font-weight: var(--fw-strong);
  font-stretch: 87.5%;
  font-size: clamp(36px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.plan-price > span:not(.roll),
.plan-per {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.plan-per {
  margin-top: calc(-1 * var(--sp-1));
}
.plan-go {
  margin-top: var(--sp-2);
}
.plan-go .btn {
  width: 100%;
  justify-content: center;
}
.plan-facts {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.plan-facts p {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.plan-facts ul {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan-facts li,
.plans-note,
.everywhere li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.plan-facts li {
  color: var(--fg-2);
}
.plan-facts .kg,
.plans-note .kg,
.everywhere .kg {
  flex: none;
  color: var(--faint);
  transform: translateY(1px);
}
.plans-note {
  margin-top: var(--sp-6);
  color: var(--muted);
}
/* the trial, where the Cloud plans start: the plan cards' surface with a warm light from its corner, a headline at a
   section's size, and its fourteen days on the site's own time strip (the bar's ruler, keyframes and playhead). The
   playhead runs from the first day to the last as the band comes into view, each keyframe filled as it passes and the
   last lit; at rest (no script, reduced motion) it stands on the last day */
.trial {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'text go' 'tl tl' 'ends ends';
  align-items: end;
  gap: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-6);
  padding: var(--sp-8);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: radial-gradient(90% 140% at 0% 0%, var(--brand-haze), transparent 55%), var(--panel);
}
/* a light that runs round the band's edge: a short arc of the brand's orange in a ring the width of its border (a
   conic gradient turned by a registered angle, masked to the ring), while the band is in view (pricing.js) and never
   under reduced motion */
@property --trial-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
/* the light, and its glow: the same ring blurred (a blur on the ring's own element would come before its mask) */
.trial::before,
.trial-glow > span {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--trial-a),
    transparent 0deg var(--trial-tail),
    color-mix(in srgb, var(--brand) 30%, transparent) calc((var(--trial-tail) + 325deg) / 2),
    var(--brand) 325deg,
    var(--trial-head) 347deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.trial::before {
  opacity: 0;
  transition: opacity 0.8s;
}
.trial-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(9px);
  opacity: 0;
  transition: opacity 0.8s;
  pointer-events: none;
}
.trial-glow > span {
  inset: -2px;
  padding: 4px;
}
/* on dark the arc is long and glows; on paper a glow reads as a stain, so the arc is shorter and its glow faint */
.trial {
  --trial-tail: 200deg;
  --trial-head: var(--brand-hot);
  --trial-glow: 0.85;
}
:root[data-theme='light'] .trial {
  --trial-tail: 280deg;
  --trial-head: var(--brand);
  --trial-glow: 0.3;
}
@media (prefers-reduced-motion: no-preference) {
  .trial[data-shine]::before,
  .trial[data-shine] .trial-glow > span {
    animation: trial-shine 7s linear infinite;
  }
  .trial[data-shine]::before {
    opacity: 1;
  }
  .trial[data-shine] .trial-glow {
    opacity: var(--trial-glow);
  }
}
@keyframes trial-shine {
  to {
    --trial-a: 360deg;
  }
}
.trial-text {
  grid-area: text;
  display: grid;
  gap: var(--sp-2);
}
.trial-eye {
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.trial h3 {
  font-size: clamp(30px, 3.4vw, 44px);
  font-stretch: 87.5%;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.trial-n {
  color: var(--brand);
}
.trial-text p:not(.trial-eye) {
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.trial-go {
  grid-area: go;
}
/* the time strip: the bar's ruler under fourteen of the bar's keyframes, and its playhead */
.trial-tl {
  grid-area: tl;
  position: relative;
  height: 28px;
}
.trial-tl::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 10px;
  background: var(--ruler) left bottom / 32px 10px repeat-x;
  opacity: 0.9;
}
.trial-track {
  position: absolute;
  inset: 0 7px;
  container-type: inline-size;
}
.trial-mk {
  position: absolute;
  top: 0;
  left: calc(var(--d) / 13 * 100%);
  display: grid;
  color: var(--muted);
  translate: -50% 0;
}
.trial-mk .kg {
  grid-area: 1 / 1;
  width: 13px;
  height: 13px;
}
.trial-mk .a {
  opacity: 0;
}
.trial-mk.last {
  color: var(--brand);
}
.trial-mk.last .b {
  transform: scale(1.25);
}
.trial-ph {
  position: absolute;
  top: -2px;
  bottom: 0;
  left: 0;
  transform: translateX(100cqw);
}
.trial-ph::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -1px;
  width: 2px;
  border-radius: 1px;
  background: var(--brand);
}
.trial-ph::after {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  border: 5px solid transparent;
  border-top: 6px solid var(--brand);
}
@media (prefers-reduced-motion: no-preference) {
  .trial.armed .trial-ph {
    transform: none;
  }
  .trial.armed .trial-mk {
    color: var(--faint);
  }
  .trial.armed .trial-mk .a {
    opacity: 1;
  }
  .trial.armed .trial-mk .b {
    opacity: 0;
    transform: scale(0.4);
  }
  .trial.armed.in .trial-ph {
    transform: translateX(100cqw);
    transition: transform 2.8s cubic-bezier(0.45, 0, 0.55, 1) 0.3s;
  }
  .trial.armed.in .trial-mk {
    --at: calc(0.3s + var(--d) / 13 * 2.8s);
    color: var(--muted);
    transition: color 0.2s var(--at);
  }
  .trial.armed.in .trial-mk.last {
    color: var(--brand);
  }
  .trial.armed.in .trial-mk .a {
    opacity: 0;
    transition: opacity 0.2s var(--at);
  }
  .trial.armed.in .trial-mk .b {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.2s var(--at),
      transform 0.45s var(--ease-spring) var(--at);
  }
  .trial.armed.in .trial-mk.last .b {
    transform: scale(1.25);
  }
}
.trial-ends {
  grid-area: ends;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: calc(-1 * var(--sp-3));
  color: var(--fg-2);
  font-size: var(--fs-sm);
}
.trial-ends > span {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: baseline;
  white-space: nowrap;
}
.trial-ends .mono {
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .trial {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'text' 'tl' 'ends' 'go';
    padding: var(--sp-6) var(--sp-4);
  }
  .trial-go {
    justify-self: start;
  }
  .trial-mk .kg {
    width: 11px;
    height: 11px;
  }
  .trial-ends {
    flex-direction: column;
    gap: var(--sp-1);
  }
}
/* on Team's card: it is the plan every account starts on */
.plan-trial {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--brand-haze);
  color: var(--brand);
  font: var(--fw-ui) var(--fs-2xs) / 1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 3px;
}
/* a feature that isn't built yet, said after it in text (lib/soon.ts): the same quiet words as in the plans and the
   comparison, after a dot, no box and no colour of its own */
.soon-tag {
  color: var(--muted);
  white-space: nowrap;
}
.soon-tag::before {
  content: '· ';
}
/* under the self-hosted plans: why running it yourself is safe */
.assure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}
.assure li {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.assure .kg {
  color: var(--fg);
}
.assure h3 {
  font-size: 18px;
}
.assure p {
  color: var(--fg-2);
}
@media (max-width: 860px) {
  .assure {
    grid-template-columns: minmax(0, 1fr);
  }
}
.everywhere {
  display: grid;
  gap: var(--sp-2);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: var(--sp-6) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--fg-2);
}
.everywhere .kg {
  color: var(--brand);
}
/* ---- compare plans: a head that stays under the bar while the rows go by (the plan, its price rolling with the
   switch, its button), a group per part of the product; on a phone one plan at a time, picked above the table */
.cmp {
  margin-top: clamp(56px, 7vw, 96px);
}
.cmp h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-6);
}
.cmp-pick {
  display: none;
}
.cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--fs-md);
}
.cmp-table th,
.cmp-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.cmp-table thead th {
  position: sticky;
  z-index: 3;
  top: calc(var(--bar-h) + var(--ruler-h));
  padding-block: 16px 14px;
  background: var(--page);
  border-bottom-color: var(--line-2);
  vertical-align: bottom;
}
.cmp-table thead th:first-child {
  width: 34%;
}
/* the title stands in the head's corner, on the plans' line, and stays there with the head; the heading itself is for
   the outline, and for a phone, whose head has no corner. Under the title, how the prices are billed (they roll with
   the switch, which is far above by then); a strut the prices' size keeps it on their line */
.cmp-table thead .cmp-corner {
  font-weight: var(--fw-text);
  vertical-align: top;
}
.cmp-price.cmp-bill {
  column-gap: 0;
}
.cmp-bill::before {
  content: '\200b';
  font: var(--fw-strong) 22px / 1 var(--display);
}
/* and its own billing switch, for the prices the head keeps in view: the top switch's look a size smaller, driving
   the same radios (pricing.js shows it; without it the corner says how the prices are billed) */
.cmp-corner [hidden] {
  display: none;
}
.seg.cmp-billing {
  --h: var(--h-sm);
  margin-top: 10px;
  font-size: var(--fs-sm);
}
.cmp-billing button {
  padding: 0 var(--sp-3);
}
/* what billing yearly saves, a size smaller still; where the corner is too narrow for it, the cards above say it */
.cmp-billing .seg-note {
  height: 16px;
  padding: 0 6px;
  font-size: var(--fs-2xs);
}
@media (max-width: 1023px) {
  .cmp-billing .seg-note {
    display: none;
  }
}
@media (min-width: 761px) {
  .cmp > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.cmp-table thead th[data-plan] {
  font-weight: var(--fw-text);
}
.cmp-name {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: var(--fw-strong);
}
.cmp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 6px 0 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.cmp-price b {
  color: var(--fg);
  font-family: var(--display);
  font-size: 22px;
  font-weight: var(--fw-strong);
  font-stretch: 87.5%;
  line-height: 1;
}
.cmp-table thead .btn {
  width: 100%;
  justify-content: center;
}
.cmp-group th {
  padding-top: 30px;
  color: var(--fg);
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-color: var(--line-2);
}
.cmp-table tbody th[scope='row'] {
  color: var(--fg);
  font-weight: var(--fw-text);
}
.cmp-note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.cmp-table td {
  color: var(--fg-2);
}
.cmp-table td.yes .kg {
  width: 11px;
  height: 11px;
  color: var(--fg);
  transform: translateY(2px);
}
.cmp-table td.no {
  color: var(--faint);
}
/* a feature that isn't built yet: said quietly, the same words in the cards and the table, no pill, no colour */
.plan-soon {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.plan-facts .plan-soon {
  margin-top: var(--sp-2);
}
/* the lead plan's column is the one the eye follows */
.cmp-table [data-plan='cloud-team'],
.cmp-table [data-plan='self-community'] {
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
}
.cmp-table thead [data-plan='cloud-team'],
.cmp-table thead [data-plan='self-community'] {
  background: color-mix(in srgb, var(--fg) 2.5%, var(--page));
}
@media (max-width: 760px) {
  .cmp-pick {
    display: flex;
    gap: 2px;
    margin: 0 0 var(--sp-4);
    padding: 3px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-full);
    background: var(--panel);
  }
  .cmp-pick input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .cmp-pick label {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--h);
    border-radius: var(--r-full);
    color: var(--muted);
    font-weight: var(--fw-ui);
    cursor: pointer;
  }
  .cmp-pick input:checked + label {
    color: var(--fg);
    background: var(--raise-sheen), var(--panel-2);
    box-shadow: var(--raise);
  }
  .cmp-pick input:focus-visible + label {
    box-shadow: var(--focus-ring);
  }
  /* each row a grid of two: the feature and the picked plan's cell; the head one bar under the site's: the plan, its
     price and its button */
  .cmp-table,
  .cmp-table tbody {
    display: block;
  }
  .cmp-table thead {
    display: block;
    position: sticky;
    z-index: 3;
    top: calc(var(--bar-h) + var(--ruler-h));
    background: var(--page);
  }
  .cmp-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  }
  .cmp-table thead tr {
    grid-template-columns: minmax(0, 1fr);
  }
  .cmp-table thead th:first-child {
    display: none;
  }
  .cmp-table thead th {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 2px;
  }
  .cmp-table thead .cmp-price {
    margin: 0;
  }
  .cmp-table thead .btn {
    width: auto;
  }
  .cmp-group th {
    grid-column: 1 / -1;
  }
  .cmp-table th,
  .cmp-table td {
    padding: 11px 6px;
  }
  /* one plan shows: the one picked above the table */
  .cmp-tier:has(#cmp-cloud-free:checked) [data-plan]:not([data-plan='cloud-free']),
  .cmp-tier:has(#cmp-cloud-solo:checked) [data-plan]:not([data-plan='cloud-solo']),
  .cmp-tier:has(#cmp-cloud-team:checked) [data-plan]:not([data-plan='cloud-team']),
  .cmp-tier:has(#cmp-cloud-business:checked) [data-plan]:not([data-plan='cloud-business']),
  .cmp-tier:has(#cmp-self-community:checked) [data-plan]:not([data-plan='self-community']),
  .cmp-tier:has(#cmp-self-team:checked) [data-plan]:not([data-plan='self-team']),
  .cmp-tier:has(#cmp-self-business:checked) [data-plan]:not([data-plan='self-business']) {
    display: none;
  }
  .cmp-table [data-plan] {
    background: none;
  }
  .cmp-table thead [data-plan] {
    background: var(--page);
  }
}
.faq {
  margin-top: clamp(56px, 7vw, 88px);
}
.faq h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-6);
}
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) clamp(28px, 4vw, 56px);
}
.faq-list h3 {
  font-size: 18px;
  margin-bottom: var(--sp-2);
}
.faq-list p {
  color: var(--fg-2);
  max-width: 60ch;
}
@media (max-width: 760px) {
  .faq-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.more-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
}
/* the end of a step on the home page: its product page, under the step's last scene */
.step-more {
  justify-content: center;
  margin: clamp(28px, 4vw, 44px) 0 0;
}

/* ============================================================ the scenes: the story's steps as small pieces of Lampo,
   coded, real footage in them. At rest (no script, reduced motion) each shows its last step; scenes.js arms them
   (.sc-armed: back to the first step) and plays them in view. Their shapes are fixed: nothing in them moves the page. */
.sc {
  position: relative;
  margin: clamp(28px, 4vw, 48px) auto 0;
  max-width: 1040px;
  font-size: var(--fs-md);
  line-height: 1.45;
}
.sc-win {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.sc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.sc-bar > i {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--line-3);
}
.sc-bar .mono {
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .sc-bar > i {
    display: none;
  }
  .sc-bar .mono {
    margin-left: 0;
  }
}
.sc-pill {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line-2));
  color: var(--fg-2);
  white-space: nowrap;
}
.sc-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
  overflow: hidden;
  container-type: inline-size;
}
.sc-stage.wide {
  aspect-ratio: 1280 / 548;
}
.sc-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the film's end card over the footage, as the film sets it; V2 has the typo fixed and the line lifted. Its sizes and
   places are footage.ts's (30 and 44 px on the 1280 × 548 frame), measured to the pixel against ffmpeg's drawing of
   the same fonts, so the box strip.json measures sits on it. Georgia, named first: Chrome doesn't give pages New York */
.sc-card {
  position: absolute;
  inset: 0;
  color: #eeebe4;
  text-align: center;
  pointer-events: none;
}
.sc-brand {
  position: absolute;
  left: 0;
  right: 0;
  top: 32.95%;
  font:
    500 2.3438cqw / 1 'Avenir Next',
    var(--ui);
  letter-spacing: 0.26em;
  padding-left: 0.26em;
}
.sc-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 57.85%;
  font:
    400 3.4375cqw / 1 Georgia,
    'Times New Roman',
    serif;
  transition: transform 0.9s var(--ease-out);
}
/* lifted by transform, never by top (that would move the layout): 24 px of the 1280 × 548 frame, 1.875 % of its width */
.sc-card.v2 .sc-line {
  transform: translateY(-1.875cqw);
}
/* the reviewer's box (the app's drawing red) and the changed area (orange): placed where strip.json says (scenes.ts),
   so they sit on the title as the film draws it */
.sc-box {
  position: absolute;
  border: 2px solid #ff3b5c;
  border-radius: 3px;
}
.sc-diff {
  position: absolute;
  border: 1.5px dashed rgb(238 235 228 / 0.9);
}
/* what changed, as the player outlines it (web/src/player/marks.ts): dashed off-white, its label over it */
.sc-diff > .mono {
  position: absolute;
  left: 0;
  bottom: calc(100% + 3px);
  color: #eeebe4;
  font-size: max(8px, 0.82cqw);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow:
    0 0 2px rgb(0 0 0 / 0.8),
    0 1px 3px rgb(0 0 0 / 0.6);
}
.sc-tl {
  position: relative;
  height: 34px;
  margin: 0 14px;
  border-top: 1px solid var(--line);
  container-type: inline-size;
}
.sc-ticks {
  position: absolute;
  inset: 11px 0 auto;
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 2.5%);
}
.sc-head {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -1px;
  width: 2px;
  border-radius: 1px;
  background: var(--brand);
  transform: translateX(calc(var(--p, 0.9) * 100cqw));
}
.sc-key {
  position: absolute;
  top: 9px;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
  color: var(--fg);
  transition:
    opacity 0.3s,
    transform 0.5s var(--ease-spring);
}
.sc-key .kg {
  width: 14px;
  height: 14px;
}
.sc-band {
  position: absolute;
  top: 9px;
  height: 16px;
  left: calc(var(--from) * 100%);
  width: calc((var(--to) - var(--from)) * 100%);
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent);
}
.sc-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 7px;
  border-radius: var(--r-full);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: var(--fs-xs);
}
.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 12px;
  border-radius: var(--r);
  background: var(--raise-sheen), var(--panel-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--raise);
  color: var(--fg);
  font-weight: var(--fw-strong);
  white-space: nowrap;
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    background 0.3s,
    color 0.3s;
}
.sc-btn.quiet {
  background: none;
  box-shadow: none;
  color: var(--fg-2);
}
.sc-btn.ok {
  background: var(--raise-sheen), var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand-deep) 70%, #000);
  color: var(--on-brand);
}
.sc-btn kbd {
  font-size: 10px;
  padding: 1px 4px;
  color: inherit;
  background: none;
  border-color: currentColor;
  opacity: 0.7;
}
.sc-btn.press {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--press);
}
.sc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 14px 14px;
}
.sc-note-line {
  color: var(--fg-2);
  font-size: var(--fs-xs);
}
/* ---- what changed: the film's three shots under its timeline and the changed stretch over them; the shot that plays
   is the one shown (a cut is a cut, no fade), the end card and its outline only in the road shot */
.sc-tl.changes {
  height: 48px;
}
.sc-tl.changes .sc-ticks {
  inset: 6px 0 auto;
  height: 7px;
}
.sc-shots {
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 24px;
}
.sc-shots span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * 100%);
  width: calc((var(--to) - var(--from)) * 100% - 2px);
  border-radius: 4px;
  background: center / cover no-repeat;
  opacity: 0.85;
}
.sc-tl.changes .sc-band {
  top: 14px;
  height: 30px;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border: 1.5px solid var(--brand);
}
.sc-changed [data-shot='1'] .shot3,
.sc-changed [data-shot='3'] .shot1,
.sc-changed [data-shot='1'] .sc-card,
.sc-changed [data-shot='1'] .sc-diff {
  visibility: hidden;
}
.sc-changed .sc-cursor {
  z-index: 3;
}
.sc-changed .sc-btn.on {
  border-color: var(--brand);
}

/* ---- the loop, as a timeline: four keyframes on a ruler, a playhead running through them, and the loop range from Check
   back to the agent. At rest every key is passed and the range shows */
.lp {
  max-width: 1080px;
  margin-top: clamp(44px, 6vw, 72px);
}
.lp-rule {
  position: relative;
  height: 64px;
  container-type: inline-size;
}
.lp-rule::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-3) 6%, var(--line-3) 94%, transparent);
}
.lp-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(100% / 64));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lp-key {
  position: absolute;
  top: 31px;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--page);
  border: 1px solid var(--line-2);
  color: var(--faint);
  transition:
    color 0.4s,
    border-color 0.4s,
    box-shadow 0.5s var(--ease-out);
}
.lp-key .kg {
  width: 12px;
  height: 12px;
}
.lp-key.past,
.lp:not(.sc-armed) .lp-key {
  color: var(--fg-2);
  border-color: var(--line-3);
}
.lp-key.now {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 65%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 14%, transparent);
}
/* the loop range, in to out: from the agent back from Check, as the editor draws a loop */
.lp-range {
  position: absolute;
  top: 27px;
  left: 37.5%;
  width: 25%;
  height: 36px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  border-inline-width: 3px;
  opacity: 0;
  transition: opacity 0.45s;
}
.lp-range span {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}
.lp-range.on,
.lp:not(.sc-armed) .lp-range {
  opacity: 1;
}
.lp-head {
  position: absolute;
  top: 18px;
  bottom: 2px;
  left: -1px;
  width: 2px;
  border-radius: 1px;
  background: var(--brand);
  transform: translateX(calc(var(--p, 1) * 100cqw));
}
.lp-head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -4px;
  width: 10px;
  height: 7px;
  background: var(--brand);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.lp-tc {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  translate: -50% 0;
  font-size: 11px;
  color: var(--brand);
  white-space: nowrap;
}
.lp:not(.sc-armed) .lp-head {
  opacity: 0;
}
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.lp-steps li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding-inline: 10px;
  color: var(--muted);
}
.lp-n {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.lp-steps b {
  font: var(--fw-strong) clamp(17px, 1.7vw, 21px) / 1.15 var(--display);
  font-stretch: 87.5%;
  color: var(--fg-2);
  transition: color 0.4s;
}
.lp-steps li.now b {
  color: var(--fg);
}
.lp-steps li.now .lp-n {
  color: var(--brand);
}
.lp-back {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: clamp(28px, 3.4vw, 40px);
  color: var(--muted);
}
.lp-back .kg {
  flex: none;
  color: var(--brand);
  transform: translateY(1px);
}
/* on a phone the loop stands up: the track on the left, the steps beside it a row each at their key's height, the
   playhead going down and "still wrong" taking it back up from Check to the agent. The scene's script is the same: the
   keys sit at --at and the playhead at --p, down the track instead of across it */
@media (max-width: 640px) {
  .lp {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 14px;
  }
  .lp-rule {
    grid-row: 1;
    grid-column: 1;
    height: auto;
    container-type: size;
  }
  .lp-rule::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--line-3) 6%, var(--line-3) 94%, transparent);
  }
  .lp-ticks {
    left: calc(50% - 4px);
    right: auto;
    top: 0;
    bottom: 0;
    width: 8px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px calc(100% / 32));
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  }
  .lp-key {
    top: calc(var(--at) * 100%);
    left: 50%;
    translate: -50% -50%;
  }
  .lp-range {
    top: 37.5%;
    left: 50%;
    width: 36px;
    height: 25%;
    translate: -50% 0;
    border-inline-width: 1px;
    border-block-width: 3px;
  }
  .lp-range span {
    top: 50%;
    bottom: auto;
    left: calc(100% + 5px);
    translate: 0 -50%;
    writing-mode: vertical-rl;
  }
  .lp-head {
    top: -1px;
    bottom: auto;
    left: 4px;
    right: 4px;
    width: auto;
    height: 2px;
    transform: translateY(calc(var(--p, 1) * 100cqh));
  }
  .lp-head::before {
    top: -4px;
    left: -1px;
    width: 7px;
    height: 10px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .lp-tc {
    display: none;
  }
  .lp-steps {
    grid-row: 1;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    margin: 0;
    text-align: left;
  }
  .lp-steps li {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-content: center;
    column-gap: 10px;
    row-gap: 2px;
    min-height: 68px;
    padding: 8px 12px;
    border-radius: var(--r-lg);
    transition: background 0.4s;
  }
  .lp-steps li.now {
    background: color-mix(in srgb, var(--fg) 5%, transparent);
  }
  .lp-n {
    grid-row: 1 / 3;
    align-self: center;
  }
  .lp-steps b {
    font-size: 19px;
  }
  .lp-steps li > span:last-child {
    grid-column: 2;
    font-size: var(--fs-sm);
  }
  .lp-back {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ---- the note: a second is 24 frames and the note is one of them. The second's frames come from the film's sprite;
   the found one lights and links down to itself, whole, with the box where Mia drew it and her note beside it */
.nt {
  max-width: 1080px;
}
.nt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.nt-was {
  position: relative;
  font: var(--fw-strong) clamp(18px, 2vw, 24px) / 1.2 var(--display);
  font-stretch: 87.5%;
  color: var(--fg-2);
}
/* struck through once the frame is found */
.nt-was::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: 55%;
  height: 2px;
  border-radius: 1px;
  background: var(--brand);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.nt.sc-armed:not(.found) .nt-was::after {
  transform: scaleX(0);
}
.nt-q {
  color: var(--muted);
  font-size: 11px;
}
.nt-row {
  position: relative;
}
/* the second on a strip of film: a dark band (both themes), its perforations above and below */
.nt-frames {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 12px 8px 8px;
  border-radius: 8px;
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.13) 0 1.6px, transparent 2px) 0 3px / 14px 6px repeat-x,
    #0b0b0c;
  list-style: none;
}
.nt-frames li {
  display: grid;
  gap: 5px;
}
.nt-frames li::before {
  content: '';
  aspect-ratio: 1.4;
  border-radius: 3px;
  background: url(footage/strip.jpg) calc(var(--x) * 100%) calc(var(--y) * 100%) / 1343% 600%;
  opacity: 0.72;
  transition:
    opacity 0.4s,
    box-shadow 0.4s,
    transform 0.45s var(--ease-spring);
}
.nt-frames span {
  color: rgb(255 255 255 / 0.38);
  font-size: 9px;
  text-align: center;
  transition: color 0.4s;
}
.nt-frames li.scan {
  position: relative;
  z-index: 2;
}
.nt-frames li[data-target] {
  position: relative;
  z-index: 1;
}
.nt-frames li[data-target]::before {
  opacity: 1;
  box-shadow:
    0 0 0 2px var(--brand),
    0 0 20px color-mix(in srgb, var(--brand) 45%, transparent);
  transform: scale(1.4);
}
.nt-frames li[data-target] span {
  color: var(--brand);
}
.nt.sc-armed:not(.found) .nt-frames li[data-target]:not(.scan)::before {
  opacity: 0.72;
  box-shadow: none;
  transform: none;
}
.nt.sc-armed:not(.found) .nt-frames li[data-target] span {
  color: rgb(255 255 255 / 0.38);
}
/* the scrub (scenes.js): the frame under it lights at once and lets go slowly, so a trail follows it across the strip;
   the frame it is after looks like any other until it is found */
.nt.sc-armed:not(.found) .nt-frames li.scan::before {
  opacity: 1;
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.92),
    0 0 16px rgb(255 255 255 / 0.3);
  transform: scale(1.12);
  transition: none;
}
.nt.sc-armed:not(.found) .nt-frames li.scan span {
  color: rgb(255 255 255 / 0.95);
  transition: none;
}
/* "around 0:12": the whole second, vaguely */
.nt-fuzz {
  position: absolute;
  inset: -7px -6px;
  border-radius: 9px;
  border: 1px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.nt.sc-armed:not(.found) .nt-fuzz {
  opacity: 1;
}
.nt-link {
  display: block;
  width: 2px;
  height: 34px;
  margin: 8px 0 0 calc(var(--at) * 100% - 1px);
  background: linear-gradient(var(--brand), color-mix(in srgb, var(--brand) 15%, transparent));
  transform-origin: top;
  transition: transform 0.5s var(--ease-out);
}
.nt.sc-armed:not(.found) .nt-link {
  transform: scaleY(0);
}
.sc-bar .nt-read {
  margin-left: auto;
  color: var(--brand);
  transition: opacity 0.4s;
}
.nt.sc-armed:not(.found) .nt-read {
  opacity: 0;
}
.nt-stage {
  position: relative;
  background: #050505;
}
.nt-pic {
  position: relative;
  container-type: inline-size;
}
.nt-img {
  display: block;
  width: 100%;
  height: auto;
}
.nt-box {
  position: absolute;
  border: 2px solid #ff3b5c;
  border-radius: 3px;
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease-spring);
}
.nt-note {
  position: absolute;
  left: calc(var(--left) + 2%);
  top: calc(var(--top) - 10%);
  width: min(31%, 300px);
  display: grid;
  gap: 7px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-size: 12px;
  transition:
    opacity 0.4s,
    transform 0.5s var(--ease-spring);
}
.nt.sc-armed:not(.found) :is(.nt-box, .nt-note) {
  opacity: 0;
  transform: scale(0.94);
}
.nt-exact {
  display: grid;
  gap: 7px;
}
.nt-vague {
  display: none;
}
@media (max-width: 700px) {
  /* on a phone the second is one row of frames that slides under a gate, as film runs through a projector: the frame
     the scrub is on (--i, scenes.js) stands in the middle under the playhead's mark, its number under it, and the
     found one stays there. The band and its perforations slide with the frames */
  .nt-row {
    --cell: 64px;
    --gap: 6px;
    overflow: hidden;
    container-type: inline-size;
    border-radius: 8px;
  }
  .nt-row::before {
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    width: 10px;
    height: 7px;
    translate: -50% 0;
    background: var(--brand);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .nt-frames {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--cell);
    gap: 0 var(--gap);
    width: max-content;
    padding: 14px var(--gap) 10px;
    border-radius: 0;
    transform: translateX(calc(50cqw - var(--gap) - var(--i, 0) * (var(--cell) + var(--gap)) - var(--cell) / 2));
    transition: transform 0.14s linear;
  }
  .nt-frames span {
    font-size: 10px;
  }
  .nt-frames li[data-target]::before {
    transform: scale(1.12);
  }
  .nt-fuzz {
    inset: 0;
    border-radius: 8px;
  }
  .nt-link {
    margin-left: calc(50% - 1px);
  }
  .nt-stage {
    background: none;
  }
  .nt-pic {
    background: #050505;
  }
  /* the note under the picture: Mia's words as she would have written them until the frame is found, then her note on
     it, both in one place so nothing moves */
  .nt-note {
    position: static;
    width: auto;
    margin: 10px 0 0;
  }
  /* one after the other, never both at once: what leaves goes first, what comes waits for it */
  .nt-note > div {
    grid-area: 1 / 1;
    transition: opacity 0.25s 0.25s;
  }
  .nt.found .nt-vague,
  .nt.sc-armed:not(.found) .nt-exact {
    transition-delay: 0s;
  }
  .nt-vague {
    display: grid;
    gap: 7px;
    align-content: start;
    opacity: 0;
  }
  .nt.sc-armed:not(.found) .nt-note {
    opacity: 1;
    transform: none;
  }
  .nt.sc-armed:not(.found) .nt-vague {
    opacity: 1;
  }
  .nt.sc-armed:not(.found) .nt-exact {
    opacity: 0;
  }
  .nt .sc-bar > .mono:not(.nt-read) {
    display: none;
  }
}

/* ---- the player at the top: Lampo's player as it looks, smaller; the launch film plays in it, the note on frame 295
   lights when the playhead reaches it, the agent fixes it. Its words change in place (.pl-swap: every state stacked in
   one cell), so the window never changes its shape */
.hero-shot {
  margin-top: clamp(44px, 6vw, 80px);
  animation: up 1.1s var(--ease-out) 0.42s both;
}
.pl {
  max-width: none;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.pl-win {
  container: pl / inline-size;
  border-radius: 14px;
  background: var(--page);
  border: 1px solid var(--line-2);
  box-shadow:
    0 50px 120px -40px rgb(0 0 0 / 0.65),
    var(--shadow-float);
  overflow: hidden;
}
.pl-swap {
  display: inline-grid;
}
.pl-swap > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s;
}
.pl-swap > span.on {
  opacity: 1;
}
.pl-top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pl-back {
  width: 7px;
  height: 7px;
  margin: 0 4px 0 2px;
  border-left: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
}
.pl-file {
  display: grid;
  line-height: 1.2;
}
.pl-file b {
  font-size: 12.5px;
}
.pl-file span {
  color: var(--muted);
  font-size: 10.5px;
}
.pl-ver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  font-weight: var(--fw-strong);
}
.pl-ver::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
}
.pl-gap {
  flex: 1;
}
.pl-tool {
  color: var(--muted);
}
.pl-agent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 10px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--claude) 38%, var(--line-2));
  background: var(--claude-bg);
}
.pl-agent .ag-logo {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--claude);
}
.pl-agent .pl-swap {
  color: var(--fg-2);
}
/* the agent's state, as the app's button shows it: an hourglass in the agent colour that turns while it runs */
.pl-agent::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  opacity: 0.6;
}
.pl-kg,
.ag-kg {
  color: var(--claude);
}
.pl.sc-armed .pl-kg,
.ag.sc-armed .ag-kg {
  animation: sc-turn 3.2s var(--ease-in-out) infinite;
}
@keyframes sc-turn {
  0%,
  40% {
    transform: rotate(0);
  }
  60%,
  100% {
    transform: rotate(180deg);
  }
}
/* where the video stands (lib/stage.ts), its glyph in the stage's colour; the words right-aligned in their cell so
   the glyph stays beside the button whichever state shows */
.pl-stage-line {
  display: inline-flex;
  color: var(--muted);
}
.pl-stage-line .pl-swap {
  justify-items: end;
}
.pl-stage-line b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.pl-stage-line [data-s='progress'] .kg {
  color: var(--claude);
}
.pl-stage-line [data-s='check'] .kg {
  color: var(--nice);
}
.pl-stage-line [data-s='review'] .kg {
  color: var(--fg-2);
}
/* the next step: three whole buttons stacked in one place, each its own size and right-aligned (only one shows): the
   app's quiet Decide ▾ while no step is yours, the split primary (icon, words | chevron) for a step */
.pl-ctas .pl-swap {
  justify-items: end;
}
.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-left: 12px;
  border-radius: 8px;
  font-weight: var(--fw-strong);
}
.pl-btn.primary {
  background: var(--raise-sheen), var(--brand-deep);
  box-shadow: var(--raise);
  color: var(--on-brand);
}
.pl-btn.quiet {
  padding-right: 10px;
  background: var(--raise-sheen), var(--panel-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--raise);
  color: var(--fg);
}
.pl-more {
  display: inline-grid;
  place-items: center;
  align-self: stretch;
  width: 26px;
  margin-left: 4px;
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.pl-chev {
  width: 5px;
  height: 5px;
  margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  opacity: 0.65;
}
.pl-more .pl-chev {
  margin-left: 0;
}
.sc-line .pl-swap > span {
  justify-content: center;
}
.pl-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 29%, 320px);
}
.pl-main {
  min-width: 0;
}
.pl-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #050505;
  overflow: hidden;
}
/* on a phone the stage is the film's own shape: no black bands above and below it */
@media (max-width: 700px) {
  .pl-stage {
    aspect-ratio: auto;
  }
}
.pl-play .pl-i-pause,
.pl-playing .pl-play .pl-i-play {
  display: none;
}
.pl-playing .pl-play .pl-i-pause {
  display: block;
}
.pl-pic {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 548;
  overflow: hidden;
  container-type: inline-size;
}
.pl-pic .sc-box {
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease-spring);
}
.pl-mark {
  position: absolute;
  padding: 1px 6px;
  border-radius: 4px;
  background: #ff3b5c;
  color: #fff;
  font-size: 9.5px;
  transition: opacity 0.35s;
}
.pl [data-box]:not(.on),
.pl [data-mark]:not(.on) {
  opacity: 0;
}
.pl [data-box]:not(.on) {
  transform: scale(0.94);
}
.pl-res {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: #77736b;
  font-size: 10px;
}
.pl-transport {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
}
.pl-play {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--fg);
  color: var(--page);
}
.pl-tc {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.pl-tc b {
  font-size: 15px;
  font-weight: var(--fw-strong);
}
.pl-tc span {
  color: var(--muted);
  font-size: 10px;
}
.pl-kbd {
  display: flex;
  gap: 4px;
}
.pl-kbd kbd {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
}
.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}
.pl-chip .kg {
  width: 9px;
  height: 9px;
  color: var(--ok);
}
.pl-tl {
  position: relative;
  height: 76px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  container-type: inline-size;
}
.pl-ruler {
  position: relative;
  height: 20px;
}
.pl-ruler span {
  position: absolute;
  top: 5px;
  left: calc(var(--at) * 100%);
  padding-left: 4px;
  border-left: 1px solid var(--line-3);
  color: var(--faint);
  font: 9.5px / 1 var(--mono);
}
.pl-loop {
  position: absolute;
  top: 22px;
  left: calc(14px + var(--from) * (100% - 28px));
  width: calc((var(--to) - var(--from)) * (100% - 28px));
  height: 14px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border: 1px solid var(--line-3);
  border-inline-width: 2px;
}
.pl-key {
  position: absolute;
  top: 22px;
  left: calc(14px + var(--at) * (100% - 28px));
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}
.pl-key .kg {
  width: 11px;
  height: 11px;
}
.pl-key.must {
  color: var(--must);
}
.pl-key.should {
  color: var(--should);
}
.pl-key.idea {
  color: var(--idea);
}
.pl-wave {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.pl-wave i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--fg) 16%, transparent);
}
.pl-head {
  transition: opacity 0.2s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 2px;
  background: var(--fg);
  transform: translateX(calc(var(--p, 0) * (100cqw - 28px)));
}
.pl-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  height: 8px;
  background: var(--fg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pl-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  padding: 12px;
  border-left: 1px solid var(--line);
  min-width: 0;
  overflow: hidden;
}
.pl-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
}
.pl-tabs b {
  color: var(--fg);
  font-size: 13px;
}
.pl-recb {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 22px;
  margin-left: auto;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
}
.pl-recb .ic {
  width: 12px;
  height: 12px;
}
.pl-new {
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--raise-sheen), var(--brand-deep);
  color: var(--on-brand);
  font-weight: var(--fw-strong);
  font-size: 11px;
}
.pl-filters {
  display: flex;
  gap: 4px;
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}
.pl-filters span {
  padding: 3px 7px;
  border-radius: 6px;
}
.pl-filters .on {
  color: var(--fg);
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
}
.pl-note {
  display: grid;
  gap: 7px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  transition:
    border-color 0.4s,
    box-shadow 0.4s;
}
.pl-note.here {
  border-color: color-mix(in srgb, var(--fg) 30%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent);
}
.pl-who {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pl-who span:last-child {
  color: var(--faint);
  font-size: 10.5px;
}
.pl-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 8.5px;
  font-weight: var(--fw-strong);
}
.pl-av.ag {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line-2));
}
.pl-av .kg {
  display: block;
  width: 9px;
  height: 9px;
}
.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pl-tc-chip,
.pl-sev,
.pl-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 10px;
}
.pl-tc-chip {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
}
.pl-sev .kg {
  width: 8px;
  height: 8px;
}
.pl-sev.must {
  background: var(--must-bg);
  color: var(--must);
}
.pl-sev.should {
  background: var(--should-bg);
  color: var(--should);
}
.pl-sev.idea {
  background: var(--idea-bg);
  color: var(--idea);
}
.pl-tag {
  color: var(--muted);
}
.pl-text {
  color: var(--fg-2);
  font-size: 12px;
}
.pl-thread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.pl-thread > .pl-state {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.4s;
}
.pl-thread > .pl-state.on {
  opacity: 1;
}
.pl-act {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}
.pl-act b {
  color: var(--fg);
}
.pl-act .ic {
  color: var(--ok);
}
.pl-badge [data-s='fixed'],
.pl-badge [data-s='checked'] {
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 10px;
}
.pl-badge .kg {
  width: 8px;
  height: 8px;
}
.pl-msg {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 11.5px;
  color: var(--fg-2);
}
.pl-msg .pl-av {
  align-self: center;
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.pl-msg b {
  color: var(--fg);
}
.pl-msg span:last-child {
  flex-basis: 100%;
  padding-left: 24px;
  color: var(--fg);
}
.pl-replybox {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  color: var(--faint);
  font-size: 11px;
}
.pl-reply {
  color: var(--fg-2);
  font-size: 12px;
}
.pl-verdict {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.pl-verdict .sc-btn {
  height: 26px;
  padding-inline: 9px;
  font-size: 11px;
}
.pl-verdict .sc-btn.ok {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  box-shadow: none;
  color: var(--ok);
}
.pl-note.done .pl-verdict .sc-btn.ok {
  background: var(--ok);
  color: var(--page);
}
@container pl (max-width: 1040px) {
  .pl-stage-line .pl-swap > span > :not(.kg) {
    display: none;
  }
}
@container pl (max-width: 780px) {
  .pl-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .pl-side,
  .pl-tool,
  .pl-file span,
  .pl-chip {
    display: none;
  }
}
@container pl (max-width: 640px) {
  .pl-agent .pl-swap {
    display: none;
  }
}
@container pl (max-width: 520px) {
  .pl-kbd,
  .pl-res,
  .pl-tc span,
  .pl-stage-line,
  .pl-ctas,
  .pl-ruler span:nth-child(even) {
    display: none;
  }
  .pl-top {
    gap: 8px;
    padding: 0 10px;
  }
  .pl-file b {
    font-size: 11.5px;
  }
}

/* a phone's strip under the player (pages/scenes.ts phoneStrip): what the notes panel and the top bar say, there when
   the player is too narrow for them. Its parts are the scene's own swaps, so they change with the player */
.pl-phone {
  display: none;
}
@container pl (max-width: 780px) {
  .pl-phone {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
  }
}
.pl-ph-agent {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
}
.pl-ph-agent .ag-logo {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--claude);
}
.pl-ph-agent b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.pl-ph-agent .pl-swap {
  min-width: 0;
}
.pl-ph-note {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.pl-ph-note .pl-badge {
  margin-left: auto;
}
/* what happens under the note: one state at a time, all stacked in one place */
.pl-ph-thread .pl-swap {
  display: grid;
}
.pl-ph-thread .pl-swap > span {
  display: grid;
  align-items: start;
  white-space: normal;
}
.pl-ph-q {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--claude) 32%, var(--line));
  background: color-mix(in srgb, var(--claude) 6%, transparent);
}
.pl-ph-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.pl-ph-who .kg {
  color: var(--claude);
}
.pl-ph-who b,
.pl-ph-ask,
.pl-ph-said b {
  color: var(--fg);
}
.pl-ph-said {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--fg-2);
}
.pl-ph-said .ic {
  flex: none;
  color: var(--ok);
  transform: translateY(2px);
}
.pl-ph-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}
.pl-ph-stage b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.pl-ph-stage [data-s='progress'] .kg {
  color: var(--claude);
}
.pl-ph-stage [data-s='check'] .kg {
  color: var(--nice);
}
.pl-ph-stage [data-s='review'] .kg {
  color: var(--fg-2);
}
.pl-ph-stage .pl-swap:last-child {
  justify-items: end;
}
.pl-ph-stage .pl-btn.primary {
  padding-right: 12px;
}

/* ---- talk it through: the record bar over the picture while recording (data-phase rec), a box drawn with its tool;
   then the drafts come in on top of the panel (hearing → done) and the notes already there move down. Phases switch
   by opacity and transform only: the panel's flow is one block that slides */
.sc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
}
/* the pointer travels over the picture and the panel (it presses Record in the panel's head) */
.sc-talk .sc-body {
  position: relative;
}
.sc-talk .pl-recb {
  transition:
    transform 0.15s,
    color 0.3s,
    border-color 0.3s;
}
.sc-talk .pl-recb.press {
  transform: scale(0.9);
}
/* the timeline's marks: the video's notes as keys in their severity's colour, and each draft's stretch as a hollow band
   (not sent yet) while the drafts are there */
.sc-talk .tk-key .kg {
  width: 11px;
  height: 11px;
}
.sc-talk .tk-key {
  top: 11px;
}
.sc-talk .tk-key.idea {
  color: var(--idea);
}
.sc-talk .tk-key.should {
  color: var(--should);
}
.sc-talk .tk-key.must {
  color: var(--must);
}
.tk-range {
  position: absolute;
  top: 10px;
  height: 14px;
  left: calc(var(--from) * 100%);
  width: calc((var(--to) - var(--from)) * 100%);
  border: 1px dashed color-mix(in srgb, var(--fg-2) 60%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  transition: opacity 0.4s;
}
.sc-talk.sc-armed .tk-range:not(.in) {
  opacity: 0;
}
.sc-talk[data-phase='rec'] .pl-recb {
  border-color: rgb(255 59 92 / 0.55);
  color: #ff3b5c;
}
.tk-bar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 6px 0 14px;
  border-radius: var(--r-full);
  background: rgb(14 14 15 / 0.86);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.7);
  color: #eeebe4;
  font-size: 12px;
  white-space: nowrap;
  transition:
    opacity 0.35s,
    translate 0.5s var(--ease-out);
}
.tk-rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: var(--fw-strong);
}
.tk-rec > i {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #ff3b5c;
}
.sc-talk[data-phase='rec'] .tk-rec > i {
  animation: sc-blink 1.2s ease-in-out infinite;
}
@keyframes sc-blink {
  50% {
    opacity: 0.25;
  }
}
/* the microphone's level: it moves while you talk */
.sc-level {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}
.sc-level i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: #eeebe4;
  transform: scaleY(0.3);
}
.sc-talk[data-phase='rec'] .sc-level i {
  animation: sc-level 0.8s ease-in-out infinite alternate;
}
.sc-level i:nth-child(2) {
  animation-delay: -0.3s !important;
  animation-duration: 0.6s !important;
}
.sc-level i:nth-child(3) {
  animation-delay: -0.55s !important;
}
.sc-level i:nth-child(4) {
  animation-delay: -0.15s !important;
  animation-duration: 0.95s !important;
}
.sc-level i:nth-child(5) {
  animation-delay: -0.4s !important;
  animation-duration: 0.7s !important;
}
@keyframes sc-level {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
.tk-tools {
  display: inline-flex;
  gap: 2px;
  padding: 0 6px;
  border-left: 1px solid rgb(255 255 255 / 0.12);
  border-right: 1px solid rgb(255 255 255 / 0.12);
}
.tk-tool {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: rgb(238 235 228 / 0.7);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.12s;
}
.tk-tool .ic {
  width: 15px;
  height: 15px;
}
.tk-tool.on {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}
.tk-tool.press,
.tk-done.press {
  transform: scale(0.92);
}
.tk-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--raise-sheen), var(--brand-deep);
  color: var(--on-brand);
  font-weight: var(--fw-strong);
  transition: transform 0.12s;
}
.tk-done kbd {
  font-size: 10px;
  padding: 0 4px;
  color: inherit;
  background: none;
  border-color: currentColor;
  opacity: 0.75;
}
/* a box drawn with the bar's Box tool: grows from where the drag starts (a scale, the stroke kept thin) */
.tk-draw {
  position: absolute;
  left: 40%;
  top: 23%;
  width: 34%;
  height: 33%;
  overflow: visible;
  transform-origin: 0 0;
  transform: scale(var(--sx, 1), var(--sy, 1));
  transition: opacity 0.35s;
}
.tk-draw rect {
  fill: none;
  stroke: #ff3b5c;
  stroke-width: 2px;
}
.tk-cursor {
  z-index: 2;
}
.sc-talk:not(.sc-armed) .tk-bar,
.sc-talk:not(.sc-armed) .tk-draw,
.sc-talk[data-phase='idle'] .tk-bar,
.sc-talk[data-phase='hearing'] .tk-bar,
.sc-talk[data-phase='done'] .tk-bar {
  opacity: 0;
  translate: -50% 8px;
}
.sc-talk[data-phase='rec'] .tk-draw:not(.on),
.sc-talk[data-phase='hearing'] .tk-draw,
.sc-talk[data-phase='done'] .tk-draw,
.sc-talk[data-phase='idle'] .tk-draw {
  opacity: 0;
}
/* the panel: the notes tabs, then one flow (the drafts section on top of the video's notes) that starts lifted by the
   section's height (--up, measured) while nothing is heard yet, and slides down when the hearing starts */
.tk-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--line);
  overflow: hidden;
  /* as tall as the picture beside it, whatever it holds: what doesn't fit is cut at its foot */
  contain: size;
}
.tk-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
}
.tk-tabs b {
  color: var(--fg);
}
.tk-flow {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  transition: transform 0.6s var(--ease-out);
}
.sc-talk.sc-armed:is([data-phase='idle'], [data-phase='rec']) .tk-flow {
  transform: translateY(calc(-1 * var(--up, 0px)));
}
.tk-drafts {
  display: grid;
  transition: opacity 0.4s;
}
.sc-talk.sc-armed:is([data-phase='idle'], [data-phase='rec']) .tk-drafts {
  opacity: 0;
}
/* while it is heard: the recording's head and the app's sentence; then what isn't sent yet, in the same place */
.tk-hearing,
.tk-unsent {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 8px;
  transition: opacity 0.35s;
}
.sc-talk:not([data-phase='hearing']) .tk-hearing,
.sc-talk[data-phase='hearing'] .tk-unsent {
  opacity: 0;
}
.tk-uhead,
.tk-rhead {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.tk-uhead b,
.tk-rhead b {
  flex: 1;
  min-width: 0;
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.tk-uhead .kg {
  flex: none;
  width: 11px;
  height: 11px;
  color: var(--muted);
}
.tk-sendall {
  flex: none;
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--raise-sheen), var(--panel-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--raise);
  color: var(--fg);
  font-size: 11px;
  font-weight: var(--fw-strong);
}
.tk-only {
  color: var(--muted);
  font-size: 11px;
}
.tk-rhead {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.tk-rhead .mono {
  flex: none;
  color: var(--muted);
  font-size: 10.5px;
}
.tk-discard {
  flex: none;
  color: var(--muted);
  font-size: 11px;
}
.tk-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #ff3b5c;
}
.tk-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.tk-spin {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border-radius: var(--r-full);
  border: 1.5px solid color-mix(in srgb, var(--fg) 20%, transparent);
  border-top-color: var(--fg);
  animation: tk-spin 0.9s linear infinite;
}
@keyframes tk-spin {
  to {
    transform: rotate(360deg);
  }
}
.sc-drafts {
  display: grid;
  align-content: start;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* a draft as the app draws it: a hollow keyframe (not sent), where (a range), what was pointed at or drawn, and its
   clip to listen to at the end; the words; the severity under them */
.sc-drafts li {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line);
  transition:
    opacity 0.35s,
    transform 0.6s var(--ease-spring);
}
.tk-dhead {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tk-dhead > .kg {
  flex: none;
  width: 10px;
  height: 10px;
  color: var(--muted);
}
.tk-where {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-size: 9px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tk-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--fg-2);
  font-size: 10.5px;
  white-space: nowrap;
}
.tk-mark .ic {
  width: 11px;
  height: 11px;
}
.tk-clip {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border-radius: 6px;
  color: var(--fg-2);
}
.tk-clip .ic {
  width: 9px;
  height: 9px;
}
.tk-text {
  color: var(--fg);
  font-size: 12.5px;
}
.tk-sev {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--should);
  font-size: 11px;
}
.tk-sev .kg {
  width: 9px;
  height: 9px;
}
.tk-sev .pl-chev {
  margin-left: 2px;
}
.sc-talk.sc-armed [data-draft]:not(.in) {
  opacity: 0;
  transform: translateY(-8px);
}
@media (max-width: 760px) {
  .sc-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .tk-side {
    height: 380px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 560px) {
  .tk-tools,
  .tk-more {
    display: none;
  }
}

/* ---- the agent: one window. What it gets (the frame and the note as data) beside what it does, step by step; its
   question comes up on the frame */
.ag {
  max-width: 1080px;
}
.ag-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--fg-2);
}
.ag-live span:last-child {
  color: var(--faint);
}
.ag-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.ag-get,
.ag-does {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px 18px 18px;
  min-width: 0;
}
.ag-does {
  grid-template-rows: auto 1fr auto;
  border-left: 1px solid var(--line);
}
.ag-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.ag-head span {
  letter-spacing: 0;
  text-transform: none;
}
.ag-frame {
  border-radius: 10px;
}
.sc-tag {
  position: absolute;
  left: 10px;
  bottom: 8px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgb(10 10 10 / 0.72);
  color: #eeebe4;
  font-size: 10px;
}
/* the question comes up in the frame's top corner, clear of the title it is about */
.ag-ask {
  position: absolute;
  right: 2.5%;
  top: 6%;
  width: 33%;
  min-width: 170px;
  padding: 9px 11px 10px;
  border-radius: 10px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-size: 11.5px;
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease-spring);
}
.ag-ask-who {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
}
.ag-ask-who b {
  color: var(--fg);
}
.ag-ask-q {
  margin: 5px 0 8px;
  font-size: 12.5px;
}
.ag-choices {
  display: flex;
  gap: 6px;
}
.ag-choice {
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  transition:
    transform 0.12s,
    background 0.3s,
    color 0.3s;
}
.ag-choice.picked,
.ag:not(.sc-armed) [data-pick] {
  background: var(--raise-sheen), var(--brand-deep);
  border-color: transparent;
  color: var(--on-brand);
}
.ag-choice.press {
  transform: scale(0.95);
}
.ag.sc-armed .ag-ask:not(.in) {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
.sc-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 20px;
  opacity: 0;
  transform: translate(var(--cx, 200px), var(--cy, 160px));
  transition:
    transform 0.9s var(--ease-out),
    opacity 0.3s;
  pointer-events: none;
}
.sc-cursor svg {
  width: 100%;
  height: 100%;
  fill: var(--fg);
  stroke: var(--page);
  stroke-width: 1.2;
}
.sc-cursor.on {
  opacity: 1;
}
/* where the scene's people act over everything: the player, the board, the client's phone */
.pl .sc-cursor,
.bd .sc-cursor,
.sc-check .sc-cursor,
.sc-phone .sc-cursor {
  z-index: 6;
}
/* a finger on a drawn phone: its touch, not an arrow */
.sc-cursor[data-tap] svg {
  display: none;
}
.sc-cursor[data-tap]::before {
  content: '';
  position: absolute;
  left: -11px;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, #eeebe4 30%, transparent);
  border: 1.5px solid color-mix(in srgb, #eeebe4 85%, transparent);
}
@media (hover: none) {
  .sc-cursor svg {
    display: none;
  }
  .sc-cursor::before {
    content: '';
    position: absolute;
    left: -11px;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fg) 28%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--fg) 85%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--page) 45%, transparent);
  }
  .sc-btn kbd,
  .tk-done kbd,
  .pl-kbd {
    display: none;
  }
}
.ag-data {
  display: grid;
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.ag-data div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 12px;
}
.ag-data div + div {
  border-top: 1px solid var(--line);
}
.ag-data dt {
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.8;
}
.ag-data dd {
  margin: 0;
  color: var(--fg-2);
  font-size: 12px;
  overflow-wrap: anywhere;
}
/* the monitor's lines, newest on top. At rest they stand in the list's flow (reversed: the markup is oldest first);
   playing, scenes.js fixes the list at that height and places each line by transform (--y: the heights of the lines
   that came after it), so a new one slides the others down and nothing outside the list moves */
.ag-steps {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.ag-steps li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.3;
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.35s,
    background 0.35s,
    color 0.35s;
}
.ag-steps.placed li {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(var(--y, 0));
}
.ag-steps li > .mono {
  color: var(--faint);
  font-size: 10.5px;
}
.ag-steps li.now {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
}
@media (max-width: 560px) {
  .ag-steps li {
    grid-template-columns: 52px minmax(0, 1fr);
  }
}
.ag.sc-armed .ag-steps li:not(.in) {
  opacity: 0;
}
/* the count as wide as its widest ("41K"), so the word after it never moves */
.ag-tokens {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
}
.ag-foot [data-cost] {
  transition: opacity 0.4s;
}
.ag.sc-armed .ag-foot [data-cost]:not(.in) {
  opacity: 0;
}
/* the result, under the steps: the rendered version */
.ag-out {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  transition:
    opacity 0.4s,
    transform 0.5s var(--ease-out);
}
.ag-out .sc-stage {
  border-radius: 6px;
}
.ag-out b {
  color: var(--fg);
}
.ag.sc-armed .ag-out:not(.in) {
  opacity: 0;
  transform: translateY(8px);
}
.ag-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 10.5px;
}
@media (max-width: 560px) {
  .ag-live span:last-child {
    display: none;
  }
  .ag-ask {
    top: 4%;
    width: 50%;
    min-width: 0;
    padding: 6px 8px 7px;
    font-size: 10px;
  }
  .ag-ask-q {
    margin: 3px 0 5px;
    font-size: 11px;
  }
  .ag-choice {
    padding: 2px 8px;
  }
}
@media (max-width: 860px) {
  .ag-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ag-does {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  /* stacked under what it gets, the list shows its newest four lines (scenes.js agent reads --keep), not a column of
     room that stays empty while the first lines come in */
  .ag-steps {
    --keep: 4;
  }
}

/* ---- check it: before and after side by side on the same frame; Mia's box on the one before, the change outlined on
   the one after */
.ck-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 12px 0;
}
.ck-pair .sc-stage {
  border-radius: 8px;
}
@media (max-width: 560px) {
  .ck-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sc-label {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgb(10 10 10 / 0.72);
  color: #eeebe4;
  font-size: 10px;
}
.sc-fix {
  flex: 1 1 320px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--fg);
}
.sc-ans {
  flex-basis: 100%;
  color: var(--fg-2);
}
.sc-ans::before {
  content: '↳ ';
  color: var(--muted);
}
.sc-check:not(.sc-armed) [data-ok],
.sc-check.done [data-ok] {
  background: var(--raise-sheen), color-mix(in srgb, var(--ok) 55%, #0d0d0e);
  border-color: color-mix(in srgb, var(--ok) 60%, transparent);
}

/* ---- your client: the link and what they watched beside the phone, one group in the middle */
.cl {
  display: grid;
  grid-template-columns: minmax(0, 360px) auto;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 6vw, 72px);
  max-width: 980px;
}
.cl-side {
  display: grid;
  gap: 14px;
}
.cl-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-float);
}
.cl-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cl-head > .kg {
  color: var(--brand);
}
.cl-head > .mono {
  margin-left: auto;
  color: var(--muted);
  font-size: 10.5px;
}
.cl-url {
  padding: 8px 10px;
  border-radius: var(--r);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12px;
}
.cl-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg-2);
}
.cl-list li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cl-list .kg {
  color: var(--faint);
}
.cl-watch {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.cl-watch span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 70%, transparent), var(--brand));
  transform-origin: left;
  transform: scaleX(var(--w, 1));
}
.cl-pct {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
}
.cl-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10.5px;
}
.cl-meta .pl-swap {
  color: var(--fg-2);
}
.sc-phone {
  position: relative;
  width: clamp(210px, 26vw, 250px);
  aspect-ratio: 9 / 19;
  border-radius: 34px;
  border: 7px solid #1a1a1b;
  background: #000;
  box-shadow:
    0 0 0 1px #333,
    var(--shadow-float);
  overflow: hidden;
  container-type: inline-size;
}
.sc-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 3;
  width: 32%;
  height: 18px;
  translate: -50% 0;
  border-radius: var(--r-full);
  background: #000;
}
.sc-vid.tall {
  object-fit: cover;
}
/* the review page's head, under the notch, on a shade so it reads on a bright frame */
.sc-phone::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 84px;
  background: linear-gradient(rgb(0 0 0 / 0.55), transparent);
}
.sc-phone-top {
  position: absolute;
  z-index: 1;
  top: 38px;
  left: 14px;
  right: 14px;
  color: #eeebe4;
  font-size: 11px;
  text-align: center;
}
.sc-phone-foot {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  display: grid;
  gap: 8px;
  justify-items: stretch;
}
/* the note is typed into a bubble that already has its full size (a hidden copy of the words holds it), so the
   phone's foot never moves while it is typed */
.sc-bubble {
  display: grid;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgb(250 248 243 / 0.94);
  color: #1b1a18;
  font-size: 11.5px;
  line-height: 1.35;
  transition:
    opacity 0.3s,
    transform 0.5s var(--ease-spring);
}
.sc-bubble > span {
  grid-area: 1 / 1;
}
.sc-type-size {
  visibility: hidden;
}
.sc-phone-tl {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.3);
}
/* what has played of the reel */
.sc-phone-tl::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.85);
  transform-origin: left;
  transform: scaleX(var(--p, 1));
}
.sc-pin {
  position: absolute;
  top: 50%;
  left: calc(var(--at, 0.36) * 100%);
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--brand);
  transition:
    opacity 0.3s,
    scale 0.5s var(--ease-spring);
}
.sc-phone .sc-btn {
  justify-content: center;
}
.sc-toast {
  position: absolute;
  z-index: 2;
  top: 62px;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: #1b1a18;
  color: #eeebe4;
  font-size: 11px;
  white-space: nowrap;
  transition:
    opacity 0.3s,
    translate 0.5s var(--ease-spring);
}
.sc-toast .ic {
  color: #3ddc97;
}
.cl.sc-armed .sc-bubble:not(.in) {
  opacity: 0;
  transform: translateY(10px);
}
.cl.sc-armed .sc-pin:not(.in) {
  opacity: 0;
  scale: 0.3;
}
.cl.sc-armed .sc-toast:not(.in) {
  opacity: 0;
  translate: -50% -10px;
}
@media (max-width: 760px) {
  .cl {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .cl-side {
    order: 2;
    width: min(100%, 380px);
  }
}

/* ---- final: the board, as the app shows it. Each lane is as tall as two cards from the start (two invisible ones in
   its flow); the cards sit on rows by transform, and where the launch film lands the others slide down a row */
.bd {
  max-width: 1080px;
}
.bd-filters {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.bd-filters span {
  padding: 2px 7px;
  border-radius: 6px;
}
.bd-filters .on {
  color: var(--fg);
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
}
.bd-lanes {
  --gap: 10px;
  container: bdl / inline-size;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
.bd-lane {
  min-width: 0;
  padding: 0 8px 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  border: 1px solid var(--line);
}
.bd-head {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 4px;
  white-space: nowrap;
}
.bd-head .kg {
  color: var(--should);
}
.bd-lane:nth-child(2) .bd-head .kg {
  color: var(--claude);
}
.bd-lane:nth-child(3) .bd-head .kg {
  color: var(--ok);
}
.bd-lane:nth-child(4) .bd-head .kg {
  color: var(--fg-2);
}
.bd-head b {
  font-size: 12.5px;
}
.bd-head .mono {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.bd-cards {
  position: relative;
  display: grid;
  gap: var(--gap);
}
/* narrow lanes (a card under 190 px: the board under 886 px): the names a size smaller and on two lines, every card the
   same height, so they stay whole; the film's card is the board's, not a lane's, so the board is what is measured */
@container bdl (max-width: 886px) {
  .bd-lanes .bd-name {
    height: 2.5em;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .bd-lanes .bd-where,
  .bd-lanes .bd-state {
    font-size: 10px;
  }
}
.bd-card {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 6px 6px 9px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  transform: translateY(calc((var(--row, 0) + var(--shift, 0)) * (100% + var(--gap))));
  transition: transform 0.6s var(--ease-out);
}
.bd-card.bd-sizer {
  position: relative;
  visibility: hidden;
  transform: none;
}
.bd-lane.has-film .bd-card {
  --shift: 1;
}
.bd-poster.crop {
  background-size: 175% auto;
  background-position: 10% 92%;
}
.bd-poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}
.bd-name {
  margin-top: 8px;
  padding: 0 3px;
  font-weight: var(--fw-strong);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-where {
  padding: 0 3px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-state {
  display: flex;
  padding: 3px 3px 0;
  color: var(--fg-2);
  font-size: 11.5px;
  white-space: nowrap;
}
.bd-state > .kg,
.bd-state .pl-swap .kg {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  color: var(--fg-2);
}
.bd-state {
  align-items: center;
}
.bd-state .st-ip {
  color: var(--claude);
}
.bd-state .st-cf {
  color: var(--nice);
}
.bd-state .st-ap {
  color: var(--ok);
}
.bd-state .st-fi {
  color: var(--fg);
}
/* the launch film: over the lanes, at the top of the one it is in */
.bd-card[data-film] {
  z-index: 2;
  top: calc(12px + 1px + 40px);
  left: calc(12px + 1px + 8px);
  right: auto;
  width: calc((100% - 24px - 30px) / 4 - 18px);
  border-color: color-mix(in srgb, var(--brand) 50%, var(--line-2));
  box-shadow: var(--shadow-float);
  transform: translateX(calc(var(--lane) * (100% + 28px)));
  transition:
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 0.3s var(--ease-out),
    rotate 0.3s var(--ease-out),
    box-shadow 0.3s,
    opacity 0.35s;
}
/* picked up while it goes to its lane, set down as it lands: a card dragged, not one sliding over the others */
.bd-card[data-film].lift {
  scale: 1.06;
  rotate: -1.5deg;
  box-shadow:
    0 18px 36px rgb(0 0 0 / 0.42),
    0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent);
}
@media (hover: none) {
  .bd-card[data-film]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 40%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fg) 28%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--fg) 85%, transparent);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }
  .bd-card[data-film].lift::after {
    opacity: 1;
  }
}
/* a phone: the lanes stand as rows, each with two slots side by side, and every card keeps its name and its stage. The
   film goes down from lane to lane (a row is 30 px of head, a 64 px card and 6 px under it, its borders, then the gap:
   108 px), and a lane's own card moves over to the second slot while the film is in it */
@media (max-width: 700px) {
  .bd-lanes {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
  }
  .bd-lane {
    padding: 0 6px 6px;
  }
  .bd-head {
    height: 30px;
    gap: 6px;
  }
  .bd-head b {
    font-size: 11.5px;
  }
  .bd-where,
  .bd-filters {
    display: none;
  }
  .bd-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .bd-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-content: center;
    column-gap: 8px;
    height: 64px;
    padding: 5px 7px 5px 5px;
    right: auto;
    width: calc(50% - 3px);
    transform: translateX(calc((var(--row, 0) + var(--shift, 0)) * (100% + 6px)));
  }
  .bd-card.bd-sizer {
    width: auto;
  }
  .bd-poster {
    grid-row: 1 / 3;
    align-self: center;
    border-radius: 4px;
  }
  .bd-lanes .bd-name {
    height: auto;
    max-height: 2.5em;
    margin: 0;
    padding: 0;
    font-size: 10.5px;
  }
  .bd-state {
    padding: 2px 0 0;
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }
  .bd-state .pl-swap {
    min-width: 0;
  }
  .bd-state .pl-swap > span {
    white-space: normal;
  }
  .bd-card[data-film] {
    top: calc(8px + 1px + 30px);
    left: calc(8px + 1px + 6px);
    width: calc((100% - 36px) / 2);
    transform: translateY(calc(var(--lane) * 108px));
  }
}

/* the playhead's jump back at the loop's end: gone at once, back in a breath */
.pl-head.pl-jump {
  opacity: 0;
  transition: none;
}

/* the player's filters change their counts as a question comes and goes: each set of counts is a whole row, stacked in
   one place, one shown */
.pl-fswap {
  display: grid;
}
.pl-fswap > .pl-filters {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.3s;
}
.pl-fswap > .pl-filters.on {
  opacity: 1;
}
/* the agent's question: a note of its own, laid over the list under Mia's (--qt, measured) while it is open; the notes
   after it slide down to make room (--qd) */
.pl-side {
  position: relative;
}
.pl-q {
  position: absolute;
  left: 12px;
  right: 12px;
  top: var(--qt, 0);
  border-color: color-mix(in srgb, var(--claude) 32%, var(--line));
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease-out);
}
.pl-q.in {
  opacity: 1;
  transform: none;
}
[data-after-q] {
  transform: translateY(var(--qd, 0));
  transition:
    transform 0.5s var(--ease-out),
    border-color 0.4s,
    box-shadow 0.4s;
}
.pl-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--claude-bg);
  color: var(--claude);
  font-size: 10px;
}
.pl-kind .kg {
  width: 8px;
  height: 8px;
}
.pl-qa {
  display: grid;
}
.pl-qa > .pl-state {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  align-self: start;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.3s;
}
.pl-qa > [data-s='ask'] {
  display: grid;
  justify-items: start;
  gap: 7px;
}
.pl-choices {
  display: flex;
  gap: 6px;
}
.pl-qa .pl-replybox {
  justify-self: stretch;
}
.pl-qbtns {
  display: flex;
  justify-self: end;
  gap: 6px;
}
.pl-qbtn {
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--raise-sheen), var(--panel-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--raise);
  color: var(--fg);
  font-size: 11px;
  font-weight: var(--fw-strong);
}
.pl-qbtn.quiet {
  background: none;
  box-shadow: none;
  color: var(--fg-2);
  font-weight: var(--fw-text);
}
.pl-role {
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  color: var(--muted) !important;
  font-size: 9.5px !important;
}
.pl-qa > .pl-state.on {
  opacity: 1;
}
.pl-qa [data-s='done'] {
  color: var(--muted);
  font-size: 11px;
}
.pl-qa [data-s='done'] b {
  color: var(--fg);
}
.pl-qa .ic {
  color: var(--ok);
}
.pl-choice {
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  font-size: 11px;
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.12s;
}
.pl-choice.picked {
  background: var(--raise-sheen), var(--brand-deep);
  border-color: transparent;
  color: var(--on-brand);
}
.pl-choice.press {
  transform: scale(0.95);
}

/* ============================================================ product pages (pages/product.ts): the home page's hero
   without the logo (the copy, then Lampo under it), its chapters and its end. The scenes are pages/products/*.ts's */
.pp-hero {
  padding-top: clamp(56px, 8vw, 104px);
}
.pp-hero .hero-copy {
  margin-top: 0;
}
.pp-hero h1 {
  max-width: 16ch;
  text-wrap: balance;
}
.pp-hero .hero-copy .lede {
  max-width: 62ch;
}
.pp-hero .eyebrow {
  justify-self: center;
}

/* ---- the legal pages (pages/legal.ts): the docs' column and list, a language link and the draft note under the
   title; the cookie settings as a link in the list and in the footer */
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.lg-lang {
  color: var(--fg);
}
.lg-prose table {
  font-size: var(--fs-sm);
}
.lg-prose p:has(> br) {
  line-height: 1.7;
}
.lg-cookies,
.foot-cookies {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.docs-nav .lg-cookies,
.docs-pick .lg-cookies {
  display: block;
  margin-top: var(--sp-4);
  padding: 5px 10px;
  margin-left: -10px;
  border-radius: var(--r);
  color: var(--muted);
  text-align: left;
}
.docs-nav .lg-cookies:hover,
.foot-cookies:hover {
  color: var(--fg);
}
.lg-cookies:focus-visible,
.foot-cookies:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* ---- the cookie settings (assets/consent.js, CookieConsent 3): the library's box in the site's surfaces, lines, type
   and buttons, both themes from the same tokens. Its own stylesheet loads after this one, so these win by weight
   (:root #cc-main), not by order. Allow all and Necessary only both wear the site's primary button, so accepting looks
   no easier than refusing (the maintainer, 2026-10-06; EDPB 03/2022); Settings and Save stay neutral */
:root #cc-main {
  --cc-font-family: var(--ui);
  --cc-modal-border-radius: var(--r-lg);
  --cc-btn-border-radius: var(--r-lg);
  --cc-modal-margin: var(--gut);
  --cc-bg: var(--float-bg);
  --cc-primary-color: var(--fg);
  --cc-secondary-color: var(--muted);
  --cc-link-color: var(--fg);
  --cc-btn-primary-bg: var(--panel-2);
  --cc-btn-primary-color: var(--fg);
  --cc-btn-primary-border-color: var(--line-2);
  --cc-btn-primary-hover-bg: var(--panel-2);
  --cc-btn-primary-hover-color: var(--fg);
  --cc-btn-primary-hover-border-color: var(--line-3);
  --cc-btn-secondary-bg: var(--panel-2);
  --cc-btn-secondary-color: var(--fg);
  --cc-btn-secondary-border-color: var(--line-2);
  --cc-btn-secondary-hover-bg: var(--panel-2);
  --cc-btn-secondary-hover-color: var(--fg);
  --cc-btn-secondary-hover-border-color: var(--line-3);
  --cc-separator-border-color: var(--line);
  --cc-toggle-on-bg: var(--fg);
  --cc-toggle-off-bg: var(--line-3);
  --cc-toggle-on-knob-bg: var(--page);
  --cc-toggle-off-knob-bg: var(--fg);
  --cc-toggle-enabled-icon-color: var(--page);
  --cc-toggle-disabled-icon-color: var(--page);
  --cc-toggle-readonly-bg: var(--line-2);
  --cc-toggle-readonly-knob-bg: var(--muted);
  --cc-toggle-readonly-knob-icon-color: var(--page);
  --cc-section-category-border: var(--line);
  --cc-cookie-category-block-bg: var(--panel);
  --cc-cookie-category-block-border: var(--line);
  --cc-cookie-category-block-hover-bg: var(--panel-2);
  --cc-cookie-category-block-hover-border: var(--line-2);
  --cc-cookie-category-expanded-block-bg: var(--panel);
  --cc-cookie-category-expanded-block-hover-bg: var(--panel-2);
  --cc-overlay-bg: color-mix(in srgb, var(--ink-0) 62%, transparent);
  --cc-webkit-scrollbar-bg: var(--line-2);
  --cc-webkit-scrollbar-hover-bg: var(--line-3);
  --cc-footer-bg: var(--panel);
  --cc-footer-color: var(--muted);
  --cc-footer-border-color: var(--line);
  color: var(--fg);
}
:root #cc-main :is(.cm, .pm) {
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-float);
}
:root #cc-main :is(.cm__title, .pm__title) {
  font-family: var(--display);
  font-weight: var(--fw-strong);
  letter-spacing: -0.01em;
}
:root #cc-main :is(.cm__desc, .pm__section-desc, .pm__table) {
  font-size: var(--fs-md);
  line-height: 1.55;
}
:root #cc-main :is(.cm__btn, .pm__btn) {
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
  font: var(--fw-strong) var(--fs-md) / 1 var(--ui);
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur);
}
:root #cc-main :is(.cm__btn, .pm__btn):active {
  transform: translateY(1px);
  box-shadow: var(--press);
}
:root #cc-main :is(.cm__btn, .pm__btn):is([data-role='all'], [data-role='necessary']) {
  background: var(--raise-sheen), var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand-deep) 70%, #000);
  color: var(--on-brand);
}
:root #cc-main :is(.cm__btn, .pm__btn):is([data-role='all'], [data-role='necessary']):hover {
  background: var(--raise-sheen), var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand-deep) 70%, #000);
  color: var(--on-brand);
  box-shadow: var(--raise), var(--shadow-brand);
}
:root #cc-main :is(.cm__desc, .pm__section-desc) a {
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
}
:root #cc-main :is(button, a, input):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
:root #cc-main .pm__badge {
  background: var(--panel-2);
  color: var(--muted);
  font: var(--fw-ui) var(--fs-xs) / 1 var(--mono);
}
@media (prefers-reduced-motion: reduce) {
  :root #cc-main,
  :root #cc-main * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- films: the films page (the one playing large, its words beside it, the wall below) and the home page's film
   over the page. The browser's own player until the app's embed player takes its place */
.films {
  padding-bottom: var(--band);
}
.films .page-head {
  margin-bottom: var(--sp-8);
}
.film-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  scroll-margin-top: calc(var(--bar-h) + var(--ruler-h) + var(--sp-4));
}
.film-frame :is(video, iframe),
.film-box :is(video, iframe) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-lg);
}
.film-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
}
.film-words {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-6);
  align-items: baseline;
  max-width: 820px;
}
.film-words h2 {
  font-size: var(--fs-h3);
}
.film-len {
  color: var(--muted);
}
.film-line {
  grid-column: 1 / -1;
  color: var(--fg-2);
  font-size: 17px;
  line-height: 1.5;
}
.film-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.film-wall {
  margin-top: clamp(48px, 6vw, 80px);
}
.film-wall h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-6);
}
.film-wall ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.film-wall a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  color: var(--fg);
  text-decoration: none;
}
.film-wall img {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.film-tile-len {
  color: var(--muted);
}
/* the home page's film over the page: the browser's dialog, the dim around it closes it */
.film-box {
  width: min(1120px, calc(100vw - 2 * var(--gut)));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--float-bg);
  color: var(--fg);
  box-shadow: var(--shadow-float);
}
.film-box::backdrop {
  background: color-mix(in srgb, #000 76%, transparent);
}
.film-box :is(video, iframe) {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.film-embed {
  border: 0;
}
.film-box-line {
  padding: var(--sp-3) var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.film-box-line b {
  color: var(--fg);
}
.film-box-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
}
.film-box-close button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--float-bg);
  color: var(--fg);
  cursor: pointer;
}