:root{--paper:#f8f6f1;--surface:#fff;--ink:#1c1a17;--ink-2:#45403a;--muted:#6a645b;--rule:#d9d3c7;--grid:#ebe7df;--control:#8a8377;--accent:#b02e26;--accent-strong:#8f231c;--on-accent:#fff;--accent-wash:#b02e261a;--roi:#ff5a4f;--ok:#276b43;--warn:#8f5200;--warn-wash:#8f520014;--focus:#1f5fbf;--serif:Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;--sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;--page:1072px;--gutter:24px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--paper:#121110;--surface:#1b1a18;--ink:#eeeae3;--ink-2:#cdc6bb;--muted:#a0988c;--rule:#3a3631;--grid:#2a2825;--control:#7b7469;--accent:#ff8a7a;--accent-strong:#ffa597;--on-accent:#121110;--accent-wash:#ff8a7a1f;--ok:#72d09a;--warn:#f0b458;--warn-wash:#f0b4581a;--focus:#8ab4ff}}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--paper);color:var(--ink);font:17px/1.55 var(--sans);-webkit-text-size-adjust:100%;margin:0}.masthead,main,body>footer{width:min(var(--page), 100% - 2 * var(--gutter));margin-inline:auto}h1,h2,h3{font-family:var(--serif);color:var(--ink)}p{margin:0}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.visually-hidden,#status[data-phase=idle]{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;min-height:0;margin:-1px;padding:0;position:absolute;overflow:hidden}.sprite{width:0;height:0;position:absolute;overflow:hidden}.masthead{border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);margin-top:28px;margin-bottom:36px;padding:14px 0 28px}.kicker,.eyebrow{font:600 .75rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}.eyebrow{color:var(--muted);margin-bottom:20px}h1{letter-spacing:-.02em;margin:0;font-size:clamp(2.75rem,7vw,4.75rem);font-weight:400;line-height:1}.lead{max-width:34em;font:italic 400 clamp(1.15rem, 2.2vw, 1.45rem) / 1.4 var(--serif);color:var(--ink-2);margin-top:14px}body:has(#intro[hidden]) .masthead{margin-top:20px;margin-bottom:20px;padding-bottom:18px}body:has(#intro[hidden]) h1{font-size:clamp(2.25rem,4.5vw,3rem)}body:has(#intro[hidden]) .lead{margin-top:8px;font-size:1.125rem}.steps{counter-reset:step;gap:0;margin:0 0 20px;padding:0;list-style:none;display:grid}.steps li{border-top:1px solid var(--rule);counter-increment:step;grid-template-columns:2.5rem minmax(0,1fr);column-gap:14px;padding:16px 0 18px;display:grid}.steps li:last-child{border-bottom:1px solid var(--rule)}.steps li:before{content:counter(step);font:400 2.25rem/1 var(--serif);color:var(--accent);grid-row:1/span 2}.steps h3{margin:0 0 4px;font-size:1.2rem;font-weight:700;line-height:1.3}.steps p{max-width:36em;color:var(--ink-2)}.actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}#intro .eyebrow{margin-top:40px}.fineprint{max-width:40em;color:var(--muted);margin-top:14px;font-size:.875rem}.fineprint strong{color:var(--ink-2)}.app-note{border-left:3px solid var(--rule);max-width:40em;color:var(--muted);flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px;padding:2px 0 2px 14px;font-size:.875rem;display:flex}.app-note p{flex:22em}.app-note strong{color:var(--ink-2)}.app-note:focus{outline:none}.app-note:focus-visible{outline:3px solid var(--focus)}#offline-progress{font-variant-numeric:tabular-nums;margin-left:.35em}button{min-height:44px;font:500 1rem/1.2 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--control);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:10px 18px;transition:background-color .15s,border-color .15s;display:inline-flex}button:hover{border-color:var(--ink)}button:disabled,button[aria-disabled=true]{opacity:.55;cursor:default}button[aria-disabled=true]:hover{border-color:var(--control)}button.primary{color:var(--on-accent);background:var(--accent);border-color:var(--accent);padding-inline:32px;font-weight:600}button.primary:hover:not(:disabled){background:var(--accent-strong);border-color:var(--accent-strong)}button[aria-pressed]:before{content:"";border:1.5px solid;border-radius:50%;flex:none;width:10px;height:10px}button[aria-pressed=true]{background:var(--accent-wash);border-color:var(--accent)}button[aria-pressed=true]:before{background:var(--accent);border-color:var(--accent)}#stop:before{content:"";background:currentColor;border-radius:1px;flex:none;width:9px;height:9px}label{color:var(--ink-2);align-items:center;gap:10px;font-size:.9375rem;display:inline-flex}input{width:5.5em;min-height:44px;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--control);border-radius:8px;padding:8px 10px}#status{min-height:calc(1.55em + 16px);color:var(--ink-2);border-left:3px solid #0000;align-items:flex-start;gap:10px;margin:0 0 24px;padding:8px 14px;font-size:.9375rem;display:flex}#status:before{content:"";background:var(--muted);border-radius:50%;flex:none;width:8px;height:8px;margin-top:.5em}#status[data-tone=ok]:before{background:var(--ok)}#countdown{font-variant-numeric:tabular-nums;margin-left:.35em}#status[data-tone=warn]{color:var(--ink);background:var(--warn-wash);border-left-color:var(--warn)}#status[data-tone=warn]:before{background:var(--warn)}main:has(>#intro[hidden]) #status{margin-bottom:16px}.plate{margin:40px 0 0}.plate svg{background-color:var(--surface);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);border:1px solid var(--rule);background-position:-1px -1px;background-size:20px 20px;border-radius:6px;width:100%;max-width:440px;height:auto;margin:0 auto;display:block}.plate figcaption{max-width:440px;color:var(--muted);margin:12px auto 0;font-size:.875rem}.plate figcaption strong{color:var(--ink)}.plate-tag{font:600 .6875rem/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--control);border-radius:4px;margin-right:6px;padding:0 6px;display:inline-block}main:has(>#intro[hidden])>.plate{display:none}.f-oval{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.4px}.f-line{fill:none;stroke:var(--muted);stroke-width:1.2px;stroke-linecap:round;stroke-linejoin:round}.f-brow,.f-pupil{fill:var(--muted)}.f-brow{opacity:.4}.f-roi{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-width:1.6px;stroke-linejoin:round}.leader path{fill:none;stroke:var(--ink-2);stroke-width:1px}.leader circle{fill:var(--ink-2)}.label text{font:italic 14px var(--serif);fill:var(--ink)}@media (min-width:960px){main:has(>#intro:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(320px,400px);align-items:start;column-gap:72px;display:grid}main:has(>#intro:not([hidden]))>*{grid-column:1}main:has(>#intro:not([hidden]))>.plate{grid-area:1/2/span 2;margin-top:0}}#measure:focus{outline:none}.hero{grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr);align-items:start;gap:40px;display:grid}.stage-figure{margin:0}.stage{--ring:var(--rule);aspect-ratio:4/3;box-shadow:0 0 0 3px var(--ring);background:#000;border-radius:6px;transition:box-shadow .4s;position:relative;overflow:hidden}main:has(#status[data-tone=ok]) .stage{--ring:var(--ok)}main:has(#status[data-tone=warn]) .stage{--ring:var(--warn)}.stage video,.stage canvas{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0;transform:scaleX(-1)}.stage-figure figcaption{color:var(--muted);margin-top:12px;font-size:.875rem}.privacy{white-space:nowrap;color:#f4f1ea;background:#121110db;border-radius:999px;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:3px 10px 3px 8px;font-size:.75rem;font-weight:600;line-height:1.4;display:flex;position:absolute;bottom:10px;left:10px}.privacy span{text-overflow:ellipsis;min-width:0;overflow:hidden}.privacy svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linejoin:round;flex:none;width:13px;height:13px}.reading{border-top:3px solid var(--ink);padding-top:12px;container:reading/inline-size}.readout{align-items:baseline;gap:12px;margin:6px 0 12px;display:flex}#bpm{min-width:2ch;font:400 clamp(5.5rem, 11vw, 8.5rem) / .85 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.03em;position:relative}.readout[data-live=false] #bpm{color:#0000}.readout[data-live=false] #bpm:after{content:"";background:linear-gradient(to right, var(--muted) 0 42%, transparent 42% 58%, var(--muted) 58% 100%);height:max(2px,.022em);position:absolute;top:47%;left:.06em;right:.1em}.unit{font:600 .875rem/1 var(--sans);letter-spacing:.12em;color:var(--ink-2);white-space:nowrap}.beat{vertical-align:.02em;border:1.5px solid var(--control);border-radius:50%;width:9px;height:9px;margin-right:8px;display:inline-block}.readout[data-live=true] .beat{background:var(--accent);border-color:var(--accent)}.readout[data-live=true] .beat[data-beat=a]{animation:beat-a var(--beat-ms,.4s) cubic-bezier(.2, .7, .3, 1)}.readout[data-live=true] .beat[data-beat=b]{animation:beat-b var(--beat-ms,.4s) cubic-bezier(.2, .7, .3, 1)}@keyframes beat-a{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);transform:scale(1.6)}to{box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);transform:scale(1)}}@keyframes beat-b{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);transform:scale(1.6)}to{box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);transform:scale(1)}}.reading-meta{margin-bottom:14px;display:grid}.reading-meta>*{grid-area:1/1;align-self:center}.warmup-hint{color:var(--muted);font-size:.875rem}.reading-meta:has(#quality:not(:empty)) .warmup-hint{visibility:hidden}.quality-line{color:var(--muted);align-items:center;gap:10px;font-size:.9375rem;display:flex}.quality-line:has(#quality:empty){visibility:hidden}#quality{--b1:var(--rule);--b2:var(--rule);--b3:var(--rule);color:var(--ink);text-transform:capitalize;align-items:center;gap:7px;font-weight:600;display:inline-flex}#quality:before{content:"";background:linear-gradient(var(--b1), var(--b1)) 0 100% / 3px 5px no-repeat, linear-gradient(var(--b2), var(--b2)) 6px 100% / 3px 9px no-repeat, linear-gradient(var(--b3), var(--b3)) 12px 100% / 3px 13px no-repeat;width:15px;height:13px}#quality[data-quality=poor]{--b1:var(--warn)}#quality[data-quality=fair]{--b1:var(--ink-2);--b2:var(--ink-2)}#quality[data-quality=good]{--b1:var(--ok);--b2:var(--ok);--b3:var(--ok)}.demo-badge{color:var(--ink);background:var(--accent-wash);border:1px solid var(--accent);border-radius:999px;align-items:center;gap:8px;margin:0 0 14px;padding:4px 12px;font-size:.8125rem;font-weight:600;display:inline-flex}.demo-badge:before{content:"";background:var(--accent);border-radius:50%;width:8px;height:8px}.note{max-width:34em;color:var(--muted);margin-bottom:18px;font-size:.875rem}.note.small{margin:10px 0 16px;font-size:.8125rem}.trend{border-top:1px solid var(--rule);margin:0 0 18px;padding-top:10px}.trend figcaption,.section-head .kicker{font:600 .75rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.section-head .kicker{color:var(--accent)}#history{width:100%;height:92px;display:block}.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.controls button{justify-content:center}.record-row{grid-column:1/-1;grid-template-columns:subgrid;align-items:center;display:grid}.record-row label{justify-content:space-between}.record-row input{flex:none;width:5em}.record-row:has(#record[hidden]){display:none}@container reading (width<=400px){.controls button{padding-inline:12px;font-size:.9375rem}.record-row{grid-template-columns:minmax(0,1fr);row-gap:10px}.record-row input{flex:0 10em;min-width:5em}}.story{border-top:1px solid var(--rule);margin-top:64px;padding-top:28px}.section-head{max-width:44em;margin-bottom:32px}.section-head h2{letter-spacing:-.01em;margin:0 0 10px;font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:400;line-height:1.15}.section-head p:last-child{color:var(--ink-2)}.figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin:0;padding:0;list-style:none;display:grid}.figures li{position:relative}.figures li+li:before,.figures li+li:after{content:"";position:absolute;top:84px}.figures li+li:before{background:var(--accent);width:26px;height:2px;left:-42px}.figures li+li:after{border:6px solid #0000;border-left:8px solid var(--accent);border-right-width:0;margin-top:-5px;left:-22px}.fig{margin:0}.plot{background:var(--surface);border:1px solid var(--rule);border-radius:6px;height:170px;padding:10px 12px}.plot canvas{width:100%;height:100%;display:block}.fig figcaption{color:var(--ink-2);margin-top:14px;font-size:.9375rem;line-height:1.5}.fig-no{font:700 .75rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;display:block}.fig figcaption strong{font:700 1.125rem/1.3 var(--serif);color:var(--ink);margin-bottom:4px;display:block}.plot-color{justify-content:center;align-items:center;gap:14px;display:flex}.mini-face{flex:none;width:auto;height:100%}.arrow{background:var(--muted);flex:none;width:30px;height:2px;position:relative}.arrow:after{content:"";border:6px solid #0000;border-left:8px solid var(--muted);border-right-width:0;position:absolute;top:-5px;right:-2px}.swatch-block{flex-direction:column;align-items:center;gap:10px;display:flex}.swatch{background:var(--grid);border:1px solid var(--rule);border-radius:50%;width:76px;height:76px}.rgb{font:.75rem/1.35 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);text-align:center;white-space:pre}.limits{max-width:44em;color:var(--ink-2);margin-top:40px;font-size:.9375rem}.limits strong{color:var(--ink)}.lab{border-top:1px solid var(--rule);margin-top:64px;padding-top:24px}.lab .eyebrow{margin-bottom:10px}.lab-note,.lab-note-demo{max-width:44em;color:var(--muted);margin-bottom:14px;font-size:.875rem}.lab-note-demo{display:none}#measure:has(#record[hidden]) .lab-note{display:none}#measure:has(#record[hidden]) .lab-note-demo{display:block}details{margin-top:18px}summary{width:-moz-fit-content;width:fit-content;color:var(--ink-2);cursor:pointer;font-size:.9375rem}pre{font:.8rem/1.5 var(--mono);color:var(--ink-2);background:var(--surface);border:1px solid var(--rule);border-radius:6px;margin:10px 0 0;padding:12px 14px;overflow-x:auto}body>footer{border-top:1px solid var(--rule);color:var(--muted);margin-top:56px;margin-bottom:40px;padding-top:16px;font-size:.875rem}footer strong{color:var(--ink)}footer .refs{max-width:60em;font:italic .8125rem/1.5 var(--serif);margin-top:6px}@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:0}.stage-figure,.reading{display:contents}.stage{width:100%;max-width:60vh;max-width:60svh;max-height:40vh;max-height:40svh;margin:0 auto 22px}.stage-figure figcaption,.reading>.trend{order:1}.stage-figure figcaption{max-width:34em;margin:0 0 18px}#reading-title{border-top:3px solid var(--ink);padding-top:12px}.demo-badge{justify-self:start}.figures{grid-template-columns:minmax(0,1fr);gap:36px}.figures li+li:before,.figures li+li:after{display:none}.story,.lab{margin-top:48px}}@media (min-width:640px) and (max-width:900px){.fig{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:24px;display:grid}.fig figcaption{margin-top:0;font-size:.875rem}}@media (max-width:700px){.stage{max-width:53.3333vh;max-width:53.3333svh;max-height:30vh;max-height:30svh;margin-bottom:18px}#reading-title{margin-bottom:8px;padding-top:10px}.readout{margin:2px 0 8px}#bpm{font-size:4.75rem}.reading-meta{margin-bottom:10px}.demo-badge{margin-bottom:12px}.record-row{grid-template-columns:minmax(0,1fr);row-gap:10px}.record-row input{flex:0 10em;min-width:5em}.controls{gap:8px}.controls button{gap:7px;padding-inline:8px;font-size:.9375rem}body:has(#intro[hidden]) .masthead{margin-top:8px;margin-bottom:12px;padding:8px 0 10px}body:has(#intro[hidden]) .masthead .kicker{display:none}body:has(#intro[hidden]) h1{font-size:2rem}body:has(#intro[hidden]) .lead{margin-top:4px;font-size:.9375rem}#status{min-height:calc(3em + 16px);padding-inline:10px;font-size:.875rem;line-height:1.5}main:has(>#intro[hidden]) #status{margin-bottom:14px}.privacy{max-width:calc(100% - 16px);padding:2px 8px 2px 7px;font-size:.6875rem;bottom:8px;left:8px}}@media (max-width:380px){.controls button{font-size:.875rem}}@media (max-width:600px){body{font-size:16px}:root{--gutter:16px}.masthead{margin-top:16px;margin-bottom:22px;padding-bottom:20px}.eyebrow{margin-bottom:12px}.plot{height:150px}.steps li{grid-template-columns:1.75rem minmax(0,1fr);padding:14px 0 16px}.steps li:before{font-size:1.9rem}.actions button{flex:auto;justify-content:center}}@media (forced-colors:active){button[aria-pressed=true]:before,#stop:before{background:buttontext}#status:before,.readout[data-live=true] .beat{background:canvastext}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}
