:root {
  --sky-top: #dbe8f5; --sky-bottom: #f6f1e7;
  --ink: #1c2330; --muted: #5a6475;
  --sign: #1f56b3; --sign-edge: #ffffff; --pole: #8a93a3;
  --road: #3a3f48; --road-edge: #2b2f36; --lane: #f2c230;
  --chip: rgba(28, 35, 48, .07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --sky-top: #0c1422; --sky-bottom: #1a2233;
    --ink: #eef2f8; --muted: #a3adbf; --pole: #6b7486;
    --road: #22262d; --road-edge: #16191e;
    --chip: rgba(238, 242, 248, .09);
  }
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55; overflow-x: hidden;
}
main {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 48px 16px 24px; gap: 18px;
}
.sign { width: 150px; height: auto; transform-origin: 50% 100%; animation: sway 4s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.kicker {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  background: var(--chip); padding: 5px 12px; border-radius: 999px;
}
h1 { font-size: clamp(28px, 6vw, 44px); line-height: 1.15; letter-spacing: -.02em; max-width: 16ch; }
p { color: var(--muted); max-width: 46ch; font-size: 16px; }
.hint { font-size: 14px; color: var(--ink); background: var(--chip); padding: 10px 16px; border-radius: 10px; }
.road { position: relative; height: 72px; background: var(--road); border-top: 6px solid var(--road-edge); overflow: hidden; }
.road::before {
  content: ""; position: absolute; left: -80px; right: -80px; top: 50%;
  height: 6px; margin-top: -3px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 44px, transparent 44px 80px);
  animation: drive 1.4s linear infinite;
}
@keyframes drive { from { transform: translateX(0); } to { transform: translateX(80px); } }
@media (prefers-reduced-motion: reduce) { .sign, .road::before { animation: none; } }