:root{color-scheme:light dark;--color-canvas:oklch(98% 0.0098 258);--color-surface:oklch(100% 0.0000 258);--color-surface-muted:oklch(95.5% 0.0168 258);--color-ink:oklch(22% 0.0224 258);--color-ink-muted:oklch(48% 0.0252 258);--color-line:oklch(90% 0.0252 258);--color-brand:oklch(50% 0.1500 254);--color-brand-strong:oklch(40% 0.1425 254);--color-brand-soft:oklch(95% 0.0420 254);--color-section:oklch(35% 0.1350 254);--color-section-glow:oklch(46% 0.1500 254);--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:#2f6fed;--color-chart-2:#12a3b8;--color-chart-3:#7b5ce0;--color-chart-4:#e0862f;--color-chart-5:#3fa66a;--color-chart-6:#d4506b;--color-chart-7:#5f7fa8;--color-chart-8:#b8a12f}
@media(prefers-color-scheme:dark){:root{--color-canvas:oklch(15.5% 0.0126 258);--color-surface:oklch(20.5% 0.0140 258);--color-surface-muted:oklch(25% 0.0154 258);--color-ink:oklch(93% 0.0056 258);--color-ink-muted:oklch(68% 0.0098 258);--color-line:oklch(32% 0.0182 258);--color-brand:oklch(72% 0.1500 254);--color-brand-strong:oklch(82% 0.1170 254);--color-brand-soft:oklch(27% 0.0675 254);--color-section:oklch(31% 0.1275 254);--color-section-glow:oklch(42% 0.1500 254);--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:#2f6fed;--color-chart-2:#12a3b8;--color-chart-3:#7b5ce0;--color-chart-4:#e0862f;--color-chart-5:#3fa66a;--color-chart-6:#d4506b;--color-chart-7:#5f7fa8;--color-chart-8:#b8a12f}}
*{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;z-index:2;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:64px}
.component-title{margin:0 0 12px;font-size:18px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.empty{border:1px dashed var(--color-line);border-radius:8px;padding:24px 16px;text-align:center;font-size:14px;color:var(--color-ink-muted)}
.hero{border-radius:14px;padding-inline:32px;text-align:center;background-color:var(--color-brand-soft);background-size:cover;background-position:center}
.hero h2{margin:0;font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em}
.hero p{margin:8px 0 0;opacity:.8}
.component-text a{color:var(--color-brand);text-decoration:underline}
.component-text h2{margin:16px 0 0;font-size:18px;font-weight:600}.component-text p{margin:8px 0}
.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stats.horizontal{display:flex;flex-wrap:wrap}
.stat{padding:16px 20px;border:1px solid var(--color-line);border-radius:14px;background:var(--color-surface)}
.stat-value{font-size:24px;line-height:32px;font-weight:600}
.stat-label{margin-top:2px;color:var(--color-ink-muted);font-size:12px}
figure{margin:0}
.image{width:fit-content;max-width:100%}
.image img{max-width:100%;height:auto;border-radius:14px;vertical-align:top}
.image figcaption{margin-top:8px;text-align:center;color:var(--color-ink-muted);font-size:12px}
.table-scroll{max-height:400px;overflow:auto;border:1px solid var(--color-line);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--color-line);white-space:nowrap}
.compact th,.compact td{padding-block:4px}
thead th{position:sticky;top:0;background:var(--color-surface);font-weight:600;color:var(--color-ink-muted)}
.chart{height:320px;color:var(--color-ink-muted)}
.note{margin-top:4px;color:var(--color-ink-muted);font-size:12px}
.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;position:static}
table.heatmap th{padding:0 6px;color:var(--color-ink-muted);font-weight:500;text-align:left;background:none}
.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}
.heat-scroll{overflow-x:auto}
.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:500}
.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);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.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:4px;width:12px;height:12px;border-radius:50%;box-sizing:border-box;
  background:var(--color-brand);border:2px solid var(--color-surface)}
.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%;height:384px;color:var(--color-ink-muted)}
.network-note{margin-top:4px;text-align:center;font-size:12px;color:var(--color-ink-muted)}
figcaption{color:var(--color-ink-muted)}
.site-footer{border-top:1px solid var(--color-line);padding-block:24px;color:var(--color-ink-muted);font-size:13px}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}