:root{--font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--pri-color: #6366f1;--sec-color: #8b5cf6;--ter-color: #ec4899;--font-color: #1e293b;--font-color-highlight: #6366f1;--pri-bg-color: #f8fafc;--sec-bg-color: #ffffff;--ter-bg-color: #f1f5f9;--hover-color: #4f46e5;--info-color: #0ea5e9;--error-color: #ef4444;--success-color: #10b981;--shadow-color: rgba(99, 102, 241, .15);--text-shadow-color: rgba(99, 102, 241, .4);--disabled-color: #94a3b8;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .2);--gradient: linear-gradient(135deg, #6366f1 0%, #ec4899 100%)}[data-theme=dark]{--pri-color: #818cf8;--sec-color: #a78bfa;--ter-color: #f472b6;--font-color: #f8fafc;--pri-bg-color: #0f172a;--sec-bg-color: #1e293b;--ter-bg-color: #334155;--glass-bg: rgba(30, 41, 59, .7);--glass-border: rgba(255, 255, 255, .05)}*{margin:0;padding:0;box-sizing:border-box}@supports (font-variation-settings: normal){:root{--font-family: "Inter Variable", sans-serif}}.App{font-family:var(--font-family);background-color:var(--pri-bg-color);height:100vh;color:var(--font-color);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1rem;background-image:radial-gradient(at 80% 0%,hsla(189,100%,56%,.1) 0px,transparent 50%),radial-gradient(at 0% 50%,hsla(355,100%,93%,.1) 0px,transparent 50%)}.header{width:100%;max-width:800px;display:flex;justify-content:space-between;align-items:center;position:relative;margin-bottom:2rem}.header h1{font-size:2.5rem;font-weight:800;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.05em}.header-buttons button{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);color:var(--pri-color);font-weight:600;padding:.6rem 1.2rem;border-radius:999px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px var(--shadow-color)}.header-buttons button:hover{background:var(--pri-color);color:#fff;transform:translateY(-2px);box-shadow:0 4px 20px var(--shadow-color)}.custom-timer,.stats{width:100%;max-width:800px;padding:1rem;display:flex;flex-direction:column;gap:1rem;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:1.5rem;box-shadow:0 8px 32px var(--shadow-color);transition:all .4s cubic-bezier(.16,1,.3,1)}.custom-timer:hover,.stats:hover{transform:translateY(-5px);box-shadow:0 12px 40px var(--shadow-color)}.custom-timer div{display:flex;justify-content:space-between;align-items:center}.custom-timer label{font-size:1.1rem;font-weight:600;color:var(--font-color)}.custom-timer input,select{padding:1rem 2rem;border:1px solid var(--glass-border);border-radius:.75rem;background:var(--glass-bg);color:var(--font-color);font-weight:500;transition:all .3s ease;width:100px;text-align:center}.custom-timer input:focus,select:focus{outline:none;border-color:var(--pri-color);box-shadow:0 0 0 3px #6366f133}.controls button{width:100px;position:relative;background:var(--gradient);color:#fff;font-weight:600;padding:1rem 2rem;border:none;border-radius:.75rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f,inset 0 -2px #0003;overflow:hidden}.controls button:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d,inset 0 -2px #0003}.controls button:active{transform:translateY(0);box-shadow:0 2px 4px -1px #0000001a,inset 0 2px #fff3}.controls button:disabled{background:var(--ter-bg-color);color:var(--disabled-color);box-shadow:none;transform:none;cursor:not-allowed}.timer-display{text-align:center;perspective:1000px}.timer{font-size:6rem;font-weight:800;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 20px var(--text-shadow-color);animation:float 3s ease-in-out infinite}.phase-indicator{font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--pri-color);position:relative;display:inline-block}.phase-indicator:after{content:"";position:absolute;bottom:-8px;left:0;width:100%;height:3px;background:var(--gradient);border-radius:3px;transform:scaleX(0);transform-origin:left;animation:scaleInOut 3s infinite}.progress-bar{width:100%;max-width:800px;height:8px;background:var(--ter-bg-color);border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a}.progress{height:100%;background:var(--gradient);border-radius:999px;transition:width .3s ease;position:relative;overflow:hidden}.progress:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite}.methods{display:inline-flex;background:var(--ter-bg-color);border-radius:999px;padding:.5rem}.methods button{padding:.75rem 1.5rem;border:none;background:transparent;color:var(--font-color);font-weight:600;cursor:pointer;transition:all .3s ease;border-radius:999px;position:relative}.methods button.active{background:#fff;color:var(--pri-color);box-shadow:0 4px 6px #0000001a}.methods button:not(.active):hover{color:var(--pri-color)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes scaleInOut{0%,to{transform:scaleX(0)}50%{transform:scaleX(1)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.header h1{font-size:1.9rem}.timer{font-size:4rem}.methods{flex-wrap:wrap}}