/* Scene 02 · Bằng chứng (LỆNH 12 §3, 22/10; LỆNH 25B / 25C, 24–25/10) — "Toàn cảnh một báo giá hôm nay: 5 khâu, 5 lần chép tay." The
   office is a WebGL canvas of its own (.of-gl, pb-office.js) on one fixed wide frame; the DOM above it carries every word, in one block
   (.e2-cam) that takes the same transform as the canvas when the layer pushes in and pans (≤ 1.10×). One way of numbering: a pill on the
   way at each station (its blue number and Uyên's word; only the number from beat 3); the cracks carry no number, their chips a crack
   and a word. The chip under the title and its small line; the counter top right ("✎ Chép tay: n lần", then "↻ làm lại cả 5 khâu");
   the sheet; the four tools; ②'s sources and a clock; the retyped figure and three copies of the file; the customer's Zalo; the band
   at the foot. scene-ev02.js writes every moving value from one clock (NQ_CK). Stage words ≥ 24 px (the chip's small line 22 px),
   Inter in sentence case. Colour for the story only: data blue #2A63E6, amber #F0A63A for what breaks and is redone. */
#s-evidence .e2{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#s-evidence .e2 *{box-sizing:border-box}
#s-evidence .e2 p{margin:0}
/* the shared card's own spacing, kept under this scene's reset */
#s-evidence .e2 .nq-card .nq-lab{margin:0 0 3px}
#s-evidence .e2 .nq-card .nq-sub{margin:3px 0 0}
#s-evidence .head{z-index:6}
#s-evidence .head .h1{font-size:58px}
/* the one evidence card, under the title */
/* LỆNH 42 §B4: the source chip, the five pills, the counter and the amber chips are the deck's one label (tokens: pitch.css) */
#s-evidence .ev-src{position:absolute;left:160px;right:auto;top:190px;z-index:6;margin:0;display:inline-flex;align-items:center;gap:10px;font:var(--nq-pill-font);color:var(--nq-pill-ink);
  background:var(--nq-pill-bg);padding:var(--nq-pill-pad);border-radius:999px;box-shadow:inset 0 0 0 1px var(--nq-pill-edge);opacity:0}
#s-evidence .ev-src::before{content:"";width:8px;height:8px;border-radius:50%;background:#8FC0FF}
#s-evidence .e2-src2{position:absolute;left:0;top:201px;z-index:6;margin:0;font-size:22px;font-weight:500;color:#A9BBD8;white-space:nowrap;opacity:0}
/* the cinematic entry blur of the chain is not used here: the dive into 01's window is the entry */
#s-evidence,#s-evidence.active,#s-evidence.active.cn-dof,#s-evidence.cn-in{filter:none!important;transform:none!important}
#s-evidence.active{transition:opacity .25s var(--io),visibility 0s!important}
#s-evidence .e2>*{position:absolute;margin:0}
#s-evidence .e2 .of-gl{left:0;top:0;width:1920px;height:1080px;display:block;background:#070D1C}
#s-evidence :is(.e2 .of-gl,.e2-still,.e2-cam){transform-origin:0 0;will-change:transform}
#s-evidence .e2-cam{left:0;top:0;width:1920px;height:1080px}
#s-evidence .e2-cam>*{position:absolute;margin:0}
/* no WebGL2, the office still being built, or Safe mode: the still frame of the beat end, the words in DOM */
#s-evidence .e2-still{left:0;top:0;width:1920px;height:1080px;display:none;object-fit:cover}
#s-evidence.e2-still-on .e2-still{display:block}
#s-evidence.e2-still-on .e2 .of-gl{display:none}
/* the title band */
#s-evidence .e2-top{left:0;top:0;width:1920px;height:300px;background:linear-gradient(180deg,rgba(5,10,23,.94) 0,rgba(5,10,23,.84) 150px,rgba(5,10,23,.42) 236px,rgba(5,10,23,0) 300px)}
/* the tag (as 01's "Tình huống minh họa") and the counter, top right */
#s-evidence .e2-tag{position:absolute;right:100px;top:80px;z-index:6;margin:0;font-size:22px;font-weight:500;color:#9FB2D2;opacity:0}
#s-evidence .e2-cnt{position:absolute;right:95px;top:900px;z-index:6;margin:0;display:grid;justify-items:end;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);color:var(--nq-pill-ink);
  background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge);opacity:0;white-space:nowrap}
#s-evidence .e2-cnt>span{grid-area:1/1;display:flex;align-items:baseline;gap:8px}
#s-evidence .e2-cnt .e2-c2{align-self:center;color:#FFC46B;font-weight:700;opacity:0}
#s-evidence .e2-cnt i{font-style:normal;color:#8FC0FF}
#s-evidence .e2-cnt b{display:inline-block;min-width:22px;text-align:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:28px;font-weight:700;color:#fff;transform-origin:50% 70%}
/* the title on one line */
#s-evidence .head .mk>span{position:relative}
#s-evidence .e2-t1{display:inline-block;white-space:nowrap}
#s-evidence .e2-t2{display:none}
/* the dive: the light of 01's window filling the screen */
#s-evidence .e2-dive{left:0;top:0;width:10px;height:10px;opacity:0;transform-origin:0 0;border-radius:2px;
  background:radial-gradient(closest-side,rgba(255,226,170,.95) 0,rgba(255,200,130,.62) 38%,rgba(255,178,100,.22) 72%,rgba(255,170,90,0) 100%)}
/* the drawn layer: leaders, the cracks, the amber loop and run */
#s-evidence .e2-svg{left:0;top:0;width:1920px;height:1080px;overflow:visible;contain:strict;will-change:transform}
#s-evidence .e2-svg path{fill:none}
#s-evidence .e2-svg .ld{stroke:var(--nq-ld);stroke-width:1;marker-end:url(#nq-ld-dot)}
#s-evidence .e2-svg .ld.cl{stroke:rgba(156,194,255,.8)}
#s-evidence .e2-svg .ld.am{stroke:rgba(240,166,58,.92)}
#s-evidence .e2-svg .ck{stroke:#F0A63A;stroke-width:4;stroke-linejoin:miter;stroke-linecap:round}
#s-evidence .e2-svg .ckg{stroke:rgba(240,166,58,.32);stroke-width:11;stroke-linejoin:round;stroke-linecap:round}   /* its glow: a wide faint stroke (a CSS filter here re-rasterised the whole layer: 150–220 ms frames) */
#s-evidence .e2-svg .lp{stroke:#F0A63A;stroke-width:3.2;stroke-dasharray:10 7;stroke-linecap:round}
#s-evidence .e2-svg .brk{stroke:#F0A63A;stroke-width:6;stroke-dasharray:9 8;stroke-linecap:butt}   /* the ribbon broken at a crack: a dashed amber run (LỆNH 43) */
#s-evidence .e2-svg .lph{stroke:#F0A63A;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}

/* ---- LỆNH 43 §3 · five cards of one size (330 × 92) on one line above the desks (scene-ev02.js sets their place: 350 px apart, 272 px from the
   top); in each: the number on the left (a 40 px circle), the step 28/600 beside it, its tools (icons and words) in 20 px under, the card the
   deck's one label (tokens: pitch.css; a rounded card, not a capsule); a 1 px leader from its foot to the floor ring (.e2-cs, outside the pushed layer) */
#s-evidence .e2-cd{left:0;top:0;width:1920px;height:1080px;pointer-events:none}
#s-evidence .e2-cd>*{position:absolute;margin:0}
#s-evidence .e2-cs{left:0;top:0;width:1920px;height:1080px;overflow:visible;contain:strict;will-change:auto}
#s-evidence .e2-pl{left:0;top:0;width:330px;height:92px;box-sizing:border-box;opacity:0;display:grid;grid-template-columns:40px 1fr;grid-template-rows:40px 32px;column-gap:10px;row-gap:4px;align-content:start;align-items:center;white-space:nowrap;
  padding:10px 12px 0 10px;border-radius:26px;overflow:hidden;color:var(--nq-pill-ink);transform-origin:50% 50%;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-evidence .e2-pl i{grid-row:1;grid-column:1;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-style:normal;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:24px;font-weight:700;color:#fff;background:#2A63E6}
#s-evidence .e2-pl span{grid-row:1;grid-column:2;font:600 28px/1.15 Inter,sans-serif;letter-spacing:0}
/* its tools (25/10, owner): icons and words, as the step cards had them */
#s-evidence .e2-pl b{grid-row:2;grid-column:1/-1;display:flex;align-items:center;gap:5px;font-size:20px;font-weight:500;line-height:1.2;color:rgba(222,232,248,.9)}
#s-evidence .e2-pl b svg{flex:none;width:20px;height:20px;fill:none;stroke:#9CC2FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-evidence .e2-pl b em{font-style:normal;margin-left:3px}
#s-evidence .e2-br{display:block;flex:none;width:30px;height:30px;-webkit-user-drag:none}
#s-evidence .e2-pl b .e2-br[src$='gmail.svg']{width:auto;height:23px}   /* gmail's mark is 4:3 */
#s-evidence .e2-pl b{gap:6px}
#s-evidence .e2-pl s{position:absolute;left:10px;top:10px;width:40px;height:40px;border-radius:50%;opacity:0;background:radial-gradient(closest-side,rgba(220,235,255,.95),rgba(120,170,255,.5) 70%,rgba(80,140,255,0));z-index:1}
/* beat 2 · the "✎" that pops at a desk and flies into the counter */
#s-evidence .e2-pen{left:0;top:0;width:42px;height:42px;opacity:0;display:grid;place-items:center;border-radius:50%;font-style:normal;font-size:24px;line-height:1;color:#FFE3B8;
  background:#3A2408;box-shadow:inset 0 0 0 1.5px rgba(240,166,58,.95),0 0 14px rgba(240,166,58,.5)}
/* the request: a sheet on the floor's way, its amber line (01's) until break 1 */
#s-evidence .e2-paper{left:0;top:0;width:44px;height:56px;opacity:0;padding:9px 7px;display:flex;flex-direction:column;gap:5px;border-radius:4px;background:#F7F5F0;
  box-shadow:0 0 0 2px #2A63E6,0 0 16px rgba(42,99,230,.65),0 10px 18px -8px rgba(0,0,0,.7)}
#s-evidence .e2-paper u{display:block;height:4px;border-radius:2px;background:#2A63E6}
#s-evidence .e2-paper u:nth-child(2){width:70%}
#s-evidence .e2-paper u:nth-child(3){background:#F0A63A}
#s-evidence .e2-paper u:nth-child(4){width:55%;background:#B9C6DB}
/* beat 3 (LỆNH 25B) · the note "Trucking báo riêng" (01's amber line) that slips off the sheet at break 1 */
#s-evidence .e2-note{left:0;top:0;opacity:0;white-space:nowrap;padding:4px 14px 6px;border-radius:6px;font-size:24px;font-weight:600;line-height:1.2;color:#FFDCA6;transform-origin:50% 50%;
  background:rgba(30,20,8,.92);box-shadow:inset 0 0 0 1px rgba(240,166,58,.85),0 8px 16px -8px rgba(0,0,0,.7)}
/* the four tools: circling the sheet (beat 2); flashing amber and scattering (beat 3) */
#s-evidence .e2-tl{left:0;top:0;width:52px;height:52px;opacity:0;display:grid;place-items:center;border-radius:50%;background:#0B1530;box-shadow:inset 0 0 0 1.5px rgba(176,206,255,.9),0 6px 14px -6px rgba(0,0,0,.7)}
#s-evidence .e2-tl s{position:absolute;inset:-4px;border-radius:50%;opacity:0;box-shadow:0 0 0 3px #F0A63A,0 0 18px rgba(240,166,58,.75)}
#s-evidence :is(.e2-tl,.e2-so) .e2-br{position:relative;width:32px;height:32px}
#s-evidence .e2-so .e2-br{width:26px;height:26px}
#s-evidence :is(.e2-tl,.e2-so) svg{position:relative;width:28px;height:28px;fill:none;stroke:#DCE8FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* break 2 · ②'s sources (Excel, Drive, email), each lit amber as the person turns to it; a small clock, its hand spinning */
#s-evidence .e2-so{left:0;top:0;width:42px;height:42px;opacity:0;display:grid;place-items:center;border-radius:50%;background:#0B1530;box-shadow:inset 0 0 0 1.5px rgba(176,206,255,.8)}
#s-evidence .e2-so svg{width:24px;height:24px}
#s-evidence .e2-so s{position:absolute;inset:-3px;border-radius:50%;opacity:0;box-shadow:0 0 0 3px #F0A63A,0 0 16px rgba(240,166,58,.75)}
#s-evidence .e2-clk{left:0;top:0;width:38px;height:38px;opacity:0;border-radius:50%;background:#FFF7EA;box-shadow:inset 0 0 0 2.5px #F0A63A,0 0 14px rgba(240,166,58,.6)}
#s-evidence .e2-clk b{position:absolute;left:17.5px;top:7px;width:3px;height:12px;border-radius:2px;background:#7A4A08;transform-origin:1.5px 12px}
#s-evidence .e2-clk::after{content:"";position:absolute;left:16px;top:16px;width:6px;height:6px;border-radius:50%;background:#7A4A08}
/* break 3 · the figure on the sheet retyped (3.500 struck, → 3.050 amber; simulated); three copies of the file and a "?" */
#s-evidence .e2-num{left:0;top:0;opacity:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;padding:4px 12px 6px;border-radius:8px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:26px;font-weight:700;line-height:1.2;color:#EEF3FA;
  background:rgba(9,17,40,.92);box-shadow:inset 0 0 0 1px rgba(240,166,58,.8),0 8px 16px -8px rgba(0,0,0,.7)}
#s-evidence .e2-num s{position:relative;text-decoration:none;color:#CFE0FF}
#s-evidence .e2-num s u{position:absolute;left:-2px;right:-2px;top:52%;height:3px;border-radius:2px;background:#F0A63A;transform:scaleX(0);transform-origin:0 50%}
#s-evidence .e2-num em{font-style:normal;color:#F0A63A}
#s-evidence .e2-num b{color:#FFB547}
#s-evidence .e2-file{left:0;top:0;width:34px;height:44px;opacity:0;padding:8px 6px;display:flex;flex-direction:column;gap:5px;border-radius:3px;background:#F7F5F0;box-shadow:0 0 0 1.5px #F0A63A,0 8px 14px -6px rgba(0,0,0,.7)}
#s-evidence .e2-file u{display:block;height:3px;border-radius:2px;background:#B9C6DB}
#s-evidence .e2-q{left:0;top:0;width:36px;height:36px;opacity:0;display:grid;place-items:center;border-radius:50%;font-size:26px;font-weight:800;line-height:1;color:#24170A;background:#F0A63A;box-shadow:0 0 14px rgba(240,166,58,.7)}
/* the three chips by their cracks: the deck's pill, an amber edge (the problem), the owner's words and nothing else */
#s-evidence .e2-chip{left:0;top:0;opacity:0;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:7px 22px 7px 14px;border-radius:999px;font:var(--nq-pill-font);color:var(--nq-pill-ink);
  background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1.5px rgba(240,166,58,.95)}
#s-evidence .e2-chip span{display:block}
#s-evidence .e2-chip svg{flex:none;width:26px;height:26px;fill:none;stroke:#F0A63A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:miter}
/* beat 4 · the customer's Zalo at ① (paper, an amber hairline, a tail to the desk); no customer figure, no waiting tag */
#s-evidence .e2-zalo{left:0;top:0;width:400px;opacity:0;padding:9px 16px 11px;border-radius:14px 14px 14px 4px;font-size:24px;font-weight:600;line-height:1.3;color:#3A2406;background:#F4F1EA;
  box-shadow:inset 0 0 0 1px rgba(240,166,58,.85),inset 0 1px 0 rgba(255,255,255,.65),0 2px 4px rgba(0,0,0,.16),0 16px 30px -14px rgba(0,0,0,.55)}
#s-evidence .e2-zalo::after{content:"";position:absolute;left:96px;bottom:-11px;width:22px;height:22px;background:#F4F1EA;transform:rotate(45deg);box-shadow:1px 1px 0 rgba(240,166,58,.85)}
#s-evidence .e2-zalo small{float:left;width:32px;height:32px;margin:1px 10px 0 0}
#s-evidence .e2-zalo small .e2-br{width:32px;height:32px}
#s-evidence .e2-zalo small svg{width:26px;height:26px;fill:none;stroke:#9A5A08;stroke-width:2;stroke-linejoin:round}
/* the closing line at the foot: the deck's pill (translucent, one hairline, amber for the problem), no solid box */
#s-evidence .e2-end{left:0;top:0;opacity:0;white-space:nowrap;padding:9px 32px 11px;border-radius:999px;font:600 32px/1.2 "Inter",sans-serif;color:var(--nq-pill-ink);
  background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1.5px rgba(240,166,58,.95)}
#s-evidence .e2-end b{font-weight:700;color:#FFC46B}
/* beat 3 · the rest of the office 30 % darker: a wide shade with a soft hole round the place, moved with a transform */
#s-evidence .e2-dim{left:0;top:0;width:2900px;height:1500px;opacity:0;background:radial-gradient(ellipse 470px 330px at 50% 50%,rgba(3,7,18,0) 40%,rgba(3,7,18,.3) 100%)}

/* every part that fades or moves on the clock is its own compositor layer */
#s-evidence :is(.e2-dive,.e2-pl,.e2-pen,.e2-paper,.e2-note,.e2-tl,.e2-so,.e2-clk,.e2-num,.e2-file,.e2-q,.e2-chip,.e2-zalo,.e2-end,.e2-dim){will-change:opacity,transform}
/* 02 waiting behind 01's end frame: drawn, invisible */
#s-evidence.ev-pre:not(.active){visibility:visible!important;opacity:.004!important;transition:none!important}
body.calm #s-evidence .e2 *{transition:none!important;animation:none!important}
/* 02 → 03 (Q3): 03 opens on this very frame (the same office, the same camera) and comes down from there; 02 stays whole under it until
   03 has faded in, then goes */
#s-evidence.cn-out{opacity:0!important;transform:none!important;transition:opacity .3s linear .95s,visibility 0s 1.25s!important}
#s-evidence:not(.active) :is(.ev-src,.e2-src2,.e2-tag,.e2-cnt,.e2>:not(.of-gl):not(.e2-still)){opacity:0!important;transition:opacity .25s linear!important}   /* left: the text goes at once; the 3D stays under 03's first frame */
/* 01 → 02: 01's words leave at once as the dive starts (they must not show through the office walls) */
#s-problem.cn-out{opacity:0!important;transition:opacity .12s linear,visibility 0s .12s!important}