:root { --bg:#f6f5f2; --fg:#1d1d1b; --muted:#66655f; --card:#ffffff; --line:#dcdad3; --accent:#c2410c; --accent2:#1d4ed8; --ok:#1a7f4b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#141413; --fg:#ecebe6; --muted:#a09e96; --card:#1e1e1c; --line:#33322f; --accent:#f97316; --accent2:#60a5fa; --ok:#34d399; } }
:root[data-theme="dark"] { --bg:#141413; --fg:#ecebe6; --muted:#a09e96; --card:#1e1e1c; --line:#33322f; --accent:#f97316; --accent2:#60a5fa; --ok:#34d399; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", "Noto Sans", sans-serif; }
header.top { border-bottom:1px solid var(--line); background:var(--card); }
header.top .wrap { max-width:1180px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
header.top .brand { font-weight:700; font-size:1.1rem; color:var(--fg); text-decoration:none; }
header.top nav a { color:var(--muted); text-decoration:none; margin-right:14px; }
header.top nav a.on, header.top nav a:hover { color:var(--accent); }
main { max-width:1180px; margin:0 auto; padding:22px 16px 48px; }
h1 { font-size:1.55rem; margin:0 0 6px; }
h2 { font-size:1.15rem; margin:22px 0 8px; }
.sub { color:var(--muted); margin:0 0 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.row { display:flex; flex-wrap:wrap; gap:16px; align-items:end; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:4px; }
.hint { font-size:.75rem; color:var(--muted); max-width:240px; margin-top:4px; }
input[type=number], select { padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); width:150px; }
input[type=range] { width:180px; }
button { padding:9px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; font-weight:600; cursor:pointer; }
button.secondary { background:transparent; color:var(--fg); border-color:var(--line); }
button:disabled { opacity:.5; cursor:default; }
canvas, img.fig { width:100%; height:auto; border-radius:8px; border:1px solid var(--line); background:#000; }
.status { font-size:.9rem; color:var(--muted); min-height:1.4em; }
pre.stats { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.85rem; white-space:pre; overflow:auto; margin:0; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; border:1px solid var(--line); color:var(--muted); margin-left:8px; vertical-align:middle; }
table { border-collapse:collapse; width:100%; font-size:.9rem; }
th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
th { color:var(--muted); font-weight:600; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.kpi { font-size:1.6rem; font-weight:700; }
.kpi small { font-size:.8rem; color:var(--muted); font-weight:400; display:block; }
.examples img { height:72px; border-radius:6px; border:2px solid transparent; cursor:pointer; margin-right:8px; }
.examples img:hover { border-color:var(--accent); }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.thumbs figure { margin:0; }
.thumbs figcaption { font-size:.8rem; color:var(--muted); }
footer { color:var(--muted); font-size:.85rem; max-width:1180px; margin:0 auto; padding:0 16px 32px; }
a { color:var(--accent); }
svg.chart { width:100%; height:auto; background:var(--card); }
svg.chart text { fill:var(--muted); font-size:11px; }
@media (max-width:600px) { input[type=number], select { width:120px; } }