/* The embeddable breathing timer (/embed). Small on purpose: it loads inside other sites. */
:root, :root[data-theme='dawn'] {
  --bg: #f3f6f5; --text: #14242a; --dim: #3d5560; --line: #c9d6d3; --track: #dbe5e2;
  --accent: #0e6e6e; --accent-ink: #fff; --orb-l: 62%; --orb-s: 45%;
}
:root[data-theme='nocturne'] {
  --bg: #0b0c1a; --text: #ece6db; --dim: #c9bfae; --line: #3a3550; --track: #24233d;
  --accent: #f0c88f; --accent-ink: #1a1408; --orb-l: 72%; --orb-s: 55%;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.4 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.w { height: 100%; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 14px; }
.w-stage { position: relative; width: min(70vw, 52vh, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.w-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--track); }
.w-orb {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, hsl(var(--hue, 178) var(--orb-s) calc(var(--orb-l) + 14%)), hsl(var(--hue, 178) var(--orb-s) var(--orb-l)) 62%, hsl(var(--hue, 178) var(--orb-s) calc(var(--orb-l) - 10%)));
  transform: scale(calc(0.42 + 0.58 * var(--level, 0.4)));
  box-shadow: 0 10px 40px hsl(var(--hue, 178) 50% 50% / 0.25);
}
.w-read { position: relative; text-align: center; color: #10272b; }
:root[data-theme='nocturne'] .w-read { color: #1a1408; }
.w-phase { font-weight: 650; font-size: clamp(15px, 4.4vmin, 20px); }
.w-count { font-size: clamp(22px, 8vmin, 36px); font-weight: 300; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.w-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
select, button {
  font: inherit; min-height: 40px; border-radius: 999px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text);
}
button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; min-width: 92px; }
.w-credit { font-size: 12.5px; color: var(--dim); text-decoration: none; }
.w-credit:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .w-orb { transition: none; } }
.w-count:empty { display: none; }