*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #1a1a2e;--accent: #e74c3c;--accent-glow: rgba(231, 76, 60, .25);--text: #e0e0e0;--text-muted: #888;--green: #2ecc71;--green-hover: #27ae60;--amber: #f39c12;--amber-hover: #e67e22;--reset-bg: rgba(255, 255, 255, .07);--reset-hover: rgba(255, 255, 255, .14);--ring-bg: rgba(255, 255, 255, .06)}html,body,#root{height:100%;width:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:2rem;transition:background .5s ease}.container.finished{background:radial-gradient(circle at center,var(--accent-glow),var(--bg) 70%)}.timer-wrapper{position:relative;width:320px;height:320px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.timer-wrapper:active{transform:scale(.98);transition:transform .1s ease}.progress-ring{position:absolute;top:0;left:0;width:100%;height:100%}.ring-bg{stroke:var(--ring-bg)}.ring-progress{stroke:var(--accent);filter:drop-shadow(0 0 6px var(--accent-glow))}.timer-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}.time{font-size:4.5rem;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:.05em;line-height:1}.label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.2em;font-weight:500}.buttons{display:flex;gap:1rem}.btn{padding:.75rem 2rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s ease,transform .1s ease;outline:none;min-width:120px;letter-spacing:.02em}.btn:active{transform:scale(.96)}.btn:focus-visible{box-shadow:0 0 0 3px var(--accent)}.btn-start{background:var(--green);color:#fff}.btn-start:hover{background:var(--green-hover)}.btn-start:disabled{opacity:.4;cursor:not-allowed}.btn-pause{background:var(--amber);color:#fff}.btn-pause:hover{background:var(--amber-hover)}.btn-reset{background:var(--reset-bg);color:var(--text-muted)}.btn-reset:hover{background:var(--reset-hover);color:var(--text)}@media (max-width: 480px){.timer-wrapper,.progress-ring{width:260px;height:260px}.time{font-size:3.5rem}.buttons{gap:.75rem}.btn{padding:.65rem 1.5rem;min-width:100px;font-size:.9rem}}@media (max-width: 360px){.timer-wrapper,.progress-ring{width:220px;height:220px}.time{font-size:2.8rem}.btn{padding:.5rem 1.2rem;min-width:80px;font-size:.85rem}}