@font-face{font-family:Barlow;src:url('assets/fonts/BarlowCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--black:#000;--white:#fff;--cyan:#35d5e7;--muted:#b3bfc2;--track:#2e383c;--surface:#171d20;--fast:180ms;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--black);color:var(--white)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.workout{position:relative;width:198px;height:242px;overflow:hidden;user-select:none;outline:none;touch-action:none}
.screen{position:absolute;inset:0;padding:15px 16px 16px}
[hidden]{display:none!important}
.header{height:21px;display:flex;align-items:center;justify-content:space-between;position:relative}
.title{margin:0;font-size:14px;line-height:20px;font-weight:500;color:#b9bec0}
.lock-button{position:absolute;right:-12px;top:-12px;width:44px;height:44px;padding:0;border:0;background:none;color:var(--muted);display:grid;place-items:center;border-radius:50%}
.lock-button svg,.small-lock{width:15px;height:17px;color:var(--muted)}
.lengths{margin-top:12px;text-align:center}
.label{color:var(--cyan);font-size:13px;line-height:17px;letter-spacing:1.1px;font-weight:500;text-align:center}
.count{height:112px;display:flex;align-items:baseline;justify-content:center;gap:6px;padding-right:1px}
.number{font-family:Barlow,sans-serif;font-weight:600;font-size:112px;line-height:112px;letter-spacing:-2px}
.goal{font-size:18px;line-height:23px;font-weight:400;color:var(--muted);letter-spacing:-.3px}
.progress{display:flex;margin-top:8px;height:12px}
.progress i{display:block;flex:1;border:0 solid var(--track);border-bottom-width:2px}
.progress i:nth-child(odd){border-left-width:2px;border-bottom-left-radius:5px;margin-left:4px}
.progress i:first-child{margin-left:0}
.progress i:nth-child(even){border-right-width:2px;border-bottom-right-radius:5px}
.progress i.complete{border-color:var(--cyan)}
.metrics{display:flex;justify-content:space-between;margin-top:15px}
.metric:last-child{text-align:right}
.reading{font-size:23px;line-height:27px;font-weight:500;letter-spacing:-.6px}
.caption{font-size:13px;line-height:17px;font-weight:400;color:var(--muted)}
[data-screen="swimming"] .metrics{position:absolute;bottom:17px;left:16px;right:16px;margin:0}
[data-screen="swimming"] .metric{display:flex;align-items:baseline;gap:4px}
[data-screen="swimming"] .reading{font-size:21px;line-height:28px}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--fast) var(--ease),background-color var(--fast),color var(--fast)}
button:active{transform:scale(.96)}
button:focus-visible,#crown:focus-visible{outline:1.5px solid var(--white);outline-offset:1px}
button:hover{color:var(--white)}
.lock-button:hover{background:var(--surface)}
.dial{position:relative;width:160px;height:160px;margin:6px auto 0}
.ring{display:block;width:160px;height:160px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.track{stroke:var(--track)}
.arc{stroke:var(--cyan);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:60;transition:stroke-dashoffset 120ms linear}
.dial-reading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:4px}
.dial-number{font-family:Barlow,sans-serif;font-size:76px;line-height:79px;letter-spacing:-1px}
.rest-footer{display:flex;align-items:center;justify-content:flex-end;margin-top:4px;height:36px}
.text-button{background:none;border:0;color:var(--muted);padding:0;width:44px;height:44px;font-size:13px;margin-right:-6px}
.crown-footer{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;color:var(--muted);font-size:13px;line-height:24px}
.crown-footer svg{width:17px;height:17px}
#crown{border-radius:50%;outline-offset:0}
#unlock-arc{stroke-dashoffset:100}
.pause-hero{margin-top:8px}
.pause-hero .count{height:86px;gap:6px}
.pause-hero .number{font-size:86px;line-height:86px}
.actions{display:grid;gap:6px;margin-top:4px}
.primary-button,.end-button{height:44px;border:0;border-radius:8px;font-size:14px;font-weight:500;color:var(--white)}
.primary-button{background:var(--surface);color:var(--cyan);border-radius:22px}
.primary-button:hover{background:#252a2d}
.end-button{background:none;color:var(--muted)}
.end-button:hover{background:var(--surface)}
.summary-hero{margin-top:18px;text-align:center}
.distance{font-size:100px;line-height:108px}
.summary-metrics{margin-top:14px}
.save-error{display:block;width:100%;height:44px;margin-top:14px;border:0;border-radius:8px;background:var(--surface);color:var(--white);font-size:14px;font-weight:500}
.save-error:hover{background:#252a2d}
.save-failed .summary-hero{margin-top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes enter-hero{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes enter-support{from{opacity:.2}to{opacity:1}}
@keyframes enter-tally{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.first-entry .hero{animation:enter-hero 360ms var(--ease) both}
.first-entry .progress{animation:enter-tally 260ms var(--ease) 60ms both}
.first-entry .header,.first-entry .support{animation:enter-support 240ms ease-out 120ms both}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}