:root { --bg:#FFF6EA; --card:#fff; --ink:#3B2F35; --muted:#7A6A70; --orange:#F4A259; --blue:#71C7EC; --line:#3B2F35; }
@media (prefers-color-scheme: dark) { :root { --bg:#221B1F; --card:#342A30; --ink:#F6EDE6; --muted:#CDBDB4; --line:#0F0B0D; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
h1, h2, .brand { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; line-height: 1.15; }
h1 { font-size: 34px; margin: 8px 0 4px; }
h2 { font-size: 22px; margin: 28px 0 8px; }
a { color: inherit; }
.muted { color: var(--muted); }
.card { background:var(--card); border:2.5px solid var(--line); border-radius:20px; box-shadow:0 4px 0 var(--line); padding:20px 22px; margin:18px 0; }
.logo { display:flex; gap:8px; align-items:center; text-decoration:none; }
.tile { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; font:600 24px "Fredoka", sans-serif; box-shadow:0 3px 0 rgba(59,47,53,.25); }
.tile.p { background:var(--orange); transform:rotate(-6deg); } .tile.a { background:var(--blue); transform:rotate(5deg); }
nav { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
nav .links a { margin-left:14px; color:var(--muted); font-weight:600; text-decoration:none; }
.button { display:inline-block; background:var(--orange); color:#3B2F35; border:2.5px solid var(--line); border-radius:16px; box-shadow:0 4px 0 var(--line); padding:10px 18px; font:600 18px "Fredoka", sans-serif; text-decoration:none; }
footer { margin-top:40px; font-size:14px; color:var(--muted); }
li { margin: 4px 0; }