:root { --cream: #fff8ee; --ink: #4a3b5c; --ink2: #7a6a8c; --coral: #ff7a8a; --sky: #6fb7ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cream: #2b2236; --ink: #f4ecff; --ink2: #b9a9cf; } }
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(#cfeaff, #fff0f5) fixed; color: var(--ink); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 24px 16px 48px; }
@media (prefers-color-scheme: dark) { body { background: #1d1726; } }
main { max-width: 760px; margin: 0 auto; background: var(--cream); border-radius: 28px; padding: 28px clamp(18px, 4vw, 36px) 32px; box-shadow: 0 8px 0 rgba(74, 59, 92, .12); }
h1 { margin: 0 0 4px; font-size: 30px; } h2 { margin: 28px 0 6px; font-size: 19px; }
p, li { margin: 6px 0; } ul { padding-left: 22px; }
a { color: var(--sky); } .back { display: inline-block; margin-bottom: 14px; font-weight: 800; text-decoration: none; }
.meta { color: var(--ink2); font-size: 14px; }