:root {
  color-scheme:light;
  --accent:oklch(0.72 0.17 24);
  --ink:oklch(0.22 0.035 260);
  --paper:oklch(0.99 0 0);
  --quiet:oklch(0.96 0.005 260);
  --muted:#4d5667;
  --line:#d4d7dd;
  --surface:#fff;
  --button-bg:oklch(0.22 0.035 260);
  --button-fg:#fff;
  --band-ink:oklch(0.22 0.035 260);
  --focus:#163dca;
  --yaml:#a62d28;
  --uncertain-bg:#f7ded7;
  --uncertain-line:#ae5340;
  --uncertain-ink:#702f21;
  --check-line:#6e7888;
  --shadow:rgba(16,25,43,.14);
  --ease:cubic-bezier(.23,1,.32,1)
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
  color-scheme:dark;
  --ink:#edf0f5;
  --paper:#141923;
  --quiet:#1b2230;
  --surface:#222b39;
  --muted:#bdc6d5;
  --line:#657187;
  --button-bg:#edf0f5;
  --button-fg:#141923;
  --focus:#91b9ff;
  --yaml:#ffab9d;
  --uncertain-bg:#48271f;
  --uncertain-line:#dc8975;
  --uncertain-ink:#ffd5c8;
  --check-line:#a8b5c8;
  --shadow:rgba(0,0,0,.28);
  }
}
:root[data-theme=dark] {
  color-scheme:dark;
  --ink:#edf0f5;
  --paper:#141923;
  --quiet:#1b2230;
  --surface:#222b39;
  --muted:#bdc6d5;
  --line:#657187;
  --button-bg:#edf0f5;
  --button-fg:#141923;
  --focus:#91b9ff;
  --yaml:#ffab9d;
  --uncertain-bg:#48271f;
  --uncertain-line:#dc8975;
  --uncertain-ink:#ffd5c8;
  --check-line:#a8b5c8;
  --shadow:rgba(0,0,0,.28);
}
* { box-sizing:border-box }
html { scroll-padding-top:28px }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif }
a { color:inherit; text-underline-offset:4px }
button,select { color:inherit; font:inherit; cursor:pointer }
button { transition:transform 140ms var(--ease) }
button:active { transform:scale(.98) }
:focus-visible { outline:3px solid var(--focus); outline-offset:5px }
[hidden] { display:none !important }
.js-only { display:none }
.js .js-only { display:flex }
.skip { position:absolute; left:20px; top:12px; transform:translateY(-180%); z-index:30; padding:12px; background:var(--surface) }
.skip:focus { transform:none }
.wrap { max-width:1280px; margin:auto; padding-inline:48px }
header { display:flex; align-items:center; gap:28px; padding:28px 0 }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:23px; letter-spacing:-.03em; text-decoration:none; white-space:nowrap }
.brand-mark { color:var(--band-ink); background:var(--accent); border-radius:8px; padding:0 9px }
nav { margin-left:auto; display:flex; align-items:center; gap:28px; font-size:14px }
nav a { text-decoration:none }
.theme-control { align-items:center; gap:8px; font-size:12px; color:var(--muted) }
select { border:0; border-radius:6px; background:var(--quiet); padding:8px; font-size:13px; color:var(--ink) }
h1,h2,h3 { text-wrap:balance; letter-spacing:-.04em; line-height:1.05 }
p { text-wrap:pretty }
/* auteur-allow: TYPE_SIZE_CEILING -- COMMIT-SHEET section 3: this type-led hero is the subject, not prose. */
h1 { font-size:clamp(3.1rem,7.8vw,7rem); font-weight:700; margin:0 auto 28px; line-height:1.02 }
h1 span,.caption-save h2 span { color:var(--yaml) }
h2 { font-size:clamp(2.5rem,5vw,4.8rem); margin:0 0 24px; font-weight:600 }
h3 { font-size:28px; font-weight:600; margin:0 0 16px }
.hero { text-align:center; padding-top:96px; padding-bottom:90px }
.description { max-width:580px; margin:0 auto 30px; font-size:21px; color:var(--muted) }
.cta { display:inline-flex; align-items:center; gap:14px; padding:13px 25px; border-radius:30px; background:var(--button-bg); color:var(--button-fg); text-decoration:none; font-size:16px; font-weight:500 }
.hero-note { color:var(--muted); font-size:14px; margin:18px 0 0 }
.flow { display:flex; justify-content:space-around; align-items:center; gap:18px; margin:70px auto 0; max-width:720px; padding:26px 30px; border-radius:20px; background:var(--quiet); font-size:16px; font-weight:500 }
.flow b { color:var(--yaml); font-weight:400 }
.story { background:var(--quiet); padding:64px 0 }
.story-stage { max-width:1280px; padding:0 48px; margin:auto; display:flex; flex-direction:column }
.story-captions,.story-objects { display:contents }
.story-label { order:0 } .caption-explore { order:1 } .story-app { order:2 } .story-actions { order:3 }
.caption-record { order:4 } .story-spec { order:5 } .caption-save { order:6 } .caption-replay { order:7 } .story-terminal { order:8 }
.story-label { text-align:center; font-size:12px; color:var(--muted); margin-bottom:38px }
.story-caption { text-align:center; max-width:900px; margin:70px auto 35px }
.story-caption p { color:var(--muted); max-width:580px; margin:0 auto; font-size:18px }
.caption-explore { margin-top:0 }
.product-window { background:var(--surface); border-radius:18px; box-shadow:0 14px 28px -16px var(--shadow); overflow:hidden }
.window-top,.spec-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 22px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted) }
.window-dots { letter-spacing:3px; color:var(--muted) }
.app-body { padding:36px }
.app-title { font-size:34px; line-height:1.1; letter-spacing:-.04em; font-weight:600; margin:0 0 12px }
.app-sub { color:var(--muted); font-size:14px; margin:0 0 30px }
.todo-input { padding:16px 18px; color:var(--muted); background:var(--quiet); border-radius:8px; font-size:15px }
.todo { display:flex; gap:14px; align-items:center; padding:20px 6px; border-bottom:1px solid var(--line); font-size:16px }
.check { width:19px; height:19px; flex-shrink:0; border:1px solid var(--check-line); border-radius:50% }
.app-foot { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted); margin-top:20px }
pre,code { font-family:"Courier New",monospace }
pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.75 }
.yaml-key { color:var(--yaml) }
.story-app,.story-spec,.story-terminal,.story-actions { max-width:800px; margin:34px auto }
.story-actions { padding:20px 0 }
.action-target { font-size:28px; letter-spacing:-.03em; margin:0 0 22px; font-weight:500 }
.story-actions > div { display:flex; gap:24px; align-items:baseline; border-bottom:1px solid var(--line); padding:14px 0 }
.story-actions > div span { color:var(--yaml); font-family:"Courier New",monospace; min-width:65px; font-size:14px }
.story-actions > div p { margin:0 }
.action-foot { color:var(--muted); font-size:12px }
.story-spec pre { padding:28px 30px; font-size:15px }
.recorded { display:block }
.saved-label { color:var(--yaml); font-weight:500 }
.artifact-foot { padding:16px 30px; border-top:1px solid var(--line); font-size:12px; color:var(--muted) }
.story-terminal pre { padding:28px }
.terminal-prompt,.terminal-result { color:var(--yaml) }
.story-terminal > p { padding:0 28px 24px; color:var(--muted); font-size:14px; margin:0 }
.demo-disclosure { padding-top:36px; padding-bottom:100px }
summary { cursor:pointer; font-size:16px; padding:22px 0; border-bottom:1px solid var(--line); color:var(--muted) }
summary span { float:right }
.workbench { margin:32px 0 0; border-radius:18px; background:var(--quiet); padding:28px }
.demo-top { display:flex; justify-content:space-between; gap:20px; align-items:center; font-size:15px; margin-bottom:24px }
.demo-top span { color:var(--muted); font-size:12px; max-width:340px }
.bench-body { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.bench-body .app,.bench-body .spec { background:var(--surface); border-radius:12px; overflow:hidden }
.spec pre { padding:28px }
.demo-controls { margin-top:26px; gap:12px; flex-wrap:wrap }
.demo-controls button { border:1px solid var(--line); border-radius:24px; background:var(--surface); padding:10px 18px; font-size:14px }
.demo-controls button[aria-current] { background:var(--button-bg); color:var(--button-fg) }
.demo-controls button:disabled { cursor:default; border-style:dashed; color:var(--muted) }
.demo-controls .reset { margin-left:auto }
.demo-note { color:var(--muted); font-size:13px; min-height:42px; margin:18px 0 0 }
.noscript { padding:16px 0 }
.engine-intro { text-align:center; padding-top:35px; padding-bottom:60px }
.engine-intro p { max-width:600px; color:var(--muted); margin:0 auto; font-size:19px }
.engine-story { background:var(--quiet) }
.engine-list { padding-block:40px }
.engine-row { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:70px; padding:65px 0; min-height:620px }
.engine-copy h3 { font-size:50px }
.engine-copy p { color:var(--muted); max-width:520px }
.engine-copy pre { background:var(--surface); border-radius:12px; padding:24px; margin:24px 0 }
.engine-copy a { font-size:14px; font-weight:500 }
.engine-detail { font-size:13px }
.native-window { display:grid; grid-template-columns:110px 1fr; min-height:310px }
.native-window aside { background:var(--quiet); padding:28px 16px; font-size:12px; line-height:3 }
.native-window aside span { font-weight:700; color:var(--yaml) }
.native-window > div { padding:30px 24px }
.native-title { font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1.15; margin:0 0 30px }
.native-window label { font-size:12px; color:var(--muted) }
.native-input { background:var(--quiet); padding:14px; border-radius:6px; margin:8px 0 16px; font-size:13px }
.native-button { background:var(--accent); color:var(--band-ink); display:inline-block; border-radius:8px; padding:10px 22px; font-size:13px; font-weight:600 }
.native-window p:last-child { font-size:12px; color:var(--muted); margin-top:28px }
.phone-visual { position:relative; width:260px; min-height:460px; margin:auto; padding:24px 22px 50px; border:6px solid var(--ink); border-radius:40px; background:var(--surface); box-shadow:0 16px 28px -18px var(--shadow) }
.phone-top { display:flex; justify-content:space-between; font-size:11px; font-weight:600; margin:0 0 50px }
.phone-home { position:absolute; bottom:14px; left:80px; width:90px; height:4px; border-radius:4px; background:var(--ink) }
.trust { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-block:150px }
.trust-lead { max-width:490px }
.trust-lead p { color:var(--muted); font-size:19px }
.trust-link { font-size:14px }
.trust-list article { padding:30px 0; border-bottom:1px solid var(--line) }
.trust-list article:first-child { padding-top:0 }
.trust-list h3 { font-size:25px }
.trust-list p { color:var(--muted); font-size:16px }
.status-line { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; margin-top:24px }
.status-line span { padding:6px 10px; border:1px solid var(--line); border-radius:6px }
.status-line .uncertain { color:var(--uncertain-ink); background:var(--uncertain-bg); border-color:var(--uncertain-line) }
.install { background:var(--quiet); padding-block:100px }
.install-header { text-align:center; margin-bottom:65px }
.install-header p { max-width:650px; margin:auto; color:var(--muted); font-size:19px }
.install-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px }
.key-note p { font-size:15px; color:var(--muted) }
.key-note pre { padding:20px; background:var(--surface); border-radius:10px; font-size:12px }
.install-tabs { gap:6px; margin-bottom:16px; flex-wrap:wrap }
.install-tabs button { border:0; border-radius:24px; padding:11px 18px; background:transparent; font-size:14px }
.install-tabs button[aria-selected=true] { background:var(--button-bg); color:var(--button-fg) }
.command { margin-bottom:16px; background:var(--surface); border-radius:14px; overflow:hidden }
.command-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px; font-size:12px; border-bottom:1px solid var(--line); color:var(--muted) }
.copy { border:1px solid var(--line); border-radius:6px; padding:7px 10px; background:var(--quiet); font-size:12px }
.command pre { padding:24px; font-size:13px; min-height:94px }
.install-note { color:var(--muted); font-size:13px }
#copy-status { min-height:21px }
.closing { display:grid; grid-template-columns:1fr 1.4fr; gap:90px; padding-block:90px }
.closing h3 { font-size:40px }
.closing p { color:var(--muted); margin:0; font-size:15px }
footer { display:flex; justify-content:space-between; gap:30px; padding-block:35px; border-top:1px solid var(--line); font-size:12px; color:var(--muted) }
footer div { display:flex; gap:25px }
@media(hover:hover) and (pointer:fine) { a:hover { text-decoration:underline } .cta:hover { text-decoration:none; transform:translateY(-1px) } }
/* The named view timeline's contain range maps section-top to section-bottom
   minus the viewport. Every frame is purely a function of native scroll. */
@supports(animation-timeline:view()) {
  .cinema .story:not(.focus-reading) { height:400vh; padding:0; view-timeline:--story block }
  .cinema .story:not(.focus-reading) .story-stage { display:block; position:sticky; top:0; height:100vh; min-height:650px; overflow:hidden; padding-top:35px }
  .cinema .story:not(.focus-reading) .story-label { position:absolute; top:26px; left:0; width:100%; margin:0 }
  .cinema .story:not(.focus-reading) .story-captions { display:block; position:absolute; top:85px; left:48px; right:48px; height:210px }
  .cinema .story:not(.focus-reading) .story-caption { position:absolute; inset:0; margin:0 auto }
  .cinema .story:not(.focus-reading) h2 { font-size:clamp(2.6rem,4.4vw,4.3rem); margin-bottom:18px }
  .cinema .story:not(.focus-reading) .story-caption p { font-size:16px }
  .cinema .story:not(.focus-reading) .story-objects { display:block; position:absolute; top:330px; bottom:50px; left:48px; right:48px }
  .cinema .story:not(.focus-reading) .story-app { position:absolute; left:0; top:25px; width:52%; max-width:none; margin:0 }
  .cinema .story:not(.focus-reading) .story-actions { position:absolute; right:0; top:20px; width:40%; margin:0 }
  .cinema .story:not(.focus-reading) .story-spec { position:absolute; left:46%; top:0; width:54%; max-width:none; margin:0; transform-origin:center }
  .cinema .story:not(.focus-reading) .story-spec pre { font-size:clamp(11px,1.05vw,15px); padding:24px; line-height:1.65 }
  .cinema .story:not(.focus-reading) .story-terminal { position:absolute; right:0; top:45px; width:46%; max-width:none; margin:0 }
  .cinema .story:not(.focus-reading) .story-terminal pre { font-size:clamp(11px,1.05vw,14px) }
  .cinema .story:not(.focus-reading) .caption-explore { animation:caption-first steps(1,end) both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .caption-record { animation:caption-second steps(1,end) both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .caption-save { animation:caption-third steps(1,end) both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .caption-replay { animation:caption-last steps(1,end) both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .story-app { animation:app-recedes linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .story-actions { animation:actions-out linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .story-spec { animation:spec-centre linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .line-fill { animation:step-fill linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .line-press { animation:step-press linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .line-expect { animation:step-expect linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .saved-label { animation:saved-in linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .story-terminal { animation:terminal-in linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .story:not(.focus-reading) .story-todo { animation:todo-in linear both; animation-timeline:--story; animation-range:contain 0% contain 100% }
  .cinema .engine-story:not(.focus-reading) { height:260vh; view-timeline:--engines block }
  .cinema .engine-story:not(.focus-reading) .engine-list { position:sticky; top:0; height:100vh; min-height:650px; padding-block:0 }
  .cinema .engine-story:not(.focus-reading) .engine-row { display:contents }
  .cinema .engine-story:not(.focus-reading) .engine-visual { position:absolute; left:48px; top:50%; width:calc((100% - 156px)*.545); transform:translateY(-50%) }
  .cinema .engine-story:not(.focus-reading) .engine-copy { position:absolute; right:48px; top:50%; width:calc((100% - 156px)*.455); transform:translateY(-50%); background:var(--quiet) }
  .cinema .engine-story:not(.focus-reading) .browser-engine .engine-copy { animation:browser-copy steps(1,end) both; animation-timeline:--engines; animation-range:contain 0% contain 100% }
  .cinema .engine-story:not(.focus-reading) .desktop-engine .engine-copy { animation:desktop-copy steps(1,end) both; animation-timeline:--engines; animation-range:contain 0% contain 100% }
  .cinema .engine-story:not(.focus-reading) .mobile-engine .engine-copy { animation:mobile-copy steps(1,end) both; animation-timeline:--engines; animation-range:contain 0% contain 100% }
  .cinema .engine-story:not(.focus-reading) .browser-engine .engine-visual { animation:browser-out linear both; animation-timeline:--engines; animation-range:contain 0% contain 100% }
  .cinema .engine-story:not(.focus-reading) .desktop-engine .engine-visual { animation:desktop-in-out linear both; animation-timeline:--engines; animation-range:contain 0% contain 100% }
  .cinema .engine-story:not(.focus-reading) .mobile-engine .engine-visual { animation:mobile-in linear both; animation-timeline:--engines; animation-range:contain 0% contain 100% }
}
@keyframes step-fill { 0%,12% { opacity:0; transform:translateY(6px) } 19%,100% { opacity:1; transform:none } }
@keyframes step-press { 0%,17% { opacity:0; transform:translateY(6px) } 23%,100% { opacity:1; transform:none } }
@keyframes step-expect { 0%,21% { opacity:0; transform:translateY(6px) } 25%,100% { opacity:1; transform:none } }
@keyframes caption-first { 0%,18% { opacity:1 } 18.01%,100% { opacity:0 } }
@keyframes caption-second { 0%,18% { opacity:0 } 18.01%,36% { opacity:1 } 36.01%,100% { opacity:0 } }
@keyframes caption-third { 0%,36% { opacity:0 } 36.01%,72% { opacity:1 } 72.01%,100% { opacity:0 } }
@keyframes caption-last { 0%,72% { opacity:0 } 72.01%,100% { opacity:1 } }
@keyframes app-recedes { 0%,18% { opacity:1; transform:none } 40%,100% { opacity:0; transform:translate(-10%,30px) scale(.95) } }
@keyframes actions-out { 0%,10% { opacity:1; transform:none } 23%,100% { opacity:0; transform:translateY(-20px) } }
@keyframes spec-centre { 0%,10% { opacity:0; transform:translateY(40px) scale(.97) } 23% { opacity:1; transform:none } 42%,68% { opacity:1; transform:translateX(-41%) scale(1.16) } 84%,100% { opacity:1; transform:translateX(-84%) scale(.9) } }
@keyframes saved-in { 0%,35% { opacity:0 } 42%,100% { opacity:1 } }
@keyframes terminal-in { 0%,70% { opacity:0; transform:translateX(35px) } 85%,100% { opacity:1; transform:none } }
@keyframes todo-in { 0% { opacity:0; transform:translateY(10px) } 12%,100% { opacity:1; transform:none } }
/* Pointer-state keyframes keep transparent layers from intercepting links.
   Only transform/opacity interpolate; pointer-events is a discrete UI state. */
@keyframes browser-copy { 0%,28% { opacity:1; pointer-events:auto } 28.01%,100% { opacity:0; pointer-events:none } }
@keyframes desktop-copy { 0%,28% { opacity:0; pointer-events:none } 28.01%,68% { opacity:1; pointer-events:auto } 68.01%,100% { opacity:0; pointer-events:none } }
@keyframes mobile-copy { 0%,68% { opacity:0; pointer-events:none } 68.01%,100% { opacity:1; pointer-events:auto } }
/* Illustrations contain no controls. A static hit-test rule keeps their motion
   compositor-eligible; don't mix discrete pointer-events into transform tracks.
   Documentation links retain their separate discrete copy-state animations. */
.cinema .engine-story:not(.focus-reading) .engine-visual { pointer-events:none }
@keyframes browser-out { 0%,23% { opacity:1; transform:translateY(-50%) } 33%,100% { opacity:0; transform:translate(-25px,-50%) } }
@keyframes desktop-in-out { 0%,23% { opacity:0; transform:translate(25px,-50%) } 33%,61% { opacity:1; transform:translateY(-50%) } 71%,100% { opacity:0; transform:translate(-25px,-50%) } }
@keyframes mobile-in { 0%,61% { opacity:0; transform:translate(25px,-50%) } 71%,100% { opacity:1; transform:translateY(-50%) } }
@media(max-width:1000px) {
  .wrap { padding-inline:28px } header { gap:18px } nav { gap:18px } .theme-control { flex-direction:column; gap:0 }
  .story-stage { padding-inline:28px } .engine-row { gap:35px; grid-template-columns:1fr 1fr } .engine-copy h3 { font-size:42px }
  .trust { gap:50px } .install-layout { gap:40px } .closing { gap:45px }
  .cinema .story:not(.focus-reading) .story-captions { left:28px; right:28px }
  .cinema .story:not(.focus-reading) .story-objects { left:28px; right:28px; top:310px }
  .cinema .story:not(.focus-reading) .app-body { padding:25px }
  .cinema .story:not(.focus-reading) .app-title { font-size:26px }
  .cinema .story:not(.focus-reading) .app-foot span { display:none }
  .cinema .engine-story:not(.focus-reading) .engine-visual { left:28px; width:calc((100% - 86px)/2) }
  .cinema .engine-story:not(.focus-reading) .engine-copy { right:28px; width:calc((100% - 86px)/2) }
  .native-window { grid-template-columns:85px 1fr } .native-window aside { padding-inline:12px }
  .native-window > div { padding:24px 18px } .native-title { font-size:22px }
}
@media(max-width:767px) {
  .wrap { padding-inline:20px } header { padding:22px 0; gap:16px; flex-wrap:wrap } .brand { font-size:20px; gap:8px } nav { gap:18px }
  .nav-engines { display:none } .theme-control { flex-direction:row; margin-left:auto; gap:8px; width:100%; justify-content:flex-end }
  .hero { padding-top:55px; padding-bottom:70px } h1 { font-size:clamp(3rem,13.7vw,4.7rem); line-height:1.04 }
  .description { font-size:18px } .hero-note { font-size:12px } .flow { margin-top:48px; padding:22px 12px; gap:6px; font-size:12px }
  .story { padding-block:40px } .story-stage { padding-inline:20px } .story-label { font-size:10px; margin-bottom:30px }
  .story-captions { display:contents } .story-objects { display:contents }
  .story-stage { display:flex; flex-direction:column }
  .story-label { order:0 } .caption-explore { order:1 } .story-app { order:2 } .story-actions { order:3 }
  .caption-record { order:4 } .story-spec { order:5 } .caption-save { order:6 } .caption-replay { order:7 } .story-terminal { order:8 }
  .story-caption { margin:45px auto 12px } .caption-explore { margin-top:0 } .story-caption h2 { font-size:34px }
  .story-caption p { font-size:15px } .story-app,.story-spec,.story-terminal,.story-actions { width:100%; margin:20px 0 }
  .app-body { padding:25px } .app-title { font-size:28px } .app-foot { font-size:9px } .story-spec pre { font-size:11px; padding:20px }
  .story-terminal pre { font-size:11px; padding:20px } .story-terminal > p { padding-inline:20px } .action-target { font-size:24px }
  .story-actions > div { gap:15px; font-size:14px } .window-top,.spec-head { padding:14px 18px; font-size:10px }
  .demo-disclosure { padding-bottom:65px } .workbench { padding:16px } .demo-top { flex-direction:column; align-items:flex-start }
  .bench-body { grid-template-columns:1fr } .spec pre { font-size:11px; padding:20px } .demo-controls { gap:8px } .demo-controls button { padding:10px 14px; font-size:12px }
  .engine-intro { padding-block:35px 50px } h2 { font-size:38px } .engine-intro p { font-size:17px }
  .engine-list { padding-block:0 } .engine-row { display:flex; flex-direction:column; gap:40px; padding:50px 0; min-height:0; border-bottom:1px solid var(--line) }
  .engine-visual { width:100% } .engine-copy { width:100% } .engine-copy h3 { font-size:38px } .engine-copy p { font-size:15px }
  .engine-copy pre { font-size:11px; padding:20px } .browser-visual .app-title { font-size:28px } .native-window { grid-template-columns:85px 1fr }
  .phone-visual { width:240px; min-height:420px } .phone-home { left:69px }
  .trust { display:block; padding-block:75px } .trust-lead { margin-bottom:45px } .trust-lead p { font-size:17px }
  .install { padding-block:65px } .install-header { text-align:left; margin-bottom:45px } .install-header p { font-size:17px }
  .install-layout { display:block } .key-note { margin-bottom:40px } .install-tabs { gap:4px } .install-tabs button { font-size:12px; padding:11px 12px }
  .command-top { padding:16px; font-size:11px } .command pre { padding:18px; font-size:11px } .copy { font-size:10px }
  .closing { display:block; padding-block:65px } .closing h3 { font-size:34px } footer { flex-direction:column; padding-block:28px } footer div { flex-wrap:wrap; gap:20px }
}

@media(min-width:768px) and (max-height:800px) {
  .cinema .story:not(.focus-reading) .story-captions { top:64px }
  .cinema .story:not(.focus-reading) h2 { font-size:clamp(2.1rem,3.6vw,3.1rem); margin-bottom:12px }
  .cinema .story:not(.focus-reading) .story-objects { top:240px }
  .cinema .story:not(.focus-reading) .story-spec pre { font-size:11px; line-height:1.4; padding:18px }
  .cinema .story:not(.focus-reading) .story-app { top:15px }
  .cinema .story:not(.focus-reading) .app-body { padding:20px }
  .cinema .story:not(.focus-reading) .app-title { font-size:28px }
  .cinema .story:not(.focus-reading) .app-sub { margin-bottom:20px }
  .cinema .story:not(.focus-reading) .todo { padding-block:16px }
  .cinema .story:not(.focus-reading) .story-terminal { top:20px }
  .cinema .story:not(.focus-reading) .story-terminal pre { font-size:11px; padding:20px }
  .cinema .engine-story:not(.focus-reading) .engine-copy h3 { font-size:38px }
  .cinema .engine-story:not(.focus-reading) .engine-copy p { font-size:15px }
  .cinema .engine-story:not(.focus-reading) .engine-copy pre { font-size:11px; padding:18px }
}

@media(prefers-reduced-motion:reduce) { button { transition:none } button:active { transform:none } .cta:hover { transform:none } }

/* Conversion/readability: same palette and motion families, less repetition. */
html { scroll-padding-top:90px }
section[id] { scroll-margin-top:90px }
.header-shell { position:sticky; top:0; z-index:25; background:var(--paper); border-bottom:1px solid var(--line) }
header.wrap { padding-block:16px }
.nav-install { background:var(--button-bg); color:var(--button-fg); padding:9px 14px; border-radius:24px }
.hero { padding-top:65px; padding-bottom:60px }
.hero-command { display:grid; grid-template-columns:1fr auto; gap:12px; max-width:600px; margin:24px auto 0; padding:18px 22px; text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--quiet) }
.hero-command > span { grid-column:1 / -1; font-size:13px; color:var(--muted) }
.hero-command pre { font-size:13px }
.hero-command .copy { align-self:center }
#hero-copy-status { min-height:0; margin:8px auto }
.flow { margin-top:35px }
.story-label { font-size:13px; padding-inline:20px }
.demo-disclosure { padding-bottom:55px }
.decision-summary { padding-block:0 55px }
.decision-summary p { max-width:70ch; color:var(--muted) }
.install-layout { grid-template-columns:1.2fr .8fr }
.key-note { grid-column:2; grid-row:1 }
.install-layout > div:last-child { grid-column:1; grid-row:1 }
.install-header { margin-bottom:40px }
.install,.evidence,.starter { padding-block:65px }
.comparison,.examples,.faq { padding-block:55px }
.faq details { padding-block:0 }
.faq summary { padding:20px 4px; color:var(--ink); min-height:60px }
.faq summary::marker { font-size:20px; color:var(--yaml) }
.faq details p { margin:0 0 22px }
footer { align-items:center; flex-wrap:wrap; font-size:13px }
footer div { flex-wrap:wrap; gap:18px }
footer .theme-control { flex-direction:row; width:auto; margin-left:0; font-size:13px }
/* auteur-allow: HERO_METRIC_TEMPLATE -- User explicitly requests benchmark statistics; a historical evidence ledger below the story, not generic hero stat cards. See design/DESIGN.md. */
.benchmark-ledger { border-top:1px solid var(--line) }
.benchmark-ledger p { display:flex; flex-direction:column; gap:8px; margin:0; padding:18px 0; border-bottom:1px solid var(--line) }
.benchmark-ledger strong { font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.1; letter-spacing:-.04em; color:var(--ink); font-weight:600 }
.benchmark-ledger span { font-size:15px }
.benchmark-ledger .benchmark-cost { font-size:17px; font-weight:500; padding-block:14px }
.hero-command pre,.command pre,.starter > div > pre,.key-note pre { white-space:pre; overflow-x:auto; overflow-wrap:normal; word-break:normal; min-width:0; max-width:100%; font-size:13px }
.hero-command { grid-template-columns:minmax(0,1fr) auto }
.install-layout { display:flex; flex-direction:column; max-width:900px; margin-inline:auto; gap:28px }
.install-commands,.key-note,.install-notes { min-width:0; width:100% }
.install-notes .install-note { margin-top:10px }
@media(max-width:767px) { .hero-command { grid-template-columns:minmax(0,1fr) } .command pre { font-size:13px } }
@supports(animation-timeline:view()) {
 .cinema .story:not(.focus-reading) { height:300vh; view-timeline-inset:0 }
 .cinema .engine-story:not(.focus-reading) { height:210vh; view-timeline-inset:0 }
 .cinema .story:not(.focus-reading) .story-label { top:82px }
 .cinema .story:not(.focus-reading) .story-captions { top:126px }
 .cinema .story:not(.focus-reading) .story-objects { top:345px }
}
@media(min-width:768px) and (max-height:800px) {
 .cinema .story:not(.focus-reading) .story-label { top:75px }
 .cinema .story:not(.focus-reading) .story-captions { top:108px }
 .cinema .story:not(.focus-reading) .story-objects { top:240px }
}
@media(max-width:800px) {
 .table-scroll { overflow:visible }
 table { min-width:0; font-size:15px }
 table,tbody,tr,th,td { display:block; width:100% }
 thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
 tbody tr { border-bottom:1px solid var(--line); padding:18px 0 }
 th[scope=row] { border:0; padding:0 0 12px; font-size:19px }
 td { border:0; padding:10px 0; display:grid; grid-template-columns:minmax(120px,.8fr) 1.2fr; gap:16px }
 td::before { content:attr(data-label); font-weight:600; color:var(--ink) }
}
@media(max-width:767px) {
 header.wrap { flex-wrap:nowrap; gap:12px; padding-block:12px }
 nav { gap:12px; font-size:13px }
 .nav-engines { display:block }
 .nav-source { display:none }
 .brand { font-size:18px; gap:6px }
 .brand-mark { padding:0 7px }
 .nav-install { padding:8px 10px }
 .hero { padding-top:38px; padding-bottom:35px }
 .hero-command { padding:16px; grid-template-columns:1fr }
 .hero-command pre { font-size:13px }
 .hero-command .copy { justify-self:start }
 .hero-note,.flow { font-size:13px }
 .story-label { font-size:13px; margin-bottom:24px }
 .story-caption { margin:26px auto 12px }
 .story-stage .caption-explore { margin-top:0 }
 .story-stage .caption-record,.story-stage .story-actions { display:none }
 .story-app,.story-spec,.story-terminal { margin:12px 0 }
 .story-app .app-sub { margin-bottom:12px }
 .story-app .app-body { padding:20px }
 .story-app .todo { padding-block:12px }
 .engine-row { gap:22px; padding-block:35px }
 .engine-copy pre { margin-block:16px }
 .engine-intro { padding-block:25px 35px }
 .demo-disclosure { padding-bottom:35px }
 .install-layout { display:flex; flex-direction:column }
 .key-note { order:2; margin:18px 0 0 }
 .install-header { margin-bottom:25px }
 .decision-summary { padding-bottom:35px }
 footer .theme-control { justify-content:flex-start }
 /* Source snippets and interface labels stay legible at narrow widths. */
 pre,.story-spec pre,.story-terminal pre,.spec pre,.engine-copy pre,.command pre,.starter pre,.key-note pre { font-size:13px }
 .window-top,.spec-head,.app-foot,.artifact-foot,.action-foot,.demo-top span,.native-window aside,.native-window label,.native-window p:last-child,.phone-top,.command-top,.copy,.install-tabs button,.demo-controls button { font-size:13px }
 .app-foot { flex-wrap:wrap }
}

/* Evidence and setup stay outside the cinematic stages. */
.evidence,.starter { display:grid; grid-template-columns:1fr 1.15fr; gap:65px; padding-block:65px }
.evidence p,.starter p,.comparison p,.examples p,.faq p { max-width:70ch; color:var(--muted) }
.provenance { font-size:13px }
.resource-links { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:15px }
.resource-links a { color:var(--ink) }
.comparison,.examples,.faq { padding-block:80px; border-top:1px solid var(--line) }
.table-scroll { overflow-x:auto; margin:35px 0 }
table { border-collapse:collapse; width:100%; min-width:640px; font-size:15px; text-align:left }
caption { text-align:left; color:var(--muted); padding-bottom:18px }
th,td { vertical-align:top; padding:18px 16px; border-bottom:1px solid var(--line); width:25% }
th { font-weight:600 }
.evidence details,.starter details,.faq details { border-bottom:1px solid var(--line); padding:20px 0 }
.evidence summary,.starter summary,.faq summary { border-bottom:0 }
summary { cursor:pointer; font-weight:500 }
.starter pre { background:var(--quiet); padding:22px; border-radius:10px; overflow:auto; font:13px/1.7 "Courier New",monospace }
.examples dl { max-width:900px; margin-top:36px }
.examples dt { font-size:21px; font-weight:600; margin-top:28px }
.examples dd { margin:12px 0 0; color:var(--muted); max-width:70ch }
.faq { max-width:1040px }
@media(max-width:767px) { .evidence,.starter { grid-template-columns:1fr; gap:32px; padding-block:48px } .comparison,.examples,.faq { padding-block:40px } .starter pre { padding:16px; font-size:13px } }
/* Last-cascade layout guarantees for the labeled comparison and compact FAQ. */
section[id] { scroll-margin-top:0 }
.comparison,.examples,.faq { padding-block:55px }
.faq details { padding-block:0 }
@media(max-width:800px) {
 caption { display:block; width:100% }
 .key-note pre { font-size:13px }
 .engine-row .window-top,.engine-row .native-window aside,.engine-row .native-window label,.engine-row .native-window p:last-child,.engine-row .phone-top { font-size:13px }
 .cinema .story:not(.focus-reading) .story-spec pre,.cinema .story:not(.focus-reading) .story-terminal pre,.cinema .engine-story:not(.focus-reading) .engine-copy pre { font-size:13px; line-height:1.5 }
 table { min-width:0 }
 .table-scroll { overflow:visible }
 th,td { width:100% }
 td { border:0; padding:10px 0 }
 th[scope=row] { border:0; padding:0 0 12px }
}
@media(max-width:767px) {
 .comparison,.examples,.faq { padding-block:40px }
 :root:not(.js) .story-stage .caption-record,:root:not(.js) .story-stage .story-actions { display:block }
}