:root {
  --bg: #f7f7f9;
  --surface: #ffffff;
  --surface-2: #f0f1f4;
  --text: #16181d;
  --text-muted: #5b616e;
  --border: #e2e4e9;
  --accent: #2f6fed;
  --accent-hover: #2557c0;
  --accent-text: #ffffff;
  --success: #1a8f5e;
  --warn: #b5560a;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,20,30,.06), 0 4px 12px rgba(16,20,30,.05);
  --max-width: 1000px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115; --surface:#171a21; --surface-2:#1e222b; --text:#e7e9ee;
    --text-muted:#9aa1af; --border:#2a2f3a; --accent:#5b8bf7; --accent-hover:#7ba0f9;
    --accent-text:#0f1115; --success:#37c98a; --warn:#e0a23c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.55; font-size:16px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:var(--max-width); margin:0 auto; padding:0 20px; }
header.site { border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:20; }
header.site .bar { max-width:var(--max-width); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.15rem; color:var(--text); }
.brand:hover { text-decoration:none; }
.brand .mark { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:var(--accent); color:var(--accent-text); font-size:1rem; }
nav.main a { color:var(--text-muted); font-weight:500; font-size:.92rem; margin-left:18px; }
nav.main a:hover { color:var(--text); text-decoration:none; }
main { padding:40px 0 64px; }
footer.site { border-top:1px solid var(--border); padding:32px 0; color:var(--text-muted); font-size:.85rem; }
footer.site .wrap { display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center; }
footer.site nav a { color:var(--text-muted); margin-right:16px; }
footer.site nav a:hover { color:var(--text); }
h1 { font-size:1.9rem; margin:0 0 8px; letter-spacing:-.01em; }
h2 { font-size:1.3rem; margin:28px 0 12px; }
p.lede { color:var(--text-muted); font-size:1.05rem; margin:0 0 24px; max-width:65ch; }
.crumbs { font-size:.85rem; color:var(--text-muted); margin-bottom:14px; }
.crumbs a { color:var(--text-muted); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:20px; }
.tool-card { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease; }
.tool-card:hover { text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--accent); }
.tool-card .icon { font-size:1.6rem; margin-bottom:10px; display:block; }
.tool-card .name { font-weight:600; color:var(--text); font-size:1rem; margin-bottom:4px; }
.tool-card .desc { color:var(--text-muted); font-size:.87rem; }
.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; }
.field .hint { font-size:.8rem; color:var(--text-muted); margin-top:4px; }
input[type=text],input[type=number],select,textarea { width:100%; padding:10px 12px; font-size:.98rem; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); font-family:inherit; }
textarea { resize:vertical; min-height:110px; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
button,.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--accent); color:var(--accent-text); border:none; padding:11px 20px; border-radius:8px; font-size:.96rem; font-weight:600; cursor:pointer; font-family:inherit; }
button:hover,.btn:hover { background:var(--accent-hover); text-decoration:none; }
.result { margin-top:22px; padding:20px; background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--border); }
.result .big { font-size:1.9rem; font-weight:700; color:var(--accent); }
.result .label { font-size:.85rem; color:var(--text-muted); margin-bottom:2px; }
.result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; }
table.compare { width:100%; border-collapse:collapse; margin-top:16px; font-size:.92rem; }
table.compare th, table.compare td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
table.compare th { color:var(--text-muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
table.compare tr:last-child td { border-bottom:none; }
.tag { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.76rem; font-weight:700; background:var(--accent); color:var(--accent-text); }
.disclaimer { margin-top:20px; font-size:.82rem; color:var(--text-muted); border-left:3px solid var(--border); padding:8px 14px; background:var(--surface-2); border-radius:0 8px 8px 0; }
.ad-slot { margin:28px 0; border:1px dashed var(--border); border-radius:var(--radius); padding:14px; text-align:center; color:var(--text-muted); font-size:.78rem; }
.content-block { margin-top:36px; color:var(--text-muted); font-size:.95rem; }
.content-block h2 { color:var(--text); }
.content-block ul { padding-left:20px; }
.related { margin-top:8px; }
.related a { display:inline-block; margin:4px 8px 4px 0; padding:6px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; font-size:.85rem; color:var(--text); }
.related a:hover { border-color:var(--accent); text-decoration:none; }
@media (max-width:560px) { h1{font-size:1.5rem;} main{padding:24px 0 48px;} }