.hero.tool{display:block;text-align:center}
.hero.tool .head{margin:0 auto 18px;max-width:640px}
.tbig{font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:clamp(3.2rem,14vw,8.5rem);line-height:1;letter-spacing:-.02em;margin:10px 0;font-variant-numeric:tabular-nums;color:var(--ink)}
.tph{font-weight:600;color:var(--brand);min-height:1.5em;margin:0}
.tsub{color:var(--muted);margin:6px 0 0}
.hero.tool .seg{justify-content:center;margin:16px auto}
.hero.tool .pillbar{justify-content:center;margin:18px auto}
.tform{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:center;margin:12px 0}
.tform label{display:inline-flex;gap:8px;align-items:center;font-weight:600}
.tform input,.tform select{font:inherit;min-height:44px;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:9em}
.tform input[type=number]{width:5.5em}
.tform button,.mt button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;cursor:pointer}
.hero.tool.warn{background:color-mix(in srgb,var(--accent) 22%,var(--bg))}
.hero.tool.over{background:color-mix(in srgb,var(--accent) 45%,var(--bg))}
.hero.tool.over .tbig,.mt.done .mt-t{color:var(--accent)}
.units{display:flex;gap:clamp(10px,3vw,28px);justify-content:center;flex-wrap:wrap;margin:16px 0}
.units div{min-width:4.2em}.units b{display:block;font-family:Outfit,system-ui,sans-serif;font-size:clamp(2.4rem,10vw,5.5rem);line-height:1;font-variant-numeric:tabular-nums}
.units span{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}
.mtl{list-style:none;padding:0;margin:16px auto;max-width:720px;display:grid;gap:10px}
.mt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;justify-content:space-between;padding:12px 16px;border-radius:18px;border:1px solid var(--line);background:var(--card);text-align:left}
.mt.running{border-color:var(--brand)}.mt.done{border-color:var(--accent)}
.mt-l{font-weight:600;flex:1 1 8em}.mt-t{font-family:Outfit,system-ui,sans-serif;font-size:1.9rem;font-variant-numeric:tabular-nums}
.mt-b{display:flex;gap:8px}.mt .primary{min-width:96px}
.hero.tool:fullscreen{display:flex;flex-direction:column;justify-content:center}
.final{color:var(--accent)}