:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#cdd6f4;background:#1e1e2e;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}.app{min-height:100dvh;display:flex;flex-direction:column}header,footer{width:min(100% - 32px,1000px);margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:16px}.brand{font-weight:900;letter-spacing:.14em;color:#cdd6f4;text-decoration:none}.mark{color:#fab387;font-size:1.5rem;vertical-align:-.12em}.locale{display:flex;gap:10px;align-items:center;color:#bac2de;font-size:.85rem}.locale select{background:#313244;color:#cdd6f4;border:1px solid #585b70;border-radius:9px;padding:8px}main{width:min(100% - 32px,720px);margin:clamp(24px,7vh,70px) auto 40px;text-align:center}.eyebrow{letter-spacing:.24em;color:#fab387;font-size:.75rem;font-weight:800}h1{font-size:clamp(2rem,7vw,3.4rem);letter-spacing:-.05em;margin:8px 0 30px}.timer-card{padding:clamp(18px,5vw,36px);border:1px solid #45475a;background:#252537;border-radius:28px;box-shadow:0 20px 60px #11111b55}.phases{display:flex;gap:8px;background:#1e1e2e;padding:6px;border-radius:16px}.phases button{flex:1;border:0;border-radius:11px;background:transparent;color:#bac2de;padding:12px 6px;font-size:.9rem}.phases button.active{background:#45475a;color:#fff;font-weight:800}.dial{width:min(72vw,320px);height:min(72vw,320px);margin:36px auto;border-radius:50%;background:conic-gradient(#fab387 var(--progress),#45475a var(--progress));padding:9px}.dial-inner{width:100%;height:100%;border-radius:50%;background:#252537;display:flex;flex-direction:column;align-items:center;justify-content:center}.phase-label{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:#bac2de;font-weight:800}.clock{font-variant-numeric:tabular-nums;font-size:clamp(3.5rem,15vw,5.8rem);line-height:1.25;font-weight:800;letter-spacing:-.07em}.cycle{font-size:.8rem;color:#bac2de}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.actions button{border:1px solid #585b70;border-radius:12px;padding:13px 18px;background:#313244;color:#cdd6f4;min-width:92px}.actions .primary{background:#fab387;color:#1e1e2e;border-color:#fab387;font-weight:800;min-width:130px}.hint,.privacy{color:#a6adc8;font-size:.9rem;line-height:1.5}.hint{margin:24px 0 0}.privacy{margin:24px auto;max-width:440px}footer{margin-top:auto;padding:24px 0;color:#a6adc8;font-size:.75rem;letter-spacing:.14em}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #89b4fa;outline-offset:3px}.skip-link{position:absolute;left:-9999px;top:8px;background:#fab387;color:#1e1e2e;padding:8px}.skip-link:focus{left:8px;z-index:3}.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}@media(max-width:380px){header{align-items:flex-start}.locale{align-items:flex-end;flex-direction:column;gap:3px}.phases button{font-size:.78rem;padding:11px 3px}.actions button{min-width:80px;padding:12px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,transform .15s}button:active{transform:scale(.98)}}
