/* 두 대 운전 — 장르: 밤 도로 · 4차선 · 주황 차와 초록 차
 * 움직임: 첫 화면 두 차가 번갈아 차선을 바꾸고 동그라미·네모가 내려옴 */
:root {
  --ar-bg: #10142b; --ar-fg: #f2f4ff; --ar-sub: #b4bbe0; --ar-panel: #1b2140; --ar-line: #ff7a3d; --ar-edge: #000;
  --ar-accent: #ff7a3d; --ar-accent-ink: #2a1003; --ar-bad: #ff9a9a; --ar-veil: rgba(16, 20, 43, 0.92);
  --ar-hero: #1b2140; --ar-ratio: 360 / 560;
  --color-bg: var(--ar-bg); --color-text: var(--ar-fg); --color-text-secondary: var(--ar-sub); color-scheme: dark;
}
.hero { position: absolute; inset: 0; background:
  linear-gradient(#e9ecff, #e9ecff) 50% 0 / 4px 100% no-repeat,
  repeating-linear-gradient(transparent 0 20px, rgba(233,236,255,.35) 20px 40px) 25% 0 / 3px 100% no-repeat,
  repeating-linear-gradient(transparent 0 20px, rgba(233,236,255,.35) 20px 40px) 75% 0 / 3px 100% no-repeat; }
.hero::before, .hero::after { content: ""; position: absolute; bottom: 22px; width: 30px; height: 48px; border-radius: 8px; }
.hero::before { left: 12.5%; margin-left: -15px; background: #ff7a3d; animation: tc-l 2.4s infinite alternate; }
.hero::after { left: 87.5%; margin-left: -15px; background: #22c3a6; animation: tc-r 2.4s infinite alternate; }
@keyframes tc-l { 0%, 39% { left: 12.5%; } 40%, 100% { left: 37.5%; } }
@keyframes tc-r { 0%, 59% { left: 87.5%; } 60%, 100% { left: 62.5%; } }