@import "https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap";@property --zone{syntax:"<color>";inherits:true;initial-value:#8b9aab}:root{--ink:#080b10;--well:#10161e;--steel:#8b9aab;--mist:#c5d0dc;--paper:#e8eef6;--pulse:#ff4458;--accent:#ff4458;--zone:#8b9aab;--glass:#0c121a8c;--line:#e8eef614;color:var(--paper);background:var(--ink);font-synthesis:none;font-family:Outfit,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--ink);min-width:760px}main{background:radial-gradient(ellipse 72% 58% at 50% 48%, color-mix(in srgb, var(--zone) 36%, #0c1016) 0%, transparent 62%), radial-gradient(ellipse at center, color-mix(in srgb, var(--zone) 18%, #141c26) 0%, color-mix(in srgb, var(--zone) 7%, #0b1016) 48%, var(--ink) 100%);width:100%;height:100%;transition:--zone 1.1s;position:relative;overflow:hidden}.ecg-grid,.ambient-wave,.vignette,.heart-scene{pointer-events:none;position:absolute;inset:0}.ecg-grid{z-index:0;opacity:.28;background:repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--zone) 28%, transparent) 39px 40px), repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--zone) 28%, transparent) 39px 40px), repeating-linear-gradient(90deg, transparent 0 7px, #e8eef609 7px 8px), repeating-linear-gradient(0deg, transparent 0 7px, #e8eef609 7px 8px);-webkit-mask-image:radial-gradient(#000 18%,#0000 72%);mask-image:radial-gradient(#000 18%,#0000 72%)}.ambient-wave{z-index:0;opacity:.95}.heart-scene{z-index:1}.heart-scene canvas{width:100%;height:100%;display:block}.vignette{z-index:1;background:radial-gradient(#0000 22%,#080b106b 64%,#080b10e6 100%),linear-gradient(#080b109e,#0000 28% 72%,#080b10c7)}.clock,.center-stage{z-index:2;position:absolute}.clock{border:1px solid color-mix(in srgb, var(--zone) 24%, var(--line));background:color-mix(in srgb, var(--zone) 8%, #080b109e);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 32px color-mix(in srgb, var(--zone) 12%, transparent);border-radius:999px;align-items:center;gap:14px;padding:12px 18px 12px 16px;display:flex;top:4.8vh;right:4.8vw}.clock:before{content:"";background:#3d4754;border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 4px #3d47542e}.clock.on:before{background:var(--zone);box-shadow:0 0 0 4px color-mix(in srgb, var(--zone) 22%, transparent);animation:1.6s ease-in-out infinite live-dot}.clock-time{letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--paper);text-shadow:0 0 18px color-mix(in srgb, var(--zone) 24%, transparent);font:500 clamp(22px,2.4vw,34px)/1 IBM Plex Mono,monospace}.center-stage{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;inset:0 4.8vw}.eyebrow{color:var(--steel);letter-spacing:.38em;margin:0 0 48px;font:11px IBM Plex Mono,monospace}.bpm{align-items:center;gap:24px;display:flex;transform:translate(8px)}.bpm strong{letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--paper);text-shadow:0 0 48px color-mix(in srgb, var(--accent) 28%, transparent);font-family:Big Shoulders Display,sans-serif;font-size:clamp(168px,22vw,328px);font-weight:600;line-height:1}.bpm.is-empty strong{color:#e8eef638;text-shadow:none}.bpm span{color:var(--steel);letter-spacing:.28em;font:15px IBM Plex Mono,monospace}.zone-label{letter-spacing:.22em;align-items:center;gap:10px;margin-top:48px;font-size:13px;font-weight:700;display:flex}.zone-label i{background:currentColor;border-radius:50%;width:8px;height:8px;box-shadow:0 0 14px}.zone-label span{color:#7d8b9a;letter-spacing:.12em;margin-left:2px;font:11px IBM Plex Mono,monospace}.zone-meter{gap:6px;margin-top:18px;display:flex}.zone-meter span{background:#e8eef61a;border-radius:99px;width:42px;height:6px}.zone-meter span.on{background:var(--tick);box-shadow:0 0 12px color-mix(in srgb, var(--tick) 55%, transparent)}@keyframes live-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}@media (width<=900px){.clock{right:24px}.center-stage{left:24px;right:24px}.bpm strong{font-size:clamp(140px,20vw,210px)}.zone-meter span{width:30px}}@media (prefers-reduced-motion:reduce){.clock.on:before{animation:none}}