.pom { display: grid; gap: 20px; justify-items: center; }
.seg { display: flex; width: 100%; max-width: 520px; background: var(--mist); border-radius: 48px; padding: 4px; }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: 48px; background: transparent; font: 500 15px var(--sans); color: var(--slate); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.dial { position: relative; width: min(380px, 86vw); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.track { fill: none; stroke: var(--mist); stroke-width: 12; }
.prog { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 565.5; transition: stroke-dashoffset .3s linear; }
.pom.rest .prog { stroke: #7dd87a; }
.time { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; }
.time strong { font: 700 clamp(72px, 18vw, 120px)/.9 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.time .mono { color: var(--slate); }
.ctrl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn.big { min-width: 180px; min-height: 60px; font-size: 18px; }
.dots { display: flex; gap: 8px; min-height: 16px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1.5px var(--ink); }
.cfg { width: 100%; max-width: 620px; background: var(--mist); border-radius: 20px; padding: 14px 18px; }
.cfg summary { cursor: pointer; font-weight: 500; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 12px; align-items: end; }
.field { display: grid; gap: 6px; font: 400 12px var(--mono); text-transform: uppercase; color: var(--slate); }
.field input { min-height: 46px; padding: 0 12px; font: 700 22px var(--display); background: var(--paper); border: 0; border-radius: 10px; width: 100%; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--slate); }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }