:root{color-scheme:dark;--bg:#120a2c;--fg:#f1eefc;--muted:#a79fcb;--accent:#ffb3d9;--card:#1b1240;--line:#33266b}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(ellipse at 20% -10%,#4a1d78 0%,transparent 55%),radial-gradient(ellipse at 90% 10%,#0a3a8a 0%,transparent 50%),var(--bg) fixed;color:var(--fg);font:17px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;min-height:100vh}
main{max-width:680px;margin:0 auto;padding:64px 24px 48px}
.swatches{display:flex;justify-content:center;margin:0 auto 28px}
.swatches i{width:44px;height:44px;border-radius:50%;margin:0 -5px;border:2.5px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.3)}
h1{font-size:2.2rem;line-height:1.2;margin:0 0 8px;text-align:center;letter-spacing:-.02em}
.tag{text-align:center;color:var(--muted);margin:0 0 36px}
h2{font-size:1.15rem;color:var(--accent);margin:36px 0 8px}
p{margin:0 0 16px}
a{color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:20px 0}
.card ul,.card ol{margin:0;padding-left:20px}
.card li{margin:6px 0}
.btn{display:inline-block;padding:10px 20px;border-radius:999px;background:#fff;color:#2a1560;text-decoration:none;font-weight:700}
.center{text-align:center}
footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
footer a{color:var(--muted)}