/* ============================================================
   NEURISE · Blog article template
   Topic-aware animated header (motion-design) + article body.
   Loads AFTER subpage.css. Themes are chosen by data-topic on
   <article class="article" data-topic="…">.
   ============================================================ */

/* ─── HERO ─────────────────────────────────────────────── */
.art-hero{position:relative;min-height:clamp(420px,58vh,540px);display:flex;align-items:flex-end;overflow:hidden;background:var(--grad-violet);border-bottom:1px solid var(--line);padding:150px 0 0}
.art-hero .art-stage{position:absolute;inset:0;z-index:0}
.art-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,6,23,.30) 0%, rgba(11,6,23,.10) 38%, rgba(11,6,23,.72) 78%, var(--ink) 100%)}
.art-hero .container{position:relative;z-index:2;width:100%;padding-bottom:46px}
.art-head{max-width:760px}
.art-crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3);font-family:'JetBrains Mono',monospace;margin-bottom:20px}
.art-crumbs a{color:var(--paper-3);transition:color .2s}
.art-crumbs a:hover{color:var(--paper)}
.art-cat{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent,#FF7F11);border:1px solid color-mix(in srgb, var(--accent,#FF7F11) 40%, transparent);background:color-mix(in srgb, var(--accent,#FF7F11) 12%, transparent);padding:6px 13px;border-radius:999px}
.art-cat .d{width:6px;height:6px;border-radius:50%;background:var(--accent,#FF7F11);box-shadow:0 0 10px var(--accent,#FF7F11);animation:blip 2.2s ease-in-out infinite}
.art-head h1{margin-top:20px;font-size:clamp(32px,5vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;max-width:18ch}
.art-head h1 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--accent,#FF7F11)}
.art-dek{margin-top:20px;font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:var(--paper-2);max-width:600px}
.art-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:13px;color:var(--paper-3);font-family:'JetBrains Mono',monospace;letter-spacing:.03em}
.art-meta .av{display:flex;align-items:center;gap:9px;color:var(--paper-2)}
.art-meta .av img{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2)}
.art-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--paper-3);opacity:.5}

/* reading-progress bar (fixed top) */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-orange);z-index:200;box-shadow:0 0 12px rgba(255,127,17,.6);transition:width .12s linear}

/* ─── ARTICLE BODY ─────────────────────────────────────── */
.art-body{padding:64px 0 24px}
.art-wrap{max-width:720px;margin:0 auto}
.art-lead{font-size:clamp(19px,2.1vw,23px);line-height:1.55;color:var(--paper);font-weight:500;letter-spacing:-.01em;margin-bottom:34px;text-wrap:pretty}
.art-wrap h2{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:48px 0 16px;text-wrap:balance}
.art-wrap h2 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--orange-500)}
.art-wrap h3{font-size:20px;font-weight:600;margin:32px 0 10px;color:var(--paper)}
.art-wrap p{font-size:17px;line-height:1.75;color:var(--paper-2);margin-bottom:18px;text-wrap:pretty}
.art-wrap p strong{color:var(--paper);font-weight:600}
.art-wrap a.inline{color:var(--orange-500);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art-wrap ul,.art-wrap ol{margin:6px 0 22px;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:11px}
.art-wrap ul li{position:relative;padding-left:30px;font-size:17px;line-height:1.6;color:var(--paper-2)}
.art-wrap ul li::before{content:'';position:absolute;left:4px;top:9px;width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--orange-500);box-shadow:0 0 10px rgba(255,127,17,.5)}
.art-wrap ol{counter-reset:n}
.art-wrap ol li{position:relative;padding-left:42px;font-size:17px;line-height:1.6;color:var(--paper-2);counter-increment:n}
.art-wrap ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--orange-500);border:1px solid color-mix(in srgb,var(--orange-500) 40%,transparent);border-radius:7px;width:26px;height:26px;display:flex;align-items:center;justify-content:center}

/* pull-quote */
.art-quote{margin:38px 0;padding:24px 28px;border-left:3px solid var(--orange-500);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border-radius:0 14px 14px 0}
.art-quote p{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;line-height:1.4;color:var(--paper);margin:0}

/* TL;DR / key takeaways callout (great for GEO) */
.art-tldr{margin:0 0 40px;border:1px solid var(--line-2);border-radius:18px;padding:26px 28px;background:radial-gradient(120% 100% at 0% 0%, rgba(44,24,80,.5), rgba(255,255,255,.02))}
.art-tldr h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-500);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.art-tldr h4::before{content:'';width:18px;height:18px;border-radius:5px;background:var(--grad-orange);box-shadow:0 0 14px rgba(255,127,17,.5)}
.art-tldr ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.art-tldr li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.55;color:var(--paper-2)}
.art-tldr li::before{content:'→';position:absolute;left:0;top:0;color:var(--orange-500);font-weight:700}

/* in-article FAQ (renders FAQ schema too) */
.art-faq{margin-top:46px}
.art-faq h2{margin-bottom:8px}
.art-faq .faq{margin-top:20px}

/* author / share footer of the article */
.art-end{max-width:720px;margin:48px auto 0;padding-top:30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.art-end .who{display:flex;align-items:center;gap:12px}
.art-end .who img{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2)}
.art-end .who b{display:block;color:var(--paper);font-size:14px}
.art-end .who span{font-size:12.5px;color:var(--paper-3)}
.art-end .back{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--paper-2);border:1px solid var(--line-2);border-radius:999px;padding:10px 18px;transition:border-color .2s,color .2s}
.art-end .back:hover{border-color:var(--orange-500);color:var(--orange-500)}

/* ════════════════════════════════════════════════════════
   HERO MOTION SCENES - pure-CSS loops, injected per topic
   ════════════════════════════════════════════════════════ */
.art-stage{--accent:#FF7F11}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.scene .frame{position:relative;width:min(560px,84%);max-width:560px}
/* faint grid + drifting glow shared by all scenes */
.art-stage .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(245,246,248,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(245,246,248,.045) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(80% 80% at 60% 30%,#000,transparent 80%)}
.art-stage .orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;mix-blend-mode:screen}
.art-stage .orb.a{width:340px;height:340px;background:color-mix(in srgb,var(--accent) 60%,transparent);top:-90px;right:6%;animation:floaty 11s ease-in-out infinite}
.art-stage .orb.b{width:260px;height:260px;background:rgba(124,223,191,.4);bottom:-70px;left:10%;animation:floaty 13s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-26px) translateX(18px)}}

/* mock panel chrome reused by scenes */
.mock{border:1px solid var(--line-2);border-radius:16px;background:rgba(13,9,24,.72);backdrop-filter:blur(8px);box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden}
.mock .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.mock .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.mock .bar .u{margin-left:8px;flex:1;height:8px;border-radius:4px;background:rgba(245,246,248,.10)}

/* - SEO: ranking climb - */
.sc-seo .rows{position:relative;height:236px;padding:16px}
.sc-seo .r{position:absolute;left:16px;right:16px;height:40px;border-radius:10px;display:flex;align-items:center;gap:12px;padding:0 14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.sc-seo .r .pos{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper-3);width:22px}
.sc-seo .r .ln{height:8px;border-radius:4px;background:rgba(245,246,248,.12)}
.sc-seo .r1{top:16px}.sc-seo .r2{top:64px}.sc-seo .r3{top:112px}.sc-seo .r4{top:160px}.sc-seo .r5{top:208px}
.sc-seo .you{z-index:3;background:linear-gradient(90deg,rgba(255,127,17,.20),rgba(255,127,17,.06));border-color:var(--orange-500);box-shadow:0 0 26px rgba(255,127,17,.30);animation:seoclimb 6s cubic-bezier(.6,0,.2,1) infinite}
.sc-seo .you .pos{color:var(--orange-500)}
.sc-seo .you .name{font-size:14px;font-weight:600;color:var(--paper)}
.sc-seo .you .tag{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink);background:var(--orange-500);border-radius:6px;padding:3px 8px;font-weight:700;opacity:0;animation:seotag 6s ease infinite}
@keyframes seoclimb{0%{top:208px}10%{top:208px}55%{top:16px}100%{top:16px}}
@keyframes seotag{0%,48%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1)}100%{opacity:1}}

/* - GEO: AI answer typing - */
.sc-geo .chat{padding:18px;display:flex;flex-direction:column;gap:12px}
.sc-geo .bub{max-width:84%;padding:13px 15px;border-radius:14px;font-size:14px;line-height:1.45}
.sc-geo .bub.u{align-self:flex-end;background:rgba(255,255,255,.07);border:1px solid var(--line-2);color:var(--paper-2)}
.sc-geo .bub.ai{align-self:flex-start;background:linear-gradient(180deg,rgba(197,254,236,.10),rgba(255,255,255,.02));border:1px solid color-mix(in srgb,var(--turq) 40%,transparent);color:var(--paper-2);min-height:18px;overflow:hidden;white-space:normal;animation:geareveal 7s ease infinite}
.sc-geo .bub.ai b{color:var(--paper);background:color-mix(in srgb,var(--turq) 22%,transparent);border-radius:5px;padding:1px 6px;box-shadow:0 0 0 1px color-mix(in srgb,var(--turq) 40%,transparent) inset}
.sc-geo .typing{display:inline-flex;gap:4px;vertical-align:middle}
.sc-geo .typing i{width:6px;height:6px;border-radius:50%;background:var(--turq);animation:typedot 1.1s ease-in-out infinite}
.sc-geo .typing i:nth-child(2){animation-delay:.18s}.sc-geo .typing i:nth-child(3){animation-delay:.36s}
@keyframes typedot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes geareveal{0%,18%{opacity:0;transform:translateY(8px)}30%,100%{opacity:1;transform:translateY(0)}}

/* - CONTENT: document writes itself - */
.sc-content .doc{padding:22px}
.sc-content .h{height:18px;width:62%;border-radius:5px;background:linear-gradient(90deg,var(--paper),var(--paper-3));margin-bottom:18px;transform-origin:left;animation:grow 6s ease infinite}
.sc-content .l{height:9px;border-radius:5px;background:rgba(245,246,248,.13);margin-bottom:12px;transform-origin:left;animation:grow 6s ease infinite}
.sc-content .l:nth-child(2){animation-delay:.5s}.sc-content .l:nth-child(3){width:92%;animation-delay:.9s}
.sc-content .l:nth-child(4){width:80%;animation-delay:1.3s}.sc-content .l:nth-child(5){width:88%;animation-delay:1.7s}
.sc-content .l:nth-child(6){width:54%;animation-delay:2.1s;background:linear-gradient(90deg,var(--orange-500),transparent)}
.sc-content .cursor{display:inline-block;width:2px;height:16px;background:var(--orange-500);vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes grow{0%{transform:scaleX(0);opacity:0}8%{opacity:1}40%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:1}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* - LOCAL: radar sweep with pins - */
.sc-local .radar{position:relative;width:300px;height:300px;margin:0 auto;border-radius:50%;border:1px solid var(--line-2);background:radial-gradient(circle, rgba(255,127,17,.06), transparent 70%)}
.sc-local .radar .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(245,246,248,.08)}
.sc-local .radar .ring.r2{inset:48px}.sc-local .radar .ring.r3{inset:96px}
.sc-local .radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg, color-mix(in srgb,var(--orange-500) 32%,transparent), transparent 60deg);animation:spin 4s linear infinite}
.sc-local .radar .me{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--orange-500);transform:translate(-50%,-50%);box-shadow:0 0 16px var(--orange-500);z-index:2}
.sc-local .radar .pin{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--turq);box-shadow:0 0 10px var(--turq);opacity:0;animation:ping 4s ease infinite}
.sc-local .radar .p1{left:70%;top:30%;animation-delay:.4s}.sc-local .radar .p2{left:28%;top:38%;animation-delay:1.3s}
.sc-local .radar .p3{left:62%;top:68%;animation-delay:2.2s}.sc-local .radar .p4{left:34%;top:70%;animation-delay:3s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%,10%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1.3)}40%{opacity:.9;transform:scale(1)}100%{opacity:.2}}

/* - MITY (myths): claim struck through, stamp - */
.sc-myth .claim{padding:26px;text-align:center}
.sc-myth .claim .t{position:relative;display:inline-block;font-size:clamp(20px,3vw,30px);font-weight:600;letter-spacing:-.02em;color:var(--paper);line-height:1.3}
.sc-myth .claim .t::after{content:'';position:absolute;left:-4px;right:-4px;top:52%;height:3px;background:#ff6a5a;border-radius:2px;transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px rgba(255,106,90,.6);animation:strike 5s ease infinite}
.sc-myth .stamp{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#ff6a5a;border:2px solid #ff6a5a;border-radius:10px;padding:8px 16px;transform:rotate(-7deg) scale(.6);opacity:0;animation:stamp 5s cubic-bezier(.5,1.6,.5,1) infinite}
@keyframes strike{0%,30%{transform:scaleX(0)}48%,100%{transform:scaleX(1)}}
@keyframes stamp{0%,46%{opacity:0;transform:rotate(-7deg) scale(.5)}60%{opacity:1;transform:rotate(-7deg) scale(1)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}

/* - DEFAULT: neural nodes - */
.sc-default .net{position:relative;width:340px;height:240px;margin:0 auto}
.sc-default .node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 16px var(--orange-500);animation:pulse 3.2s ease-in-out infinite}
.sc-default .node:nth-child(2){background:var(--turq);box-shadow:0 0 16px var(--turq);animation-delay:.6s}
.sc-default .node:nth-child(3){animation-delay:1.1s}.sc-default .node:nth-child(4){background:#9ec5ff;box-shadow:0 0 16px #9ec5ff;animation-delay:1.6s}
.sc-default .node:nth-child(5){animation-delay:2s}
.sc-default svg line{stroke:rgba(245,246,248,.18);stroke-width:1;stroke-dasharray:4 5;animation:dash 6s linear infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.35);opacity:1}}
@keyframes dash{to{stroke-dashoffset:-60}}

/* — WORLD CUP / AGENT SWARM — football + brand-colored team bars — */
.sc-worldcup .scene{padding:16px}
.sc-wc{position:relative;width:min(560px,92%);display:flex;flex-direction:column;align-items:center;gap:20px}
.wc-top{position:relative;width:248px;height:196px;display:flex;align-items:center;justify-content:center}
.wc-pitch{position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(124,223,191,.16);background:radial-gradient(circle, rgba(124,223,191,.05), transparent 72%)}
.wc-pitch::before{content:'';position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:rgba(124,223,191,.13);transform:translateX(-.5px)}
.wc-pitch::after{content:'';position:absolute;left:50%;top:50%;width:78px;height:78px;border:1px solid rgba(124,223,191,.15);border-radius:50%;transform:translate(-50%,-50%)}
.wc-ring{position:absolute;left:50%;top:50%;width:0;height:0}
.wc-ring.r1{animation:wcSpin 9s linear infinite}
.wc-ring.r2{animation:wcSpin 14s linear infinite reverse}
.wc-ag{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;margin:-4px;background:var(--orange-500);box-shadow:0 0 9px var(--orange-500);animation:wcPulse 2.3s ease-in-out infinite}
.wc-ag.t{background:var(--turq);box-shadow:0 0 9px var(--turq)}
.wc-ag.b{background:#9ec5ff;box-shadow:0 0 9px #9ec5ff}
.wc-ball{position:relative;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle at 38% 30%, #ffffff, #dce0ea 64%, #b7bccd);box-shadow:0 14px 30px rgba(0,0,0,.45), inset -6px -8px 15px rgba(0,0,0,.16), inset 5px 6px 13px rgba(255,255,255,.65);animation:wcBob 3.6s ease-in-out infinite;z-index:3}
.wc-ball .spin{position:absolute;inset:0;animation:wcSpin 17s linear infinite}
.wc-ball .pent{position:absolute;left:50%;top:50%;width:24px;height:24px;background:#191030;transform:translate(-50%,-50%);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.wc-ball .seam{position:absolute;left:50%;top:50%;width:2px;height:25px;margin-left:-1px;background:#191030;border-radius:2px;transform-origin:top center}
.wc-chip{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);z-index:4;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--turq);background:rgba(11,6,23,.82);border:1px solid rgba(197,254,236,.32);border-radius:999px;padding:5px 12px;white-space:nowrap}
.wc-board{width:min(440px,96%);display:flex;flex-direction:column;gap:9px}
.wc-row{display:flex;align-items:center;gap:11px;position:relative}
.wc-flag{width:24px;height:16px;border-radius:3px;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.wc-flag.esp{background:linear-gradient(90deg,#5fbfa0 0 33%,#c5feec 33% 66%,#5fbfa0 66%)}
.wc-flag.fra{background:linear-gradient(90deg,#6c93d6 0 33%,#bcd2f5 33% 66%,#6c93d6 66%)}
.wc-flag.ger{background:linear-gradient(90deg,#f06206 0 33%,#ffb874 33% 66%,#f06206 66%)}
.wc-name{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper-2);width:34px;flex-shrink:0}
.wc-track{flex:1;height:12px;border-radius:7px;background:rgba(245,246,248,.08);overflow:hidden}
.wc-track i{display:block;height:100%;border-radius:7px;transform-origin:left;transform:scaleX(0);animation:wcGrow 8s cubic-bezier(.4,0,.1,1) infinite}
.wc-row.esp .wc-track i{background:linear-gradient(90deg,#5fbfa0,#c5feec)}
.wc-row.fra .wc-track i{background:linear-gradient(90deg,#6c93d6,#bcd2f5)}
.wc-row.ger .wc-track i{background:var(--grad-orange);box-shadow:0 0 14px rgba(255,127,17,.5)}
.wc-pct{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper);width:40px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.wc-row.ger .wc-name,.wc-row.ger .wc-pct{color:var(--orange-500)}
.wc-up{position:absolute;right:-4px;top:-20px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--ink);background:var(--orange-500);border-radius:6px;padding:3px 8px;box-shadow:0 6px 16px rgba(255,127,17,.45);opacity:0;animation:wcPop 8s ease infinite}
@keyframes wcSpin{to{transform:rotate(360deg)}}
@keyframes wcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wcPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes wcGrow{0%{transform:scaleX(0)}24%{transform:scaleX(var(--h))}90%{transform:scaleX(var(--h))}100%{transform:scaleX(0)}}
@keyframes wcPop{0%,32%{opacity:0;transform:scale(.5)}44%{opacity:1;transform:scale(1)}88%{opacity:1}100%{opacity:0;transform:scale(.9)}}

/* — WWDC / APPLE — crashing market chart + rented-engine phone — */
.sc-wwdc .scene{padding:16px}
.sc-ap{position:relative;width:min(560px,94%);display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.ap-chart{position:relative;width:300px;height:200px;border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));overflow:hidden;flex-shrink:0}
.ap-chart .axis{position:absolute;left:0;right:0;height:1px;background:rgba(245,246,248,.07)}
.ap-chart .axis.a1{top:30%}.ap-chart .axis.a2{top:60%}.ap-chart .axis.a3{top:85%}
.ap-chart svg{position:absolute;inset:0;width:100%;height:100%}
.ap-chart .ln{fill:none;stroke:#ff6a5a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520;animation:apDraw 7s ease-in-out infinite}
.ap-chart .area{fill:url(#apFall);opacity:0;animation:apArea 7s ease-in-out infinite}
.ap-chart .dot{fill:#ff6a5a;filter:drop-shadow(0 0 6px #ff6a5a);opacity:0;animation:apDot 7s ease-in-out infinite}
.ap-loss{position:absolute;left:14px;top:12px;font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600;color:#ff6a5a;letter-spacing:-.01em;opacity:0;animation:apLoss 7s ease infinite}
.ap-loss small{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-3);font-weight:500;margin-top:3px}
.ap-phone{position:relative;width:122px;height:200px;border-radius:24px;border:1px solid var(--line-2);background:linear-gradient(180deg,#1a1030,#0d0918);box-shadow:0 18px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;flex-shrink:0;overflow:hidden}
.ap-phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:42px;height:5px;border-radius:3px;background:rgba(245,246,248,.18)}
.ap-orb{width:64px;height:64px;border-radius:50%;background:conic-gradient(from 0deg,#FF7F11,#7CDFBF,#9ec5ff,#FF7F11);filter:blur(.4px);box-shadow:0 0 26px rgba(124,223,191,.4);animation:apSpin 5s linear infinite}
.ap-orb-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.ap-orb-wrap::after{content:'';position:absolute;width:30px;height:30px;border-radius:50%;background:#0d0918}
.ap-siri{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper);letter-spacing:.06em}
.ap-badge{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#9ec5ff;border:1px solid rgba(158,197,255,.4);border-radius:999px;padding:4px 9px;background:rgba(158,197,255,.08);opacity:0;animation:apBadge 7s ease infinite}
@keyframes apDraw{0%{stroke-dashoffset:520}40%{stroke-dashoffset:0}92%{stroke-dashoffset:0}100%{stroke-dashoffset:520}}
@keyframes apArea{0%,18%{opacity:0}48%{opacity:.5}92%{opacity:.5}100%{opacity:0}}
@keyframes apDot{0%,34%{opacity:0}46%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes apLoss{0%,40%{opacity:0;transform:translateY(6px)}52%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0}}
@keyframes apSpin{to{transform:rotate(360deg)}}
@keyframes apBadge{0%,52%{opacity:0;transform:translateY(5px)}64%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0}}
@media (max-width:520px){.sc-ap{gap:16px}.ap-chart{width:240px;height:170px}.ap-phone{width:104px;height:170px}}


/* ════════════════════════════════════════════════════════
   IN-ARTICLE EDUCATIONAL EXPLAINER (step-based, per-topic)
   <section class="art-explainer" data-explainer="...">
   ════════════════════════════════════════════════════════ */
.art-explainer{max-width:720px;margin:46px auto;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;background:radial-gradient(120% 100% at 0% 0%, rgba(44,24,80,.45), rgba(255,255,255,.015))}
.expl-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.expl-head .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--turq);border:1px solid rgba(197,254,236,.35);border-radius:999px;padding:4px 10px;white-space:nowrap}
.expl-head h3{font-size:17px;font-weight:600;margin:0;letter-spacing:-.01em}
.expl-stage{position:relative;height:300px;overflow:hidden;background:rgba(11,6,23,.4)}
.expl-step{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:26px;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.expl-step.on{opacity:1;transform:none;pointer-events:auto}
.expl-foot{padding:15px 22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:16px}
.expl-cap{flex:1;font-size:14px;color:var(--paper-2);line-height:1.5;text-wrap:pretty}
.expl-cap b{color:var(--paper)}
.expl-dots{display:flex;gap:7px;flex-shrink:0}
.expl-dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(245,246,248,.22);cursor:pointer;padding:0;transition:width .3s,background .3s}
.expl-dots button.on{width:22px;background:var(--orange)}
/* reusable scene primitives */
.ex-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.ex-bubble{background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:14px;padding:13px 17px;font-size:15px;color:var(--paper);max-width:430px;line-height:1.45}
.ex-bubble.ai{background:linear-gradient(180deg,rgba(197,254,236,.10),rgba(255,255,255,.02));border-color:rgba(197,254,236,.4)}
.ex-bubble.brand{border-color:rgba(255,127,17,.5);background:linear-gradient(180deg,rgba(255,127,17,.12),rgba(255,255,255,.02))}
.ex-bubble b{color:var(--orange)}
.ex-bubble .cite{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--turq);vertical-align:super}
.ex-chip{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper-2);border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;background:rgba(255,255,255,.04);white-space:nowrap}
.ex-chip.on{color:var(--ink);background:var(--orange);border-color:transparent;font-weight:700}
.ex-chip.turq{color:var(--turq);border-color:rgba(197,254,236,.4)}
.ex-chip.dim{opacity:.4}
.ex-card{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.03);min-width:120px;display:flex;flex-direction:column;gap:5px;transition:opacity .4s,filter .4s,border-color .4s,transform .4s}
.ex-card.win{border-color:var(--orange);box-shadow:0 0 24px rgba(255,127,17,.25);transform:translateY(-3px)}
.ex-card.dim{opacity:.35;filter:grayscale(.5)}
.ex-card .t{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--paper)}
.ex-card .s{font-size:11px;color:var(--paper-3)}
.ex-arrow{color:var(--orange);font-size:22px;animation:expulse 1.6s infinite}
.ex-big{font-family:'JetBrains Mono',monospace;font-size:clamp(34px,7vw,52px);font-weight:500;color:var(--paper);letter-spacing:-.02em;line-height:1}
.ex-big em{color:var(--orange);font-style:normal}
.ex-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3)}
.ex-lane{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-2);border-radius:12px;padding:14px;min-width:138px;background:rgba(255,255,255,.03);transition:border-color .4s,box-shadow .4s}
.ex-lane b{font-size:14px;color:var(--paper)}.ex-lane span{font-size:11px;color:var(--paper-3);line-height:1.4}
.ex-lane.hot{border-color:var(--orange);box-shadow:0 0 22px rgba(255,127,17,.2)}
.ex-track{width:min(360px,82%);height:13px;border-radius:7px;background:rgba(245,246,248,.1);overflow:hidden}
.ex-track i{display:block;height:100%;background:linear-gradient(90deg,var(--orange-600),var(--orange));box-shadow:0 0 12px rgba(255,127,17,.5)}
.ex-pulse{animation:exglow 1.9s ease-in-out infinite}
@keyframes expulse{0%,100%{opacity:.6;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
@keyframes exglow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 12px rgba(255,127,17,.55))}}
@media (max-width:520px){.expl-stage{height:344px}.expl-foot{flex-direction:column;align-items:flex-start;gap:12px}.ex-card{min-width:102px}}
@media (prefers-reduced-motion: reduce){.ex-arrow,.ex-pulse{animation:none !important}}