/* CHIN-SU full deck (44 beats) on top of slice.css (the approved slice's stage, fonts, figures, pins, motion curve).
   Owner's layout brief 01/11 "SỬA BỐ CỤC TOÀN BÀI": large type that reads from the back of a classroom, words and picture in their own
   zones, the line icons kept and made larger. Every beat is one of four variants (beats.js `v`, docs/full/layout.md):
     a  split: content zone left 46 % (880 px) on a near-solid charcoal panel, the 3D picture right 54 % (1040 px)
     b  split mirrored: content right, picture left (the subject sits left in the frame)
     c  large data: content and chart 60 % (1152 px), picture 40 %
     d  full frame: chapter openers, the product hero, the cover; large title on a scrim
   The picture is never rendered again for this: the whole video layer (#pic: clips, tails, stand-ins, safe stills, route lines) slides
   sideways so the subject sits in the middle of its zone (full.js shift()), and the anchors move with it. The panel's inner edge melts
   into the picture over 120 px. Type (1920 x 1080): title 72 / 800, eyebrow 23 uppercase .12em, figures 164 with units 60, labels under
   figures 25, supporting lines 34 with 34 px icons, channel chips 29 px text in 64 px chips with 31 px icons, source 19 / chips 17,
   pins 26 / 24. The journey map is a 112 px strip at the foot of the content zone (M enlarges it over the stage). */
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url(fonts/inter-vietnamese-800-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url(fonts/inter-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--hk:#FFE2B3;--amber:#F2A93B;--teal:#2BB3A3;--teal2:#8ADBD0;--cr:243,235,221;--pane:20,20,22;--ink:#fff;--soft:rgba(var(--cr),.86);--mute:rgba(var(--cr),.7);--rule:rgba(var(--cr),.2);--acc:var(--chili);
  --pzbg:radial-gradient(ellipse at 60% 40%,rgb(34,35,40),rgb(14,14,16));--fa:brightness(1);--fb:brightness(1)}
/* ───── one colour per chapter (brief 01/11 §1.5): warm charcoal, neutral with red lines, field paper, deep amber, cool teal, the kitchen ─────
   the words on the panel stay >= 4.5:1; pins, the chapter question and the overlays keep their light type on dark plates */
body{--soft:rgba(var(--cr),.86);--mute:rgba(var(--cr),.72);--rule:rgba(var(--cr),.2)}
body.th-mo{--pane:24,19,15;--pzbg:radial-gradient(ellipse at 60% 40%,rgb(44,35,28),rgb(16,12,10))}
body.th-c1{--pane:27,22,18;--pzbg:radial-gradient(ellipse at 60% 40%,rgb(46,38,31),rgb(17,14,11))}
body.th-c2a{--pane:20,20,22}
body.th-c2b{--hk:#8a4d00;--pane:242,235,221;--cr:30,26,21;--ink:#1C1915;--soft:rgba(30,26,21,.86);--mute:rgba(30,26,21,.72);--rule:rgba(30,26,21,.2);--acc:#B23A26;--teal:#13796d;--teal2:#0f6157;--amber:#9a5e08;
  --pzbg:radial-gradient(ellipse at 50% 40%,#e2d6bf,#c9b997)}
body.th-c2c{--pane:31,23,13;--acc:var(--amber);--pzbg:radial-gradient(ellipse at 60% 40%,rgb(52,38,20),rgb(18,13,7));--fa:sepia(.3) saturate(1.15) brightness(.92)}
body.th-c3{--pane:14,21,25;--acc:var(--teal);--pzbg:radial-gradient(ellipse at 60% 40%,rgb(24,38,44),rgb(9,13,16));--fa:saturate(.86) hue-rotate(-6deg) brightness(.95)}
body.th-kl{--pane:30,21,14;--pzbg:radial-gradient(ellipse at 60% 40%,rgb(50,36,24),rgb(18,12,8))}
body.gr-amber{--fa:sepia(.62) saturate(1.5) hue-rotate(-12deg) brightness(.74) contrast(1.06)}
body.gr-night{--fa:brightness(.42) saturate(.6) hue-rotate(185deg) sepia(.15)}
body.blur{--fb:blur(18px) brightness(.62)}
body.blur-soft{--fb:blur(3px) brightness(.8)}
#pic{filter:var(--fa) var(--fb);transition:filter .6s var(--e),opacity .5s var(--e)}
body.novid #pic{opacity:0}
.bt .eb i,.take .tl i{background:var(--acc)}
.pin,#qcard,.ov,.b-end,.bt.v-d:not(.b-d22){--ink:#fff;--cr:243,235,221;--soft:rgba(243,235,221,.86);--mute:rgba(243,235,221,.72);--rule:rgba(243,235,221,.2)}
/* the location chip by the HUD when the map strip is not shown */
#hud .loc{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;background:rgba(232,64,47,.16);box-shadow:inset 0 0 0 1.5px var(--chili);font:600 17px/1 "Inter",sans-serif;color:var(--ink)}
#hud .loc[hidden]{display:none}
#hud .loc .ic{font-size:20px;color:var(--chili)}
#hud .ch{color:var(--ink);text-shadow:none}
.v-d #hud .ch,body.v-d #hud .ch{text-shadow:0 1px 3px rgba(0,0,0,.7),0 1px 12px rgba(0,0,0,.6)}
body.v-e #panel .pl{opacity:1;width:1000px}
/* the ending: back at the table, thank you */
.b-end .scrim{position:absolute;left:0;top:0;width:1300px;height:1080px;background:linear-gradient(90deg,rgba(4,4,6,.8) 0,rgba(4,4,6,.6) 50%,rgba(4,4,6,0) 100%)}
.b-end .col{position:absolute;left:96px;top:360px;width:1000px}
.b-end .ttl{font-size:120px}
.b-end .sub{margin:28px 0 0;font:600 32px/1.3 "Inter",sans-serif;color:var(--soft)}
/* variant f, beat 37: before / after on the left half, the budget and the indicators on the right */
.bt.b-f37 .pz{left:0;width:960px}
.bt.b-f37 .pz .ill-c{padding:150px 48px 120px 96px;box-sizing:border-box}
.b-f37 .cz{left:1008px;width:816px}
body[data-lay="f37"] #panel .pr{opacity:1;width:1032px}
/* variant f, beat 42: two maps side by side (old routes | grouped routes), the band of packaging and figures under them */
.b-f42 .cz{left:96px;width:1728px}
.bt.b-f42 .pz{top:0;height:1080px}
/* beat 42 on P3: the maps come in over P3's end frame blurred and darkened (assemble.py), and the pack tile shows the bottle in its box */
.bt.b-f42 .pz::before{content:"";position:absolute;inset:0;background:url(clips/P3_pg.jpg) center/cover;opacity:0;transition:opacity .6s var(--e)}
.bt.b-f42.on .pz::before{opacity:1}
.f42-im:not(.hc){background-size:560px auto;background-position:-305px -90px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ───── the picture layer: every video, still and line that belongs to the 3D frame, moved as one ───── */
#pic{position:absolute;left:0;top:0;width:1920px;height:1080px;will-change:transform}
#bg,#beats{position:absolute;inset:0}
#beats{z-index:2}
.bgi{position:absolute;inset:0;width:1920px;height:1080px;object-fit:cover;opacity:0;transition:opacity .5s linear;pointer-events:none}
.bgi.on{opacity:1}
body.vidon #bg .bgi{opacity:0}

/* ───── the content panel: near-solid charcoal, a whisper of paper grain, its inner edge melting into the picture (120 px) ───── */
#panel{position:absolute;inset:0;z-index:1;pointer-events:none}
#panel i{position:absolute;top:0;height:1080px;opacity:0;transition:opacity .5s var(--e),width .6s var(--e)}
#panel .pl{left:0;width:1000px;background:linear-gradient(90deg,rgba(var(--pane),.97) calc(100% - 120px),rgba(var(--pane),0) 100%)}
#panel .pr{right:0;width:1000px;background:linear-gradient(270deg,rgba(var(--pane),.97) calc(100% - 120px),rgba(var(--pane),0) 100%)}
#panel i::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.12))}
#panel i::after{content:"";position:absolute;inset:0;opacity:.035;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#panel .pl::before,#panel .pl::after{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 120px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 120px),transparent)}
#panel .pr::before,#panel .pr::after{-webkit-mask:linear-gradient(270deg,#000 calc(100% - 120px),transparent);mask:linear-gradient(270deg,#000 calc(100% - 120px),transparent)}
body.v-a #panel .pl{opacity:1;width:1000px}
body.v-c #panel .pl{opacity:1;width:1272px}
body.v-b #panel .pr{opacity:1}

/* the animatic's stand-in tag (top right of the picture zone): this background is an existing frame until the new scene is rendered */
.tmp{position:absolute;z-index:3;right:44px;top:40px;margin:0;max-width:680px;padding:8px 16px;border-radius:999px;font:600 16px/1.3 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(var(--cr),.82);background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(var(--cr),.35);opacity:0;transition:opacity .4s var(--e)}
.tmp.on{opacity:1}
.tmp b{color:var(--cream);font-weight:700}
body.v-b .tmp{right:auto;left:44px}

/* ───── HUD: one line at the top of the content zone ───── */
#hud{z-index:3;top:72px;gap:20px;transition:opacity .45s var(--e),left .6s var(--e)}
#hud .ch{font-size:18px;letter-spacing:.14em;gap:12px}
#hud .ch .ic{font-size:22px}
#hud .dots{gap:8px}
#hud .dots li{width:8px;height:8px}
#hud .dots li.now{width:24px;border-radius:4px}
#hud .ctr{font:600 18px/1 "Geist","Inter",sans-serif;letter-spacing:.06em;color:var(--mute);font-variant-numeric:tabular-nums}
body.v-b #hud{left:1096px}

/* ───── the content zone: one column, top to bottom on an 8 px grid, 40 px between blocks ───── */
.cz{position:absolute;left:96px;top:128px;width:728px;display:flex;flex-direction:column;align-items:flex-start}
.v-c .cz{width:1000px}
.v-b .cz{left:1096px}
.cz>*{margin:0}
.cz>*+*{margin-top:40px}
.cz>.eb+.ttl{margin-top:20px}
.cz>.solves+.eb{margin-top:20px}
.bt .eb{gap:16px;font:600 23px/1 "Inter",sans-serif;letter-spacing:.12em;color:var(--soft)}
.bt .eb i{height:3px}
.bt .ttl{font:800 72px/1.04 "Inter",sans-serif;letter-spacing:-.022em;color:var(--ink);text-shadow:none}
/* a line's mask (the words rise into it) reaches .32em above the line box, .2em below and a little to the sides: Vietnamese stacked marks (ẫ ầ ổ, and on
   capitals Ố Ẩ Ở) rise above a 1.04 line box and the dot under ỵ/ộ sinks below it; the hidden line waits as far below (owner's note 02/11) */
.l{padding:.32em .14em .2em .08em;margin:-.32em -.14em -.2em -.08em}
.l>span{transform:translateY(calc(100% + .6em))}
.blk{width:100%}

/* figures: icon 40 + label, the number 164 (its empty line box trimmed), the unit 60 beside it, the period / scope 25 under it */
.cz .figs{margin:0}
.cz .fig{padding:22px 0}
.cz .fig:first-child{padding-top:0}
.cz .fig:last-child{padding-bottom:0}
.cz .fl{gap:14px;margin:0 0 8px;font:600 24px/1.2 "Inter",sans-serif;letter-spacing:.1em;color:var(--soft)}
.cz .fl .ic{font-size:40px}
.cz .n{font-size:160px;margin:-.13em 0 -.1em}
.cz .n u{margin-left:18px;font:500 60px/1 "Inter",sans-serif;letter-spacing:-.01em;color:var(--soft)}
.cz .fm{margin:10px 0 0;font:500 25px/1.3 "Inter",sans-serif;letter-spacing:0;text-transform:none;color:var(--soft)}
.cz .figs.f3 .n{font-size:150px}
.cz .figs.f3 .fig{padding:10px 0}
.cz .figs.f3 .fm{margin-top:8px}

/* source: chips 17, text 19, at the foot of the content zone */
.bt .src{left:96px;right:auto;width:728px;bottom:64px;gap:10px;font:500 19px/1.35 "Inter",sans-serif;color:rgba(var(--cr),.72);text-shadow:none}
.bt .chip{padding:4px 10px;font:600 17px/1.2 "Inter",sans-serif;letter-spacing:.08em;color:rgba(var(--cr),.8);box-shadow:inset 0 0 0 1px rgba(var(--cr),.34)}
.v-c .src{width:1000px}
.v-b .src{left:1096px}
.v-d .src{width:auto;right:96px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.bt.v-d:not(.b-d22) .src{right:auto;max-width:1600px;padding:8px 14px;border-radius:12px;background:rgba(10,10,12,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none}
.solves{display:flex;align-items:center;gap:10px;font:600 20px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--teal2)}
.solves span{padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(43,179,163,.75)}
.solves b{color:var(--amber);font-weight:700;letter-spacing:.06em}
.hc{color:var(--amber)}.knc{color:var(--teal2)}

/* appearing parts: one after another (--d) once the beat's words are on; icons grow .9 -> 1 with their line */
.ap{opacity:0;transform:translateY(12px);transition:opacity .4s var(--e) var(--d,0ms),transform .5s var(--e) var(--d,0ms)}
.bt.on .ap{opacity:1;transform:none}
.cz .ic{transform:scale(.9);opacity:0;transition:transform .3s var(--e) calc(var(--d,0ms) + var(--di,0ms)),opacity .3s var(--e) calc(var(--d,0ms) + var(--di,0ms))}
.bt.on .cz .ic{transform:none;opacity:1}

/* supporting lines: icon 34, key line 34, sub line 26 */
.its{margin:0;padding:0;list-style:none}
.its li{display:grid;grid-template-columns:44px 1fr;column-gap:20px;padding:18px 0;border-top:1px solid var(--rule)}
.its li:first-child{border-top:0;padding-top:0}
.its li:last-child{padding-bottom:0}
.its .ic{font-size:34px;margin-top:3px;color:var(--cream)}
.its .h .ic{color:var(--amber)}.its .kn .ic{color:var(--teal)}
.its .k{margin:0;font:600 34px/1.22 "Inter",sans-serif;color:var(--ink)}
.its .s{margin:6px 0 0;font:500 26px/1.3 "Inter",sans-serif;color:var(--soft)}
.its .m{margin:8px 0 0;font:500 24px/1.3 "Inter",sans-serif;color:var(--mute)}
.its .h .k{color:var(--hk)}

/* channel chains: 64 px chips, a 31 px icon each, arrows between, the level count in red */
.steps{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px}
.steps .st{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 24px 0 20px;box-sizing:border-box;border-radius:999px;font:600 29px/1 "Inter",sans-serif;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(var(--cr),.6);background:rgba(255,255,255,.04)}
.steps .st .ic{font-size:31px;color:var(--cream)}
.steps .st.opt{box-shadow:none;outline:2px dashed rgba(var(--cr),.5);outline-offset:-2px;color:var(--soft)}
.steps.kn .st{box-shadow:inset 0 0 0 2px var(--teal)}
.steps.kn .st .ic{color:var(--teal2)}
.steps .ar{display:inline-flex;font-size:26px;color:var(--mute)}
.steps .ar .ic{font-size:26px}
.steps .nt{margin-left:6px;font:700 24px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--chili)}
.steps.col{flex-direction:column;align-items:flex-start;gap:10px}
.steps.col .ar{transform:rotate(90deg);margin-left:20px}

/* bars: growth by channel (variant c), 40 px bars, labels 28, values 36; e-commerce runs off the scale with a break */
.bars{display:grid;grid-template-columns:170px 1fr 150px;align-items:center;gap:22px 22px}
.bars .bl{font:600 28px/1 "Inter",sans-serif;color:var(--ink)}
.bars .tr{position:relative;height:40px;border-radius:4px;background:rgba(var(--cr),.1);overflow:hidden}
.bars .fi{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--cream);transition:width .8s var(--e) var(--d,0ms)}
.bars .cut .fi{background:repeating-linear-gradient(90deg,var(--cream) 0 92%,transparent 92% 94%,var(--cream) 94%)}
.bt.on .bars .fi{width:var(--w)}
.bars .bv{font:400 38px/1 "Geist","Inter",sans-serif;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.bm{margin:22px 0 0;font:500 24px/1.35 "Inter",sans-serif;color:var(--soft)}

/* rows: a two-column table */
.rows{border-collapse:collapse;font:500 30px/1.25 "Inter",sans-serif;color:var(--soft)}
.rows th{padding:0 40px 12px 0;text-align:left;font:600 22px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.rows td{padding:8px 32px 8px 0;border-top:1px solid var(--rule)}
.rows td:first-child{font-weight:600;color:var(--ink);min-width:150px}
.rows td:last-child{font:400 32px/1.2 "Geist","Inter",sans-serif;color:var(--ink)}
.rows.tx td:last-child{font:500 30px/1.25 "Inter",sans-serif}

/* six flows: forward (cream), backward (teal), both ways (red) */
.flows{display:grid;grid-template-columns:260px 1fr;gap:14px 20px;align-items:center;width:100%}
.flows .hd{grid-column:1/-1;display:flex;justify-content:space-between;margin-left:280px;font:600 22px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.flows .fk{font:600 30px/1.2 "Inter",sans-serif;color:var(--ink)}
.flows>svg{width:100%;height:24px;overflow:visible}
.flows path{fill:none;stroke:var(--cream);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--e) var(--d,0ms)}
.flows .n path{stroke:var(--teal2)}.flows .b2 path{stroke:var(--chili)}
.bt.on .flows path{stroke-dashoffset:0}

/* before -> after pairs (Retail Supreme, variant c) */
.pairs .pr{display:grid;grid-template-columns:400px 1fr;align-items:center;padding:16px 0;border-top:1px solid var(--rule)}
.pairs .pr:first-child{border-top:0;padding-top:0}
.pairs .pl{font:600 26px/1.25 "Inter",sans-serif;color:var(--soft)}
.pairs .pv{display:flex;align-items:center;gap:22px}
.pairs .pa{font:300 46px/1 "Geist","Inter",sans-serif;color:var(--mute);font-variant-numeric:tabular-nums}
.pairs .pv .ic{font-size:34px;color:var(--chili)}
.cz .pairs .n{font-size:88px;margin:-.12em 0 -.1em}

/* news cards, stamp, formula, tags */
.news{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.news .nc{padding:18px 20px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--rule)}
.news .nd{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 20px/1 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.news .nd .ic{font-size:24px}
.news .ns{margin:0;font:600 27px/1.28 "Inter",sans-serif;color:var(--ink)}
.stamp{display:inline-block;padding:10px 18px;border:2.5px solid rgba(var(--cr),.85);border-radius:8px;font:700 24px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);transform:rotate(-2deg) scale(.96);opacity:0;transition:opacity .4s var(--e) var(--d,0ms),transform .5s var(--e) var(--d,0ms)}
.bt.on .stamp{opacity:1;transform:rotate(-2deg)}
.formula{display:inline-block;padding:16px 22px;border-left:4px solid var(--chili);background:rgba(255,255,255,.06);font:400 31px/1.3 "Geist","Inter",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:12px}
.tags span{padding:12px 20px;border-radius:10px;font:600 28px/1.2 "Inter",sans-serif;color:var(--ink);box-shadow:inset 0 0 0 2px var(--teal);background:rgba(43,179,163,.12)}

/* KPI rows, phases */
.kpi .kr{display:grid;grid-template-columns:270px 1fr;column-gap:24px;align-items:baseline;padding:12px 0;border-top:1px solid var(--rule)}
.kpi .kr:first-child{border-top:0;padding-top:0}
.kpi .kk{font:500 27px/1.3 "Inter",sans-serif;color:var(--soft)}
.kpi .ks{font:600 32px/1.22 "Inter",sans-serif;color:var(--teal2)}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.phases .ph{padding-top:16px;border-top:4px solid var(--teal)}
.phases .pw{margin:0;font:500 25px/1 "Geist","Inter",sans-serif;color:var(--teal2);font-variant-numeric:tabular-nums}
.phases .pk{display:block;margin:12px 0 6px;font:700 34px/1.2 "Inter",sans-serif;color:var(--ink);text-align:left}
.phases .ps{margin:0;font:500 26px/1.3 "Inter",sans-serif;color:var(--soft)}

/* bullwhip stack (an illustration, no figures) */
.stack{display:flex;align-items:flex-end;gap:30px;height:250px}
.stack .sc{display:flex;flex-direction:column;align-items:center;gap:12px}
.stack .sb{width:110px;height:0;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--amber),rgba(242,169,59,.35));transition:height .8s var(--e) var(--d,0ms)}
.bt.on .stack .sb{height:var(--h)}
.stack .sl{font:600 25px/1.2 "Inter",sans-serif;color:var(--soft)}

/* conflicts, axes, the H list, the matrix (variant c) */
.conf{display:flex;gap:14px}
.conf span{padding:12px 22px;border-radius:999px;font:600 28px/1.2 "Inter",sans-serif;color:#FFE2B3;box-shadow:inset 0 0 0 2px var(--amber)}
.axes .ax{display:grid;grid-template-columns:420px 1fr;align-items:center;padding:18px 0;border-top:1px solid var(--rule)}
.axes .ax:first-child{border-top:0;padding-top:0}
.axes .ak{font:600 34px/1.2 "Inter",sans-serif;color:var(--ink)}
.axes .av{display:flex;align-items:center;gap:10px}
.codeh,.codek{padding:6px 12px;border-radius:7px;font:700 24px/1.1 "Inter",sans-serif;letter-spacing:.03em}
.codeh{color:#1a1206;background:var(--amber)}
.codek{color:#04201c;background:var(--teal)}
.axes .ic{font-size:28px;color:var(--mute)}
.hlist li{grid-template-columns:76px 1fr;align-items:center;padding:13px 0}
.hlist .codeh{justify-self:start}
.hlist .k{font-size:32px}
.mx{border-collapse:separate;border-spacing:0;font:600 28px/1.2 "Inter",sans-serif}
.mx th{padding:0 34px 14px;text-align:center;font-size:26px}
.mx th:first-child{text-align:left;padding-left:0}
.mx td{padding:8px 34px;border-top:1px solid var(--rule);text-align:center;color:var(--soft)}
.mx td:first-child{text-align:left;padding-left:0;white-space:nowrap}
.mx td:first-child span{margin-left:14px;color:var(--ink)}
.mx .dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(43,179,163,.22);transform:scale(0);transition:transform .45s var(--e) var(--d,0ms)}
.bt.on .mx .dot{transform:none}
.mx .no{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(var(--cr),.22)}

/* roadmap: 12 months, three rows of teal segments (labels and months 24 px, segments 44 px); budget donut beside its legend */
.gantt{position:relative;width:100%}
.gantt .gh{display:grid;grid-template-columns:96px repeat(12,1fr);font:600 24px/1 "Geist","Inter",sans-serif;color:var(--mute);margin-bottom:12px}
.gantt .gr{position:relative;display:grid;grid-template-columns:96px 1fr;align-items:center;height:56px;border-top:1px solid var(--rule)}
.gantt .gk{font:700 26px/1 "Inter",sans-serif;color:var(--teal2)}
.gantt .gt{position:relative;height:44px}
.gantt .sg{position:absolute;top:0;height:44px;display:flex;align-items:center;padding:0 12px;box-sizing:border-box;border-radius:7px;background:rgba(43,179,163,.24);box-shadow:inset 0 0 0 2px var(--teal);font:600 24px/1 "Inter",sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--e) var(--d,0ms)}
.bt.on .gantt .sg{transform:none}
.donut{display:flex;align-items:center;gap:44px}
.donut svg{width:184px;height:184px;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:36}
.donut .arc{stroke-dasharray:0 1000;transition:stroke-dasharray .9s var(--e) var(--d,0ms)}
.donut .ct{position:absolute;text-align:center}
.donut .dw{position:relative;display:grid;place-items:center}
.donut .dt{font:400 50px/1 "Geist","Inter",sans-serif;letter-spacing:-.03em;color:var(--ink)}
.donut .du{display:block;margin-top:6px;font:500 20px/1 "Inter",sans-serif;color:var(--soft)}
.donut ul{margin:0;padding:0;list-style:none;font:600 28px/1.6 "Inter",sans-serif;color:var(--soft)}
.donut li i{display:inline-block;width:16px;height:16px;margin-right:12px;border-radius:4px}
.donut li b{color:var(--ink);font-weight:700}
.donut li{white-space:nowrap}

/* hypotheses and survey sites: a value still in [brackets] shows as "Đang chờ" */
.gts .gr{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--rule)}
.gts .gr:first-child{border-top:0;padding-top:0}
.gts .gc{font:700 26px/1 "Inter",sans-serif;color:var(--amber)}
.gts .gs{font:600 30px/1.25 "Inter",sans-serif;color:var(--ink)}
.pend{padding:7px 13px;border-radius:999px;font:600 20px/1 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);outline:2px dashed rgba(var(--cr),.4);outline-offset:-2px;white-space:nowrap}
.vd{padding:7px 13px;border-radius:999px;font:700 20px/1 "Inter",sans-serif;color:#04201c;background:var(--teal2)}
.site .sh{margin:0 0 10px;font:600 24px/1.3 "Inter",sans-serif;color:var(--mute)}
.site .sr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:15px 0;border-top:1px solid var(--rule)}
.site .sr:first-of-type{border-top:0;padding-top:0}
.site .sk{font:500 30px/1.25 "Inter",sans-serif;color:var(--ink)}
.site .sv{font:600 28px/1.3 "Inter",sans-serif;color:var(--ink);text-align:right}

/* three screens (H6), one per row in the content zone */
.screens{display:flex;flex-direction:column}
.screens .sc{display:grid;grid-template-columns:44px 1fr auto;align-items:center;column-gap:20px;padding:16px 0;border-top:1px solid var(--rule)}
.screens .sc:first-child{border-top:0;padding-top:0}
.screens .ic{font-size:34px;color:var(--cream)}
.screens .k{margin:0;font:600 32px/1.2 "Inter",sans-serif;color:var(--ink)}
.screens .s{margin:0;font:600 30px/1.2 "Inter",sans-serif;color:#FFE2B3}

/* "Điều rút ra": the chapter's last beat, the content zone's last block */
.take{display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--e) 1.2s,transform .6s var(--e) 1.2s}
.bt.on .take{opacity:1;transform:none}
.take .tl{display:flex;align-items:center;gap:14px;font:600 22px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.take .tl i{display:block;width:40px;height:3px;background:var(--chili)}
.take .tt{margin:0;font:700 36px/1.22 "Inter",sans-serif;letter-spacing:-.01em;color:var(--ink)}

/* pins on the picture: 26 / 24 px on a dark plate */
.pin .pt{padding:10px 16px 11px;border-radius:12px;background:rgba(6,7,9,.66)}
.pk{font-size:26px;gap:12px}
.pk .ic{font-size:28px}
.pc{margin-top:6px;font-size:24px}
.ics{font-size:30px}
.pin.bl .pt{bottom:auto;top:46px;transform-origin:50% 0}
.pin.bl::before{bottom:auto;top:8px;transform-origin:50% 0;background:linear-gradient(180deg,rgba(var(--cr),.8),rgba(var(--cr),.2))}

/* ───── variant d: full frame, large type on a scrim ───── */
.v-d .ttl{font-size:84px;line-height:1.05}
.b-n1 .kick{left:96px;bottom:96px;font:600 30px/1.2 "Inter",sans-serif;letter-spacing:.14em}
.b-n2 .scrim{position:absolute;left:0;top:0;width:1300px;height:1080px;background:linear-gradient(90deg,rgba(4,4,6,.86) 0,rgba(4,4,6,.78) 52%,rgba(4,4,6,.3) 80%,rgba(4,4,6,0) 100%)}
.b-n2 .col{left:96px;top:196px;width:1000px}
.b-n2 .ttl{font-size:84px;line-height:1.04;letter-spacing:-.015em}
.b-n2 .ttl .pre>span,.b-n2 .ttl .post>span{font:600 28px/1.3 "Inter",sans-serif;letter-spacing:.05em;color:var(--soft)}
.b-n2 .ttl .pre{margin-bottom:22px}.b-n2 .ttl .post{margin-top:22px}
.b-n2 .sub{gap:14px;margin-top:48px;font:600 32px/1.3 "Inter",sans-serif}
.b-n2 .sub .ic{font-size:34px}
.b-n3 .scrim.sb{height:620px;background:linear-gradient(0deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 100%)}
.b-n3 .q{bottom:150px;font-size:84px}
.b-n6 .scrim.st{height:420px;background:linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.35) 56%,rgba(0,0,0,0) 100%)}
.b-n6 .ttl{top:140px;font-size:84px}
.b-n6 .scrim.sf{position:absolute;left:0;bottom:0;width:1920px;height:360px;background:linear-gradient(0deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%)}
.v-d .take{position:absolute;left:96px;bottom:136px;max-width:1500px;flex-direction:row;align-items:baseline;gap:24px}
.v-d .take .tt{font-size:40px;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.b-n6 .take{left:0;right:0;max-width:none;justify-content:center}
.b-d9 .scrim{position:absolute;left:0;top:0;width:1500px;height:520px;background:radial-gradient(ellipse 100% 100% at 0 0,rgba(4,4,6,.86) 0,rgba(4,4,6,.66) 44%,rgba(4,4,6,0) 100%)}
.b-d9 .col{position:absolute;left:96px;top:136px;width:1200px}
.b-d9 .eb{margin-bottom:24px}
/* beat 28 (owner 02/11: the props must read): the grocery's handwritten card under the hero (left half, ~390-655 x 840-1020) stays
   clear: the figures, the consequence and the source sit in the right half's foot, and only that foot is darkened */
.L-split .scrim{left:0;top:0;width:1920px;height:1080px;background:linear-gradient(180deg,rgba(4,4,6,0) 62%,rgba(4,4,6,.72) 86%,rgba(4,4,6,.78) 100%) 100% 0/50% 100% no-repeat,linear-gradient(180deg,rgba(4,4,6,.82) 0,rgba(4,4,6,.4) 32%,rgba(4,4,6,.28) 62%,rgba(4,4,6,.3) 100%)}
.L-split .eb{position:absolute;left:0;right:0;top:136px;justify-content:center}
.L-split .ttl{position:absolute;left:0;right:0;top:184px;text-align:center}
.L-split .rest{position:absolute;left:1056px;right:96px;bottom:160px;display:flex;justify-content:flex-start}
.L-split .rest .blk{width:auto}
.L-split .rest .its{display:grid;grid-template-columns:1fr;row-gap:14px;width:auto}
.L-split .src{left:1056px}
.L-split .half.b{top:560px}   /* between the two price strips: both 17.600 đ tags stay in sight */
.L-split .rest .its li{padding:0;border-top:0}
.half{position:absolute;top:652px;width:960px;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:16px;text-align:center}
.half.a{left:0}.half.b{left:960px}
.half .ic{grid-row:1;font-size:44px;color:var(--cream)}
.half .k{grid-row:1;margin:0;font:800 50px/1.12 "Inter",sans-serif;color:var(--ink);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.half .s{grid-column:1/-1;margin:8px 0 0;font:600 30px/1.25 "Inter",sans-serif;color:var(--soft);text-shadow:0 1px 12px rgba(0,0,0,.7)}
.half.b .s{color:#FFE2B3}
.divider{position:absolute;left:959px;top:300px;width:2px;height:520px;background:linear-gradient(180deg,transparent,rgba(var(--cr),.7),transparent);transform:scaleY(0);transition:transform .6s var(--e)}
.bt.on .divider{transform:none}
.L-split .rest .its .k{text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* chapter question: large type over the transition, then the content */
#qcard{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,.66),rgba(0,0,0,.88));opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility 0s .5s;pointer-events:none}
#qcard.on{opacity:1;visibility:visible;transition:opacity .45s var(--e),visibility 0s}
#qcard .qk{display:flex;align-items:center;gap:14px;margin:0;font:600 24px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
#qcard .qk .ic{font-size:30px;color:var(--chili)}
#qcard .qq{margin:0;max-width:1560px;text-align:center;font:800 84px/1.1 "Inter",sans-serif;letter-spacing:-.02em;color:var(--ink)}
#qcard .qq .l>span{transform:translateY(calc(100% + .6em));transition:transform .6s var(--e)}
#qcard.on .qq .l>span{transform:none}

/* ───── the journey map: a 112 px strip at the foot of the content zone; M enlarges it over the stage ───── */
#mapbd{position:absolute;inset:0;z-index:4;background:rgba(6,7,9,.86);opacity:0;visibility:hidden;transition:opacity .4s var(--e),visibility 0s .4s;pointer-events:none}
#mapbd.on{opacity:1;visibility:visible;transition:opacity .4s var(--e),visibility 0s}
.map{position:absolute;z-index:3;left:96px;top:862px;width:728px;height:112px;transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;
  transition:left .6s var(--e),top .6s var(--e),transform .6s var(--e),opacity .4s var(--e),visibility 0s .4s}
.map.on{opacity:1;visibility:visible;transition:left .6s var(--e),top .6s var(--e),transform .6s var(--e),opacity .4s var(--e),visibility 0s}
body.v-b .map{left:1096px}
.map.big{z-index:5;left:122px;top:411px;transform:scale(2.3)}
.map svg{display:block;width:728px;height:112px;overflow:visible}
.map .ln{fill:none;stroke:rgba(var(--cr),.18);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s var(--e) var(--d,0ms)}
.map .ln.lit{stroke:rgba(var(--cr),.85)}
.map .nd .c{fill:#1b1c20;stroke:rgba(var(--cr),.7);stroke-width:2;transition:fill .4s var(--e),stroke .4s var(--e)}
.map .nd use{color:rgba(var(--cr),.9);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.map .nd text{fill:rgba(var(--cr),.86);font:600 19px "Inter",sans-serif;text-anchor:middle}
.map .nd .gl{fill:var(--chili);opacity:0}
.map .nd.on .c{fill:var(--chili);stroke:#fff}
.map .nd.on use{color:var(--ink)}
.map .nd.on text{fill:#fff}
.map .nd.on .gl{animation:glow 1.8s var(--e) infinite}
@keyframes glow{0%{opacity:.5;r:16}100%{opacity:0;r:28}}
.map .hd,.map .kd{opacity:0;transition:opacity .4s var(--e)}
.map .hd.on,.map .kd.on{opacity:1}
.map .hd rect{fill:var(--amber)}
.map .hd text{fill:#1a1206;font:700 14px "Inter",sans-serif;text-anchor:middle}
.map .hd.hot rect{animation:hot 1.4s var(--e) infinite}
@keyframes hot{0%,100%{opacity:1}50%{opacity:.45}}
.map .kd rect{fill:var(--teal)}
.map .kd text{fill:#04201c;font:700 14px "Inter",sans-serif;text-anchor:middle}
.map .kd.hot rect{fill:var(--teal2)}
.map .mt{position:absolute;left:0;top:-30px;display:none;gap:22px;margin:0;font:600 11px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.map.big .mt{display:flex}
.map .mt i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;vertical-align:0}

/* the five channel lines over the aerial clips (inside #pic): cream, the one being discussed red */
#routes{position:absolute;inset:0;width:1920px;height:1080px;pointer-events:none;opacity:0;transition:opacity .4s var(--e)}
#routes.on{opacity:1}
#routes .rt{opacity:0;transition:opacity .4s var(--e) var(--d,0ms)}
#routes .rt.on{opacity:1}
#routes path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
#routes .rt.on path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--e) var(--d,0ms)}
#routes .sh{stroke:rgba(0,0,0,.55);stroke-width:9}
#routes .ln{stroke:var(--cream);stroke-width:4.5}
#routes .hd{fill:var(--cream);stroke:rgba(0,0,0,.6);stroke-width:3}
#routes .rt.hot .ln{stroke:var(--chili);stroke-width:6}
#routes .rt.hot .hd{fill:var(--chili)}
#routes.dim .rt:not(.hot){opacity:.45}
#routes .rt-bd .ln{stroke:var(--amber);stroke-width:5}   /* H2's region boundary: a line on the map, no head */
#routes .rt-bd .hd{display:none}

/* overlays: Q&A (Q) and appendix (E) */
.ov{position:absolute;z-index:6;inset:0;overflow:auto;padding:72px 112px 60px;box-sizing:border-box;background:rgba(6,7,9,.96);cursor:default;pointer-events:auto}
.ov[hidden]{display:none}
.ov h2{margin:0 0 28px;font:700 44px/1.2 "Inter",sans-serif;color:var(--ink)}
.ov .x{position:absolute;right:56px;top:56px;font:600 18px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.qas{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.qas .qc{padding:20px 0;border-top:1px solid var(--rule)}
.qas .qq{margin:0 0 10px;font:600 28px/1.25 "Inter",sans-serif;color:var(--ink)}
.qas .qa{margin:0 0 12px;font:500 24px/1.4 "Inter",sans-serif;color:var(--soft)}
.tabs{display:flex;gap:12px;margin:0 0 28px}
.tabs button{font:600 20px/1 "Inter",sans-serif;padding:13px 18px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--soft);cursor:pointer}
.tabs button.on{background:var(--cream);color:#111}
.tp{display:none}.tp.on{display:block}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.thumbs button{position:relative;height:150px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#111 center/cover;color:var(--ink);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px var(--rule)}
.thumbs button span{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);font:600 16px/1.25 "Inter",sans-serif}
.thumbs button b{position:absolute;left:8px;top:8px;font:700 16px/1 "Geist","Inter",sans-serif;padding:4px 7px;border-radius:5px;background:rgba(0,0,0,.6)}
.refs{margin:0;padding-left:56px;columns:2;column-gap:48px;font:500 19px/1.45 "Inter",sans-serif;color:var(--soft)}
.refs li{break-inside:avoid;margin-bottom:8px;overflow-wrap:anywhere}
.plist{margin:0;padding-left:28px;font:500 24px/1.5 "Inter",sans-serif;color:var(--soft)}
.plist li{margin-bottom:6px}
.pl2{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.pl2 h3{margin:0 0 10px;font:600 24px/1.3 "Inter",sans-serif;color:var(--ink)}
.pl2 ol{margin:0;padding-left:22px;font:500 20px/1.45 "Inter",sans-serif;color:var(--soft)}
.apx-note{margin:20px 0 0;font:500 19px/1.4 "Inter",sans-serif;color:var(--mute)}
.tp .mx{font-size:26px}

/* presenter screen */
#pv .top{display:flex;align-items:baseline;gap:24px}
#pv .who{font:600 26px/1.2 "Inter",sans-serif;color:var(--cream)}
#pv .tot{margin-left:auto;font:600 24px/1 "Geist","Inter",sans-serif;color:var(--mute);font-variant-numeric:tabular-nums}
#pv .chl{display:flex;align-items:baseline;gap:20px;margin-top:14px;font:600 20px/1.2 "Inter",sans-serif;color:var(--soft)}
#pv .chl .clk{font:600 30px/1 "Geist","Inter",sans-serif;color:var(--teal2)}
#pv .chl .clk.over{color:var(--chili)}
#pv .now{font:500 27px/1.5 "Inter",sans-serif}

body.safe .map .nd.on .gl,body.safe .map .hd.hot rect{animation:none}
@media (prefers-reduced-motion:reduce){.ap,.cz .ic,.bars .fi,.flows path,.stamp,.stack .sb,.mx .dot,.gantt .sg,.donut .arc,.divider,.take,#qcard,.map,#mapbd,#panel i,#hud,.bgi,.tmp{transition:none!important}.map .nd.on .gl,.map .hd.hot rect{animation:none}}

/* flows carry their papers; a figure's bar; the matrix and the roadmap at full width */
.fdoc{display:inline-flex;align-items:center;gap:6px;margin-left:12px;padding:4px 10px;border-radius:6px;background:#F4F1EA;color:#1B2333;font:600 18px/1.2 "Inter",sans-serif;font-style:normal;vertical-align:4px}
.fdoc .ic{flex:none;width:18px;height:18px;font-size:18px;transform:none!important;opacity:1!important}
.flows{grid-template-columns:420px 1fr}
.flows .hd{margin-left:440px}
.fbar{position:relative;display:block;height:14px;margin-top:14px;border-radius:7px;background:rgba(var(--cr),.12);overflow:visible}
.fbar i{display:block;height:100%;width:0;border-radius:7px;background:var(--amber);transition:width .9s var(--e) calc(var(--d,0ms) + 600ms)}
.bt.on .fbar i{width:var(--w)}
.fbar em{position:absolute;right:0;top:22px;font:600 22px/1 "Inter",sans-serif;font-style:normal;color:var(--soft)}
.mx th .ic,.mx td:first-child .ic{font-size:28px;vertical-align:-6px;margin-right:10px;color:var(--teal2)}
.mx td:first-child .ic{color:var(--amber)}
.mx th b{display:block;margin-top:6px;font:800 28px/1 "Inter",sans-serif;color:var(--teal2)}
.mx th em{display:block;margin-top:6px;font:500 20px/1.2 "Inter",sans-serif;font-style:normal;color:var(--soft)}
.gantt .gq{position:relative;height:40px;margin-bottom:6px}
.gantt .gq span{position:absolute;top:0;translate:-100% 0;display:flex;align-items:center;gap:6px;white-space:nowrap;font:600 20px/1 "Inter",sans-serif;color:var(--teal2)}
.gantt .gq .ic{font-size:24px}
.donut .dn{margin:10px 0 0;font:600 24px/1.3 "Inter",sans-serif;color:var(--ink)}
.donut .dn+.dn{font-weight:500;color:var(--soft)}
/* beat 43: the roadmap across the frame over the night city; beat 44: the matrix across the frame */
.b-w43 .cz,.b-w44 .cz{left:96px;width:1728px}
.b-w43::before,.b-w44::before{content:"";position:absolute;inset:0;background:rgba(var(--pane),.8)}
.bt.b-w43::before{opacity:0;transition:opacity .6s var(--e)}.bt.b-w43.on::before{opacity:1}   /* A6 (the night city) flies in clear; the pane darkens with the words */
.b-w43 .cz{display:grid;grid-template-columns:1fr 660px;column-gap:60px;align-items:start}
.b-w43 .cz>*{grid-column:1/-1}
.b-w43 .cz>.blk:nth-of-type(2){grid-column:2;grid-row:4}
.b-w43 .cz>.take{grid-column:1;grid-row:4;align-self:center}
body[data-lay="w43"] #panel .pl,body[data-lay="w44"] #panel .pl{opacity:0}
.b-w43 .gantt .gr{height:64px}.b-w43 .gantt .gt,.b-w43 .gantt .sg{height:50px}
.b-w43 .donut svg{width:300px;height:300px}.b-w43 .donut .dt{font-size:72px}
.b-w43 .wrow{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.b-w44 .mx{font-size:32px}.b-w44 .mx td{padding:5px 60px}.b-w44 .mx th{padding:0 60px 16px}.b-w44 .mx .dot{width:34px;height:34px}
/* beat 22 (field paper) and 41 (the O2O map): the words on the left over the map, on a fading plate */
.b-d22 .cz,.b-d41 .cz{left:96px;width:700px}
.b-d22 .pz::after,.b-d41 .pz::after{content:"";position:absolute;inset:0 auto 0 0;width:1000px;background:linear-gradient(90deg,rgba(var(--pane),.94) 0,rgba(var(--pane),.86) 70%,rgba(var(--pane),0))}
.b-d22 .pz .ill-tag,.b-d41 .pz .ill-tag{z-index:3}
.b-d41{--ink:#fff;--cr:243,235,221;--soft:rgba(243,235,221,.86);--mute:rgba(243,235,221,.72);--rule:rgba(243,235,221,.2)}
.b-d41 .o2o-ph{position:absolute;right:120px;bottom:90px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);margin:0;padding:10px 18px;border-radius:8px;background:rgba(20,16,13,.92);font:600 16px/1.4 "Inter",sans-serif;color:#F3EBDD;z-index:6}   /* F refused by the frame */
#toast[hidden]{display:none}