:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bg:#fff; --surface:#fbfaff; --text:#171625; --muted:#666379; --border:#d8d4e1; --accent:#6741d9; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--text); background:var(--bg); line-height:1.75; }
a { color:var(--accent); text-underline-offset:3px; }
.site-header { position:sticky; top:0; z-index:5; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(12px); }
.site-header-inner, main, footer { width:min(920px, calc(100% - 40px)); margin-inline:auto; }
.site-header-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); font-weight:850; text-decoration:none; }
.brand span { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--accent); font-size:13px; }
nav { display:flex; flex-wrap:wrap; gap:18px; font-size:14px; font-weight:700; }
nav a { color:var(--muted); text-decoration:none; }
nav a[aria-current='page'], nav a:hover { color:var(--text); }
main { padding:64px 0 80px; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:12px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:780px; margin:0; font-size:clamp(38px, 7vw, 66px); line-height:1.05; letter-spacing:-.055em; }
.lead { max-width:760px; margin:24px 0 0; color:var(--muted); font-size:19px; }
.byline { margin-top:20px; color:var(--muted); font-size:13px; }
.article-nav { margin:42px 0; padding:20px 22px; border:1px solid var(--border); background:var(--surface); }
.article-nav strong { display:block; margin-bottom:8px; }
.article-nav ol { margin:0; padding-left:20px; columns:2; }
.article-nav a { color:var(--text); }
article { max-width:760px; }
article section { padding:34px 0; border-top:1px solid var(--border); }
h2 { margin:0 0 14px; font-size:clamp(25px, 4vw, 34px); line-height:1.2; letter-spacing:-.035em; }
h3 { margin:26px 0 8px; font-size:19px; }
p { margin:10px 0; }
.en { color:var(--muted); }
.example, .checklist, .note { margin:22px 0; padding:20px 22px; border:1px solid var(--border); background:var(--surface); }
.example { border-left:4px solid var(--accent); }
.example strong, .note strong { display:block; margin-bottom:7px; }
ul, ol { padding-left:24px; }
li + li { margin-top:8px; }
.library-grid { margin-top:42px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.library-card { min-height:235px; padding:24px; display:flex; align-items:flex-start; flex-direction:column; border:1px solid var(--border); color:var(--text); background:var(--surface); text-decoration:none; }
.library-card span { color:var(--accent); font-size:11px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.library-card h2 { margin:12px 0 8px; font-size:24px; }
.library-card p { color:var(--muted); }
.library-card b { margin-top:auto; color:var(--accent); }
.next-reading { margin-top:44px; padding-top:28px; border-top:1px solid var(--border); }
footer { min-height:90px; padding:24px 0; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
footer p { margin:0; }
@media (prefers-color-scheme:dark) { :root { --bg:#101117; --surface:#181920; --text:#f0eef7; --muted:#b2afbf; --border:#4b4d59; --accent:#b59af8; } }
@media (max-width:640px) { .site-header-inner { align-items:flex-start; flex-direction:column; padding:13px 0; } nav { gap:12px; } main { padding-top:42px; } .article-nav ol { columns:1; } .library-grid { grid-template-columns:1fr; } footer { flex-direction:column; } }