:root { color-scheme: light; --green:#3f896a; --purple:#734f97; --ink:#2d3137; --muted:#686c72; --paper:#f9f9f7; --track:#e6e1ee; font-family:"Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; padding:28px 16px; display:grid; place-items:center; background:#f0f3f0; color:var(--ink); }
button,input,select { font:inherit; }
button,select,input { -webkit-tap-highlight-color:transparent; }
button { border:1px solid #dcd7e4; border-radius:8px; background:white; color:var(--purple); cursor:pointer; min-height:40px; padding:8px 12px; font-size:13px; font-weight:550; touch-action:manipulation; }
button:hover:enabled { background:#f1edf6; }
button:active:enabled { background:#e9e2f0; }
button:disabled { color:#777780; background:#f8f7f9; border-color:#e6e3ea; cursor:default; }
button:focus-visible, input:focus-visible,select:focus-visible { outline:3px solid #9dbdac; outline-offset:3px; }
button.primary { background:var(--purple); border-color:var(--purple); color:#fff; }
button.primary:hover:enabled { background:#65438a; }
button.primary:disabled { background:#e7e0ed; border-color:#e7e0ed; color:#6b6175; }
[hidden] { display:none !important; }
.timer-card { width:min(100%,390px); padding:24px; border:1px solid #e6e8e3; border-radius:20px; background:var(--paper); box-shadow:0 10px 35px #263d2d0b; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-icon { width:28px; height:28px; flex:none; }
h1 { margin:0; font-size:24px; line-height:1.25; font-weight:700; letter-spacing:-.7px; }
.subtitle { margin:7px 0 0; font-size:13px; color:var(--muted); }
.timer-display { position:relative; height:234px; margin:15px 0 0; display:grid; place-items:center; }
.circle-visual { width:224px; height:224px; }
.circle-visual svg { display:block; width:100%; height:100%; }
.ring-track,.ring-progress { fill:none; stroke-width:10; }
.ring-track { stroke:var(--track); }
.ring-progress { stroke:var(--green); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; stroke-dasharray:1 1; }
.readout { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; pointer-events:none; }
.digits { font-size:46px; line-height:1.1; font-weight:700; letter-spacing:-1.2px; font-variant-numeric:tabular-nums; }
.remaining-label { font-size:12px; color:var(--muted); }
.bar-track { display:none; width:100%; height:13px; border-radius:100px; background:var(--track); overflow:hidden; }
.bar-fill { height:100%; width:100%; border-radius:100px; background:var(--green); transform-origin:left; }
.timer-display[data-view="bar"] { height:180px; }
.timer-display[data-view="bar"] .circle-visual { display:none; }
.timer-display[data-view="bar"] .readout { bottom:50px; }
.timer-display[data-view="bar"] .bar-track { display:block; align-self:end; margin-bottom:22px; }
.timer-display[data-paused="true"] .ring-progress { stroke:var(--purple); }
.timer-display[data-paused="true"] .bar-fill { background:var(--purple); }
.state { color:var(--green); text-align:center; font-size:12px; margin:8px 0 15px; min-height:18px; line-height:18px; }
.controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.controls button { padding:8px 3px; }
.settings { border-top:1px solid #e3dfe8; margin-top:20px; padding-top:19px; }
.settings-row { display:grid; gap:8px; align-items:center; margin:0 0 15px; font-size:13px; }
.interval-row { grid-template-columns:56px 58px 34px minmax(0,1fr); column-gap:9px; }
.interval-row label:nth-of-type(2) { text-align:right; }
.sound-row { grid-template-columns:56px minmax(0,1fr) 72px; }
.volume-row { grid-template-columns:56px minmax(0,1fr) 36px; margin-bottom:5px; }
input[type="number"],select { border:1px solid #d8d6dd; background:white; color:var(--ink); border-radius:6px; min-width:0; width:100%; min-height:36px; padding:7px 6px; font-size:13px; }
input[type="number"] { text-align:center; }
input:disabled { color:#6d6a72; background:#eeecef; }
input[type="range"] { accent-color:var(--green); width:100%; min-width:0; margin:0; height:30px; cursor:pointer; }
output { color:var(--muted); font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
.sound-row button { padding:7px; min-height:36px; }
.small-note { margin:16px 0 7px; text-align:center; font-size:11px; color:var(--muted); line-height:1.5; }
.website-link { margin:2px 0 5px; text-align:center; }
.website-link a { display:inline-block; color:var(--purple); }
.website-link a:hover { color:#503469; }
.app-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:3px 10px; }
.quiet-action { background:transparent; border:0; min-height:32px; padding:5px 3px; font-size:12px; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.quiet-action:hover:enabled { background:transparent; color:#503469; }
#float { margin-top:8px; }
.sound-message,.share-message { font-size:12px; color:var(--purple); line-height:1.5; margin:0; }
.sound-message:not(:empty) { margin-top:9px; }
.share-message:not(:empty) { margin-top:8px; text-align:center; }
.help { margin-top:12px; border-top:1px solid #e3dfe8; padding-top:4px; font-size:12px; color:var(--muted); line-height:1.65; }
.help h2 { margin:12px 0 0; color:var(--ink); font-size:16px; line-height:1.4; font-weight:650; }
.help p { margin:10px 0 0; }
.help strong { color:var(--ink); font-weight:550; }
body.floating { min-height:100svh; padding:12px; background:var(--paper); }
.floating .timer-card { border:0; box-shadow:none; padding:6px; }
.floating .timer-display { margin:6px 0 0; height:200px; }
.floating .circle-visual { width:190px; height:190px; }
.floating h1 { font-size:18px; }
.floating .digits { font-size:38px; }
@media (max-width:360px) { body { padding:12px 8px; } .timer-card { padding:18px 14px; border-radius:16px; } .interval-row { grid-template-columns:49px 45px 29px minmax(0,1fr); column-gap:6px; } .sound-row { grid-template-columns:49px minmax(0,1fr) 66px; } .volume-row { grid-template-columns:49px minmax(0,1fr) 34px; } .controls button { font-size:12px; } }
@media (max-height:680px) and (min-width:361px) { body { padding:12px; } .timer-card { padding:20px; } .timer-display { height:202px; margin-top:9px; } .circle-visual { width:192px; height:192px; } .digits { font-size:42px; } .state { margin-bottom:10px; } .settings { margin-top:16px; padding-top:15px; } .settings-row { margin-bottom:12px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }