:root{
  --bg:#000; --ink:#fff; --muted:#9a9a9a; --line:#333; --panel:#0d0d0d; --red:#ff4433; --amber:#ffb020;
  --sans:"SF Pro Display","Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* the root size scales with the screen, and every control is sized in rem */
html{font-size:clamp(15px,.5vw + 12.5px,26px);height:100%;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100dvh;
}
a{color:inherit}

/* ---- the big time ---- */
.time{
  font-weight:700; font-size:min(34vw,62vh); line-height:.9; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  display:flex; align-items:center; justify-content:center; white-space:nowrap;
  transition:opacity .2s;
}
@supports (height:1dvh){ .time{font-size:min(34vw,62dvh)} }
.time.long{font-size:min(22vw,50vh)} /* h:mm:ss has 7 characters, so it needs a smaller size */
@supports (height:1dvh){ .time.long{font-size:min(22vw,50dvh)} }
.time.msg{font-size:min(17vw,40vh)} /* "Time's up" is nine characters */
@supports (height:1dvh){ .time.msg{font-size:min(17vw,40dvh)} }
.time #digits,.time #msg{display:flex;align-items:center;justify-content:center}
.time #msg{flex-direction:column;letter-spacing:-.03em;text-align:center}
.time #over{font-size:.38em;font-weight:600;letter-spacing:0;margin-top:.2em;opacity:.9}
.note-line{
  font-size:clamp(1.15rem,3.4vw,2.4rem); font-weight:600; line-height:1.3; color:var(--ink);
  opacity:.85; text-align:center; max-width:90%; margin-top:clamp(.75rem,3vh,2rem); overflow-wrap:anywhere;
}
.time .colon{margin:0 .02em; transform:translateY(-.06em)}
[data-state="running"] .colon,[data-state="warn"] .colon,[data-state="urgent"] .colon{animation:pulse 1s steps(2) infinite}
[data-state="paused"] .time,[data-state="loading"] .time{opacity:.45}
[data-state="warn"] .time{color:var(--amber)}
[data-state="urgent"] .time,[data-state="done"] .time{color:var(--red)}
[data-state="done"] .time #msg{animation:breathe 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.2}}
@keyframes breathe{50%{opacity:.4}}

/* ---- buttons and inputs ---- */
.btn{
  font:600 1rem var(--sans); color:var(--ink); background:transparent;
  border:2px solid var(--ink); border-radius:.7rem; cursor:pointer;
  min-height:3rem; min-width:7.5rem; padding:.5rem 1.6rem;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:#ccc;border-color:#ccc}
.btn.small{min-width:3rem;padding:.4rem .8rem;font-size:.95rem;border-width:1.5px;border-color:var(--line);border-radius:.55rem}
.btn.small:hover{border-color:var(--ink)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn:disabled:hover{background:transparent;color:var(--ink)}
.btn.primary:disabled:hover{background:var(--ink);color:var(--bg)}
.btn:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  [data-state] .colon,[data-state="done"] .time #msg{animation:none}
  *{transition:none!important}
}