:root { color-scheme:light; --bg:#f8fafc; --surface:#fff; --text:#0f172a; --muted:#475569; --line:#cbd5e1; --primary:#2563eb; --tint:#eff6ff; }
@media (prefers-color-scheme:dark) { :root { color-scheme:dark; --bg:#0b1120; --surface:#111827; --text:#f8fafc; --muted:#cbd5e1; --line:#475569; --primary:#7dd3fc; --tint:#172554; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.75 system-ui,sans-serif; }
a { color:var(--primary); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:3px solid var(--primary); outline-offset:5px; }
header,main,footer { width:min(1080px,100% - 3rem); margin:auto; }
header { padding:1.25rem 0; border-bottom:1px solid var(--line); }
nav { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; }
main { padding:2.5rem 0 4rem; }
footer { padding:1.5rem 0; border-top:1px solid var(--line); color:var(--muted); }
h1,h2,h3 { line-height:1.2; letter-spacing:-.025em; }
h1 { font-size:clamp(2rem,5vw,3.4rem); max-width:900px; margin:.7rem 0 1rem; }
h2 { font-size:1.75rem; margin:0 0 1rem; }
h3 { font-size:1.2rem; }
p { margin:.8rem 0; }
.eyebrow { color:var(--primary); font-weight:700; font-size:.9rem; letter-spacing:.04em; }
.lead { font-size:1.15rem; max-width:800px; color:var(--muted); }
.card,section,details { margin-top:2rem; padding:clamp(1.2rem,3vw,2rem); background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.notice { border-left:4px solid var(--primary); background:var(--tint); padding:1rem 1.3rem; border-radius:0 12px 12px 0; }
.facts,.results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.facts div,.results div { padding:1rem; background:var(--tint); border-radius:12px; }
.facts strong,.results strong { display:block; font-size:1.65rem; line-height:1.3; overflow-wrap:anywhere; }
.facts span,.results span,.hint { font-size:.9rem; color:var(--muted); }
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; text-align:left; }
th,td { padding:.85rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:var(--tint); }
fieldset { border:1px solid var(--line); border-radius:12px; margin:1.2rem 0; padding:1rem; }
legend { font-weight:700; padding:0 .5rem; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem; }
label { display:block; font-weight:600; }
input { display:block; width:100%; margin-top:.4rem; font:inherit; padding:.55rem .8rem; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); }
button,.button { display:inline-block; border:0; border-radius:999px; padding:.7rem 1.3rem; background:#2563eb; color:white; font:600 1rem/1.5 system-ui,sans-serif; text-decoration:none; cursor:pointer; }
summary { cursor:pointer; font-size:1.4rem; font-weight:700; line-height:1.4; }
li { margin:.65rem 0; }
.formula { font-family:monospace; overflow-wrap:anywhere; background:var(--tint); padding:1rem; border-radius:8px; }
.error { color:#b91c1c; font-weight:600; }
@media (prefers-color-scheme:dark) { .error { color:#fca5a5; } }
[hidden] { display:none !important; }
@media (max-width:650px) { .facts,.results,.fields { grid-template-columns:1fr; } header,main,footer { width:calc(100% - 2rem); } th,td { padding:.6rem; } }
@media print { body { background:white; color:black; } header,footer,button { display:none; } section,details { break-inside:avoid; } }