:root { color-scheme: dark; --bg: #140e36; --fg: #f3efff; --muted: #a8a2cf; --accent: #5cc0ff; }
@font-face { font-family: "Fredoka"; src: url("/site/v7/fredoka.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
h1, h2, .topbar .title, .topbar .logo { font-family: "Fredoka", system-ui, -apple-system, sans-serif; font-weight: 600; }
body { margin: 0; background: var(--bg) radial-gradient(120% 60% at 50% -5%, #2f1f80 0%, transparent 60%) no-repeat; color: var(--fg); font: 17px/1.55 system-ui, -apple-system, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 32px 22px 64px; }
h1 { font-size: 30px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 30px 0 8px; }
p, li { color: var(--fg); }
.muted { color: var(--muted); font-size: 15px; }
a { color: var(--accent); }
nav { margin-bottom: 26px; font-size: 15px; }
/* library pages: logo (home) left, title centred, sign-in right — same bar as the app */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 26px; }
.topbar .title { font-size: 24px; font-weight: 700; margin: 0; text-align: center; }
.topbar .title a { color: var(--fg); }
.topbar .logo { justify-self: start; display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 700; text-decoration: none; }
.topbar .logo img { display: block; }
.topbar .signin { justify-self: end; padding: 7px 14px; border: 1px solid #342a72; border-radius: 999px; color: var(--fg); text-decoration: none; font-size: 15px; }
@media (max-width: 520px) { .topbar .logo span { display: none; } .topbar .title { font-size: 20px; } }