*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #3498db;--primary-hover: #2980b9;--secondary-color: #f39c12;--secondary-hover: #e67e22;--text-primary: #2c3e50;--text-secondary: #34495e;--text-muted: #7f8c8d;--bg-card: rgba(255, 255, 255, .95);--bg-button-secondary: #ecf0f1;--bg-button-secondary-hover: #d5dbdb;--shadow-light: 0 10px 30px rgba(0, 0, 0, .1);--shadow-medium: 0 20px 40px rgba(0, 0, 0, .1);--border-radius: 20px;--border-radius-small: 12px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#ff7e5f,#feb47b,#c471ed 66%,#12c2e9);background-size:400% 400%;animation:gradientShift 15s ease infinite;min-height:100vh;min-height:100dvh;color:var(--text-primary);overflow-x:hidden;padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom);padding-left:var(--safe-area-left);padding-right:var(--safe-area-right)}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#root{width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1rem}button{font-family:inherit;border:none;cursor:pointer;outline:none;transition:all .2s ease;min-height:44px;min-width:44px}button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}button:focus:not(:focus-visible){outline:none}.app{width:100%;max-width:500px;margin:0 auto;padding:2rem;background:var(--bg-card);border-radius:var(--border-radius);box-shadow:var(--shadow-medium);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto}.app-header{margin-bottom:2rem}.app-header h1{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin:0}.app-main{display:flex;flex-direction:column;align-items:center;gap:2rem}.session-display{text-align:center}.session-type{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem}.session-emoji{font-size:2rem}.session-label{font-size:1.5rem;font-weight:600;color:var(--text-secondary)}.session-counter{font-size:1rem;color:var(--text-muted);font-weight:500}.timer-container{position:relative;display:flex;align-items:center;justify-content:center}.progress-bar{position:absolute;top:0;left:0;z-index:1}.progress-ring{transform:rotate(-90deg)}.progress-ring-fill{transition:stroke-dashoffset .5s ease}.timer{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:260px;height:260px}.timer-circle{width:200px;height:200px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-light);transition:all .3s ease}.timer.running .timer-circle{animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:var(--shadow-light)}50%{box-shadow:0 15px 40px #0003}}.timer-display{text-align:center}.time-text{font-size:3rem;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.05em}.controls{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.control-button{padding:.75rem 1.5rem;border-radius:var(--border-radius-small);font-size:1rem;font-weight:600;transition:all .2s ease;min-width:140px;min-height:48px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.control-button.primary{background:var(--primary-color);color:#fff}.control-button.primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 8px 20px #3498db4d}.control-button.primary.pause{background:var(--secondary-color)}.control-button.primary.pause:hover{background:var(--secondary-hover);box-shadow:0 8px 20px #f39c124d}.control-button.secondary{background:var(--bg-button-secondary);color:var(--text-secondary)}.control-button.secondary:hover{background:var(--bg-button-secondary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.control-button:active{transform:translateY(0)}@media (max-width: 768px){.app{max-width:480px;padding:1.5rem}.app-header h1{font-size:2.2rem}.timer-container{transform:scale(.9)}.time-text{font-size:2.8rem}}@media (max-width: 600px){.app{padding:1rem;margin:0;border-radius:16px;max-height:calc(100vh - 1rem);max-height:calc(100dvh - 1rem);width:calc(100% - 1rem)}.app-header{margin-bottom:1.5rem}.app-header h1{font-size:1.8rem;margin-bottom:.5rem}.app-main{gap:1.5rem}.timer-container{transform:scale(.85)}.time-text{font-size:2.2rem}.control-button{min-width:100px;min-height:44px;padding:.75rem 1rem;font-size:.9rem}.controls{gap:.75rem}}@media (max-width: 430px) and (max-height: 932px){.app{padding:.75rem;width:calc(100% - .5rem);max-height:calc(100dvh - .5rem)}.app-header{margin-bottom:1rem}.app-header h1{font-size:1.6rem}.app-main{gap:1.25rem}.timer-container{transform:scale(.8)}.time-text{font-size:2rem}.session-label{font-size:1.3rem}.control-button{min-width:90px;padding:.625rem .875rem;font-size:.875rem}}@media (max-height: 500px) and (orientation: landscape){.app{padding:.5rem;max-height:calc(100dvh - .5rem);display:flex;flex-direction:column;justify-content:center}.app-header{margin-bottom:.5rem}.app-header h1{font-size:1.5rem}.app-main{gap:1rem;flex:1;display:flex;flex-direction:column;justify-content:space-around}.timer-container{transform:scale(.7)}.time-text{font-size:1.8rem}.session-label{font-size:1.2rem}.control-button{min-width:80px;min-height:40px;padding:.5rem .75rem;font-size:.8rem}.controls{gap:.5rem}}