/* ============================================================
   EXPLAINERS — explainers.html only. The stage is a 9:16 "video
   frame" and stays dark in both themes on purpose (it's a screen,
   like the hero board), so its colours are fixed, not tokens.
   Every size inside the stage is in em; explainers.js sets the
   stage's font-size to width/24, so the same frame scales from a
   phone to a 1080x1920 export without a single media query.
   ============================================================ */
.xp-wrap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:36px;align-items:start}
@media (max-width:860px){.xp-wrap{grid-template-columns:1fr;gap:22px}}

.xp-stage{position:relative;aspect-ratio:9/16;width:100%;max-height:82vh;margin:0 auto;overflow:hidden;
  border-radius:14px;background:radial-gradient(120% 70% at 50% 0%,#18263a 0%,#0B1420 55%,#070D16 100%);
  color:#fff;font-family:'Archivo',system-ui,sans-serif;user-select:none;-webkit-user-select:none;
  box-shadow:0 24px 60px -24px rgba(5,10,20,.55);cursor:pointer;isolation:isolate}
@media (max-width:860px){.xp-stage{max-height:none;max-width:460px}}
.xp-stage:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* story-style progress segments */
.xp-prog{position:absolute;top:1.1em;left:1em;right:1em;display:flex;gap:.25em;z-index:6}
.xp-prog i{flex:1;height:.16em;border-radius:1em;background:rgba(255,255,255,.22);overflow:hidden}
.xp-prog i b{display:block;height:100%;width:0;background:#fff}

.xp-cap{position:absolute;top:2.1em;left:1em;right:1em;min-height:5.2em;z-index:5;text-align:center;
  font-weight:800;font-size:1.32em;line-height:1.18;letter-spacing:-.01em;font-variation-settings:'wdth' 92;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:.08em .26em;text-wrap:balance}
.xp-cap span{opacity:0;transform:translateY(.25em);animation:xpWord .32s cubic-bezier(.2,.8,.2,1) both;color:#C9D2DE}
.xp-cap span.hi{color:#fff;background:#EF0107;padding:0 .18em;border-radius:.1em;box-shadow:.06em .06em 0 #7A0004}
@keyframes xpWord{to{opacity:1;transform:none}}

.xp-scene{position:absolute;inset:0;z-index:1;animation:xpIn .45s ease both}
@keyframes xpIn{from{opacity:0}to{opacity:1}}
.xp-tag{position:absolute;bottom:1.1em;left:0;right:0;z-index:6;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.xp-tag b{color:#fff;font-weight:600}

/* paused / static */
.xp-paused *, .xp-paused{animation-play-state:paused!important}
.xp-static *{animation-duration:1ms!important;animation-delay:0ms!important}
.xp-static.xp-paused *{animation-play-state:running!important}
.xp-bigplay{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:rgba(5,10,18,.35);opacity:0;pointer-events:none;transition:opacity .2s}
.xp-paused .xp-bigplay{opacity:1}
.xp-bigplay span{width:4.4em;height:4.4em;border-radius:50%;background:#EF0107;display:grid;place-items:center;box-shadow:0 .5em 1.5em rgba(0,0,0,.4)}
.xp-bigplay svg{width:1.8em;height:1.8em;fill:#fff;margin-left:.2em}

/* big counter */
.xp-count{position:absolute;left:0;right:0;bottom:15%;z-index:4;text-align:center;text-shadow:0 .1em .6em rgba(0,0,0,.6)}
.xp-count b{display:block;font-size:4.6em;font-weight:900;line-height:.9;font-variation-settings:'wdth' 72;font-variant-numeric:tabular-nums}
.xp-count small{display:block;margin-top:.35em;font-size:.82em;font-weight:700;letter-spacing:.02em}
.xp-count.gold b{color:#E3B95A}

/* ---- pitch ---- */
.xp-pitch{position:absolute;left:-14%;right:-14%;top:26%;height:92%;transform-origin:50% 0;
  transform:perspective(46em) rotateX(52deg);}
.xp-pitch svg{width:100%;height:auto;display:block}
.xp-stands{position:absolute;left:0;right:0;top:15%;height:16%;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 .5em,transparent .5em 1em),linear-gradient(#2a0c10,#5c1218 60%,#1b0a0c);opacity:.85}
.xp-fade{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:3;background:linear-gradient(transparent,#070D16 88%)}

/* ---- paper (notebook + whiteboard) ---- */
.xp-paper{position:absolute;left:9%;right:9%;top:27%;bottom:15%;border-radius:.3em;transform:rotate(-1.6deg);
  background:#F7F3E6 repeating-linear-gradient(transparent 0 2.05em,#B8C7DB 2.05em 2.12em);
  background-position:0 3.2em;box-shadow:0 1.2em 2.4em rgba(0,0,0,.5);color:#14202E;font-family:'Caveat','Newsreader',cursive;padding:3.4em 1.4em 1em}
.xp-paper::before{content:"";position:absolute;top:.7em;left:6%;right:6%;height:1.1em;
  background:radial-gradient(circle at 50% 50%,#3a3a3a .2em,transparent .24em) 0 0/1.25em 1.1em repeat-x}
.xp-desk{position:absolute;inset:22% 0 0;background:radial-gradient(90% 60% at 50% 30%,#5b3b24,#2c1b10 70%,#160e08)}
.xp-line{font-size:1.5em;line-height:1.367;font-weight:600;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:xpWrite .9s steps(18,end) both}
.xp-line.dim{color:#5D6A7A}
.xp-line.red{color:#C8000A}
@keyframes xpWrite{to{clip-path:inset(0 0 0 0)}}
.xp-boxes{display:inline-flex;gap:.12em;vertical-align:middle}
.xp-boxes i{width:.42em;height:.42em;border:.07em solid #14202E;display:inline-block}

.xp-wb{position:absolute;left:6%;right:6%;top:26%;bottom:13%;border-radius:.5em;background:#EEF1F4;
  box-shadow:inset 0 0 0 .45em #2B323B,0 1.2em 2.4em rgba(0,0,0,.55)}
.xp-wb svg{position:absolute;inset:.45em;width:calc(100% - .9em);height:calc(100% - .9em)}
.xp-wb .note{position:absolute;top:.9em;right:1.1em;font-family:'IBM Plex Mono',monospace;font-size:.5em;letter-spacing:.12em;text-transform:uppercase;color:#6B7684}
.xp-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:xpDraw .9s ease-out both}
@keyframes xpDraw{to{stroke-dashoffset:0}}
.xp-stamp{opacity:0;transform:scale(1.6) rotate(-8deg);animation:xpStamp .35s cubic-bezier(.2,1.4,.4,1) both;transform-box:fill-box;transform-origin:center}
@keyframes xpStamp{to{opacity:1;transform:scale(1) rotate(-8deg)}}

/* ---- possession bar ---- */
.xp-poss{position:absolute;left:8%;right:8%;top:40%;}
.xp-poss .nums{display:flex;justify-content:space-between;align-items:flex-end;font-weight:900;font-variation-settings:'wdth' 72}
.xp-poss .nums b{font-size:4em;line-height:.9;font-variant-numeric:tabular-nums}
.xp-poss .nums small{display:block;font-size:.8em;font-weight:700;color:#C9D2DE;margin-top:.3em}
.xp-poss .bar{display:flex;height:1.2em;margin-top:.8em;border-radius:.2em;overflow:hidden;background:#1d2a3b}
.xp-poss .bar i{display:block;height:100%;transition:none}
.xp-poss .lab{margin-top:.9em;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:#93A0B2}

/* ---- full-time board ---- */
.xp-ft{position:absolute;left:7%;right:7%;top:28%;background:#0E1826;border:.08em solid #2A3A50;border-radius:.4em;overflow:hidden;
  box-shadow:0 1.4em 3em rgba(0,0,0,.6)}
.xp-ft header{display:flex;justify-content:space-between;padding:.7em 1em;background:#EF0107;font-family:'IBM Plex Mono',monospace;font-size:.6em;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.xp-ft .xr{display:flex;justify-content:space-between;align-items:center;padding:.5em 1em;font-weight:800;font-size:1.25em;font-variation-settings:'wdth' 85}
.xp-ft .xr b{font-size:1.5em;font-variant-numeric:tabular-nums}
.xp-ft .sc{padding:.2em 1em .8em;font-family:'IBM Plex Mono',monospace;font-size:.62em;color:#C9D2DE}
.xp-ft dl{margin:0;border-top:.08em solid #22324a}
.xp-ft dl div{display:grid;grid-template-columns:3em 1fr 3em;align-items:center;padding:.5em 1em;border-bottom:.06em solid #1b2a3e;
  opacity:0;animation:xpWord .3s ease both}
.xp-ft dt{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.62em;letter-spacing:.1em;text-transform:uppercase;color:#93A0B2;order:2}
.xp-ft dd{margin:0;font-weight:800;font-size:1.05em;font-variant-numeric:tabular-nums}
.xp-ft dd:first-of-type{order:1}.xp-ft dd:last-of-type{order:3;text-align:right;color:#FF5A5F}

/* ---- end card ---- */
.xp-end{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.6em;padding:0 2em}
.xp-end .wm{font-size:2.3em;font-weight:900;line-height:.95;letter-spacing:-.02em;font-variation-settings:'wdth' 80}
.xp-end .wm em{font-style:normal;color:#EF0107}
.xp-end .url{font-family:'IBM Plex Mono',monospace;font-size:.75em;letter-spacing:.06em;color:#E3B95A}
.xp-end .sub{font-size:.8em;color:#93A0B2;max-width:18em;margin:0 auto}

/* ---- controls + side panel (site theme, tokens) ---- */
.xp-ctl{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.xp-ctl button{font:600 13px 'Archivo',sans-serif;padding:9px 14px;border:1px solid var(--card-border);background:var(--card);color:var(--ink);border-radius:2px;cursor:pointer;min-height:40px}
.xp-ctl button:hover{border-color:var(--red)}
.xp-ctl button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.xp-side h2{font:800 clamp(24px,3.4vw,34px)/1.08 'Archivo',sans-serif;font-variation-settings:'wdth' 88;margin:6px 0 12px;letter-spacing:-.01em}
.xp-side .standfirst{font-family:'Newsreader',serif;font-size:18px;line-height:1.55;margin:0 0 16px}
.xp-side .meta{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.xp-side ol{font-family:'Newsreader',serif;font-size:16.5px;line-height:1.55;padding-left:1.2em;margin:0 0 18px}
.xp-side ol li{margin-bottom:6px}
.xp-src{font-size:13px;color:var(--mute);line-height:1.6}
.xp-src a{color:var(--red);font-weight:600;text-decoration:none}
.xp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.xp-card{display:block;text-align:left;border:1px solid var(--card-border);background:var(--card);color:var(--ink);padding:14px 16px;border-radius:2px;cursor:pointer;font:inherit}
.xp-card[aria-current="true"]{border-color:var(--red);box-shadow:inset 4px 0 0 var(--red)}
.xp-card b{display:block;font:800 16px/1.25 'Archivo',sans-serif;margin:4px 0}
.xp-card span{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* export mode: frame only, fills the viewport (used to render the MP4 for socials) */
.xp-export body{background:#070D16}
.xp-export body > :not(.xp-exportframe){display:none!important}
.xp-exportframe{position:fixed;inset:0}
.xp-exportframe .xp-stage{max-height:none;height:100vh;width:auto;border-radius:0;box-shadow:none}
.xp-exportframe .xp-prog,.xp-exportframe .xp-bigplay{display:none}

@media (prefers-reduced-motion:reduce){.xp-scene{animation:none}}

/* ---- ledger scenes ---- */
@keyframes xpPop{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes xpStampIn{from{opacity:0;transform:scale(1.8) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(-6deg)}}
.xp-stat{position:absolute;inset:24% 0 10%;display:grid;place-items:center;text-align:center}
.xp-grid{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 1.6em,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/1.6em 100%;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent)}
.xp-statin{position:relative;padding:0 1.2em}
.xp-statin b{display:block;font-size:5.4em;font-weight:900;line-height:.9;font-variation-settings:'wdth' 70;font-variant-numeric:tabular-nums;text-shadow:0 .08em .5em rgba(0,0,0,.6)}
.xp-stat.gold b{color:#E3B95A}
.xp-statin small{display:block;margin-top:.5em;font:700 1em/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.06em}
.xp-statin i{display:block;margin:.7em auto 0;max-width:17em;font:400 .78em/1.45 'IBM Plex Mono',monospace;font-style:normal;color:#93A0B2;letter-spacing:.02em}

.xp-stack{position:absolute;inset:26% 6% 12%}
.xp-illu{margin:0 0 1.2em;text-align:center;font:500 .55em 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6E7B8F}
.xp-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:.6em;height:78%}
.xp-flow .xp-src{display:flex;flex-direction:column;gap:.3em;justify-content:flex-end;height:100%}
.xp-blk{padding:.5em .6em;opacity:0;animation:xpPop .4s ease both}
.xp-blk b{display:block;font-size:.95em;font-weight:900;text-transform:uppercase}
.xp-blk span{display:block;font:500 .62em 'IBM Plex Mono',monospace;margin-top:.2em;opacity:.85}
.xp-blk.sp{background:#EF0107;color:#fff;height:16%}
.xp-blk.ow{background:linear-gradient(180deg,#E3B95A,#A9822F);color:#0A1622;height:66%}
.xp-arrow{font-size:2em;font-weight:900;color:#93A0B2;align-self:center;opacity:0;animation:xpPop .4s ease both}
.xp-col{position:relative;height:100%;border:.12em solid rgba(255,255,255,.35);display:flex;flex-direction:column;justify-content:flex-end;padding:.5em;overflow:hidden;opacity:0;animation:xpPop .4s ease both}
.xp-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#EF0107 0 18%,#C99A3E 18%);opacity:.9}
.xp-col b,.xp-col span{position:relative;z-index:1}
.xp-col b{font-size:.8em;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.xp-col span{font-size:.95em;font-weight:900;text-transform:uppercase;line-height:1.05}

.xp-book{position:absolute;inset:26% 7% 13%}
.xp-bookpg{height:100%;background:#EEF2E6 repeating-linear-gradient(transparent 0 2.1em,#B8C9B0 2.1em 2.16em);background-position:0 2.6em;color:#14202E;
  box-shadow:0 1.2em 2.4em rgba(0,0,0,.5);padding:.8em .9em;transform:rotate(1.2deg);position:relative;border-left:.25em solid #C8000A}
.xp-bookh{display:flex;justify-content:space-between;font:700 .55em 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#5D6A7A;margin-bottom:.9em}
.xp-brow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2em .6em;padding:.45em 0;border-bottom:.06em dashed #9DB094;opacity:0;animation:xpPop .35s ease both}
.xp-brow span{font:600 .95em 'Caveat','Newsreader',cursive;font-size:1.25em}
.xp-brow b{font:700 1em 'IBM Plex Mono',monospace}
.xp-brow em{grid-column:1/-1;justify-self:end;font:700 .62em 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#C8000A;border:.15em solid #C8000A;padding:.15em .5em;opacity:0;animation:xpStampIn .3s cubic-bezier(.2,1.4,.4,1) both}

.xp-seasons{position:absolute;inset:27% 7% 13%;display:flex;flex-direction:column}
.xp-stitle{margin:0 0 .8em;text-align:center;font:700 .66em 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#C9D2DE}
.xp-sgrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.35em}
.xp-cell{position:relative;background:#14223A;border:.06em solid #2A3A50;display:grid;place-items:center;overflow:hidden}
.xp-cell span{font:700 .9em 'IBM Plex Mono',monospace;color:#93A0B2}
.xp-cell i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;opacity:0;animation:xpStampIn .32s cubic-bezier(.2,1.4,.4,1) both}
.xp-m-x .xp-cell i{font-size:3em;font-weight:900;color:rgba(239,1,7,.85)}
.xp-m-titles .xp-cell{opacity:.45}
.xp-m-titles .xp-cell.won{opacity:1;background:linear-gradient(180deg,#3A2E12,#1A150A);border-color:#C99A3E}
.xp-m-titles .xp-cell.won span{color:#F2D48A;align-self:start;margin-top:.5em}
.xp-m-titles .xp-cell i{top:auto;bottom:.6em;font:800 .6em 'Archivo',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#0A1622;background:#E3B95A;padding:.3em .5em;inset:auto auto .6em auto;transform:none}

.xp-charges{position:absolute;inset:26% 6% 12%;display:flex;flex-direction:column;justify-content:center;gap:.28em}
.xp-crow{display:grid;grid-template-columns:3.6em 1fr auto;align-items:center;gap:.5em;background:#101C2E;border-left:.2em solid #2A3A50;padding:.42em .5em;opacity:0;animation:xpPop .3s ease both}
.xp-crow b{font:700 .7em 'IBM Plex Mono',monospace;color:#fff}
.xp-crow span{font-size:.78em;font-weight:700;color:#C9D2DE}
.xp-crow em{font:800 .55em 'Archivo',sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:.35em .55em;opacity:0;animation:xpStampIn .3s cubic-bezier(.2,1.4,.4,1) both}
.xp-crow em.v1{background:#EF0107;color:#fff}
.xp-crow em.v2{background:#B32A2F;color:#fff}
.xp-crow em.v0{background:#5C6B7D;color:#fff}

.xp-status{position:absolute;inset:30% 7% 14%;display:flex;flex-direction:column;justify-content:center;gap:.6em}
.xp-srow{display:flex;justify-content:space-between;align-items:center;background:#0E1826;border:.06em solid #2A3A50;padding:.9em 1em;opacity:0;animation:xpPop .35s ease both}
.xp-srow span{font:700 .7em 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#93A0B2}
.xp-srow b{font-size:.95em;font-weight:900;text-transform:uppercase;padding:.3em .6em}
.xp-srow b.d{background:#EF0107}
.xp-srow b.w{background:rgba(227,185,90,.18);color:#F2D48A;border:.08em solid rgba(227,185,90,.6)}
.xp-snote{margin:.6em 0 0;text-align:center;font:500 .7em 'IBM Plex Mono',monospace;color:#93A0B2;opacity:0;animation:xpPop .35s ease both}

/* ---- season scenes (terrain, wall, chips, bars, clock, shot) ---- */
.xp-ter{position:absolute;inset:22% 0 9%}
.xp-ter canvas{position:absolute;inset:0;width:100%;height:100%}
.xp-terkey{position:absolute;top:3%;left:0;right:0;margin:0}
.xp-terstrip{position:absolute;left:4%;right:4%;bottom:2%;display:grid;grid-template-columns:repeat(9,1fr);gap:.2em}
.xp-terstrip span{display:flex;flex-direction:column;align-items:center;padding:.3em 0;background:#101C2E;border-top:.16em solid #EF0107;transition:opacity .2s}
.xp-terstrip span.rL{border-top-color:#2E5FA8}.xp-terstrip span.rD{border-top-color:#93A0B2}
.xp-terstrip span.on{background:#3A2E12;border-top-color:#E3B95A}
.xp-terstrip b{font:800 .72em 'Archivo',sans-serif;font-variant-numeric:tabular-nums}
.xp-terstrip i{font:600 .48em 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.06em;color:#93A0B2}

.xp-wall{position:absolute;inset:0}
.xp-wall svg{position:absolute;left:5%;right:5%;top:33%;width:90%;height:auto;filter:drop-shadow(0 1em 1.6em rgba(0,0,0,.5))}
.xp-wall .xp-count{bottom:21%}
.xp-wkey{position:absolute;left:5%;right:5%;bottom:9%;display:flex;flex-wrap:wrap;justify-content:center;gap:.25em}
.xp-wkey span{font:600 .5em 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#C9D2DE;background:#101C2E;padding:.35em .55em;border-radius:.2em}
.xp-wkey span b{color:#fff;margin-right:.4em}.xp-wkey span.z{opacity:.35}

.xp-chips{position:absolute;inset:27% 6% 12%;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:.35em}
.xp-chips.few{grid-template-columns:1fr;inset:30% 12% 16%}
.xp-chip{position:relative;background:#101C2E;border-top:.2em solid #EF0107;padding:.55em .5em;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;opacity:0;animation:xpPop .35s ease both;transition:opacity .2s}
.xp-chip.rL{border-top-color:#2E5FA8}.xp-chip.rD{border-top-color:#93A0B2}
.xp-chip span{font:600 .48em 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#93A0B2}
.xp-chip b{font-size:.72em;font-weight:800;line-height:1.1;font-variation-settings:'wdth' 85}
.xp-chip em{font-style:normal;font-size:1.5em;font-weight:900;font-variant-numeric:tabular-nums;font-variation-settings:'wdth' 75;line-height:1}
.xp-chips.few .xp-chip{flex-direction:row;align-items:center;gap:.6em}.xp-chips.few .xp-chip b{flex:1;font-size:1em}
.xp-chip.dim{filter:saturate(.15) brightness(.42)}
.xp-chip i{position:absolute;right:.35em;bottom:.4em;font:800 .44em 'Archivo',sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;background:#E3B95A;color:#0A1622;padding:.3em .45em;opacity:0;animation:xpStampIn .3s cubic-bezier(.2,1.4,.4,1) both}

.xp-bars{position:absolute;inset:29% 7% 13%;display:flex;flex-direction:column;justify-content:center;gap:.42em}
.xp-bar{display:grid;grid-template-columns:5.6em 1fr 1.4em;align-items:center;gap:.5em;opacity:0;animation:xpPop .3s ease both}
.xp-bar span{font-size:.78em;font-weight:800;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-bar i{height:.95em;background:#101C2E;display:block}
.xp-bar u{display:block;height:100%;width:0;background:#EF0107;animation:xpGrow .7s cubic-bezier(.2,.8,.2,1) both}
.xp-bar.top u{background:#E3B95A}
.xp-bar b{font-size:1.1em;font-weight:900;font-variant-numeric:tabular-nums}
@keyframes xpGrow{to{width:var(--w)}}

.xp-clocks{position:absolute;inset:27% 8% 11%;display:flex;flex-direction:column;justify-content:center;gap:.7em}
.xp-clk{display:grid;grid-template-columns:5.2em 1fr;align-items:center;gap:.9em;transition:opacity .2s}
.xp-clk svg{width:100%;height:auto}
.xp-clk small{display:block;font:600 .6em 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#93A0B2}
.xp-clk b{display:block;font-size:2.6em;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:'wdth' 72}
.xp-clk span{font-size:.75em;font-weight:700;color:#C9D2DE}
.xp-clk.me b{color:#E3B95A}

.xp-shot{position:absolute;inset:24% 0 8%;display:flex;flex-direction:column;align-items:center}
.xp-phone{width:62%;flex:1;min-height:0;overflow:hidden;border-radius:1.6em;background:#05080d;padding:.45em;box-shadow:0 0 0 .12em #2A3A50,0 1.6em 3em rgba(0,0,0,.6)}
.xp-scr{width:100%;height:100%;border-radius:1.2em;overflow:hidden;background:#F4EEDD}
.xp-scr img{width:100%;display:block}
.xp-shot .xp-illu{margin:.9em 0 0}
.xp-zh .xp-cap{font-family:'Archivo','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:.02em}