:root{
  --bg:#f7f7f5;--card:#ffffff;--text:#1d1d1f;--muted:#6b6b70;--line:#e3e3e0;
  --accent:#2563eb;--accent-soft:#e8efff;--good:#15803d;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141416;--card:#1e1e21;--text:#ececef;--muted:#a0a0a8;--line:#323238;
    --accent:#6b9bff;--accent-soft:#1f2a44;--good:#4ade80;
  }
}
:root[data-theme="dark"]{
  --bg:#141416;--card:#1e1e21;--text:#ececef;--muted:#a0a0a8;--line:#323238;
  --accent:#6b9bff;--accent-soft:#1f2a44;--good:#4ade80;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:32px 16px 64px}
h1{font-size:1.9rem;line-height:1.2;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{font-weight:600;font-size:.95rem;display:block;margin-bottom:6px}
select,input[type=number]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--text);font:inherit}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.presets button{border:1px solid var(--line);background:var(--bg);color:var(--text);
  padding:8px 14px;border-radius:999px;font:inherit;cursor:pointer}
.presets button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.act{display:grid;grid-template-columns:1fr 150px 90px;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.act:first-of-type{border-top:0}
.act small{display:block;color:var(--muted);font-weight:400}
.act input[type=range]{width:100%;accent-color:var(--accent)}
.act output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
@media (max-width:560px){.act{grid-template-columns:1fr 90px}.act input[type=range]{grid-column:1/-1;grid-row:2}}
.check{display:flex;gap:10px;align-items:center;margin-top:12px}
.result{text-align:center;border:2px solid var(--accent)}
.big{font-size:3rem;font-weight:800;line-height:1;margin:8px 0;font-variant-numeric:tabular-nums}
.sub{color:var(--muted)}
.plan{display:inline-block;margin-top:14px;background:var(--accent-soft);color:var(--accent);
  padding:6px 14px;border-radius:999px;font-weight:700}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:18px 0 8px;background:var(--line)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:.85rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cta{display:block;margin:18px auto 0;max-width:340px;background:var(--accent);color:#fff;text-decoration:none;
  padding:14px;border-radius:12px;font-weight:700}
.disclosure{font-size:.8rem;color:var(--muted);margin-top:10px}
h2{font-size:1.25rem;margin:32px 0 12px}
details{border-top:1px solid var(--line);padding:12px 0}
summary{cursor:pointer;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:.92rem}
td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.crumb a,.links a{color:var(--accent);text-decoration:none}
ul.tips{margin:0;padding-left:20px}
ul.tips li{margin:6px 0}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--card)}
footer{color:var(--muted);font-size:.8rem;text-align:center;margin-top:40px}

/* ---------- site chrome ---------- */
:root{--shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shadow:none}}
:root[data-theme="dark"]{--shadow:none}
.card{box-shadow:var(--shadow)}
.site-header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-header .inner{max-width:760px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;color:var(--text);text-decoration:none;letter-spacing:-.01em}
.brand img{width:26px;height:26px}
.brand span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:600;padding:6px 10px;border-radius:8px}
.nav a:hover,.nav a[aria-current]{color:var(--accent);background:var(--accent-soft)}
@media (max-width:420px){.brand{font-size:1rem}.nav a{padding:6px 7px;font-size:.85rem}}
.wrap{padding-top:24px}
h1{font-size:clamp(1.6rem,4.5vw,2.2rem);letter-spacing:-.02em}
h2{letter-spacing:-.01em}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:6px}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:0 0 24px}
.tool{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.tool:hover{border-color:var(--accent);transform:translateY(-1px)}
.tool .ico{font-size:1.5rem;line-height:1}
.tool strong{display:block}
.tool small{color:var(--muted)}
.cta{transition:filter .15s}
.cta:hover{filter:brightness(1.08)}
.site-footer{border-top:1px solid var(--line);margin-top:48px;padding:24px 16px 40px}
.site-footer .inner{max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:.85rem;color:var(--muted)}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--accent)}
.site-footer .note{flex-basis:100%;font-size:.8rem}
.prose p,.prose li{color:var(--text)}
.prose h2{font-size:1.1rem;margin:24px 0 8px}
.brand b{font-weight:800}
.nav{flex-wrap:nowrap}
.nav a{white-space:nowrap}
@media (max-width:380px){.site-header .inner{gap:8px}.brand img{width:22px;height:22px}.nav a{padding:5px 6px;font-size:.8rem}}
.plan:empty{display:none}
.brand{flex-shrink:0}
.nav{min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
@media (max-width:360px){.brand b{display:none}}

.alts{margin-top:12px;font-size:.9rem;color:var(--muted)}
.alts a{color:var(--accent);font-weight:600;text-decoration:none}

.tool .ico{flex-shrink:0;color:var(--accent);margin-top:2px}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;margin-right:4px;vertical-align:1px}
.badge.ok{background:#dcfce7;color:#166534}
.badge.warn{background:#fef3c7;color:#92400e}
.badge.no{background:#e0e7ff;color:#3730a3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge.ok{background:#14532d;color:#bbf7d0}
:root:not([data-theme="light"]) .badge.warn{background:#78350f;color:#fde68a}
:root:not([data-theme="light"]) .badge.no{background:#312e81;color:#c7d2fe}}
td a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}