:root{--bg:#ffffff;--fg:#1a2233;--muted:#5b667a;--edge:#e4e8f0;--accent:#1f6feb;--soft:#f5f7fb;--good:#0f9d58}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fg);line-height:1.6;background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header.site{border-bottom:1px solid var(--edge);background:#fff;position:sticky;top:0;z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
header.site .brand{font-weight:700;font-size:1.1rem;color:var(--fg)}
header.site nav a{color:var(--muted);margin-left:1rem;font-size:.9rem}
.wrap{max-width:820px;margin:0 auto;padding:1rem 1.25rem}
.wrap.wide{max-width:1080px}
h1{font-size:1.9rem;line-height:1.2;margin:1.2rem 0 .4rem}
h2{font-size:1.3rem;margin:2rem 0 .6rem}
h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.muted{color:var(--muted)}
.tool{border:1px solid var(--edge);border-radius:14px;padding:1.25rem;background:var(--soft);margin:1rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.25rem}
.field input,.field select{width:100%;padding:.6rem .7rem;border:1px solid var(--edge);border-radius:9px;font-size:1rem;background:#fff}
.field .unit{font-size:.75rem;color:var(--muted)}
.results{margin-top:1.1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem}
.result{background:#fff;border:1px solid var(--edge);border-radius:11px;padding:.85rem 1rem}
.result .label{font-size:.78rem;color:var(--muted)}
.result .value{font-size:1.5rem;font-weight:700;margin-top:.15rem}
.result.em{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.result.em .value{color:var(--accent)}
table{border-collapse:collapse;width:100%;margin:.5rem 0;font-size:.95rem}
th,td{border:1px solid var(--edge);padding:.5rem .65rem;text-align:left}
th{background:var(--soft)}
.faq{border-top:1px solid var(--edge);padding:.9rem 0}
.faq h3{margin:.2rem 0}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem;margin:.6rem 0}
.related a{display:block;border:1px solid var(--edge);border-radius:10px;padding:.7rem .85rem;background:#fff}
.variants{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.variants a{font-size:.85rem;border:1px solid var(--edge);border-radius:999px;padding:.25rem .7rem;background:#fff}
footer.site{border-top:1px solid var(--edge);margin-top:2.5rem;color:var(--muted);font-size:.85rem}
footer.site a{color:var(--muted)}
/* Ad slots — generous spacing, never adjacent to controls (AdSense-safe, SOP §6.2) */
.ad{margin:1.5rem 0;min-height:90px;border:1px dashed var(--edge);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#b9c2d0;font-size:.75rem;background:#fafbfe}
@media(max-width:640px){h1{font-size:1.55rem}.wrap{padding:1rem}}