.article-promo-animation{width:min(100%,440px);margin:28px auto;border:1px solid var(--color-border-strong);border-radius:22px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35),var(--shadow-glow)}
.article-promo-animation .promo-h{color:#4ade80;font-weight:700}.article-promo-animation .promo-v{color:#60a5fa;font-weight:700}.article-promo-animation .promo-l{color:#ef4444;font-weight:700}.article-promo-animation .promo-f{color:#ffb703;font-weight:700}
.article-promo-animation #stage{position:relative;width:100%;aspect-ratio:9/16;background:radial-gradient(circle at 50% 30%,#1b2750,#0e1424);color:#f4f6ff;overflow:hidden;container-type:inline-size;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;--s:26cqw;line-height:1.15}
#stage #logo{position:absolute;top:6cqw;left:0;right:0;text-align:center;font-size:9cqw;font-weight:900;letter-spacing:.02em}
#stage #logo b{color:#ffb703}
#stage #tag{position:absolute;top:18cqw;left:0;right:0;text-align:center;font-size:4cqw;font-weight:700;color:#cfd8ff;letter-spacing:.06em;text-transform:uppercase;opacity:0}
#stage #world{position:absolute;inset:0;perspective:700cqw;perspective-origin:50% 40%}
#stage #rot{position:absolute;left:37cqw;top:46cqw;width:var(--s);height:var(--s);transform-style:preserve-3d;transform-origin:50% 50% calc(var(--s)/-2)}
#stage .face{position:absolute;width:var(--s);height:var(--s);transform-style:preserve-3d}
#stage #rot>.face{left:0;top:0}
#stage [data-k=A]{left:0;top:calc(-1*var(--s));transform-origin:50% 100%}
#stage [data-k=C],#stage [data-k=D]{left:0;top:var(--s);transform-origin:50% 0}
#stage [data-k=L]{left:calc(-1*var(--s));top:0;transform-origin:100% 50%}
#stage [data-k=R]{left:var(--s);top:0;transform-origin:0 50%}
#stage .pl{position:absolute;inset:0;box-sizing:border-box;border:.5cqw solid #7d93c9;background:#f4f6fb;display:grid;grid-template-columns:repeat(4,1fr);backface-visibility:hidden}
#stage .c{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:.15cqw solid #dbe2f2;font-size:3.3cqw;font-weight:600;color:#4b5563}
#stage .c.b{color:#1d4ed8;font-weight:800}
#stage .c.sel{background:#bbf7d0;color:#15803d;outline:.4cqw solid #16a34a;outline-offset:-.4cqw}
#stage #cap{position:absolute;left:0;right:0;top:134cqw;text-align:center;font-size:7.5cqw;font-weight:800;padding:0 6cqw;opacity:0}
#stage #cap small{display:block;font-size:4cqw;font-weight:500;color:#aab6e0;margin-top:2cqw}
#stage .promo-opening{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10cqw;box-sizing:border-box;text-align:center;background:radial-gradient(circle at 50% 35%,#24346b,#0b1020 70%)}
#stage .promo-opening[hidden]{display:none}
#stage .promo-opening h2{margin:0 0 7cqw;font-size:8cqw;line-height:1.2;color:#fff}
#stage .promo-opening p{margin:0 0 5cqw;font-size:5.2cqw;line-height:1.45;color:#cfd8ff}
#stage .promo-opening strong{color:#ffb703;font-size:7cqw}
#stage #bar{--progress:0%;position:absolute;left:3cqw;right:3cqw;bottom:0;height:7cqw;z-index:10;cursor:pointer;touch-action:none;background:linear-gradient(to right,#ffb703 0 var(--progress),rgba(255,255,255,.28) var(--progress) 100%) center/100% 1.2cqw no-repeat}
#stage #bar::after{content:"";position:absolute;left:var(--progress);top:50%;width:4cqw;height:4cqw;border:.6cqw solid #fff;border-radius:50%;background:#ffb703;box-shadow:0 0 2cqw rgba(255,183,3,.8);transform:translate(-50%,-50%);box-sizing:border-box}
#stage #bar:focus-visible{outline:2px solid #ffb703;outline-offset:1cqw;border-radius:1cqw}
#stage #replay{position:absolute;right:3cqw;top:3cqw;z-index:8;background:#ffffff22;color:#fff;border:0;border-radius:99px;padding:2cqw 4cqw;font-size:3.6cqw;cursor:pointer}
#stage #ov{position:absolute;inset:0;z-index:5;background:#000b;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
#stage #card{width:88cqw;background:#1a1e29;border:.3cqw solid #2b3550;border-radius:6cqw;padding:6cqw 5cqw 5cqw;box-sizing:border-box;text-align:center;transform:scale(.9)}
#stage #card h2{margin:0;font-size:8.5cqw;font-weight:600;color:#fff}
#stage #card img{width:76cqw;height:auto;aspect-ratio:600/471;object-fit:contain;display:block;margin:0 auto}
#stage #card .n{font-size:6cqw;color:#9aa4bd;margin:0 0 4cqw}
#stage #card p{margin:0 0 5cqw;font-size:5cqw;line-height:1.3;color:#f1f3fa}
#stage #card .ok{background:#eef1f8;color:#1b2234;border-radius:99px;padding:3.4cqw 0;font-size:6cqw}
#stage #end{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;padding:6cqw 8cqw 32cqw;box-sizing:border-box;text-align:center;background:radial-gradient(circle at 50% 35%,#24346b,#0b1020 70%);opacity:0;pointer-events:none}
#stage #end img.logo-end{width:24cqw;height:24cqw;border-radius:5cqw;object-fit:cover;box-shadow:0 0 6cqw rgba(0,140,255,.6)}
#stage #end .brand-end{font-size:11cqw;font-weight:900;line-height:1}
#stage #end .brand-end b{color:#ffb703}
#stage #end .tag-end{font-size:5.5cqw;font-weight:800;color:#cfd8ff}
#stage #end ul{list-style:none;margin:0;padding:0;font-size:4.5cqw;font-weight:700;line-height:1.5}
#stage #end ul li::before{content:"✓ ";color:#4ade80}
#stage #end .qr-cta{display:flex;flex-direction:column;align-items:center;gap:2cqw}
#stage #end .qr-cta p{margin:0;font-size:4.4cqw;line-height:1.25;color:#fff;font-weight:700}
#stage #end .qr-cta small{display:block;max-width:78cqw;font-size:3.2cqw;line-height:1.3;color:#cfd8ff}
#stage #end .qr-cta a{display:flex;padding:2cqw;border-radius:3cqw;background:#fff}
#stage #end .qr-cta a:focus-visible{outline:2px solid #ffb703;outline-offset:2px}
#stage #end .qr-cta img{width:36cqw;height:36cqw}
#stage.timeline-player *,#stage.timeline-player{transition:none!important;animation:none!important}
#stage .promo-controls{position:absolute;bottom:8cqw;left:3cqw;right:3cqw;z-index:9;text-align:center;opacity:0}
#stage:hover .promo-controls,#stage .promo-controls:focus-within{opacity:1}
#stage .promo-controls>div{display:flex;justify-content:center;gap:1cqw}
#stage .promo-controls button{display:inline-flex;align-items:center;justify-content:center;width:8cqw;height:7cqw;padding:1.5cqw;border:1px solid #7d93c9;border-radius:1.5cqw;background:#111b32;color:#fff;cursor:pointer}
#stage .promo-controls button svg{width:4cqw;height:4cqw;fill:currentColor;pointer-events:none}
#stage .promo-controls button:disabled{opacity:.45;cursor:default}
#stage .promo-controls button:focus-visible{outline:2px solid #ffb703;outline-offset:2px}
#stage .promo-controls output{display:block;margin-top:1cqw;font-size:2.6cqw;color:#cfd8ff;font-variant-numeric:tabular-nums}