/* Rounds: a gym wall clock. While it runs, the whole screen is one colour you can read from across the room:
   hot orange to work, cool blue to rest, grey to get ready. The set-up screen stays plain. */
:root { --page: #f1f1ee; --card: #ffffff; --ink: #1a1a18; --soft: #5c5c57; --line: #d8d8d2; --field: #e9e9e4; --act: #d9480f; --on-act: #ffffff; --stop: #b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #121211; --card: #1b1b19; --ink: #eeeeea; --soft: #a5a59e; --line: #31312d; --field: #121211; --act: #ff8a50; --on-act: #2b0e00; --stop: #ff8a80; color-scheme: dark; }
}
#plan > button { justify-self: start; min-width: 160px; }
.run { position: fixed; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; text-align: center; padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: #5b5f66; color: #fff; --act: #fff; --on-act: #1a1a18; }
.run.work { background: #d9480f; } .run.rest { background: #1f5fa8; } .run.paused { filter: saturate(.35); }
.kind { font-size: clamp(26px, 7vw, 44px); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.secs { font-size: clamp(120px, 42vw, 300px); font-weight: 800; line-height: .95; letter-spacing: -0.04em; }
.where { font-size: 22px; font-weight: 700; } .then { font-size: 18px; font-weight: 600; min-height: 1.5em; }
.bar { width: min(100%, 520px); height: 10px; border-radius: 5px; background: rgb(255 255 255 / .25); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: #fff; }
.controls { justify-content: center; margin-top: 12px; }
.run .quiet { color: #fff; border-color: #fff; }
.run button { min-width: 130px; }