/* CHIN-SU full deck: the HTML / SVG illustration kit (full/ill.js), NEXQUOTE's card language (nq-card.css): a dark plate on a
   #1A1E26 -> #10131A ground with a 1 px gradient edge, radius 16, a soft shadow; paper on #F4F1EA with #1B2333 ink; labels uppercase;
   tabular numbers; every value on a chart >= 24 px; every illustration tagged "Minh họa". Motion: the deck's curve, 300-900 ms. */
.pz{position:absolute;top:0;height:1080px;pointer-events:none;overflow:hidden}
.v-a .pz,.v-e .pz{left:880px;width:1040px}
.v-b .pz{left:0;width:1040px}
.v-c .pz{left:1152px;width:768px}
.v-d .pz,.v-f .pz{left:0;width:1920px}
.pz.bd{background:var(--pzbg)}
.ill-c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ill-c.desk{background:var(--desk,transparent)}
.ill-tag{position:absolute;right:28px;bottom:26px;z-index:2;padding:6px 12px;border-radius:999px;font:600 17px/1.2 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,235,221,.8);background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(243,235,221,.3)}
.plate{position:relative;box-sizing:border-box;border-radius:16px;color:#fff;background:linear-gradient(180deg,rgba(26,30,38,.97),rgba(16,19,26,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 48px -16px rgba(0,0,0,.65)}
.plate::before,.win::before,.kc::before,.scd::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* phone: a light app screen in a dark frame */
.phn{position:relative;width:420px;height:860px;box-sizing:border-box;padding:14px;border-radius:58px;background:linear-gradient(160deg,#2a2d33,#0d0e11 40%,#1b1d22);box-shadow:0 0 0 2px #3a3d44,0 40px 80px -20px rgba(0,0,0,.8)}
.phn.sm{width:300px;height:600px;border-radius:44px;padding:11px}
.ph-scr{position:relative;height:100%;border-radius:46px;overflow:hidden;background:#F7F5F1;color:#1B2333;display:flex;flex-direction:column}
.phn.sm .ph-scr{border-radius:34px}
.ph-sb{display:flex;justify-content:space-between;align-items:center;padding:16px 28px 6px;font:600 17px/1 "Inter",sans-serif;color:#1B2333}
.ph-sb i{width:60px;height:12px;border-radius:6px;background:#1B2333;opacity:.8}
.ph-hd{display:flex;align-items:center;gap:12px;padding:14px 24px 16px;background:var(--acc);color:#fff;font:700 26px/1.1 "Inter",sans-serif}
.phn.sm .ph-hd{font-size:21px;padding:12px 18px;gap:9px}
.ph-hd .ic{font-size:28px}
.ph-hd em{margin-left:auto;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.22);font:700 17px/1.2 "Inter",sans-serif;font-style:normal;letter-spacing:.04em}
.ph-bd{flex:1;display:flex;flex-direction:column;gap:14px;padding:20px 22px}
.phn.sm .ph-bd{padding:16px;gap:10px}
.pr-h{margin:6px 0 0;font:700 20px/1.2 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5a6474}
.pr-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 6px 16px -10px rgba(0,0,0,.25)}
.pr-row .btl{flex:none}
.pr-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#EEF1F5;font-size:26px;color:#33405a;flex:none}
.pr-k{margin:0;font:700 24px/1.2 "Inter",sans-serif;color:#1B2333}
.pr-s{margin:4px 0 0;font:500 20px/1.25 "Inter",sans-serif;color:#5a6474}
.pr-v{margin-left:auto;font:700 26px/1 "Inter",sans-serif;color:#1B2333}
.pr-btn{margin-top:auto;display:block;padding:20px;border-radius:18px;background:var(--acc);color:#fff;text-align:center;font:700 26px/1 "Inter",sans-serif}
.pr-btn.press{animation:press 2.4s var(--e) 1.6s infinite}
@keyframes press{0%,70%,100%{transform:none;box-shadow:0 0 0 0 rgba(43,179,163,.5)}78%{transform:scale(.96);box-shadow:0 0 0 14px rgba(43,179,163,0)}}
.pp-img{display:grid;place-items:center;height:250px;border-radius:20px;background:radial-gradient(circle at 50% 60%,#fff,#ECE7DE)}
.pp-img.sm{height:150px}
.pp-n{margin:4px 0 0;font:700 28px/1.2 "Inter",sans-serif;color:#1B2333}
.phn.sm .pp-n{font-size:24px}
.pp-p{margin:0;font:800 46px/1 "Inter",sans-serif;color:var(--acc);font-variant-numeric:tabular-nums}
.pp-p.blur{color:#9aa3b2;letter-spacing:.04em}
.pp-m{margin:0;font:500 20px/1.3 "Inter",sans-serif;color:#5a6474}
.pp-cond{align-self:flex-start;padding:10px 16px;border-radius:12px;background:color-mix(in srgb,var(--acc) 14%,#fff);color:var(--acc);font:700 24px/1.2 "Inter",sans-serif}
.pp-tl{display:flex;justify-content:space-between;padding:14px 10px;border-radius:16px;background:#fff}
.pp-tl span{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 19px/1 "Inter",sans-serif;color:#9aa3b2}
.pp-tl span.on{color:var(--acc)}
.pp-tl .ic{font-size:30px}
.pp-hero{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:20px;background:color-mix(in srgb,var(--acc) 12%,#fff);color:#0f5148}
.pp-hero .ic{font-size:34px;color:var(--acc)}
.pp-hero b{font:800 36px/1.1 "Inter",sans-serif;color:#0f3f39}
.pp-hero span{font:600 21px/1.2 "Inter",sans-serif;color:#2c6a61}
.pp-alert{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:18px;background:#FFF2DC;box-shadow:inset 0 0 0 2px #F2A93B}
.pp-alert .ic{font-size:34px;color:#c47f12;flex:none}
.pp-alert b{display:block;font:800 28px/1.1 "Inter",sans-serif;color:#5b3a06}
.pp-alert span{display:block;margin-top:6px;font:600 22px/1.3 "Inter",sans-serif;color:#6b4a14}
.pp-eta{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;background:color-mix(in srgb,var(--acc) 14%,#fff);color:#0f3f39;font:800 26px/1 "Inter",sans-serif}
.pp-eta .ic{font-size:30px;color:var(--acc)}
.scr3{display:flex;gap:30px;align-items:center}
.scr3 .phn:nth-child(2){transform:translateY(-30px)}
.btl{display:block}

/* dashboard window */
.win{position:relative;width:900px;border-radius:18px;background:linear-gradient(180deg,#1b2029,#11141b);box-shadow:0 40px 80px -24px rgba(0,0,0,.8);color:#fff;overflow:hidden}
.win-bar{display:flex;align-items:center;gap:8px;padding:16px 22px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.win-bar i{width:12px;height:12px;border-radius:50%;background:#59606c}
.win-bar b{margin-left:14px;font:600 20px/1 "Inter",sans-serif;letter-spacing:.04em;color:#c9d2df}
.win-bd{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px}
.dtl{padding:22px 24px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dt-l{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 21px/1.2 "Inter",sans-serif;color:#aeb8c7}
.dt-l .ic{font-size:26px;color:#E8402F}
.dt-v{display:flex;align-items:center;gap:14px;margin:0;font-variant-numeric:tabular-nums}
.dt-a{font:400 32px/1 "Geist","Inter",sans-serif;color:#7d8796}
.dt-v .ic{font-size:26px;color:#E8402F}
.dt-v b{font:400 58px/1 "Geist","Inter",sans-serif;letter-spacing:-.03em;color:#fff}
.dt-bar{display:block;height:8px;margin-top:16px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.dt-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#E8402F,#ff8a6a);transition:width .9s var(--e) .9s}
.bt.on .dt-bar i{width:var(--w)}
.win-ft{margin:0;padding:0 24px 22px;font:500 20px/1.3 "Inter",sans-serif;color:#8d97a6}

/* paper */
.ppr{position:relative;box-sizing:border-box;padding:30px 34px;border-radius:4px;background:#F4F1EA;color:#1B2333;box-shadow:0 2px 0 rgba(0,0,0,.05),0 30px 60px -24px rgba(0,0,0,.55)}
.ppr-h{margin:0;font:800 26px/1.2 "Inter",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#1B2333}
.ppr-sub{margin:6px 0 18px;font:600 21px/1.3 "Inter",sans-serif;color:#5a5446}
.ppr-r{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1.5px dashed rgba(27,35,51,.25)}
.ppr-k{font:600 25px/1.25 "Inter",sans-serif;color:#1B2333}
.ppr-st{padding:6px 12px;border:2px solid #b4412f;border-radius:6px;font:800 19px/1 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#b4412f;transform:rotate(-3deg)}
.ppr-ft{display:flex;align-items:center;gap:10px;margin:18px 0 0;font:600 20px/1.2 "Inter",sans-serif;color:#5a5446}
.ppr-ft .ic{font-size:24px}
.form{width:640px;transform:rotate(-1.2deg)}
.desk{--desk:radial-gradient(ellipse at 50% 40%,#d9cdb5,#c3b597)}
.hw{margin:12px 0 0;font:400 30px/1.3 "Segoe Print","Bradley Hand","Comic Sans MS",cursive;color:#1f3f8a}
.slips{position:relative;width:900px;height:760px}
.slip{position:absolute;width:440px;min-height:300px}
.slip:nth-child(1){left:0;top:40px;transform:rotate(-4deg)}
.slip:nth-child(2){left:440px;top:0;transform:rotate(3deg)}
.slip:nth-child(3){left:210px;top:380px;transform:rotate(-1deg)}
.slip .two{display:flex;gap:14px;margin-top:16px}
.slip .two span{flex:1;padding:14px;border-radius:6px;background:#fff;font:600 22px/1.3 "Inter",sans-serif;color:#1B2333}
.slip .two b{display:block;font:800 26px/1 "Inter",sans-serif;color:#b4412f;margin-bottom:6px}
.slip .emp{height:16px;margin:18px 0 0;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(27,35,51,.14) 0 10px,transparent 10px 16px)}
.stamp2{position:absolute;right:22px;bottom:22px;padding:8px 14px;border:3px solid #b4412f;border-radius:8px;font:800 24px/1 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#b4412f;transform:rotate(-8deg)}
.stamp2.amb{border-color:#b9770f;color:#b9770f}
.stamp2.mute{border-color:#6b6455;color:#6b6455}
.nbk{position:relative;width:640px;min-height:720px;box-sizing:border-box;padding:46px 46px 40px 86px;border-radius:6px;background:repeating-linear-gradient(180deg,#F7F3EA 0 58px,#cfd8e8 58px 60px);box-shadow:0 30px 60px -24px rgba(0,0,0,.6);transform:rotate(2deg)}
.nbk::after{content:"";position:absolute;left:66px;top:0;bottom:0;width:2px;background:#e3a3a0}
.nb-sp{position:absolute;left:18px;top:30px;bottom:30px;width:26px;background:radial-gradient(circle at 50% 50%,#8d8d8d 6px,transparent 7px) 0 0/26px 46px repeat-y}
.nb-d{margin:0 0 6px;font:800 24px/1.2 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5a5446}
.nbk .hw{margin:0;line-height:60px}
.nb-f{display:flex;align-items:center;gap:10px;margin:24px 0 0;font:600 22px/1.2 "Inter",sans-serif;color:#5a5446}
.sheet{width:660px}
.ppr-f{margin:14px 0 18px;padding:14px 18px;border-left:4px solid #b4412f;background:#fff;font:600 24px/1.3 "Inter",sans-serif;color:#1B2333}
.grid3{display:grid;grid-template-columns:150px repeat(3,1fr);gap:10px 12px;align-items:center}
.grid3 b{font:800 19px/1.2 "Inter",sans-serif;color:#1B2333}
.grid3 em{font:600 21px/1.2 "Inter",sans-serif;font-style:normal;color:#5a5446}
.grid3 i{font:700 17px/1 "Inter",sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#9a917f;padding:10px 0;border-bottom:1.5px dashed rgba(27,35,51,.25)}

/* the invented neighbourhood map */
.mpw{position:absolute;inset:0}
.mp{position:absolute;inset:0;width:100%;height:100%}
.mp-gnd{fill:var(--mp-g,#1a1c21)}
.mp-b{fill:var(--mp-b,#262a31)}
.mp-park{fill:var(--mp-p,#22372b)}
.mp-river{fill:none;stroke:var(--mp-w,#1d3446);stroke-width:46;stroke-linecap:round}
.mp-road{fill:none;stroke:var(--mp-r,#343944);stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.mp-bd{fill:none;stroke:#F2A93B;stroke-width:5;stroke-dasharray:16 12}
.mp-bdl{fill:#F2A93B;font:700 24px "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.mp-rt{fill:none;stroke:var(--mp-rt,#E8402F);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--e) var(--d,0ms)}
.mp-rt.amb{stroke:#F2A93B}.mp-rt.kn{stroke:#2BB3A3}.mp-rt.thin{stroke-width:4;opacity:.8}
.bt.on .mp-rt{stroke-dashoffset:0}
.mp-pt .mp-dot{fill:#1b1c20;stroke:#F3EBDD;stroke-width:3}
.mp-pt use{color:#F3EBDD;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-pt .mp-halo{fill:rgba(243,235,221,.14)}
.mp-pt.red .mp-dot{fill:#E8402F;stroke:#fff}.mp-pt.red use{color:#fff}
.mp-pt.amb .mp-dot{fill:#F2A93B;stroke:#fff}.mp-pt.amb use{color:#1a1206}.mp-pt.amb .mp-halo{fill:rgba(242,169,59,.25);animation:halo 1.8s var(--e) infinite}
.mp-pt.kn .mp-dot{fill:#2BB3A3;stroke:#fff}.mp-pt.kn use{color:#04201c}
@keyframes halo{0%{r:20;opacity:1}100%{r:40;opacity:0}}
.mp-l{fill:#fff;font:700 26px "Inter",sans-serif;paint-order:stroke;stroke:rgba(0,0,0,.65);stroke-width:6px;stroke-linejoin:round}
.mp-ring{fill:rgba(43,179,163,.12);stroke:#2BB3A3;stroke-width:3;stroke-dasharray:10 8;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 1.4s var(--e) .4s}
.bt.on .mp-ring{transform:none}
.mp-ring2{fill:none;stroke:#2BB3A3;stroke-width:3;transform-box:fill-box;transform-origin:center;opacity:0}
.bt.on .mp-ring2{animation:ring 2.6s var(--e) 1.8s infinite}
@keyframes ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1);opacity:0}}
.mp-rl{fill:#8ADBD0;font:700 26px "Inter",sans-serif;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:6px}
.mp-ord{fill:#E8402F;stroke:#fff;stroke-width:3}
.mp-mv{position:absolute;left:0;top:0;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#F2A93B;color:#1a1206;font-size:28px;box-shadow:0 6px 16px rgba(0,0,0,.5);offset-rotate:0deg;offset-distance:0%;opacity:0}
.bt.on .mp-mv{opacity:1;animation:mv var(--dur,6s) linear 1s infinite}
@keyframes mv{0%{offset-distance:0%}85%,100%{offset-distance:100%}}
.mp.cream{--mp-g:#EFE6D4;--mp-b:#E2D6BF;--mp-p:#d6dcc0;--mp-w:#cfdbe0;--mp-r:#fbf7ee}
.mp.cream .mp-l{fill:#1B2333;stroke:rgba(251,247,238,.9)}
.mp.cream .mp-pt .mp-dot{fill:#1B2333;stroke:#F4F1EA}.mp.cream .mp-pt use{color:#F4F1EA}
.mp.amber{--mp-g:#1d1710;--mp-b:#2b2216;--mp-p:#26271a;--mp-w:#22262a;--mp-r:#3a2f20}
.mp.cool{--mp-g:#11171b;--mp-b:#1a242a;--mp-p:#16302a;--mp-w:#173040;--mp-r:#25333b}

/* budget bar, KPI cards, the control group */
.bud{width:100%}
.bud-h{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;font:600 24px/1.2 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.bud-h .ic{font-size:32px;color:var(--teal);align-self:center}
.bud-h b{margin-left:auto;font:400 64px/1 "Geist","Inter",sans-serif;letter-spacing:-.03em;color:var(--ink);text-transform:none}
.bud-h em{font:500 26px/1 "Inter",sans-serif;font-style:normal;color:var(--soft);text-transform:none;letter-spacing:0}
.bud-bar{display:flex;height:72px;border-radius:12px;overflow:hidden;gap:3px}
.bud-s{display:flex;align-items:center;justify-content:center;gap:10px;width:var(--w);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e) var(--d,0ms);color:#04201c;font:700 30px/1 "Geist","Inter",sans-serif}
.bud-s .ic{font-size:30px}
.bt.on .bud-s{transform:none}
.bud-s.s0,.bud-k .s0{background:#2BB3A3}.bud-s.s1,.bud-k .s1{background:#6FCFC2}.bud-s.s2,.bud-k .s2{background:#B8EBE3}
.bud-k{display:flex;flex-wrap:wrap;gap:6px 30px;margin-top:12px}
.bud-k span{white-space:nowrap;font:500 22px/1.25 "Inter",sans-serif;color:var(--soft)}
.bud-k i{display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:3px;vertical-align:1px}
.bud-m{margin:12px 0 0;font:500 22px/1.3 "Inter",sans-serif;color:var(--mute)}
.kpc{display:flex;gap:16px;width:100%}
.kc{position:relative;flex:1;box-sizing:border-box;padding:20px 20px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(26,30,38,.92),rgba(16,19,26,.92));box-shadow:0 20px 40px -18px rgba(0,0,0,.6);color:#fff}
.kc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(43,179,163,.16);color:#8ADBD0;font-size:28px}
.kc-v{display:flex;align-items:center;gap:8px;margin:14px 0 6px;font:700 34px/1.1 "Inter",sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.kc-ar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:22px}
.kc-ar.up{background:rgba(43,179,163,.22);color:#8ADBD0}.kc-ar.down{background:rgba(43,179,163,.22);color:#8ADBD0}
.kc-l{margin:0;font:500 22px/1.25 "Inter",sans-serif;color:rgba(243,235,221,.82)}
.cg{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;width:100%}
.cg p{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 24px/1.2 "Inter",sans-serif;color:var(--ink)}
.cg p .ic{font-size:26px;color:var(--teal)}
.cg-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cg-s{display:grid;place-items:center;height:44px;border-radius:10px;background:rgba(var(--cr),.1);color:var(--mute);font-size:24px}
.cg-s.on{background:rgba(43,179,163,.22);color:#8ADBD0}
.cg-vs{font:700 22px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.cg-m{grid-column:1/-1;margin:4px 0 0!important;font:500 22px/1.3 "Inter",sans-serif!important;color:var(--mute)!important}

/* before / after (variant f): two halves, the divider slides in from the right */
.ba{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;border-radius:16px;overflow:hidden;background:rgba(var(--cr),.05);box-shadow:inset 0 0 0 1px rgba(var(--cr),.14)}
.ba-h{position:relative;padding:20px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ba-h.after{clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--e) .8s}
.bt.on .ba-h.after{clip-path:inset(0)}
.ba-l{align-self:flex-start;margin:0;padding:6px 14px;border-radius:999px;font:700 22px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;background:rgba(var(--cr),.12);color:var(--ink)}
.ba-h.after .ba-l{background:rgba(43,179,163,.24);color:#8ADBD0}
.ba-div{position:absolute;top:0;bottom:0;left:100%;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 18px rgba(255,255,255,.5);transition:left .9s var(--e) .8s}
.bt.on .ba-div{left:50%}
.ba-c{display:flex;align-items:center;gap:10px;margin:0;font:600 24px/1.25 "Inter",sans-serif;color:var(--ink)}
.ba-c .ic{font-size:28px;color:var(--teal)}
.shf{width:100%;height:auto}
.shf-bg{fill:rgba(var(--cr),.06);stroke:rgba(var(--cr),.2)}
.shf-pl{fill:rgba(var(--cr),.35)}
.shf-b{fill:#D7322A}
.shf-gap{fill:none;stroke:#F2A93B;stroke-width:2.5;stroke-dasharray:6 5}

/* bullwhip waves */
.wv{width:100%;height:auto;overflow:visible}
.wv-l{fill:var(--ink);font:600 25px "Inter",sans-serif}
.wv-0{stroke:rgba(var(--cr),.18);stroke-width:1.5}
.wv-p{fill:none;stroke:#F2A93B;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--e) var(--d,0ms)}
.bt.on .wv-p{stroke-dashoffset:0}
.wv-n{fill:var(--mute);font:500 22px "Inter",sans-serif}

/* conflicts -> axes -> fixes */
.axf{display:flex;flex-direction:column;gap:22px;width:100%}
.axr{display:grid;grid-template-columns:380px 40px 1fr 40px auto;align-items:center}
.axa{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;align-items:center;padding:14px 20px;border-radius:14px;background:rgba(242,169,59,.12);box-shadow:inset 0 0 0 2px rgba(242,169,59,.6)}
.axa .ic{grid-row:span 2;font-size:40px;color:var(--amber)}
.axa.dn .ic{transform:rotate(90deg)}
.axa b{font:800 34px/1 "Inter",sans-serif;color:var(--ink)}
.axa em{font:500 22px/1.25 "Inter",sans-serif;font-style:normal;color:var(--soft);white-space:nowrap}
.axl{height:4px;background:linear-gradient(90deg,var(--amber),rgba(var(--cr),.4))}
.axl.kn{background:linear-gradient(90deg,rgba(var(--cr),.4),var(--teal))}
.axt{display:flex;flex-direction:column;gap:8px;padding:0 16px}
.axt b{font:700 30px/1.15 "Inter",sans-serif;color:var(--ink)}
.axt em{display:flex;gap:6px;font-style:normal}
.axt .codeh{font-style:normal}
.codek.big{padding:14px 18px;font-size:30px;border-radius:10px}

/* penalties as stairs, the reward loop */
.str{position:relative;display:flex;align-items:flex-end;gap:14px;width:100%;height:330px}
.st-s{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:20px;border-radius:14px 14px 0 0;background:linear-gradient(180deg,rgba(43,179,163,.3),rgba(43,179,163,.08));box-shadow:inset 0 2px 0 var(--teal)}
.st-s.s0{height:150px}.st-s.s1{height:220px}.st-s.s2{height:290px}
.st-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(43,179,163,.25);color:#8ADBD0;font-size:30px}
.st-s b{font:700 24px/1 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8ADBD0}
.st-s em{font:700 30px/1.15 "Inter",sans-serif;font-style:normal;color:var(--ink)}
.st-v{position:absolute;left:0;top:-6px;display:flex;align-items:center;gap:10px;margin:0;font:600 24px/1.2 "Inter",sans-serif;color:var(--soft)}
.st-v .ic{font-size:28px;color:var(--teal)}
.lp3{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.lp-s{display:flex;align-items:center;gap:10px;height:64px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--teal);font:600 26px/1 "Inter",sans-serif;color:var(--ink)}
.lp-s .ic{font-size:28px;color:#8ADBD0}
.lp-ar .ic{font-size:26px;color:var(--mute)}

/* SKU by channel: four tiles of rendered scenes */
.sku{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.skc{position:relative;height:184px;border-radius:14px;overflow:hidden;background:#111}
.sk-im{position:absolute;inset:0;background-size:240%;background-repeat:no-repeat}
.skc::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86) 0,rgba(0,0,0,.2) 62%,rgba(0,0,0,0))}
.sk-k,.sk-v{position:absolute;z-index:1;left:18px;margin:0;color:#fff}
.sk-k{bottom:56px;display:flex;align-items:center;gap:10px;font:600 22px/1 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.sk-k .ic{font-size:28px;color:#8ADBD0}
.sk-v{bottom:16px;font:700 30px/1.1 "Inter",sans-serif}

/* the scanner: a carton with its QR, the beam, the card it shows */
.scn{display:flex;align-items:center;gap:40px}
.crt{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;width:360px;padding:40px 30px 28px;border-radius:8px;background:linear-gradient(160deg,#c9a26b,#a97f47);box-shadow:inset 0 0 0 2px rgba(0,0,0,.1),0 30px 60px -20px rgba(0,0,0,.7);overflow:hidden}
.crt p{margin:0;font:700 22px/1 "Inter",sans-serif;color:#3a2a14;letter-spacing:.04em}
.qr{width:220px;height:220px;padding:14px;background:#fff;border-radius:6px;fill:#111}
.beam{position:absolute;left:0;right:0;top:40px;height:4px;background:#ff3b30;box-shadow:0 0 18px 4px rgba(255,59,48,.7);opacity:0}
.bt.on .beam{opacity:1;animation:beam 2.2s var(--e) .6s infinite alternate}
@keyframes beam{0%{transform:translateY(0)}100%{transform:translateY(240px)}}
.scd{position:relative;width:460px;padding:26px 28px;border-radius:16px;background:linear-gradient(180deg,#1b2029,#11141b);color:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.scd-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 22px/1 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8ADBD0}
.scd-h .ic{font-size:28px}
.scd-r{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.1)}
.scd-r span{display:flex;align-items:center;gap:10px;font:500 22px/1.2 "Inter",sans-serif;color:#aeb8c7}
.scd-r span .ic{font-size:24px;color:#8ADBD0}
.scd-r b{font:700 25px/1.2 "Geist","Inter",sans-serif;color:#fff}
.scd-ok{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:8px 14px;border-radius:999px;background:rgba(43,179,163,.2);font:700 22px/1 "Inter",sans-serif;color:#8ADBD0}

/* the six H points on the city (beat 27): pins in amber with their code */
.pin.hp .pt{background:rgba(26,18,6,.82);box-shadow:inset 0 0 0 2px var(--amber)}
.pin.hp .pk{font-size:26px;color:#FFE2B3}
.pin.hp .pk b{padding:3px 9px;border-radius:6px;background:var(--amber);color:#1a1206;font:800 22px/1.1 "Inter",sans-serif}
.pin.hp::after{background:var(--amber);box-shadow:0 0 0 6px rgba(242,169,59,.3);animation:hpulse 1.6s var(--e) infinite}
@keyframes hpulse{0%,100%{box-shadow:0 0 0 4px rgba(242,169,59,.35)}50%{box-shadow:0 0 0 12px rgba(242,169,59,0)}}
@media (prefers-reduced-motion:reduce){.pr-btn.press,.beam,.mp-ring2,.mp-mv,.mp-pt.amb .mp-halo,.pin.hp::after{animation:none!important}}

/* channel lengths as chains (beat 18) */
.lvl{display:flex;flex-direction:column;gap:16px;width:100%}
.lv-r{display:grid;grid-template-columns:170px 1fr 120px;align-items:center;gap:18px}
.lv-r b{font:600 28px/1 "Inter",sans-serif;color:var(--ink)}
.lv-r em{font:400 32px/1 "Geist","Inter",sans-serif;font-style:normal;color:var(--ink);text-align:right}
.lv-c{display:flex;align-items:center;gap:0;height:46px;background:linear-gradient(var(--chili),var(--chili)) 0 50%/100% 3px no-repeat}
.lv-e{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgb(var(--pane));box-shadow:inset 0 0 0 2.5px var(--chili);color:var(--ink);font-size:24px;font-style:normal}
.lv-d{flex:none;width:26px;height:26px;margin:0 auto;border-radius:50%;background:var(--chili);box-shadow:0 0 0 5px rgb(var(--pane))}
.lv-d.opt{background:rgb(var(--pane));box-shadow:0 0 0 5px rgb(var(--pane)),inset 0 0 0 2.5px var(--chili)}
.lv-c .lv-e:last-child{margin-left:auto}
.lv-c .lv-e:first-child+.lv-e{margin-left:auto}
.lv-m{margin:6px 0 0;font:500 23px/1.35 "Inter",sans-serif;color:var(--soft)}
/* H1 fallback: one shelf, two prices */
.s28w{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:var(--pzbg)}
.s28{position:relative;display:flex;align-items:flex-start;justify-content:center;padding:296px 0 0}
.s28 .shf{width:460px}
.s28.b .shf-b{fill:#D7322A}
.s28-tag{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 26px;border-radius:14px;background:#F4F1EA;color:#1B2333;font:700 26px/1.2 "Inter",sans-serif;white-space:nowrap;box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
.s28-tag b{font:800 22px/1 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#b4412f}
.s28.b .s28-tag{background:#FFE7E2}
.s28w .s28.b{clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--e) .6s}
.bt.on .s28w .s28.b{clip-path:inset(0)}
.s28-d{transition:left .9s var(--e) .6s}
/* H4 fallback: the stacks */
.stk{width:860px;height:auto}
.stk-b{fill:#b98a52;stroke:#7a5530;stroke-width:2}
.stk-l{fill:var(--ink);font:600 28px "Inter",sans-serif}
.ill-c.col{flex-direction:column;gap:28px;padding:150px 40px 120px 96px;box-sizing:border-box}
.pz-truck{position:absolute;left:40px;bottom:40px;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:rgba(43,179,163,.2);box-shadow:inset 0 0 0 2px var(--teal);font:600 22px/1 "Inter",sans-serif;color:var(--ink)}
.pz-truck .ic{font-size:30px;color:var(--teal2)}
/* KN3: two maps, then the band */
.f42{position:absolute;left:96px;right:96px;top:300px;height:400px;display:grid;grid-template-columns:1fr 1fr;border-radius:16px;overflow:hidden}
.f42-m{position:relative;overflow:hidden}
.f42-m .mpw{position:absolute;inset:0}
.f42-m .ill-tag{display:none}
.f42-m.after{clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--e) .9s}
.bt.on .f42-m.after{clip-path:inset(0)}
.f42-l{position:absolute;left:18px;top:16px;z-index:2}
.f42-l.kn{background:rgba(43,179,163,.3)!important;color:#bff0e8!important}
.f42-d{transition:left .9s var(--e) .9s}
.f42-b{position:absolute;left:96px;right:96px;top:724px;display:grid;grid-template-columns:200px 1fr 1fr;gap:28px;align-items:start}
.f42-b .kc{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:16px 18px}
.f42-b .kc-v{margin:0}.f42-b .kc-l{grid-column:1/-1;margin-top:8px}
.f42-im{display:grid;place-items:center;height:200px;border-radius:14px;background:#2a2116 center/cover;color:#d9b88a;font-size:90px}
.f42-p p{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:600 25px/1.3 "Inter",sans-serif;color:var(--ink)}
.f42-p p .ic{font-size:30px;color:var(--teal)}
.f42-b .kpc{flex-direction:row}
.b-f42 .ill-tag{bottom:16px}