:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0b0f1a;color:#e8eaf0}body{background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(99,102,241,.12),transparent),radial-gradient(ellipse 60% 50% at 80% 100%,rgba(168,85,247,.08),transparent),#0b0f1a}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:2.5rem}.mode-toggle{display:flex;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:4px;gap:2px}.mode-btn{padding:.5rem 1.5rem;border-radius:999px;border:none;background:transparent;color:#ffffff80;font-size:.85rem;font-weight:500;letter-spacing:.04em;cursor:pointer;transition:all .25s ease}.mode-btn:hover{color:#fffc}.mode-btn.active{background:#6366f133;color:#a5b4fc;box-shadow:0 0 20px #6366f11a}.clock-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.time-display{font-size:clamp(3.5rem,12vw,8rem);font-weight:200;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#f0f0f5;text-shadow:0 0 60px rgba(99,102,241,.15);-webkit-user-select:none;user-select:none}.time-display .separator{opacity:.3;margin:0 .05em}.time-display .ampm{font-size:.25em;font-weight:400;opacity:.5;margin-left:.3em;vertical-align:super}.date-display{font-size:1rem;font-weight:400;color:#fff6;letter-spacing:.08em;text-transform:uppercase}.timer-container{display:flex;flex-direction:column;align-items:center;gap:2rem}.timer-display{position:relative;display:flex;align-items:center;justify-content:center}.timer-ring{width:280px;height:280px}.timer-ring-bg{fill:none;stroke:#ffffff0d;stroke-width:3}.timer-ring-progress{fill:none;stroke:url(#timerGradient);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .1s linear;filter:drop-shadow(0 0 8px rgba(99,102,241,.4))}.timer-text{position:absolute;font-size:3.5rem;font-weight:200;font-variant-numeric:tabular-nums;color:#f0f0f5;letter-spacing:-.01em}.timer-text .timer-seconds{font-size:1.5rem;opacity:.5;margin-left:.2em}.timer-presets{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.preset-btn{padding:.4rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#ffffff08;color:#fff9;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}.preset-btn:hover{border-color:#6366f166;color:#a5b4fc;background:#6366f114}.timer-actions{display:flex;gap:1rem}.action-btn{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#fffc;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.action-btn:hover{border-color:#6366f180;background:#6366f11a;color:#a5b4fc;box-shadow:0 0 24px #6366f126}.action-btn.primary{width:64px;height:64px;background:#6366f126;border-color:#6366f14d;color:#a5b4fc}.action-btn.primary:hover{background:#6366f140;box-shadow:0 0 30px #6366f133}.custom-time-row{display:flex;align-items:center;gap:.5rem}.time-input{width:60px;padding:.35rem .5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#e8eaf0;font-size:.85rem;text-align:center;font-variant-numeric:tabular-nums;outline:none;transition:border-color .2s}.time-input:focus{border-color:#6366f180}.time-input-label{font-size:.7rem;color:#ffffff59;text-transform:uppercase;letter-spacing:.06em}.set-btn{padding:.35rem .75rem;border-radius:.5rem;border:1px solid rgba(99,102,241,.3);background:#6366f11a;color:#a5b4fc;font-size:.8rem;cursor:pointer;transition:all .2s}.set-btn:hover{background:#6366f133}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.timer-finished .timer-text{animation:pulse 1s ease-in-out infinite;color:#f87171}.timer-finished .timer-ring-progress{stroke:#f87171;filter:drop-shadow(0 0 12px rgba(248,113,113,.5))}@media(max-width:480px){.app{padding:1.5rem;gap:2rem}.timer-ring{width:220px;height:220px}.timer-text{font-size:2.5rem}}