:root { --bg:#11110f; --surface:#191917; --surface-hover:#20201d; --text:#f5f4ef; --muted:#9d9c94; --faint:#64635d; --accent:#d9e2c3; --accent-ink:#1b2115; --ring:rgba(217,226,195,.3); --shadow:0 24px 70px rgba(0,0,0,.2); }
:root[data-theme="light"] { --bg:#f5f4ef; --surface:#fffefa; --surface-hover:#f0efe9; --text:#1c1c19; --muted:#74736b; --faint:#99978f; --accent:#36442a; --accent-ink:#f7f8f2; --ring:rgba(54,68,42,.18); --shadow:0 24px 70px rgba(40,40,30,.1); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-width:320px; min-height:100vh; margin:0; color:var(--text); background:var(--bg); font-family:"DM Sans",system-ui,sans-serif; transition:background .35s ease,color .35s ease; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%, 960px); min-height:100vh; margin:auto; padding:30px 36px 42px; display:flex; flex-direction:column; align-items:center; }
.site-header { width:100%; display:flex; align-items:center; justify-content:space-between; }
.wordmark { color:var(--text); text-decoration:none; letter-spacing:-.07em; font-size:1.4rem; font-weight:600; }
.icon-button { width:40px; height:40px; padding:0; display:grid; place-items:center; color:var(--muted); border:0; border-radius:50%; background:transparent; transition:background .2s,color .2s,transform .2s; }
.icon-button:hover { color:var(--text); background:var(--surface-hover); transform:translateY(-1px); }
.theme-icon { width:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.65; }
.theme-icon--sun { display:none; } :root[data-theme="light"] .theme-icon--sun { display:block; } :root[data-theme="light"] .theme-icon--moon { display:none; }
.timer-card { width:min(100%, 630px); margin:auto; text-align:center; }
.mode-tabs { display:inline-flex; gap:3px; padding:4px; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px rgba(128,128,120,.06); }
.mode-tab { padding:8px 14px; color:var(--muted); border:0; border-radius:8px; background:transparent; font-size:.82rem; font-weight:500; transition:color .2s,background .2s,box-shadow .2s; }
.mode-tab:hover { color:var(--text); } .mode-tab.is-active { color:var(--text); background:var(--surface-hover); box-shadow:0 1px 2px rgba(0,0,0,.13); }
.timer-content { padding-top:74px; }
.eyebrow { margin:0; color:var(--faint); font-size:.72rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; }
.time-display { display:block; margin:12px 0 0; color:var(--text); font-family:"DM Mono",monospace; font-size:clamp(5.2rem, 16vw, 9.5rem); font-weight:400; letter-spacing:-.1em; line-height:.9; font-variant-numeric:tabular-nums; transition:transform .18s ease,opacity .18s ease; }
.time-display.is-updating { transform:scale(.992); opacity:.86; }
.timer-message { min-height:24px; margin:29px 0 32px; color:var(--muted); font-size:.96rem; }
.timer-controls { display:flex; justify-content:center; gap:9px; }
.button { min-width:112px; padding:13px 21px; border:0; border-radius:10px; font-size:.9rem; font-weight:600; transition:transform .2s,box-shadow .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-2px); } .button:active { transform:translateY(0); }
.button--primary { color:var(--accent-ink); background:var(--accent); box-shadow:0 8px 22px var(--ring); } .button--primary:hover { box-shadow:0 10px 26px var(--ring); }
.button--secondary { color:var(--text); background:var(--surface); } .button--secondary:hover { background:var(--surface-hover); }
.settings-trigger { display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding:10px; color:var(--faint); border:0; background:transparent; font-size:.8rem; transition:color .2s; } .settings-trigger:hover { color:var(--text); }
.settings-trigger svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.permission-note { margin:0; padding:0 10px 8px; color:var(--faint); font-size:.72rem; letter-spacing:.04em; text-align:center; }
.site-footer { padding:8px; color:var(--faint); font-size:.72rem; letter-spacing:.04em; }.site-footer a { color:inherit; text-decoration:none; transition:color .2s; }.site-footer a:hover { color:var(--text); }
.settings-panel { position:fixed; z-index:3; top:0; right:0; width:min(100%,390px); height:100%; padding:34px; color:var(--text); background:var(--surface); box-shadow:var(--shadow); transform:translateX(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1),background .35s; }
.settings-panel.is-open { transform:translateX(0); }.settings-header { display:flex; justify-content:space-between; align-items:flex-start; }.settings-header h2 { margin:6px 0 0; font-size:1.45rem; letter-spacing:-.04em; }.settings-close { font-size:1.8rem; font-weight:300; line-height:1; }
.settings-form { margin-top:44px; }.settings-form label { display:flex; align-items:center; justify-content:space-between; padding:18px 0; color:var(--muted); border-bottom:1px solid rgba(128,128,120,.12); font-size:.92rem; }.settings-form label span { display:flex; align-items:center; gap:7px; }.settings-form input { width:54px; padding:3px 1px 3px 4px; color:var(--text); border:0; border-radius:4px; outline:0; background:var(--surface-hover); text-align:center; font-family:"DM Mono",monospace; }.settings-form input:focus { box-shadow:0 0 0 3px var(--ring); }.settings-form small { color:var(--faint); }.form-note { margin-top:20px; color:var(--faint); font-size:.77rem; }
.reset-defaults { margin-top:8px; padding:8px 0; color:var(--faint); border:0; background:transparent; font-size:.77rem; text-decoration:underline; text-underline-offset:3px; }.reset-defaults:hover { color:var(--text); }
.overlay { position:fixed; inset:0; z-index:2; background:rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .3s; }.overlay.is-visible { opacity:1; pointer-events:auto; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:560px) { .app-shell { padding:23px 20px 28px; }.timer-content { padding-top:58px; }.mode-tabs { width:100%; }.mode-tab { flex:1; padding:8px 5px; font-size:.75rem; }.time-display { font-size:clamp(4.6rem, 22vw, 6.4rem); }.settings-panel { padding:27px 22px; }.timer-message { margin:24px 0 28px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }