.timer-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(290px,.8fr); gap: 14px; align-items: stretch; }
.timer-panel { padding-bottom: 20px; }
.timer-face { width: min(100%, 380px); aspect-ratio: 1; margin: 18px auto 10px; position: relative; display: grid; place-items: center; }
.timer-ring { width: 100%; height: 100%; position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-track, .ring-progress { fill: none; stroke-width: 2; }
.ring-track { stroke: var(--track); }
.ring-progress { stroke: var(--green); stroke-dasharray: 861; stroke-dashoffset: 0; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.timer-status { position: absolute; top: 33%; color: var(--green); font: 400 9px var(--mono); letter-spacing: .14em; }
.timer-clock { position: relative; margin-top: -4px; color: var(--ink); font: 400 clamp(54px,9vw,84px)/1 var(--mono); letter-spacing: -.09em; font-variant-numeric: tabular-nums; }
.round-count { position: absolute; top: 63%; color: var(--muted); font: 400 9px var(--mono); letter-spacing: .1em; }
.round-count b { color: var(--ink); font-weight: 400; }
.phase-label { position: absolute; top: 71%; color: var(--quiet); font: 400 8px var(--mono); letter-spacing: .15em; }
.timer-actions { display: flex; justify-content: center; gap: 9px; padding: 0 16px; }
.settings-panel { padding-bottom: 19px; }
.sr-only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.duration-inputs { display: flex; align-items: center; gap: 9px; }
.duration-inputs .number-input { width: 76px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.duration-inputs > span { color: var(--quiet); font: 400 13px var(--mono); }
.settings-panel .setting-group > .number-input { max-width: 92px; font-family: var(--mono); }
.session-summary { margin: 19px 21px 0; display: flex; align-items: center; gap: 8px; color: var(--green); font: 400 8px/1.6 var(--mono); }
.session-summary p { margin: 0; }
.summary-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(198,242,120,.1); }
.timer-note { min-height: 78px; margin: 18px 2px 0; display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--edge); }
.timer-note p { margin: 0; color: var(--muted); font-size: 10px; }
.note-mark { color: var(--orange); }
.note-detail { margin-left: auto; color: var(--quiet); font: 400 7px var(--mono); letter-spacing: .1em; }
.note-detail i { color: var(--orange); font-style: normal; padding: 0 4px; }
@media (max-width: 780px) { .timer-layout { grid-template-columns: 1fr; } .timer-face { width: min(83vw, 350px); } }
@media (max-width: 600px) { .timer-face { width: min(82vw, 310px); margin-top: 10px; } .timer-actions { flex-wrap: wrap; } .timer-note { min-height: 72px; } .note-detail { display: none; } }