:root{--color-bg:#f8fafc;--color-surface:#fff;--color-text:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-accent:#6366f1;--color-on-accent:#fff;--color-danger:#dc2626;--color-focus:var(--color-accent);--color-track:var(--color-border);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--radius-md:.5rem;--radius-full:9999px;--font-family:system-ui, sans-serif;--font-size-display:3.5rem;--ring-width:6px}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);margin:0}main{max-width:32rem;margin:var(--space-8) auto;padding:0 var(--space-4)}h1{text-align:center}input,button{font:inherit;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md)}button{background:var(--color-accent);color:var(--color-on-accent);cursor:pointer;border-color:#0000}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}nav{justify-content:center;gap:var(--space-2);margin-bottom:var(--space-6);display:flex}nav button{background:var(--color-surface);color:var(--color-muted);border-color:var(--color-border);border-radius:var(--radius-full)}nav button[aria-current]{background:var(--color-accent);color:var(--color-on-accent);border-color:#0000}.timer{text-align:center}.timer .phase{color:var(--color-muted);margin:0}.ring{width:16rem;margin:var(--space-4) auto;position:relative}.ring svg{width:100%;display:block;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:var(--ring-width);stroke-linecap:round}.ring-track{stroke:var(--color-track)}.ring-left{stroke:var(--color-accent)}.clock{font-size:var(--font-size-display);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;margin:0;display:flex;position:absolute;inset:0}.controls{justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4);display:flex}ul{margin:0 0 var(--space-4);padding:0;list-style:none}li{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex}li button{color:var(--color-danger);padding:0 var(--space-2);background:0 0}h3{margin:var(--space-6) 0 var(--space-2)}.rows{gap:var(--space-2);flex-direction:column;display:flex}.rows label{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.rows label.check{justify-content:flex-start}.rows input[type=number]{width:5rem}.rows h3{margin-bottom:0}.range{gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.range button{background:var(--color-surface);color:var(--color-muted);border-color:var(--color-border)}.range button[aria-current]{background:var(--color-accent);color:var(--color-on-accent);border-color:#0000}.bars{align-items:flex-end;gap:var(--space-1);height:8rem;padding:0 0 var(--space-4);margin:0 0 var(--space-4);border-bottom:1px solid var(--color-border);display:flex}.bars li{background:var(--color-track);border-radius:var(--radius-md);border:none;flex:1;align-self:flex-end;margin:0;padding:0;display:block;position:relative}.bars li>span{background:var(--color-accent);border-radius:var(--radius-md);height:100%;display:block}.bars li>span.sr-only{white-space:nowrap;background:0 0;width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--color-muted)}