:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:#0b0e14; color:#e6e9ef;
  font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color:#7aa2f7; text-decoration:none; } a:hover { text-decoration:underline; }
main { max-width:920px; margin:0 auto; padding:1.5rem 1.1rem 4rem; }
.muted { color:#9aa4b2; } .n { text-align:right; font-variant-numeric:tabular-nums; }

header.site, footer.site { max-width:920px; margin:0 auto; padding:1rem 1.1rem;
  display:flex; align-items:center; gap:1.2rem; }
header.site { border-bottom:1px solid #1c2333; }
.brand { font-weight:700; font-size:1.15rem; letter-spacing:-.02em; color:#e6e9ef; }
header.site nav { margin-left:auto; display:flex; gap:1.1rem; }
footer.site { border-top:1px solid #1c2333; margin-top:3rem; color:#5b6577; font-size:.82rem; }

.hero { padding:2rem 0 1rem; }
.hero h1 { font-size:2.1rem; letter-spacing:-.02em; margin:0 0 .5rem; }
.hero p { color:#cbd3e1; max-width:46rem; }
.cta { display:inline-block; margin-top:1rem; padding:.5rem 1rem; border:1px solid #2a3550;
  border-radius:9px; color:#e6e9ef; }

.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.7rem; }
.tile { background:#131826; border:1px solid #232b3d; border-radius:11px; padding:.8rem .9rem;
  display:flex; flex-direction:column; gap:.15rem; color:#e6e9ef; }
.tile:hover { border-color:#34406080; text-decoration:none; }
.tile .t { font-weight:700; } .tile .n { color:#9aa4b2; font-size:.82rem; text-align:left; }
.tile .f { color:#5cc8a0; font-size:.78rem; }

.card .hd h1 { font-size:1.7rem; margin:0; letter-spacing:-.02em; }
.card .hd .tk { color:#7aa2f7; font-size:1.1rem; font-weight:600; }
.card .sub { color:#9aa4b2; font-size:.9rem; margin-top:.2rem; }

.chart { margin:1.2rem 0; }
.chart iframe { width:100%; height:340px; border:1px solid #232b3d; border-radius:11px; background:#0e1320; }
.chart .attr { font-size:.74rem; color:#5b6577; margin-top:.25rem; }

.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.2rem 0; }
.metrics .m { background:#131826; border:1px solid #232b3d; border-radius:11px; padding:.9rem 1rem; }
.mv { font-size:1.9rem; font-weight:650; letter-spacing:-.02em; } .mx { font-size:1rem; color:#5b6577; }
.ml { color:#9aa4b2; font-size:.8rem; margin-top:.15rem; }
.g { color:#5cc8a0; } .y { color:#e0c060; } .r { color:#e0746c; }

h2 { font-size:1.15rem; margin:2rem 0 .5rem; } h2 .muted { font-weight:400; font-size:.85rem; }
.ml-link { font-size:.82rem; font-weight:400; margin-left:.4rem; }
.tw { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:.9rem; }
th,td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid #1c2333; }

.explain { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.5rem; }
.ex { background:#131826; border:1px solid #232b3d; border-radius:11px; padding:.9rem 1rem; }
.ex h3 { margin:0 0 .5rem; font-size:.95rem; }
.sig { list-style:none; padding:0; margin:0; } .sig li { padding:.12rem 0 .12rem 1.3rem; position:relative; font-size:.88rem; }
.sig li.ok:before { content:"✓"; color:#5cc8a0; position:absolute; left:0; }
.sig li.no:before { content:"·"; color:#5b6577; position:absolute; left:0; }
.sig li.no { color:#7a8499; }
.comp { list-style:none; padding:0; margin:0; } .comp li { font-size:.86rem; color:#9aa4b2; padding:.1rem 0; }
.comp b { color:#e6e9ef; float:right; }

.src { margin-top:1.6rem; color:#7a8499; font-size:.82rem; }
.filters { display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; margin:1rem 0; align-items:end; }
.filters label { display:flex; flex-direction:column; gap:.25rem; font-size:.8rem; color:#9aa4b2; }
.filters input, .filters select { background:#131826; color:#e6e9ef; border:1px solid #2a3242;
  border-radius:7px; padding:.4rem .55rem; font-size:.9rem; }
#tbl th { cursor:pointer; user-select:none; } #tbl th:hover { color:#fff; }
.prose { max-width:46rem; } .prose h2 { margin-top:1.6rem; }
blockquote { border-left:3px solid #2a3550; margin:1rem 0; padding:.3rem 1rem; color:#cbd3e1; }

@media (max-width:640px){ .metrics{grid-template-columns:1fr 1fr} .explain{grid-template-columns:1fr} }