/* ==========================================================================
   OpenVids landing — finale scenes: #qa (qa-), #sources (so-), #outro (ou-).
   Consumes core tokens only. Orange = the QA scan playhead and the outro's brand playhead + CTA.
   ========================================================================== */

/* ==========================================================================
   #qa — Render & QA: scan-and-repair
   ========================================================================== */
.qa-stage { padding: calc(var(--nav-h) + 12px) 0 calc(var(--hud-h) + 34px); }
.qa-stage > .wrap { height: 100%; display: flex; align-items: center; }
.qa-grid {
  flex: 1; min-width: 0; height: 100%; max-height: 840px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr);
  gap: 22px clamp(28px, 3.4vw, 56px); align-content: center;
}
.qa-head { grid-column: 1; grid-row: 1; gap: 16px; }
.qa .h2 { font-size: clamp(34px, 3.9vw, 62px); }
.qa .lead { font-size: clamp(15px, 1.12vw, 18px); max-width: 44ch; }
.qa-side { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.qa-app { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; flex-direction: column; min-width: 0; }

/* window chrome: title + stepper */
.qa-app .ui-bar { gap: 12px; }
.qa-app .ui-bar > span:not(.ui-lights) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-steps { display: flex; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; font: 500 10.5px/1 var(--font-mono); letter-spacing: .02em; }
.qa-steps li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-xs); color: var(--muted); white-space: nowrap; transition: color .3s, background-color .3s; }
.qa-steps li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklab, var(--fg) 22%, transparent); transition: background-color .3s; }
.qa-steps li.done { color: var(--fg-2); }
.qa-steps li.done::before { background: var(--ok); }
.qa-steps li.cur { color: var(--fg); background: color-mix(in oklab, var(--fg) 9%, transparent); }
.qa-steps li.cur::before { background: var(--fg); }

/* viewer */
.qa-view { padding: 14px 14px 0; background: color-mix(in oklab, var(--bg) 55%, var(--surface)); }
.qa-viewer {
  position: relative; width: min(100%, calc((100vh - 430px) * 16 / 9)); aspect-ratio: 16 / 9; margin-inline: auto;
  border-radius: var(--r-sm); overflow: hidden; background: oklch(0% 0 0); box-shadow: 0 0 0 1px var(--hair);
}
.qa-vis { position: absolute; inset: 0; }
.qa-frames { position: absolute; inset: 0; }
.qa-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 50% 50%; }
.qa-frames img.on { opacity: 1; }
.qa-redge { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.qa-redge i { position: absolute; top: 0; bottom: 0; left: -1px; width: 1px; background: var(--fg); box-shadow: 0 0 14px color-mix(in oklab, var(--fg) 60%, transparent); }
.qa-black { position: absolute; inset: 0; background: oklch(0% 0 0); opacity: 0; }
.qa-black.on { opacity: 1; }

/* Lower Third A + caption, in frame (8% safe margins) */
.qa-lt { position: absolute; left: 7%; bottom: 11%; display: grid; grid-template-columns: 3px auto; grid-template-rows: auto auto; gap: 5px 8px; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .5s var(--ease-out); }
.qa-lt.on { opacity: 1; transform: none; }
.qa-lt i { grid-row: 1 / 3; background: var(--fg); border-radius: 1px; }
.qa-lt b { display: block; width: clamp(60px, 9vw, 120px); height: clamp(7px, .9vw, 11px); border-radius: 3px; background: var(--fg); }
.qa-lt s { display: block; width: clamp(40px, 6vw, 80px); height: clamp(5px, .6vw, 7px); border-radius: 3px; background: color-mix(in oklab, var(--fg) 55%, transparent); }
.qa-capt { position: absolute; left: 50%; bottom: 10%; margin: 0; max-width: 78%; opacity: 0; transform: translate3d(-50%, 0, 0); transition: opacity .25s, transform .7s var(--ease-spring); }
.qa-capt.on { opacity: 1; }
.qa-capt.up { transform: translate3d(-50%, -140%, 0); }
.qa-capt span { display: block; padding: 4px 10px; border-radius: 4px; background: oklch(0% 0 0 / .62); font: 500 clamp(9px, .9vw, 13px)/1.3 var(--font-body); color: var(--fg); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* focus box on the finding under the head */
.qa-focus { position: absolute; inset: 7%; border: 1.5px solid var(--warn); border-radius: 4px; opacity: 0; transform: scale(1.04); transition: opacity .2s, transform .45s var(--ease-out), border-color .3s, inset .45s var(--ease-out); color: var(--warn); }
.qa-focus.on { opacity: 1; transform: none; }
.qa-focus.low { inset: 58% 12% 5% 5%; }
.qa-focus.ok { border-color: var(--ok); color: var(--ok); }
.qa-focus span { position: absolute; left: 6px; top: 6px; padding: 4px 7px; border-radius: 3px; background: var(--warn); color: var(--bg); font: 600 10px/1 var(--font-mono); letter-spacing: .02em; white-space: nowrap; transition: background-color .3s; }
.qa-focus.ok span { background: var(--ok); }

.qa-vtag { position: absolute; top: 8px; display: inline-flex; align-items: center; gap: 6px; max-width: 58%; padding: 5px 7px; border-radius: 4px; background: var(--glass); font: 500 10px/1 var(--font-mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-vclip { left: 8px; }
.qa-vclip b { font-weight: 600; color: var(--muted); }
.qa-vclip span { overflow: hidden; text-overflow: ellipsis; }
.qa-vtc { right: 8px; }

/* export summary over the viewer */
.qa-done { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; visibility: hidden; background: color-mix(in oklab, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qa-done-in { display: grid; justify-items: center; gap: 10px; text-align: center; }
.qa-done-in > * { margin: 0; opacity: calc(var(--d, 0) * 1.4 - .2); transform: translate3d(0, calc((1 - var(--d, 0)) * 16px), 0); }
.qa-done-h { display: flex; align-items: center; gap: 10px; font: 400 clamp(22px, 2.3vw, 34px)/1.05 var(--font-display); letter-spacing: -.02em; }
.qa-done-h .ic { width: .8em; height: .8em; color: var(--ok); stroke-width: 2.2; }
.qa-done-file { font: 500 clamp(11px, .95vw, 13px)/1.45 var(--font-mono); color: var(--fg-2); }
.qa-done-file b { font-weight: 600; color: var(--fg); }
.qa-done-n { font: 500 clamp(10.5px, .85vw, 12px)/1.4 var(--font-mono); color: var(--muted); }

/* timeline */
.qa-tl {
  --rh: 34px; --v1h: 18px; --pt: 10px; --pb: 14px; --px: 14px; --lab: 26px;
  position: relative; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); column-gap: 8px; row-gap: 3px; padding: var(--pt) var(--px) var(--pb); overflow: hidden;
}
.qa-tl-lab { grid-column: 1; display: flex; align-items: center; font: 600 9px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.qa-ruler { --tk: 1; grid-column: 2; position: relative; height: var(--rh); border-bottom: 1px solid var(--border); }
.qa-tick { position: absolute; bottom: 0; width: 1px; height: 5px; margin-left: -.5px; background: color-mix(in oklab, var(--fg) 26%, transparent); opacity: var(--tk); }
.qa-tick.big { height: 9px; background: color-mix(in oklab, var(--fg) 45%, transparent); }
.qa-tlab { position: absolute; top: 0; padding-left: 4px; font-size: 9.5px; line-height: 1; color: var(--muted); opacity: var(--tk); }
.qa-mks, .qa-rngs { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.qa-mk { position: absolute; top: calc(12px + var(--row) * 5px); height: 4px; min-width: 5px; border-radius: 2px; background: var(--warn); opacity: 0; transition: background-color .35s; }
.qa-mk.ok { background: var(--ok); }
.qa-rng { position: absolute; bottom: -2px; height: 3px; min-width: 3px; border-radius: 2px; background: color-mix(in oklab, var(--fg) 14%, transparent); opacity: 0; transition: opacity .3s; }
.qa-rng b { position: absolute; inset: 0; border-radius: inherit; background: var(--fg); transform: scaleX(0); transform-origin: left; }

.qa-row { grid-column: 2; position: relative; height: calc(var(--lh) * var(--v1h)); min-height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--fg) 3.5%, transparent); }
.qa-rowin { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); }
.qa-clip {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; min-width: 2px; overflow: hidden; border-radius: 3px;
  transition: left .7s var(--ease-spring), width .7s var(--ease-spring);
}
.qa-clip span { padding: 0 5px; font: 500 8.5px/1 var(--font-mono); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-clip.k-video { background: var(--k-video-b); box-shadow: inset 0 0 0 1px var(--k-video-l); }
.qa-clip.k-image { background: var(--k-image-b); box-shadow: inset 0 0 0 1px var(--k-image-l); }
.qa-clip.k-audio { background: var(--k-audio-b); box-shadow: inset 0 0 0 1px var(--k-audio-l); }
.qa-clip.k-motion { background: var(--k-motion-b); box-shadow: inset 0 0 0 1px var(--k-motion-l); }
.qa-clip.k-caption { background: color-mix(in oklab, var(--k-caption-b) 70%, var(--bg)); box-shadow: inset 0 0 0 1px var(--k-caption-l); }

.qa-scanbox { position: absolute; top: var(--pt); bottom: var(--pb); left: calc(var(--px) + var(--lab) + 8px); right: var(--px); pointer-events: none; z-index: 2; }
.qa-scanned { position: absolute; left: 0; right: 0; top: var(--rh); bottom: 0; background: color-mix(in oklab, var(--fg) 5%, transparent); transform-origin: left; transform: scaleX(0); opacity: 0; }
.qa-pin { position: absolute; top: var(--rh); bottom: 0; width: 1px; margin-left: -.5px; background: var(--warn); opacity: 0; transform-origin: top; transition: background-color .35s; }
.qa-pin.ok { background: var(--ok); }
.qa-scan { position: absolute; inset: 0; opacity: 0; will-change: transform; }
.qa-scan i { position: absolute; top: 2px; bottom: 0; left: -1px; width: 2px; background: var(--accent); }
.qa-scan i::before { content: ''; position: absolute; top: -2px; left: 50%; width: 11px; height: 9px; transform: translateX(-50%); background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* counter + findings deck */
.qa-count { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 500 12px/1 var(--font-mono); color: var(--muted); }
.qa-count b { font-weight: 600; color: var(--fg); letter-spacing: .02em; }
.qa-count b::after { content: ''; display: inline-block; width: 18px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--border-strong); }
.qa-deck { position: relative; flex: 1; min-height: 110px; }
.qa-cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; perspective: 1200px; }
.qa-earlier {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font: 500 13px/1 var(--font-body); color: var(--fg-2);
  opacity: 0; visibility: hidden;
}
.qa-earlier > .ic { color: var(--ok); }
.qa-pill { margin-left: auto; display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: color-mix(in oklab, var(--ok) 16%, transparent); color: var(--ok); font-size: 11px; }
/* opacity lives on the faces: opacity on the card itself would flatten its 3D context and break the flip */
.qa-card { --o: 0; position: absolute; left: 0; right: 0; top: 0; display: grid; transform-style: preserve-3d; transform-origin: 50% 50%; visibility: hidden; will-change: transform; }
.qa-face {
  grid-area: 1 / 1; display: grid; align-content: start; gap: 6px; padding: 11px 14px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 14px 34px oklch(0% 0 0 / .38); opacity: var(--o); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.qa-back { transform: rotateX(180deg); border-color: color-mix(in oklab, var(--ok) 32%, var(--border)); }
.qa-card.is-edit .qa-front { border-color: color-mix(in oklab, var(--warn) 34%, var(--border)); }
.qa-cat { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font: 500 11px/1 var(--font-mono); color: var(--muted); }
.qa-cat-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-cat .tc { color: var(--fg-2); }
.qa-cat .chip { margin-left: auto; height: 20px; padding: 0 7px; font-size: 10.5px; }
.qa-t { margin: 0; font: 600 13.5px/1.3 var(--font-body); letter-spacing: -.005em; color: var(--fg); }
.qa-l { margin: 0; font: 400 12.5px/1.42 var(--font-body); color: var(--fg-2); }

/* static composition (reduced motion): final state, not pinned */
.qa.is-static { height: auto; }
.qa.is-static .qa-stage { position: relative; height: auto; overflow: visible; padding-block: clamp(96px, 15vh, 184px); }
.qa.is-static .qa-grid { max-height: none; }
.qa.is-static .qa-app { align-self: start; }
.qa.is-static .qa-viewer { width: 100%; }
.qa.is-static .qa-rowin { transform: none; }
.qa.is-static .qa-mk { opacity: 1; }
.qa.is-static .qa-rng { opacity: 1; }
.qa.is-static .qa-rng b { transform: none; }
.qa.is-static .qa-done { visibility: visible; --d: 1; }
.qa.is-static .qa-vis { opacity: .5; }
.qa.is-static .qa-deck { flex: none; min-height: 0; }
.qa.is-static .qa-earlier { display: none; }
.qa.is-static .qa-cards { position: static; display: grid; gap: 8px; perspective: none; }
.qa.is-static .qa-card { --o: 1; position: relative; visibility: visible; transform: none; }
.qa.is-static .qa-front { display: none; }
.qa.is-static .qa-back { transform: none; }

/* ==========================================================================
   #sources — In the field: the Research film strip
   ========================================================================== */
.so-stage { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.2vh, 40px); padding: calc(var(--nav-h) + 8px) 0 calc(var(--hud-h) + 30px); }
.so-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 20px 48px; align-items: end; }
.so-head .sec-head { gap: 18px; }
.sources .h2 { font-size: clamp(34px, 4.6vw, 72px); }
.so-prompt { margin: 0; display: grid; gap: 10px; padding: 14px 16px 15px; box-shadow: none; }
.so-agent { display: flex; align-items: center; gap: 9px; font: 600 12.5px/1 var(--font-body); color: var(--fg); }
.so-mono { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); font: 600 10.5px/1 var(--font-mono); color: var(--fg-2); }
.so-when { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.so-q { margin: 0; font: 500 12.5px/1.55 var(--font-mono); color: var(--fg); }
.so-res { margin: 0; font: 400 12.5px/1.4 var(--font-body); color: var(--fg-2); }
.so-res .w { color: var(--warn); }

.so-reel { --fh: clamp(140px, calc(100vh - 500px), 330px); --minw: 240px; --band: 32px; position: relative; overflow: clip; }
.so-strip { position: relative; display: flex; align-items: flex-start; gap: clamp(24px, 3vw, 48px); width: max-content; will-change: transform; transform-origin: 50% 40%; }
.so-film { position: relative; display: flex; align-items: flex-start; }
.so-film::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fh) + 2 * var(--band)); background: color-mix(in oklab, var(--fg) 7%, var(--bg)); border-radius: 3px; }
.so-sprk { position: absolute; left: 0; width: 100%; height: 10px; z-index: 1; pointer-events: none; }
.so-sprk.t { top: 7px; }
.so-sprk.b { top: calc(var(--fh) + 2 * var(--band) - 17px); }
.so-sprk pattern rect { fill: var(--bg); }

.so-frame { position: relative; flex: none; margin: 0; display: flex; flex-direction: column; }
.so-cell { position: relative; display: flex; justify-content: center; min-width: var(--minw); padding: var(--band) 14px; }
.so-edge { position: absolute; left: 14px; right: 14px; top: 20px; display: flex; justify-content: space-between; gap: 10px; font: 600 8.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab, var(--fg) 42%, transparent); white-space: nowrap; overflow: hidden; }
.so-edge i { font-style: normal; flex: none; }
.so-edge { transition: color .4s; }
.so-frame.is-c .so-edge { color: var(--fg-2); }
.so-shot { position: relative; display: block; flex: none; width: calc(var(--fh) * var(--r)); height: var(--fh); padding: 0; border: 0; border-radius: 2px; background: var(--bg); overflow: hidden; cursor: pointer; }
.so-shot img { width: 100%; height: 100%; transform-origin: 50% 50%; will-change: transform; }
.so-shot:focus-visible { outline-offset: 4px; }

/* rubber stamp: license + status, slams in at centre */
.so-stamp {
  position: absolute; right: 8%; bottom: 12%; display: grid; justify-items: center; gap: 4px; padding: 8px 12px 7px;
  border: 2.5px solid currentColor; border-radius: 5px; outline: 1px solid currentColor; outline-offset: -7px;
  background: color-mix(in oklab, var(--bg) 58%, transparent); color: var(--ok);
  font: 700 clamp(10px, 1vw, 14px)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: rotate(var(--rot)) scale(2.4); pointer-events: none;
}
.so-stamp.warn { color: var(--warn); }
.so-stamp span { font-size: .72em; letter-spacing: .18em; }

/* license note: hover, keyboard focus or tap */
.so-note {
  position: absolute; inset: var(--band) 14px; z-index: 2; display: grid; align-content: end; gap: 8px; padding: 12px 14px;
  background: color-mix(in oklab, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 2px; overflow: auto; opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0);
  transition: opacity .3s, transform .5s var(--ease-out), visibility 0s .3s; pointer-events: none;
}
.so-note-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.so-note p { margin: 0; font: 400 12.5px/1.45 var(--font-body); color: var(--fg); }
.so-frame:hover .so-note, .so-shot:focus-visible + .so-note, .so-shot[aria-expanded="true"] + .so-note { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .5s var(--ease-out), visibility 0s; }

.so-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; width: 0; min-width: 100%; padding: 12px 14px 0; }
.so-file { font: 500 12px/1.3 var(--font-mono); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-by { grid-column: 1 / -1; font: 400 12.5px/1.35 var(--font-body); color: var(--fg-2); }

.so-end {
  flex: none; align-self: flex-start; display: grid; align-content: center; gap: 18px; width: clamp(260px, 30vw, 420px);
  height: calc(var(--fh) + 2 * var(--band)); padding: 0 4px; border-left: 1px solid var(--border-strong); padding-left: clamp(20px, 2.4vw, 36px);
}
.so-end-h { margin: 0; font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.so-end-n { display: flex; gap: clamp(18px, 2.2vw, 32px); margin: 0; }
.so-end-n div { display: grid; gap: 6px; }
.so-end-n dd { order: -1; margin: 0; font: 400 clamp(40px, 4.6vw, 72px)/.9 var(--font-display); letter-spacing: -.03em; color: var(--fg); }
.so-end-n dt { font: 500 11px/1 var(--font-mono); color: var(--muted); }
.so-end-n .ok dd { color: var(--ok); }
.so-end-n .warn dd { color: var(--warn); }
.so-end-l { margin: 0; max-width: 34ch; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }

/* static composition (reduced motion): not pinned, native horizontal scroll, stamps down */
.sources.is-static { height: auto; }
.sources.is-static .stage { position: relative; height: auto; overflow: visible; padding-block: clamp(96px, 15vh, 184px); }
.sources.is-static .so-reel { --fh: clamp(160px, 34vh, 320px); overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 12px; }
.sources.is-static .so-strip { padding-inline: var(--gutter); }
.sources.is-static .so-stamp { opacity: 1; transform: rotate(var(--rot)); }

/* ==========================================================================
   #outro — logo sting, REC, GitHub Releases CTA, mini demo
   ========================================================================== */
.outro { overflow: hidden; }
.ou-wrap { display: grid; gap: clamp(28px, 4vh, 48px); }
.ou-sting { margin: 0; }
.ou-logo { width: 100%; height: auto; overflow: visible; }
.ou-ring { fill: none; stroke: var(--fg); stroke-width: 6.2; stroke-dasharray: 121.02 122; stroke-dashoffset: 0; }
.ou-dot { fill: var(--rec); transform-box: fill-box; transform-origin: 50% 50%; }
.ou-rip { fill: none; stroke: var(--rec); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.ou-trk, .ou-bar { fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 262 600; }
.ou-trk { stroke: color-mix(in oklab, var(--fg) 30%, transparent); stroke-dashoffset: 0; }
.ou-bar { stroke: var(--fg); stroke-dashoffset: 96.62; }
.ou-g { fill: var(--fg); transform-box: fill-box; transform-origin: 50% 100%; }
.ou-tittle { transform-origin: 50% 50%; }
.ou-lean, .ou-stem, .ou-tri { transform-box: fill-box; transform-origin: 50% 100%; }
.ou-stem { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; }
.ou-tri { fill: var(--accent); stroke: var(--accent); stroke-width: 4.2; stroke-linejoin: round; }
.ou-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: clamp(18px, 3vw, 34px); padding-top: 14px; border-top: 1px solid var(--border);
  font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted);
  opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
}
.ou-meta span:first-child { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); }
.ou-meta .tc { margin-left: auto; color: var(--fg-2); }
.ou-sting.is-done .ou-meta { opacity: 1; transform: none; }

.ou-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: clamp(20px, 5vh, 56px); }
.ou-wrap > .dm-wrap { margin-top: clamp(24px, 5vh, 56px); }
.ou-copy { display: grid; gap: 24px; justify-items: start; }
.ou-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .qa-steps li:not(.cur) { font-size: 0; gap: 0; padding-inline: 5px; }
}
@media (max-width: 920px) {
  .qa-stage { padding: calc(var(--nav-h) + 6px) 0 calc(var(--hud-h) + 28px); }
  .qa-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 14px; height: 100%; max-height: none; align-content: start; }
  .qa-head { grid-row: 1; gap: 10px; }
  .qa .h2 { font-size: clamp(28px, 7.4vw, 44px); }
  .qa .lead { font-size: 14px; line-height: 1.45; }
  .qa-app { grid-column: 1; grid-row: 2; align-self: start; }
  .qa-app .ui-bar { display: none; }
  .qa-side { grid-row: 3; gap: 8px; }
  .qa-view { padding: 8px 8px 0; }
  .qa-viewer { width: min(100%, calc((100vh - 560px) * 16 / 9)); min-width: 180px; }
  .qa-tl { --rh: 30px; --v1h: 11px; --pt: 8px; --pb: 10px; --px: 10px; --lab: 22px; row-gap: 2px; }
  .qa-clip span { display: none; }
  .qa-deck { min-height: 96px; }
  .qa-face { padding: 9px 12px 10px; gap: 4px; }
  .qa-t { font-size: 13px; }
  .qa-l { font-size: 12px; }
  .qa-vtag { font-size: 9px; padding: 4px 6px; top: 6px; }
  .qa-vclip { left: 6px; } .qa-vtc { right: 6px; }
  .qa.is-static .qa-viewer { min-width: 0; }

  .so-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sources .h2 { font-size: clamp(30px, 7.4vw, 48px); }
  .so-reel { --fh: clamp(100px, min(calc(100vh - 560px), 36vw), 240px); --minw: 190px; --band: 28px; }
  .so-edge { top: 18px; }
  .so-sprk.t { top: 5px; }
  .so-sprk.b { top: calc(var(--fh) + 2 * var(--band) - 15px); }
  .so-note { inset: 0; padding: 10px 12px; }
  .so-note p { font-size: 12px; }
  .so-stamp { padding: 6px 9px 5px; border-width: 2px; outline-offset: -5px; font-size: 9.5px; }
  .so-end { width: min(78vw, 320px); }
  .sources.is-static .so-reel { --fh: min(40vw, 220px); }
}
@media (max-width: 720px) {
  .qa-lt, .qa-capt { display: none; }
  .so-when { display: none; }
  .so-q { font-size: 11.5px; }
  .ou-meta .tc { margin-left: 0; }
}

/* ==========================================================================
   Reduced motion: final states (JS also switches the scenes to static compositions)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .qa-clip, .qa-capt, .qa-lt, .qa-focus, .so-note, .ou-meta { transition: none; }
  .ou-meta { opacity: 1; transform: none; }
}