:root { color-scheme: dark; --ink: #111b35; --paper: #f9fcff; --cyan: #63daf7; --gold: #ffd344; --loop: 8s; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: "Trebuchet MS", Arial, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 10%, #203455 0, transparent 65%); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.page { max-width: 1260px; margin: 0 auto; padding: 30px 42px 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wordmark { display: flex; align-items: center; gap: 11px; color: var(--paper); text-decoration: none; font-size: 23px; font-weight: 900; letter-spacing: -.6px; }
.wordmark span { color: var(--cyan); margin-left: -11px; }
.counters { display: flex; align-items: center; gap: 20px; padding: 12px 19px; background: #1c2a44; border: 1px solid #40506b; border-radius: 100px; min-height: 47px; }
.counter { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.counter strong { color: white; font-size: 18px; min-width: 14px; font-variant-numeric: tabular-nums; }
.counter-label { color: #c4d1e3; }
.counter-divider { height: 20px; width: 1px; background: #46566c; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
h1 { margin: 42px 0 30px; text-align: center; text-transform: uppercase; font-family: Impact, "Arial Black", sans-serif; font-weight: 900; font-size: clamp(48px, 6.7vw, 82px); line-height: 1.05; letter-spacing: 1px; }
h1 span { color: var(--gold); display: inline-block; transform: rotate(-2deg); }
.comic { overflow: hidden; position: relative; border: 3px solid #081123; border-radius: 22px; background: #c4effa; box-shadow: 9px 9px 0 #071126; }
.panel-label { position: absolute; z-index: 5; left: 0; top: 0; background: var(--gold); color: var(--ink); font-weight: 900; font-size: 13px; letter-spacing: 1.3px; padding: 14px 21px; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); border-radius: 0 0 15px 0; }
.scene { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1200 / 610; overflow: hidden; }
.backdrop-dots { position: absolute; inset: 0; background: radial-gradient(circle, #719ab341 1.2px, transparent 1.5px) 0 0 / 14px 14px; mask-image: radial-gradient(ellipse at center, transparent 5%, black 90%); }
.floor { position: absolute; width: 91%; left: 4.5%; height: 22%; bottom: 4%; border-radius: 50%; background: #a7d7ea; border: 2px solid #87bdd0; }
.actor { position: absolute; aspect-ratio: 1; }
.sprite { position: absolute; inset: 0; background-image: url('/assets/comic-atlas.png'); background-repeat: no-repeat; background-size: 300% 200%; }
.computer { left: 35%; top: 25%; width: 32%; z-index: 2; }
.computer-sprite { background-position: 0 0; }
.guardian { left: 13%; top: 38%; width: 27%; z-index: 4; transform-origin: 50% 90%; animation: guardian-laugh var(--loop) linear infinite; }
.guardian-sprite { background-position: 50% 0; }
.hacker { left: 68%; top: 40%; width: 25%; z-index: 3; transform-origin: 50% 88%; animation: hacker-bounce var(--loop) linear infinite; }
.hacker-sprite { background-position: 100% 0; }
.lock { left: 56%; top: 34%; width: 26%; z-index: 5; transform-origin: 50% 86%; animation: lock-snap var(--loop) linear infinite; }
.lock-open { background-position: 0 100%; animation: open-frame var(--loop) step-end infinite; }
.lock-closed { background-position: 50% 100%; animation: closed-frame var(--loop) step-end infinite; }
.impact { left: 65%; top: 35%; width: 22%; z-index: 6; animation: impact-burst var(--loop) linear infinite; }
.impact-sprite { background-position: 100% 100%; }
.screen-glow { position: absolute; left: 14%; right: 13%; top: 22%; height: 41%; border-radius: 4%; background: radial-gradient(ellipse, #b0ffff, #47d4ff40); mix-blend-mode: screen; opacity: .03; animation: screen-blink 2.4s ease-in-out infinite; pointer-events: none; }
.speech { position: absolute; z-index: 7; left: 16%; top: 13%; padding: 16px 24px; background: white; color: var(--ink); border: 3px solid var(--ink); border-radius: 50% 45% 42% 38%; box-shadow: 4px 4px 0 var(--ink); font-size: clamp(15px, 2.1vw, 27px); font-weight: 900; line-height: 1.1; transform-origin: 40% 100%; text-align: center; animation: speech-pop var(--loop) linear infinite; }
.speech::after { content: ""; position: absolute; bottom: -16px; left: 31%; width: 23px; height: 23px; background: white; border-bottom: 3px solid var(--ink); border-right: 3px solid var(--ink); transform: skewY(30deg) rotate(34deg); z-index: -1; }
.speech span { white-space: nowrap; }
.clack { position: absolute; left: 62%; top: 23%; z-index: 8; color: var(--ink); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(26px, 4.5vw, 58px); font-style: italic; transform: rotate(-13deg); animation: clack-pop var(--loop) linear infinite; text-shadow: 2px 2px white, -2px -2px white; }
.laugh { position: absolute; z-index: 8; color: #20436a; font-weight: 900; font-size: clamp(17px, 2.4vw, 29px); animation: floating-laugh var(--loop) linear infinite; }
.laugh-one { left: 12%; top: 38%; transform: rotate(-17deg); }
.laugh-two { left: 35%; top: 31%; transform: rotate(15deg); animation-delay: .22s; }
.comic-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; position: relative; z-index: 10; border-top: 3px solid var(--ink); padding: 17px 22px; color: var(--ink); background: #f8fcff; }
.loop-note { font-size: 14px; color: #46556c; }
.control-buttons { display: flex; gap: 10px; }
button { border: 2px solid var(--ink); padding: 9px 15px; border-radius: 8px; font-size: 14px; font-weight: 800; color: var(--ink); background: white; cursor: pointer; transition: background .15s, transform .15s; }
button:hover { background: #dff5fc; transform: translateY(-1px); }
#toggle-motion { background: var(--ink); color: white; min-width: 144px; }
#toggle-motion:hover { background: #2a3b59; }
footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; font-size: 13px; color: #b3c2d8; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scene.paused *, .scene.paused { animation-play-state: paused !important; }
.scene.still .hacker { transform: translate(-12%, -3%) rotate(20deg); }
.scene.still .lock-open { opacity: 0; }
.scene.still .lock-closed, .scene.still .speech { opacity: 1; }
.scene.still .impact, .scene.still .clack, .scene.still .laugh { opacity: 0; }
.scene.still * { animation: none !important; }
@keyframes hacker-bounce {
  0%, 8% { transform: translateX(0) rotate(-4deg); }
  14% { transform: translate(-9%, -3%) rotate(1deg); }
  21% { transform: translate(-23%, 0) rotate(-4deg); }
  28% { transform: translate(-39%, -3%) rotate(1deg); }
  35%, 39% { transform: translate(-53%, 0) rotate(-5deg); }
  42% { transform: translate(-56%, 1%) rotate(-8deg) scale(.96, 1.04); }
  48% { transform: translate(-25%, -23%) rotate(18deg); }
  55% { transform: translate(-12%, -2%) rotate(22deg); }
  59%, 72% { transform: translate(-12%, 5%) rotate(25deg); }
  80%, 100% { transform: translateX(0) rotate(-4deg); }
}
@keyframes guardian-laugh { 0%, 48%, 82%, 100% { transform: rotate(0); } 52%, 60%, 68%, 76% { transform: translateY(-3%) rotate(-5deg); } 56%, 64%, 72% { transform: translateY(1%) rotate(4deg); } }
@keyframes lock-snap { 0%, 34%, 50%, 91%, 100% { transform: translateY(0); } 36% { transform: translateY(-7%) rotate(-3deg); } 39% { transform: translateY(2%) scale(1.08, .93); } 42% { transform: translateY(-2%) rotate(3deg); } 46% { transform: rotate(-2deg); } }
@keyframes open-frame { 0% { opacity: 1; } 38% { opacity: 0; } 91% { opacity: 1; } }
@keyframes closed-frame { 0% { opacity: 0; } 38% { opacity: 1; } 91% { opacity: 0; } }
@keyframes impact-burst { 0%, 37%, 50%, 100% { opacity: 0; transform: scale(.25); } 40%, 43% { opacity: 1; transform: scale(1.1); } 47% { opacity: .8; transform: scale(1.3); } }
@keyframes clack-pop { 0%, 36%, 53%, 100% { opacity: 0; transform: rotate(-13deg) scale(.7); } 39%, 47% { opacity: 1; transform: rotate(-13deg) scale(1); } }
@keyframes speech-pop { 0%, 46%, 87%, 100% { opacity: 0; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.08) rotate(-3deg); } 54%, 82% { opacity: 1; transform: scale(1) rotate(-3deg); } }
@keyframes floating-laugh { 0%, 49%, 85%, 100% { opacity: 0; } 54%, 68% { opacity: 1; } 80% { opacity: 0; translate: 0 -18px; } }
@keyframes screen-blink { 0%, 100% { opacity: .02; } 45%, 60% { opacity: .16; } }
@media (max-width: 760px) {
  .page { padding: 22px 17px; }
  .topbar { flex-wrap: wrap; gap: 18px; }
  .wordmark { font-size: 21px; }
  .counters { padding: 10px 14px; gap: 13px; }
  h1 { margin: 32px 0 23px; font-size: clamp(42px, 8.3vw, 60px); }
  .comic { border-radius: 15px; box-shadow: 5px 5px 0 #071126; }
  .panel-label { font-size: 10px; padding: 9px 12px; letter-spacing: .7px; }
  .scene { aspect-ratio: 1200 / 720; }
  .computer { top: 31%; }
  .guardian, .hacker { top: 46%; }
  .lock { top: 41%; }
  .impact { top: 42%; }
  .speech { top: 18%; left: 10%; padding: 11px 16px; font-size: clamp(15px, 2.8vw, 21px); border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .clack { top: 32%; }
  .laugh { display: none; }
  .comic-controls { padding: 13px; flex-wrap: wrap; }
  footer { margin-top: 23px; flex-wrap: wrap; font-size: 12px; }
}
@media (max-width: 440px) {
  .topbar { justify-content: center; }
  .counters { width: 100%; justify-content: center; }
  .panel-label { font-size: 9px; }
  .comic-controls { justify-content: center; }
  .loop-note { width: 100%; text-align: center; }
  .control-buttons { width: 100%; justify-content: center; }
  h1 { font-size: 43px; }
  .laugh { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }