.pomo { display: grid; justify-items: center; gap: var(--sp-4); text-align: center; }
.pomo-phases { width: 100%; }
.pomo-phases button { font-size: var(--fs-sm); padding-inline: 2px; white-space: nowrap; }
.pomo-ring { --size: clamp(11rem, min(66cqi, 38svh), 18rem); --w: .5rem; }
.pomo-face { position: relative; display: grid; gap: var(--sp-2); }
.pomo-time { font-size: calc(var(--size) * .26); }
.pomo-line, .pomo-sum { color: var(--text-2); font-size: var(--fs-sm); }
.pomo-ctrl { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-2); }
.pomo-ctrl .btn { height: var(--control-lg); padding-inline: var(--sp-2); }
.pomo-side { flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.pomo-icon { display: inline-flex; }
.pomo-sum { min-height: 1.5em; }
.pomo-title { font-size: var(--fs-md); }
.pomo-log { display: grid; gap: var(--sp-4); }
.pomo-log > .btn { justify-self: start; }
.pomo-log .hint { color: var(--text-3); font-size: var(--fs-sm); margin-bottom: calc(-1 * var(--sp-2)); }
.rail .stats { grid-template-columns: repeat(2, 1fr); }
.pomo-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
@container (max-width: 22rem) { .pomo-set .affix { padding-inline: var(--sp-2); } .pomo-set input { padding-inline: var(--sp-2); } }