:root{color-scheme:dark;--bg:#101015;--panel:#15151d;--line:#2c2a35;--text:#f6f1f9;--muted:#aaa5b5;--accent:#e8a7fa;--shadow:#6b3877;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 51% 20%,#221929 0%,var(--bg) 62%);color:var(--text)}
.shell{min-height:100svh;width:min(100% - 40px,1050px);margin:auto;display:grid;grid-template-rows:auto 1fr auto}
.masthead,footer{display:flex;justify-content:space-between;align-items:center}
.masthead{height:84px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:21px;font-weight:750;letter-spacing:-.045em}
.brand-dot{color:var(--accent);margin-left:-9px}
.masthead-note,footer{letter-spacing:.13em;font-size:10px;font-weight:650;color:var(--muted)}
.masthead-note i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 7px 1px 0;box-shadow:0 0 11px var(--shadow)}
.console{margin:auto;text-align:center;width:min(100%,520px);padding:30px 0 34px;--accent:#e8a7fa;--shadow:#6b3877}
.console[data-mode=short]{--accent:#a6e5d0;--shadow:#397466}
.console[data-mode=long]{--accent:#afc5ff;--shadow:#3e5590}
h1{margin:0;font-weight:730;font-size:clamp(33px,7vw,58px);line-height:1.08;letter-spacing:-.06em}
h1 em{font-style:normal;color:var(--accent)}
.intro p{color:var(--muted);margin:12px 0 23px;font-size:15px}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.modes{margin:auto;display:flex;justify-content:center;width:max-content;max-width:100%;padding:4px;gap:2px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.modes button{color:var(--muted);border:1px solid transparent;background:none;border-radius:9px;font-size:13px;font-weight:650;padding:9px clamp(6px,3vw,16px)}
.modes button:hover{color:var(--text)}
.modes button[aria-pressed=true]{color:var(--text);background:#2d2635;border-color:#493b52}
.dial{position:relative;width:clamp(208px,43vh,278px);max-width:90%;aspect-ratio:1;margin:20px auto 16px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#211d2a 4%,#191720 61%,transparent 62%)}
.ring{position:absolute;inset:0;width:100%;height:100%;fill:none}
.marks{stroke:#575061;stroke-width:2;stroke-dasharray:.17 .83}
.track{stroke:#302b3a;stroke-width:6}
.progress{stroke:var(--accent);stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 7px var(--shadow))}
.readout{position:relative;display:grid;justify-items:center;gap:2px}
#time{font-size:clamp(50px,9vh,76px);font-weight:690;line-height:1.04;letter-spacing:-.075em;font-variant-numeric:tabular-nums;padding-right:.075em}
#status{color:var(--muted);font-size:13px;letter-spacing:.04em;min-height:1.35em}
.controls{display:flex;justify-content:center;gap:10px}
.controls button{height:48px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-weight:730}
#toggle{min-width:140px;padding:0 20px;background:var(--accent);border-color:transparent;color:#1d1122}
#toggle:hover{filter:brightness(1.1)}
#reset{width:49px;display:grid;place-items:center;background:var(--panel);color:var(--text)}
#reset:hover{background:#2b2733}
#reset path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
footer{min-height:62px;border-top:1px solid var(--line);gap:12px}
footer span:last-child{letter-spacing:0;font-size:12px;font-weight:450;text-align:right}
@media(max-width:440px){.shell{width:calc(100% - 32px)}.masthead{height:62px}.console{padding:28px 0}.modes button{font-size:12px}.dial{margin-top:17px}.intro p{margin-bottom:18px}}
@media(prefers-reduced-motion:no-preference){.progress{transition:stroke-dasharray .2s linear,stroke .18s ease}button{transition:background-color .18s ease,color .18s ease}}