/* 색 통과 — 장르: 짙은 남보라 밤 · 네 색 고리 · 작은 공
 * 움직임: 첫 화면 네 색 고리가 돌고 공이 아래에서 통통 튐 */
:root {
  --ar-bg: #121124; --ar-fg: #f4f2ff; --ar-sub: #b9b5dc; --ar-panel: #1f1d3a; --ar-line: #9b5de5; --ar-edge: #000;
  --ar-accent: #ffd23f; --ar-accent-ink: #2a2005; --ar-bad: #ff8a8d; --ar-veil: rgba(18, 17, 36, 0.92);
  --ar-hero: #17162a; --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; }
.hero::before { content: ""; position: absolute; left: 50%; top: 22px; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%;
  background: conic-gradient(#ff5a5f 0 25%, #ffd23f 0 50%, #2ec4b6 0 75%, #9b5de5 0);
  -webkit-mask: radial-gradient(circle, transparent 50px, #000 51px); mask: radial-gradient(circle, transparent 50px, #000 51px);
  animation: cp-spin 3s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
.hero::after { content: ""; position: absolute; left: 50%; top: 160px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #ffd23f; animation: cp-hop 0.7s cubic-bezier(.3,.6,.5,1) infinite alternate; }
@keyframes cp-hop { to { transform: translateY(-22px); } }