/* Home, 30.09.2026, round 4.
   Hero = the live site's tagline block (same sizes and weights) with its two
   buttons, then a composition of 60 Hypra images on ten depth layers (the nearer,
   the bigger and the faster on scroll), ending on the first box: the Creative OS
   film. Then the deck: cards that stick at one line under the top bar; the ones
   behind step up a few pixels and shrink a little, three levels at most, so only
   their empty top edge shows. Same colour in front and behind, never see-through.
   Then a full-screen black call to action before the footer.
   Breakpoints: tablet <= 1023.98, mobile <= 809.98.
   prefers-reduced-motion: static composition, plain sections, still loops. */

:root {
  --vis-h: clamp(280px, calc(100svh - 420px), 480px);
  --card-pad-x: 32px;
  --card-pad-y: 28px;
  --scene-h: clamp(1000px, 135vh, 1400px);
}

/* ---------- Live components used on this page ---------- */
/* The live buttons (components.css), with the same Book cut served from the
   small Hypra Sans files. Dark: the live iridescent pill and its
   white glow. Light: a solid ink pill, white text, a soft warm glow on the paper. */
.btn p { font-family: var(--os-font); font-weight: 500; }
html[data-theme="light"] .btn--primary { background-image: none; background-color: #1b1a18; transition: background-color 160ms ease, box-shadow 200ms ease; }
html[data-theme="light"] .btn--primary p { color: #f6f5f2; }
html[data-theme="light"] .btn--glow { box-shadow: 0 1px 1px rgba(27, 26, 24, 0.16), 0 10px 26px -8px rgba(160, 104, 52, 0.5), 0 3px 12px rgba(236, 170, 110, 0.16); }
html[data-theme="light"] .btn--glow:hover { background-color: #2b2926; box-shadow: 0 1px 1px rgba(27, 26, 24, 0.18), 0 12px 32px -8px rgba(160, 104, 52, 0.58), 0 3px 14px rgba(236, 170, 110, 0.22); }
html[data-theme="light"] .btn--outline:hover { border-color: rgba(27, 26, 24, 0.32); }

/* ---------- Reveal ---------- */
[data-rise] { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 900ms var(--ease-out) var(--d, 0ms); }
.is-in [data-rise], [data-rise].is-in { opacity: 1; transform: none; }

/* ---------- Hero: the title and its sub-line ---------- */
.hero { position: relative; z-index: 2; padding: 196px var(--gutter) 0; text-align: center; }
/* the title: Hypra Sans Regular, the size of "Studio" in the closing
   (--os-f, css/os-shell.css), line-height 0.94, tracking of the film's list */
.hero-title { margin: 0 auto; max-width: 1032px; font-family: "Hypra Sans", ". Book", sans-serif; font-weight: 400; font-size: var(--os-f); line-height: 0.94; letter-spacing: -0.032em; color: var(--title); }
.hero-sub { margin: 16px auto 0; max-width: 600px; font-family: var(--os-font); font-weight: 400; }
.hero-ctas { margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 12px; }
/* the two calls to action, bigger by padding only (same type), here and in the closing */
.hero-ctas .btn--md, .pre-ctas .btn--md { padding: 12px 28px; border-radius: var(--r-48); }
.hero-ctas .btn--outline.btn--md, .pre-ctas .btn--outline.btn--md { padding: 11px 27px; }

/* ---------- The composition ---------- */
/* the gap above the first images = the gap between the header logo and the title (js measures it; 140 / 75 px) */
.scene { position: relative; z-index: 0; isolation: isolate; height: var(--scene-h); margin-top: var(--hero-gap, 140px); overflow-x: clip; }
.scene-layers { position: absolute; inset: 0; pointer-events: none; }
.sc {
  position: absolute; left: var(--x); top: var(--y);
  width: clamp(calc((48 + var(--d) * 19) * 0.56px), calc((48 + var(--d) * 19) * 0.069444vw), calc((48 + var(--d) * 19) * 1.12px));
  height: auto; max-width: none; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: clamp(4px, calc((48 + var(--d) * 19) * 0.0045vw), 16px);
  z-index: calc(var(--d) * 2);
  --k: calc(0.22 - var(--d) * 0.048);
  transform: translate3d(-50%, calc(var(--s, 0) * var(--k) * 1px), 0);
  will-change: transform;
  background: var(--card-2);
}
/* every image fully visible; only the two farthest layers are a touch darker (10 %, then 5 %) */
.sc.f0 { filter: brightness(0.9); }
.sc.f1 { filter: brightness(0.95); }
html[data-theme="light"] .sc { box-shadow: 0 calc(2px + var(--d) * 1.2px) calc(6px + var(--d) * 3px) rgba(27, 26, 24, 0.058); }
/* The film: the biggest card, in front of every image, no frame (the video itself,
   rounded like the nearest images); images above, beside, below and partly under it;
   it moves at its own calm speed */
.reel {
  position: absolute; left: 50%; top: 16%; z-index: 30; margin: 0;
  width: min(1056px, 76.8vw); aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: clamp(4px, calc(219 * 0.0045vw), 16px); background: #000;
  --kf: 0.05;
  transform: translate3d(-50%, calc(var(--s, 0) * var(--kf) * 1px), 0);
  will-change: transform;
}
html[data-theme="light"] .reel { box-shadow: 0 12.8px 33px rgba(27, 26, 24, 0.058); }
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #000; }
.reel { cursor: pointer; }
/* sound: a small speaker at the bottom right, discreet until the film is hovered */
.reel-sound {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--ease);
}
.reel-sound::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* a bigger hit area */
.reel-sound svg { width: 16px; height: 16px; }
.reel-sound .i-on, .reel.is-sound .reel-sound .i-off { display: none; }
.reel.is-sound .reel-sound .i-on { display: block; }
.reel:hover .reel-sound, .reel-sound:focus-visible { color: #fff; background: rgba(0, 0, 0, 0.5); transform: scale(1.06); }
.reel-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Deck ---------- */
#tools, .os-anchor { scroll-margin-top: calc(var(--nav-h) + 16px); }
.os-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
/* the card surface: white in light, near-black in dark, in front and behind alike */
:root { --deck-card: #0e0e0e; --deck-line: rgba(244, 243, 241, 0.09); --deck-lift: 0 -8px 22px -12px rgba(0, 0, 0, 0.9); }
html[data-theme="light"] { --deck-card: #ffffff; --deck-line: rgba(27, 26, 24, 0.08); --deck-lift: 0 -8px 22px -14px rgba(27, 26, 24, 0.16), 0 1px 2px rgba(27, 26, 24, 0.03); }
@media (prefers-color-scheme: light) {
  html.theme-ready:not([data-theme]) { --deck-card: #ffffff; --deck-line: rgba(27, 26, 24, 0.08); --deck-lift: 0 -8px 22px -14px rgba(27, 26, 24, 0.16), 0 1px 2px rgba(27, 26, 24, 0.03); }
}
.deck { position: relative; z-index: 1; max-width: calc(1120px + 2 * var(--gutter)); margin: 24px auto 0; padding: 0 var(--gutter); --peek: 12px; }
/* desktop: the cards sit 30 px further in on each side than the bento above, narrower
   screen-like cards (same height) */
@media (min-width: 810px) { .deck { padding: 0 calc(var(--gutter) + 30px); } }
/* room for the stack to stay in place while the closing rises over it (a sticky box
   needs space after it inside its parent; its own margin does not count) */
.deck::after { content: ""; display: block; height: 24vh; }
.os-card {
  position: sticky; top: var(--top, 132px); z-index: 1;
  margin-bottom: 24px; padding: var(--card-pad-y) var(--card-pad-x) 32px;
  border-radius: var(--radius-card); background: var(--deck-card); color: var(--ink);
  box-shadow: var(--deck-lift); overflow: hidden; isolation: isolate;
  transform-origin: 50% 0;
  /* the cards behind: one small, even step up and a slight scale-down per level,
     three levels at most (deeper ones sit exactly behind the third). No veil, no
     opacity: only the empty top edge of each shows, cut clean by js at the card
     in front */
  --lvc: min(var(--lv, 0), 3);
  transform: translate3d(0, calc(var(--lvc) * var(--peek) * -1), 0) scale(calc(1 - var(--lvc) * 0.025));
  will-change: transform;
}
/* one hairline per card, inside its edge */
.os-card::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--deck-line); }
/* a card taller than the screen, once covered, is cut at its place in the stack
   (js sets --cut): a plain strip of its own colour and hairline, so what peeks
   above the next card is an empty edge like the others */
.os-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--cut, -160px); height: 96px; z-index: 8; pointer-events: none;
  background: var(--deck-card); border: 1px solid var(--deck-line); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: 0 -2px 0 0 var(--deck-card); /* covers the half-drawn pixel row at the cut */
}
.os-card:last-child { margin-bottom: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.card-text { max-width: 660px; transform: translate3d(0, calc(var(--enter, 0) * 18px), 0); }
/* the heading: the section in a small pill one line above the title (centre to centre
   about the step from the title to its grey line), the title, the grey line */
.card-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-bottom: 4px; border-radius: var(--r-22);
  font-family: var(--os-font); font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: 0; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.card-title { font-family: var(--os-font); font-weight: 500; font-size: 22px; line-height: 24px; letter-spacing: -0.5px; color: var(--ink); text-wrap: balance; }
.card-sub { margin-top: 1px; font-family: var(--os-font); font-weight: 400; font-size: 22px; line-height: 24px; letter-spacing: -0.5px; color: var(--ink-3); text-wrap: pretty; }
.card-vis { position: relative; z-index: 2; height: var(--vis-h); transform: translate3d(0, calc(var(--enter, 0) * 36px), 0); }

/* Small label on a tile (never a caption under an image) */
.chip {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-22);
  font-size: 12px; line-height: 1; font-weight: 400; letter-spacing: 0; color: var(--ink);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--line);
}

/* ---------- How it works: a small text toggle, a compact panel ---------- */
.how { position: relative; flex: none; z-index: 7; }
.how summary { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; line-height: 18px; color: var(--ink-2); cursor: pointer; list-style: none; user-select: none; transition: color 150ms ease; }
.how summary::-webkit-details-marker { display: none; }
.how summary:hover, .how[open] summary { color: var(--ink); }
.how summary i { position: relative; width: 9px; height: 9px; transition: transform 250ms var(--ease-out); }
.how summary i::before, .how summary i::after { content: ""; position: absolute; left: 0; top: 3.75px; width: 9px; height: 1.5px; border-radius: 1px; background: currentColor; }
.how summary i::after { transform: rotate(90deg); }
.how[open] summary i { transform: rotate(45deg); }
.how-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 330px;
  display: flex; flex-direction: column; gap: 9px; padding: 16px 18px;
  border-radius: 14px; background: var(--card-2);
  box-shadow: 0 0 0 1px var(--line), 0 18px 48px rgba(0, 0, 0, 0.28);
  font-size: 13px; line-height: 19px; color: var(--ink-2);
  animation: how-in 260ms var(--ease-out);
}
html[data-theme="light"] .how-panel { box-shadow: 0 0 0 1px var(--line), 0 18px 48px rgba(27, 26, 24, 0.12); }
.how-t { color: var(--ink); }
@keyframes how-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Pricing card: the plans block of /pricing/ ---------- */
/* ---------- 1. Collection: the wall ---------- */
.wall {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
  overflow: hidden; border-radius: var(--radius-tile);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
}
.wall-col { position: relative; overflow: hidden; }
.wall-run { display: flex; flex-direction: column; animation: wall-up var(--dur, 80s) linear infinite; animation-play-state: paused; }
.wall-col--down .wall-run { animation-name: wall-down; }
/* each slot holds two images: a search result wipes in over the previous one, in place,
   while the columns keep drifting (js/os-demos.js) */
.wall-cell { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; margin-bottom: 12px; border-radius: 12px; overflow: hidden; background: var(--card-2); }
.wall-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wall-cell img.is-top { z-index: 1; }
.wall-cell img.is-enter { clip-path: inset(100% 0 0 0); }
.wall-cell img.is-enter.is-go { clip-path: inset(0 0 0 0); transition: clip-path 620ms var(--ease-out) var(--wd, 0ms); }
.os-card.is-live .wall-run { animation-play-state: running; }
@keyframes wall-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes wall-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.search-pill {
  position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px 0 18px; min-width: 280px;
  border-radius: var(--r-48); font-size: 16px; color: var(--ink);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, 0.18);
}
.search-pill svg { width: 16px; height: 16px; color: var(--ink-2); flex: none; }
/* the field: the typed text, the caret right after its last letter (1 px), then the
   placeholder while empty. A native-like caret: as tall as the text (1.15 em, from below
   the baseline to above the capitals), in the text colour, solid while typing, blinking
   (1 s) once idle */
.sr-field { display: inline-block; white-space: pre; line-height: 1.25; color: var(--ink); }
.caret {
  display: inline-block; width: 1.5px; height: 1.15em; margin: 0 1px 0 1px; vertical-align: -0.22em;
  border-radius: 1px; background: currentColor; animation: caret 1.06s steps(1) infinite;
}
.search-pill.is-keying .caret { animation: none; }
@keyframes caret { 50% { opacity: 0; } }
.sr-ph { color: var(--ink-3); }
.search-pill.is-typing .sr-ph { display: none; }


/* ---------- 2. Vision: the modular prompt composer of Creation ---------- */
/* Drawn like the app's Creation panel (24.10): small capital labels over each block (Style,
   or Styles · 2 blended; Describe and its counter), each series shown as the 2 x 2 mosaic
   of its first four images, the sentence in a field with Style, Format and Generate on one
   line at its foot. Fixed heights: the card never changes size while the sentence is written.
   Desktop: the composer is as tall as the screen allows under the card's line (--vc-h), the
   four results are exact 4:5 cells in a 2 x 2 block as tall as the composer. */
.vis-vision { height: auto; }
.vc {
  --vc-h: clamp(420px, calc(100svh - 310px), 524px); --vc-pad: 8px; --vc-gap: 8px; --rh: calc(var(--vc-h) - 2 * var(--vc-pad));
  height: var(--vc-h); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--vc-gap); padding: var(--vc-pad);
  border-radius: var(--radius-tile); background: var(--card-2);
  --field-bg: #1b1b1b; --field-line: rgba(255, 255, 255, 0.08); --mosaic-bg: #2a2a2a;
}
.vc-left { display: flex; flex-direction: column; gap: var(--vc-gap); min-width: 0; min-height: 0; }
.vc-styles, .vc-prompt { padding: 12px 14px 14px; border-radius: var(--radius-panel); background: var(--card-3); }
/* the app's section label: 10 px capitals, tracked, a quiet note on the right */
.vc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.vc-h-r { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.vc-style-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.vc-style { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* a series: the 2 x 2 mosaic of its first four images (SeriesMosaic in the app) */
.vc-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--mosaic-bg); transition: box-shadow 220ms ease, transform 220ms var(--ease); }
.vc-mosaic img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.vc-style b { font-size: 11px; line-height: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-style.is-on .vc-mosaic { box-shadow: 0 0 0 2px var(--card-3), 0 0 0 3.5px var(--ink); }
.vc-style.is-on b { color: var(--ink); }
.vc-style.is-press .vc-mosaic { transform: scale(0.95); }
/* Describe: the field takes the rest of the height; the sentence on top, the bar at its foot */
.vc-prompt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vc-prompt .vc-h { flex: none; }
.vc-field { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px 14px; border-radius: 8px; background: var(--field-bg); box-shadow: inset 0 0 0 1px var(--field-line); overflow: hidden; }
.vc-sentence { flex: 1 1 auto; min-height: 0; font-size: 16px; line-height: 30px; letter-spacing: -0.1px; color: var(--ink); }
.vc-ph { color: var(--ink-3); }
.vc-cursor { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: caret 1s steps(1) infinite; }
/* a module: the app's bubbles (Hypra V3 Creation), one colour per family. An inline block
   whose label sits on the baseline of the sentence (the mosaic or icon hangs on it) */
.vc-mod {
  display: inline-block; height: 24px; padding: 0 8px 0 4px; margin: 0 2px; vertical-align: baseline;
  border-radius: 8px; font-size: 13px; line-height: 24px; font-weight: 500; white-space: nowrap;
  color: var(--mod-ink); background: var(--mod-bg); box-shadow: inset 0 0 0 1px var(--mod-line);
  animation: vc-drop 560ms var(--ease-out) both;
}
.vc-mod--ratio { padding-left: 7px; }
/* the style module's icon: the series' own mosaic, small */
.vc-mod .vc-mosaic { display: inline-grid; width: 18px; height: 18px; gap: 1px; margin: 3px 6px 0 0; border-radius: 4px; vertical-align: top; transition: none; }
.vc-mod svg { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
/* light: soft tints and ink labels; dark: the app's deep bubbles and white labels */
.vc { --mod-line: rgba(27, 26, 24, 0.08); }
.vc-mod--ref { --mod-bg: #e9e7e2; --mod-ink: #1b1a18; }
.vc-mod--persona { --mod-bg: #f0e4cb; --mod-ink: #5b4a2e; }
.vc-mod--style { --mod-bg: #e8e2f1; --mod-ink: #3b3448; }
.vc-mod--ratio { --mod-bg: #dde7f2; --mod-ink: #2e4a6b; }
html:not([data-theme="light"]) .vc { --mod-line: rgba(255, 255, 255, 0.1); }
.vc { --ring-track: rgba(255, 255, 255, 0.14); }
html[data-theme="light"] .vc { --ring-track: rgba(27, 26, 24, 0.1); }
/* light: white panels on the warm composer, the app's warm field, no line */
html[data-theme="light"] .vc { --field-bg: #f5f4f0; --field-line: rgba(27, 26, 24, 0.04); --mosaic-bg: #e9e7e2; }
html[data-theme="light"] .vc-styles, html[data-theme="light"] .vc-prompt { background: #fff; box-shadow: 0 0 0 1px rgba(27, 26, 24, 0.05); }
html[data-theme="light"] .vc-style.is-on .vc-mosaic { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
html[data-theme="light"] .vc-res { background: #e9e7e2; }
html:not([data-theme="light"]) .vc-mod--ref { --mod-bg: #2b2b31; --mod-ink: #fff; }
html:not([data-theme="light"]) .vc-mod--persona { --mod-bg: #5b4a2e; --mod-ink: #fff; }
html:not([data-theme="light"]) .vc-mod--style { --mod-bg: #3b3448; --mod-ink: #fff; }
html:not([data-theme="light"]) .vc-mod--ratio { --mod-bg: #2e4a6b; --mod-ink: #fff; }
@keyframes vc-drop { 0% { transform: translateY(-16px) scale(0.9); } 62% { transform: translateY(2px) scale(1.02); } 100% { transform: none; } }
/* Creation (first card), 25.10: the sentence set large enough to be read at a glance, in three
   lines, and its bubbles a size up, raised a few px above the baseline */
.vc .vc-sentence { font-size: 26px; line-height: 40px; letter-spacing: -0.5px; }
.vc .vc-mod { height: 33px; line-height: 33px; padding: 0 11px 0 5px; margin: 0 3px; border-radius: 10px; font-size: 18px; letter-spacing: -0.2px; vertical-align: 3px; }
.vc .vc-mod--ratio { padding-left: 9px; }
.vc .vc-mod .vc-mosaic { width: 24px; height: 24px; margin: 4.5px 7px 0 0; border-radius: 5px; }
.vc .vc-mod svg { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }
.vc .vc-cursor { height: 27px; vertical-align: -5px; }
/* the foot of the field: Style and Format on the left, Generate on the right, one line,
   one centre line (the three labels share their baseline) */
.vc-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; }
.vc-sug {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-24);
  font-size: 12px; line-height: 1; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform 160ms var(--ease), color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.vc-sug::before { content: "+"; width: 9px; text-align: center; font-size: 13px; line-height: 1; color: var(--ink-3); }
.vc-sug.is-press { transform: scale(0.93); background: var(--card-2); }
.vc-sug.is-used { color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--line); }
.vc-sug.is-used::before { content: "✓"; font-size: 10px; color: var(--ink-4); }
.vc-gen {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: var(--r-28);
  font-size: 12px; line-height: 1; font-weight: 500; color: #0b0b0c;
  background: linear-gradient(100deg, #cd93ff, #70e2ff, #9fff5b, #ffe83f, #ffa647, #ff75c3); background-size: 220% 100%;
  transition: transform 160ms var(--ease), box-shadow 300ms ease;
}
.vc-gen.is-press { transform: scale(0.94); box-shadow: 0 0 26px rgba(205, 147, 255, 0.55); }
/* the results are 4:5 portraits, like the app's default format: two columns of exact 4:5
   cells, the block as tall as the inside of the composer */
.vc-results { display: grid; grid-template-columns: repeat(2, calc((var(--rh) - 10px) / 2.5)); align-content: start; gap: 10px; min-height: 0; }
.vc-res { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-panel); overflow: hidden; background: var(--card-3); }
.vc-res img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transition: clip-path 640ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.vc-res.is-shown img { clip-path: inset(0 0 0 0); }
/* the stardust reveal (js/os-dust.js): its canvas above the loader, the real image under it at once */
.vc-res canvas.vc-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; transition: opacity 200ms ease; }
.vc-res.is-dust img { transition: none !important; }
.vc-res i {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; display: none;
  background: conic-gradient(#cd93ff, #70e2ff, #9fff5b, #ffe83f, #ffa647, #ff75c3, #cd93ff);
  -webkit-mask: radial-gradient(circle, transparent 7.5px, #000 8px); mask: radial-gradient(circle, transparent 7.5px, #000 8px);
  animation: spin 1.4s linear infinite;
}
.vc-res.is-loading i { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 2b. Creation with your product (25.10.2026, v2) ---------- */
/* The product photo is dropped as it is and fills Subject (no cut-out), it lands in the short
   sentence as a tag, Generate, four 4:5 photos with the app's round loader; then the whole
   content (subject, style, sentence, photos) switches at once to another product. */
.vis-product { height: auto; }
.vp {
  --vc-h: clamp(420px, calc(100svh - 310px), 524px); --vc-pad: 8px; --vc-gap: 8px; --rh: calc(var(--vc-h) - 2 * var(--vc-pad));
  height: var(--vc-h); display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 0.78fr) auto; gap: var(--vc-gap); padding: var(--vc-pad);
  border-radius: var(--radius-tile); background: var(--card-2);
  --field-bg: #1b1b1b; --field-line: rgba(255, 255, 255, 0.08); --mosaic-bg: #2a2a2a; --mod-line: rgba(255, 255, 255, 0.1);
  --ring-track: rgba(255, 255, 255, 0.14);
}
html[data-theme="light"] .vp { --field-bg: #f5f4f0; --field-line: rgba(27, 26, 24, 0.04); --mosaic-bg: #e9e7e2; --mod-line: rgba(27, 26, 24, 0.08); --ring-track: rgba(27, 26, 24, 0.1); }
.vp-col { display: flex; flex-direction: column; gap: var(--vc-gap); min-width: 0; min-height: 0; }
.vp-panel { padding: 12px 14px 14px; border-radius: var(--radius-panel); background: var(--card-3); min-width: 0; }
html[data-theme="light"] .vp-panel { background: #fff; box-shadow: 0 0 0 1px rgba(27, 26, 24, 0.05); }
.vp-subject { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vp-drop {
  position: relative; flex: 1 1 auto; min-height: 0; border-radius: 8px; background: var(--field-bg);
  outline: 1.5px dashed var(--line-2); outline-offset: -6px; overflow: hidden;
  transition: outline-color 160ms ease, background-color 160ms ease;
}
.vp-drop.is-over { outline-color: var(--ink-3); background: color-mix(in srgb, var(--field-bg) 80%, var(--ink) 4%); }
.vp-drop.is-filled { outline-color: transparent; }
.vp-drop-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--ink-3); transition: opacity 140ms ease; }
.vp-drop-hint svg { width: 18px; height: 18px; }
.vp-drop.is-filled .vp-drop-hint { opacity: 0; }
/* the photo itself, as it is (cover: never stretched), filling the rectangle */
.vp-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transform: scale(1.04); transition: opacity 200ms ease, transform 320ms var(--ease-out); }
.vp-drop.is-filled .vp-shot { opacity: 1; transform: none; }
/* the file being dragged in from outside: its own proportions, its name */
.vp-file {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; padding: 5px 5px 6px; border-radius: 10px; background: var(--card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 4px;
  transform: translate(70%, -140%) rotate(6deg); opacity: 0; pointer-events: none;
}
.vp-file img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; }
.vp-file b { font-size: 10px; line-height: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-file.is-in { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); transition: transform 420ms var(--ease-out), opacity 120ms ease; }
.vp-file.is-drop { opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: transform 160ms var(--ease), opacity 160ms ease; }
.vp-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink); opacity: 0; transition: opacity 160ms ease; }
.vp-name.is-on { opacity: 1; }
.vp-file-label { font-size: 11px; font-weight: 400; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the style: one series, its 2 x 2 mosaic and its name on one line */
.vp-style { flex: none; }
.vp-style-pick { flex-direction: row; align-items: center; gap: 10px; }
.vp-style-pick .vc-mosaic { width: 52px; flex: none; }
.vp-style-pick b { font-size: 12px; }
.vp-prompt { display: flex; flex-direction: column; min-height: 0; }
/* the sentence: a few words, set like text (not the module table of the first card) */
.vp-prompt .vc-sentence { font-size: 15px; line-height: 23px; letter-spacing: -0.1px; }
.vp-prompt .vc-mod { height: 21px; line-height: 21px; font-size: 12.5px; vertical-align: baseline; margin: 0 1px 0 0; }
.vp-prompt .vc-cursor { height: 16px; vertical-align: -3px; }
/* from one product to the next: the content fades out, the next one fades in (--vp-fade set by
   the script, a little shorter each time); .is-swap = a silent reset, no transition at all */
.vp-results .vc-res img {
  transition-property: clip-path, opacity; transition-duration: 420ms, var(--vp-fade, 300ms);
  transition-timing-function: var(--ease-out), ease; transition-delay: calc(var(--i, 0) * 60ms), 0ms;
}
.vp-shot { transition: opacity var(--vp-fade, 200ms) ease, transform 320ms var(--ease-out); }
.vp-name, .vp-style-pick, .vp-prompt .vc-sentence { transition: opacity var(--vp-fade, 160ms) ease; }
.vp.is-fade .vp-drop.is-filled .vp-shot, .vp.is-fade .vp-name.is-on, .vp.is-fade .vp-style-pick,
.vp.is-fade .vp-prompt .vc-sentence, .vp.is-fade .vp-results .vc-res img { opacity: 0; }
.vp.is-swap *, .vp.is-swap .vc-res img { transition: none !important; animation: none !important; }
/* the app's loader: an iridescent arc filling on a quiet track, the percentage inside */
.vc-res i.vp-load {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; background: none; -webkit-mask: none; mask: none; animation: none; border-radius: 0;
  display: none; --p: 0;
}
.vc-res.is-loading i.vp-load { display: block; }
.vp-ring { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px), #000 calc(100% - 0.5px), transparent 100%); mask-image: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px), #000 calc(100% - 0.5px), transparent 100%); }
.vp-track { position: absolute; inset: 0; background: var(--ring-track); }
.vp-arc {
  position: absolute; inset: 0; background: conic-gradient(from 0deg, #cd93ff, #70e2ff, #9fff5b, #ffe83f, #ffa647, #ff75c3, #cd93ff);
  -webkit-mask-image: conic-gradient(#000 calc(var(--p) * 1%), transparent calc(var(--p) * 1%)); mask-image: conic-gradient(#000 calc(var(--p) * 1%), transparent calc(var(--p) * 1%));
}
.vp-load em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 9.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* the product's own tag in the sentence: its photo, small, on white */
.vc-mod--subject { --mod-bg: #e9e7e2; --mod-ink: #1b1a18; }
html:not([data-theme="light"]) .vc-mod--subject { --mod-bg: #2b2b31; --mod-ink: #fff; }
.vc-mod .vp-thumb { display: inline-block; width: 18px; height: 18px; margin: 3px 6px 0 0; border-radius: 5px; vertical-align: top; object-fit: contain; background: #fff; }

/* ---------- 3. Edition: four tiles, one gesture each ---------- */
.vis-edition { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; height: min(var(--vis-h), 470px); }
.ed-tile { position: relative; margin: 0; border-radius: var(--radius-tile); overflow: hidden; background: var(--card-2); }
.ed-stage { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.ed-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hypracolor: the swatches recolour the flower (a wipe from left to right) */
.ed-color .hc-next { clip-path: inset(0 100% 0 0); }
.ed-color .hc-next.is-wipe { clip-path: inset(0 0 0 0); transition: clip-path 760ms var(--ease-out); }
.ed-dots { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); display: flex; gap: 9px; padding: 7px 10px; border-radius: var(--r-28); background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--line); }
.ed-dots button { position: relative; width: 15px; height: 15px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; transition: box-shadow 200ms ease, transform 160ms var(--ease); }
.ed-dots button::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.ed-dots button:hover { transform: scale(1.14); }
.ed-dots button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink); }
.ed-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Reframe: the frame steps through the formats, always across her face (js sets its box) */
.rf-box {
  position: absolute; z-index: 2; left: var(--l, 0); top: var(--t, 0); width: var(--w, 100%); height: var(--h, 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.95); border-radius: 3px;
  box-shadow: 0 0 0 100vmax rgba(10, 10, 10, 0.46);
  transition: left 640ms var(--ease), top 640ms var(--ease), width 640ms var(--ease), height 640ms var(--ease);
}
.rf-box i { position: absolute; width: 12px; height: 12px; border: 0 solid #fff; }
.rf-box i:nth-child(1) { left: -3px; top: -3px; border-width: 3px 0 0 3px; }
.rf-box i:nth-child(2) { right: -3px; top: -3px; border-width: 3px 3px 0 0; }
.rf-box i:nth-child(3) { left: -3px; bottom: -3px; border-width: 0 0 3px 3px; }
.rf-box i:nth-child(4) { right: -3px; bottom: -3px; border-width: 0 3px 3px 0; }
.rf-ratio { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 52px; padding: 0 10px; border: 0; border-radius: var(--r-24); cursor: pointer; background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--line); font: inherit; }
.rf-ratio b { font-size: 12px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.rf-ratio:hover, .chip-btn:hover { box-shadow: 0 0 0 1px var(--ink-3); }
.chip:has(.chip-btn) { padding: 0; }
.chip-btn { display: inline-flex; align-items: center; height: 100%; padding: 0 10px; border: 0; border-radius: inherit; background: none; font: inherit; color: inherit; cursor: pointer; }
.chip-btn::after { content: ""; width: 0; height: 0; margin-left: 6px; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
/* Develop: the frame grows, the image continues past its edges */
.ed-develop .ed-stage { background: var(--card-3); }
.dv-frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 70cqw; height: calc(70cqw * 1.25); overflow: hidden; border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  animation: dv-frame 8s var(--ease) infinite; animation-play-state: paused;
}
.dv-frame img { position: absolute; left: 0; width: 100%; height: auto; top: calc(-70cqw * 1.6136 * 0.1641); animation: dv-img 8s var(--ease) infinite; animation-play-state: paused; }
@keyframes dv-frame { 0%, 22% { height: calc(70cqw * 1.25); } 42%, 78% { height: calc(70cqw * 1.6136); } 94%, 100% { height: calc(70cqw * 1.25); } }
@keyframes dv-img { 0%, 22% { top: calc(-70cqw * 1.6136 * 0.1641); } 42%, 78% { top: 0; } 94%, 100% { top: calc(-70cqw * 1.6136 * 0.1641); } }
/* Enhance: before on the left of the divider, after on the right; it sweeps by itself,
   and it can be held and dragged (mouse, pen, touch) */
.en-stage { cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.en-stage img { pointer-events: none; -webkit-user-drag: none; }
.en-after { clip-path: inset(0 0 0 var(--p, 50%)); }
.en-line { position: absolute; top: 0; bottom: 0; left: var(--p, 50%); z-index: 3; width: 0; outline: none; }
.en-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.75px; width: 1.5px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
.en-line i { position: absolute; left: 0; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.en-line i::before, .en-line i::after { content: ""; position: absolute; top: 50%; margin-top: -4px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.en-line i::before { left: 7px; border-right: 5px solid #1b1a18; }
.en-line i::after { right: 7px; border-left: 5px solid #1b1a18; }
.en-line:focus-visible i { box-shadow: 0 0 0 2px #1b1a18, 0 0 0 4px #fff; }
.en-tag { position: absolute; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-22); font-size: 11px; font-weight: 500; color: var(--ink); background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
.en-tag--b { left: 12px; }
.en-tag--a { right: 12px; }
.os-card.is-live .dv-frame, .os-card.is-live .dv-frame img { animation-play-state: running; }

/* ---------- 4. Motion: simplified preview + two exported loops ---------- */
.vis-motion { display: grid; grid-template-columns: minmax(0, 1fr) calc((var(--vis-h) - 14px) / 2); gap: 14px; }
.mo-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 248px; border-radius: var(--radius-tile); overflow: hidden; background: var(--card-2); min-height: 0; }
.mo-stage { position: relative; background: #0c0c0c; min-height: 0; }
.mo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.mo-demo.is-ready .mo-canvas { opacity: 1; }
.mo-demo.is-switching .mo-canvas { opacity: 0; transition-duration: 180ms; }
.mo-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 9px; border-radius: var(--r-22); font-size: 11.5px; line-height: 1; color: rgba(244, 243, 241, 0.72); background: rgba(12, 12, 12, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mo-panel { display: flex; flex-direction: column; gap: 22px; padding: 20px 18px; border-left: 1px solid var(--line); overflow: auto; }
.mo-h { font-size: 12px; line-height: 1; color: var(--ink-3); margin-bottom: 10px; }
.mo-templates { display: flex; flex-direction: column; gap: 2px; }
.mo-templates button { display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-32); font-size: 14px; color: var(--ink-2); cursor: pointer; text-align: left; transition: background-color 180ms ease, color 180ms ease; }
.mo-templates button:hover { color: var(--ink); background: color-mix(in srgb, var(--card-3) 55%, transparent); }
.mo-templates button[aria-checked="true"] { color: var(--ink); background: var(--card-3); }
.mo-slider { display: block; margin-top: 14px; }
.mo-slider:first-of-type { margin-top: 0; }
.mo-sl-top { display: flex; justify-content: space-between; font-size: 13px; line-height: 1; color: var(--ink-2); margin-bottom: 8px; }
.mo-sl-top output { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mo-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; --p: 50%; }
.mo-slider input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--ink-2) var(--p), var(--line-2) var(--p)); }
.mo-slider input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--ink-2) var(--p), var(--line-2) var(--p)); }
.mo-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.mo-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.mo-reset { margin-top: auto; align-self: flex-start; font-size: 13px; color: var(--ink-3); cursor: pointer; padding: 4px 0; }
.mo-reset:hover { color: var(--ink); }
.mo-loops { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; min-height: 0; }
.mo-loop { position: relative; margin: 0; border-radius: var(--radius-tile); overflow: hidden; background: var(--media); min-height: 0; }
.mo-loop video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5. Direction: monitor, conversation, timeline ---------- */
/* The monitor is the app's dotted stage with the film in 4:5 at its centre (never taller than
   270 CSS px: the video is 540 px tall, so it is never upscaled on a x2 screen). The timeline is
   a ruler, a video track of filmstrips (strip-N.webp: 10 frames of 80x100 px, shown at 40x50,
   so x2 and never stretched) and a music track whose waveform is vector (svg built by js).
   One gesture: the playhead runs with the video's clock, the clip under it is outlined. */
.vis-direction { display: flex; flex-direction: column; gap: 14px; --dr-dot: var(--line-2); }
.dr-top { flex: 1; min-height: 0; display: flex; gap: 14px; }
.dr-monitor {
  position: relative; flex: 1.35 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 18px 64px; border-radius: var(--radius-tile); overflow: hidden;
  background-color: var(--card-2);
  background-image: radial-gradient(circle, var(--dr-dot) 1px, transparent 1.6px);
  background-size: 14px 14px; background-position: center;
}
.dr-frame {
  position: relative; height: min(100%, 270px); aspect-ratio: 4 / 5; flex: none;
  border-radius: var(--radius-panel); overflow: hidden; background: #0a0a0a;
  box-shadow: 0 0 0 1px var(--line), 0 14px 34px rgba(0, 0, 0, 0.32);
}
html[data-theme="light"] .dr-frame { box-shadow: 0 0 0 1px var(--line), 0 14px 30px rgba(27, 26, 24, 0.14); }
.dr-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dr-fmt { position: absolute; left: 12px; top: 12px; padding: 5px 9px; border-radius: var(--r-22); font-size: 12px; line-height: 1; font-weight: 500; color: var(--ink-2); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font-variant-numeric: tabular-nums; }
.dr-tc { position: absolute; left: 14px; bottom: 12px; font-size: 12px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dr-tc b { font-weight: inherit; color: var(--ink); }
.dr-chat { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 19px; border-radius: var(--radius-tile); background: var(--card-2); }
.dr-msg { max-width: 88%; padding: 10px 14px; border-radius: var(--r-40); font-size: 14px; line-height: 1.4; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.dr-msg--you { align-self: flex-end; color: var(--ink); background: var(--card-3); box-shadow: none; }
.dr-input { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: 6px; padding: 0 6px 0 16px; border-radius: var(--r-40); font-size: 14px; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.dr-input i { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
/* (27.10) the panel shows the edit as it is made in the app: steps with their key, then Export */
.dr-msg kbd { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; font: inherit; font-size: 12px; line-height: 1.4; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.dr-export { color: var(--ink-2); }
.dr-export b { flex: none; padding: 7px 14px; border-radius: var(--r-40); font-size: 13px; font-weight: 500; line-height: 1; color: var(--card); background: var(--ink); }
/* one radius for every bar of the timeline (clips, music): 8 px, whatever the height (25.10) */
.dr-timeline { --tl-r: 8px; flex: none; padding: 10px 12px 12px; border-radius: var(--radius-tile); background: var(--card-2); }
.dr-lanes { position: relative; display: grid; grid-template-rows: 16px 50px 26px; row-gap: 6px; }
.dr-ruler { position: relative; }
.dr-ruler i { position: absolute; bottom: 0; width: 1px; height: 3px; background: var(--line-2); }
.dr-ruler i.is-major { height: 6px; background: var(--ink-3); }
.dr-ruler span { position: absolute; top: 0; font-size: 10px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; transform: translateX(-50%); white-space: nowrap; }
.dr-ruler span:first-of-type { transform: none; }
.dr-track { position: relative; display: flex; gap: 2px; min-width: 0; }
.dr-clip { --clip-r: var(--tl-r); position: relative; flex: var(--d) 1 0; min-width: 0; overflow: hidden; border-radius: var(--clip-r); background: #0a0a0a; }
.dr-clip img { display: block; height: 100%; width: auto; max-width: none; }
.dr-clip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: box-shadow 200ms ease; pointer-events: none; }
/* light theme: the same thin edge, dark, so a white frame keeps the clip's exact height */
html[data-theme="light"] .dr-clip::after { box-shadow: inset 0 0 0 1px rgba(27, 26, 24, 0.1); }
.dr-clip.is-on::after { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px rgba(0, 0, 0, 0.25); }
.dr-track--a { display: block; border-radius: var(--tl-r); overflow: hidden; background: var(--card-3); }
.dr-track--a svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dr-track--a .dr-wave { fill: var(--ink-3); opacity: 0.7; }
.dr-track--a .dr-wave--on { fill: var(--ink); opacity: 0.9; clip-path: inset(0 calc(100% - var(--ax, 0px)) 0 0); }
.dr-head { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 2px; margin-left: -1px; background: var(--ink); transform: translateX(var(--ph, 0px)); will-change: transform; pointer-events: none; }
.dr-head::before { content: ""; position: absolute; left: -4px; top: -1px; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
/* Motion. With the scroll (--enter: 1 at the bottom of the screen, 0 on the line): the film
   settles, the clips lay themselves on the track one after another, the music draws from the
   left. With the film's clock (js): each cut lights its clip, the conversation is typed and sent
   again on every loop; only the clip under the playhead is lit. */
.dr-msg { transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.dr-msg.is-out { opacity: 0; transform: translateY(8px); transition-duration: 160ms; }
.dr-input span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.dr-input span.is-typing { color: var(--ink); }
.dr-input span.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--ink); animation: dr-caret 0.9s steps(1) infinite; }
@keyframes dr-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .dr-frame { transform: translate3d(0, calc(var(--enter, 0) * 22px), 0) scale(calc(1 - var(--enter, 0) * 0.06)); }
  .dr-clip {
    --r: clamp(0, (0.95 - var(--i, 0) * 0.08 - var(--enter, 0)) / 0.25, 1);
    clip-path: inset(0 calc(100% - var(--r) * 100%) 0 0 round var(--clip-r));
  }
  .dr-track--a { clip-path: inset(0 calc(100% - clamp(0, (0.9 - var(--enter, 0)) / 0.5, 1) * 100%) 0 0 round var(--tl-r)); }
  .dr-ruler { opacity: clamp(0, (0.95 - var(--enter, 0)) / 0.3, 1); }
}
/* short desktop screens: the film keeps its room, the conversation keeps two lines */
@media (min-width: 1024px) and (max-height: 820px) {
  .dr-chat .dr-msg:nth-child(2) { display: none; }
  .dr-lanes { grid-template-rows: 14px 42px 20px; row-gap: 5px; }
  .dr-timeline { --tl-r: 7px; }
  .dr-timeline { padding: 8px 14px 10px; }
}




/* ---------- Before the footer: the closing of the film ---------- */
/* A section of the page: paper and ink in light, black and white in dark, all in
   Hypra Sans. It comes a little after the
   stack has left. While it passes, its content holds for a moment (a short sticky, its
   top set by js so that the list is centred on the screen) and the column rolls through
   the names, lands on "Studio" and slides right so that "Hypra Studio" ends centred. The
   list of the Creative OS film (comps/v7*.html, README tour 8): the wordmark on the
   baseline of the sans (1.175 em over 584 units), 0.278 em before the column, lines at
   1.2 em, -0.032 em tracking; four names in view (the active one and three under it, the
   fourth fading), faded top and bottom. The price, the line and the buttons sit right
   under the active line, pushed down by the names still under it. */
.pre {
  position: relative; z-index: 1; margin-top: 10vh; background: var(--page); color: var(--ink);
  font-family: "Hypra Sans", ". Book", sans-serif;
  --f: var(--os-f);
  --pre-on: var(--ink); --pre-next: #a6a49e; --pre-past: #d3d1cb; --pre-logo: #9b9994;
}
html:not([data-theme="light"]) .pre { --pre-next: #6e6e74; --pre-past: #3a3a3e; --pre-logo: #8a8a8f; }
.pre-pin {
  position: sticky; top: var(--pin-top, 24vh);
  display: flex; flex-direction: column; align-items: center; padding: 0 var(--gutter) clamp(40px, 7vh, 64px);
}
.pre-roll { height: 100vh; } /* set by js: the roll, plus the room the footer rises in */
/* the glow behind "Hypra Studio" (js): fades in once the names have landed and the page
   is still, fades out when they roll back */
.pre-glow { position: absolute; left: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.pre-glow.is-lit { opacity: 1; }
.pre-glow.is-still { opacity: 0.7; transition: none; }
.pre-list, .pre-cta { z-index: 1; }
.pre-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pre-list {
  position: relative; margin: 0; transform: translate3d(var(--shift, 0px), 0, 0);
  white-space: nowrap; font-family: "Hypra Sans", sans-serif; font-weight: 400;
  font-size: var(--f); line-height: 1.2; letter-spacing: -0.032em; color: var(--ink);
}
/* the wordmark: 455 x 1026 units, 111 of them under the baseline */
.pre-logo {
  display: inline-block; width: calc(var(--f) * 2.0643); height: calc(var(--f) * 0.9155);
  margin-right: calc(var(--f) * 0.2778); vertical-align: calc(var(--f) * -0.2233);
  /* "Hypra" lights up with "Studio" (26.10): --logo-a follows Studio's own --a (js) */
  color: color-mix(in srgb, var(--pre-on) calc(var(--logo-a, 0) * 100%), var(--pre-logo));
}
.pre-logo svg { display: block; width: 100%; height: 100%; }
.pre-logo path { fill: currentColor; }
/* the column: one cell shared by the names (js moves each by --d lines) */
.pre-col {
  display: inline-grid; vertical-align: baseline; padding: 1.8em 0 4em; margin: -1.8em 0 -4em;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0.6em, #000 1.9em, #000 5.4em, transparent 6.6em);
  mask-image: linear-gradient(to bottom, transparent 0.6em, #000 1.9em, #000 5.4em, transparent 6.6em);
}
.pre-w {
  grid-area: 1 / 1; justify-self: start; transform: translate3d(0, calc(var(--d, 0) * 1.2em), 0); will-change: transform;
  color: color-mix(in srgb, var(--pre-on) calc(var(--a, 0) * 100%), var(--pre-next));
}
.pre-w.is-past { color: color-mix(in srgb, var(--pre-on) calc(var(--a, 0) * 100%), var(--pre-past)); }
.pre-cta {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-top: clamp(16px, 2.6vh, 28px); transform: translate3d(0, var(--rise, 0px), 0);
}
.pre-p { font-family: "Hypra Sans", sans-serif; font-weight: 400; font-size: 17px; line-height: 24px; letter-spacing: -0.1px; text-align: center; color: var(--ink-2); }
.pre-p span { color: var(--ink-3); }
.pre-ctas { display: flex; justify-content: center; align-items: center; gap: 12px; }
.pre .pre-ctas .btn p { font-family: "Hypra Sans", sans-serif; font-weight: 500; }
/* 27.10: the money-back seal, right under « See pricing » (it left the footer) */
.pre-cta .mbg--pre { margin-top: -6px; }

/* ---------- The crew (26.10, DEV) ----------
   Between "Hypra fills the gap" and the comparison: the list of the Creative OS film in two
   big columns, the tool on the left (aligned on the gap) and the role it stands in for on the
   right. The section holds while the page scrolls through its roll (sticky, top set by js so
   the active line is centred) and both columns roll together: the active pair in ink, the
   next ones grey, the past one paler, faded top and bottom. The type size is fitted by js so
   the widest pair always holds on one line. */
.crew {
  position: relative; z-index: 1; color: var(--ink); padding-top: clamp(64px, 14vh, 140px);
  --cf: var(--os-f);
  --pre-on: var(--ink); --pre-next: #a6a49e; --pre-past: #d3d1cb;
}
html:not([data-theme="light"]) .crew { --pre-next: #6e6e74; --pre-past: #3a3a3e; }
.crew-pin { position: sticky; top: var(--pin-top, 30vh); display: flex; justify-content: center; padding: 0 var(--gutter); }
.crew-roll { height: 100vh; } /* set by js */
.crew-list {
  display: inline-flex; gap: 0 calc(var(--cf) * 0.36); margin: 0; white-space: nowrap;
  font-family: "Hypra Sans", sans-serif; font-weight: 400; font-size: var(--cf); line-height: 1.2; letter-spacing: -0.032em;
}
.crew-col {
  display: inline-grid; padding: 1.8em 0 4em; margin: -1.8em 0 -4em;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0.6em, #000 1.9em, #000 5.4em, transparent 6.6em);
  mask-image: linear-gradient(to bottom, transparent 0.6em, #000 1.9em, #000 5.4em, transparent 6.6em);
}
.crew-col--l .cr-w { justify-self: end; }
.crew-col--r .cr-w { justify-self: start; }
.cr-w {
  grid-area: 1 / 1; transform: translate3d(0, calc(var(--d, var(--i)) * 1.2em), 0); will-change: transform;
  color: color-mix(in srgb, var(--pre-on) calc(var(--a, 0) * 100%), var(--pre-next));
}
.cr-w.is-past { color: color-mix(in srgb, var(--pre-on) calc(var(--a, 0) * 100%), var(--pre-past)); }

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
}
@media (max-width: 1023.98px) {
  :root { --card-pad-x: 24px; --card-pad-y: 24px; }
  .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wall-col:nth-child(6) { display: none; }
  .vis-motion { grid-template-columns: minmax(0, 1fr); height: auto; }
  .mo-demo { height: var(--vis-h); }
  .mo-loops { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .mo-loop { aspect-ratio: 1; }
  .vis-edition { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .ed-tile { aspect-ratio: 4 / 4.2; }
  .vp { height: auto; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .vp-col { min-height: 300px; }
  .vp-results { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vis-direction { height: auto; }
  .dr-top { flex-direction: column; }
  .dr-monitor { flex: none; height: 330px; }
  .dr-chat { flex: none; justify-content: flex-start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 809.98px) {
  :root { --card-pad-x: 18px; --card-pad-y: 20px; --radius-card: 22px; --scene-h: clamp(900px, 125svh, 1150px); }
  .hero { padding-top: 132px; }
  .hero-sub { margin-top: 12px; max-width: 340px; }
  .hero-ctas { margin-top: 22px; flex-direction: column; align-items: stretch; gap: 10px; max-width: 320px; margin-left: auto; margin-right: auto; }
  .scene { margin-top: var(--hero-gap, 75px); }
  .reel { width: min(88vw, 440px); aspect-ratio: 9 / 16; } /* the vertical film on phones */
  .deck { padding: 0 16px; --peek: 10px; }
  .os-card { margin-bottom: 16px; padding-bottom: 20px; }
  .card-head { flex-direction: column; gap: 10px; margin-bottom: 18px; }
  .card-title, .card-sub { font-size: 19px; line-height: 21px; letter-spacing: -0.4px; }
  .card-pill { height: 21px; padding: 0 8px; margin-bottom: 3px; font-size: 11.5px; }
  .card-sub { margin-top: 1px; }
  .how { position: static; }
  .how-panel { left: var(--card-pad-x); right: var(--card-pad-x); top: auto; width: auto; margin-top: 8px; position: absolute; }
  .vis-wall { height: 420px; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wall-col:nth-child(n + 4) { display: none; }
  .wall-cell { margin-bottom: 8px; border-radius: var(--radius-panel); }
  .search-pill { min-width: 0; width: calc(100% - 32px); height: 44px; font-size: 15px; bottom: 16px; }
  /* Creation on phones: the six mosaics in one row (the app's 44 px icons, names in the
     modules), a fixed Describe block, the four results in 2 x 2 under it, as wide as the
     screen height allows so the whole card fits between its line and the bottom */
  .vis-vision { height: auto; }
  .vc { --vc-pad: 8px; --vc-gap: 8px; height: auto; grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }
  .vc-styles { padding: 10px 12px 12px; }
  .vc-prompt { flex: none; height: 196px; padding: 11px; }
  .vc-h { margin-bottom: 8px; }
  .vc-style-row { gap: 6px; }
  .vc-style { gap: 0; }
  .vc-style b { display: none; }
  .vc-mosaic { border-radius: 6px; }
  .vc-field { padding: 9px 9px 9px 11px; gap: 6px; }
  .vc-sentence { font-size: 14px; line-height: 25px; }
  .vc .vc-sentence { font-size: 17px; line-height: 28px; }
  .vc .vc-mod { height: 24px; line-height: 24px; font-size: 13px; vertical-align: 2px; }
  .vc .vc-mod .vc-mosaic { width: 17px; height: 17px; margin-top: 3.5px; }
  .vc-mod { height: 22px; line-height: 22px; font-size: 12px; }
  .vc-mod .vc-mosaic { width: 16px; height: 16px; margin: 3px 5px 0 0; }
  .vc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, calc((100svh - 618px) * 0.8)); min-width: 156px; margin: 0 auto; }
  .vp { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }
  .vp-col { min-height: 0; flex-direction: row; }
  .vp-subject { flex: 1 1 0; min-height: 230px; }
  .vp-style { flex: 0 0 38%; align-self: stretch; }
  .vp-style-pick { flex-direction: column; align-items: stretch; gap: 8px; }
  .vp-style-pick .vc-mosaic { width: 100%; }
  .vp-style-pick b { display: block; }
  .vp-prompt { height: 170px; padding: 11px; }
  .vp-results { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .vis-edition { gap: 10px; }
  .ed-tile { aspect-ratio: 4 / 5; }
  .chip { left: 12px; top: 12px; height: 22px; padding: 0 8px; font-size: 11px; }
  .ed-dots { bottom: 10px; gap: 7px; padding: 6px 8px; }
  .ed-dots button { width: 13px; height: 13px; }
  .rf-ratio { bottom: 10px; }
  .en-tag { bottom: 10px; }
  /* Motion on phones: a 4:3 preview, the templates in one row, the three settings side by
     side, the two loops in a short row: the whole card fits a 390 x 844 screen */
  .mo-demo { height: auto; grid-template-columns: 1fr; }
  .mo-stage { aspect-ratio: 4 / 3; }
  .mo-panel { border-left: 0; border-top: 1px solid var(--line); gap: 12px; padding: 12px; overflow: visible; }
  .mo-h { display: none; }
  .mo-templates { flex-direction: row; flex-wrap: nowrap; gap: 5px; }
  .mo-templates button { flex: 1 1 auto; justify-content: center; height: 28px; padding: 0 8px; border-radius: var(--r-28); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line-2); }
  .mo-templates button[aria-checked="true"] { box-shadow: none; }
  .mo-panel > .mo-group:nth-of-type(2) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .mo-slider, .mo-slider:first-of-type { margin-top: 0; }
  .mo-sl-top { font-size: 11.5px; }
  .mo-reset { display: none; }
  .mo-loops { gap: 10px; }
  .mo-loop { aspect-ratio: 16 / 10; }
  .dr-chat { padding: 19px; gap: 8px; }
  .dr-chat .dr-msg:nth-child(2), .dr-chat .dr-msg:nth-child(3) { display: none; }
  .dr-msg { font-size: 13px; }
  .dr-monitor { height: 300px; padding: 30px 48px; }
  .dr-timeline { padding: 8px 12px 10px; }
  .dr-lanes { grid-template-rows: 14px 40px 22px; row-gap: 5px; }
  .dr-timeline { --tl-r: 7px; }
  .pre-cta { gap: 18px; }
  .pre-pin { padding-bottom: 28px; }
  .pre-p { font-size: 16px; line-height: 22px; }
  .pre-ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 320px; }
}
/* short laptop screens: the composer's height follows the screen (--vc-h above), so the
   Creation card fits under its line down to 730 px high */
/* narrow tablets (810 to 960): the six mosaics without their names (the modules carry them),
   as on phones */
@media (min-width: 810px) and (max-width: 959.98px) {
  .vc-style-row { gap: 6px; }
  .vc-style { gap: 0; }
  .vc-style b { display: none; }
  .vp-style-pick b { display: block; }
}
/* small phones (375 and under): a little less air in the Creation composer */
@media (max-width: 379.98px) {
  .vc { --vc-gap: 7px; }
  .vc-styles { padding: 9px 10px 10px; }
  .vc-style-row { gap: 5px; }
  .vc-prompt { height: 204px; }
}
/* ---------- Reduced motion: static composition, plain sections, still loops ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; transition: none; }
  .sc { transform: translate3d(-50%, 0, 0) !important; will-change: auto; }
  .reel { transform: translate3d(-50%, 0, 0) !important; }
  .os-card { position: relative; top: auto !important; transform: none !important; will-change: auto; }
  .os-card::before { display: none; }
  .deck::after { display: none; }
  .pre-pin { position: relative; top: auto; padding-top: 24px; }
  .pre-roll { display: none; }
  .pre-w { will-change: auto; }
  .crew-pin { position: relative; top: auto; padding: 40px var(--gutter); }
  .crew-roll { display: none; }
  .crew-col { -webkit-mask-image: none; mask-image: none; padding: 0 0 4.8em; margin: 0; }
  .cr-w { --d: var(--i) !important; --a: 1 !important; will-change: auto; }
  .card-text, .card-vis { transform: none !important; }
  .wall-run, .dv-frame, .dv-frame img, .caret, .vc-cursor, .vc-mod, .vc-res i, .how-panel { animation: none !important; }
  .vc-sug { transition: none; }
  .rf-box, .wall-cell img, .vc-res img, .hc-next { transition: none !important; }
}

/* 22.10: one small grey word next to the pill of a tool that is not in the app yet */
.card-soon { margin-left: 10px; vertical-align: 1px; }


/* ---------- The recipe (26.10, DEV) ----------
   Replaces the crew. The Instagram « recipe » film (v5) on its own 1080 x 1174 board, scaled
   by js (--rcp-k) and held in the middle of the screen while the page scrolls through
   --rcp-roll; every frame follows the scroll (js/os-recipe.js). */
.rcp {
  position: relative; z-index: 1;
  /* 27.10: 64 px more on top. 02.11: « Hypra fills the gap » now follows, with its own top margin
     (was 128 px below, away from « A full studio ») */
  padding-top: calc(clamp(64px, 14vh, 140px) + 64px); padding-bottom: 0;
  --rcp-card: #141416; --rcp-chip: #232326; --rcp-slot: #2c2c30; --rcp-hole: #111113;
  --rcp-wire: #2e2e32; --rcp-lit: #77777d; --rcp-grey: #7c7c81; --rcp-ink: #f4f4f2; --rcp-obj: #141416;
}
html[data-theme="light"] .rcp {
  --rcp-card: #fff; --rcp-chip: #ececee; --rcp-slot: #d3d3d7; --rcp-hole: #e4e3df;
  --rcp-wire: #d4d4d8; --rcp-lit: #8e8e93; --rcp-grey: #9a9a9f; --rcp-ink: #111112; --rcp-obj: #fff;
}
.rcp-pin { position: sticky; top: var(--pin-top, 12vh); display: flex; justify-content: center; padding: 0 var(--gutter); }
.rcp-fit { position: relative; width: calc(1080px * var(--rcp-k, 0.5)); height: var(--rcp-h, 587px); }
.rcp-board {
  position: absolute; left: 0; top: 0; width: 1080px; height: 1174px; transform: scale(var(--rcp-k, 0.5)); transform-origin: 0 0;
  font-family: "Hypra Sans", sans-serif; font-weight: 400; color: var(--rcp-ink); letter-spacing: 0;
}
.rcp-roll { height: var(--rcp-roll, 0px); }
.rcp-board > * { position: absolute; }
.rcp-label { margin: 0; font-size: 20px; line-height: 24px; color: var(--rcp-grey); text-align: center; }
.rcp-slot { border-radius: 24px; border: 2px dashed var(--rcp-slot); background: var(--bg); z-index: 4; }
.rcp-wires, .rcp-caps { left: 0; top: 0; pointer-events: none; }
.rcp-wires { z-index: 2; } .rcp-caps { z-index: 30; }
.rcp-wires svg, .rcp-caps svg { display: block; overflow: visible; }
.rcp-wire { fill: none; stroke: var(--rcp-wire); stroke-width: 2; stroke-linecap: round; }
.rcp-wire--lit { stroke: var(--rcp-lit); }
.rcp-dot { fill: var(--rcp-lit); }
.rcp-end { fill: var(--rcp-wire); } .rcp-end.is-lit { fill: var(--rcp-lit); }
.rcp-card { border-radius: 24px; background: var(--rcp-card); z-index: 10; transform-origin: 50% 50%; }
.rcp-style { position: absolute; }
.rcp-style img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.rcp-pick { position: absolute; inset: -5px; border-radius: 19px; border: 2.5px solid var(--rcp-ink); }
.rcp-badge {
  position: absolute; right: -7px; top: -7px; width: 26px; height: 26px; border-radius: 13px; background: var(--rcp-ink); color: var(--bg);
  font-size: 15px; font-weight: 400; display: flex; align-items: center; justify-content: center;
}
.rcp-prompt { padding: 26px; overflow: hidden; }
.rcp-sent { margin: 0; font-size: 23px; line-height: 36px; letter-spacing: -0.01em; color: var(--rcp-ink); }
.rcp-tag {
  display: inline-block; height: 32px; line-height: 32px; padding: 0 11px; border-radius: 10px; background: var(--rcp-chip);
  font-size: 21px; vertical-align: 1px; white-space: nowrap;
}
.rcp-tag--subj { padding: 0 11px 0 4px; }
.rcp-tag img { display: inline-block; width: 24px; height: 24px; border-radius: 7px; object-fit: contain; background: #fff; vertical-align: -6px; margin-right: 8px; }
.rcp-obj { overflow: hidden; background: var(--rcp-obj); }
.rcp-obj img { position: absolute; inset: 16px; width: 158px; height: 158px; object-fit: contain; }
.rcp-obj.is-cover img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rcp-tile { border-radius: 24px; overflow: hidden; background: var(--rcp-hole); z-index: 4; }
.rcp-load { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.rcp-ring {
  position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #cd93ff, #70e2ff, #9fff5b, #ffe83f, #ffa647, #ff75c3, #cd93ff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.rcp-pc { position: relative; font-size: 24px; color: var(--rcp-grey); font-variant-numeric: tabular-nums; }
.rcp-dust { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.rcp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; z-index: 3; }
/* 27.10: the site squares every corner (superellipse, os-shell.css): the ring and the badge stay round */
.rcp-ring, .rcp-badge { corner-shape: round; }
/* 27.10: the title, two lines of one line each, left and right of the board, faded in by the
   scroll (--rcp-s); no room for them on the sides (is-stacked), one above and one below */
.rcp-side {
  position: absolute; top: var(--rcp-mid, 50%); width: var(--rcp-side-w, 300px); margin: 0; z-index: 2; white-space: nowrap;
  font-family: var(--font-medium); font-weight: 400; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--title); opacity: var(--rcp-s, 0); pointer-events: none;
}
.rcp-side--l { right: calc(100% + 24px); text-align: right; transform: translate3d(calc((1 - var(--rcp-s, 0)) * -24px), -50%, 0); }
.rcp-side--r { left: calc(100% + 24px); text-align: left; transform: translate3d(calc((1 - var(--rcp-s, 0)) * 24px), -50%, 0); }
.rcp.is-stacked .rcp-side { left: 50%; right: auto; width: calc(100vw - 2 * var(--gutter)); text-align: center; font-size: 22px; white-space: normal; }
.rcp.is-stacked .rcp-side--l { top: -20px; transform: translate3d(-50%, calc(-100% + (1 - var(--rcp-s, 0)) * 12px), 0); }
.rcp.is-stacked .rcp-side--r { top: calc(100% + 20px); transform: translate3d(-50%, calc((1 - var(--rcp-s, 0)) * -12px), 0); }