:root { --wall:#EEEAE3; --ink:#1D1B18; --ink2:#6E685F; --paper:#F6DF7A; --raised:#FFFFFF; --line:#DCD6CC; }
@media (prefers-color-scheme: dark) { :root { --wall:#1A1917; --ink:#F2EEE7; --ink2:#9C958B; --paper:#D9C062; --raised:#2C2A28; --line:#3A3734; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--wall); color:var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 56px 20px 80px; }
h1, h2 { font-family: "New York", ui-serif, Georgia, serif; font-weight: 600; line-height: 1.2; }
h1 { font-size: 40px; margin: 24px 0 8px; }
h2 { font-size: 24px; margin: 40px 0 8px; }
p, li { color: var(--ink); }
.muted { color: var(--ink2); }
.note { display:inline-block; width:56px; height:56px; background:var(--paper); transform: rotate(-3deg);
        box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.12); }
nav { display:flex; gap:16px; margin-top: 8px; }
a { color: var(--ink); }
.lang { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.card { background: var(--raised); border-radius: 18px; padding: 4px 22px; margin: 16px 0; }