/* Variant: Arcade — an 8-bit game screen with level select. Dark. */
:root {
  --bg: #1a0f2e; --surface: #24173d; --muted: #1e1235; --ink: #f7f0ff; --ink-2: #b3a6cc; --line: #3a2a5c;
  --accent: #ff4fa3; --accent-ink: #1a0f2e; --accent-soft: #3d1a46; --green-soft: #22204a; --amber-soft: #3a2a1a;
  --night: #24173d; --night-2: #2e1f4a; --night-line: rgba(255, 255, 255, 0.1); --night-ink: #f7f0ff; --night-ink-2: #b3a6cc;
  --ui-bg: #2a1c46; --ui-line: #3a2a5c; --ui-fill: #4a3a70; --ui-fill-2: #322350; --ui-strong: #f7f0ff; --ui-accent: #ff4fa3; --ui-img: #3d1a46;
  --ui-tint-a: #4a1f5a; --ui-tint-b: #1f3a5a; --ui-tint-c: #5a4a1f;
  --px: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}
.ar-title { text-shadow: 3px 3px 0 #ff4fa3; }
.ar-title { font-weight: 700; }
.ar-hero .pill { border-radius: 0; box-shadow: 4px 4px 0 #3dd6ff; }
.ar { padding: 14px; background: #2e1f4a; box-shadow: 0 0 0 4px #0e0820, 0 0 0 8px #ff4fa3, 0 40px 80px -30px rgba(255, 79, 163, 0.5); }
.ar-screen { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; min-height: 22rem; padding: 18px; background: #0e0820; font-family: var(--px); color: #ffffff; text-align: center; image-rendering: pixelated; overflow: hidden; }
.ar-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 4px); }
.ar-top { align-self: stretch; display: flex; justify-content: space-between; font-size: 0.75rem; color: #3dd6ff; }
.ar-top b { color: #ffd23f; }
.ar-logo { margin-top: 0.5rem; font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: 0.08em; color: #ffd23f; text-shadow: 4px 4px 0 #ff4fa3; }
.ar-sel { font-size: 0.8125rem; color: #b3a6cc; }
.ar-levels { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: clamp(0.875rem, 1.4vw, 1.0625rem); }
.ar-levels li { display: flex; gap: 0.8rem; justify-content: center; }
.ar-levels li span { color: #3dd6ff; }
.ar-levels li.is-on::before { content: "▶"; color: #ff4fa3; margin-right: -0.4rem; }
.ar-start { margin-top: 0.5rem; font-size: 0.9375rem; color: #ff4fa3; }
@media (prefers-reduced-motion: no-preference) { .ar-start { animation: ar-blink 1.2s steps(1) infinite; } @keyframes ar-blink { 50% { opacity: 0; } } }
.ar-sprites { display: flex; gap: 1.5rem; margin-top: auto; }
.ar-sprites i { width: 24px; height: 24px; }
.ar-s1 { background: #3dd6ff; clip-path: polygon(0 33%, 17% 33%, 17% 17%, 33% 17%, 33% 0, 67% 0, 67% 17%, 83% 17%, 83% 33%, 100% 33%, 100% 83%, 83% 83%, 83% 100%, 67% 100%, 67% 83%, 33% 83%, 33% 100%, 17% 100%, 17% 83%, 0 83%); }
.ar-s2 { background: #ffd23f; border-radius: 50%; clip-path: polygon(0 0, 100% 0, 100% 35%, 50% 50%, 100% 65%, 100% 100%, 0 100%); }
.ar-s3 { background: #ff4fa3; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@media (prefers-reduced-motion: no-preference) { .ar-sprites i { animation: ar-hop 0.8s steps(2) infinite; } .ar-s2 { animation-delay: 0.2s; } .ar-s3 { animation-delay: 0.4s; } @keyframes ar-hop { 50% { translate: 0 -8px; } } }
.tile, .faq details, .contact__card, .product__visual { border-radius: 0; }
.tile--dark { background: #2e1f4a; box-shadow: 6px 6px 0 #ff4fa3; }
.tile--dark .focus strong { color: #3dd6ff; }
.steps li::before { border-radius: 0; }