:root { --background:#0b1f3a; --ink:#f8f7f2; --muted:rgba(248,247,242,.63); --button:#3d6fa8; --accent:#b9d6ff; --panel:rgba(20,42,71,.64); --mono:"DM Mono",monospace; --sans:"Manrope",Arial,sans-serif; }
body[data-mode="work"] { --background:#368566; --accent:#d2ff9e; }
body[data-mode="rest"] { --background:#d6ad3c; --accent:#242114; --button:#242114; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:var(--background); color:var(--ink); font-family:var(--sans); transition:background .4s ease; }
button { font:inherit; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.timer-shell { min-height:100svh; min-height:100dvh; display:grid; place-items:center; padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
.support-link { position:fixed; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; z-index:1; display:flex; align-items:center; gap:6px; color:var(--muted); font:500 .68rem/1 var(--mono); letter-spacing:.06em; text-decoration:none; transform:translateX(-50%); transition:color .2s ease; }
.coffee-icon { width:20px; height:20px; flex:0 0 auto; }
.support-link:hover,.support-link:focus-visible { color:var(--ink); }
.timer { width:min(100%,540px); text-align:center; }
.round,.eyebrow,.adjuster>p { margin:0; color:var(--muted); font:500 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.round { margin-bottom:19px; color:var(--ink); font-size:1.64rem; }
h1 { margin:0; font:500 clamp(4rem,29vw,11rem)/.82 var(--mono); letter-spacing:-.1em; font-variant-numeric:tabular-nums; }
.colon { color:var(--accent); }
body[data-ending="true"] h1 { color:#ff4f64; animation:countdown-alert .65s ease-in-out infinite; text-shadow:0 0 24px rgba(255,79,100,.3); }
body[data-ending="true"] .colon { color:#ff4f64; }
@keyframes countdown-alert { 0%,100% { opacity:1; transform:scale(1); text-shadow:0 0 20px rgba(255,79,100,.25); } 50% { opacity:.3; transform:scale(.975); text-shadow:0 0 42px rgba(255,79,100,.75); } }
.actions { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:clamp(50px,14vh,110px); }
.actions button { min-height:58px; border:0; cursor:pointer; color:var(--ink); font-weight:800; letter-spacing:-.02em; }
.primary { min-width:146px; padding:0 30px; border-radius:16px; background:var(--button); }
.secondary { min-width:100px; padding:0 21px; border-radius:16px; background:rgba(248,247,242,.16); }
.gear { width:58px; border-radius:50%; display:grid; place-items:center; background:rgba(248,247,242,.16); }
.gear svg { width:23px; fill:currentColor; }
button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.42; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
dialog { width:min(calc(100% - 32px),560px); max-height:calc(100dvh - 32px); padding:0; border:1px solid rgba(218,234,255,.24); border-radius:30px; color:var(--ink); background:var(--panel); box-shadow:0 28px 90px rgba(0,8,25,.48), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter:blur(24px) saturate(145%); -webkit-backdrop-filter:blur(24px) saturate(145%); overflow:auto; }
dialog::backdrop { background:rgba(2,10,25,.38); backdrop-filter:blur(10px); }
.settings-panel { padding:34px; }
.settings-panel header { display:flex; align-items:start; justify-content:space-between; gap:18px; margin-bottom:43px; }
.eyebrow { color:var(--accent); }
h2 { margin:6px 0 0; font-size:2rem; letter-spacing:-.07em; }
.close { width:42px; height:42px; border:0; border-radius:50%; background:rgba(248,247,242,.1); color:var(--ink); cursor:pointer; font-size:1.7rem; line-height:1; }
.settings { display:grid; gap:34px; }
.advanced-settings { display:grid; gap:24px; margin-top:34px; padding-top:28px; border-top:1px solid rgba(218,234,255,.18); }
.section-label { margin:0; color:var(--accent); font:600 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.voice-selector { display:grid; grid-template-columns:minmax(82px,.7fr) minmax(0,2fr); align-items:center; gap:12px; color:var(--muted); font:500 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.voice-selector select { width:100%; min-height:48px; padding:0 16px; border:1px solid rgba(185,214,255,.48); border-radius:14px; appearance:auto; color-scheme:dark; background:#183a61; color:#fff; font:500 1rem/1 var(--mono); letter-spacing:.03em; }
.voice-selector select option { background:#183a61; color:#fff; }
.voice-selector select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; }
.toggle-row.is-disabled { cursor:not-allowed; opacity:.38; }
.toggle-row > span:first-child { display:grid; gap:6px; color:var(--ink); }
.toggle-row strong { font:500 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.toggle-row small { color:var(--muted); font:500 .72rem/1.35 var(--sans); letter-spacing:0; }
.toggle-row input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.toggle-control { position:relative; flex:0 0 auto; width:52px; height:30px; border-radius:999px; background:rgba(248,247,242,.16); transition:background .2s ease; }
.toggle-control::after { content:""; position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%; background:var(--ink); box-shadow:0 2px 7px rgba(0,0,0,.25); transition:transform .2s ease; }
.toggle-row input:checked + .toggle-control { background:var(--accent); }
.toggle-row input:checked + .toggle-control::after { transform:translateX(22px); background:#10243e; }
.toggle-row input:focus-visible + .toggle-control { outline:2px solid var(--accent); outline-offset:3px; }
.adjuster { display:grid; grid-template-columns:minmax(82px,.7fr) minmax(0,2fr); align-items:center; gap:12px; }
.adjuster-controls { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:5px; }
.adjuster output { min-width:0; color:var(--ink); font:500 clamp(1.35rem,5vw,1.7rem)/1 var(--mono); letter-spacing:-.06em; text-align:center; font-variant-numeric:tabular-nums; }
.step { width:48px; height:48px; padding:0; border:0; border-radius:50%; background:rgba(248,247,242,.11); color:var(--ink); cursor:pointer; font:400 1.8rem/.8 var(--mono); }
.step:active,.gear:active { transform:scale(.93); }
@media (min-width:1024px) and (min-height:600px) and (hover:hover) and (pointer:fine) { .timer { width:min(100%,1600px); } h1 { width:60vw; margin-inline:auto; font-size:clamp(7rem,min(23vw,40vh),30rem); } }
@media (orientation:landscape) and (max-height:560px) { .timer { width:min(100%,760px); } h1 { width:70vw; margin-inline:auto; font-size:clamp(5.5rem,27vw,12.5rem); } .actions { flex-direction:row; margin-top:clamp(34px,9vh,58px); } .actions button { min-height:50px; } .primary,.secondary { min-width:120px; } }
@media (max-width:360px) { .timer-shell { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); } .primary { min-width:0; padding:0 21px; } .secondary { min-width:0; padding:0 17px; } .actions { gap:7px; } }