/* Remaining time is a colored area that disappears clockwise. */
@property --elapsed{syntax:'<angle>';inherits:true;initial-value:0deg}
body[data-tool=pomodoro] .tool-workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}
.pomo-panel{padding:28px 36px;align-items:center;justify-content:flex-start;background:#fffdf7}
.pomo-session-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;color:#7f8c72;font-size:12px}
.pomo-phase{display:inline-flex;align-items:center;gap:7px;font-weight:700}.pomo-phase::before{content:'';width:7px;height:7px;border-radius:50%;background:#dea17f}
.pomo-round-label{color:#9b9e8b;font-size:11px}.pomo-panel>.tool-status{width:100%;text-align:center;font-size:11px;margin:12px 0 10px;color:#8c977e}
.pomo-dial{--elapsed:0deg;--dial-color:#e5a17f;position:relative;width:min(100%,350px);aspect-ratio:1;border-radius:50%;flex:none;margin:6px auto 13px;border:1px solid #e9e4d9;background:#fffdf5;box-shadow:0 10px 26px #766f5011,0 0 0 6px #f5f1e780;transition:--elapsed .12s linear}
.pomo-dial[data-phase=rest]{--dial-color:#a5b98e}.pomo-dial[data-status=paused]{filter:saturate(.65)}
.pomo-sector{position:absolute;inset:17px;border-radius:50%;background:conic-gradient(from 0deg,#f0eee4 0deg var(--elapsed),var(--dial-color) var(--elapsed) 360deg);box-shadow:inset 0 0 12px #b0a47716}
.pomo-ticks{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#ccc9b7;stroke-width:1;pointer-events:none}.pomo-ticks .is-major{stroke:#899476;stroke-width:2;stroke-linecap:round}
.pomo-pointer{position:absolute;inset:17px;transform:rotate(var(--elapsed));pointer-events:none}.pomo-pointer i{position:absolute;left:calc(50% - 3px);top:-4px;width:6px;height:22px;border-radius:8px;background:#6d7d60;box-shadow:0 0 0 3px #fffdf6}
.pomo-dial-center{position:absolute;inset:25%;border-radius:50%;background:#4f6455;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fffdf0;box-shadow:0 8px 15px #736f5824;text-align:center;gap:6px;padding:8px}
.pomo-time-label{font-size:10px;color:#e6e9d9;letter-spacing:.02em}.pomo-clock{font-family:var(--font-ui);font-size:clamp(24px,3.7vw,43px);font-weight:650;letter-spacing:-1.3px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}.pomo-clock:has(+*){max-width:100%}.pomo-percent{display:flex;align-items:baseline;gap:4px;justify-content:center;margin:0;color:#c9d6be;line-height:1.4}.pomo-percent strong{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}.pomo-percent span{font-size:9px}
.pomo-rounds{display:flex;gap:8px;justify-content:center;min-height:10px;margin:6px 0}.pomo-rounds span{width:8px;height:8px;border-radius:50%;border:1px solid #d5ddca;background:#f3f5eb}.pomo-rounds .is-current{background:#e8b294;border-color:#daa88c;box-shadow:0 0 0 3px #f7eee0}.pomo-rounds .is-done{background:#9bb083;border-color:#9bb083}
.pomo-controls{justify-content:center;margin:17px 0 20px;gap:9px;width:100%}.pomo-controls .tool-button.primary{min-width:135px}.pomo-skip{border:0;background:transparent;color:#9a9f8b;font:inherit;font-size:10px;min-height:40px;padding:7px;cursor:pointer}
.pomo-settings{display:grid;grid-template-columns:.75fr 1.5fr .85fr;gap:14px;width:100%;border-top:1px solid #e8e7db;padding-top:20px;margin-top:0}.pomo-settings fieldset{border:0;padding:0;margin:0;min-width:0}.pomo-settings legend{padding:0;margin-bottom:10px;color:#7b8b70;font-size:11px;font-weight:600}.pomo-number{display:flex;align-items:center;gap:5px;min-width:0;color:#9ca28e;font-size:10px}.pomo-number input{width:100%;min-width:0;height:43px;border:1px solid #e0e3d4;border-radius:11px;background:#fffefb;color:#576c50;text-align:center;padding:7px 2px;font:inherit;font-size:17px;font-variant-numeric:tabular-nums;appearance:textfield}.pomo-number input::-webkit-inner-spin-button,.pomo-number input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pomo-number input:focus{border-color:#aabb91;outline:2px solid #dce5ce;outline-offset:2px}.pomo-duration{display:flex;gap:4px;align-items:center}.pomo-duration .pomo-number{flex:1}.pomo-duration-colon{color:#c0c7b3}.pomo-number span{flex:none;white-space:nowrap}.pomo-setting-error{font-size:11px;color:#b77760;min-height:0;margin:7px 0 0;text-align:center}.pomo-setting-error:empty{display:none}.pomo-help{font-size:10px;line-height:1.8;color:#a0a58e;text-align:center;width:100%;margin:14px 0 0}.pomo-today{font-size:10px;color:#919e82;line-height:1.6;margin:10px 0 0}
body[data-tool=pomodoro] .tool-stage{min-height:650px}body[data-tool=pomodoro] .tool-actor-button{bottom:110px}body[data-tool=pomodoro] .tool-stage-caption{bottom:42px}body[data-tool=pomodoro] .tool-stage-label{top:38px;padding:0 16px}body[data-tool=pomodoro] .tool-actor-bubble{max-width:190px;font-size:13px;line-height:1.7;border-color:#d8d6b9;box-shadow:0 5px 15px #80785412}
@media(min-width:701px) and (max-width:1000px){.pomo-panel{padding:25px 20px}.pomo-settings{gap:8px}.pomo-number span{font-size:9px}.pomo-clock{font-size:32px}.pomo-controls{gap:5px}.pomo-controls .tool-button.primary{min-width:110px}}
@media(max-width:700px){body[data-tool=pomodoro] .tool-workspace{display:flex;flex-direction:column;background:#fffdf7;padding:22px 16px 25px}.pomo-panel{display:contents}.pomo-session-top{order:0}.pomo-panel>.tool-status{order:1;margin:12px 0 10px}.pomo-dial{order:2;width:min(100%,315px);margin:10px auto 15px}.pomo-clock{font-size:36px}.pomo-rounds{order:3;margin:8px 0 20px}body[data-tool=pomodoro] .tool-stage{order:4;min-height:350px;height:350px;flex:none;width:100%;border:0;border-radius:20px;margin:0;overflow:hidden}body[data-tool=pomodoro] .tool-actor-button{bottom:24px}body[data-tool=pomodoro] .tool-stage-caption{bottom:8px;font-size:10px}body[data-tool=pomodoro] .tool-stage-label{top:15px;font-size:11px;padding:0 4px}body[data-tool=pomodoro] .tool-stage-label small{display:none}body[data-tool=pomodoro] .tool-actor-bubble{max-width:165px;padding:9px 12px;font-size:11px;line-height:1.55}.pomo-controls{order:5;margin:18px 0 20px}.pomo-settings{order:6;gap:10px}.pomo-setting-error{order:7}.pomo-help{order:8}.pomo-today{order:9;text-align:center}.pomo-settings legend{font-size:10px}.pomo-number input{font-size:16px}.pomo-number span{font-size:9px}}
@media(max-width:360px){.pomo-clock{font-size:30px}.pomo-percent strong{font-size:16px}.pomo-time-label{font-size:9px}.pomo-controls .tool-button{min-width:0;padding:10px 14px}.pomo-controls .tool-button.primary{min-width:112px}.pomo-skip{flex-basis:100%;min-height:20px}.pomo-settings{gap:7px}.pomo-number{gap:3px}.pomo-number input{height:40px}.pomo-duration{gap:2px}.pomo-settings legend{font-size:10px}}
@media(prefers-reduced-motion:reduce){.pomo-dial{transition:none}}

.pomo-dial[data-hours=true] .pomo-clock{font-size:clamp(22px,2.7vw,32px)}

.pomo-number input:disabled{opacity:.75;background:#f7f7ef}.pomo-number input:user-invalid{border-color:#ce9a82}
@media(max-width:700px){.pomo-settings legend{min-height:30px;line-height:1.5;margin-bottom:6px}.pomo-number{flex-direction:column;align-items:stretch;gap:5px}.pomo-number span{text-align:center;line-height:1.3}.pomo-duration{align-items:flex-start}.pomo-duration-colon{padding-top:12px}}

.pomo-session-top{scroll-margin-top:18px}@media(max-width:700px){.pomo-controls{order:4}body[data-tool=pomodoro] .tool-stage{order:5}}