/* KosmoViz Spektrum (TASK-753), from the approved long-scroll prototype
   docs/artifacts/2026-10-17-long-scroll-prototype. A signal chain read top to
   bottom: stage (hero) → readout strip → process with a pinned monitor → four
   chapters, each owning one colour of the spectrum → reel → spec sheet → FAQ →
   final call. Single dark look: the renders are the colour.

   Every page carries `body.kz`; the migrated pricing, credits and legal pages
   add `body.kz-doc`, whose imported markup is styled by structure below
   (TASK-753.6). Element rules stay under `body.kz`; the header (.bar) and
   footer (.foot) set their own type and colour. The block editor's iframe body has
   no `kz` class and WordPress does not rewrite selectors there, so the base
   is written `body:is(.kz, .editor-styles-wrapper)` (same weight as
   `body.kz`) and the Site Editor shows the theme as it renders. Motion is
   CSS only: the site's CSP allows no script. */
:root {
  --room: #0a0a0d;
  --panel: #131318;
  --rule: #26262e;
  --ink: #f1efe9;
  --dim: #9a98a3;
  --red: #ff5a36;
  --amber: #ffb627;
  --lime: #c3f53c;
  --cyan: #45d8ff;
  --spectrum: linear-gradient(90deg, var(--red), var(--amber) 33%, var(--lime) 66%, var(--cyan));
  --display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --wrap: 1240px;
  --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem);
  --step-3: clamp(2.4rem, 1.6rem + 4vw, 5.2rem);
  --step-4: clamp(3.2rem, 1.4rem + 9vw, 10.5rem);
  /* Glass (TASK-753.5): a tinted pane that lets the spectrum light behind it through, a 1px ring and a lit top
     edge. Where backdrop-filter is missing the pane turns opaque (see the @supports rule below the sections). */
  --glass: color-mix(in srgb, var(--panel) 64%, transparent);
  --glass-sheen: linear-gradient(165deg, color-mix(in srgb, var(--ink) 8%, transparent), transparent 42%);
  --glass-ring: color-mix(in srgb, var(--ink) 13%, transparent);
  --glass-blur: blur(18px) saturate(150%);
  --glass-shadow: inset 0 0 0 1px var(--glass-ring), inset 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent), 0 28px 60px -34px #000;
  /* App-window bezel shared by the hero plate and the how-it-works monitor */
  --bezel: linear-gradient(180deg, color-mix(in srgb, var(--ink) 9%, var(--panel)), var(--panel) 40%, color-mix(in srgb, var(--room) 60%, var(--panel)));
  --bezel-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 40px 90px -30px #000;
}

/* ── WordPress wrappers ── */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.wp-block-post-content { max-width: none; margin: 0; }
.wp-block-post-content > main, .wp-block-post-content > article { margin-block: 0; }

/* ── base (this theme's pages only) ── */
body:is(.kz, .editor-styles-wrapper) { color-scheme: dark; margin: 0; background: var(--room); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body:is(.kz, .editor-styles-wrapper) *, body:is(.kz, .editor-styles-wrapper) *::before, body:is(.kz, .editor-styles-wrapper) *::after, .bar *, .foot * { box-sizing: border-box; }
body.kz::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--room); }
html:has(body.kz) { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px); }
:where(body:is(.kz, .editor-styles-wrapper)) a { color: inherit; }
body:is(.kz, .editor-styles-wrapper) :focus-visible, .bar :focus-visible, .foot :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
:where(body:is(.kz, .editor-styles-wrapper)) :is(h1, h2, h3) { font-family: var(--display); font-weight: 800; line-height: .92; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
:where(body:is(.kz, .editor-styles-wrapper)) p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.label { margin: 0; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-variation-settings: "wdth" 87.5; }

/* ── header ── */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: color-mix(in srgb, var(--room) 72%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-ring); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.55; }
.bar .wrap { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.logo .lockup { height: 26px; width: auto; display: block; }
.logo-text { font-family: var(--display); font-size: 1.4rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: .92rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--dim); }
.nav a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--body); font-size: var(--step-0); line-height: 1.55; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--ink); color: var(--room); }
.btn-primary:hover { background: var(--lime); color: var(--room); }
.btn-ghost { border: 1px solid var(--glass-ring); color: var(--ink); background: color-mix(in srgb, var(--panel) 40%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--ink); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--spectrum); transform-origin: 0 50%; transform: scaleX(0); }

/* ── video frames: the poster on top; without one, a glow in the chapter colour ── */
.frame { position: relative; overflow: hidden; border-radius: 6px; max-width: 100%;
  background: var(--poster, none) center / cover no-repeat, radial-gradient(120% 90% at 30% 70%, color-mix(in srgb, var(--c, var(--amber)) 38%, transparent), transparent 60%), radial-gradient(90% 80% at 80% 20%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 55%), var(--panel); }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.r169 { aspect-ratio: 16 / 9; }
.r11 { aspect-ratio: 1; }
.r916 { aspect-ratio: 9 / 16; }
.tag { position: absolute; left: 10px; top: 10px; z-index: 1; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; padding: 4px 8px; border-radius: 3px; background: color-mix(in srgb, var(--room) 70%, transparent); color: var(--ink); }

/* ── hero: centred copy, then the real Studio in an app window (TASK-753.2,
   after viewport.theresonance.studio). The window's film tours Modern dark,
   Modern light and Classic. Rig layers: .demo-scroll takes the scroll-in,
   .demo-rig the pointer tilt (hover zones, no script), .plate and .float the
   load assembly, so no two animations fight over one transform. ── */
.hero { position: relative; isolation: isolate; overflow: clip; padding-bottom: clamp(56px, 9vw, 120px); }
.hero::before { content: ""; position: absolute; inset: auto -10% 0; height: 72%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 22% 78%, color-mix(in srgb, var(--red) 26%, transparent), transparent 70%), radial-gradient(55% 60% at 42% 88%, color-mix(in srgb, var(--amber) 20%, transparent), transparent 70%), radial-gradient(55% 60% at 60% 84%, color-mix(in srgb, var(--lime) 14%, transparent), transparent 70%), radial-gradient(60% 55% at 80% 76%, color-mix(in srgb, var(--cyan) 26%, transparent), transparent 70%);
  filter: blur(40px); }
.hero-copy { display: grid; justify-items: center; gap: 20px; text-align: center; padding-block: clamp(48px, 8vh, 104px) 0; }
body:is(.kz, .editor-styles-wrapper) .hero h1 { font-size: clamp(2.7rem, 1rem + 5.2vw, 5.6rem); font-weight: 900; text-transform: uppercase; font-variation-settings: "wdth" 118; letter-spacing: -.015em; line-height: .9; }
.hero h1 span { display: block; }
.hl { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { max-width: 46rem; font-size: var(--step-1); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .ctas { justify-content: center; }
.hero .fine { font-size: var(--step--1); color: var(--dim); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.demo { position: relative; margin: clamp(36px, 5vw, 64px) auto 0; perspective: 1500px; perspective-origin: 50% 40%; }
.demo-scroll, .demo-rig { transform-style: preserve-3d; }
.demo-rig { --px: 0; --py: 0; transform-origin: 50% 48%; transform: rotateX(calc(var(--py) * 5deg)) rotateY(calc(var(--px) * -7deg)); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.plate { position: relative; padding: 8px; border-radius: 16px; background: var(--bezel); box-shadow: var(--bezel-shadow), 0 18px 40px -20px color-mix(in srgb, var(--cyan) 30%, transparent); }
.plate-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 4px 6px 10px; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.lights { display: flex; gap: 6px; }
/* The window controls in Apple's system colours (TASK-753.8), not the brand spectrum: close, minimise, zoom. */
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .2); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.plate-title { color: var(--ink); }
.plate-themes { justify-self: end; }
.demo .frame { border-radius: 9px; box-shadow: 0 0 0 1px var(--rule); }
.r1610 { aspect-ratio: 16 / 10; }
.float { position: absolute; z-index: 1; display: none; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--glass-sheen), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); transform: translateZ(60px); }
.float p { margin: 0; }
.float-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
/* Upper left: the film labels its steps bottom left (TASK-753.4), a panel there would cover them. */
.float-audio { left: -3.5%; top: 30%; width: 190px; }
.meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meters li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; font-size: .78rem; color: var(--ink); }
.meters li::after { content: ""; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--lvl, 62%), var(--rule) 0); }
.float-export { right: -3.5%; top: 18%; width: 200px; }
.float-big { font-family: var(--display); font-size: 1.9rem; font-weight: 800; line-height: 1; font-variation-settings: "wdth" 90; }
.chips { display: flex; gap: 6px; }
.chips span { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--rule); font-family: var(--mono); font-size: .66rem; color: var(--ink); }
.float-note { font-size: .74rem; color: var(--dim); }
/* Nine hover zones over the window, one per tilt; touch and keyboard never see them. */
.tilt { position: absolute; inset: -4% -2%; z-index: 2; display: none; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
@media (min-width: 1100px) { .float { display: grid; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt { display: grid; }
  .demo:has(.tilt i:nth-child(3n + 1):hover) .demo-rig { --px: -1; }
  .demo:has(.tilt i:nth-child(3n):hover) .demo-rig { --px: 1; }
  .demo:has(.tilt i:nth-child(-n + 3):hover) .demo-rig { --py: 1; }
  .demo:has(.tilt i:nth-child(n + 7):hover) .demo-rig { --py: -1; }
}

/* ── readout marquee ── */
.marquee { position: relative; z-index: 1; border-block: 1px solid var(--glass-ring); overflow: clip; padding-block: 18px; background: var(--glass-sheen), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: run 38s linear infinite; }
.marquee ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.marquee li { font-family: var(--display); font-size: var(--step-2); font-weight: 700; text-transform: uppercase; font-variation-settings: "wdth" 70; padding-inline: 28px; display: flex; align-items: center; gap: 28px; white-space: nowrap; }
.marquee li::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--dim)); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--c, var(--dim)) 70%, transparent); }
@keyframes run { to { transform: translateX(-50%); } }

/* ── sections ── */
.section { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(80px, 12vw, 160px); }
/* Room light: soft spectrum glows behind a section, so its glass has something to show (no blur filter, gradients only). */
.section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--glow, 0);
  background: radial-gradient(40% 50% at var(--g1x, 18%) var(--g1y, 40%), color-mix(in srgb, var(--g1, var(--amber)) 22%, transparent), transparent 70%), radial-gradient(40% 50% at var(--g2x, 82%) var(--g2y, 65%), color-mix(in srgb, var(--g2, var(--cyan)) 18%, transparent), transparent 70%); }
#how { --glow: 1; --g1: var(--amber); --g1x: 30%; --g1y: 45%; --g2: var(--lime); --g2x: 85%; --g2y: 70%; }
.section:has(.specs) { --glow: 1; --g1: var(--red); --g1x: 15%; --g1y: 70%; --g2: var(--cyan); --g2x: 85%; --g2y: 75%; }
#free { --glow: 1; --g1: var(--lime); --g1x: 25%; --g1y: 55%; --g2: var(--cyan); --g2x: 80%; --g2y: 45%; }
#faq { --glow: .8; --g1: var(--amber); --g1x: 10%; --g1y: 30%; --g2: var(--cyan); --g2x: 90%; --g2y: 70%; }
.section.flush { padding-top: 0; }
.head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); max-width: 52rem; }
body:is(.kz, .editor-styles-wrapper) .head h2 { font-size: var(--step-3); text-transform: uppercase; font-variation-settings: "wdth" 80; }
.head p:not(.label) { color: var(--dim); max-width: 40rem; font-size: var(--step-1); line-height: 1.45; }

/* ── how it works: pinned monitor ── */
.how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.how { perspective: 1400px; }
.how .monitor { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); padding: 8px; border-radius: 16px; background: var(--bezel); box-shadow: var(--bezel-shadow), 0 24px 60px -28px color-mix(in srgb, var(--amber) 35%, transparent); transform-origin: 100% 50%; }
.how .monitor .frame { border-radius: 9px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 18vh, 200px); padding-block: 4vh 12vh; counter-reset: s; }
.steps li { position: relative; display: grid; gap: 12px; padding: 24px 26px 28px; border-radius: 16px; counter-increment: s; view-timeline: --step block;
  background: var(--glass-sheen), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
/* The step in reading position gets a spectrum edge (drawn by the scroll timeline below; static: full). */
.steps li::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; border-radius: 2px; background: var(--spectrum); transform-origin: 0 50%; }
.steps li::before { content: "Step " counter(s) " of 6"; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
body:is(.kz, .editor-styles-wrapper) .steps h3 { font-size: var(--step-2); font-variation-settings: "wdth" 90; }
.steps p { color: var(--dim); max-width: 32rem; }

/* ── chapters ── */
.chapters { display: grid; gap: clamp(96px, 14vw, 200px); }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; scroll-margin-top: 80px; }
.chapter:nth-child(even) .media { order: 2; }
.chapter { perspective: 1400px; }
.chapter .media { position: relative; isolation: isolate; display: flex; justify-content: center; --turn: 20deg; }
.chapter:nth-child(even) .media { --turn: -20deg; }
.chapter .media::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%); }
.chapter .media .frame { box-shadow: 0 0 0 1px var(--glass-ring), inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent), 0 40px 80px -40px #000, 0 24px 60px -30px color-mix(in srgb, var(--c) 45%, transparent); }
.chapter .media .frame { width: 100%; }
.chapter .media .frame.r916 { width: min(100%, 360px); }
.chapter .media .frame.r11 { width: min(100%, 520px); }
.chapter .copy { display: grid; gap: 22px; min-width: 0; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.kicker::before { content: ""; width: 28px; height: 3px; background: var(--c); }
body:is(.kz, .editor-styles-wrapper) .chapter h2 { font-size: var(--step-3); font-variation-settings: "wdth" 72; text-transform: uppercase; }
.chapter h2 em { font-style: normal; color: var(--c); }
.chapter .copy > p { color: var(--dim); max-width: 34rem; font-size: var(--step-1); line-height: 1.45; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 34rem; }
.points li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.points li::before { content: ""; width: 8px; height: 8px; background: var(--c); transform: translateY(-1px); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
.points b { font-weight: 600; }
.chapter .copy > p.more { font-size: var(--step-0); }
.more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 4px; }

/* ── reel: a swipe strip; wide screens pan it with the page scroll (below) ── */
.reel { position: relative; }
.reel-pin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.reel-head { padding-bottom: 24px; }
.reel-track { display: flex; gap: 16px; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.reel .frame { flex: 0 0 auto; height: min(62vh, 520px); scroll-snap-align: start; border-radius: 12px; box-shadow: 0 0 0 1px var(--glass-ring), inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent), 0 40px 70px -40px #000; }
.reel .frame.r169 { width: auto; }

/* ── spec sheet ── */
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; perspective: 1200px; }
.spec { position: relative; padding: 28px 24px 32px; display: grid; gap: 12px; align-content: start; border-radius: 16px; transform-origin: 50% 100%;
  background: var(--glass-sheen), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
.spec::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }
.spec:nth-child(1) { --c: var(--red); }
.spec:nth-child(2) { --c: var(--amber); }
.spec:nth-child(3) { --c: var(--lime); }
.spec:nth-child(4) { --c: var(--cyan); }
.spec .big { font-family: var(--display); font-size: var(--step-2); font-weight: 800; font-variation-settings: "wdth" 75; text-transform: uppercase; line-height: 1; }
.spec p:not(.big) { color: var(--dim); }

/* ── free plan ── */
.free { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; border-radius: 20px; padding: clamp(24px, 4vw, 56px);
  background: var(--glass-sheen), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), 0 40px 100px -50px color-mix(in srgb, var(--lime) 40%, transparent); }
/* The rim: a spectrum arc (red → amber → lime → cyan, then nothing) on the 1px border, turned by --spin. */
.free::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--spin), var(--red), var(--amber) 12%, var(--lime) 24%, var(--cyan) 36%, transparent 52%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.free-copy { display: grid; gap: 18px; }
.free-copy > p:not(.label) { color: var(--dim); max-width: 32rem; }
body:is(.kz, .editor-styles-wrapper) .free h2 { font-size: var(--step-3); text-transform: uppercase; font-variation-settings: "wdth" 72; }
.free dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 24px; margin: 0; }
.free dt { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding-top: .2em; }
.free dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Paid plans: one quiet row under the free plan, no amounts until they open. */
.free .later { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; align-items: baseline; border-top: 1px solid var(--glass-ring); padding-top: 20px; }
.free .later p:not(.label) { color: var(--dim); max-width: 40rem; }

/* ── faq ── */
.faq { display: grid; gap: 10px; max-width: 52rem; }
.faq details { padding-inline: 22px; border-radius: 14px; background: var(--glass-sheen), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); transition: box-shadow .25s; }
.faq details[open] { box-shadow: var(--glass-shadow), inset 3px 0 0 var(--amber); }
.faq summary:hover::after { color: var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; min-height: 64px; padding-block: 18px; font-size: var(--step-1); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.4rem; color: var(--dim); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--dim); padding-bottom: 22px; max-width: 42rem; }

/* ── final call ── */
.final { position: relative; isolation: isolate; text-align: left; display: grid; gap: 32px; perspective: 900px; }
.final::before { content: ""; position: absolute; inset: 10% -10% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(35% 45% at 15% 70%, color-mix(in srgb, var(--red) 20%, transparent), transparent 70%), radial-gradient(35% 45% at 40% 80%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%), radial-gradient(35% 45% at 62% 75%, color-mix(in srgb, var(--lime) 12%, transparent), transparent 70%), radial-gradient(35% 45% at 85% 65%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 70%); }
body:is(.kz, .editor-styles-wrapper) .final h2 { transform-origin: 50% 100%; }
/* At wdth 150 its widest line is ~7.4em: cap the size to the column so it never
   pushes past the page on phones or past the wrap on wide screens. */
body:is(.kz, .editor-styles-wrapper) .final h2 { font-size: min(var(--step-4), calc((min(100vw, var(--wrap)) - 48px) / 7.6)); text-transform: uppercase; font-weight: 900; font-variation-settings: "wdth" 150; line-height: .85; }
.final h2 span { display: block; }

/* ── footer ── */
.foot { border-top: 1px solid var(--rule); padding-block: 56px 40px; background: var(--room); color: var(--dim); font-family: var(--body); font-size: .92rem; line-height: 1.55; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot p { margin: 0; }
.foot-brand { display: grid; gap: 12px; align-content: start; justify-items: start; }
.foot-brand > p { max-width: 22rem; }
.foot-col { display: grid; gap: 2px; align-content: start; }
.foot-col .label { margin-bottom: 8px; }
.foot-col a { display: flex; align-items: center; min-height: 32px; }
.foot-note { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: var(--step--1); letter-spacing: .04em; }

/* ── pages, archive and 404 on this theme ── */
.kz-page { max-width: calc(760px + 32px); margin-inline: auto; padding: clamp(56px, 10vw, 120px) var(--gutter-r) clamp(80px, 12vw, 160px) var(--gutter); }
body:is(.kz, .editor-styles-wrapper) .kz-page h1 { font-size: var(--step-3); text-transform: uppercase; font-variation-settings: "wdth" 80; margin-bottom: clamp(28px, 4vw, 48px); }
body:is(.kz, .editor-styles-wrapper) .kz-page h2 { font-size: var(--step-2); text-transform: uppercase; font-variation-settings: "wdth" 80; margin-block: 1.6em .6em; }
body:is(.kz, .editor-styles-wrapper) .kz-page h3 { font-size: var(--step-1); line-height: 1.2; margin-block: 1.4em .4em; }
body:is(.kz, .editor-styles-wrapper) .kz-page p, .kz-page ul, .kz-page ol { margin-block: 0 1em; }
.kz-page p, .kz-page li { color: var(--dim); }
.kz-page a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.kz-page .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.kz-page .wp-block-post-template > li { padding-block: 24px; border-bottom: 1px solid var(--rule); }
body:is(.kz, .editor-styles-wrapper) .kz-page .wp-block-post-template .wp-block-post-title { margin: 0; font-size: var(--step-1); line-height: 1.2; text-transform: none; }
.kz-page .wp-block-post-title a { text-decoration: none; }
.kz-page .ctas { margin-top: 32px; }
.kz-page .ctas .btn { text-decoration: none; }
.kz-page .btn-primary { color: var(--room); }
/* Page content: [kosmoviz_loop] frames and the block editor's buttons. */
.kz-loop { display: flex; justify-content: center; margin-block: clamp(28px, 4vw, 48px); }
.kz-loop .frame { width: 100%; }
.kz-loop .frame.r916 { width: min(100%, 360px); }
.kz-loop .frame.r11 { width: min(100%, 520px); }
/* [kosmoviz_scenes] on a gallery page (TASK-832): poster cards, two columns on phones, three above. */
.kz-page ul.kz-scenes { list-style: none; padding: 0; margin-block: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px) clamp(12px, 2.5vw, 24px); }
.kz-page .kz-scenes li { margin: 0; }
.kz-page .kz-scenes a { display: grid; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.kz-page .kz-scenes .poster { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--panel); box-shadow: 0 0 0 1px var(--rule); }
.kz-page .kz-scenes img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kz-page .kz-scenes .name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; font-family: var(--display); font-size: var(--step-0); font-weight: 700; line-height: 1.15; text-transform: uppercase; font-variation-settings: "wdth" 80; overflow-wrap: anywhere; }
.kz-page .kz-scenes .new { padding: 3px 8px; border-radius: 999px; background: var(--lime); color: var(--room); font-family: var(--body); font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; font-variation-settings: normal; }
.kz-page .kz-scenes a:hover .poster { box-shadow: 0 0 0 2px var(--lime); }
.kz-page .kz-scenes a:hover .name { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
@media (min-width: 721px) { .kz-page ul.kz-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kz-page ul.kz-links { list-style: none; padding-left: 0; }
.kz-page .kz-links a { display: inline-flex; align-items: center; min-height: 44px; }
.kz-page .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 32px; }
.kz-page .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--room); font-family: var(--body); font-size: var(--step-0); font-weight: 600; text-decoration: none; }
.kz-page .wp-block-button__link:hover { background: var(--lime); color: var(--room); }

/* ── migrated pages (TASK-753.6): pricing, credits and legal, imported from the pre-cutover site as HTML with
   Tailwind classes and shared with the Astrarium theme in the database. Spektrum styles that markup by its
   structure (`body.kz-doc`, set for the `migration` template in functions.php) instead of loading Astrarium's
   legacy.css, so the text stays byte-identical for both themes. Utility classes are only hooks here. ── */
.kz-doc { --radius: 16px; }
.kz-doc .entry-content > :is(article, main) { max-width: calc(760px + 32px); margin-inline: auto; padding: clamp(56px, 10vw, 120px) var(--gutter-r) clamp(80px, 12vw, 160px) var(--gutter); overflow-wrap: break-word; }
body.kz-doc .entry-content h1 { font-size: var(--step-3); text-transform: uppercase; font-weight: 800; font-variation-settings: "wdth" 80; margin: 0 0 clamp(24px, 4vw, 40px); }
body.kz-doc .entry-content h2 { font-size: var(--step-2); text-transform: uppercase; font-variation-settings: "wdth" 80; margin-block: 1.6em .5em; }
body.kz-doc .entry-content h3 { font-size: var(--step-1); line-height: 1.2; margin-block: 1.4em .4em; }
body.kz-doc .entry-content :is(p, ul, ol, pre, table) { margin-block: 0 1em; }
body.kz-doc .entry-content :is(p, li, td) { color: var(--dim); line-height: 1.6; }
body.kz-doc .entry-content :is(strong, b, th) { color: var(--ink); font-weight: 600; }
body.kz-doc .entry-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
body.kz-doc .entry-content a:hover { text-decoration-thickness: 2px; }
body.kz-doc .entry-content :is(ul, ol) { padding-left: 1.25em; }
body.kz-doc .entry-content li { margin-block: .35em; }
body.kz-doc .entry-content li::marker { color: var(--dim); }
body.kz-doc .entry-content :is(small, .text-sm, .text-xs) { font-size: var(--step--1); }
body.kz-doc .entry-content .italic { font-style: italic; }
body.kz-doc .entry-content code { font-family: var(--mono); font-size: .82em; padding: .1em .4em; border-radius: 6px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.kz-doc .entry-content pre { padding: 16px 18px; border-radius: 12px; overflow-x: auto; background: var(--glass-sheen), var(--glass); box-shadow: var(--glass-shadow); }
body.kz-doc .entry-content pre code { padding: 0; background: none; box-shadow: none; }
body.kz-doc .entry-content hr { border: 0; border-top: 1px solid var(--rule); margin-block: 48px; }
body.kz-doc .entry-content section { margin-top: 0; }
/* tables fit the column on phones: fixed columns, words break instead of pushing the page sideways */
body.kz-doc .entry-content table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--step--1); }
body.kz-doc .entry-content :is(th, td) { padding: 12px 10px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
body.kz-doc .entry-content th { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
body.kz-doc .entry-content td small { display: block; margin-top: 4px; }
/* credits: one entry per item, its licence as a mono tag */
body.kz-doc .entry-content ul:has(> li.not-prose) { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 16px; }
body.kz-doc .entry-content li.not-prose { margin: 0; padding-left: 14px; border-left: 2px solid var(--rule); }
body.kz-doc .entry-content li.not-prose > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink); }
body.kz-doc .entry-content li.not-prose > div:first-child > a { font-weight: 600; }
body.kz-doc .entry-content li.not-prose > div + div { color: var(--dim); font-size: var(--step--1); margin-top: 2px; }
body.kz-doc .entry-content .bg-secondary { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--glass-ring); font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--ink); }

/* pricing: the plans as glass cards, the free plan lit in its colour */
.kz-doc .entry-content > main:has([data-testid^="pricing-plan"]) { max-width: var(--wrap); }
body.kz-doc .entry-content main > div:first-child:has(.astra-label) { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
body.kz-doc .entry-content main > div:first-child:has(.astra-label) > span:first-child { width: 28px; height: 3px; background: var(--lime); }
body.kz-doc .entry-content .astra-label { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
body.kz-doc .entry-content main > h1 { font-size: var(--step-3); font-variation-settings: "wdth" 72; letter-spacing: -.01em !important; max-width: 14ch; }
body.kz-doc .entry-content .text-brass { color: var(--lime); }
body.kz-doc .entry-content main > h1 + p { max-width: 36rem; font-size: var(--step-1); line-height: 1.45; margin-bottom: clamp(36px, 6vw, 64px); }
body.kz-doc .entry-content main > .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
body.kz-doc [data-testid^="pricing-plan"] { --c: var(--dim); position: relative; display: flex; flex-direction: column; gap: 22px; padding: 28px 24px; border-radius: var(--radius);
  background: var(--glass-sheen), var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
body.kz-doc [data-testid="pricing-plan-free"] { --c: var(--lime); box-shadow: var(--glass-shadow), inset 0 0 0 1px color-mix(in srgb, var(--lime) 55%, transparent), 0 40px 100px -50px color-mix(in srgb, var(--lime) 45%, transparent); }
body.kz-doc [data-testid^="pricing-plan"] > header { display: grid; gap: 6px; }
body.kz-doc [data-testid^="pricing-plan"] > header::before { content: ""; width: 32px; height: 3px; border-radius: 2px; margin-bottom: 8px; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }
body.kz-doc [data-testid^="pricing-plan"] h3 { margin: 0; font-size: var(--step-2); text-transform: uppercase; font-variation-settings: "wdth" 80; }
body.kz-doc [data-testid^="pricing-plan"] > header > span { color: var(--dim); font-size: var(--step--1); }
body.kz-doc [data-testid^="pricing-plan"] > header + div { display: flex; align-items: baseline; gap: 8px; }
body.kz-doc [data-testid^="pricing-plan"] > header + div > span:first-child { font-family: var(--display); font-size: var(--step-3); font-weight: 800; line-height: 1; font-variation-settings: "wdth" 75; color: var(--ink); }
body.kz-doc [data-testid^="pricing-plan"] > header + div > span + span { font-family: var(--mono); font-size: var(--step--1); color: var(--dim); }
body.kz-doc [data-testid^="pricing-plan"] ul { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 10px; }
body.kz-doc [data-testid^="pricing-plan"] li { display: flex; align-items: baseline; gap: 12px; margin: 0; color: var(--ink); }
body.kz-doc [data-testid^="pricing-plan"] li > span[aria-hidden="true"] { flex: none; width: 8px; height: 8px; background: var(--c); transform: translateY(-1px); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
body.kz-doc [data-testid^="pricing-plan"] > :is(a, [aria-disabled="true"]) { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--body); font-size: .95rem; font-weight: 600; text-decoration: none; }
body.kz-doc [data-testid^="pricing-plan"] > a { background: var(--ink); color: var(--room); transition: background .2s; }
body.kz-doc [data-testid^="pricing-plan"] > a:hover { background: var(--lime); }
body.kz-doc [data-testid^="pricing-plan"] > [aria-disabled="true"] { border: 1px dashed var(--glass-ring); color: var(--dim); cursor: not-allowed; }
body.kz-doc .entry-content main > .grid + p { max-width: 42rem; margin-top: 40px; font-family: var(--mono); font-size: .72rem; line-height: 1.7; letter-spacing: .04em; text-transform: uppercase; }

/* Without backdrop-filter a glass pane would show the glows through a thin tint: make it opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: color-mix(in srgb, var(--panel) 96%, transparent); }
  .bar { background: color-mix(in srgb, var(--room) 96%, transparent); }
}

/* ── phone ── */
@media (max-width: 860px) {
  .nav { display: none; }
  .plate { padding: 6px; border-radius: 14px; }
  .bar .btn { margin-left: auto; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .how .monitor { position: relative; top: 0; }
  .steps { gap: 28px; padding-block: 0; }
  /* The monitor stays under the bar while the steps scroll beneath it (owner, 2026-10-24); short screens keep it in flow. */
  @media (min-height: 600px) {
    .how .monitor { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 2; width: min(100%, 42svh * 16 / 9); justify-self: center; }
    .steps { gap: 14svh; }
  }
  .chapter { grid-template-columns: minmax(0, 1fr); }
  .chapter:nth-child(even) .media { order: 0; }
  .specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .free { grid-template-columns: minmax(0, 1fr); }
  .reel .frame { height: 300px; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col a { min-height: 44px; }
}
/* Phones get the Studio's own phone layout (demo-phone through <source media>): the whole 390x844 screen, uncropped. */
@media (max-width: 720px) {
  :root { --glass-blur: blur(10px) saturate(140%); }
  .chapter .media, .chapter:nth-child(even) .media { --turn: 0deg; }
  .demo .frame { aspect-ratio: 390 / 844; }
  .demo { max-width: calc(min(70svh, 760px) * 390 / 844 + 32px); }
}
@media (max-width: 480px) {
  .specs { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-top: 48px; }
  .plate-themes { display: none; }
  .plate-bar { grid-template-columns: auto 1fr; }
  .free .later { grid-template-columns: minmax(0, 1fr); }
}
/* The 7:1 lockup and "Start free" need 318px; small phones (320-375) get 270px. */
@media (max-width: 380px) {
  .bar .wrap { gap: 12px; }
  .logo .lockup { height: 22px; }
  .bar .btn { padding: 0 16px; }
}

/* ── motion: tied to scroll, CSS only; reduced motion keeps every word ── */
@media (prefers-reduced-motion: reduce) {
  .frame video { display: none; }
  .marquee-track { animation: none; width: auto; }
  .marquee ul[aria-hidden] { display: none; }
  .marquee ul { flex-wrap: wrap; row-gap: 12px; }
  html:has(body.kz) { scroll-behavior: auto; }
  .faq summary::after { transition: none; }
  .demo-rig { transition: none; }
}
/* load: copy rises out of a blur, the window and its panels assemble */
@media (prefers-reduced-motion: no-preference) {
  .hero .in { animation: reveal .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both; }
  @keyframes reveal { from { opacity: 0; translate: 0 18px; filter: blur(6px); } }
  .plate { animation: assemble 1s cubic-bezier(.2, .7, .2, 1) .25s both; }
  @keyframes assemble { from { opacity: 0; translate: 0 36px; scale: .96; } }
  .float { animation: dock .9s cubic-bezier(.2, .7, .2, 1) .7s both; }
  .float-audio { --from: -40px 20px; }
  .float-export { --from: 40px -20px; animation-delay: .85s; }
  @keyframes dock { from { opacity: 0; translate: var(--from); } }
  .meters li::after { animation: level var(--t) ease-in-out infinite alternate; }
  @keyframes level { from { --lvl: 18%; } to { --lvl: 92%; } }
  /* the free plan's spectrum rim turns slowly */
  .free::before { animation: spin 14s linear infinite; }
  @keyframes spin { to { --spin: 360deg; } }
}
@property --lvl { syntax: "<percentage>"; inherits: false; initial-value: 62%; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 200deg; }
/* Pointer lift on the spec cards (their flip-in owns rotate/translate, the lift uses transform). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .spec { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
  .spec:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow), 0 30px 60px -30px color-mix(in srgb, var(--c) 55%, transparent); }
}
/* FAQ answers slide open where the browser can animate details content to its auto height. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s cubic-bezier(.2, .7, .2, 1), content-visibility .4s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}
@supports (animation-timeline: view()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { to { transform: scaleX(1); } }

  @media (prefers-reduced-motion: no-preference) {
    /* the window tips up into place as it scrolls in, like the reference's pinned demo */
    .demo-scroll { animation: tipin linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes tipin { from { rotate: x 16deg; scale: .9; translate: 0 40px; } }

    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes rise { from { opacity: .2; translate: 0 56px; } }

    .steps li { animation: light linear both; animation-timeline: view(); animation-range: cover 25% cover 75%; }
    @keyframes light { 0%, 100% { opacity: .45; scale: .97; } 30%, 70% { opacity: 1; scale: 1; } }
    .steps li::after { animation: edge linear both; animation-timeline: --step; animation-range: cover 25% cover 75%; }
    @keyframes edge { 0%, 100% { transform: scaleX(0); } 30%, 70% { transform: scaleX(1); } }

    /* depth (TASK-753.5): things turn on their own plane into place as they scroll in */
    .how .monitor { animation: face linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes face { from { rotate: y -16deg; scale: .94; opacity: .4; } }
    .chapter .media { animation: turn linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes turn { from { rotate: y var(--turn); translate: 0 0 -140px; } }
    .spec { animation: flip linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .spec:nth-child(2) { animation-range: entry 8% cover 34%; }
    .spec:nth-child(3) { animation-range: entry 16% cover 38%; }
    .spec:nth-child(4) { animation-range: entry 24% cover 42%; }
    @keyframes flip { from { opacity: 0; rotate: x -60deg; translate: 0 30px; } }

    .chapter .frame { animation: open linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes open { from { clip-path: inset(18% 12% round 6px); scale: .92; } to { clip-path: inset(0 round 6px); scale: 1; } }
    /* Headlines move as a whole and never animate their width: a "wdth" axis re-wraps the lines while scrolling (TASK-753.8). */
    body:is(.kz, .editor-styles-wrapper) .chapter h2 { animation: flyin linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes flyin { from { translate: min(-24vw, -160px) 0; opacity: 0; } }

    body:is(.kz, .editor-styles-wrapper) .final h2 { animation: final linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes final { from { rotate: x 38deg; translate: 0 40px; opacity: .35; } }
  }

  @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
    .reel { height: 260vh; view-timeline: --reel block; }
    .reel-pin { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 61px); overflow: clip; scroll-snap-type: none; padding-block: 6vh; }
    .reel-track { width: max-content; animation: pan linear both; animation-timeline: --reel; animation-range: contain 0% contain 100%; }
    @keyframes pan { to { transform: translateX(calc(-100% + 100vw)); } }
    /* the strip's frames stand turned like a cover flow while it pans past */
    .reel-pin { perspective: 1800px; }
    .reel-track { transform-style: preserve-3d; }
    .reel .frame { rotate: y -12deg; }
  }
}