:root { color-scheme: light; --ink:#19152b; --muted:#6d667d; --purple:#6423c3; --line:#e5e0ed; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; color:var(--ink); background:#fdfcfe; font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--purple); text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible, [tabindex]:focus-visible { outline:3px solid #ab80ef; outline-offset:4px; }
.skip { position:absolute; top:-60px; left:20px; padding:10px; background:white; }
.skip:focus { top:10px; }
.site-nav, main, footer { max-width:1152px; margin:auto; padding:0 40px; }
.site-nav { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.wordmark { color:var(--ink); text-decoration:none; font:600 24px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.06em; }
.wordmark span { color:#8f849c; font:400 14px system-ui,sans-serif; letter-spacing:0; }
.site-nav nav { display:flex; gap:25px; }
.site-nav nav a { color:var(--muted); font-size:13px; text-decoration:none; }
.article-header { padding:75px 0 45px; }
.eyebrow { margin:0 0 22px; color:var(--purple); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1 { max-width:940px; margin:0 0 34px; font-size:clamp(40px,5.7vw,68px); line-height:1.08; font-weight:650; letter-spacing:-.05em; }
.byline { display:flex; align-items:center; gap:12px; font-size:13px; }
.author-mark { display:grid; place-items:center; width:34px; height:34px; background:#eee5fb; border-radius:50%; color:var(--purple); font-weight:700; }
.muted { color:var(--muted); margin-left:7px; }
.source-link { margin-left:auto; font-size:12px; }
.article-layout { display:grid; grid-template-columns:minmax(0,740px) 230px; gap:70px; border-top:1px solid var(--line); padding-top:42px; }
article { font:19px/1.85 Georgia,"Times New Roman",serif; min-width:0; }
article > p:first-child { font-size:23px; line-height:1.65; color:#352642; }
article p { margin:0 0 25px; }
article h2 { margin:58px 0 23px; font:650 29px/1.25 system-ui,sans-serif; letter-spacing:-.035em; }
article h2:first-of-type { margin-top:40px; }
article strong { font-weight:700; }
article a { overflow-wrap:anywhere; }
article code { padding:.12em .28em; background:#f0eaf6; border-radius:3px; color:#4d2587; font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.table-scroll { overflow-x:auto; margin:30px 0; border:1px solid var(--line); border-radius:7px; }
table { border-collapse:collapse; width:100%; min-width:510px; font:13px/1.6 system-ui,sans-serif; }
th,td { padding:14px 17px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
th { background:#f1ecf6; font-weight:650; }
tr:last-child td { border-bottom:0; }
td:first-child { width:35%; font-weight:600; }
aside { padding-top:8px; }
.aside-inner { position:sticky; top:35px; }
aside .eyebrow { font-size:10px; margin-bottom:18px; }
aside nav { display:flex; flex-direction:column; gap:13px; }
aside nav a { font-size:12px; color:var(--muted); text-decoration:none; }
aside nav a:hover { color:var(--purple); }
.try-card { margin-top:34px; padding:20px; border:1px solid var(--line); background:white; border-radius:8px; }
.try-card strong { display:block; font-size:13px; margin-bottom:12px; }
.try-card code { display:block; font:11px/1.5 ui-monospace,monospace; white-space:nowrap; margin-bottom:15px; }
.try-card a { font-size:11px; }
.end-card { margin:56px 0 60px; padding:30px; background:#f2ecfa; border:1px solid #e5d9f4; border-radius:10px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px; }
.end-card p { margin:0; color:var(--muted); font-size:14px; }
.end-card a { font-size:12px; font-weight:600; }
footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:25px; padding-bottom:30px; font-size:11px; color:var(--muted); }
@media (max-width:900px) { .article-layout { grid-template-columns:minmax(0,1fr); gap:0; } aside { display:none; } h1 br { display:none; } }
@media (max-width:600px) { .site-nav,main,footer { padding-left:23px; padding-right:23px; } .site-nav { min-height:76px; } .site-nav nav { gap:15px; } .site-nav nav a { font-size:11px; } .article-header { padding:45px 0 29px; } h1 { font-size:42px; margin-bottom:25px; } .eyebrow { font-size:10px; } .byline { flex-wrap:wrap; } .source-link { margin-left:46px; flex-basis:100%; } .article-layout { padding-top:28px; } article { font-size:18px; line-height:1.8; } article > p:first-child { font-size:21px; } article h2 { font-size:27px; margin-top:42px; } .end-card { padding:23px; margin:35px 0; align-items:flex-start; flex-direction:column; gap:12px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }