*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{--charcoal: #1c1f24;--charcoal-lift: #262b33;--charcoal-line: #363d47;--ice: #8fd3e8;--orange: #f2a25c;--red: #e05a4f;--white: #f7f9fb;--muted: #9aa4b2;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-condensed: "Roboto Condensed", "Helvetica Neue Condensed", "Arial Narrow", "Liberation Sans Narrow", "Segoe UI", system-ui, sans-serif;--radius: 14px;font-family:var(--font-sans);color-scheme:dark}body{min-height:100dvh;background-color:var(--charcoal);color:var(--white)}.page{max-width:80ch;margin-inline:auto;padding:2rem}.screen{display:grid;grid-template-rows:auto 1fr auto;gap:clamp(.75rem,2vh,1.5rem);min-height:100dvh;padding:clamp(.75rem,2.5vh,1.75rem) clamp(.75rem,3vw,2rem)}.screen__top,.screen__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(.75rem,2vw,1.5rem)}.screen__title{font-size:clamp(1rem,1.6vw,1.25rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.stage{position:relative;display:grid;place-items:center;min-height:0}.modes{display:flex;flex-wrap:wrap;gap:.5rem}.mode{display:grid;gap:.1rem;padding:.6rem 1.1rem;min-height:3rem;text-align:left;color:var(--white);background:var(--charcoal-lift);border:1px solid var(--charcoal-line);border-radius:var(--radius);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.mode__label{font-size:clamp(.95rem,1.3vw,1.1rem);font-weight:600}.mode__hint{font-size:clamp(.7rem,.95vw,.8rem);color:var(--muted)}.mode:hover{border-color:var(--ice)}.mode[aria-pressed=true]{background:var(--ice);border-color:var(--ice);color:var(--charcoal)}.mode[aria-pressed=true] .mode__hint{color:#1c1f24bf}.meter{--meter-size: min(64vh, 92vw);--meter-color: var(--ice);position:relative;width:var(--meter-size);height:var(--meter-size)}.meter__gauge{width:100%;height:100%;overflow:visible;transition:filter .4s ease}.meter__track{fill:none;stroke:var(--charcoal-lift);stroke-width:14;stroke-linecap:round}.meter__target-zone{fill:none;stroke:#8fd3e829;stroke-width:14;stroke-linecap:butt}.meter__value-arc{fill:none;stroke:var(--meter-color);stroke-width:14;stroke-linecap:round;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--meter-color) 55%,transparent));transition:stroke .22s linear,stroke-dasharray 90ms linear}.meter__target-tick{stroke:var(--white);stroke-width:3.5;stroke-linecap:round}.meter__target-label{fill:var(--muted);font-family:var(--font-sans);font-size:8px;font-weight:600;letter-spacing:.18em}.face path,.face ellipse{transition:stroke .22s linear,fill .22s linear}.face__eye,.face__brow,.face__mouth{fill:none;stroke:var(--meter-color);stroke-width:7;stroke-linecap:round}.face__pupil{fill:var(--meter-color)}.face__mouth--open{fill:var(--meter-color);stroke:none}.meter__readout{position:absolute;left:50%;bottom:2%;display:grid;justify-items:center;transform:translate(-50%);text-align:center}.meter__value{font-family:var(--font-condensed);font-stretch:condensed;font-size:calc(var(--meter-size) * .17);font-weight:700;line-height:.9;font-variant-numeric:tabular-nums;color:var(--meter-color)}.meter__caption{font-size:clamp(.85rem,1.5vw,1.15rem);font-weight:500;color:var(--muted)}.meter[data-glowing] .meter__gauge{filter:drop-shadow(0 0 26px rgba(143,211,232,.35));animation:meter-breathe 5s ease-in-out infinite}.meter[data-alerting]{animation:meter-shake 1.6s ease-in-out infinite}.meter[data-alerting]:after{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(224,90,79,.22),transparent 68%);animation:meter-flash 1.6s ease-in-out infinite;pointer-events:none}@keyframes meter-breathe{0%,to{opacity:.92}50%{opacity:1}}@keyframes meter-shake{0%,62%,to{transform:translateZ(0)}68%{transform:translate3d(-5px,0,0)}78%{transform:translate3d(5px,0,0)}88%{transform:translate3d(-3px,0,0)}}@keyframes meter-flash{0%,to{opacity:.25}60%{opacity:.9}}.start{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:1rem;padding:1.5rem;text-align:center;background:color-mix(in srgb,var(--charcoal) 78%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.start__note{max-width:34ch;color:var(--muted);font-size:clamp(.9rem,1.3vw,1.05rem)}.points{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem)}.points__score{display:grid;justify-items:center;min-width:5.5rem;padding:.35rem 1rem;background:var(--charcoal-lift);border-radius:var(--radius)}.points__value{font-family:var(--font-condensed);font-stretch:condensed;font-size:clamp(2.25rem,5vw,3.5rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--orange)}.points__label{font-size:clamp(.7rem,1vw,.8rem);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.points__actions{display:flex;flex-wrap:wrap;gap:.5rem}.streak{flex:1 1 16rem;display:grid;gap:.4rem;min-width:12rem}.streak__bar{height:8px;background:var(--charcoal-lift);border-radius:999px;overflow:hidden}.streak__fill{display:block;height:100%;background:var(--ice);border-radius:999px;transition:width .9s linear}.streak__text{font-size:clamp(.8rem,1.1vw,.95rem);color:var(--muted)}.button{min-height:3rem;padding:.65rem 1.4rem;font-size:clamp(.95rem,1.2vw,1.05rem);font-weight:600;color:var(--white);background:var(--charcoal-lift);border:1px solid var(--charcoal-line);border-radius:var(--radius);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.button:hover{border-color:var(--ice)}.button--start{min-height:3.75rem;padding-inline:clamp(1.75rem,5vw,3rem);font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--charcoal);background:var(--ice);border-color:var(--ice)}.button--warn{color:var(--charcoal);background:var(--orange);border-color:var(--orange)}.button:focus-visible,.mode:focus-visible{outline:3px solid var(--ice);outline-offset:3px}@media(prefers-reduced-motion:reduce){.meter[data-alerting],.meter[data-alerting]:after,.meter[data-glowing] .meter__gauge{animation:none}.meter[data-alerting]:after{opacity:.6}.meter__value-arc,.streak__fill{transition:none}}