@font-face { font-family: "Fredoka"; src: url("assets/fonts/fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
:root { --ink: #5b3a29; --soft: #8a5a44; --pink: #f04f84; --cream: #fff8ef; --bg1: #ffd1dc; --bg2: #fff1d6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, var(--bg1), var(--bg2)); color: var(--ink); font-family: "Fredoka", ui-rounded, system-ui, sans-serif; line-height: 1.55; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
header { text-align: center; margin-bottom: 18px; }
header img { border-radius: 18px; box-shadow: 0 6px 14px rgba(91,58,41,.2); }
h1 { margin: 8px 0 4px; font-size: 36px; color: var(--pink); }
nav a, footer a, section a { color: var(--pink); font-weight: 600; }
section { background: var(--cream); border-radius: 24px; padding: 20px 22px; margin: 16px 0; box-shadow: 0 6px 0 rgba(140,70,50,.15); }
h2 { margin: 0 0 4px; font-size: 26px; }
h3 { margin: 18px 0 4px; font-size: 19px; }
.updated { margin: 0 0 12px; color: var(--soft); font-size: 14px; }
li { margin: 6px 0; }
dt { font-weight: 700; margin-top: 10px; }
dd { margin: 2px 0 0; }
footer { text-align: center; margin-top: 20px; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #f6e8dd; --soft: #d8bfae; --cream: #3a2a34; --bg1: #2a1f2e; --bg2: #3b2a2a; --pink: #ff8fb8; }
}