/* Kodela intro stage: one minute with Anta. Shared by the home page and the film render.
   Sized in container units so the 1920×1080 render and a 320 px phone draw the same scene. */
.st {
  --ground: #f3f4f6; --panel: #fff; --line: #d9dce3; --line-strong: #c3c8d1; --ink: #14161a; --ink-dim: #4f5560; --ink-dimmer: #5d636e;
  --amber: #b86a00; --amber-text: #8f5200; --led: #f08a00; --lcd: #1c1f24; --lcd-ink: #f0a340; --lcd-dim: #8b8f98;
  --f-cond: "Plex Cond", "Arial Narrow", system-ui, sans-serif; --f-sans: "Plex Sans", system-ui, sans-serif; --f-mono: "Plex Mono", ui-monospace, monospace; --f-serif: "Plex Serif", Georgia, serif;
  --shadow-mod: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,22,26,.06), 0 22px 44px -22px rgba(20,22,26,.28);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 14px rgba(20,22,26,.08), 0 34px 64px -26px rgba(20,22,26,.34);
  position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate;
  container-type: size; background: var(--ground); color: var(--ink); font-family: var(--f-sans);
}
.st *, .st *::before, .st *::after { box-sizing: border-box; }
:where(.st) :where(p, ol, ul, figure) { margin: 0; padding: 0; }
.st__lines { position: absolute; inset: 0; background: url(/assets/art/board-lines.svg) center / cover no-repeat; opacity: .32; z-index: -1; }
.st .w { display: inline-block; will-change: transform; }

/* scene box: left of the card in landscape, above it in portrait */
.st__scene { position: absolute; left: 0; top: 0; width: 60cqw; height: 100cqh; }
.st__props, .pr { position: absolute; inset: 0; }
.pr { visibility: hidden; opacity: 0; }

/* ---------- hook ---------- */
.st__hook { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2cqmin; text-align: center; padding: 0 5cqw; }
.st__lcd { background: var(--lcd); color: var(--lcd-ink); font: 500 clamp(14px, 3.1cqmin, 40px)/1 var(--f-mono); letter-spacing: .03em; padding: 2.3cqmin 3cqmin; border-radius: 1.6cqmin; box-shadow: inset 0 2px 8px rgba(0,0,0,.55), var(--shadow-lift); min-width: min(84cqw, 82cqmin); text-align: left; }
.st__lcd .p { color: var(--lcd-dim); }
.st__caret { display: inline-block; width: .5em; height: 1.05em; background: var(--lcd-ink); vertical-align: -.18em; margin-left: .2em; }
.st__h { font: 700 clamp(26px, 8.4cqmin, 104px)/1 var(--f-cond); text-transform: uppercase; letter-spacing: -.012em; text-wrap: balance; }
.st__h2, .st__e2 { color: var(--amber); }

/* the problem act: the setup, three questions, the catch */
.st__hook .st__h { font-size: clamp(22px, 6.4cqmin, 80px); }
.qs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqmin; width: min(92cqw, 150cqmin); margin: .6cqmin 0; }
.q { display: flex; flex-direction: column; gap: 1.6cqmin; padding: 2cqmin 2.2cqmin 2.6cqmin; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-mod); opacity: 0; }
.q__top { display: flex; align-items: center; gap: 1.2cqmin; font: 600 clamp(10px, 1.6cqmin, 19px)/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.q__ic { width: 3.2cqmin; height: 3.2cqmin; min-width: 16px; min-height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.q__led { margin-left: auto; display: grid; place-items: center; width: 3.4cqmin; height: 3.4cqmin; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--lcd); color: var(--lcd-dim); font: 700 clamp(10px, 1.9cqmin, 22px)/1 var(--f-mono); letter-spacing: 0; }
.q.is-blink .q__led { background: var(--led); color: var(--lcd); box-shadow: 0 1px 3px rgba(143,82,0,.5); }
.q__t { font: 700 clamp(15px, 3.5cqmin, 44px)/1.04 var(--f-cond); letter-spacing: -.005em; text-wrap: balance; color: var(--ink); }

/* the board: usually, and with Kodela, with each limit beside it */
.cmp { position: absolute; left: 45%; top: 45%; translate: -50% -50%; width: min(76cqw, 146cqmin); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lift); overflow: hidden; visibility: hidden; opacity: 0; }
.cmp__head, .cmp__row { display: grid; grid-template-columns: 17% 25% minmax(0, 1fr); gap: 2.6cqmin; padding: 2.2cqmin 3.2cqmin; }
.cmp__head { align-items: center; background: #f1f2f5; border-bottom: 1px solid var(--line); font: 600 clamp(10px, 1.7cqmin, 20px)/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.cmp__k { display: flex; align-items: center; gap: 1cqmin; color: var(--ink); }
.cmp__mark svg { display: block; width: 3.4cqmin; height: 3.4cqmin; min-width: 16px; min-height: 16px; fill: none; stroke: var(--amber); stroke-width: 5; stroke-linecap: round; }
.cmp__row + .cmp__row { border-top: 1px dashed var(--line-strong); }
.cmp__w { padding-top: .5cqmin; font: 600 clamp(10px, 1.7cqmin, 20px)/1.25 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cmp__u { position: relative; justify-self: start; font: 500 clamp(12px, 2.4cqmin, 29px)/1.15 var(--f-sans); color: var(--ink-dimmer); }
/* the line-through fades in, so a phrase that wraps is crossed out on every line */
.cmp__u i { font-style: normal; text-decoration: line-through 2px rgba(79, 85, 96, var(--sk, 0)); }
.cmp__y { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.3cqmin; row-gap: .9cqmin; }
.cmp__led { width: 1.5cqmin; height: 1.5cqmin; min-width: 9px; min-height: 9px; margin-top: .8cqmin; border-radius: 50%; background: var(--line-strong); }
.cmp__row.is-on .cmp__led { background: var(--led); box-shadow: 0 1px 3px rgba(143,82,0,.5); }
.cmp__y b { font: 700 clamp(15px, 3cqmin, 36px)/1.05 var(--f-cond); color: var(--ink); }
.cmp__y em { grid-column: 2; font: 400 clamp(10px, 1.55cqmin, 18px)/1.4 var(--f-sans); font-style: normal; color: var(--ink-dim); }

/* ---------- card ---------- */
.st__card {
  position: absolute; right: 4cqw; top: 50%; translate: 0 -50%; width: 33cqw; visibility: hidden; opacity: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-mod); padding: 0 0 3cqmin;
}
.st__bar { display: flex; align-items: center; gap: 1.2cqmin; padding: 1.8cqmin 2.4cqmin; border-bottom: 1px solid var(--line); }
.st__led { width: 1.1cqmin; height: 1.1cqmin; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--line-strong); }
.st__led.is-on { background: var(--led); box-shadow: 0 1px 2px rgba(143,82,0,.5); }
.st__label { font: 600 clamp(11px, 1.75cqmin, 21px)/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; }
.st__tag { margin-left: auto; font: 500 clamp(10px, 1.35cqmin, 16px)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber-text); border: 1px solid rgba(184,106,0,.45); border-radius: 5px; padding: .5cqmin .8cqmin; }
.st__tag[hidden] { display: none; }
.st__title { font: 700 clamp(22px, 5.6cqmin, 66px)/.98 var(--f-cond); text-transform: uppercase; letter-spacing: -.012em; padding: 2.8cqmin 2.8cqmin 0; text-wrap: balance; }
.st__body { font: 400 clamp(15px, 2.5cqmin, 29px)/1.4 var(--f-sans); color: var(--ink-dim); padding: 2cqmin 2.8cqmin 0; text-wrap: pretty; }
.st__limit { margin: 2.6cqmin 2.8cqmin 0; padding-top: 1.9cqmin; border-top: 1.5px dashed var(--line-strong); display: flex; gap: 1.3cqmin; font: 400 clamp(13px, 2.05cqmin, 24px)/1.45 var(--f-sans); color: var(--ink-dim); }
.st__limit[hidden] { display: none; }
.st__limit i { flex: none; width: 1cqmin; height: 1cqmin; min-width: 7px; min-height: 7px; background: var(--amber); transform: rotate(45deg); margin-top: .6em; }
.st__limit b { color: var(--ink); font-weight: 600; }

/* ---------- Anta ---------- */
.st__anta { position: absolute; left: 0; top: 0; width: clamp(110px, 21cqmin, 300px); aspect-ratio: 240 / 210; translate: -50% -91%; pointer-events: none; z-index: 3; perspective: 900px; }
.st__anta3d { width: 100%; height: 100%; transform-style: preserve-3d; }
.st__antabody { width: 100%; height: 100%; transform-origin: 50% 92%; }
.anta svg { width: 100%; height: 100%; overflow: visible; display: block; }
.anta__leg path, .anta__wave path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.anta__near path { stroke: #2a2e35; stroke-width: 4.5; } .anta__near circle { fill: #2a2e35; }
.anta__far path { stroke: #9aa1ad; stroke-width: 4; }
.pr__bubble, .pr__sign, .pr__name { position: absolute; visibility: hidden; opacity: 0; white-space: nowrap; }
.pr__bubble { left: 64%; bottom: 92%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; box-shadow: var(--shadow-mod); padding: 1.3cqmin 1.8cqmin; font: 600 clamp(12px, 2.1cqmin, 25px)/1.25 var(--f-sans); white-space: normal; width: max-content; max-width: min(36cqw, 46cqmin); }
.pr__sign { left: 64%; bottom: 84%; background: var(--panel); border: 2px solid var(--ink); border-radius: 10px; padding: 1cqmin 1.6cqmin; font: 700 clamp(14px, 2.6cqmin, 30px)/1 var(--f-cond); text-transform: uppercase; box-shadow: 0 3px 0 var(--ink); }
.pr__sign::after { content: ""; position: absolute; left: 22%; top: 100%; width: 3px; height: 4cqmin; background: var(--ink); }
.pr__name { left: 50%; top: 100%; translate: -50% 4px; font: 600 clamp(10px, 1.5cqmin, 17px)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dimmer); }
.st sup { font-size: .55em; color: var(--amber-text); margin-left: .12em; letter-spacing: .04em; vertical-align: .75em; }

/* ---------- props (all in % of the scene box) ---------- */
.pr--meet .pr__k { position: absolute; left: 50%; top: 46%; width: 34cqmin; height: 34cqmin; translate: -55% -64%; }
.pr__k svg { width: 100%; height: 100%; } .pr__k path { fill: none; stroke: var(--amber); stroke-width: 4.5; stroke-linecap: round; }
.pr__word { position: absolute; left: 50%; top: 66%; translate: -50% 0; font: 700 clamp(30px, 10cqmin, 130px)/1 var(--f-cond); text-transform: uppercase; letter-spacing: -.01em; opacity: 0; }

/* space: people walk into their own workspaces; an AI helper lights up inside each */
.pr__floor { position: absolute; left: 4%; right: 4%; top: 56%; height: 30%; background: rgba(255,255,255,.45); border: 2px dashed var(--line-strong); border-radius: 18px; transform: perspective(900px) rotateX(58deg); transform-origin: 50% 100%; }
.pr__floorl { position: absolute; left: 50%; top: 62%; translate: -50% 0; font: 500 clamp(10px, 1.6cqmin, 18px)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dimmer); white-space: nowrap; }
.ws { position: absolute; top: 30%; width: 23cqmin; translate: -50% 0; opacity: 0; }
.ws--0 { left: 22%; } .ws--1 { left: 50%; top: 24%; } .ws--2 { left: 78%; }
.ws__box { display: block; width: 100%; }
.ws__ai { position: absolute; left: 50%; bottom: 96%; display: inline-flex; align-items: center; gap: .7cqmin; background: var(--lcd); color: var(--lcd-ink); padding: .8cqmin 1.3cqmin; border-radius: 99px; font: 500 clamp(9px, 1.5cqmin, 17px)/1 var(--f-mono); white-space: nowrap; box-shadow: inset 0 1px 4px rgba(0,0,0,.5), 0 6px 14px -6px rgba(20,22,26,.4); opacity: 0; }
.ws__ai svg { width: 1.8cqmin; height: 1.8cqmin; min-width: 11px; min-height: 11px; }
.ws__ai b { font-weight: 500; }
.ppl { position: absolute; top: 76%; width: 6.5cqmin; min-width: 30px; translate: -50% -100%; left: calc(-6% + (var(--tx) + 6%) * var(--k, 0)); opacity: 0; display: grid; justify-items: center; gap: .4cqmin; }
.ppl--0 { --tx: 22%; } .ppl--1 { --tx: 50%; } .ppl--2 { --tx: 78%; }
.ppl svg { width: 100%; height: auto; display: block; }
.ppl i { font: 500 clamp(9px, 1.4cqmin, 16px)/1 var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); }

/* ask: the real card, and the four steps it stands for */
.pr__clip { position: absolute; left: 20%; top: 3%; width: 72%; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lift); transform-origin: 30% 50%; will-change: transform; }
.pr__clip--wide { left: 18%; top: 2%; width: 80%; }
.pr__media { aspect-ratio: 10 / 6; background: #fff; }
.pr__clip--wide .pr__media { aspect-ratio: 980 / 400; }
.pr__media video, .pr__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pr__tag { position: absolute; z-index: 2; right: 1.2cqmin; top: 1.2cqmin; background: var(--lcd); color: var(--lcd-ink); font: 500 clamp(9px, 1.3cqmin, 15px)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .8cqmin 1.1cqmin; border-radius: 99px; }
.flow { position: absolute; left: 4%; right: 4%; top: 70%; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqmin; --fl: 0; }
.flow::before { content: ""; position: absolute; left: 12%; right: 12%; top: 3.2cqmin; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
.flow::after { content: ""; position: absolute; left: 12%; top: 3.2cqmin; height: 2px; width: calc(76% * var(--fl)); background: var(--amber); }
.flow__n { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: .6cqmin; opacity: .45; transition: opacity .3s; }
.flow__n.is-on { opacity: 1; }
.flow__ic { width: 6.4cqmin; height: 6.4cqmin; min-width: 34px; min-height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-mod); font: 700 clamp(14px, 2.6cqmin, 30px)/1 var(--f-cond); }
.flow__ic svg { width: 55%; height: 55%; }
.flow__n.is-on .flow__ic { border-color: var(--amber); }
.flow__ic--ok::after { content: ""; width: 28%; height: 50%; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-8%, -8%); }
.flow__n.is-on .flow__ic--ok { background: var(--amber); border-color: var(--amber); }
.flow__n.is-on .flow__ic--ok::after { border-color: #fff; }
.flow__n b { font: 700 clamp(12px, 2cqmin, 23px)/1 var(--f-cond); text-transform: uppercase; letter-spacing: .02em; }
.flow__n em { font: 400 clamp(10px, 1.6cqmin, 18px)/1.2 var(--f-sans); font-style: normal; color: var(--ink-dim); }

/* net: a workspace, Kodela in the middle, three sites; your company's list decides */
.net__ws { position: absolute; left: 4%; top: 34%; width: 20%; }
.net__ws img { width: 100%; display: block; }
.net__p { position: absolute; left: -6%; bottom: 18%; width: 34%; }
.net__ai { position: absolute; right: 2%; top: -8%; width: 22%; }
.net__p svg, .net__ai svg { width: 100%; height: auto; display: block; }
.net__ws b, .net__gate b { display: block; text-align: center; font: 600 clamp(10px, 1.6cqmin, 18px)/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; margin-top: .6cqmin; }
.net__gate { position: absolute; left: 42%; top: 34%; width: 16%; }
.net__gate img { width: 100%; display: block; }
.net__seen { position: absolute; left: 50%; top: 106%; translate: -50% 0; white-space: nowrap; background: var(--lcd); color: var(--lcd-ink); font: 500 clamp(9px, 1.4cqmin, 16px)/1 var(--f-mono); padding: .7cqmin 1cqmin; border-radius: 6px; box-shadow: inset 0 1px 4px rgba(0,0,0,.5); }
.net__seen:empty { display: none; }
.net__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net__wires path { fill: none; stroke: var(--amber); stroke-width: .45; stroke-dasharray: 1.2 1.4; }
.pr--net.is-block .net__wires path:nth-child(4) { stroke: var(--line-strong); }
.net__site { position: absolute; left: 80%; top: var(--y); translate: 0 -50%; display: flex; align-items: center; gap: 1cqmin; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-mod); padding: 1.2cqmin 1.6cqmin; font: 600 clamp(11px, 1.8cqmin, 21px)/1 var(--f-sans); white-space: nowrap; }
.net__site i { width: 1cqmin; height: 1cqmin; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--line-strong); }
.net__site.is-seen i { background: var(--led); }
.net__tag, .net__no { font-style: normal; font: 500 clamp(9px, 1.3cqmin, 15px)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber-text); border: 1px solid rgba(184,106,0,.45); border-radius: 5px; padding: .4cqmin .6cqmin; opacity: 0; transition: opacity .2s; }
.net__site.is-seen .net__tag { opacity: 1; }
.net__no { position: absolute; left: 0; top: 112%; color: var(--ink); border-color: var(--ink); background: #fff; }
.pr--net.is-block .net__site--odd { color: var(--ink-dimmer); text-decoration: line-through 2px var(--ink); }
.net__list { position: absolute; left: 4%; top: 4%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-mod); padding: 1.4cqmin 1.8cqmin; display: grid; gap: .7cqmin; }
.net__list p { font: 600 clamp(10px, 1.5cqmin, 17px)/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3cqmin; }
.net__list span { font: 500 clamp(11px, 1.7cqmin, 19px)/1.2 var(--f-sans); padding-left: 2.2cqmin; position: relative; }
.net__list span::before { content: ""; position: absolute; left: .3cqmin; top: .15em; width: .6cqmin; height: 1.1cqmin; border: solid var(--amber); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.net__pk { position: absolute; width: 1.6cqmin; height: 1.6cqmin; min-width: 9px; min-height: 9px; translate: -50% -50%; border-radius: 50%; background: var(--led); box-shadow: 0 1px 3px rgba(143,82,0,.5); opacity: 0; }
.net__pk.is-stop { background: var(--ink); box-shadow: 0 0 0 4px rgba(20,22,26,.12); }

.pr__switch { position: absolute; left: 30%; top: 84%; display: flex; align-items: center; gap: 1.2cqmin; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--shadow-mod); padding: 1cqmin 1.6cqmin 1cqmin 1cqmin; font: 600 clamp(11px, 1.8cqmin, 21px)/1 var(--f-sans); }
.pr__switch--t { left: 54%; top: 82%; }
.pr__sw { width: 6cqmin; height: 3.3cqmin; min-width: 40px; min-height: 22px; border-radius: 99px; background: #e6e8ec; box-shadow: inset 0 1px 3px rgba(20,22,26,.2); position: relative; transition: background .25s; }
.pr__sw i { position: absolute; top: 12%; left: 6%; height: 76%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(20,22,26,.3); transition: left .3s cubic-bezier(.16,1,.3,1); }
.is-block .pr__sw, .is-on .pr__sw { background: var(--amber); }
.is-block .pr__sw i, .is-on .pr__sw i { left: 52%; }
.pr__swv { font-style: normal; font: 500 clamp(10px, 1.5cqmin, 17px)/1 var(--f-mono); color: var(--amber-text); text-transform: uppercase; letter-spacing: .08em; }

/* who: three pieces of code fly into the receipt and come out labelled */
.who__chip { position: absolute; left: calc(4% + 36% * var(--k, 0)); top: calc(var(--y0) + (64% - var(--y0)) * var(--k, 0)); display: inline-flex; align-items: center; gap: .8cqmin; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--shadow-mod); padding: .8cqmin 1.4cqmin .8cqmin .8cqmin; font: 500 clamp(10px, 1.6cqmin, 18px)/1 var(--f-mono); opacity: 0; }
.who__chip svg { width: 2.6cqmin; height: 2.6cqmin; min-width: 14px; min-height: 14px; }
.who__chip i { width: 2.6cqmin; height: 2.6cqmin; min-width: 14px; min-height: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--bay, #e6e8ec); font: 700 1em/1 var(--f-cond); font-style: normal; }
.who__chip--ai { --y0: 54%; } .who__chip--p { --y0: 66%; } .who__chip--x { --y0: 78%; }
.pr__receipt { position: absolute; left: 40%; top: 50%; width: 44%; background: #fbfbfa; border: 1px solid var(--line); box-shadow: 0 10px 18px -12px rgba(20,22,26,.3); padding: 1.8cqmin 2cqmin 2cqmin; font-family: var(--f-serif); }
.pr__rh { font: 600 clamp(10px, 1.4cqmin, 16px)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); padding-bottom: 1cqmin; border-bottom: 1px solid var(--line-strong); margin-bottom: .6cqmin; }
.pr__receipt ol { list-style: none; }
.pr__receipt li { display: flex; justify-content: space-between; gap: 2cqmin; padding: .9cqmin 0; border-bottom: 1px dashed var(--line-strong); font: 400 clamp(12px, 2.1cqmin, 24px)/1.2 var(--f-serif); }
.pr__receipt code { font: 500 .78em/1.4 var(--f-mono); color: var(--ink-dim); }
.pr__receipt .u { color: var(--amber-text); font-weight: 600; }
.pr__rf { font: italic 400 clamp(11px, 1.7cqmin, 19px)/1.2 var(--f-serif); color: var(--ink-dim); padding-top: 1cqmin; opacity: 0; }
.pr__stamp { position: absolute; left: 70%; top: 46%; border: 3px solid var(--ink); color: var(--ink); border-radius: 8px; padding: .8cqmin 1.6cqmin; font: 700 clamp(14px, 2.8cqmin, 32px)/1 var(--f-cond); text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.75); opacity: 0; }

/* test: your checks, then the gate lets the code through */
.pr__clipb { position: absolute; left: 4%; top: 6%; width: 44%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-mod); padding: 2cqmin 2.2cqmin; }
.pr__clipb p { font: 600 clamp(11px, 1.6cqmin, 19px)/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.2cqmin; }
.pr__clipb ul { list-style: none; display: grid; gap: 1.1cqmin; }
.pr__clipb li { display: flex; align-items: center; gap: 1.2cqmin; font: 500 clamp(12px, 2.1cqmin, 24px)/1 var(--f-sans); color: var(--ink-dim); }
.pr__clipb li i { width: 2.8cqmin; height: 2.8cqmin; min-width: 18px; min-height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: #fff; position: relative; }
.pr__clipb li.is-ok { color: var(--ink); }
.pr__clipb li.is-ok i { background: var(--amber); border-color: var(--amber); }
.pr__clipb li.is-ok i::after { content: ""; position: absolute; left: 32%; top: 14%; width: 28%; height: 52%; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.tst__belt { position: absolute; left: 4%; right: 6%; top: 70%; height: 0; border-top: 2px dashed var(--line-strong); }
.tst__pkg { position: absolute; top: 0; translate: -50% -100%; background: var(--lcd); color: var(--lcd-ink); font: 500 clamp(12px, 2.2cqmin, 26px)/1 var(--f-mono); padding: 1.3cqmin 2cqmin; border-radius: 8px; box-shadow: inset 0 1px 4px rgba(0,0,0,.5), 0 6px 12px -6px rgba(20,22,26,.4); margin-top: -.6cqmin; }
.tst__gate { position: absolute; left: 60%; top: 30%; width: 30cqmin; translate: -50% 0; }
.tst__gate img { width: 100%; display: block; }
.tst__lamp { position: absolute; left: 50%; top: -4%; width: 1.8cqmin; height: 1.8cqmin; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--line-strong); }
.tst__lamp.is-ok { background: var(--led); box-shadow: 0 1px 3px rgba(143,82,0,.5); }
.tst__out { position: absolute; left: 88%; top: 56%; font: 500 clamp(10px, 1.5cqmin, 17px)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber-text); border: 1px solid rgba(184,106,0,.45); border-radius: 5px; padding: .5cqmin .8cqmin; opacity: 0; }

.pr__clip--audit { left: 4%; top: 3%; width: 70%; transform-origin: 50% 0; }
.pr__clip--audit img { display: block; width: 100%; aspect-ratio: 1100 / 520; object-fit: cover; }
.pr__log { position: absolute; left: 50%; right: 3%; top: 34%; background: var(--lcd); color: #e3e5ea; border-radius: 14px; box-shadow: inset 0 2px 8px rgba(0,0,0,.55), var(--shadow-lift); padding: 1.8cqmin 2.2cqmin; }
.pr__lh { font: 500 clamp(10px, 1.4cqmin, 16px)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-ink); margin-bottom: 1.2cqmin; }
.pr__log ol { list-style: none; display: grid; gap: .9cqmin; }
.pr__log li { font: 500 clamp(11px, 2cqmin, 23px)/1.2 var(--f-mono); opacity: 0; }
.pr__log code { color: var(--lcd-dim); margin-right: 1.4cqmin; font: inherit; }
/* six-legged footprints: three dots up, three dots down, alternating like her tripod gait.
   Each print stamps in as she passes it and stays until the scene ends. Sized to be read
   from across a desk, with a hairline of ink under each pad so amber holds on the grey board. */
.st__steps i { position: absolute; left: var(--x); top: 86.5%; width: 4.4cqmin; height: 3.6cqmin; min-width: 24px; min-height: 20px; opacity: 0; scale: .4; transition: scale .34s cubic-bezier(.16, 1, .3, 1); }
.st__steps i:nth-child(even) { translate: 0 -55%; }
.st__steps b { position: absolute; width: 32%; aspect-ratio: 1.3; border-radius: 50%; background: var(--amber); box-shadow: 0 1.5px 0 rgba(20, 22, 26, .28); }
.st__steps b:nth-child(1) { left: 0; top: 0; } .st__steps b:nth-child(2) { left: 35%; top: 45%; } .st__steps b:nth-child(3) { left: 70%; top: 5%; }
/* On a narrow (phone) stage the scene card reaches down to where she walks and hid the trail
   behind it, so the prints run along the strip of board under the card. Every second print
   is dropped, or they merge into one stripe. */
@container (max-width: 620px) {
  .st__steps i { top: 94.6%; }
  .st__steps i:nth-child(even) { display: none; }
  .st__steps i:nth-child(4n+3) { translate: 0 -42%; }
}

/* ---------- ending ---------- */
.st__end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqmin; text-align: center; padding: 0 5cqw 8cqmin; visibility: hidden; opacity: 0; }
.st__end .st__h { font-size: clamp(22px, 7cqmin, 88px); }
.st__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqmin; margin-top: 4cqmin; }
.st__key { display: inline-flex; align-items: center; gap: 1cqmin; min-height: 44px; height: 6.4cqmin; padding: 0 2.8cqmin; border-radius: 10px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--line-strong); font: 600 clamp(14px, 2.2cqmin, 26px)/1 var(--f-sans); text-decoration: none; opacity: 0; }
.st__key--ink { background: var(--ink); color: #fff; border-color: #000; box-shadow: 0 3px 0 #000; }
.st__key:focus-visible { outline: 2px solid #2458d6; outline-offset: 3px; }
.st__kled { width: 8px; height: 8px; border-radius: 50%; background: #5d636e; }
.st__kled.is-on { background: var(--led); }

/* ---------- portrait: the scene above, the card below ---------- */
@container (max-aspect-ratio: 1 / 1) {
  .st__scene { width: 100cqw; height: 54cqh; }
  .st__card { left: 4cqw; right: 4cqw; width: auto; top: auto; bottom: 9cqh; translate: none; }
  .st__title { font-size: clamp(22px, 7.4cqw, 44px); }
  .st__body { font-size: clamp(14px, 4.1cqw, 22px); }
  .st__limit { font-size: clamp(12px, 3.5cqw, 18px); }
  .st__anta { width: clamp(96px, 26cqw, 200px); }
  .pr__site { font-size: clamp(10px, 3cqw, 16px); left: 66%; }
  .pr__clip { left: 8%; width: 84%; top: 10%; }
  .pr__clip--wide { left: 4%; width: 92%; }
  .pr__receipt { left: 44%; width: 52%; top: 50%; }
  .pr__clipb { width: 56%; }
}

.pr__bubble.is-big { font-size: clamp(22px, 5cqmin, 56px); padding: 1.2cqmin 2.4cqmin; border-radius: 22px 22px 22px 6px; font-family: var(--f-cond); text-transform: uppercase; }
.pr__bubble.is-left { left: auto; right: 64%; border-radius: 14px 14px 4px 14px; }
.pr__bubble.is-big.is-left { border-radius: 22px 22px 6px 22px; }
@container (max-aspect-ratio: 1 / 1) {
  .ws { width: 22cqw; } .ppl { width: 9cqw; }
  .net__site { left: 64%; font-size: clamp(10px, 2.9cqw, 15px); padding: 1cqmin 1.2cqmin; }
  .net__ws { width: 24%; } .net__gate { left: 36%; width: 20%; }
  .flow { top: 62%; } .flow__n em { display: none; }
  .who__chip { display: none; }
  .pr__clip--audit { width: 92%; } .pr__log { left: 4%; right: 4%; top: 46%; }
  .pr__receipt { left: 30%; width: 66%; top: 46%; }
  .pr__clipb { width: 62%; }
  .qs { grid-template-columns: minmax(0, 1fr); width: 90cqw; gap: 1.6cqmin; }
  .q { flex-direction: row; align-items: center; padding: 1.6cqmin 2cqmin; }
  .q__top b { display: none; }
  .q__t { font-size: clamp(15px, 4.6cqw, 30px); }
  .q__top { order: 2; margin-left: auto; }
  .cmp { left: 50%; top: 40%; width: 92cqw; }
  .cmp__head { grid-template-columns: 34% minmax(0, 1fr); }
  .cmp__head > span:first-child { display: none; }
  .cmp__row { grid-template-columns: 34% minmax(0, 1fr); grid-template-areas: "w w" "u y"; row-gap: 1.2cqmin; padding: 1.8cqmin 2.6cqmin; }
  .cmp__w { grid-area: w; } .cmp__u { grid-area: u; font-size: clamp(12px, 3.6cqw, 20px); } .cmp__y { grid-area: y; }
  .cmp__y b { font-size: clamp(14px, 4.4cqw, 26px); } .cmp__y em { font-size: clamp(10px, 3cqw, 15px); }
}