:root{--bg:#0a0b0d;--bg2:#111317;--surface:#15171c;--fg:#f3f3f1;--muted:#9b9ea6;--line:#262931;--accent:#ffb224;--accent2:#4cc9ff;--on-accent:#111111;--good:#3ddc84;--warn:#ffb224;--bad:#ff5c5c;--font-display:'Space Grotesk', system-ui, sans-serif;--font-body:'IBM Plex Sans', system-ui, sans-serif;--font-mono:'IBM Plex Mono', ui-monospace, monospace;--display-weight:600;--display-track:-0.05em}

.art .t{stroke:#3a3e48;stroke-width:2.2}
.art .a{stroke:var(--accent);stroke-width:2.6}
.art .b{stroke:var(--accent2);stroke-width:2.2}
.art .pad{fill:var(--bg);stroke:var(--accent);stroke-width:2.4}
.art .chip{fill:#121418;stroke:#4a4f5c;stroke-width:2}
.art .core{fill:var(--accent);opacity:.9}
.art text{fill:#111;font:600 26px var(--font-mono)}
#cf-ring{transition:stroke .3s}
#cf-ring[data-level=good]{stroke:var(--good)}
#cf-ring[data-level=bad]{stroke:var(--bad)}
.ol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ol-out{padding:1.1rem 1.2rem;border-radius:18px;background:var(--bg2);border:1px solid var(--line)}
.ol-out.is-given{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ol-out .result-label{margin-bottom:.4rem}
.presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}