:root { color-scheme: light; --ink:#1d1d1f; --muted:#6e6e73; --paper:#f5f5f7; --surface:#fff; --line:rgba(0,0,0,.11); --blue:#0071e3; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; --mono:"SFMono-Regular",Consolas,monospace; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:3px; }
.component-nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 max(22px,calc((100vw - 1080px)/2)); border-bottom:1px solid var(--line); background:rgba(250,250,252,.84); backdrop-filter:blur(20px) saturate(180%); }
.component-brand { font-weight:700; text-decoration:none; }
.component-nav nav { display:flex; gap:22px; font-size:12px; }
.component-nav nav a { color:#424245; text-decoration:none; }
main, footer { width:min(1080px,calc(100% - 44px)); margin-inline:auto; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; padding-top:34px; color:var(--muted); font-size:12px; }
.component-hero { max-width:880px; padding:88px 0 48px; }
.eyebrow { margin:0 0 14px; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(48px,7vw,82px); line-height:1; letter-spacing:-.055em; }
.component-lede { max-width:800px; margin:28px 0 0; color:var(--muted); font-size:21px; line-height:1.5; }
.component-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:25px; }
.component-tags span { padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.7); font-size:11px; }
.component-figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--chart-bg,#fff); box-shadow:0 24px 70px rgba(60,70,100,.12); }
.component-figure svg { display:block; width:100%; height:auto; }
.component-figure figcaption { padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); background:#fff; font-size:11px; }
code, pre { font-family:var(--mono); }
.component-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.component-section { margin-top:24px; padding:42px; border:1px solid var(--line); border-radius:28px; background:var(--surface); }
.component-columns .component-section { margin-top:0; }
.component-section h2 { margin:0; font-size:30px; letter-spacing:-.035em; }
.component-section > p:last-of-type { color:var(--muted); font-size:16px; line-height:1.55; }
.component-use { color:#f5f5f7; background:#111113; }
.component-use .eyebrow { color:#64d2ff; }
.component-use > p:last-of-type { color:#a1a1a6; }
.evidence-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:26px 0 0; border:1px solid var(--line); background:var(--line); }
.evidence-facts div { min-width:0; padding:15px; background:#fafafa; }
.evidence-facts dt { color:var(--muted); font-size:11px; }
.evidence-facts dd { margin:6px 0 0; overflow-wrap:anywhere; font-size:13px; font-weight:650; }
.text-link { color:var(--blue); }
pre { max-height:440px; margin:24px 0 0; padding:22px; overflow:auto; border-radius:15px; color:#e8e8ed; background:#19191c; font-size:12px; line-height:1.55; }
.component-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; padding:50px 0 90px; }
.component-actions a { padding:13px 20px; border-radius:999px; color:#fff; background:var(--blue); text-decoration:none; }
.component-actions a + a { border:1px solid var(--blue); color:var(--blue); background:transparent; }
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.related-grid a { display:grid; gap:7px; padding:18px; border:1px solid var(--line); border-radius:16px; text-decoration:none; background:#fafafa; }
.related-grid a:hover { border-color:rgba(0,113,227,.5); }
.related-grid strong { font-size:15px; }
.related-grid span { color:var(--muted); font-size:12px; line-height:1.45; }
.index-family { display:grid; grid-template-columns:240px 1fr; gap:35px; padding:48px 0; border-top:1px solid var(--line); }
.index-family h2 { margin:0; font-size:27px; letter-spacing:-.03em; }
.index-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.index-links a { display:flex; flex-direction:column; min-width:0; padding:19px; border:1px solid var(--line); border-radius:17px; text-decoration:none; background:#fff; }
.index-links a:hover { border-color:rgba(0,113,227,.5); box-shadow:0 10px 30px rgba(60,70,100,.08); }
.index-links strong { font-size:16px; }
.index-links span { margin-top:6px; overflow:hidden; color:var(--blue); font-family:var(--mono); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.index-links small { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.45; }
footer { display:flex; justify-content:space-between; gap:20px; padding:28px 0 36px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
@media (max-width:700px) { .component-nav nav a:first-child { display:none; } .component-nav nav { gap:12px; } main,footer { width:min(100% - 28px,1080px); } .component-hero { padding:60px 0 36px; } .component-lede { font-size:18px; } .component-columns { grid-template-columns:1fr; } .component-section { padding:28px 22px; border-radius:22px; } .evidence-facts,.related-grid,.index-links { grid-template-columns:1fr; } .index-family { grid-template-columns:1fr; gap:18px; } footer { flex-direction:column; } }