/* A quiet instrument for time. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#timer-dialog{box-sizing:border-box;width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:27px 34px 25px;border:1px solid #fff;border-radius:32px;background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--aura-soft) 30%,#fff),transparent 62%),#f9fafc;box-shadow:0 30px 100px #27304b26;color:#343b50;overflow:auto}
#timer-dialog::backdrop{background:#202a4545;backdrop-filter:blur(12px)}
.time-top{display:flex;justify-content:space-between;align-items:center}.time-eyebrow{font-size:9px;letter-spacing:2.6px;color:#8b92a7}.time-top .icon-button{background:#fff8;border:1px solid #e7eaf2;border-radius:50%;width:32px;height:32px}
#timer-dialog h2{font-size:27px;font-weight:450;letter-spacing:-1px;margin:20px 0 8px;text-align:center}.time-intro{text-align:center;font-size:12px!important;color:#9298aa!important;margin:0!important}
.time-dial{width:215px;height:215px;position:relative;margin:22px auto 15px;display:grid;place-items:center}.time-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.time-dial circle{fill:none;stroke-width:1.5}.dial-track{stroke:#dce2ee;stroke-dasharray:1 5}#time-arc{stroke:var(--aura-deep);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .5s}.time-dial-halo{position:absolute;inset:15px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#fff,color-mix(in srgb,var(--aura-soft) 35%,#fff) 80%);box-shadow:inset 0 1px 2px white,0 12px 35px #7b8caf14}.time-dial-value{position:relative;text-align:center;display:flex;flex-direction:column}.time-dial-value output{font-size:70px;line-height:1.1;font-weight:300;letter-spacing:-5px;font-variant-numeric:tabular-nums}.time-dial-value span{font-size:10px;letter-spacing:.8px;color:#8b93a8;margin-top:8px}
#time-range{width:100%;accent-color:var(--aura-deep);height:4px;cursor:pointer}.time-range-labels{display:flex;justify-content:space-between;font-size:9px;color:#9299ad;margin:9px 0 18px}.time-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.time-presets button{display:flex;flex-direction:column;gap:5px;align-items:center;padding:12px 0;border-radius:14px;background:#fff8;border:1px solid #e5e8f0;color:#67728b;font-size:19px;transition:.2s}.time-presets small{font-size:9px;color:#939bad}.time-presets button[aria-pressed=true]{border-color:var(--aura);background:color-mix(in srgb,var(--aura-soft) 30%,white);color:var(--aura-deep);box-shadow:0 3px 10px #8396c512}.time-rest-option{display:flex!important;align-items:center;gap:12px;margin:22px 0!important;font-size:12px!important;font-weight:400!important}.time-rest-option input{width:17px;height:17px;accent-color:var(--aura-deep);margin:0}.time-rest-option small{display:block;font-size:10px;font-weight:400;color:#9299ab;margin-top:5px}#time-start{width:100%;display:flex;align-items:center;justify-content:space-between;border-radius:16px;padding:16px 21px;background:#394563;font-size:13px;margin:0;box-shadow:0 5px 15px #35415f1a}#time-start span{font-size:20px}.time-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:17px;font-size:9px;color:#969eb0}#time-cancel{font-size:10px;background:none;border:0;color:#69748e;padding:4px}
#timer-button>span[data-icon]{display:none}.mini-clock{width:19px;height:19px;border-radius:50%;border:1px solid #b1bad0;position:relative;flex-shrink:0}.mini-clock:after{content:'';position:absolute;left:8px;top:4px;width:4px;height:6px;border-left:1px solid currentColor;border-bottom:1px solid currentColor}.timer-copy{display:flex;flex-direction:column;text-align:left;gap:2px}#timer-status{font-size:9px;color:#8b96ab}.timer-active{background:color-mix(in srgb,var(--aura-soft) 25%,white)!important;border:1px solid color-mix(in srgb,var(--aura) 30%,white)!important;border-radius:15px!important;padding:9px 13px!important;min-width:104px}.timer-active .mini-clock{border:0;background:conic-gradient(var(--aura-deep) var(--timer-progress),#dfe4ee 0);mask:radial-gradient(circle,transparent 51%,black 56%)}.timer-active .mini-clock:after{display:none}#timer-label{font-variant-numeric:tabular-nums}#rest-open{padding:8px}#rest-open svg{width:21px;height:21px}
/* The rest screen is a full-viewport native dialog, including keyboard escape. */
#rest-screen{box-sizing:border-box;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#111625;color:#f6f5ff;isolation:isolate;outline:none}#rest-screen::backdrop{background:#111625}.rest-wash{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--aura-deep) 32%,#141a2a),transparent 53%),radial-gradient(ellipse at 12% 100%,color-mix(in srgb,var(--aura) 18%,#111625),transparent 55%);animation:rest-wash 24s ease-in-out infinite alternate}.rest-header{position:absolute;top:0;left:0;right:0;padding:32px 44px;display:flex;align-items:center;justify-content:space-between;z-index:3}.rest-header img{width:96px;height:auto;filter:brightness(0) invert(1);opacity:.7}.rest-header>div{display:flex;gap:10px}#rest-screen button{font:inherit;color:#e3e6f2;background:#ffffff06;border:1px solid #ffffff18;border-radius:30px;padding:11px 18px;font-size:11px;cursor:pointer;transition:background .3s}#rest-screen button:hover{background:#ffffff17}#rest-screen button:focus-visible{outline:2px solid var(--aura-soft);outline-offset:5px}#rest-screen button:disabled{opacity:.3;cursor:default}.rest-header button span{margin-left:10px}.rest-stage{position:absolute;width:min(68vh,620px,90vw);aspect-ratio:1;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;place-items:center}.rest-sculpture{position:absolute;inset:12%;animation:rest-float 18s ease-in-out infinite}.rest-orb{position:absolute;inset:0;border-radius:var(--domo-shape,50%);transform:rotate(var(--domo-turn,-14deg));background:radial-gradient(ellipse at 30% 13%,#f4eeffb3,transparent 52%),radial-gradient(ellipse at 85% 80%,#101a3ecc,transparent 70%),linear-gradient(145deg,var(--aura-soft),var(--aura-deep));box-shadow:inset 1px 2px 5px #ffffff55,inset -20px -30px 60px #161b4866,0 20px 110px color-mix(in srgb,var(--aura-deep) 20%,transparent);opacity:.6;filter:blur(1px);animation:rest-breathe 12s ease-in-out infinite}.rest-orbit{position:absolute;inset:-6% -17%;border:1px solid #ffffff17;border-radius:50%;transform:rotate(-27deg) scaleY(.7)}.rest-orbit.second{inset:-14% -8%;transform:rotate(37deg) scaleX(.74);border-color:#ffffff0b}.rest-clock{position:relative;z-index:1;text-align:center;text-shadow:0 3px 30px #13193155}.rest-clock p{font-size:12px;font-weight:400;letter-spacing:2px;margin:0 0 17px;color:#eeeff6ba}.rest-clock output{font-size:clamp(70px,9vw,120px);font-weight:250;line-height:1.1;letter-spacing:-5px;font-variant-numeric:tabular-nums}.rest-clock>span{display:block;font-size:11px;color:#e1e4f3a6;letter-spacing:.4px;margin-top:22px}.rest-progress{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}.rest-progress circle{fill:none;stroke:#ffffff0a;stroke-width:.8}#rest-arc{stroke:#e6e6ff55;stroke-width:1.3;stroke-linecap:round;transition:stroke-dasharray .8s linear}.rest-footer{position:absolute;bottom:35px;left:44px;right:44px;display:flex;align-items:center;justify-content:space-between;gap:20px}.rest-session{display:flex;align-items:center;gap:9px;font-size:11px;color:#bec5dd}.rest-dot{width:5px;height:5px;border-radius:50%;background:var(--aura-soft);box-shadow:0 0 12px var(--aura)}.rest-actions{display:flex;align-items:center;gap:12px}#rest-pause{width:57px;height:57px;font-size:21px!important;background:#ffffff12!important;border-color:#ffffff2b!important;padding:0!important}.rest-footnote{font-size:9px;letter-spacing:1px;color:#a1abc175}.rest-chrome{transition:opacity 1.5s}.rest-idle .rest-chrome:not(:focus-within):not(:hover){opacity:.15}.rest-paused .rest-orb,.rest-paused .rest-sculpture,.rest-paused .rest-wash{animation-play-state:paused}.rest-complete .rest-progress{opacity:0}.rest-complete .rest-orb{opacity:.35}
@keyframes rest-float{50%{transform:translateY(-12px) rotate(5deg)}}@keyframes rest-breathe{50%{filter:blur(2px);transform:rotate(var(--domo-turn,-14deg)) scale(1.05);opacity:.72}}@keyframes rest-wash{to{transform:translate(3%,-3%) scale(1.08)}}
@media(max-width:900px){.player-tools{gap:12px}.rest-footer{flex-direction:column;bottom:25px;gap:20px}.rest-footnote{display:none}.rest-header{padding:22px}.rest-stage{top:44%;width:min(65vh,92vw)}.rest-header img{width:76px}.rest-header button{padding:9px 12px!important;font-size:10px!important}.rest-clock output{font-size:clamp(64px,15vw,110px)}.rest-clock p{font-size:10px;letter-spacing:1px}.rest-clock>span{font-size:10px}.rest-session{order:2}}
@media(max-height:740px){#timer-dialog{padding:19px 27px}.time-dial{width:170px;height:170px;margin:15px auto 8px}.time-dial-value output{font-size:55px}#timer-dialog h2{margin-top:10px;font-size:25px}.time-rest-option{margin:15px 0!important}.time-presets button{padding:9px 0}.time-bottom{margin-top:10px}}
@media(prefers-reduced-motion:reduce){#rest-screen *,#timer-dialog *{animation:none!important;transition:none!important}}

body:has(dialog[open]){overflow:hidden}
@media(max-width:560px){.player-tools{width:100%;min-width:0;justify-content:space-between;gap:8px!important}.player-tools #master{width:60px;min-width:40px;flex:0 1 60px}.player-tools .divider{display:none}.player-tools #save{padding:9px!important;min-width:36px}.player-tools #save>span:last-child{display:none}.player-tools .timer-active{min-width:94px;padding:8px 10px!important}#rest-open{padding:7px}.player-tools>span[data-icon]{flex-shrink:0}}
/* Refined time instrument — locally hosted typography and bespoke controls. */
@font-face{font-family:'Manrope Clock';src:url('/assets/fonts/manrope-light.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
.rest-clock output,.time-dial-value output{font-family:'Manrope Clock',sans-serif;font-weight:200;font-synthesis:none;font-feature-settings:'tnum';letter-spacing:-.045em}
.rest-clock output{font-size:clamp(76px,10vw,132px)}
#rest-screen .rest-header{opacity:1!important;padding-top:max(26px,env(safe-area-inset-top));align-items:center}
#rest-screen #rest-close{display:inline-flex;align-items:center;gap:7px;font-size:12px;min-height:44px;padding:11px 19px;background:#ffffff18;border-color:#ffffff45;color:#fff;box-shadow:0 4px 20px #00000012}
#rest-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;flex-shrink:0}
.rest-footer{justify-content:center}.rest-idle .rest-footer:not(:focus-within):not(:hover){opacity:.5}
#rest-arc{stroke:#e9e8ff99;stroke-width:1.7}.rest-progress circle:first-child{stroke:#ffffff1c}
#rest-seconds{stroke:#fff;stroke-width:2.8;stroke-dasharray:3 97;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--aura-soft));transition:stroke-dashoffset .25s linear}
.rest-progress #rest-marker .marker-core{fill:#fff;stroke:none;filter:drop-shadow(0 0 5px #fff)}
.rest-progress #rest-marker .marker-halo{fill:var(--aura-soft);stroke:none;opacity:.25;animation:marker-glow 3s ease-in-out infinite}
@keyframes marker-glow{50%{opacity:.5}}.rest-paused .marker-halo{animation-play-state:paused!important}
.rest-orbit{border-color:#ffffff28;animation:orbit-drift 16s ease-in-out infinite}.rest-orbit.second{border-color:#ffffff18;animation-duration:21s;animation-direction:reverse}
@keyframes orbit-drift{50%{translate:0 -12px;rotate:9deg}}.rest-paused .rest-orbit{animation-play-state:paused}
#timer-dialog{width:min(490px,calc(100vw - 28px));padding:28px 34px 25px;border:1px solid #ffffffdd;border-radius:36px;background:radial-gradient(ellipse at 8% 0%,#fff 8%,transparent 65%),radial-gradient(ellipse at 95% 70%,color-mix(in srgb,var(--aura-soft) 23%,#f8f9fc),transparent 72%),#f6f8fc;box-shadow:inset 0 1px 0 #fff,0 35px 110px #111a3f38}
#timer-dialog .time-top .icon-button{display:grid;place-items:center;padding:0;flex-shrink:0;width:36px;height:36px;line-height:0;color:#68738b;background:#ffffffb3;box-shadow:0 2px 5px #55638405}
.time-top .icon-button span{display:grid;place-items:center;width:18px;height:18px}.time-top .icon-button svg{display:block;width:18px;height:18px;margin:0;stroke-width:1.4}
#timer-dialog h2{font-size:28px;letter-spacing:-.85px;margin:20px 0 10px}.time-eyebrow{font-size:9px;letter-spacing:2.2px}
.time-instrument{display:flex;align-items:center;justify-content:center;gap:13px;margin:22px 0 20px}
.time-dial{width:238px;height:238px;margin:0;flex-shrink:1;aspect-ratio:1}
.time-dial:before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -90deg,#9ba8c950 0deg 1deg,transparent 1deg 6deg);mask:radial-gradient(circle,transparent 65%,#000 65.5% 68%,transparent 68.5%)}
.time-dial-halo{inset:24px;background:radial-gradient(ellipse at 35% 20%,#fff 15%,color-mix(in srgb,var(--aura-soft) 36%,#f9fbff));border:1px solid #fff;box-shadow:inset 0 -5px 18px #fff9,inset 0 1px 3px white,0 10px 25px #7788b11a,0 0 0 7px #ffffff60,0 0 0 8px #cdd6e424}
.time-dial .dial-track{stroke:#a5b0ca40;stroke-dasharray:none;stroke-width:.6}#time-arc{stroke-width:2;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--aura) 45%,transparent))}.time-dial-value output{font-size:78px;line-height:1.15}.time-dial-value span{font-size:8px;letter-spacing:2.6px;margin-top:6px;color:#929bb0}
.time-step{border:1px solid #dbe1ee;background:#ffffffa8;color:#727e99;border-radius:50%;width:35px;height:35px;flex-shrink:0;font-size:21px;font-weight:300;padding:0;display:grid;place-items:center;box-shadow:0 3px 8px #7989ac08;transition:.2s}.time-step:hover:not(:disabled){background:white;border-color:var(--aura);transform:translateY(-1px)}.time-step:disabled{opacity:.3}
#time-range{appearance:none;-webkit-appearance:none;display:block;width:100%;height:5px;margin:0;border:0;border-radius:8px;background:linear-gradient(to right,var(--aura) var(--range-fill,12%),#dfe5ef var(--range-fill,12%));outline-offset:8px}
#time-range::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border:5px solid #fff;border-radius:50%;background:var(--aura-deep);box-shadow:0 0 0 1px #c6cfe3,0 3px 7px #5c6c8b26;cursor:grab}
#time-range::-moz-range-thumb{width:10px;height:10px;border:5px solid #fff;border-radius:50%;background:var(--aura-deep);box-shadow:0 0 0 1px #c6cfe3;cursor:grab}
.time-range-labels{margin-top:12px;margin-bottom:22px;color:#8b96ad}
.time-presets{padding:5px;gap:3px;background:#e9edf575;border:1px solid #e0e5ef;border-radius:19px}.time-presets button{padding:12px 0;border-color:transparent;background:transparent;font-family:'Manrope Clock',sans-serif;font-weight:200;font-size:22px;border-radius:14px;color:#7f8ba2}.time-presets small{font-family:Domo,sans-serif;font-size:9px;color:#929bb0}.time-presets button[aria-pressed=true]{background:#fff;border-color:#fff;box-shadow:0 3px 9px #5b70971a;color:var(--aura-deep)}
.time-rest-option{position:relative;flex-direction:row-reverse;justify-content:space-between;gap:15px;padding:17px 0 2px;margin:9px 0 23px!important}.time-rest-option input{position:absolute;width:42px;height:26px;right:0;opacity:0;cursor:pointer;z-index:1}.time-rest-option>span:last-child{flex:1;font-size:12px;color:#53617b}.time-rest-option small{font-size:10px;line-height:1.5;color:#919bb0}.time-switch{display:block;position:relative;width:42px;height:25px;border:1px solid #d4dceb;border-radius:30px;background:#dfe5f0;transition:.25s;flex-shrink:0}.time-switch:after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #3b48642b;transition:.25s}.time-rest-option input:checked+.time-switch{background:var(--aura-deep);border-color:var(--aura-deep)}.time-rest-option input:checked+.time-switch:after{transform:translateX(17px)}.time-rest-option input:focus-visible+.time-switch{outline:2px solid var(--aura);outline-offset:4px}
#time-start{border:1px solid #fff2;background:linear-gradient(120deg,#35405c,color-mix(in srgb,var(--aura-deep) 38%,#35405c));box-shadow:inset 0 1px 0 #ffffff1f,0 7px 16px #3b4c761a;padding:17px 20px;min-height:58px;border-radius:18px}#time-start:hover{filter:brightness(1.08)}
@media(max-width:560px){#timer-dialog{padding:23px 24px;border-radius:29px}#timer-dialog h2{font-size:25px}.time-instrument{gap:8px}.time-dial{width:min(218px,55vw);height:auto}.time-dial-value output{font-size:68px}.time-dial-halo{inset:20px}.time-step{width:30px;height:30px}.rest-clock output{font-size:clamp(65px,17vw,105px)}#rest-screen .rest-header{padding:19px 18px}.rest-header img{width:68px}#rest-screen #rest-close{font-size:11px!important;padding:9px 12px!important}.rest-header>div{gap:6px}#rest-fullscreen{font-size:0!important;width:36px;padding:8px!important}#rest-fullscreen span{font-size:16px;margin:0}}
@media(max-height:760px){#timer-dialog{padding-top:19px;padding-bottom:19px}.time-instrument{margin:14px 0}.time-dial{width:188px;height:188px}.time-dial-value output{font-size:61px}#timer-dialog h2{margin-top:10px}.time-presets button{padding:9px 0}.time-rest-option{padding-top:10px;margin-bottom:15px!important}.time-range-labels{margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){.rest-progress *{animation:none!important;transition:none!important}}
/* A modal focus return must never scroll the exit or clock off screen. */
#rest-screen{overflow:clip}
#rest-screen .rest-header,#rest-screen .rest-footer,#rest-screen .rest-stage{position:fixed}
#rest-screen .rest-wash{position:fixed;inset:0;scale:1.4;pointer-events:none}