:root{--bg:#fff7ef;--ink:#3b2a4a;--pink:#ff7eb6;--teal:#3ecfc0;--yellow:#ffd166;--purple:#8b5cf6;--card:#ffffff}
@media (prefers-color-scheme:dark){:root{--bg:#231a2e;--ink:#f6ecff;--card:#322442}}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--teal))}
.logo{font-weight:800;font-size:1.3rem;color:#3b2a4a;text-decoration:none}
nav a{color:#3b2a4a;text-decoration:none;font-weight:600;margin-left:16px;padding:4px 2px;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current]{border-bottom-color:#3b2a4a}
main{flex:1;max-width:760px;width:100%;margin:0 auto;padding:40px 16px}
.hero{text-align:center;padding:24px 0}
.hero .emoji{font-size:4rem;animation:bob 2.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hero .emoji{animation:none}}
h1{font-size:2.3rem;line-height:1.2;margin:.3em 0}
h2{margin-top:1.8em}
.card{background:var(--card);border-radius:20px;padding:24px;box-shadow:0 6px 20px rgba(139,92,246,.15);margin:24px 0}
.btn{display:inline-block;background:var(--purple);color:#fff;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:700}
.btn:hover{filter:brightness(1.1)}
a{color:var(--purple)}
@media (prefers-color-scheme:dark){a{color:#c4a8ff}}
footer{text-align:center;padding:24px 16px;font-size:.9rem;opacity:.8}
footer a{margin:0 8px}