:root{--bg:#f7fafc;--card:#fff;--muted:#64748b;--accent:#0ea5a4}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:#0f172a}
.container{max-width:880px;margin:3rem auto;padding:1.5rem;background:var(--card);border-radius:12px;box-shadow:0 6px 24px rgba(2,6,23,0.06)}
header h1{margin:0 0 .25rem;font-size:1.75rem}
.lead{margin:0 0 1rem;color:var(--muted)}
.counters{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.counter{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-radius:8px;background:#f8fafc;border:1px solid rgba(15,23,42,0.04)}
.controls{display:flex;align-items:center;gap:.75rem}
.controls .value{min-width:48px;text-align:center;font-weight:700}
button{font-size:1rem;padding:.4rem .6rem;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:#fff;cursor:pointer}
button:active{transform:translateY(1px)}
#reset{background:transparent;border:1px solid rgba(15,23,42,0.06);padding:.5rem 1rem}
.actions{display:flex;gap:1rem;align-items:center;margin-top:1rem}
.back{margin-left:auto;color:var(--accent);text-decoration:none}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}