:root {
  --bg: #f6f2ea;
  --face: #fffdf8;
  --ink: #2f2a24;
  --muted: #9b917f;
  --track: #e6dfd1;
  --accent: #2f6db0;
  --accent-soft: rgba(47, 109, 176, .14);
  --done: #c4452f;
  --shadow: 0 2px 6px rgba(60, 45, 20, .10), 0 24px 60px -20px rgba(60, 45, 20, .30);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a18;
    --face: #262421;
    --ink: #f1ece2;
    --muted: #8f877a;
    --track: #3a3732;
    --accent: #6aa5e6;
    --accent-soft: rgba(106, 165, 230, .18);
    --done: #ec7a62;
    --shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 60px -20px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Inter", "Segoe UI", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  display: grid; place-items: center; overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
main { width: 100%; height: 100%; display: grid; place-items: center; }

.dial {
  position: relative;
  width: min(92vmin, 620px); aspect-ratio: 1;
  border-radius: 50%; outline: none;
  container-type: inline-size;
  touch-action: none;
}
.dial:focus-visible { box-shadow: 0 0 0 4px var(--accent-soft); }

.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; cursor: grab; }
.dial.dragging .ring { cursor: grabbing; }
.ring circle { fill: none; }
.track { stroke: var(--track); stroke-width: 9; }
.arc {
  stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 100px 100px;
  transition: stroke-dashoffset var(--dur, 0s) linear, stroke .3s;
}
.ticks line { stroke: var(--muted); stroke-width: .8; opacity: .55; }
.ticks line.major { stroke-width: 1.4; opacity: .8; }
.knob-rot { transform-origin: 100px 100px; transition: transform var(--dur, 0s) linear; }
.knob { fill: var(--face); stroke: var(--accent); stroke-width: 3; transition: r .15s; }
.dial.up .arc { stroke: var(--muted); opacity: .55; }
.dial.up .knob { stroke: var(--muted); }
.dial.idle.up .arc, .dial.idle.up .knob-rot { opacity: 0; }
.dial.dragging .knob { r: 7.5; }

.face {
  position: absolute; inset: 9.5%;
  border-radius: 50%; background: var(--face); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .3s;
}
.face:active { transform: scale(.985); }
.dial.holding .face { transform: scale(.97); }

.time {
  font-size: 19cqi; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: color .3s, opacity .3s;
}
.time.long { font-size: 14.5cqi; }
.dial.paused .time { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.dial.editing .time { color: var(--accent); }
.dial.editing .time::after { content: ""; display: inline-block; width: .06em; height: .8em; margin-left: .06em; background: currentColor; vertical-align: -.04em; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dial.done .time { color: var(--done); animation: ring 0.5s ease-in-out 6; }
@keyframes ring { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.dial.done .arc { stroke: var(--done); }

.controls { display: flex; align-items: center; gap: 6cqi; margin-top: 5cqi; }
.mini, .state {
  width: 9cqi; height: 9cqi; min-width: 30px; min-height: 30px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--muted);
}
.mini { border: 0; background: none; padding: 0; cursor: pointer; transition: background .15s, color .15s, opacity .2s; }
.mini:hover { background: var(--accent-soft); color: var(--ink); }
.mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini svg, .state svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.state { width: 12cqi; height: 12cqi; color: var(--accent); }
.state svg { display: none; width: 70%; height: 70%; }
.i-play { fill: currentColor !important; stroke-width: 1.2 !important; }
.dial:not(.running):not(.done) .i-play { display: block; }
.dial.running .i-pause { display: block; stroke-width: 2.6; }
.dial.done .i-done { display: block; color: var(--done); }
.dial.idle #reset { opacity: 0; pointer-events: none; }
#sound .i-mute { display: none; }
#sound[aria-pressed="false"] .i-bell { display: none; }
#sound[aria-pressed="false"] .i-mute { display: block; }

.hint {
  position: absolute; bottom: 17%; display: flex; align-items: center; gap: 1.6cqi;
  font-size: 3.1cqi; color: var(--muted); opacity: 0; transition: opacity .4s;
}
.hint svg { width: 4cqi; height: 4cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hint .key { border: 1px solid currentColor; border-radius: .5em; padding: .05em .45em; }
.dial.idle.up:hover .hint, .dial.idle.up:focus .hint { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}