:root{--bg:#f7f7f8;--text:#111827;--muted:#6b7280;--border:#d1d5db;--accent:#2563eb;--surface:#ffffffa6}@media (prefers-color-scheme:dark){:root{--bg:#0b0f14;--text:#e5e7eb;--muted:#94a3b8;--border:#1f2937;--accent:#3b82f6;--surface:#11182780}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:ui-sans-serif,system-ui,-apple-system}.app{flex-direction:column;min-height:100%;padding:32px 0 48px;display:flex}.main-heading{text-align:center;letter-spacing:.2px;color:var(--text);margin:0 0 24px;font-size:clamp(1.5rem,2vw + 1rem,2rem);font-weight:700}.counter-container{flex-wrap:wrap;justify-content:center;align-items:stretch;gap:16px;width:80%;margin:0 auto;display:flex}@media (min-width:1200px){.counter-container{gap:20px}}.counter-card{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);border-radius:12px;flex:320px;max-width:420px;padding:20px 18px}.counter-card:hover{border-color:color-mix(in oklab,var(--border)70%,var(--accent))}.counter-heading{color:var(--text);margin:0 0 10px;font-size:1.125rem;font-weight:600}.counter-value{letter-spacing:.5px;color:var(--text);margin:8px 0 16px;font-size:2rem;font-weight:700;line-height:1.1}.button-group{gap:10px;display:flex}.btn{appearance:none;color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:10px;width:56px;height:44px;font-size:1.25rem;font-weight:600;transition:background-color .12s,border-color .12s,transform 60ms}.btn:focus{border-color:var(--accent);outline:none}.btn:hover{background-color:color-mix(in oklab,var(--border)18%,transparent)}.btn:active{transform:translateY(1px)}.increment:hover{border-color:color-mix(in oklab,var(--border)60%,var(--accent))}.decrement:hover{border-color:color-mix(in oklab,var(--border)70%,var(--muted))}