:root{color-scheme:light dark;--color-canvas:oklch(98% 0.0084 248);--color-surface:oklch(100% 0.0000 248);--color-surface-muted:oklch(95.5% 0.0144 248);--color-ink:oklch(22% 0.0192 248);--color-ink-muted:oklch(48% 0.0216 248);--color-line:oklch(90% 0.0216 248);--color-brand:oklch(50% 0.0750 244);--color-brand-strong:oklch(40% 0.0712 244);--color-brand-soft:oklch(95% 0.0210 244);--color-section:oklch(35% 0.0675 244);--color-section-glow:oklch(46% 0.0750 244);--color-success:oklch(48% 0.1300 152);--color-warning:oklch(55% 0.1300 75);--color-danger:oklch(48% 0.1700 25);--color-danger-soft:oklch(96% 0.0300 25);--color-chart-1:#5a7fa8;--color-chart-2:#3f9a92;--color-chart-3:#8a76b8;--color-chart-4:#c68a4e;--color-chart-5:#5d9e6d;--color-chart-6:#bd6474;--color-chart-7:#7d8798;--color-chart-8:#a39a52}
@media(prefers-color-scheme:dark){:root{--color-canvas:oklch(15.5% 0.0108 248);--color-surface:oklch(20.5% 0.0120 248);--color-surface-muted:oklch(25% 0.0132 248);--color-ink:oklch(93% 0.0048 248);--color-ink-muted:oklch(68% 0.0084 248);--color-line:oklch(32% 0.0156 248);--color-brand:oklch(72% 0.0750 244);--color-brand-strong:oklch(82% 0.0585 244);--color-brand-soft:oklch(27% 0.0338 244);--color-section:oklch(31% 0.0638 244);--color-section-glow:oklch(42% 0.0750 244);--color-success:oklch(70% 0.1300 152);--color-warning:oklch(78% 0.1300 75);--color-danger:oklch(65% 0.1600 25);--color-danger-soft:oklch(26% 0.0500 25);--color-chart-1:#5a7fa8;--color-chart-2:#3f9a92;--color-chart-3:#8a76b8;--color-chart-4:#c68a4e;--color-chart-5:#5d9e6d;--color-chart-6:#bd6474;--color-chart-7:#7d8798;--color-chart-8:#a39a52}}
*{box-sizing:border-box}
body{margin:0;background:var(--color-canvas);color:var(--color-ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.site-nav{border-bottom:1px solid var(--color-line);position:sticky;top:0;background:var(--color-canvas)}
.site-nav .container{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-block:16px}
.site-title{font-size:18px;margin:0}
.nav-links{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-links a{color:var(--color-ink-muted);text-decoration:none}
.nav-links a.active,.nav-links a:hover{color:var(--color-brand)}
main{padding-block:40px}.component{margin-bottom:40px}
.component-hero{padding:48px 32px;border-radius:16px;color:#fff;
  background:linear-gradient(150deg,var(--color-section),var(--color-section-glow))}
.component-hero h2{margin:0 0 8px;font-size:32px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--color-line)}
th{font-weight:600;color:var(--color-ink-muted)}
.table-scroll{overflow-x:auto}
.stats-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{padding:20px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-surface)}
.stat-value{font-size:28px;font-weight:700;color:var(--color-brand)}
.stat-label{color:var(--color-ink-muted);font-size:13px}
figure{margin:0}figcaption{color:var(--color-ink-muted);font-size:13px;margin-top:8px}
.component-image img{max-width:100%;height:auto;border-radius:14px;vertical-align:top}
.site-footer{border-top:1px solid var(--color-line);padding-block:24px;color:var(--color-ink-muted);font-size:13px}
.chart{height:360px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
table.heatmap{border-collapse:separate;border-spacing:2px;font-size:12px;width:auto}
table.heatmap th,table.heatmap td{border:0;padding:0}
table.heatmap th{padding:0 6px;color:var(--color-ink-muted);font-weight:500;text-align:left}
.heat-cell{width:28px;height:28px;border-radius:3px;text-align:center;font-size:10px;color:#fff}
.heat-empty{background:var(--color-surface-muted,var(--color-surface))}
.heat-legend{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--color-ink-muted)}
.heat-bar{display:inline-block;height:8px;width:128px;border-radius:999px}
.card-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(var(--card-min,320px),100%),1fr));list-style:none;margin:0;padding:0}
.card{overflow:hidden;border:1px solid var(--color-line);border-radius:14px;background:var(--color-surface)}
.card img{width:100%;height:128px;object-fit:cover;display:block}
.card-body{padding:16px}
.card-title{margin:0;font-size:14px;font-weight:600}
.card-subtitle{margin:2px 0 0;font-size:12px;color:var(--color-ink-muted)}
.card-text{margin:8px 0 0;font-size:14px;color:var(--color-ink-muted)}
.timeline{position:relative;margin:0;padding:0 0 0 24px;list-style:none;border-left:1px solid var(--color-line)}
.timeline li{position:relative;margin-bottom:24px}
.timeline li::before{content:"";position:absolute;left:-30px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--color-brand);border:2px solid var(--color-canvas)}
.timeline time{font-size:12px;font-weight:500;color:var(--color-ink-muted)}
.timeline p{margin:2px 0 0;font-size:14px}
svg.network{display:block;margin:0 auto;width:100%;max-width:520px;height:auto;color:var(--color-ink-muted)}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}