:root {
  --bg: #FEF6E7; --fg: #351D15; --card: #FFFDF6; --muted: #71574B; --coral: #E9523F; --sun: #FDC436; --border: #351D15;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1C130F; --fg: #FBEFDF; --card: #2A1D17; --muted: #CDB7A8; --border: #FBEFDF; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 "Nunito", system-ui, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
h1, h2, h3, .logo { font-family: "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 2.4rem; margin: 0.4em 0; }
h2 { font-size: 1.4rem; margin-top: 1.8em; }
a { color: var(--coral); font-weight: 700; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; color: var(--fg); text-decoration: none; }
.logo span.tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--sun); color: #43260A;
  border: 2px solid var(--border); box-shadow: 0 4px 0 #000a; transform: rotate(-6deg); }
.logo em { font-style: normal; color: var(--coral); }
.card { background: var(--card); border: 2px solid var(--border); border-radius: 28px; padding: 20px; box-shadow: 0 4px 0 #000a; margin: 20px 0; }
.sun { background: var(--sun); color: #351D15; border-color: #351D15; }
.code { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 3rem; letter-spacing: 0.3em; }
.muted { color: var(--muted); }
.note { background: #fff3c4; color: #43260A; border-radius: 16px; padding: 12px 16px; font-size: 0.95rem; }
footer { margin-top: 48px; font-size: 0.9rem; color: var(--muted); }