:root {
  --bg-top: #FFEADB; --bg-bottom: #FFCFE1; --ink: #3A2E5C; --soft: #7A6A9E;
  --card: #FFF8F3; --accent: #FF5A5F; --frame: #4B3F7E;
}
@media (prefers-color-scheme: dark) {
  :root { --bg-top: #2A2148; --bg-bottom: #3A2F66; --ink: #F3EEFF; --soft: #C4B8E8; --card: #352A5C; }
}
* { box-sizing: border-box; }
html { background: var(--bg-bottom); }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(var(--bg-top), var(--bg-bottom)) fixed;
}
main { max-width: 640px; margin: 0 auto; padding: 48px 16px 64px; }
.hero { text-align: center; }
.hero img { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 10px 30px rgba(58,46,92,.25); }
h1 { font-size: 44px; line-height: 1.1; margin: 20px 0 6px; letter-spacing: -.5px; }
h2 { font-size: 22px; margin: 32px 0 8px; }
.tag { color: var(--soft); font-size: 20px; margin: 0 0 28px; }
.card { background: var(--card); border-radius: 20px; padding: 20px 22px; margin: 18px 0; box-shadow: 0 4px 18px rgba(58,46,92,.08); }
.btn {
  display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 18px;
  background: var(--accent); color: #fff; border-radius: 16px; padding: 16px; margin: 12px 0;
}
.btn.alt { background: var(--frame); }
a { color: var(--accent); }
.muted { color: var(--soft); font-size: 15px; }
footer { text-align: center; margin-top: 40px; }
footer a { margin: 0 8px; }
ul { padding-left: 22px; }