@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}:root{--pure-white: #ffffff;--pure-black: #000000;--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #e5e5e5;--gray-800: #1a1a1a;--gray-900: #0a0a0a;--font-primary: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;--font-display: "Space Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", monospace;--shadow-subtle: 0 1px 3px rgba(0, 0, 0, .08);--shadow-medium: 0 2px 8px rgba(0, 0, 0, .12);--shadow-large: 0 4px 16px rgba(0, 0, 0, .16);--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px}:root{--bg-primary: #ffffff;--bg-secondary: #fafafa;--bg-card: #ffffff;--text-primary: #000000;--text-secondary: #404040;--text-tertiary: #737373;--border-primary: #e5e5e5;--border-secondary: #f5f5f5;--shadow-color: rgba(0, 0, 0, .08)}@media (prefers-color-scheme: dark){:root:not(.light){--bg-primary: #000000;--bg-secondary: #0a0a0a;--bg-card: #000000;--text-primary: #ffffff;--text-secondary: #cccccc;--text-tertiary: #999999;--border-primary: #1a1a1a;--border-secondary: #0a0a0a;--shadow-color: rgba(255, 255, 255, .04)}}body.dark{--bg-primary: #000000;--bg-secondary: #0a0a0a;--bg-card: #000000;--text-primary: #ffffff;--text-secondary: #cccccc;--text-tertiary: #999999;--border-primary: #1a1a1a;--border-secondary: #0a0a0a;--shadow-color: rgba(255, 255, 255, .04)}body.light{--bg-primary: #ffffff;--bg-secondary: #fafafa;--bg-card: #ffffff;--text-primary: #000000;--text-secondary: #404040;--text-tertiary: #737373;--border-primary: #e5e5e5;--border-secondary: #f5f5f5;--shadow-color: rgba(0, 0, 0, .08)}body{font-family:var(--font-primary);min-height:100vh;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.zen-mode .app-header,body.zen-mode .stats-section,body.zen-mode .todo-section,body.zen-mode .settings-section,body.zen-mode .app-footer{opacity:.1;filter:blur(2px);pointer-events:none;transition:all 1.5s cubic-bezier(.4,0,.2,1)}body.zen-mode .app-header:hover,body.zen-mode .stats-section:hover,body.zen-mode .todo-section:hover,body.zen-mode .settings-section:hover,body.zen-mode .app-footer:hover{opacity:1;filter:blur(0);pointer-events:auto}body.zen-mode .timer-section{transform:scale(1.05);transition:transform 1.5s cubic-bezier(.4,0,.2,1)}body:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;z-index:-1;background:radial-gradient(circle at 50% 50%,rgba(240,240,240,.8),transparent 60%),conic-gradient(from 0deg at 50% 50%,rgba(220,220,220,.3) 0deg,transparent 60deg,rgba(230,230,230,.3) 120deg,transparent 180deg);pointer-events:none;animation:bg-spin 60s linear infinite;opacity:.6}body.dark:before{background:radial-gradient(circle at 50% 50%,rgba(30,30,30,.8),transparent 60%),conic-gradient(from 0deg at 50% 50%,rgba(40,40,40,.4) 0deg,transparent 60deg,rgba(50,50,50,.4) 120deg,transparent 180deg);opacity:.8}@keyframes bg-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#app{min-height:100vh;display:flex;flex-direction:column}.app-header{padding:3rem 2rem;border-bottom:1px solid var(--border-primary);background:var(--bg-card)}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}.app-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,3.5rem);font-weight:500;margin-bottom:.5rem;color:var(--text-primary);letter-spacing:-.03em}.app-subtitle{font-size:1.125rem;font-weight:300;color:var(--text-secondary);letter-spacing:.02em}.theme-toggle{background:var(--bg-card);border:2px solid var(--text-primary);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px var(--shadow-color);position:relative;z-index:10}.theme-toggle:hover{background:var(--text-primary);border-color:var(--text-primary);transform:scale(1.05);box-shadow:0 4px 12px var(--shadow-color)}.theme-toggle:hover .theme-icon{filter:invert(1)}.theme-icon{font-size:22px;line-height:1;-webkit-user-select:none;user-select:none}.app-main{flex:1;padding:2rem;max-width:1400px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr;gap:2rem}.glass-card{background:#fff6;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.8);border-left:1px solid rgba(255,255,255,.8);border-radius:var(--radius-md);padding:2.5rem;box-shadow:0 8px 32px #0000000d,inset 0 0 0 1px #ffffff1a}body.dark .glass-card{background:#0a0a0a66;border:1px solid rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.15);border-left:1px solid rgba(255,255,255,.15);box-shadow:0 8px 32px #0000004d,inset 0 0 0 1px #ffffff05}.timer-section{text-align:center;padding:4rem 3rem;position:relative;transition:transform 1.5s cubic-bezier(.4,0,.2,1)}.circular-timer,.timer-circle,svg.timer-circle{display:none!important}.session-type{font-family:var(--font-display);font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:3.5rem;text-transform:uppercase;letter-spacing:.2em}.timer-display-container{max-width:700px;margin:0 auto;padding:2rem 0}.time-display{font-family:var(--font-mono);font-size:clamp(5rem,15vw,9rem);font-weight:300;color:var(--text-primary);letter-spacing:.05em;text-align:center;margin-bottom:3.5rem;line-height:1;display:block!important;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);animation:breathe 8s infinite ease-in-out}@keyframes breathe{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.02);opacity:1}}.time-display:after{content:"";position:absolute;bottom:-1.5rem;left:50%;transform:translate(-50%);width:60px;height:1px;background:var(--text-primary);opacity:.3}.progress-bar{position:relative;width:100%;height:8px;background:var(--border-primary);border-radius:1px;overflow:hidden;margin:4rem 0;border:1px solid var(--border-primary)}.progress-fill{position:absolute;height:100%;background:var(--text-primary);width:0%;left:0;top:0;transition:width .3s ease;box-shadow:0 0 10px var(--text-primary)}.timer-controls{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.control-btn{padding:.875rem 2rem;border:1px solid var(--border-primary);border-radius:var(--radius-full);font-family:var(--font-primary);font-size:.875rem;font-weight:500;cursor:pointer;min-width:140px;text-transform:uppercase;letter-spacing:.1em;background:transparent;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1)}.control-btn:hover,.control-btn.primary{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.control-btn.primary:hover{background:transparent;color:var(--text-primary);border-color:var(--text-primary)}.control-btn.secondary{background:transparent;color:var(--text-primary);border-color:var(--border-primary)}.control-btn.secondary:hover{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.stats-section h2,.settings-section h2,.todo-section h2{font-family:var(--font-display);font-size:1.5rem;font-weight:500;margin-bottom:2rem;color:var(--text-primary);letter-spacing:-.02em}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem}.stat-item{text-align:center;padding:2rem 1.5rem;border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--bg-secondary)}.stat-value{display:block;font-family:var(--font-mono);font-size:clamp(2rem,4vw,2.5rem);font-weight:400;color:var(--text-primary);margin-bottom:.5rem}.stat-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-weight:500}.todo-input-container{display:flex;gap:1rem;margin-bottom:2rem}.todo-input{flex:1;padding:.875rem 1rem;border:1px solid var(--border-primary);border-radius:var(--radius-sm);font-size:.875rem;background:var(--bg-card);color:var(--text-primary);font-family:var(--font-primary)}.todo-input:focus{outline:none;border-color:var(--text-primary)}.todo-input::placeholder{color:var(--text-tertiary)}.add-todo-btn{padding:.875rem 1.5rem;background:var(--text-primary);color:var(--bg-primary);border:1px solid var(--text-primary);border-radius:var(--radius-full);font-weight:500;font-size:.875rem;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:all .3s cubic-bezier(.4,0,.2,1)}.add-todo-btn:hover{background:transparent;color:var(--text-primary)}.add-todo-btn:disabled{opacity:.5;cursor:not-allowed}.todo-list{display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto}.todo-list::-webkit-scrollbar{width:6px}.todo-list::-webkit-scrollbar-track{background:var(--bg-secondary)}.todo-list::-webkit-scrollbar-thumb{background:var(--border-primary)}.todo-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--bg-secondary);border:1.5px solid var(--border-primary);border-radius:var(--radius-sm);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:grab}.todo-item.dragging{opacity:.5;background:var(--bg-card);border-color:var(--text-primary);cursor:grabbing}.todo-edit-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--text-primary);color:var(--text-primary);font-family:inherit;font-size:inherit;padding:0;outline:none}.todo-item:hover{border-color:var(--text-secondary);box-shadow:0 2px 8px var(--shadow-color)}.todo-text{flex:1;color:var(--text-primary);font-weight:400;margin-right:1rem;font-size:.875rem}.todo-text.completed{text-decoration:line-through;opacity:.5}.todo-hint{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;color:var(--text-tertiary);opacity:.8}.todo-hint .separator{opacity:.5}.todo-actions{display:flex;gap:.5rem}.todo-btn{width:32px;height:32px;border:1px solid var(--border-primary);border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.875rem;background:transparent;transition:all .3s cubic-bezier(.4,0,.2,1)}.complete-btn{color:var(--text-primary)}.complete-btn:hover{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.delete-btn{color:var(--text-primary)}.delete-btn:hover{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.setting-item{display:flex;flex-direction:column;gap:.625rem}.setting-item label{font-weight:500;color:var(--text-primary);font-size:.875rem}.setting-item input[type=number]{padding:.875rem 1rem;border:1px solid var(--border-primary);border-radius:var(--radius-sm);font-size:.875rem;background:var(--bg-card);color:var(--text-primary);font-family:var(--font-mono)}.setting-item input[type=number]:focus{outline:none;border-color:var(--text-primary)}.setting-item input[type=number]::-webkit-inner-spin-button,.setting-item input[type=number]::-webkit-outer-spin-button{opacity:1;height:100%;cursor:pointer;background:var(--bg-secondary);border-left:1px solid var(--border-primary);margin-left:.5rem}.setting-item input[type=number]::-webkit-inner-spin-button:hover,.setting-item input[type=number]::-webkit-outer-spin-button:hover{background:var(--text-primary)}.setting-item input[type=number]{-moz-appearance:textfield}.setting-item input[type=number]:hover,.setting-item input[type=number]:focus{-moz-appearance:number-input}.setting-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--text-primary);cursor:pointer}.app-footer{text-align:center;padding:3rem 2rem;color:var(--text-tertiary);font-size:.875rem;border-top:1px solid var(--border-primary);margin-top:auto;letter-spacing:.02em;background:var(--bg-card)}.footer-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.social-links{display:flex;align-items:center;gap:1rem}.social-link{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);padding:.5rem 1rem;border:1px solid var(--border-primary);border-radius:var(--radius-full)}.social-link:hover{color:var(--bg-primary);background:var(--text-primary);border-color:var(--text-primary)}.separator{color:var(--border-primary)}.copyright{color:var(--text-tertiary);font-size:.75rem}@media (min-width: 1024px){.app-main{grid-template-columns:2fr 1fr;grid-template-rows:auto auto auto}.timer-section{grid-column:1;grid-row:1}.todo-section{grid-column:2;grid-row:1 / span 2}.stats-section{grid-column:1;grid-row:2}.settings-section{grid-column:1 / span 2;grid-row:3}}@media (max-width: 768px){.app-header{padding:2rem 1.5rem}.timer-section{padding:3rem 2rem;min-height:500px}.time-display{font-size:clamp(4rem,12vw,6rem);margin-bottom:3rem}.todo-input-container{flex-direction:column}.glass-card{padding:2rem}}@media (max-width: 480px){.app-main{padding:1rem;gap:1rem}.app-header{padding:2rem 1rem}.timer-section{padding:2.5rem 1.5rem}.time-display{font-size:clamp(3rem,16vw,4.5rem);margin-bottom:2.5rem}.session-type{margin-bottom:2.5rem}.progress-bar{height:6px;margin:3rem 0}.timer-controls{flex-direction:column}.control-btn{width:100%}.glass-card{padding:1.5rem}}.header-buttons{display:flex;align-items:center;gap:.75rem}.info-btn{background:var(--bg-card);border:2px solid var(--text-primary);color:var(--text-primary);cursor:pointer;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px var(--shadow-color);flex-shrink:0}.info-btn:hover{background:var(--text-primary);color:var(--bg-card);transform:scale(1.05);box-shadow:0 4px 12px var(--shadow-color)}.info-btn svg{display:block;transition:transform .3s cubic-bezier(.4,0,.2,1)}.info-btn:hover svg{transform:rotate(180deg)}.info-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-popup.active{opacity:1;visibility:visible}.info-popup-content{max-width:600px;width:100%;max-height:85vh;overflow-y:auto;position:relative;animation:slideUp .3s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 60px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.info-popup-content h2{font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--text-primary);margin-bottom:1.5rem;letter-spacing:-.02em}.info-popup-content h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-top:1.5rem;margin-bottom:.75rem;letter-spacing:-.01em}.close-popup{position:absolute;top:1.5rem;right:1.5rem;background:var(--border-primary);border:none;color:var(--text-primary);font-size:2rem;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:300}.close-popup:hover{background:var(--text-primary);color:var(--bg-card);transform:rotate(90deg)}.info-content{font-size:1rem;line-height:1.7}.info-content p{color:var(--text-secondary);margin-bottom:1rem}.info-content ol,.info-content ul{margin:1rem 0;padding-left:1.5rem}.info-content li{color:var(--text-secondary);margin-bottom:.75rem}.info-content li strong{color:var(--text-primary);font-weight:600}.info-tip{background:var(--border-primary);padding:1rem;border-radius:2px;margin-top:1.5rem;border-left:3px solid var(--text-primary)}.info-tip strong{color:var(--text-primary)}.control-btn:focus,.todo-input:focus,.add-todo-btn:focus,.todo-btn:focus,.setting-item input:focus,.theme-toggle:focus,.info-btn:focus,.close-popup:focus{outline:2px solid var(--text-primary);outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}