/* ==========================================================================
   Scenes. Each one is drawn on a 560×480 canvas (see .canvas in main.css).
   [data-at="1.3"] elements switch on at beat 1, 30% through it.
   [data-prog] elements receive --k (0→1) across a beat range.
   ========================================================================== */

[data-at]:not([data-cls]) {
  transition: opacity .45s ease, translate .6s cubic-bezier(.2, .8, .2, 1), scale .6s cubic-bezier(.2, .8, .2, 1);
}
[data-at]:not([data-cls]):not(.on) { opacity: 0; translate: 0 14px; scale: .97; pointer-events: none; }

.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blinkStep { 50% { opacity: 0; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes drift { to { transform: translate(-6vmax, 5vmax) scale(1.1); } }
@keyframes floaty { 50% { transform: translateY(-8px); } }

.sticker {
  position: absolute;
  font: 800 22px/1 var(--f-display);
  background: var(--gold); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 4px 4px 0 var(--ink);
  rotate: 8deg;
}

/* Retro desktop window (generic 9x look) */
.win {
  position: absolute;
  background: #c6c6c6;
  border: 2px solid; border-color: #fff #3a3a3a #3a3a3a #fff;
  box-shadow: 2px 2px 0 #000, 10px 14px 0 rgba(0, 0, 0, .18);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif; color: #000;
}
.win-bar {
  display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 3px 0 8px;
  background: linear-gradient(90deg, #0a1f8f, #1c7fd6);
  color: #fff; font: 700 13px/1 Tahoma, Verdana, sans-serif;
  white-space: nowrap; overflow: hidden;
}
.win-bar .x { margin-left: auto; display: flex; gap: 2px; }
.win-bar .x i {
  width: 18px; height: 16px;
  display: grid; place-items: center;
  background: #c6c6c6; color: #000;
  border: 1.5px solid; border-color: #fff #3a3a3a #3a3a3a #fff;
  font: 700 10px/1 Tahoma, sans-serif; font-style: normal;
}

/* ───────── hello ───────── */
[data-scene="hello"] .scene-bg { background: radial-gradient(1200px 700px at 70% 30%, #2a1d5c 0%, #0d0b14 62%); }
.hello-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 16s ease-in-out infinite alternate; }
.hello-blob.a { width: 40vmax; height: 40vmax; left: 50%; top: -12%; background: #ff5b3a; }
.hello-blob.b { width: 34vmax; height: 34vmax; left: 72%; top: 38%; background: #7b5cff; animation-delay: -6s; }
.hello-blob.c { width: 28vmax; height: 28vmax; left: 34%; top: 62%; background: #22d3ee; opacity: .22; animation-delay: -11s; }
.hello-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 62% 50%, #000 0, transparent 72%);
  mask-image: radial-gradient(circle at 62% 50%, #000 0, transparent 72%);
}
.hello-kicker { position: absolute; left: 0; top: 34px; margin: 0; display: flex; align-items: center; gap: 10px; font: 11px/1 var(--f-pixel); color: var(--lime); text-transform: uppercase; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); color: var(--lime); animation: ping 1.6s infinite; }
.hello-name { position: absolute; left: -5px; top: 70px; margin: 0; font: 800 110px/.86 var(--f-display); letter-spacing: -.045em; color: #fff; }
.hello-name span { display: block; background: linear-gradient(90deg, #ff5b3a, #ffcf3f); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hello-role { position: absolute; left: 0; top: 282px; margin: 0; font: 500 22px/1.35 var(--f-body); color: rgba(255, 255, 255, .82); }
.hello-tags { position: absolute; left: 0; top: 360px; width: 560px; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hello-tags li {
  --on: clamp(0, calc(var(--k, 0) * 8 - var(--i)), 1);
  position: relative; isolation: isolate;
  padding: 10px 15px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  font: 600 15px/1 var(--f-body); color: #fff;
  transform: translateY(calc((1 - var(--on)) * 0px - var(--on) * 3px));
}
.hello-tags li::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; background: var(--accent); opacity: var(--on); }
.hello-start {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 16px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: 10px/1 var(--f-pixel); color: rgba(255, 255, 255, .6);
}
.hs-go { color: #fff; animation: blinkStep 1.1s steps(1) infinite; }
.hello-start:hover .hs-go { color: var(--gold); }
.hs-keys { font: 600 13px/1 var(--f-body); }
.hs-keys kbd {
  display: inline-block; padding: 4px 7px 5px; margin: 0 2px;
  font: 700 12px/1 var(--f-body); color: #fff;
  border: 1px solid rgba(255, 255, 255, .35); border-bottom-width: 3px; border-radius: 6px;
  background: rgba(255, 255, 255, .08);
}
.hs-touch { display: none; font: 600 13px/1 var(--f-body); }
/* No keyboard on touch screens: say tap / swipe instead */
@media (hover: none) and (pointer: coarse) {
  .hs-keys { display: none; }
  .hs-touch { display: inline; }
}

/* ───────── cd ───────── */
[data-scene="cd"] .scene-bg { background: #0f7d7b; }
.cd-dither { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px); background-size: 4px 4px; }
.cd-icons { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 18px; }
.ico { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 70px; font: 12px/1.1 Tahoma, Verdana, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; }
.ico i { width: 34px; height: 30px; position: relative; }
.i-pc { background: #d8d8d8; border: 2px solid #555; box-shadow: inset 0 0 0 4px #d8d8d8, inset 0 0 0 30px #1c64c8; }
.i-pc::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -8px; height: 5px; background: #bbb; border: 1px solid #555; }
.i-cd { border-radius: 50%; width: 30px !important; background: conic-gradient(#e9eef5, #b9f3ff, #ffd6f6, #fff7b8, #e9eef5); border: 1px solid #777; }
.i-cd::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #0f7d7b; }
.i-bin { width: 26px !important; background: repeating-linear-gradient(90deg, #bbb 0 4px, #999 4px 6px); border: 2px solid #555; border-radius: 0 0 5px 5px; }

.cd-disc { position: absolute; left: 372px; top: 0; width: 180px; text-align: center; }
.disc {
  width: 168px; height: 168px; margin: auto; border-radius: 50%;
  background:
    radial-gradient(circle, #0f7d7b 0 13px, #d9dde3 14px 22px, transparent 23px),
    conic-gradient(#e9eef5, #b9f3ff, #ffd6f6, #fff7b8, #c8ffd8, #e9eef5, #b9c9ff, #ffe0c2, #e9eef5);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 12px 24px rgba(0, 0, 0, .3);
  animation: spin 2.4s linear infinite;
}
.cd-disc p { margin: 12px 0 0; font: 9px/1.4 var(--f-pixel); color: #fff; }

.cd-game { left: 90px; top: 6px; width: 270px; }
.cd-game-screen { position: relative; height: 170px; margin: 3px; background: #000; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.cd-game-screen .hi { margin: 0; font: 9px/1 var(--f-pixel); color: #ff5bd1; }
.cd-game-screen .go { margin: 0; font: 12px/1 var(--f-pixel); color: #fff; animation: blinkStep 1s steps(1) infinite; }
.cd-game-screen .ship { position: absolute; bottom: 16px; left: 50%; width: 20px; height: 12px; background: var(--lime); clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: ship 3s ease-in-out infinite; }
@keyframes ship { 50% { transform: translateX(70px); } 75% { transform: translateX(-70px); } }

.cd-explorer { left: 90px; top: 6px; width: 290px; }
.cd-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; padding: 14px 10px; background: #fff; margin: 3px; }
.file { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 11px/1 Tahoma, sans-serif; padding: 3px; }
.file::before { content: ""; width: 26px; height: 30px; background: #fff; border: 1.5px solid #555; box-shadow: 2px 2px 0 #ccc; }
.file.dir::before { width: 32px; height: 24px; background: #f6d365; border-color: #a07a1f; border-radius: 2px 6px 2px 2px; }
.file.exe::before { background: linear-gradient(#1c64c8 0 30%, #fff 30%); }
.file.htm::before { background: linear-gradient(135deg, #fff 60%, #ff9f1c 60%); }
.scene[data-scene="cd"] .cd-explorer.on .file.htm { background: #0a1f8f; color: #fff; animation: fileBlink .5s steps(1) 3 .5s; }
@keyframes fileBlink { 50% { background: transparent; color: #000; } }

.cd-book {
  position: absolute; left: 8px; top: 268px;
  width: 150px; height: 196px;
  padding: 24px 14px 14px 26px;
  background: linear-gradient(135deg, #d7263d, #a4161a);
  border-radius: 4px 12px 12px 4px;
  box-shadow: inset 12px 0 0 rgba(0, 0, 0, .22), 8px 10px 0 rgba(0, 0, 0, .25);
  color: #fff;
  rotate: -8deg;
}
.cd-book .bt { display: block; font: 800 24px/1 var(--f-display); letter-spacing: -.01em; }
.cd-book .bs { display: block; margin-top: 10px; font: 600 12px/1.2 var(--f-body); opacity: .85; }
.cd-book .bi { position: absolute; right: 14px; bottom: 14px; padding: 2px 8px; border-radius: 4px; background: var(--gold); color: #111; font: 28px/1 var(--f-term); }

.cd-notepad { left: 150px; top: 148px; width: 404px; height: 326px; }
.cd-menu { padding: 3px 8px; font: 12px/1.4 Tahoma, sans-serif; }
.cd-code {
  height: calc(100% - 48px); margin: 0 3px 3px; padding: 10px 12px;
  background: #fff; color: #111;
  font: 14px/1.38 "Courier New", ui-monospace, monospace;
  white-space: pre; overflow: hidden;
}
.cd-code::after { content: ""; display: inline-block; width: 8px; height: 1.05em; vertical-align: -2px; background: #111; animation: caret 1s steps(1) infinite; }
.cd-code .t { color: #0000c8; }
.cd-code .s { color: #8b008b; font-weight: 700; }
.cd-code .p { color: #a31515; }
.cd-code .v { color: #098658; }
.scene[data-scene="cd"]:has(.cd-aha.on) .cd-code .css { background: #fff3a8; }
.cd-aha { left: 432px; top: 116px; font-size: 24px; }

/* ───────── web1 ───────── */
[data-scene="web1"] .scene-bg, [data-scene="modem"] .scene-bg { background: #05030d; }
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 120px 80px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 200px 150px, #ffd, transparent),
    radial-gradient(1px 1px at 300px 40px, #fff, transparent),
    radial-gradient(2px 2px at 350px 200px, #aff, transparent),
    radial-gradient(1px 1px at 60px 210px, #fff, transparent);
  background-size: 400px 240px;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.stars.s2 { background-size: 300px 300px; opacity: .6; animation-delay: -2s; transform: translate(60px, 40px); }
@keyframes twinkle { to { opacity: .45; } }

.w1-browser { left: 0; top: 0; width: 560px; height: 452px; }
.w1-toolbar { display: flex; align-items: center; gap: 5px; padding: 5px; border-bottom: 2px solid #8a8a8a; }
.w1-btn { padding: 3px 8px; border: 1.5px solid; border-color: #fff #3a3a3a #3a3a3a #fff; font: 700 11px/1 Tahoma, sans-serif; }
.w1-addr { flex: 1; padding: 4px 6px; background: #fff; border: 2px inset #aaa; font: 12px/1 Tahoma, sans-serif; white-space: nowrap; overflow: hidden; }
.w1-page {
  position: relative; height: calc(100% - 58px); margin: 3px; padding: 10px 14px; overflow: hidden;
  background: radial-gradient(1px 1px at 10px 10px, #fff, transparent) 0 0 / 40px 40px, radial-gradient(1px 1px at 30px 25px, #ffd, transparent) 0 0 / 40px 40px, #0a0a3a;
  color: #fff;
}
.w1-marquee { overflow: hidden; white-space: nowrap; background: #800080; padding: 4px 0; font: 700 13px/1 "Comic Sans MS", "Comic Neue", cursive; color: #ff0; }
.w1-marquee span { display: inline-block; padding-left: 100%; animation: marquee 14s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
.w1-title {
  margin: 16px 0 14px; text-align: center;
  font: 25px/1 var(--f-pixel);
  background: linear-gradient(90deg, #ff004c, #ff9f00, #ffee00, #36ff00, #00c8ff, #a200ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 #ff00ff);
}
.w1-nav { display: flex; justify-content: center; gap: 5px; }
.w1-nav span { padding: 5px 9px; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #3a3a3a #3a3a3a #fff; font: 700 12px/1 Tahoma, sans-serif; }
.w1-uc { height: 30px; margin: 14px 0; display: grid; place-items: center; background: repeating-linear-gradient(-45deg, #ffd400 0 14px, #111 14px 28px); }
.w1-uc span { padding: 5px 9px; background: #111; color: #ffd400; font: 9px/1 var(--f-pixel); }
.w1-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w1-news { padding: 8px 10px; border: 3px ridge #c0c0c0; font: 13px/1.5 Verdana, sans-serif; color: #7fffd4; }
.w1-news b { color: #ff69b4; }
.w1-news p { margin: 0; }
.w1-counter { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font: 12px/1 Verdana, sans-serif; }
.lcd { padding: 4px 8px; background: #000; color: #39ff14; border: 2px inset #666; font: 36px/1 var(--f-term); letter-spacing: 4px; text-shadow: 0 0 6px #39ff14; }
.w1-sign { cursor: pointer; padding: 5px 9px; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #3a3a3a #3a3a3a #fff; font: 700 12px/1 Tahoma, sans-serif; }
.w1-sign:active { border-color: #3a3a3a #fff #fff #3a3a3a; }
.w1-foot { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font: 11px/1 Verdana, sans-serif; color: #aaa; }
.w1-plus { position: absolute; font: 800 22px/1 var(--f-display); color: var(--lime); pointer-events: none; animation: plusUp 1s ease-out forwards; }
@keyframes plusUp { to { transform: translateY(-40px); opacity: 0; } }
.w1-pc { position: absolute; left: var(--x); top: var(--y); font-size: 34px; line-height: 1; animation: floaty 3s ease-in-out infinite; animation-delay: var(--d); }
.w1-pc em { position: absolute; left: 70%; top: -16px; padding: 4px 7px; border-radius: 8px; background: #fff; color: #111; font: 700 12px/1 var(--f-body); font-style: normal; white-space: nowrap; }

/* ───────── modem ───────── */
[data-scene="modem"] .scene-bg { background: radial-gradient(900px 500px at 75% 15%, #1d2a6b 0%, #0b1030 55%, #060818 100%); }
.moon { position: absolute; right: 8vw; top: 14vh; width: 90px; height: 90px; border-radius: 50%; box-shadow: inset -24px -10px 0 0 #f4f1d0; filter: drop-shadow(0 0 30px rgba(244, 241, 208, .5)); }
.mo-dial { left: 0; top: 0; width: 330px; }
.mo-body { padding: 10px 12px 12px; }
.mo-pcs { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 24px; }
.mo-pcs i { width: 7px; height: 7px; background: #0a1f8f; animation: blinkStep .9s steps(1) infinite; }
.mo-pcs i:nth-of-type(2) { animation-delay: .3s; }
.mo-pcs i:nth-of-type(3) { animation-delay: .6s; }
.mo-steps { margin: 0 0 8px; padding: 0; list-style: none; font: 13px/1.75 Tahoma, sans-serif; }
.mo-steps li::before { content: "› "; }
.mo-bar { height: 18px; padding: 2px; background: #fff; border: 2px inset #aaa; }
.mo-bar i { display: block; height: 100%; width: calc(var(--k, 0) * 100%); background: repeating-linear-gradient(90deg, #0a1f8f 0 10px, transparent 10px 12px); }
.mo-connect { margin-top: 10px; cursor: pointer; padding: 6px 12px; background: #c6c6c6; border: 2px solid; border-color: #fff #3a3a3a #3a3a3a #fff; font: 700 12px/1 Tahoma, sans-serif; }
.mo-connect:active, .scene.dialing .mo-connect { border-color: #3a3a3a #fff #fff #3a3a3a; }
.scene.dialing .mo-pcs i { background: #d0021b; }
.mo-clock { position: absolute; right: 0; top: 14px; text-align: right; color: #ff3b3b; }
.mo-clock b { display: block; font: 72px/1 var(--f-term); text-shadow: 0 0 14px rgba(255, 59, 59, .6); }
.mo-clock span { font: 600 14px/1 var(--f-body); color: rgba(255, 255, 255, .7); }
.mo-guestbook { position: absolute; right: -6px; top: 0; width: 214px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mo-guestbook li { padding: 9px 11px; border-radius: 10px; background: #fffbe6; color: #222; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); rotate: var(--r); font: 12px/1.3 var(--f-body); }
.mo-guestbook b { display: block; font: 700 14px/1.25 var(--f-body); }
.mo-map { position: absolute; left: 0; top: 214px; width: 560px; height: 266px; }
.mo-map svg { width: 100%; height: 100%; overflow: visible; }
.arc { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease; }
.arc.on { stroke-dashoffset: 0; }
.ping circle { fill: var(--gold); }
.ping.home circle { fill: var(--accent); }
.ping .ring { fill: none; stroke: currentColor; color: var(--gold); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: ring 1.8s ease-out infinite; }
.ping.home .ring { color: var(--accent); }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }
.ping:not(.on) { opacity: 0; }
.ping { transition: opacity .4s; }

/* ───────── wrongturn ───────── */
[data-scene="wrongturn"] .scene-bg { background: #16141c; }
.vhs-lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px); }
.wt-ff { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; color: #fff; }
.wt-ff p { margin: 0; }
.wt-ff-label { font: 48px/1 var(--f-term); text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; animation: blinkStep 1s steps(1) infinite; }
.wt-age { font: 800 156px/.85 var(--f-display); letter-spacing: -.04em; }
.wt-age b { color: var(--gold); }
.wt-learn { font: 26px/1 var(--f-term); color: var(--lime); }
.wt-tc { position: absolute; right: 0; top: 0; font: 30px/1 var(--f-term); color: rgba(255, 255, 255, .6); }
.wt-signs { position: absolute; inset: 0; }
.wt-sign {
  position: absolute; top: 24px; width: 258px; height: 150px;
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: #1f6b3a; color: #fff;
  border: 4px solid #fff; outline: 4px solid #1f6b3a; border-radius: 14px;
  font: 700 26px/1.05 var(--f-body);
  transition: opacity .5s, filter .5s, box-shadow .5s;
}
.wt-sign.left { left: 4px; }
.wt-sign.right { right: 4px; justify-content: flex-end; text-align: right; }
.wt-sign .arrow { font: 800 56px/1 var(--f-display); }
.wt-wrongway {
  position: absolute; left: 26px; top: 136px; width: 214px; padding: 12px;
  background: #d0021b; color: #fff; text-align: center;
  border: 4px solid #fff; outline: 3px solid #d0021b; border-radius: 6px;
  font: 800 38px/1 var(--f-display); letter-spacing: .04em;
  rotate: -8deg;
}
.wt-wrongway b { display: block; }
.wt-wrongway[data-at]:not(.on) { scale: 1.8; translate: 0 0; }
.wt-months { position: absolute; left: 28px; top: 262px; margin: 0; font: 26px/1 var(--f-term); color: rgba(255, 255, 255, .65); }
.wt-check { position: absolute; right: 26px; top: 200px; padding: 10px 16px; border-radius: 999px; background: var(--lime); color: #111; font: 700 18px/1 var(--f-body); rotate: 4deg; }
.scene[data-scene="wrongturn"]:has(.wt-check.on) .wt-sign.left { opacity: .35; filter: grayscale(1); }
.scene[data-scene="wrongturn"]:has(.wt-check.on) .wt-wrongway { opacity: .4; }
.scene[data-scene="wrongturn"]:has(.wt-check.on) .wt-sign.right { box-shadow: 0 0 0 10px rgba(182, 242, 60, .35), 0 0 50px rgba(182, 242, 60, .6); }
.wt-rebuild { position: absolute; left: 50px; right: 50px; bottom: 24px; padding: 16px 20px; background: #0d0b14; color: #fff; border: 2px solid rgba(255, 255, 255, .15); border-radius: 18px; }
.wt-rebuild p { margin: 0; font: 600 16px/1.2 var(--f-body); }
.wt-bar { height: 14px; margin: 12px 0; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.wt-bar i { display: block; height: 100%; width: calc(var(--k, 0) * 100%); background: linear-gradient(90deg, var(--accent), var(--gold)); }
.wt-rebuild .wt-ver { font: 24px/1 var(--f-term); color: rgba(255, 255, 255, .6); }
.wt-ver b { color: var(--gold); }

/* ───────── seo ───────── */
[data-scene="seo"] .scene-bg { background: #f4f6fb; }
.seo-grid { position: absolute; inset: 0; background-image: radial-gradient(#c9d2e6 1px, transparent 1px); background-size: 22px 22px; }
.seo-search {
  position: absolute; left: 0; right: 0; top: 0; height: 58px;
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: #fff; border-radius: 999px;
  box-shadow: 0 4px 18px rgba(26, 42, 90, .12), 0 0 0 1px #e3e7f0;
  font: 500 21px/1 var(--f-body); color: #1a1a2e;
}
.seo-search svg { width: 21px; height: 21px; color: #5b6478; flex: none; }
.seo-q:empty::before { content: "Search the web…"; color: #9aa3b5; }
.seo-search .caret { width: 2px; background: #1a1a2e; margin-left: -10px; }
.seo-checklist { position: absolute; left: 0; right: 0; top: 82px; padding: 22px 26px; background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(26, 42, 90, .08); color: #1a1a2e; }
.seo-h { margin: 0 0 10px; font: 800 24px/1.1 var(--f-display); letter-spacing: -.01em; }
.seo-checklist ul { margin: 0; padding: 0; list-style: none; }
.seo-checklist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #e3e7f0; font: 500 19px/1.2 var(--f-body); }
.seo-checklist li:last-child { border: 0; }
.seo-checklist li::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #1fbf75; color: #fff; font: 700 14px/26px var(--f-body); text-align: center; }
.seo-results { position: absolute; left: 0; right: 0; top: 76px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.seo-results li { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 12px 18px; background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(26, 42, 90, .07); }
.seo-results .skel span { display: block; height: 9px; border-radius: 5px; background: #e6e9f1; }
.seo-results .skel .u { width: 28%; }
.seo-results .skel .t { width: 62%; height: 13px; background: #d3d9e7; }
.seo-results .skel .d { width: 86%; }
.seo-results .mine { padding: 14px 18px; box-shadow: 0 0 0 3px var(--accent), 0 12px 30px rgba(255, 91, 58, .25); }
.mine .u { font: 13px/1 var(--f-body); color: #1f7a3f; }
.redact { background: #111; color: #111; border-radius: 2px; font-style: normal; font-size: 11px; }
.mine .t { font: 600 19px/1.2 var(--f-body); color: #1a0dab; }
.mine .d { font: 13px/1.35 var(--f-body); color: #4d5156; }
.rank { position: absolute; right: -14px; top: -18px; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 24px/60px var(--f-display); text-align: center; box-shadow: 3px 3px 0 #111; rotate: 8deg; }
.rank[data-at]:not(.on) { scale: 2; translate: 0 0; }
.seo-chart { position: absolute; left: 0; right: 0; bottom: 0; height: 152px; padding: 16px 20px; background: #0d0b14; color: #fff; border-radius: 20px; overflow: hidden; }
.seo-chart p { margin: 0; position: relative; z-index: 1; }
.seo-chart-h { font: 9px/1 var(--f-pixel); color: rgba(255, 255, 255, .6); }
.seo-big { margin-top: 12px !important; font: 800 42px/1 var(--f-display); letter-spacing: -.02em; }
.seo-note { margin-top: 8px !important; font: 600 13px/1 var(--f-body); color: var(--gold); }
.seo-chart svg { position: absolute; right: 0; bottom: 0; width: 58%; height: 100%; }
.seo-line { fill: none; stroke: url(#seoGrad); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k, 0)); vector-effect: non-scaling-stroke; }

/* ───────── toolbar ───────── */
[data-scene="toolbar"] .scene-bg { background: linear-gradient(#2f7fdc 0%, #7cc0ff 55%, #bfe3ff 72%); }
.tb-hill { position: absolute; left: -25%; right: -25%; bottom: -46vh; height: 74vh; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, #6bd85a, #2c8f2c 60%, #1d6d1f); }
.tb-cloud { position: absolute; width: 280px; height: 70px; border-radius: 999px; background: #fff; filter: blur(10px); opacity: .85; animation: cloud 50s linear infinite; }
.tb-cloud.c1 { top: 14vh; left: -10vw; }
.tb-cloud.c2 { top: 30vh; left: 40vw; width: 200px; animation-duration: 70s; animation-delay: -30s; }
@keyframes cloud { to { transform: translateX(120vw); } }
.tb-site { left: 40px; top: 20px; width: 480px; height: 290px; }
.tb-page { display: flex; flex-direction: column; gap: 12px; height: calc(100% - 30px); margin: 3px; padding: 16px; background: #fff; }
.tb-sponsor { padding: 10px 12px; border: 2px dashed var(--accent); border-radius: 10px; background: #fff4f1; }
.tb-sponsor small { display: block; margin-bottom: 6px; font: 8px/1 var(--f-pixel); color: var(--accent); }
.tb-sponsor b { font: 700 15px/1.2 var(--f-body); }
.tb-visits { margin: 0; font: 500 18px/1.2 var(--f-body); }
.tb-lines span { display: block; height: 10px; margin: 9px 0; border-radius: 5px; background: #e8eaf0; }
.tb-lines span:nth-child(2) { width: 80%; } .tb-lines span:nth-child(4) { width: 60%; }
.tb-scale { position: absolute; left: 100px; top: 262px; width: 360px; height: 210px; }
.tb-post { position: absolute; left: 50%; top: 46px; width: 12px; height: 150px; margin-left: -6px; background: #3a2a1a; border-radius: 6px; }
.tb-base { position: absolute; left: 50%; bottom: 0; width: 120px; height: 16px; margin-left: -60px; background: #3a2a1a; border-radius: 8px; }
.tb-beam { position: absolute; left: 10px; right: 10px; top: 40px; height: 10px; background: #3a2a1a; border-radius: 5px; transform: rotate(calc(var(--tilt, 0) * 1deg)); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.tb-pan { position: absolute; top: 10px; width: 130px; padding: 10px 8px 14px; background: #fff; color: #111; text-align: center; border: 3px solid #111; border-radius: 0 0 60px 60px; box-shadow: 4px 4px 0 #111; font-size: 26px; transform: rotate(calc(var(--tilt, 0) * -1deg)); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.tb-pan b { display: block; font: 700 15px/1.2 var(--f-body); }
.tb-pan.l { left: -24px; } .tb-pan.r { right: -24px; }
.tb-pops { position: absolute; inset: 0; pointer-events: none; }
.tb-pop {
  --o: clamp(0, calc(var(--k, 0) * 10 - var(--i)), 1);
  position: absolute; left: var(--x); top: var(--y); width: 224px;
  background: #ece9d8; color: #111;
  border: 2px solid #0a246a; border-radius: 8px 8px 4px 4px;
  box-shadow: 4px 6px 0 rgba(0, 0, 0, .35);
  font: 13px/1.3 Tahoma, var(--f-body);
  opacity: var(--o);
  transform: scale(calc(.6 + var(--o) * .4)) rotate(var(--r, 0deg));
  transition: transform .6s cubic-bezier(.5, 0, .75, 0), opacity .5s;
}
.scene[data-beat="2"] .tb-pop, .scene[data-beat="3"] .tb-pop { pointer-events: auto; }
.tb-pop .win-bar { height: 22px; border-radius: 6px 6px 0 0; background: linear-gradient(#0a5fe0, #0846b8); font-size: 12px; }
.tb-pop .win-bar .x i { cursor: pointer; background: #d9532c; color: #fff; border-color: #ffb199 #7a1e05 #7a1e05 #ffb199; }
.tb-pop p { margin: 0; padding: 9px 10px; }
.tb-pop-btns { display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px 9px; }
.tb-pop-btns span { padding: 3px 10px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ecebe6); font-size: 12px; }
.tb-pop.closed { opacity: 0 !important; transform: scale(.3) !important; pointer-events: none !important; }
.scene.resolved .tb-pop { opacity: 0 !important; transform: translate(var(--fx), var(--fy)) rotate(50deg) scale(.5) !important; pointer-events: none !important; }
.tb-offers { position: absolute; right: -6px; top: -14px; z-index: 2; margin: 0; padding: 8px 14px; border-radius: 999px; background: #111; color: #fff; font: 700 15px/1 var(--f-body); box-shadow: 3px 3px 0 var(--accent); }
.tb-offers b { color: var(--gold); }
.tb-choice { position: absolute; left: 70px; right: 70px; top: 150px; z-index: 3; padding: 22px; background: #fff; text-align: center; border: 3px solid #111; border-radius: 20px; box-shadow: 8px 8px 0 #111; }
.tb-q { margin: 0 0 16px; font: 800 30px/1 var(--f-display); color: #111; letter-spacing: -.02em; }
.tb-btns { display: flex; justify-content: center; gap: 10px; }
.tb-btns button { cursor: pointer; padding: 12px 14px; border: 3px solid #111; border-radius: 12px; font: 700 15px/1 var(--f-body); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tb-take { background: #ffe066; color: #111; }
.tb-protect { background: #1fbf75; color: #fff; }
.tb-protect:hover { transform: scale(1.05); }
.tb-take.dodge { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(-4deg); }
.tb-take.shake { animation: shake .4s; }
@keyframes shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.scene.resolved .tb-choice { opacity: 0 !important; scale: .85 !important; pointer-events: none; }
.tb-shield { position: absolute; left: 50%; top: 140px; z-index: 4; width: 260px; margin-left: -130px; padding: 22px; text-align: center; background: #111; color: #fff; border-radius: 26px; box-shadow: 0 0 0 6px #1fbf75, 0 30px 60px rgba(0, 0, 0, .4); opacity: 0; scale: .6; transition: opacity .4s .2s, scale .6s .2s cubic-bezier(.2, 1.6, .4, 1); }
.tb-shield span { font-size: 54px; }
.tb-shield b { display: block; margin-top: 6px; font: 800 34px/1 var(--f-display); }
.tb-shield small { font: 9px/1 var(--f-pixel); color: var(--lime); }
.scene.resolved .tb-shield { opacity: 1; scale: 1; }

/* ───────── goodbye ───────── */
[data-scene="goodbye"] .scene-bg { background: radial-gradient(circle at 62% 45%, #1d1712 0%, #050505 62%); }
.crt { position: absolute; left: 50px; top: 0; width: 460px; height: 380px; padding: 26px 28px 52px; border-radius: 28px; background: linear-gradient(#e3dccb, #c9c0aa); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12), 0 30px 60px rgba(0, 0, 0, .7); }
.crt-led { position: absolute; right: 34px; bottom: 20px; width: 10px; height: 10px; border-radius: 50%; background: #3cff6b; box-shadow: 0 0 8px #3cff6b; transition: background .3s .5s, box-shadow .3s .5s; }
.crt:has(.crt-screen.off) .crt-led { background: #4a4a2a; box-shadow: none; }
.crt-stand { position: absolute; left: 190px; top: 378px; width: 180px; height: 44px; background: linear-gradient(#d4ccb8, #a99f88); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); }
.crt-screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; border-radius: 24px / 20px; box-shadow: inset 0 0 40px #000, inset 0 0 0 3px rgba(0, 0, 0, .5); }
.crt-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .35) 2px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); }
.crt-content { position: absolute; inset: 0; transform-origin: center; }
.crt-screen.off .crt-content { animation: crtOff .75s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes crtOff {
  0% { transform: scale(1, 1); filter: brightness(1); }
  45% { transform: scale(1, .006); filter: brightness(4); }
  75% { transform: scale(.2, .006); filter: brightness(4); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}
.gb-page1 { position: absolute; inset: 0; padding: 22px; text-align: center; background: #0a0a3a; color: #fff; }
.gb-page1 p { margin: 0; }
.gb-h { margin-bottom: 26px !important; font: 13px/1 var(--f-pixel); color: var(--gold); }
.gb-big { font: 700 25px/1.3 "Comic Sans MS", "Comic Neue", cursive; }
.gb-thanks { margin-top: 22px !important; font: 700 17px/1.3 Verdana, sans-serif; color: #ff69b4; animation: blinkStep 1.4s steps(1) infinite; }
.gb-sig { margin-top: 18px !important; font: 13px/1 Verdana, sans-serif; color: #7fffd4; }
.gb-page2 { position: absolute; inset: 0; padding: 30px 30px; background: #000; color: #33ff66; font: 30px/1.5 var(--f-term); text-shadow: 0 0 8px rgba(51, 255, 102, .55); }
.gb-page2 .r { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.gb-page2 .r i { flex: 1; border-bottom: 3px dotted rgba(51, 255, 102, .5); }
.gb-page2 .end { margin-top: 18px; }
.gb-after { position: absolute; left: 0; right: 0; top: 436px; margin: 0; text-align: center; font: 32px/1 var(--f-term); color: #ffa500; text-shadow: 0 0 10px rgba(255, 165, 0, .6); }

/* ───────── studio ───────── */
[data-scene="studio"] .scene-bg { background: #241640; }
.px-stars { position: absolute; inset: 0; background-image: linear-gradient(#fff, #fff), linear-gradient(#ffcf3f, #ffcf3f), linear-gradient(#9ef, #9ef); background-size: 3px 3px; background-repeat: no-repeat; background-position: 12% 18%, 64% 10%, 84% 30%; }
.px-stars::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#fff 1px, transparent 1.5px); background-size: 70px 60px; opacity: .35; }
.st-sign {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  margin: 0; padding: 16px 22px; white-space: nowrap; text-align: center;
  background: #1a0f30; color: #ff5bd1;
  border: 4px solid #ff5bd1;
  box-shadow: 0 0 22px rgba(255, 91, 209, .45), inset 0 0 18px rgba(255, 91, 209, .3);
  font: 22px/1 var(--f-pixel); text-shadow: 0 0 12px #ff5bd1, 3px 3px 0 #000;
  animation: neon 3s steps(1) infinite;
}
.st-sign small { display: block; margin-top: 10px; font: 8px/1 var(--f-pixel); color: #9ef; text-shadow: none; }
@keyframes neon { 0%, 100% { opacity: 1; } 62% { opacity: .5; } 64% { opacity: 1; } }
.st-room { position: absolute; left: 0; right: 0; top: 104px; height: 230px; background: linear-gradient(#3a2566, #2e1d52); border-bottom: 10px solid #120a24; }
.st-room::before { content: ""; position: absolute; left: 30px; top: 22px; width: 90px; height: 60px; background: linear-gradient(#0d1b4a, #3a2566); border: 6px solid #120a24; box-shadow: inset 0 0 0 3px #4b3480; }
.st-dev { position: absolute; left: var(--x); bottom: 0; width: 120px; height: 200px; }
.st-dev i { position: absolute; display: block; }
.st-dev .screen { left: 16px; top: 34px; width: 90px; height: 64px; background: #0b0b1a; border: 6px solid #4a4a5a; box-shadow: 0 0 22px rgba(110, 243, 255, .35); overflow: hidden; }
.st-dev .screen::before { content: ""; position: absolute; left: 10px; bottom: 10px; width: 10px; height: 10px; background: var(--c); animation: hop .9s steps(2) infinite; animation-delay: var(--d); }
.st-dev .screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, #3cff6b 0 8px, #2bb84f 8px 16px); }
@keyframes hop { 50% { transform: translate(40px, -18px); } }
.st-dev .stand { left: 54px; top: 98px; width: 14px; height: 12px; background: #4a4a5a; }
.st-dev .desk { left: 0; top: 110px; width: 120px; height: 14px; background: #8b5a2b; box-shadow: 0 14px 0 -4px #5e3a17; }
.st-dev .desk::before, .st-dev .desk::after { content: ""; position: absolute; top: 14px; width: 10px; height: 76px; background: #5e3a17; }
.st-dev .desk::before { left: 8px; } .st-dev .desk::after { right: 8px; }
.st-dev .head { left: 42px; top: 92px; width: 36px; height: 34px; background: #f2c29b; box-shadow: inset 0 14px 0 var(--hair); animation: bounce 1s steps(2) infinite; animation-delay: var(--d); }
.st-dev .body { left: 34px; top: 126px; width: 52px; height: 58px; background: var(--c); box-shadow: inset -8px 0 0 rgba(0, 0, 0, .2); }
@keyframes bounce { 50% { transform: translateY(-4px); } }
.st-hud { position: absolute; left: 0; right: 0; bottom: 0; height: 116px; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; }
.st-hud > div { padding: 14px; background: #120a24; color: #fff; border: 4px solid #fff; box-shadow: 4px 4px 0 #000; font: 9px/1 var(--f-pixel); }
.st-hud b { display: block; margin-top: 14px; font: 28px/1 var(--f-pixel); color: var(--gold); }
.st-xp i { display: block; height: 16px; margin-top: 14px; width: calc(var(--k, 0) * 100%); background: linear-gradient(90deg, var(--lime), #3cff9b); border: 2px solid #fff; }
.st-xp b { margin-top: 12px; font-size: 14px; color: var(--lime); }

/* ───────── android ───────── */
[data-scene="android"] .scene-bg { background: #d8f5e6; }
.an-circle { position: absolute; border-radius: 50%; }
.an-circle.a { width: 52vmax; height: 52vmax; right: -12vmax; top: -18vmax; background: #c2f0d8; }
.an-circle.b { width: 30vmax; height: 30vmax; left: 34vw; bottom: -12vmax; background: #aee9c9; }
.an-phone { position: absolute; left: 10px; top: 0; width: 240px; height: 480px; padding: 16px 10px 40px; background: #1d1f24; border-radius: 30px; box-shadow: 12px 14px 0 rgba(16, 102, 63, .2); }
.an-home { position: absolute; left: 50%; bottom: 12px; width: 60px; height: 14px; margin-left: -30px; border-radius: 8px; border: 2px solid #555; }
.an-screen { position: relative; height: 100%; overflow: hidden; background: #fafafa; border-radius: 4px; }
.an-status { margin: 0; height: 22px; padding: 0 8px; background: #111; color: #fff; text-align: right; font: 11px/22px var(--f-body); }
.an-grid { position: absolute; top: 34px; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; }
.an-grid span { text-align: center; font: 600 10px/1.2 var(--f-body); color: #333; }
.an-grid i { display: block; width: 52px; height: 52px; margin: 0 auto 5px; border-radius: 12px; background: var(--g); }
.an-listing { position: absolute; inset: 34px 12px 12px; }
.an-app { display: flex; align-items: center; gap: 10px; }
.an-icon { flex: none; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #3ddc84, #0f9d58); color: #fff; font-size: 30px; }
.an-app b { display: block; font: 700 16px/1.2 var(--f-body); color: #111; }
.an-app small { font: 12px/1 var(--f-body); color: #1f8a4c; }
.an-stars { margin: 14px 0; color: #f5a623; font-size: 17px; letter-spacing: 2px; }
.an-install { display: block; border-radius: 4px; background: #1fbf75; color: #fff; text-align: center; font: 700 14px/42px var(--f-body); letter-spacing: .08em; }
.an-dl { margin: 34px 0 0; text-align: center; }
.an-dl b { display: block; font: 800 38px/1 var(--f-display); color: #111; letter-spacing: -.02em; }
.an-dl small { font: 600 11px/1 var(--f-body); color: #666; text-transform: uppercase; letter-spacing: .1em; }
.an-panel { position: absolute; left: 272px; right: 0; top: 30px; padding: 22px; background: #fff; color: #10331f; border-radius: 22px; box-shadow: 0 14px 34px rgba(16, 102, 63, .16); }
.an-h { margin: 0 0 14px; font: 800 22px/1.12 var(--f-display); letter-spacing: -.01em; }
.an-factors ul { margin: 0; padding: 0; list-style: none; }
.an-factors li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px dashed #d4eadd; font: 600 16px/1.2 var(--f-body); }
.an-factors li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 7px; background: #1fbf75; color: #fff; font: 700 13px/24px var(--f-body); text-align: center; }
.an-note { margin: 16px 0 0; font: 9px/1.5 var(--f-pixel); color: #1f8a4c; }
.an-chart { top: 30px; height: 420px; }
.an-bars { display: flex; align-items: flex-end; gap: 3px; height: 268px; margin: 8px 0 14px; border-bottom: 2px solid rgba(16, 51, 31, .15); }
.an-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(#3ddc84, #1fbf75); transform-origin: bottom; transform: scaleY(clamp(0, calc(var(--k, 0) * 28 - var(--i)), 1)); }
.an-day { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 16px/1 var(--f-body); }
.an-day b { font: 800 22px/1 var(--f-display); }
.an-badge { margin-left: auto; padding: 6px 8px; border-radius: 6px; background: #10331f; color: var(--lime); font: 8px/1 var(--f-pixel); }

/* ───────── publishing ───────── */
[data-scene="publishing"] .scene-bg { background: #ffd23f; }
.halftone { position: absolute; inset: 0; background-image: radial-gradient(#e0a800 1.6px, transparent 2px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%); mask-image: linear-gradient(120deg, #000, transparent 70%); }
.pb-board { position: absolute; left: 0; right: 0; top: 0; height: 300px; padding: 24px 26px; background: #111; color: #fff; border-radius: 24px; box-shadow: 10px 10px 0 #b8860b; }
.pb-h { margin: 0; font: 800 28px/1.1 var(--f-display); letter-spacing: -.01em; }
.pb-h span { margin-right: 10px; padding: 5px 7px; border-radius: 5px; background: var(--accent); font: 9px/1 var(--f-pixel); vertical-align: 5px; }
.pb-h small { display: block; margin-top: 8px; font: 500 14px/1 var(--f-body); color: rgba(255, 255, 255, .6); }
.pb-teamcount { position: absolute; right: 26px; top: 22px; margin: 0; font: 600 14px/1 var(--f-body); color: rgba(255, 255, 255, .6); }
.pb-teamcount b { font: 800 40px/1 var(--f-display); color: var(--gold); vertical-align: -4px; }
.pb-team { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 24px; }
.seat { position: relative; aspect-ratio: 1; display: grid; place-items: end center; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.seat i {
  --o: clamp(0, calc(var(--k, 0) * 14 - var(--i) + 1), 1);
  width: 72%; height: 82%;
  opacity: var(--o);
  transform: translateY(calc((1 - var(--o)) * 50%));
  background: radial-gradient(circle at 50% 30%, var(--c) 0 22%, transparent 23%), radial-gradient(ellipse 50% 46% at 50% 100%, var(--c) 0 98%, transparent 100%);
}
.seat.you { background: var(--accent); }
.seat.you::after { content: "YOU"; position: absolute; top: 5px; font: 7px/1 var(--f-pixel); color: #fff; }
.pb-stats { position: absolute; left: 0; right: 0; top: 330px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pb-stat { padding: 18px 16px; background: #fff; color: #111; border: 3px solid #111; border-radius: 18px; box-shadow: 5px 5px 0 #111; }
.pb-stat b { display: block; font: 800 44px/1 var(--f-display); letter-spacing: -.03em; }
.pb-stat b.sm { font-size: 33px; line-height: 44px; }
.pb-stat small { display: block; margin-top: 6px; font: 600 14px/1.2 var(--f-body); color: #444; }

/* ───────── html5 ───────── */
[data-scene="html5"] .scene-bg { background: linear-gradient(135deg, #4a1fd6, #2a6cf0 60%, #18a8e8); }
.h5-bokeh { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 60px, transparent 61px), radial-gradient(circle at 80% 70%, rgba(255,255,255,.12) 0 90px, transparent 91px), radial-gradient(circle at 60% 15%, rgba(255,255,255,.1) 0 40px, transparent 41px); filter: blur(8px); }
.h5-call { position: absolute; left: 0; right: 0; top: 10px; height: 430px; padding: 18px; background: rgba(13, 11, 26, .92); color: #fff; border-radius: 24px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.h5-call-top { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 18px/1 var(--f-body); }
.h5-call-top .rec { font: 8px/1 var(--f-pixel); color: #ff3b5c; animation: blinkStep 1.2s steps(1) infinite; }
.h5-route { margin-left: auto; padding: 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); font: 600 13px/1 var(--f-body); }
.h5-tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; height: 300px; margin: 16px 0 14px; }
.tile { position: relative; display: grid; place-items: end center; overflow: hidden; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); }
.tile i { width: 60%; height: 80%; background: radial-gradient(circle at 50% 30%, var(--c) 0 20%, transparent 21%), radial-gradient(ellipse 50% 44% at 50% 100%, var(--c) 0 98%, transparent 100%); opacity: .9; }
.tile.me { box-shadow: inset 0 0 0 3px var(--lime); animation: speak 1.2s ease-in-out infinite; }
.tile em { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 6px; background: rgba(0, 0, 0, .6); font: 600 11px/1 var(--f-body); font-style: normal; }
@keyframes speak { 50% { box-shadow: inset 0 0 0 5px var(--lime); } }
.h5-call-bot { margin: 0; font: 600 14px/1 var(--f-body); color: rgba(255, 255, 255, .65); }
.h5-chat { position: absolute; left: 0; top: 0; width: 320px; height: 474px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 0 14px 14px; background: #fff; color: #111; border-radius: 28px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.h5-chat-top { display: flex; align-items: center; gap: 10px; margin: 0 -14px 4px; padding: 16px; background: #f1f2f7; font: 700 16px/1 var(--f-body); }
.h5-chat-top .dot { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff5b3a, #7b5cff); }
.msg { max-width: 84%; margin: 0; padding: 10px 13px; border-radius: 18px; font: 500 15px/1.3 var(--f-body); }
.msg.in { align-self: flex-start; background: #eef0f6; border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: #2a6cf0; color: #fff; border-bottom-right-radius: 6px; }
.msg.game { align-self: flex-start; width: 230px; padding: 0; overflow: hidden; background: #eef0f6; border-bottom-left-radius: 6px; }
.msg.game p { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 10px 12px; font: 13px/1 var(--f-body); }
.msg.game p span { padding: 6px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; }
.h5-game { position: relative; height: 170px; overflow: hidden; background: linear-gradient(#1b1442, #3b1f7a); }
.h5-game i { position: absolute; left: 50%; width: 90px; height: 26px; margin-left: -45px; border-radius: 4px; animation: stack 4s ease-in infinite; }
.h5-game .b1 { bottom: 0; background: #ff5b3a; animation-delay: 0s; }
.h5-game .b2 { bottom: 26px; background: #ffcf3f; animation-delay: .5s; margin-left: -40px; }
.h5-game .b3 { bottom: 52px; background: #22d3ee; animation-delay: 1s; margin-left: -50px; }
.h5-game .b4 { bottom: 78px; background: #b6f23c; animation-delay: 1.5s; margin-left: -43px; }
@keyframes stack { 0% { transform: translateY(-220px); opacity: 0; } 8% { opacity: 1; } 15%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.h5-game .score { position: absolute; left: 10px; top: 10px; font: 8px/1 var(--f-pixel); color: #fff; }
.h5-plats { position: absolute; right: 0; top: 18px; width: 214px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.h5-plats li { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .45); color: #fff; font: 700 19px/1.1 var(--f-body); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.h5-plats small { display: block; margin-top: 4px; font: 500 13px/1.2 var(--f-body); opacity: .8; }

/* ───────── founder ───────── */
[data-scene="founder"] .scene-bg { background: linear-gradient(160deg, #ffe9f3, #ece8ff 55%, #e2fbf1); }
.fd-blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; }
.fd-blob.a { width: 40vmax; height: 40vmax; right: -10vmax; top: -10vmax; background: #ffc2d4; }
.fd-blob.b { width: 34vmax; height: 34vmax; left: 30vw; bottom: -14vmax; background: #b9f5dc; }
.fd-term { position: absolute; left: 0; right: 0; top: 0; padding: 16px 24px 20px; background: #0d0b14; color: #e8e6f0; border-radius: 20px; box-shadow: 0 24px 50px rgba(42, 29, 92, .25); font: 26px/1.45 var(--f-term); }
.fd-term p { margin: 0; }
.fd-dots { display: flex; gap: 7px; margin-bottom: 10px !important; }
.fd-dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.fd-dots i:nth-child(2) { background: #febc2e; } .fd-dots i:nth-child(3) { background: #28c840; }
.fd-term .warn { color: var(--gold); }
.fd-term .ok { color: #3cff9b; }
.fd-duo { position: absolute; left: 0; right: 0; top: 318px; display: flex; justify-content: center; align-items: center; gap: 18px; }
.fd-p { width: 116px; height: 116px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; border: 3px solid #111; box-shadow: 5px 5px 0 #111; font: 9px/1 var(--f-pixel); }
.fd-p.alt { background: var(--violet); }
.fd-plus { font: 800 50px/1 var(--f-display); color: #111; }
.fd-switch { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; }
.fd-row { display: flex; align-items: center; gap: 26px; }
.fd-from, .fd-to { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fd-from span { position: relative; font-size: 100px; line-height: 1; filter: grayscale(.6); }
.fd-from span::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 8px; border-radius: 4px; background: #e0182d; rotate: -20deg; }
.fd-from small, .fd-to small { font: 700 16px/1 var(--f-body); color: #111; }
.fd-arrow { font: 800 60px/1 var(--f-display); color: #111; }
.fd-apps { display: grid; grid-template-columns: repeat(2, 64px); gap: 12px; }
.fd-apps i { width: 64px; height: 64px; border-radius: 16px; background: var(--g); box-shadow: 0 10px 20px rgba(0, 0, 0, .15), inset 0 -4px 0 rgba(0, 0, 0, .12); }
.fd-chips { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fd-chips li { padding: 12px 16px; border-radius: 999px; background: #111; color: #fff; font: 700 17px/1 var(--f-body); box-shadow: 4px 4px 0 var(--accent); }
.fd-exit { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.fd-icon { width: 210px; height: 210px; display: grid; place-items: center; border-radius: 50px; background: linear-gradient(135deg, #ff5b3a, #ffcf3f); color: #fff; font-size: 100px; box-shadow: 0 30px 60px rgba(255, 91, 58, .35), inset 0 -8px 0 rgba(0, 0, 0, .1); }
.fd-name { margin: 0; font: 800 26px/1 var(--f-display); color: #111; }
.fd-stamp {
  position: absolute; left: 50%; top: 40%;
  padding: 6px 26px;
  border: 9px solid #e0182d; border-radius: 16px;
  color: #e0182d; background: rgba(255, 255, 255, .55);
  font: 800 86px/1 var(--f-display); letter-spacing: .06em;
  transform: translate(-50%, -50%) rotate(-14deg);
}
.fd-stamp[data-at] { transition: opacity .2s, scale .35s cubic-bezier(.3, 1.4, .5, 1); }
.fd-stamp[data-at]:not(.on) { scale: 2.6; translate: 0 0; }
.fd-exitlabel { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font: 16px/1 var(--f-pixel); color: #111; }

/* ───────── ads ───────── */
[data-scene="ads"] .scene-bg { background: radial-gradient(800px 500px at 70% 30%, #1b1f4a, #0a0d16 65%); }
.ads-glow { position: absolute; left: 50%; top: 20%; width: 50vmax; height: 50vmax; border-radius: 50%; background: radial-gradient(circle, rgba(123, 92, 255, .25), transparent 60%); }
.ads-dash { position: absolute; left: 0; top: 0; width: 360px; height: 476px; padding: 18px; background: #121729; color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.ads-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.ads-top b { margin-right: auto; font: 800 20px/1 var(--f-display); }
.ads-top .chip { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 600 12px/1 var(--f-body); }
.ads-top .live { width: 100%; font: 8px/1 var(--f-pixel); color: #3cff9b; animation: blinkStep 1.2s steps(1) infinite; }
.ads-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.kpi { position: relative; overflow: hidden; padding: 14px; border-radius: 14px; background: #0b0f1d; }
.kpi small { font: 600 13px/1 var(--f-body); color: rgba(255, 255, 255, .6); }
.kpi b { display: block; margin-top: 8px; font: 800 24px/1 var(--f-display); color: #9e8bff; }
.kpi.good b { color: #3cff9b; }
.kpi svg { position: absolute; right: 10px; bottom: 12px; width: 78px; height: 32px; }
.kpi polyline { fill: none; stroke: #9e8bff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.kpi.good polyline { stroke: #3cff9b; }
.ads-bars { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: 38px 14px 12px; border-radius: 14px; background: #0b0f1d; }
.ads-bars::before { content: "Creatives by ROAS"; position: absolute; left: 14px; top: 13px; font: 600 13px/1 var(--f-body); color: rgba(255, 255, 255, .6); }
.ads-bars i { position: relative; flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: #2b3358; transform-origin: bottom; transform: scaleY(clamp(0, calc(var(--k, 0) * 7 - var(--i)), 1)); }
.ads-bars i.win { background: linear-gradient(#ffcf3f, #ff5b3a); }
.ads-bars i.win::after { content: "👑"; position: absolute; left: 50%; top: -24px; margin-left: -10px; font-size: 18px; }
.ads-creatives { position: absolute; right: 0; top: 30px; width: 186px; height: 440px; }
.cr { position: absolute; width: 136px; height: 242px; overflow: hidden; border-radius: 18px; background: var(--g); border: 3px solid #fff; color: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.cr p { position: absolute; left: 10px; right: 26px; top: 16px; margin: 0; font: 800 16px/1.15 var(--f-display); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.cr .play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .35); font-size: 18px; }
.cr .ui { position: absolute; right: 8px; bottom: 14px; font: 14px/1.9 var(--f-body); text-align: center; }
.cr.c1 { left: 0; top: 0; rotate: -8deg; }
.cr.c2 { left: 46px; top: 90px; rotate: 5deg; }
.cr.c3 { left: 20px; top: 190px; rotate: -3deg; z-index: 2; }
.cr-win { position: absolute; left: 8px; bottom: 10px; padding: 6px 8px; border-radius: 8px; background: var(--gold); color: #111; font: 8px/1 var(--f-pixel); }

/* ───────── ai ───────── */
[data-scene="ai"] .scene-bg { background: #05060c; }
.ai-glow { position: absolute; border-radius: 50%; filter: blur(60px); }
.ai-glow.a { width: 40vmax; height: 40vmax; left: 45%; top: 5%; background: rgba(34, 211, 238, .22); }
.ai-glow.b { width: 36vmax; height: 36vmax; left: 65%; top: 45%; background: rgba(123, 92, 255, .25); }
.ai-portfolio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.ai-apps { display: grid; grid-template-columns: repeat(3, 104px); gap: 20px; }
.ai-apps i { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 26px; background: var(--g); color: #fff; font-size: 42px; font-style: normal; box-shadow: 0 16px 34px rgba(0, 0, 0, .5), inset 0 -5px 0 rgba(0, 0, 0, .15); }
.ai-apps i.new { border: 2px dashed rgba(255, 255, 255, .35); box-shadow: none; color: rgba(255, 255, 255, .6); }
.ai-label { margin: 0; font: 11px/1 var(--f-pixel); color: #9ef; }
.ai-label span { color: var(--gold); }
.ai-graph { position: absolute; left: 0; top: 0; width: 560px; height: 380px; }
.ai-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ai-links path { stroke: rgba(34, 211, 238, .3); stroke-width: 2; stroke-dasharray: 4 6; }
.ai-packets circle { fill: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }
.ai-core { position: absolute; left: 280px; top: 190px; width: 124px; height: 124px; margin: -62px 0 0 -62px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(#2a1d5c, #120d2a); border: 2px solid var(--violet); color: #fff; font: 800 18px/1.1 var(--f-display); box-shadow: 0 0 44px rgba(123, 92, 255, .55); }
.ai-core small { display: block; margin-top: 4px; font: 500 12px/1 var(--f-body); color: rgba(255, 255, 255, .6); }
.ai-node { position: absolute; left: var(--x); top: var(--y); width: 124px; padding: 10px 8px; transform: translate(-50%, -50%); text-align: center; border-radius: 14px; background: #0e1222; border: 1px solid rgba(34, 211, 238, .4); color: #fff; box-shadow: 0 0 22px rgba(34, 211, 238, .12); }
.ai-node i { position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #3cff9b; color: #3cff9b; animation: ping 1.6s infinite; }
.ai-node b { display: block; font: 700 15px/1.2 var(--f-body); }
.ai-node small { font: 17px/1 var(--f-term); color: #3cff9b; }
.ai-clock { position: absolute; right: 4px; top: -4px; width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--cyan); color: #fff; font: 800 20px/1 var(--f-display); box-shadow: 0 0 24px rgba(34, 211, 238, .35); }
.ai-clock::before { content: ""; position: absolute; left: 50%; top: 8px; width: 2px; height: 34px; margin-left: -1px; background: var(--cyan); transform-origin: 50% 100%; animation: spin 4s linear infinite; }
.ai-log { position: absolute; left: 0; right: 0; bottom: 0; height: 88px; overflow: hidden; border-radius: 14px; background: #0b0e1a; border: 1px solid rgba(255, 255, 255, .08); font: 19px/24px var(--f-term); color: #9ef; -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.ai-log-inner { padding: 4px 16px; animation: logscroll 16s linear infinite; }
.ai-log p { margin: 0; white-space: nowrap; }
@keyframes logscroll { to { transform: translateY(-50%); } }

/* ───────── stats ───────── */
[data-scene="stats"] .scene-bg { background: radial-gradient(circle at 62% 40%, #2b1b52, #120c24 70%); }
.sh-rays { position: absolute; left: 62%; top: 45%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(rgba(255, 207, 63, .07) 0 8deg, transparent 8deg 22deg); animation: spin 90s linear infinite; }
/* fluid (not scaled) so the strengths stay readable on phones */
.sheet-box { display: grid; place-items: center; }
.sheet { position: relative; width: min(600px, 100%); max-height: 100%; overflow: hidden; padding: 22px 24px; background: #1a1330; color: #fff; border: 3px solid var(--gold); border-radius: 24px; box-shadow: 0 0 0 7px #1a1330, 0 0 0 9px rgba(255, 207, 63, .35), 0 30px 60px rgba(0, 0, 0, .6); }
.sheet p { margin: 0; }
.sheet-kicker { font: 9px/1 var(--f-pixel); color: var(--gold); }
.sheet-name { margin-top: 10px !important; font: 800 clamp(28px, 3vw, 38px)/1 var(--f-display); letter-spacing: -.02em; }
.sheet-class { margin-top: 6px !important; font: 600 14px/1 var(--f-body); color: rgba(255, 255, 255, .75); }
.sheet-meta { position: absolute; right: 24px; top: 20px; margin: 0; display: flex; flex-direction: column; gap: 6px; text-align: right; }
.sheet-meta div { display: flex; gap: 8px; justify-content: flex-end; align-items: baseline; }
.sheet-meta dt { font: 7px/1 var(--f-pixel); color: var(--gold); }
.sheet-meta dd { margin: 0; font: 600 13px/1 var(--f-body); }
.sheet-stats { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sheet-stats li { display: grid; grid-template-columns: 1fr 150px; column-gap: 16px; align-items: center; }
.sheet-stats b { font: 700 15px/1.2 var(--f-body); }
.sheet-stats small { grid-column: 1; font: 12px/1.3 var(--f-body); color: rgba(255, 255, 255, .6); }
.sheet-stats .bar { position: relative; grid-column: 2; grid-row: 1 / span 2; height: 18px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .4); border-radius: 4px; }
.sheet-stats .bar::before { content: ""; position: absolute; inset: 0; width: calc(var(--k, 0) * var(--lvl) * 10%); background: linear-gradient(90deg, var(--accent), var(--gold)); }
.sheet-stats .bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #1a1330 calc(10% - 2px) 10%); }
.sheet-perks { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.sheet-perks li { padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); font: 600 12px/1 var(--f-body); }
.sheet-ach { position: absolute; right: 24px; bottom: 22px; font: 9px/1 var(--f-pixel); color: var(--gold); }

@media (max-width: 860px) {
  .sheet { padding: 16px 16px 18px; border-radius: 18px; box-shadow: 0 0 0 5px #1a1330, 0 0 0 7px rgba(255, 207, 63, .35); }
  .sheet-class { font-size: 13px; }
  .sheet-meta { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; text-align: left; }
  .sheet-meta div { justify-content: flex-start; }
  .sheet-stats { margin-top: 14px; gap: 9px; }
  .sheet-stats li { grid-template-columns: 1fr 88px; column-gap: 10px; }
  .sheet-stats b { font-size: 14px; }
  .sheet-stats small { font-size: 11.5px; }
  .sheet-stats .bar { height: 14px; }
  .sheet-perks { margin-top: 12px; }
  .sheet-perks li { font-size: 11px; padding: 6px 8px; }
  .sheet-ach { position: static; margin-top: 10px !important; }
}

/* ───────── cta (fluid, not scaled) ───────── */
[data-scene="cta"] .scene-bg { background: linear-gradient(#0a0018 0%, #2a0845 58%, #0a0018 58.2%); }
.cta-sun {
  /* sits behind the narrator, so the copy on the right stays clean */
  position: absolute; left: 19%; top: 58%;
  width: 42vmin; height: 42vmin; transform: translate(-50%, -100%);
  border-radius: 50%; background: linear-gradient(#ffcf3f, #ff5b3a 55%, #ff2a6d);
  -webkit-mask-image: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 68%, #000 68% 75%, transparent 75% 80%, #000 80% 86%, transparent 86% 92%, #000 92%);
  mask-image: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 68%, #000 68% 75%, transparent 75% 80%, #000 80% 86%, transparent 86% 92%, #000 92%);
  opacity: .9;
}
.cta-grid {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 42%;
  background-image: linear-gradient(rgba(255, 42, 109, .8) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 42, 109, .8) 2px, transparent 2px);
  background-size: 64px 64px;
  transform: perspective(320px) rotateX(62deg); transform-origin: bottom;
  animation: gridmove 1.4s linear infinite;
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
  mask-image: linear-gradient(transparent, #000 45%);
}
@keyframes gridmove { to { background-position: 0 64px; } }
.cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: #fff; }
.cta p { margin: 0; }
.cta-continue { font: clamp(18px, 2.4vw, 34px)/1 var(--f-pixel); text-shadow: 3px 3px 0 #ff2a6d, 0 0 20px rgba(255, 42, 109, .8); }
.cta-count { font: clamp(40px, 6vw, 88px)/1 var(--f-pixel); color: var(--gold); text-shadow: 4px 4px 0 #ff2a6d; }
.cta-h { margin: 6px 0 0; max-width: 17ch; font: 800 clamp(26px, 3.2vw, 46px)/1.02 var(--f-display); letter-spacing: -.02em; }
.cta-sub { max-width: 46ch; font: 500 clamp(14px, 1.15vw, 17px)/1.45 var(--f-body); color: rgba(255, 255, 255, .8); }
.cta-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(480px, 100%); margin-top: 8px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 14px;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08); color: #fff;
  font: 700 15px/1 var(--f-body); text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .18); }
.btn-primary { grid-column: 1 / -1; min-height: 60px; background: var(--accent); border-color: #fff; box-shadow: 6px 6px 0 #ff2a6d; font-size: 19px; }
.btn-primary:hover { background: #ff6d50; }
.cta-foot { margin-top: 6px !important; font: 500 12px/1.4 var(--f-body); color: rgba(255, 255, 255, .55); }

@media (max-width: 860px) {
  .cta { gap: 10px; justify-content: flex-start; padding-top: 6px; }
  .cta-btns { grid-template-columns: 1fr 1fr; }
  .cta-btns .btn:last-child { grid-column: 1 / -1; }
  .btn { min-height: 46px; font-size: 14px; }
  .btn-primary { min-height: 54px; font-size: 17px; }
  .cta-sun { left: 50%; top: 52%; width: 64vmin; height: 64vmin; opacity: .3; }
}
@media (max-width: 860px) and (max-height: 760px) {
  .cta-count, .cta-sub { display: none; }
}