/* Packs: Talking-head layouts (.tl-), Mascot poses (.mp-), Platform safe zones (.sz-), Accessibility (.ax-). Stage px. */

/* ================= Talking-head layouts ================= */
.tl-root{position:absolute;inset:0}
.tl-box{position:absolute;overflow:hidden}
.tl-scnwrap{background:var(--bg)}
.tl-scn{position:absolute;left:0;top:0}
.tl-cam{background:#DCE4F6}
.tl-cam.tl-rnd{border-radius:44px}
.tl-cam.tl-cir{border-radius:50%}
.tl-cam.tl-ring{box-shadow:0 0 0 8px #fff,var(--sh2);overflow:hidden}
.tl-in{opacity:0;animation:k-tl-in .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes k-tl-in{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}}
.tl-camin{position:absolute;inset:0;overflow:hidden}
.tl-lamp{position:absolute;right:10%;top:8%;width:34%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.38)}
.tl-shelf{position:absolute;left:8%;top:30%;width:28%;height:2.2%;min-height:6px;border-radius:6px;background:rgba(17,17,19,.08)}
.tl-pw{position:absolute;left:50%;bottom:0;height:88%;aspect-ratio:1;transform:translateX(-50%)}
.tl-pw.tl-left{left:30%}
.tl-pw.tl-tall{height:100%}
.tl-pw.tl-cutp{height:100%;filter:drop-shadow(8px 0 0 #fff) drop-shadow(-8px 0 0 #fff) drop-shadow(0 -8px 0 #fff)}
.tl-pw svg{width:100%;height:100%;display:block}
.tl-cut{overflow:visible}
.tl-cut .tl-camin{overflow:visible}
.tl-cut .tl-pw{animation:k-tl-cutin .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes k-tl-cutin{0%{opacity:0;transform:translateX(-50%) translateY(18%)}100%{opacity:1;transform:translateX(-50%)}}
.tl-head{transform-box:fill-box;transform-origin:50% 100%;animation:k-tl-head 3.2s ease-in-out infinite}
@keyframes k-tl-head{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-3px)}}
.tl-mouth{transform-box:fill-box;transform-origin:center;animation:k-tl-mouth .34s ease-in-out infinite alternate}
.tl-quiet .tl-mouth{animation:none;transform:scaleY(.45)}
.tl-quiet .tl-head{animation-duration:4.4s}
@keyframes k-tl-mouth{0%{transform:scaleY(.3)}100%{transform:scaleY(1.25)}}
.tl-rec{position:absolute;left:24px;top:22px;display:flex;align-items:center;gap:10px;background:rgba(17,17,19,.78);color:#fff;font:700 22px/1 'Inter Tight',sans-serif;padding:10px 16px;border-radius:999px;letter-spacing:.02em;text-transform:uppercase}
.tl-rec i{width:14px;height:14px;border-radius:50%;background:#EF3D6E;animation:k-tl-blink 1.2s steps(2,start) infinite}
@keyframes k-tl-blink{50%{opacity:.25}}

/* UI placeholder, sized in em from the box */
.tl-uibox{background:var(--bg)}
.tl-ui{position:absolute;inset:4%;background:#fff;border-radius:.9em;box-shadow:var(--sh2);display:flex;flex-direction:column;overflow:hidden;color:#111113}
.tl-ub{display:flex;align-items:center;gap:.35em;padding:.6em .8em;border-bottom:2px solid #EEEEEA;background:#FAFAF8;font-weight:700;font-size:.8em}
.tl-ub i{width:.55em;height:.55em;border-radius:50%;background:#DADAD5}
.tl-ub span{margin-left:.6em}
.tl-um{flex:1;display:flex;min-height:0}
.tl-side{width:18%;padding:.9em .6em;display:flex;flex-direction:column;gap:.6em;border-right:2px solid #F0F0EC}
.tl-side b{height:.5em;border-radius:.25em;background:#ECECE8}
.tl-side b:first-child{background:var(--ac);opacity:.8}
.tl-main{flex:1;display:flex;flex-direction:column;gap:.7em;padding:.9em;min-width:0}
.tl-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.tl-kpis div{background:#F6F6F3;border-radius:.5em;padding:.5em .6em;display:flex;flex-direction:column;gap:.1em;opacity:0;animation:aItem .6s cubic-bezier(.2,.8,.2,1) forwards}
.tl-kpis small{font-size:.55em;color:#8A8A85;font-weight:600}
.tl-kpis b{font-size:1em;letter-spacing:-.02em}
.tl-kpis em{font-style:normal;font-size:.5em;font-weight:700;color:#12A67A}
.tl-kpis div:last-child em{color:#12A67A}
.tl-bars{flex:1;display:flex;align-items:flex-end;gap:.35em;padding-top:.4em;min-height:0}
.tl-bars i{flex:1;border-radius:.25em .25em .1em .1em;background:color-mix(in srgb,var(--ac) 28%,#fff);transform-origin:50% 100%;transform:scaleY(0);animation:k-tl-grow .7s cubic-bezier(.2,.8,.2,1) forwards}
.tl-bars i.tl-hi{background:var(--ac)}
@keyframes k-tl-grow{to{transform:scaleY(1)}}

/* Lower third */
.tl-lt{position:absolute;display:flex;align-items:stretch;gap:0;z-index:5}
.tl-ltbar{width:16px;background:var(--ac);border-radius:8px 0 0 8px;transform:scaleY(0);animation:k-tl-bar .45s cubic-bezier(.2,.8,.2,1) .3s forwards}
@keyframes k-tl-bar{to{transform:scaleY(1)}}
.tl-ltp{background:#fff;color:#111113;padding:24px 40px 26px 30px;border-radius:0 22px 22px 0;display:flex;flex-direction:column;gap:6px;clip-path:inset(0 100% 0 0);animation:k-tl-wipe .6s cubic-bezier(.7,0,.2,1) .55s forwards;box-shadow:var(--sh2)}
@keyframes k-tl-wipe{to{clip-path:inset(0 0 0 0)}}
.tl-ltp b{font-size:50px;letter-spacing:-.02em;opacity:0;animation:aItem .5s cubic-bezier(.2,.8,.2,1) .95s forwards}
.tl-ltp span{font-size:32px;font-weight:600;color:#6B6B66;opacity:0;animation:aItem .5s cubic-bezier(.2,.8,.2,1) 1.1s forwards}
.stage.land .tl-ltp b{font-size:44px}.stage.land .tl-ltp span{font-size:28px}

/* Chips and tags */
.tl-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:12px;background:#111113;color:#fff;font:700 28px/1 'Inter Tight',sans-serif;padding:14px 22px;border-radius:999px;opacity:0;animation:aItem .5s cubic-bezier(.2,.8,.2,1) forwards;white-space:nowrap}
.tl-chip.tl-light{background:#fff;color:#3A3A36;font-weight:600;font-size:26px;box-shadow:var(--sh2)}
.tl-chip svg{width:28px;height:28px}
.tl-tag{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:14px;background:#fff;color:#111113;font:700 32px/1 'Inter Tight',sans-serif;padding:12px 22px 12px 12px;border-radius:999px;box-shadow:var(--sh2);opacity:0;animation:aItem .5s cubic-bezier(.2,.8,.2,1) forwards;white-space:nowrap}
.tl-tag em{font-style:normal;background:var(--ac);color:#fff;font-size:22px;text-transform:uppercase;letter-spacing:.04em;padding:9px 14px;border-radius:999px}
.stage.land .tl-tag{font-size:28px}

/* Caption box */
.tl-capw{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tl-spk{display:inline-flex;align-items:center;gap:10px;background:var(--ac);color:#fff;font:700 26px/1 'Inter Tight',sans-serif;padding:12px 18px;border-radius:14px;opacity:0;animation:aItem .45s cubic-bezier(.2,.8,.2,1) .25s forwards}
.tl-spk svg{width:26px;height:26px}
.tl-cap{background:rgba(17,17,19,.86);color:#fff;font:700 60px/1.25 'Inter Tight',sans-serif;letter-spacing:-.01em;padding:18px 28px 22px;border-radius:20px;width:100%;box-sizing:border-box;opacity:0;animation:aFade .3s ease .35s forwards}
.stage.land .tl-cap{font-size:48px}
.tl-cap span{opacity:.3;animation:k-tl-word .2s ease forwards}
@keyframes k-tl-word{to{opacity:1}}

/* Podcast */
.tl-wave{position:absolute;display:flex;align-items:center;gap:1.2%;z-index:3}
.tl-wave i{flex:1;border-radius:99px;background:var(--ac2);transform-origin:50% 50%;animation:k-tl-wave .8s ease-in-out infinite alternate}
.tl-wave i:nth-child(3n){background:#fff}
@keyframes k-tl-wave{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
.tl-ptitle{position:absolute;display:flex;flex-direction:column;gap:18px;color:#F2F4FF;opacity:0;animation:aItem .6s cubic-bezier(.2,.8,.2,1) .4s forwards}
.tl-ptitle small{display:flex;align-items:center;gap:12px;font-size:32px;font-weight:700;color:var(--ac2)}
.tl-ptitle small svg{width:34px;height:34px}
.tl-ptitle b{font-size:78px;line-height:1.05;letter-spacing:-.03em}
.stage.land .tl-ptitle b{font-size:72px}
.tl-prog{position:absolute;height:12px;border-radius:6px;background:rgba(255,255,255,.18);z-index:3}
.tl-prog i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:#fff;animation:k-tl-prog 6s linear forwards}
.tl-prog span{position:absolute;top:28px;font:600 26px/1 'JetBrains Mono',monospace;color:rgba(255,255,255,.6)}
.tl-prog span:last-of-type{right:0}
@keyframes k-tl-prog{0%{width:28%}100%{width:40%}}

/* Full-face hook to PiP */
.tl-shrink{position:absolute;left:0;top:0;width:var(--W);height:var(--H);z-index:4;animation:k-tl-shrink 3.2s cubic-bezier(.7,0,.2,1) forwards}
@keyframes k-tl-shrink{0%,50%{left:0;top:0;width:var(--W);height:var(--H);border-radius:0;box-shadow:none}75%,100%{left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:var(--r)}}
.tl-hook{position:absolute;z-index:6;display:flex;flex-direction:column;font:800 108px/1.02 'Inter Tight',sans-serif;letter-spacing:-.04em;color:#111113;animation:k-tl-hook 3.2s ease forwards}
.tl-hook span{background:#fff;align-self:flex-start;padding:4px 22px 10px;border-radius:18px;margin-bottom:10px}
.tl-hook b{color:var(--ac)}
@keyframes k-tl-hook{0%{opacity:0;transform:translateY(30px)}6%,47%{opacity:1;transform:none}57%,100%{opacity:0;transform:translateY(-20px)}}

/* Pop-out card */
.tl-card{position:absolute;z-index:5;background:#fff;color:#111113;border-radius:30px;padding:34px 38px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px;box-sizing:border-box;opacity:0;animation:aPop .7s cubic-bezier(.2,.8,.2,1) .8s forwards}
.tl-cr{display:flex;align-items:center;gap:14px;font-size:30px;font-weight:700;color:#6B6B66}
.tl-cr svg{width:34px;height:34px;color:var(--ac)}
.tl-card>b{font-size:110px;letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;gap:20px}
.tl-card>b em{font-style:normal;font-size:34px;color:#12A67A}
.tl-mini{display:flex;align-items:flex-end;gap:12px;height:90px}
.tl-mini i{flex:1;border-radius:8px;background:var(--ac);transform-origin:50% 100%;transform:scaleY(0);animation:k-tl-grow .6s cubic-bezier(.2,.8,.2,1) forwards}

/* ================= Mascot poses ================= */
.mp-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding-bottom:60px}
.mp-fig{position:relative}
.mp-fig .mp-svg{display:block;overflow:visible}
.mp-lab{display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;animation:aItem .6s cubic-bezier(.2,.8,.2,1) .3s forwards}
.mp-lab b{font-size:84px;letter-spacing:-.03em;color:var(--ink)}
.mp-lab span{display:inline-flex;align-items:center;gap:12px;font-size:30px;font-weight:600;color:#6B6B66;background:#fff;padding:12px 22px;border-radius:999px}
.mp-lab span svg{width:28px;height:28px}
.mp-wrap.mp-land{gap:10px}
.mp-wrap.mp-land .mp-lab b{font-size:64px}
.mp-svg *{transform-box:view-box}
.mp-bob{animation:k-mp-bob 2.2s ease-in-out infinite}
.mp-bob.mp-jump{animation:k-mp-jump 1s cubic-bezier(.3,0,.3,1) infinite}
.mp-bob.mp-slow{animation:k-mp-bob 4s ease-in-out infinite}
.mp-bob.mp-walk{animation:k-mp-walk .7s ease-in-out infinite}
.mp-bob.mp-run{animation:k-mp-walk .36s ease-in-out infinite}
.mp-bob.mp-sway{animation:k-mp-sway 2.6s ease-in-out infinite;transform-origin:110px 210px}
@keyframes k-mp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes k-mp-jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-26px)}}
@keyframes k-mp-walk{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes k-mp-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.mp-eyes{transform-box:fill-box!important;transform-origin:center;animation:k-mp-blink 3.6s infinite}
@keyframes k-mp-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.mp-ant{transform-box:fill-box!important;transform-origin:50% 100%;animation:k-mp-ant 2.6s ease-in-out infinite}
@keyframes k-mp-ant{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
/* arm loops rotate around the shoulder (local origin) */
.mp-wave{transform-origin:0 0;animation:k-mp-wave .9s ease-in-out infinite alternate}
@keyframes k-mp-wave{0%{transform:rotate(-16deg)}100%{transform:rotate(16deg)}}
.mp-pointL,.mp-pointR,.mp-pointU{transform-origin:0 0;animation:k-mp-point 1.2s ease-in-out infinite}
@keyframes k-mp-point{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.mp-cheerL{transform-origin:0 0;animation:k-mp-cheerL .5s ease-in-out infinite alternate}
.mp-cheerR{transform-origin:0 0;animation:k-mp-cheerR .5s ease-in-out infinite alternate}
@keyframes k-mp-cheerL{0%{transform:rotate(-10deg)}100%{transform:rotate(10deg)}}
@keyframes k-mp-cheerR{0%{transform:rotate(10deg)}100%{transform:rotate(-10deg)}}
.mp-scratch{transform-origin:0 0;animation:k-mp-wave .3s ease-in-out infinite alternate}
.mp-shrugL,.mp-shrugR{transform-origin:0 0;animation:k-mp-shrug 2.2s ease-in-out infinite}
@keyframes k-mp-shrug{0%,30%,100%{transform:translateY(0)}45%,70%{transform:translateY(-12px)}}
.mp-tapL{transform-origin:0 0;animation:k-mp-tap .24s ease-in-out infinite alternate}
.mp-tapR{transform-origin:0 0;animation:k-mp-tap .24s ease-in-out -.12s infinite alternate}
@keyframes k-mp-tap{0%{transform:rotate(0)}100%{transform:rotate(-5deg) translateY(-6px)}}
.mp-swingA{transform-origin:0 0;animation:k-mp-swing .36s ease-in-out infinite alternate}
.mp-swingB{transform-origin:0 0;animation:k-mp-swing .36s ease-in-out -.36s infinite alternate}
@keyframes k-mp-swing{0%{transform:rotate(-40deg)}100%{transform:rotate(40deg)}}
.mp-footA{animation:k-mp-foot .36s ease-in-out infinite alternate}
.mp-footB{animation:k-mp-foot .36s ease-in-out -.36s infinite alternate}
@keyframes k-mp-foot{0%{transform:translate(-12px,0)}100%{transform:translate(12px,-10px)}}
.mp-speed{animation:k-mp-speed .5s linear infinite}
@keyframes k-mp-speed{0%{transform:translateX(20px);opacity:0}30%{opacity:1}100%{transform:translateX(-30px);opacity:0}}
.mp-sweep{transform-origin:0 0;animation:k-mp-sweep 2s ease-in-out infinite}
.mp-lens{animation:k-mp-lens 2s ease-in-out infinite}
@keyframes k-mp-sweep{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes k-mp-lens{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-14px)}}
.mp-thumb,.mp-thumbg{animation:k-mp-thumb 1s cubic-bezier(.3,0,.3,1) infinite}
@keyframes k-mp-thumb{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}
.mp-dot{transform-box:fill-box!important;transform-origin:center;animation:k-mp-dot 1.2s ease-in-out infinite}
@keyframes k-mp-dot{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.mp-conf{transform-box:fill-box!important;transform-origin:center;animation:k-mp-conf 1.6s linear infinite}
@keyframes k-mp-conf{0%{transform:translateY(-20px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(110px) rotate(260deg);opacity:0}}
.mp-q{transform-box:fill-box!important;transform-origin:50% 90%;animation:k-mp-q 1.4s ease-in-out infinite}
@keyframes k-mp-q{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg) translateY(-6px)}}
.mp-burst{animation:k-mp-burst 1.2s ease-out infinite}
@keyframes k-mp-burst{0%{opacity:0;transform:translateY(8px)}30%,70%{opacity:1;transform:none}100%{opacity:0}}
.mp-heart{transform-box:fill-box!important;transform-origin:center;animation:k-mp-heart 2.4s ease-in-out infinite}
@keyframes k-mp-heart{0%{transform:translateY(20px) scale(.6);opacity:0}25%{opacity:1;transform:translateY(0) scale(1)}100%{transform:translateY(-50px) scale(1);opacity:0}}
.mp-z{animation:k-mp-z 2.4s ease-in-out infinite;opacity:0}
@keyframes k-mp-z{0%{transform:translate(0,10px);opacity:0}30%{opacity:1}100%{transform:translate(16px,-40px);opacity:0}}
.mp-prog{transform-box:fill-box!important;transform-origin:0 50%;animation:k-mp-prog 2.4s ease-in-out infinite}
@keyframes k-mp-prog{0%{transform:scaleX(.05)}80%,100%{transform:scaleX(1)}}
.mp-bar{transform-box:fill-box!important;transform-origin:50% 100%;animation:k-mp-bar 3s ease-out infinite}
@keyframes k-mp-bar{0%{transform:scaleY(.1)}30%,100%{transform:scaleY(1)}}
.mp-tick{animation:k-mp-burst 1.2s ease-out infinite}
.mp-sign{transform-box:fill-box!important;transform-origin:50% 100%;animation:k-mp-sway 2.6s ease-in-out infinite}

/* ================= Platform safe zones ================= */
.sz-frame{position:absolute;transform-origin:0 0;overflow:hidden;border-radius:4px}
.sz-scn{position:absolute;left:0;top:0;width:100%}
.sz-ov{position:absolute;inset:0;z-index:30;font-family:'Inter Tight',sans-serif}
.sz-z{position:absolute;background:rgba(40,40,44,.62);outline:3px solid rgba(255,255,255,.55);outline-offset:-3px;opacity:0;animation:aFade .5s ease .2s forwards}
.sz-z em{position:absolute;left:18px;top:14px;font:700 26px/1 'Inter Tight',sans-serif;font-style:normal;color:#fff;background:rgba(17,17,19,.72);padding:8px 12px;border-radius:10px;white-space:nowrap}
.sz-rail em{left:auto;right:10px;top:-52px}
.sz-ri{position:absolute;left:50%;width:90px;height:90px;margin-left:-45px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#fff}
.sz-ri svg{width:46px;height:46px}
.sz-capx{position:absolute;left:40px;right:40px;bottom:40px;display:flex;flex-direction:column;gap:18px}
.sz-capx i{height:22px;border-radius:11px;background:rgba(255,255,255,.4)}
.sz-av{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.45)}
.sz-topx{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:30px}
.sz-topx i{width:150px;height:26px;border-radius:13px;background:rgba(255,255,255,.4)}
.sz-topx i:nth-child(2){background:rgba(255,255,255,.75)}
.sz-navx{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around}
.sz-navx i{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.35)}
.sz-prog{background:rgba(255,255,255,.8);outline:none}
.sz-prog em{display:none}
.sz-el,.sz-elc{background:rgba(40,40,44,.72);border-radius:18px}
.sz-elc{border-radius:50%}
.sz-elc em{left:50%;top:50%;transform:translate(-50%,-50%)}
.sz-elx{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff}
.sz-elx svg{width:54px;height:54px}
.sz-wm{border-radius:50%}
.sz-wm em{top:-50px;left:auto;right:0}
.sz-safe{position:absolute;outline:6px dashed #0FA37F;outline-offset:-3px;background:rgba(15,163,127,.08);opacity:0;animation:aFade .5s ease .5s forwards}
.sz-safe>em{position:absolute;left:24px;top:24px;font:800 40px/1 'Inter Tight',sans-serif;font-style:normal;background:#0FA37F;color:#fff;padding:14px 22px;border-radius:14px;white-space:nowrap}
.sz-dm{position:absolute;font:700 28px/1 'JetBrains Mono',monospace;background:#fff;color:#0B7A5F;padding:8px 12px;border-radius:10px;white-space:nowrap}
.sz-safe .sz-dm.sz-t{left:50%;top:-8px;transform:translate(-50%,-100%)}
.sz-safe .sz-dm.sz-b{left:50%;bottom:-8px;transform:translate(-50%,100%)}
.sz-safe .sz-dm.sz-l{left:-8px;top:50%;transform:translate(-100%,-50%) rotate(-90deg);transform-origin:100% 50%}
.sz-safe .sz-dm.sz-r{right:-8px;top:40%;transform:translate(100%,-50%) rotate(90deg);transform-origin:0 50%}
.sz-act{position:absolute;outline:5px dashed #F5A300;outline-offset:-2px;opacity:0;animation:aFade .5s ease .4s forwards}
.sz-act em{position:absolute;right:16px;top:16px;font:700 28px/1 'Inter Tight',sans-serif;font-style:normal;background:#F5A300;color:#111113;padding:8px 12px;border-radius:10px}
.sz-band{position:absolute;outline:5px solid #3355FF;outline-offset:-2px;background:rgba(51,85,255,.14);display:flex;align-items:center;justify-content:center;opacity:0;animation:aFade .5s ease .7s forwards}
.sz-band em{position:absolute;left:12px;bottom:12px;font:700 26px/1 'Inter Tight',sans-serif;font-style:normal;background:#3355FF;color:#fff;padding:8px 12px;border-radius:10px;white-space:nowrap}
.sz-bt{display:flex;flex-direction:column;align-items:center;gap:6px}
.sz-bt span{font:700 50px/1.2 'Inter Tight',sans-serif;background:rgba(17,17,19,.86);color:#fff;padding:4px 20px;border-radius:12px}
.sz-dim{position:absolute;background:rgba(14,15,18,.72);opacity:0;animation:aFade .5s ease .3s forwards}
.sz-crop{position:absolute;outline:8px solid #0FA37F;outline-offset:-4px;opacity:0;animation:aFade .5s ease .5s forwards}
.sz-crop>em{position:absolute;left:24px;top:24px;font:800 42px/1 'Inter Tight',sans-serif;font-style:normal;background:#0FA37F;color:#fff;padding:14px 20px;border-radius:14px}
.sz-crop .sz-dm.sz-t{right:24px;top:24px}
.sz-crop .sz-dm.sz-b{right:24px;bottom:24px}
.sz-cut{position:absolute;left:50%;transform:translateX(-50%);font:700 34px/1 'Inter Tight',sans-serif;color:#fff;background:rgba(229,72,77,.9);padding:12px 20px;border-radius:12px;opacity:0;animation:aFade .5s ease .6s forwards;white-space:nowrap}
.sz-leg{position:absolute;z-index:40;display:flex;flex-direction:column;gap:18px;color:#F4F4F2;opacity:0;animation:aItem .6s cubic-bezier(.2,.8,.2,1) .3s forwards}
.sz-leg b{font-size:64px;letter-spacing:-.03em;line-height:1.05}
.sz-leg span{font-size:32px;line-height:1.35;color:#B9BAC0}
.sz-leg .sz-fm{font:600 28px/1.4 'JetBrains Mono',monospace;color:#6EE7C4}
.sz-leg.sz-over{left:50%;top:40px;transform:translateX(-50%);width:max-content;max-width:88%;background:rgba(17,17,19,.84);padding:18px 28px;border-radius:20px;gap:6px;align-items:center;text-align:center;animation-name:aFade}
.sz-leg.sz-over b{font-size:40px}
.sz-leg.sz-over span{display:none}
.sz-leg.sz-over .sz-fm{display:block;font-size:26px}

/* ================= Accessibility ================= */
.ax-wrap{position:absolute;inset:0;display:flex;flex-direction:column;padding:110px 60px 90px;gap:36px;box-sizing:border-box;color:#111113}
.ax-wrap.ax-land{padding:60px 90px 56px;gap:28px}
.ax-head{display:flex;align-items:center;gap:22px;opacity:0;animation:aItem .5s cubic-bezier(.2,.8,.2,1) .1s forwards}
.ax-head b{font-size:72px;letter-spacing:-.03em;line-height:1}
.ax-land .ax-head b{font-size:60px}
.ax-id{font:600 28px/1 'JetBrains Mono',monospace;color:#6B6B66;background:#fff;padding:10px 14px;border-radius:10px}
.ax-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:30px}
.ax-land .ax-body{flex-direction:row}
.ax-rule{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:24px;padding:26px 30px;font-size:32px;line-height:1.35;font-weight:500;opacity:0;animation:aItem .5s cubic-bezier(.2,.8,.2,1) .9s forwards}
.ax-land .ax-rule{font-size:28px;padding:20px 26px}
.ax-rule svg{width:38px;height:38px;flex:none;color:var(--ac)}
.ax-pn{flex:1;min-height:0;min-width:0;position:relative;border-radius:30px;background:#fff;border:4px solid transparent;display:flex;flex-direction:column;overflow:hidden;opacity:0;animation:aItem .6s cubic-bezier(.2,.8,.2,1) .3s forwards}
.ax-pn.ax-no{border-color:#F3C4C6}
.ax-pn.ax-ok{border-color:#B9E6D5;animation-delay:.5s}
.ax-pl{position:absolute;left:22px;top:22px;z-index:5;display:inline-flex;align-items:center;gap:10px;font:800 28px/1 'Inter Tight',sans-serif;padding:12px 18px;border-radius:999px;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.ax-pl svg{width:30px;height:30px}
.ax-pl.ax-no{background:#E5484D}.ax-pl.ax-ok{background:#0B8A66}
.ax-pb{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:90px 36px 36px}
.ax-v{display:inline-flex;align-items:center;gap:6px;font:800 24px/1 'Inter Tight',sans-serif;padding:8px 14px 8px 10px;border-radius:999px;text-transform:uppercase}
.ax-v svg{width:24px;height:24px}
.ax-v.ax-ok{background:#0B8A66;color:#fff}.ax-v.ax-no{background:#E5484D;color:#fff}
/* contrast tables */
.ax-cp2{flex:1;display:flex;flex-direction:column;gap:26px;min-height:0}
.ax-land .ax-cp2{flex-direction:row}
.ax-cp{flex:1;border-radius:30px;padding:26px 34px;display:flex;flex-direction:column;justify-content:space-between;min-height:0;opacity:0;animation:aItem .6s cubic-bezier(.2,.8,.2,1) .25s forwards}
.ax-cph{font:600 26px/1 'JetBrains Mono',monospace;opacity:.7;margin-bottom:6px}
.ax-crow{display:grid;grid-template-columns:1fr 130px 130px 124px;align-items:center;gap:10px;opacity:0;animation:aItemX .5s cubic-bezier(.2,.8,.2,1) forwards}
.ax-land .ax-crow{grid-template-columns:1fr 110px 110px 118px}
.ax-ct{font-size:40px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ax-ct.ax-big{font-size:56px;font-weight:800;line-height:1}
.ax-cn{font-size:24px;font-weight:600;opacity:.6}
.ax-cr{font:600 26px/1 'JetBrains Mono',monospace}
.ax-land .ax-ct{font-size:32px}.ax-land .ax-ct.ax-big{font-size:44px}
.ax-fp{flex:1;background:#fff;border-radius:30px;padding:30px 40px;display:flex;flex-direction:column;justify-content:space-around;opacity:0;animation:aItem .6s cubic-bezier(.2,.8,.2,1) .25s forwards}
.ax-fh{display:grid;grid-template-columns:1fr 1fr;font-size:28px;font-weight:700;color:#6B6B66}
.ax-frow{display:grid;grid-template-columns:auto 70px 1fr auto 70px auto;align-items:center;gap:14px;opacity:0;animation:aItemX .5s cubic-bezier(.2,.8,.2,1) forwards}
.ax-frow .ax-v{justify-self:start}
.ax-btn{font:800 30px/1 'Inter Tight',sans-serif;padding:20px 26px;border-radius:16px;white-space:nowrap}
.ax-land .ax-frow .ax-v{justify-self:start}
.ax-btn{font-size:26px;padding:14px 20px}
/* busy UI background */
.ax-ui{position:absolute;inset:0;overflow:hidden;background:#F6F6F3}
.ax-busy{position:absolute;inset:0}
.ax-busy i{position:absolute;opacity:.55;transform:translate(-30%,-30%)}
.ax-capbad{position:absolute;left:30px;right:30px;bottom:40px;font:300 30px/1.25 'Inter Tight',sans-serif;color:#fff;text-align:center}
.ax-capgood{position:absolute;left:30px;right:30px;bottom:46px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ax-capgood span{font:700 52px/1.2 'Inter Tight',sans-serif;color:#fff;background:rgba(17,17,19,.86);padding:6px 22px 10px;border-radius:14px;opacity:0;animation:aFade .25s ease forwards}
.ax-capgood span:nth-child(1){animation-delay:.9s}.ax-capgood span:nth-child(2){animation-delay:1.3s}
.ax-land .ax-capgood span{font-size:40px}
.ax-cc{position:absolute;right:24px;top:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ax-cc span{font:600 22px/1 'JetBrains Mono',monospace;background:#fff;padding:8px 10px;border-radius:8px}
/* reading time */
.ax-rtx{font-size:48px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-align:center;max-width:820px}
.ax-land .ax-rtx{font-size:38px}
.ax-rb{width:100%;max-width:820px;display:flex;flex-direction:column;gap:12px}
.ax-rt{position:relative;height:30px;border-radius:15px;background:#EEEEEA}
.ax-rt i{position:absolute;left:0;top:0;bottom:0;border-radius:15px;transform-origin:0 50%;transform:scaleX(0);animation:k-ax-fill 1.2s cubic-bezier(.2,.8,.2,1) .6s forwards}
.ax-rt i.ax-no{background:#E5484D}.ax-rt i.ax-ok{background:#0B8A66}
.ax-rt b{position:absolute;top:-10px;bottom:-10px;width:6px;margin-left:-3px;border-radius:3px;background:#111113}
@keyframes k-ax-fill{to{transform:scaleX(1)}}
.ax-rl{display:flex;justify-content:space-between;font:600 26px/1 'JetBrains Mono',monospace;color:#6B6B66}
.ax-form{font:600 30px/1 'JetBrains Mono',monospace;background:#F2F2EF;padding:14px 20px;border-radius:12px}
/* reduced motion */
.ax-rmc{display:flex;flex-direction:column;align-items:center;gap:20px;background:#F2F2EF;border-radius:30px;padding:50px 70px;font-size:40px}
.ax-rmc svg{width:90px;height:90px;color:var(--ac)}
.ax-rmc.ax-move{animation:k-ax-move 3s cubic-bezier(.2,.8,.2,1) infinite}
.ax-rmc.ax-fade{animation:k-ax-fade 3s ease infinite}
@keyframes k-ax-move{0%{opacity:0;transform:translateX(-240px) scale(.6) rotate(-8deg);filter:blur(10px)}25%,90%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:translateX(240px) scale(.8)}}
@keyframes k-ax-fade{0%{opacity:0}10%,90%{opacity:1}100%{opacity:0}}
/* flashing */
.ax-fl{position:relative;width:100%;max-width:820px;height:120px;border-radius:20px;background:#F2F2EF}
.ax-fl i{position:absolute;top:18px;bottom:18px;width:34px;margin-left:-17px;border-radius:10px;background:#111113}
.ax-pn.ax-no .ax-fl i{background:#E5484D}
.ax-pn.ax-ok .ax-fl i{background:#0B8A66}
.ax-fl span{position:absolute;bottom:-40px;left:0;font:600 24px/1 'JetBrains Mono',monospace;color:#6B6B66}
.ax-fl span:last-of-type{left:auto;right:0}
.ax-fn{margin-top:30px;font-size:44px;font-weight:800;letter-spacing:-.02em}
.ax-soft{width:110px;height:110px;border-radius:30px;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;animation:k-ax-soft 2s ease-in-out infinite}
.ax-soft svg{width:56px;height:56px}
@keyframes k-ax-soft{0%,100%{opacity:1}50%{opacity:.7}}
/* chart */
.ax-chart{width:100%;max-width:860px}
.ax-draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:k-ax-draw 1.4s cubic-bezier(.2,.8,.2,1) .5s forwards}
.ax-pn.ax-ok .ax-draw[stroke-dasharray="22 14"]{stroke-dasharray:22 14;stroke-dashoffset:0;animation:aFade .6s ease .6s both}
@keyframes k-ax-draw{to{stroke-dashoffset:0}}
.ax-lg{display:flex;gap:30px;font-size:30px;font-weight:600}
.ax-lg span{display:flex;align-items:center;gap:10px}
.ax-lg i{width:26px;height:26px;border-radius:6px}
/* audio description */
.ax-mini{display:flex;align-items:flex-end;gap:30px}
.ax-mb{display:flex;align-items:flex-end;gap:12px;height:200px}
.ax-mb i{width:46px;border-radius:10px 10px 4px 4px;background:var(--ac);transform-origin:50% 100%;transform:scaleY(0);animation:k-tl-grow .6s cubic-bezier(.2,.8,.2,1) forwards}
.ax-mini>b{font-size:90px;letter-spacing:-.04em;color:#0B8A66}
.ax-vo{display:flex;gap:16px;align-items:flex-start;max-width:820px;font-size:36px;font-weight:600;line-height:1.3;background:#111113;color:#fff;padding:22px 28px;border-radius:22px}
.ax-land .ax-vo{font-size:30px}
.ax-vo svg{width:40px;height:40px;flex:none;color:var(--ac2)}
/* one idea */
.ax-clut{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr auto auto;gap:14px;padding-top:10px}
.ax-k{background:#F2F2EF;border-radius:16px;padding:14px;display:flex;flex-direction:column;font-size:22px;color:#6B6B66}
.ax-k b{font-size:44px;color:#111113}
.ax-cl2{grid-column:1/-1;display:flex;align-items:flex-end;gap:10px;background:#F2F2EF;border-radius:16px;padding:14px}
.ax-cl2 i{flex:1;background:#C9C9C4;border-radius:6px}
.ax-cl2 i:nth-child(1){height:30%}.ax-cl2 i:nth-child(2){height:60%}.ax-cl2 i:nth-child(3){height:45%}.ax-cl2 i:nth-child(4){height:80%}
.ax-cl3{grid-column:1/-1;display:flex;gap:10px}
.ax-cl3 span{flex:1;text-align:center;background:var(--ac);color:#fff;border-radius:12px;padding:12px;font-size:24px;font-weight:700}
.ax-cl3 span+span{background:#111113}
.ax-clut small{grid-column:1/-1;font-size:20px;color:#8A8A85}
.ax-one{display:flex;flex-direction:column;align-items:center;gap:6px}
.ax-one b{font-size:230px;letter-spacing:-.06em;line-height:.9;color:var(--ac);animation:aPop .7s cubic-bezier(.2,.8,.2,1) .6s both}
.ax-land .ax-one b{font-size:190px}
.ax-one span{font-size:48px;font-weight:700;letter-spacing:-.02em}
/* weights */
.ax-wt{display:flex;flex-direction:column;gap:18px;max-width:820px;text-align:center}
.ax-wt.ax-thin b{font-weight:200;font-size:44px;color:#9A9A95}
.ax-wt.ax-thin span{font-weight:200;font-size:26px;color:#A6A6A1}
.ax-wt.ax-good b{font-weight:600;font-size:60px;letter-spacing:-.02em;line-height:1.1}
.ax-wt.ax-good span{font-weight:500;font-size:40px;color:#3A3A36}
.ax-wt.ax-good em{font:600 24px/1 'JetBrains Mono',monospace;font-style:normal;color:#6B6B66;background:#F2F2EF;align-self:center;padding:10px 14px;border-radius:10px}
.ax-land .ax-wt.ax-good b{font-size:52px}.ax-land .ax-wt.ax-good span{font-size:34px}
/* text over images */
.ax-imbad,.ax-imgood{position:absolute;left:40px;right:40px;top:50%;transform:translateY(-50%);text-align:center;font:800 64px/1.1 'Inter Tight',sans-serif;letter-spacing:-.03em;color:#fff}
.ax-imgood span,.ax-imgood{color:#fff}
.ax-imgood{left:60px;right:60px;background:rgba(17,17,19,.82);padding:26px 30px;border-radius:24px;opacity:0;animation:aFade .5s ease .8s forwards}
.ax-land .ax-imbad,.ax-land .ax-imgood{font-size:52px}