:root { --night:#1d2140; --lamp:#f5b842; --ink:#1d1f33; --soft:#5b5f73; --line:#d9dbe3; --calm:#f5f5f7; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--calm); color: var(--ink); font: 400 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
header { background: var(--night); color: #f5f5f7; }
header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
a { color: inherit; } :focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: .25rem; }
.brand { display: flex; gap: .5rem; align-items: center; text-decoration: none; font-weight: 600; min-height: 2.75rem; }
.brand img { width: 1.75rem; height: 1.75rem; }
.lang button { min-width: 2.75rem; min-height: 2.75rem; background: none; border: 0; color: #c9cce0; font: 600 .75rem/1 inherit; cursor: pointer; border-radius: 999px; }
.lang button[aria-pressed="true"] { color: var(--night); background: #f5f5f7; }
main { padding: 3rem 0 5rem; }
article { background: #fff; border-radius: 1.75rem; padding: 2.5rem; box-shadow: 0 1px 2px rgba(17,20,45,.04), 0 12px 32px -8px rgba(17,20,45,.12); }
h1 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 1.5rem; }
h2 { font-size: 1.1875rem; letter-spacing: -.015em; margin: 2rem 0 .5rem; }
p, li { color: #2c2f45; } dl { margin: 0; } dt { font-weight: 600; margin-top: 1rem; } dd { margin: 0; }
.draft { background: #fdf1d8; color: #6b4300; border-radius: .75rem; padding: .875rem 1rem; font-weight: 600; margin-bottom: 1.5rem; }
.ph { background: #fdf1d8; border-radius: .25rem; padding: 0 .25rem; font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
footer { color: var(--soft); font-size: .8125rem; padding: 0 0 3rem; }