/* Scene 01 "Thế giới thu nhỏ" (upgrade 21/10b) · #s-problem.wd-on shows .wd (three.js world + DOM text) instead of .hx / .pb-stage.
   pb-world.js writes every moving value (opacity, transform) each frame from one clock; this file sets the layout on the
   1920 × 1080 stage and the resting looks. Type floor 20 px; labels 24 px. Per frame only transform and opacity change (and the
   email's clip while it folds). Pass 21/10d: HUD labels like the intro's, data cards, the file on the right edge. */
#s-problem .wd{position:absolute;inset:0;display:none;pointer-events:none;overflow:hidden}
#s-problem.wd-on .wd{display:block}
/* Q1 fix: the baked still frame of the world under the DOM (no WebGL2, a lost context) */
#s-problem .wd-still{position:absolute;left:0;top:0;width:1920px;height:1080px;display:none}
#s-problem.st-on .wd-still{display:block}
#s-problem.wd-on .pb-stage,#s-problem.wd-on .hx{display:none}
#s-problem.wd-on .head,#s-problem.wd-on .pb-tag{z-index:3}
#s-problem.wd-on .pb-t1,#s-problem.wd-on .pb-t2{transition:none}
#s-problem.wd-on .pb-tag{transition:transform 1.1s var(--out)}
#s-problem .wd>*{position:absolute;margin:0}
/* the shared world layer (outside the scenes, under them): shown while the intro or 01 runs the world */
#nqw{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s var(--io),visibility 0s .5s;will-change:opacity,transform}   /* 02 dives into it (scale up to 8): rastered once at 1, never again per frame of the zoom (LỆNH 14 §1: a 100 ms raster at the press) */
#nqw.on{opacity:1;visibility:visible;transition:opacity .5s var(--io),visibility 0s}
#nqw .wd-gl{display:block;width:1920px;height:1080px;background:#0A1226}
/* the title sits over the world: a band of night behind it (static) */
#s-problem .wd-top{left:0;top:0;width:1920px;height:330px;background:linear-gradient(180deg,rgba(5,10,23,.94) 0,rgba(5,10,23,.86) 150px,rgba(5,10,23,.5) 240px,rgba(5,10,23,0) 330px)}
/* beat 5: the left and the bottom darken for the count and the line */
/* Q1: the night's words get a soft local shade (the count block, the closing line), the moonlit land stays seen around them */
#s-problem .wd-scrim{inset:0;opacity:0;background:radial-gradient(ellipse 600px 330px at 380px 450px,rgba(3,7,18,.8) 0,rgba(3,7,18,.62) 52%,rgba(3,7,18,0) 100%),linear-gradient(0deg,rgba(3,7,18,.86) 0,rgba(3,7,18,.52) 140px,rgba(3,7,18,0) 250px)}

/* labels that follow the world, drawn like the intro's HUD: a 6 px anchor dot at the anchor (translate), a 1 px leader up 30 px, a small
   dark plate (#0B1530 at 85 %, a 1 px edge, radius 6) with the name in capitals 24/600 and its code in mono 20 (read on a white model) */
#s-problem .wd-lab{left:0;top:0;width:0;height:0;opacity:0}
/* LỆNH 42 §B4: the world's labels, the request plate, the thread's plates and the note are the deck's one label (tokens: pitch.css): a dark see-through
   pill, a 1 px light edge; the leader a 1 px line with a dot at its head (the anchor) */
#s-problem .wd-lab::before{content:"";position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--nq-ld)}
#s-problem .wd-lab::after{content:"";position:absolute;left:-.5px;bottom:4px;width:1px;height:26px;background:var(--nq-ld)}
#s-problem .wd-lab>span{position:absolute;left:0;bottom:30px;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:baseline;gap:10px;
  padding:var(--nq-pill-pad);border-radius:999px;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-problem .wd-lab b{font-size:24px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;color:#EAF2FF}
#s-problem .wd-lab small{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:20px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(143,192,255,.88)}
/* LỆNH 13: the hub reads "Công ty giao nhận", a name in sentence case (the places keep their capitals and codes) */
#s-problem .wd-lab.l-off b{text-transform:none;letter-spacing:0}
#s-problem .wd-lab.l-off::before{background:#FFD8A8}#s-problem .wd-lab.l-off::after{background:rgba(255,196,120,.7)}
#s-problem .wd-lab.l-off>span{box-shadow:inset 0 0 0 1px rgba(255,196,120,.92)}#s-problem .wd-lab.l-off b{color:var(--nq-pill-ink)}
#s-problem .wd-emb{left:0;top:0;width:48px;height:20px}
/* LỆNH 13 · beat 5: "Yêu cầu từ khách hàng" — the labels' plate in sentence case by two of the customers' warehouses, a 1 px leader and an
   anchor dot on each roof (built by s01-still.js, moved by pb-world.js) */
#s-problem .wd-req{left:0;top:0;width:1920px;height:1080px;opacity:0}
#s-problem .wd-req svg{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible}
#s-problem .wd-req path{fill:none;stroke:var(--nq-ld);stroke-width:1}
#s-problem .wd-req circle{fill:var(--nq-ld);stroke:none}
#s-problem .wd-rq{position:absolute;left:0;top:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-problem .wd-rq b{display:block;font-size:24px;font-weight:600;line-height:1.2;color:#EAF2FF}

/* beat 1 · the request: an email bubble, three lines; each line's mark matches what takes its colour in the world. After beat 1 it
   folds to the three lines (pb-world.js clips its foot and slides the lines up); its shadow is a box of its own (.wd-msh) */
#s-problem .wd-mail{left:160px;top:262px;width:640px;box-sizing:border-box;padding:22px 30px 22px;border-radius:24px 24px 24px 8px;background:#E8EDF4;color:#0E1727;opacity:0}
#s-problem .wd-msh{left:160px;top:262px;width:640px;height:300px;border-radius:24px 24px 24px 8px;opacity:0;transform-origin:50% 0;
  box-shadow:0 0 0 1px rgba(14,23,39,.24),0 36px 72px -24px rgba(0,0,0,.6)}
#s-problem .wd-mh{display:flex;align-items:center;gap:14px;padding-bottom:14px;margin-bottom:6px!important;border-bottom:1px solid #D3DCE8}
#s-problem .wd-av{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:23px;color:#fff;background:#2A55C8 linear-gradient(135deg,#2A55C8,#3C6FE0)}
#s-problem .wd-mh b{display:block;font-size:24px;font-weight:600;line-height:1.25}
#s-problem .wd-mh em{display:block;font-style:normal;font-size:21px;color:#4F5F77;margin-top:1px}
#s-problem .wd-ml{display:flex;align-items:center;gap:14px;margin:12px 0 0!important;font-size:29px;line-height:1.25;font-weight:500;opacity:0}
/* LỆNH 14 · each line one system: a glyph tile (what takes its colour in the world: the sea lane, the box, the road), the words on a
   marker that sweeps in left to right (a tint and a crisp 2 px rule under it, pb-world.js draws its width), the customer's instruction as
   its own amber tag */
#s-problem .wd-ml>i{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#2A63E6;background:rgba(42,99,230,.11);box-shadow:inset 0 0 0 1px rgba(42,99,230,.26)}
#s-problem .wd-ml>i svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-problem .wd-ml.l-road>i{color:#B36A0A;background:rgba(240,166,58,.2);box-shadow:inset 0 0 0 1px rgba(214,138,28,.45)}
#s-problem .wd-ml span{display:flex;align-items:center;gap:10px;min-width:0}
#s-problem .wd-ml .hl{--hc:rgba(42,99,230,.13);--hr:rgba(42,99,230,.72);font-weight:600;white-space:nowrap;padding:1px 10px 4px;border-radius:8px 8px 3px 3px;
  background:linear-gradient(var(--hr),var(--hr)) 0 100%/100% 2px no-repeat,linear-gradient(var(--hc),var(--hc)) 0 0/100% 100% no-repeat}
#s-problem .wd-ml.l-road .hl{--hc:rgba(240,166,58,.24);--hr:#D98A1C}
#s-problem .wd-ml .tg{flex:none;font-style:normal;font-size:20px;font-weight:700;line-height:1.2;padding:4px 11px 5px;border-radius:999px;color:#6E3F06;background:#FBE2B8;box-shadow:inset 0 0 0 1px rgba(214,138,28,.55);transform-origin:0 50%}

/* beat 2 · the Pricing file: a dark glass panel (no backdrop-filter: it would re-blur the world every frame) */
#s-problem .wd-panel{left:1352px;top:590px;width:520px;height:372px;box-sizing:border-box;border-radius:22px;overflow:hidden;opacity:0;color:#EEF3FB;
  background:linear-gradient(165deg,rgba(30,50,92,.94),rgba(12,22,46,.95));box-shadow:inset 0 1px 0 rgba(220,232,250,.22),0 0 0 1px rgba(170,200,245,.3),0 40px 80px -24px rgba(0,0,0,.85)}
#s-problem .wd-panel header{display:flex;align-items:center;height:62px;padding:0 30px;font-size:20px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C7D5EC;border-bottom:1px solid rgba(170,200,245,.2)}
#s-problem .wd-f{position:absolute;left:0;right:0;height:103px;box-sizing:border-box;padding:14px 30px 0;border-bottom:1px solid rgba(170,200,245,.14)}
#s-problem .wd-f.f-route{top:62px}#s-problem .wd-f.f-eq{top:165px}#s-problem .wd-f.f-scope{top:268px;border-bottom:0}
#s-problem .wd-fl{position:relative;display:block;font-size:20px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#A9BBD8}
#s-problem .wd-v{position:absolute;left:30px;top:46px;font-size:30px;font-weight:600;line-height:1.3;color:#fff;white-space:nowrap;opacity:0}
#s-problem .wd-slot{position:absolute;left:30px;top:88px;width:300px;border-bottom:2px dashed rgba(170,200,245,.4)}
/* LỆNH 13: the field's tints speak the .nq-card language (a hairline and four L-corner ticks in the state colour), never a bar on the left:
   the empty "Lời dặn của khách" in amber (is-issue), a field lit data blue as its card lands in it (is-data) */
#s-problem .wd-tint{position:absolute;inset:0;background:rgba(240,166,58,.14);box-shadow:inset 0 0 0 1px rgba(240,166,58,.34);opacity:0}
#s-problem .wd-tint::before,#s-problem .wd-hl::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#F0A63A,#F0A63A) left top/8px 1.5px no-repeat,linear-gradient(#F0A63A,#F0A63A) left top/1.5px 8px no-repeat,linear-gradient(#F0A63A,#F0A63A) right top/8px 1.5px no-repeat,linear-gradient(#F0A63A,#F0A63A) right top/1.5px 8px no-repeat,linear-gradient(#F0A63A,#F0A63A) left bottom/8px 1.5px no-repeat,linear-gradient(#F0A63A,#F0A63A) left bottom/1.5px 8px no-repeat,linear-gradient(#F0A63A,#F0A63A) right bottom/8px 1.5px no-repeat,linear-gradient(#F0A63A,#F0A63A) right bottom/1.5px 8px no-repeat}
#s-problem .wd-hl{position:absolute;inset:0;background:rgba(42,99,230,.22);box-shadow:inset 0 0 0 1px rgba(127,166,255,.36);opacity:0}
#s-problem .wd-hl::before{background:linear-gradient(#7FA6FF,#7FA6FF) left top/8px 1.5px no-repeat,linear-gradient(#7FA6FF,#7FA6FF) left top/1.5px 8px no-repeat,linear-gradient(#7FA6FF,#7FA6FF) right top/8px 1.5px no-repeat,linear-gradient(#7FA6FF,#7FA6FF) right top/1.5px 8px no-repeat,linear-gradient(#7FA6FF,#7FA6FF) left bottom/8px 1.5px no-repeat,linear-gradient(#7FA6FF,#7FA6FF) left bottom/1.5px 8px no-repeat,linear-gradient(#7FA6FF,#7FA6FF) right bottom/8px 1.5px no-repeat,linear-gradient(#7FA6FF,#7FA6FF) right bottom/1.5px 8px no-repeat}
#s-problem .wd-cur{position:absolute;left:32px;top:48px;width:3px;height:34px;border-radius:2px;background:#8FC0FF;animation:wdBlink 1.05s steps(1) infinite}
@keyframes wdBlink{50%{opacity:0}}
#s-problem .wd-nr{position:absolute;right:30px;top:50px;font-style:normal;font-size:22px;font-weight:600;color:#FFC371;opacity:0}

/* beat 4 · the quotation prints up out of the file's top edge */
#s-problem .wd-qslot{left:1352px;top:236px;width:520px;height:354px;overflow:hidden}
#s-problem .wd-quote{position:absolute;left:0;bottom:0;width:520px;box-sizing:border-box;padding:18px 26px 20px;border-radius:14px 14px 0 0;background:#F2EEE6;color:#1B2433;visibility:hidden;
  transform:translateY(102%);box-shadow:inset 0 -10px 14px -10px rgba(0,0,0,.35),0 -20px 50px -20px rgba(0,0,0,.6)}
#s-problem .wd-quote p{margin:0}
#s-problem .wq-k{font-size:21px;font-weight:600;color:#4A5970}
#s-problem .wq-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px!important;font-size:24px;line-height:1.35;font-weight:500;color:#33445C}
#s-problem .wq-row b{display:block;font-size:28px;font-weight:700;color:#1B2433}
#s-problem .wq-row b i{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#s-problem .wq-ok{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:#D9E6FB}
#s-problem .wq-ok::after{content:"";position:absolute;left:11px;top:6px;width:8px;height:14px;border:solid #2A5BD0;border-width:0 3px 3px 0;transform:rotate(45deg)}
#s-problem .wq-gap{flex:none;min-width:62px;box-sizing:border-box;text-align:center;padding:0 10px;border:2px dashed #C77A12;border-radius:8px;font-size:24px;font-weight:700;color:#7E4705;background:rgba(240,166,58,.12)}
/* the quotation's "—" labelled: a small dark plate under it, a 1.5 px leader up to the cell */
#s-problem .wq-note{margin-top:10px!important;text-align:right}
#s-problem .wq-note span{position:relative;display:inline-block;padding:var(--nq-pill-pad);border-radius:999px;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px rgba(240,166,58,.92);
  font:var(--nq-pill-font);letter-spacing:0;text-transform:none;color:var(--nq-pill-ink);opacity:0}
#s-problem .wq-note span::before{content:"";position:absolute;right:30px;bottom:100%;width:1px;height:10px;background:var(--nq-ld)}
/* the stamp: the same mark scene 03 opens with */
#s-problem .wd-st{margin-top:12px!important;text-align:right}
#s-problem .wd-st span{display:inline-block;padding:3px 16px 4px;border:3px solid #C77A12;border-radius:8px;font-size:28px;font-weight:700;color:#9A5A08;rotate:-4deg;opacity:0}

/* beats 2–3 · the data cards (LỆNH 46: the card v2 material — a gradient ground, a 1 px gradient edge, radius 14; the warm one amber):
   the value in the file's own type (30/600); scaled down in flight (origin top left), scale 1 on landing, text on the value. The
   trucking card, the customer's note, is .is-issue (warm glass, amber hairline and ticks); on the road it goes dark (.dk) */
#s-problem .wd-dc{left:0;top:0;opacity:0;transform-origin:0 0;white-space:nowrap;padding:8px 20px 10px;border-radius:14px;border:1px solid transparent;background:var(--nqc-bg) padding-box,var(--nqc-edge) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 28px -12px rgba(0,0,0,.7)}
#s-problem .wd-dc b{display:block;font-size:30px;font-weight:600;line-height:1.3;color:#fff}
#s-problem .wd-dc.dc-trk{background:linear-gradient(180deg,rgba(34,24,12,.96),rgba(22,15,8,.96)) padding-box,linear-gradient(180deg,rgba(240,166,58,.55),rgba(240,166,58,.14)) border-box}
#s-problem .wd-dc.dc-trk b{color:#FFDCA6}
#s-problem .wd-dc.dc-trk{transform-origin:50% 50%}
/* beat 3 · the scope field flashes amber where the trucking card hits it */
#s-problem .wd-rej{position:absolute;inset:0;box-shadow:inset 0 0 0 3px #F0A63A,inset 0 0 30px rgba(240,166,58,.45),inset 0 0 0 9999px rgba(240,166,58,.08);opacity:0}
/* beat 4 · the amber thread: a fine dashed line with knots; the way back is solid, with its arrowhead */
#s-problem .wd-thr{left:0;top:0;width:1920px;height:1080px;overflow:visible;opacity:0}
#s-problem .wd-thr path{fill:none;stroke:#F0A63A;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 7}
#s-problem .wd-thr .t-ask,#s-problem .wd-thr .t-head,#s-problem .wd-thr .t-tick{stroke-dasharray:none;stroke-width:2.5;stroke-linejoin:round}
#s-problem .wd-thr circle{fill:#F0A63A;stroke:rgba(11,21,48,.85);stroke-width:2;opacity:0}
/* small HUD plates on the thread: the break at the handover, the way back */
#s-problem .wd-hud{left:0;top:0;opacity:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px rgba(240,166,58,.92)}
#s-problem .wd-hud b{display:block;font-size:24px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.2;color:var(--nq-pill-ink)}

/* beat 5 · the scale */
#s-problem .wd-cnt{left:160px;top:290px;opacity:0;white-space:nowrap;line-height:1}
#s-problem .wd-cnt b,#s-problem .wd-lo{font-size:136px;font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
#s-problem .wd-lo{display:inline-block;vertical-align:top;font-style:normal;opacity:0}
/* Q1 · the count as the intro's ledger: each digit a reel 0–9 0–9 rolling up to its figure */
#s-problem .wd-cnt b{display:inline-block;vertical-align:top;height:1.2em;line-height:1.2em}
#s-problem .wd-cnt .od{display:inline-block;height:1.2em;overflow:hidden;vertical-align:top}
#s-problem .wd-cnt .od>i{display:block;font-style:normal}
#s-problem .wd-cnt .od>i>span{display:block;height:1.2em;line-height:1.2em}
#s-problem .wd-cnt .wd-lo{line-height:1.2em;letter-spacing:0;margin-left:.06em}
#s-problem .wd-unit{left:166px;top:458px;white-space:nowrap;font-family:var(--f, Inter),system-ui,sans-serif;font-size:28px;line-height:1.3;font-weight:600;color:#DCE5F2;opacity:0}
/* the range 0…100 under it: the 50–100 part lights up as the slips leave the door */
#s-problem .wd-say{left:160px;top:858px;font-size:48px;font-weight:600;letter-spacing:-.01em;color:#fff;opacity:0;text-shadow:0 2px 18px rgba(5,10,24,.75)}
/* LỆNH 10 · the week ruler under the night frame: T2 … T6, a read head crossing it in 3.5 s, the week behind it lit */
#s-problem .wd-wk{left:160px;top:900px;width:960px;height:72px;opacity:0}   /* LỆNH 48: its labels end above y 984 */
#s-problem .wd-wl{position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px;background:rgba(190,208,240,.22);
  -webkit-mask-image:linear-gradient(90deg,#000 0 19.8%,transparent 19.8% 20.2%,#000 20.2% 39.8%,transparent 39.8% 40.2%,#000 40.2% 59.8%,transparent 59.8% 60.2%,#000 60.2% 79.8%,transparent 79.8% 80.2%,#000 80.2%);
  mask-image:linear-gradient(90deg,#000 0 19.8%,transparent 19.8% 20.2%,#000 20.2% 39.8%,transparent 39.8% 40.2%,#000 40.2% 59.8%,transparent 59.8% 60.2%,#000 60.2% 79.8%,transparent 79.8% 80.2%,#000 80.2%)}
#s-problem .wd-wf{position:absolute;inset:0;border-radius:2px;background:#DDE8FF;box-shadow:0 0 10px rgba(160,196,255,.8);transform-origin:0 50%;transform:scaleX(0)}
#s-problem .wd-wh{position:absolute;left:-2px;top:-6px;width:4px;height:32px;border-radius:2px;background:#fff;box-shadow:0 0 14px 2px rgba(170,205,255,.95);opacity:0}
#s-problem .wd-wk span{position:absolute;top:26px;width:20%;text-align:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:24px;font-weight:600;line-height:1.3;color:rgba(214,226,246,.9);text-shadow:0 1px 10px rgba(5,10,24,.8)}
#s-problem .wd-wk span:nth-of-type(1){left:0}#s-problem .wd-wk span:nth-of-type(2){left:20%}#s-problem .wd-wk span:nth-of-type(3){left:40%}#s-problem .wd-wk span:nth-of-type(4){left:60%}#s-problem .wd-wk span:nth-of-type(5){left:80%}