/* Focus: a kitchen timer seen from above. One thick ring that empties as the round runs, a big clock in the
   middle, tomato red for focus and sage for breaks. Off-white page, nothing else competes. */
:root { --page: #f2f0eb; --card: #ffffff; --ink: #1d1b18; --soft: #5f5b54; --line: #dcd8cf; --field: #ebe8e1; --act: #c0392b; --on-act: #ffffff; --stop: #b3261e; --rest: #4f7d5c; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #131312; --card: #1c1b19; --ink: #efece6; --soft: #a9a59c; --line: #33312d; --field: #131312; --act: #ff7a68; --on-act: #2b0905; --stop: #ff8a80; --rest: #8fc29d; color-scheme: dark; }
}
.top { justify-content: space-between; align-items: baseline; }
.dial { justify-items: center; text-align: center; gap: 16px; }
.dial.rest { --act: var(--rest); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dial.rest { --on-act: #0d2414; } }
.phase { font-size: 20px; font-weight: 700; color: var(--act); }
.ring { position: relative; width: min(78vw, 320px); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; display: block; }
.track { fill: none; stroke: var(--line); stroke-width: 12; }
.done { fill: none; stroke: var(--act); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.clock { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(52px, 17vw, 84px); font-weight: 800; letter-spacing: -0.03em; }
.dots { display: flex; gap: 8px; min-height: 14px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--act); }
.dots i.on { background: var(--act); }
.buttons { justify-content: center; }
#go { min-width: 140px; }
summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details[open] summary { margin-bottom: 8px; }
details .row label { flex: 1 1 120px; }