/* TimerLoop styles. REBRAND HERE: change the variables in :root (and the dark block). */
:root{--primary:#0a5cff;--on-primary:#fff;--bg:#fff;--bg-alt:#eef5ff;--text:#0b1b3a;--muted:#55657d;--border:#d9e3f2;
--ok:#0f9f6e;--warn:#b45309;--err:#d92d20;--s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:3rem;--r:14px;
--shadow:0 6px 24px rgba(10,40,100,.08);--font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
@media(prefers-color-scheme:dark){:root{--primary:#4d8dff;--on-primary:#06122b;--bg:#0d1526;--bg-alt:#111c33;--text:#e8eefc;--muted:#9fb0cc;--border:#24324f;--err:#ff6b5e;--shadow:none}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:1rem/1.6 var(--font);color:var(--text);background:var(--bg)}
h1,h2,h3{line-height:1.2}a{color:var(--primary)}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hdr{border-bottom:1px solid var(--border);position:relative}
.hdr .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:64px}
.logo{font-weight:800;font-size:1.5rem;color:var(--text);text-decoration:none}.logo span{color:var(--primary)}
.nav__list{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);list-style:none;margin:0;padding:0}
.nav__list a{display:inline-block;padding:.5rem 0;color:var(--text);text-decoration:none;font-weight:500}
.nav__list a[aria-current]{color:var(--primary);box-shadow:0 2px 0 var(--primary)}
.nav__btn{display:none;min-height:44px;padding:0 var(--s2);border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font:600 1rem var(--font)}
@media(max-width:860px){.js .nav__btn{display:block}.js .nav__list{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;flex-direction:column;padding:var(--s2);background:var(--bg);border-bottom:1px solid var(--border)}.js .nav__list.is-open{display:flex}}
.hero{background:var(--bg-alt);padding:var(--s3) 0 var(--s4)}
.hero .wrap{display:grid;gap:var(--s3)}
.hero--tool .wrap{max-width:720px}
@media(min-width:900px){.hero--home .wrap{grid-template-columns:1fr 1fr;align-items:center;gap:var(--s4)}}
.hero h1{font-size:clamp(2rem,6vw,3rem);margin:0 0 var(--s1)}
.lead{font-size:1.15rem;color:var(--muted);margin:0 0 var(--s2)}
.ticks{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;padding:0;margin:0;font-weight:500}
.ticks li:before{content:"\2713";color:var(--ok);margin-right:.4rem;font-weight:700}
.timer{background:var(--bg);border:2px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--s3);text-align:center}
.timer__presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:.5rem}
.chip{min-height:44px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font:500 .95rem var(--font);cursor:pointer}
.chip:hover{border-color:var(--primary)}
.timer__mid{min-height:8.5rem;display:flex;align-items:center;justify-content:center}
.timer__inputs{display:flex;align-items:center;justify-content:center;gap:.5rem}
.field{display:flex;flex-direction:column;align-items:center;font-size:.85rem;color:var(--muted)}
.field input{width:4.5rem;min-height:60px;text-align:center;font:600 2rem var(--font);border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);-moz-appearance:textfield}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sep{font-size:2rem;font-weight:700;padding-bottom:1.2rem}
.timer__display{font-size:clamp(3.5rem,18vw,6.5rem);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.timer[data-state=idle] .timer__display,.timer:not([data-state=idle]) .timer__inputs{display:none}
.timer[data-state=done]{border-color:var(--err)}.timer[data-state=done] .timer__display{color:var(--err)}
.timer__actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.btn{min-height:52px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text);font:600 1rem var(--font);cursor:pointer}
.btn--start{grid-column:1/-1;min-height:62px;background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-size:1.3rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.timer__extras{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s2)}
.btn--link{min-height:44px;border:0;background:none;color:var(--muted);font:500 .9rem var(--font);text-decoration:underline;cursor:pointer}
.timer:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0}
.timer:fullscreen .timer__display{font-size:clamp(5rem,26vw,20rem)}
section.block{padding:var(--s4) 0 0}.block h2{font-size:1.6rem;margin:0 0 var(--s2)}
.cards{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(230px,1fr));list-style:none;padding:0;margin:0}
.card{border:1px solid var(--border);border-top:4px solid var(--c);border-radius:var(--r);padding:var(--s2) var(--s3);background:var(--bg-alt)}
.card h3{margin:.25rem 0}.card p{margin:0 0 var(--s1);color:var(--muted)}.card a{font-weight:600}.soon{color:var(--muted);font-size:.9rem}
.prose{max-width:760px}.prose li{margin:.25rem 0}
.faq details{border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;margin:.5rem 0;max-width:760px}
.faq summary{cursor:pointer;font-weight:600;min-height:28px}.faq p{margin:.5rem 0 0;color:var(--muted)}
.ad-slot{margin:var(--s3) auto;text-align:center}.ad-slot--live{min-height:100px}
.ftr{margin-top:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--border);color:var(--muted);font-size:.9rem}
.ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1)}
.ftr__nav{display:flex;flex-wrap:wrap;gap:0 var(--s2)}.ftr a{display:inline-block;padding:.5rem 0;color:var(--muted)}
[data-stopwatch] .timer__display{font-size:clamp(3rem,15vw,5.5rem)}
.chip:disabled{opacity:.45;cursor:not-allowed}
.laps__head,.laps li{display:flex;padding:.5rem 0;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}
.laps__head{margin-top:var(--s2);color:var(--muted);font-size:.85rem}
.laps{list-style:none;padding:0;margin:0;max-height:16rem;overflow:auto}
.laps span{flex:1;text-align:center}.laps span:first-child{text-align:left}.laps span:last-child{text-align:right}
[data-seq] .timer__mid,[data-visual] .timer__mid{flex-direction:column}
[data-seq] .timer__mid{min-height:10rem}[data-visual] .timer__mid{min-height:19rem}
.timer__inputs{flex-wrap:wrap}
.phase{font-size:1.4rem;font-weight:700}.round{color:var(--muted)}
.timer[data-state=idle] .phase,.timer[data-state=idle] .round{display:none}
[data-phase=rest] .phase,[data-phase=rest] .timer__display{color:var(--ok)}
.disc{width:min(55vw,210px);aspect-ratio:1;border-radius:50%;margin-bottom:var(--s2);background:conic-gradient(var(--primary) calc(var(--p,100) * 1%),var(--border) 0)}
.pop{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0}.pop a{display:block;padding:.6rem 1rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;font-weight:500}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s2);top:var(--s1);z-index:10;padding:.5rem 1rem;background:var(--bg);border-radius:8px}
.ftr__co{flex-basis:100%;margin:0;font-size:.85rem}
.field input{padding:0;line-height:1.2;-webkit-appearance:none;appearance:none;border-radius:10px}