:root{--blue:#146ef5;--orange:#ff7a00;--navy:#070127;--ink:#485781;--line:#e3e8f0;--soft:#f4f7fd;--p-text:#303030;--p-sub:#616161}
*{box-sizing:border-box}body{margin:0;background:#f1f1f1;color:var(--p-text);font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1000px;margin:0 auto;padding:28px 20px 60px}.head h1{font-size:26px;margin:4px 0 14px;letter-spacing:-.01em}.eyebrow{margin:0;font-size:12px;font-weight:600;color:var(--p-sub);text-transform:uppercase;letter-spacing:.06em}
h2{font-size:16px;margin:26px 0 8px}.note{color:var(--p-sub);font-size:13px;margin:12px 0 0}.note code{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.transcript p{margin:0 0 8px}
.player{position:relative;background:#fff;border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.05);overflow:hidden}
.stage{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden;font-size:clamp(9px,1.35vw,14px)}
.stage>.scene{position:absolute;inset:0;opacity:0;transition:opacity .3s}.stage>.scene.on{opacity:1}
.overlay{position:absolute;inset:0 0 44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(7,1,39,.55);color:#fff;font-weight:600}.overlay.hidden{display:none}
.play-big{width:72px;height:72px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:26px;cursor:pointer}
.bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line);background:#fff}
.ctl{height:28px;min-width:28px;padding:0 10px;border:1px solid #d9d9d9;border-radius:6px;background:#fff;color:var(--p-text);font:inherit;font-weight:600;cursor:pointer}.ctl.rec{color:#8e1f0b}.mp4{position:relative}.mp4 summary{list-style:none;color:#00527c;display:inline-flex;align-items:center;height:28px}.mp4 summary::-webkit-details-marker{display:none}.mp4.on summary{background:#00527c;color:#fff;border-color:#00527c}
.bubble{position:absolute;right:0;bottom:calc(100% + 10px);width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(7,1,39,.4);padding:8px;z-index:5}
.bubble::after{content:"";position:absolute;right:22px;bottom:-7px;width:12px;height:12px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.bubble b{display:block;font-size:12px;color:var(--p-sub);text-transform:uppercase;letter-spacing:.05em;padding:4px 8px 6px}.bubble button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:8px;background:#fff;font:inherit;color:var(--p-text);cursor:pointer;text-align:left}.bubble button:hover{background:var(--soft)}
.bubble button span{min-width:34px;padding:3px 0;border-radius:999px;background:#e0f0ff;color:#00527c;font-weight:800;text-align:center;font-size:12px}.bubble button i{font-style:normal;font-size:13px}.bubble small{display:block;padding:6px 8px 2px;color:var(--p-sub);font-size:11px}.ctl.rec.on{background:#8e1f0b;color:#fff;border-color:#8e1f0b}
.progress{flex:1;height:8px;background:#e3e3e3;border-radius:4px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--blue);transition:width .25s linear}.time{min-width:38px;text-align:right;color:var(--p-sub);font-variant-numeric:tabular-nums}
/* record mode: exact 1920x1080, nothing else on screen */
body.record{background:#000}body.record .wrap{max-width:none;padding:0}body.record .head,body.record .note,body.record .transcript,body.record .bar{display:none}
body.record .player{border-radius:0;box-shadow:none}body.record .overlay{display:none}body.render .stage>.scene{transition:none}body.record .stage{width:1920px;height:1080px;aspect-ratio:auto;font-size:26px}

/* ── motion graphics ─────────────────────────────────────────────────── */
.b{opacity:0;transform:translateY(.8em);animation:rise .55s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) * var(--k,1)) both}@keyframes rise{to{opacity:1;transform:none}}
.w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1deg);animation:wrd .5s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) * var(--k,1)) both}@keyframes wrd{to{opacity:1;transform:none}}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4em;padding:3em 4em;text-align:center}
.slide.dark{background:radial-gradient(60% 80% at 70% 20%,#12246b 0%,var(--navy) 60%);color:#fff}.slide.light{background:linear-gradient(160deg,#eef3fe,#fff 60%);color:var(--navy)}.slide.blue{background:linear-gradient(150deg,#146ef5,#0b3fa8);color:#fff}
.k{font-size:3.4em;line-height:1.1;letter-spacing:-.02em;margin:0;max-width:16em;font-weight:800}.k em{font-style:normal;color:var(--orange)}.light .k em{color:var(--blue)}h2.k{font-size:2.4em}
.leave{display:flex;gap:1em;margin-top:.5em}.leave i{width:2.2em;height:2.2em;border-radius:50%;background:#fff;opacity:.9;animation:leave 1.2s ease-in calc(var(--d,0s) * var(--k,1)) both}.leave i:nth-child(2){animation-delay:calc(.2s * var(--k,1))}.leave i:nth-child(3){animation-delay:calc(.4s * var(--k,1))}@keyframes leave{to{transform:translateX(12em);opacity:0}}
.brand{display:flex;align-items:center;gap:.6em;font-weight:800;font-size:1.6em}.brand.big{font-size:2.4em}.mark{display:block;width:2em;height:2em}.mark svg{display:block;width:100%;height:100%}
.pt{width:48em;max-width:100%;background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:1em;overflow:hidden;box-shadow:0 2.4em 4em -2em rgba(7,1,39,.45);--head:#f6f7f9;--bg:#fff;--txt:var(--navy);--acc:var(--blue);--ln:var(--line);background:var(--bg);color:var(--txt);text-align:left}
.pt.solo{width:40em}.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;border-top:1px solid var(--ln)}.tr:first-child{border-top:0}.tr>*{padding:.8em 1em;font-style:normal;border-left:1px solid var(--ln);position:relative;font-size:1.05em}.tr>i{border-left:0;font-weight:700;background:var(--head)}.tr.th>*{background:var(--head);font-weight:800}
.pt.solo .tr{grid-template-columns:1.2fr 1fr 1fr}.pt.solo.vs .tr{grid-template-columns:1.25fr 1fr 1fr 1fr}.pt.solo.vs{width:46em}.pt.vs .tr>*{padding:.7em .8em}.pt.cycle .tr{grid-template-columns:1.2fr 1fr 1fr}
.tr em small{display:block;font-weight:600;color:var(--ink);font-size:.85em;margin-top:.15em}.you small{color:var(--acc)}
.pt.build .tr{opacity:0;animation:rise .5s calc(var(--d,0s) * var(--k,1)) both}.pt.build .tr.th{opacity:1;animation:none}.pt.build .tr.th em{opacity:0;animation:rise .5s calc(var(--d,0s) * var(--k,1)) both}
.pill{display:inline-block;padding:.15em .7em;border-radius:1em;font-size:.85em;font-weight:700}.pill.ok{background:#cdfee1;color:#0c5132}.pill.warn{background:#ffd6a4;color:#5e4200}
.cta{display:inline-block;white-space:nowrap;padding:.5em 1em;border-radius:2em;background:var(--acc);color:#fff;font-weight:800;text-decoration:none}.cta.xl{font-size:1.6em;padding:.6em 1.6em;background:var(--orange)}.ghost{display:inline-block;padding:.5em 1.1em;border-radius:2em;border:2px solid #cfd6e4;color:var(--ink);font-weight:800;text-decoration:none}
.pulse{animation:pulse 1.1s calc(var(--d,0s) * var(--k,1)) 2}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ok{color:var(--acc);font-weight:800}.x{color:#9aa4b2}
.flip s,.flip b{display:block;grid-area:1/1}.flip{display:grid}.flip s{text-decoration:none;animation:out .4s calc(var(--d,0s) * var(--k,1)) both}.flip b{opacity:0;color:var(--acc);animation:in .4s calc(var(--d,0s) * var(--k,1)) both}@keyframes out{to{opacity:0;transform:translateY(-.6em)}}@keyframes in{from{transform:translateY(.6em)}to{opacity:1;transform:none}}
.sync{display:inline-flex;align-items:center;gap:.6em;background:rgba(255,255,255,.14);padding:.5em 1em;border-radius:2em;font-weight:700}.dot{width:.7em;height:.7em;border-radius:50%;background:#7CFFB2;box-shadow:0 0 0 0 rgba(124,255,178,.7);animation:ping 1.4s infinite}@keyframes ping{to{box-shadow:0 0 0 .9em rgba(124,255,178,0)}}
.tint{animation:tint .5s calc(var(--d,0s) * var(--k,1)) both}@keyframes tint{to{background:#e8f1fe}}.best{box-shadow:inset 0 0 0 .2em var(--acc);border-radius:.5em;font-weight:800}.tint.best{animation:tint .5s calc(var(--d,0s) * var(--k,1)) both,bst .4s calc((var(--d,0s) + .5s) * var(--k,1)) both;box-shadow:none}@keyframes bst{to{box-shadow:inset 0 0 0 .2em var(--acc)}}
.tag{font-size:1.4em;font-weight:700;color:var(--ink);margin:0}.tag.big{font-size:2em;color:var(--blue)}
.duo{display:flex;align-items:center;gap:3em}.phone{width:12em;height:22em;border:.7em solid var(--navy);border-radius:2.2em;background:#fff;overflow:hidden;box-shadow:0 2em 4em -2em rgba(7,1,39,.5)}.scr{padding:.8em .6em;display:grid;gap:.6em}.card{border:1px solid var(--line);border-radius:.6em;overflow:hidden;font-size:.8em;text-align:left}.card b{display:block;background:#f6f7f9;padding:.4em .6em}.card span{display:flex;justify-content:space-between;padding:.35em .6em;border-top:1px solid var(--line);color:var(--ink)}.card i{font-style:normal;color:var(--navy);font-weight:700}
/* Every colour flips at the same instant (steps), so text never fades across a background of the same shade. */
.pt.cycle{animation:cyc 6s steps(1,end) calc(2.2s * var(--k,1)) forwards}@keyframes cyc{0%{--head:#f6f7f9;--bg:#fff;--txt:#070127;--acc:#146ef5;--ln:#e3e8f0;--htxt:#070127}25%{--head:#111;--bg:#fff;--txt:#070127;--acc:#146ef5;--ln:#d9dce3;--htxt:#fff}50%{--head:#1e293b;--bg:#0f172a;--txt:#e2e8f0;--acc:#38bdf8;--ln:#334155;--htxt:#f8fafc}75%{--head:#ede9fe;--bg:#f5f3ff;--txt:#1e1b4b;--acc:#7c3aed;--ln:#ffffff;--htxt:#2e1065}100%{--head:#fff;--bg:#fff;--txt:#070127;--acc:#146ef5;--ln:#e4e7ee;--htxt:#070127}}
/* Header cells and the label column share the head background, so both take the head text colour. */
.pt.cycle .tr.th>*,.pt.cycle .tr>i{color:var(--htxt,var(--txt))}
.chips{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}.chips span{padding:.4em 1em;border-radius:2em;border:2px solid var(--line);background:#fff;font-weight:700;opacity:0;animation:rise .4s calc(var(--d,0s) * var(--k,1)) both,chip 6s steps(1,end) calc(2.2s * var(--k,1)) forwards}
.chips span:nth-child(1){--on0:1}.chips span:nth-child(2){--on1:1}.chips span:nth-child(3){--on2:1}.chips span:nth-child(4){--on3:1}.chips span:nth-child(5){--on4:1}
@keyframes chip{0%{background:#fff;color:var(--navy);border-color:var(--line)}0.01%{background:var(--c0,#fff);color:var(--t0,var(--navy))}25%{background:var(--c1,#fff);color:var(--t1,var(--navy))}50%{background:var(--c2,#fff);color:var(--t2,var(--navy))}75%{background:var(--c3,#fff);color:var(--t3,var(--navy))}100%{background:var(--c4,#fff);color:var(--t4,var(--navy))}}
.chips span:nth-child(1){--c0:#070127;--t0:#fff}.chips span:nth-child(2){--c1:#070127;--t1:#fff}.chips span:nth-child(3){--c2:#070127;--t2:#fff}.chips span:nth-child(4){--c3:#070127;--t3:#fff}.chips span:nth-child(5){--c4:#070127;--t4:#fff}
.stats{flex-direction:row;flex-wrap:nowrap;gap:1.4em}.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:1.2em;padding:1.4em 1.2em;flex:1 1 0;min-width:0}.stat b{display:block;font-size:3.6em;line-height:1;letter-spacing:-.03em}.stat span{font-size:1.2em;font-weight:600;opacity:.9}
.end .k{font-size:3em}.url{font-size:1.4em;font-weight:700;opacity:.85;margin:0;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.stage *{animation-duration:.01s!important;animation-delay:0s!important}}