:root { color-scheme: dark; font-family: Inter, "Noto Sans TC", system-ui, sans-serif; }
body.avatar-page { min-height: 100vh; margin: 0; background: #0b0911; color: #f7f4fb; }
.avatar-page main { max-width: 76rem; margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 1.25rem; }
.eyebrow { margin: 0; color: #f5cc80; font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.avatar-page h1 { margin: .6rem 0; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; }
.lead { max-width: 36rem; margin: 0 0 2rem; color: #c7bfce; line-height: 1.6; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.25rem; align-items: start; }
.avatar-grid-error { padding: 1rem; border: 1px solid #bc6666; border-radius: .75rem; color: #ffd5d5; }