.timer-app{--tm-a:var(--accent);--tm-c:color-mix(in srgb,var(--tm-a) 55%,white);margin:1.6rem 0 0}
.timer-app.m-break{--tm-a:var(--accent2)}
.timer-app.m-long{--tm-a:color-mix(in srgb,var(--accent2) 65%,var(--ink))}
.tm-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1rem;padding:clamp(1.4rem,4vw,2.4rem) clamp(1rem,3vw,2rem) clamp(1.4rem,3vw,2rem);border-radius:32px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.tm-ring::before{content:"";position:absolute;inset:-14%;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--tm-a) 11%,transparent) 62%,transparent);transition:opacity .6s;opacity:.55}
.timer-app.running .tm-ring::before{opacity:1;animation:tmGlow 4.5s ease-in-out infinite alternate}
@keyframes tmGlow{from{transform:scale(.96)}to{transform:scale(1.04)}}
.tm-ticks line{stroke:var(--line2);stroke-width:1.4;stroke-linecap:round}
.tm-ticks line.b{stroke:var(--mute);stroke-width:2;opacity:.7}
.tm-knob{fill:var(--paper);stroke:var(--tm-a);stroke-width:4;transition:opacity .3s;filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--tm-a) 55%,transparent))}
.tm-modes{flex-wrap:wrap;justify-content:center}
.tm-ring{position:relative;width:min(100%,380px);aspect-ratio:1;isolation:isolate}
.tm-ring svg{width:100%;height:100%;display:block;overflow:visible}
.tm-track{fill:none;stroke:var(--cell);stroke-width:12}
.tm-prog{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .3s linear;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tm-a) 45%,transparent))}
.tm-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;text-align:center}
.tm-lbl{font:700 .78rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tm-a)}
.tm-time{font:300 clamp(3.4rem,15vw,5.8rem)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.tm-sub{font-size:.95rem;color:var(--mute);min-height:1.4em}
.tm-dots{display:flex;gap:.7rem}
.tm-dots i{width:11px;height:11px;border-radius:50%;background:var(--cell);box-shadow:0 0 0 1px var(--line2) inset;transition:background .3s,transform .3s}
.tm-dots i.on{background:var(--tm-a);box-shadow:0 0 10px color-mix(in srgb,var(--tm-a) 60%,transparent)}
.tm-dots i.cur{background:transparent;box-shadow:0 0 0 2px var(--tm-a) inset;transform:scale(1.2)}
.tm-ctl{display:flex;align-items:center;gap:clamp(.8rem,3vw,1.4rem)}
.tm-b{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;color:var(--ink);background:var(--cell);border-radius:50%;transition:transform .12s,background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tm-b:hover{background:color-mix(in srgb,var(--cell) 70%,var(--tm-a))}
.tm-b:active{transform:scale(.93)}
.tm-b:focus-visible{outline:2px solid var(--tm-a);outline-offset:3px}
.tm-sm{width:52px;height:52px}.tm-sm svg{width:22px;height:22px}
.tm-go{width:84px;height:84px;color:var(--bg);background:linear-gradient(140deg,var(--tm-c),var(--tm-a));box-shadow:0 10px 26px -8px color-mix(in srgb,var(--tm-a) 70%,transparent)}
.tm-go:hover{background:linear-gradient(140deg,var(--tm-c),var(--tm-a));transform:translateY(-1px) scale(1.03)}
.tm-go svg{width:34px;height:34px}
.tm-quote{max-width:46ch;text-align:center;animation:tmIn .5s ease}
.tm-qt{margin:0;font:italic 400 1.1rem/1.5 var(--serif)}
.tm-qa{margin:.3rem 0 0;color:var(--mute);font-size:.9rem}
@keyframes tmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tm-tools{justify-content:center;gap:.6rem 1rem}
.tm-today{color:var(--mute);font-size:.92rem}
.tm-set{margin:1rem 0 0;color:var(--mute)}
.tm-set summary{cursor:pointer;font-weight:600;color:var(--ink)}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin:.8rem 0 0}
.tm-f{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.tm-f input{padding:.55rem .8rem;border:1px solid var(--line2);border-radius:12px;background:var(--paper);color:var(--ink);font:600 1rem var(--sans);min-height:0}
body.timer-focus header.top,body.timer-focus footer,body.timer-focus .eyebrow,body.timer-focus h1,body.timer-focus .lead,body.timer-focus .tm-set,body.timer-focus .hint{display:none}
body.timer-focus .timer-app{margin:0;min-height:90vh;display:flex;align-items:center;justify-content:center}
body.timer-focus .tm-stage{width:min(100%,640px);border:0;box-shadow:none;background:transparent}
@media (prefers-reduced-motion:reduce){.timer-app.running .tm-ring::before{animation:none}.tm-prog,.tm-dots i,.tm-b{transition:none}.tm-quote{animation:none}}
.tm-ring{pointer-events:none}
.tm-modes,.tm-ctl,.tm-tools{position:relative;z-index:2}