.pt-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.pt-modes button { padding: .35rem .8rem; min-height: 0; font-size: .9rem; }
.pt-modes button[aria-pressed="true"] { background: var(--rose-700); border-color: var(--rose-700); color: #fff; }
.pt-dial { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 1rem auto .5rem; }
.pt-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pt-dial circle { fill: none; stroke-width: 7; }
.pt-track { stroke: var(--line); }
#pt-ring { stroke: var(--rose-700); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
#pt-wrap[data-phase="short"] #pt-ring, #pt-wrap[data-phase="long"] #pt-ring { stroke: #6f8f7d; }
.pt-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#pt-time { font: 700 clamp(2.6rem, 12vw, 3.6rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
#pt-phase { font-weight: 600; margin-top: .35rem; }
#pt-cycle { color: var(--muted); font-size: .85rem; }
.pt-main { justify-content: center; }
.pt-meta { text-align: center; color: var(--muted); margin: .4rem 0 0; font-size: .92rem; }
.pt-settings summary { cursor: pointer; font-weight: 600; margin-top: 1rem; }
.pt-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .75rem; }
@media (min-width: 760px) { .pt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pt-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .75rem; }
.pt-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .75rem; }
.pt-row input[type="range"] { accent-color: var(--rose-700); width: 10rem; max-width: 100%; }
#pt-presets button { padding: .3rem .7rem; min-height: 0; font-size: .85rem; }