:root{--ink:#f8fbff;--muted:#aeb8cc;--canvas:#050816;--canvas-soft:#0a1025;--panel:#0d142b;--line:#303a55;--cyan:#00d9ff;--cyan-soft:#9ff3ff;--yellow:#ffd900;--yellow-soft:#fff09a;--danger:#ff6b7a}*{box-sizing:border-box}html{background:var(--canvas);color:var(--ink);min-width:280px}body{background:radial-gradient(circle at 50% 0%, #16274f6b, transparent 40%), var(--canvas);color:var(--ink);overscroll-behavior:none;min-height:100dvh;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.timer-app{isolation:isolate;height:100dvh;min-height:360px;padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));width:100%;position:relative}.timer-grid{width:100%;height:100%;display:grid}.has-two-timers .timer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.timer-panel{--accent:var(--cyan);--accent-soft:var(--cyan-soft);place-items:center;min-width:0;min-height:0;display:grid;position:relative}.timer-panel+.timer-panel:before{background:var(--line);content:"";opacity:.72;width:1px;height:min(64vh,640px);position:absolute;top:50%;left:0;transform:translate(-.5px,-50%)}.timer-2{--accent:var(--yellow);--accent-soft:var(--yellow-soft)}.timer-stage{flex-direction:column;align-items:center;gap:clamp(10px,2vh,22px);max-width:100%;min-height:0;max-height:100%;display:flex;position:relative}.has-one-timer .timer-stage{width:min(82vw,100dvh - 112px,820px)}.has-two-timers .timer-stage{width:min(44vw,100dvh - 112px,650px)}.timer-dial{aspect-ratio:1;filter:drop-shadow(0 22px 46px #0000004d);flex:auto;width:100%;min-height:0;max-height:100%;position:relative}.timer-svg{width:100%;height:100%;display:block;overflow:visible}.timer-track,.timer-progress{fill:none;stroke-width:5.2px}.timer-track{stroke:#28324b}.timer-progress{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));stroke:var(--accent);stroke-linecap:round}.timer-dot{fill:#fff;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px var(--accent));stroke:var(--canvas);stroke-width:.9px}.timer-readout{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.timer-readout>span:first-child{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.075em;text-shadow:0 3px 20px #00000073;padding-right:.075em;font-size:clamp(3.5rem,14vw,10.5rem);font-weight:750;line-height:.9}.has-two-timers .timer-readout>span:first-child{font-size:clamp(2.75rem,7.2vw,7.5rem)}.complete-mark{background:var(--accent);border:3px solid var(--canvas);color:var(--canvas);border-radius:999px;justify-content:center;align-items:center;width:clamp(42px,6vw,62px);height:clamp(42px,6vw,62px);animation:1.8s ease-in-out infinite completion-pulse;display:flex;position:absolute;bottom:17%}.complete-mark svg{width:55%;height:55%}.is-completed .timer-dial{animation:1.8s ease-in-out infinite dial-complete}.timer-controls{flex:none;justify-content:center;align-items:center;gap:clamp(8px,1.5vw,14px);min-height:56px;display:flex}.icon-button{color:var(--ink);cursor:pointer;background:#121b35;border:2px solid #45506d;border-radius:999px;flex:none;justify-content:center;align-items:center;width:52px;height:52px;padding:0;transition:background-color .16s,border-color .16s,color .16s,transform .16s;display:inline-flex;position:relative}.icon-button svg{stroke-width:2.35px;width:23px;height:23px}.icon-button:hover{background:#1b2748;border-color:#7b89aa;transform:translateY(-2px)}.icon-button:active{transform:translateY(0)scale(.96)}.icon-button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #fff;box-shadow:0 0 0 6px #215cff}.sound-option:has(input:focus-visible){outline-offset:3px;outline:3px solid #fff;box-shadow:0 0 0 6px #215cff}.primary-control{background:var(--accent);border-color:var(--accent);color:#04101d;width:60px;height:60px}.primary-control:hover{background:var(--accent-soft);border-color:var(--accent-soft)}.primary-control svg{width:28px;height:28px}.add-timer-button{background:var(--yellow);border-color:var(--yellow);bottom:max(18px, env(safe-area-inset-bottom));color:#121006;height:58px;right:max(18px, env(safe-area-inset-right));z-index:4;width:58px;position:fixed}.add-timer-button:hover{background:var(--yellow-soft);border-color:var(--yellow-soft)}.settings-dialog{color:var(--ink);background:0 0;border:0;width:calc(100vw - 24px);max-width:520px;max-height:calc(100dvh - 24px);margin:auto;padding:0;animation:.22s cubic-bezier(.2,.8,.2,1) both dialog-enter;position:fixed;inset:0;overflow:visible}.settings-dialog::backdrop{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#01030cc7;animation:.18s ease-out both backdrop-enter}.settings-form{scrollbar-gutter:stable;background:linear-gradient(145deg,#ffffff0d,#0000 30%),#0d1429;border:1px solid #4a5776;border-radius:28px;max-height:calc(100dvh - 24px);padding:clamp(20px,4vw,32px);overflow:auto;box-shadow:0 30px 90px #000000a6}.dialog-header,.dialog-actions{align-items:center;display:flex}.dialog-header{justify-content:flex-end;margin-bottom:8px}fieldset{border:0;margin:0;padding:0}legend{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;font-size:.78rem;font-weight:800}.time-fieldset{margin-bottom:28px}.time-inputs{justify-content:center;align-items:flex-end;display:flex}.time-inputs label{flex-direction:column;align-items:center;gap:7px;display:flex}.time-inputs label span{color:var(--muted);letter-spacing:.12em;font-size:.72rem;font-weight:800}.time-inputs input{appearance:textfield;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.07em;text-align:center;background:#060b1d;border:2px solid #596784;border-radius:18px;width:clamp(104px,28vw,150px);height:clamp(88px,20vw,120px);padding:0 .1em 0 0;font-size:clamp(2.6rem,12vw,4.7rem);font-weight:750;line-height:1}.time-separator{color:var(--muted);margin:0 10px;font-size:3.2rem;font-weight:700;line-height:clamp(88px,20vw,120px)}.field-error{color:#ff9aa5;text-align:center;margin:10px 0 0;font-size:.88rem;font-weight:650}.sound-fieldset{margin-bottom:26px}.sound-options{gap:9px;display:grid}.sound-option{cursor:pointer;background:#090f24;border:2px solid #3c4866;border-radius:16px;grid-template-columns:22px 1fr 24px;align-items:center;gap:12px;min-height:68px;padding:11px 16px;transition:background-color .16s,border-color .16s;display:grid}.sound-option:hover{background:#111a34;border-color:#7180a2}.sound-option.is-selected{border-color:var(--cyan);background:#082333}.sound-option input{accent-color:var(--cyan);width:20px;height:20px;margin:0}.sound-option span{gap:3px;display:grid}.sound-option strong{font-size:.98rem}.sound-option small{color:#c1c9d9;font-size:.78rem}.sound-option>svg{color:var(--cyan);width:22px;height:22px}.dialog-actions{border-top:1px solid #303b57;gap:10px;padding-top:20px}.dialog-spacer{flex:1}.danger-control{color:#ff9dab;border-color:#8d4050}.danger-control:hover{border-color:var(--danger);background:#451d2a}.save-control{background:var(--cyan);border-color:var(--cyan);color:#04101d}.save-control:hover{background:var(--cyan-soft);border-color:var(--cyan-soft)}@keyframes dialog-enter{0%{opacity:0;transform:translateY(16px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes completion-pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 38%, transparent);transform:scale(1)}50%{transform:scale(1.04);box-shadow:0 0 0 15px #0000}}@keyframes dial-complete{0%,to{filter:drop-shadow(0 22px 46px #0000004d)}50%{filter:drop-shadow(0 22px 46px #0000004d) drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 30%, transparent))}}@media (width<=760px){.has-two-timers .timer-grid{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:1fr}.has-two-timers .timer-stage{flex-direction:row;gap:clamp(8px,3vw,18px);width:min(96vw,700px);height:100%}.has-two-timers .timer-dial{flex:auto;width:auto;max-width:calc(100% - 64px);max-height:calc(50dvh - 28px)}.has-two-timers .timer-controls{flex-flow:column wrap;gap:7px;min-width:52px;max-height:calc(50dvh - 24px)}.has-two-timers .icon-button{width:46px;height:46px}.has-two-timers .primary-control{width:52px;height:52px}.has-two-timers .timer-panel+.timer-panel:before{width:min(82vw,620px);height:1px;top:0;left:50%;transform:translate(-50%,-.5px)}.has-two-timers .timer-readout>span:first-child{font-size:clamp(2.4rem,13vw,5.5rem)}}@media (height<=540px) and (orientation:landscape){.timer-app{padding:8px 12px}.has-one-timer .timer-stage,.has-two-timers .timer-stage{flex-direction:row;width:min(94vw,980px);height:100%}.timer-dial{width:auto;max-height:calc(100dvh - 16px)}.timer-controls{flex-flow:column wrap;max-height:calc(100dvh - 24px)}.settings-form{border-radius:20px;padding:14px 18px}.dialog-header{float:right;margin:0 0 0 10px}.time-fieldset,.sound-fieldset{margin-bottom:14px}.time-inputs input{width:96px;height:72px;font-size:2.6rem}.time-separator{font-size:2.5rem;line-height:72px}.sound-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sound-option{grid-template-columns:20px 1fr;min-height:58px;padding:8px 10px}.sound-option small,.sound-option>svg{display:none}.dialog-actions{padding-top:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important}.complete-mark,.is-completed .timer-dial,.settings-dialog,.settings-dialog::backdrop{animation:none}.icon-button:hover{transform:none}}@media (forced-colors:active){.timer-track,.timer-progress,.timer-dot{forced-color-adjust:auto}.icon-button,.sound-option,.time-inputs input,.settings-form{border:2px solid buttontext}}