:root{--color-tomato-50: #FFF8F5;--color-tomato-100: #FFE4DE;--color-tomato-200: #FFC9BD;--color-tomato-300: #FFA291;--color-tomato-400: #FF7F66;--color-tomato-500: #FF6347;--color-tomato-600: #D94426;--color-tomato-700: #B33016;--color-tomato-800: #8C210D;--color-tomato-900: #2C1810;--color-green-500: #4CAF50;--color-green-600: #43A047;--color-bg-primary: var(--color-tomato-50);--color-bg-secondary: #FFFFFF;--color-bg-tertiary: var(--color-tomato-100);--color-text-primary: var(--color-tomato-900);--color-text-secondary: var(--color-tomato-800);--color-text-tertiary: var(--color-tomato-400);--color-accent: var(--color-tomato-500);--color-accent-hover: var(--color-tomato-400);--color-accent-contrast: #FFFFFF;--color-break: var(--color-green-500);--color-break-bg: #E8F5E9;--shadow-soft: 0 8px 32px rgba(44, 24, 16, .08);--shadow-card: 0 4px 12px rgba(44, 24, 16, .05);--radius-lg: 24px;--radius-md: 16px;--radius-sm: 8px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark]{--color-bg-primary: var(--color-tomato-900);--color-bg-secondary: #3E2419;--color-bg-tertiary: #543026;--color-text-primary: var(--color-tomato-50);--color-text-secondary: var(--color-tomato-200);--color-text-tertiary: var(--color-tomato-400);--color-accent: var(--color-tomato-500);--color-accent-hover: var(--color-tomato-400);--color-break: var(--color-green-600);--color-break-bg: #1B5E20;--shadow-soft: 0 8px 32px rgba(0, 0, 0, .4);--shadow-card: 0 4px 12px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;height:100vh;overflow:hidden;background-color:var(--color-bg-primary);color:var(--color-text-primary)}body.transitions-enabled{transition:background-color .5s cubic-bezier(.4,0,.2,1),color .5s ease}#root{width:100%;height:100%}body.is-running-work{background-color:var(--color-tomato-500)}body.is-running-work .timer-display{color:#fff}body.is-running-work .btn-primary{background:#fff;color:var(--color-tomato-600)}body.is-running-work .btn-primary:hover{background:#ffffffe6}body.is-running-work .action-btn,body.is-running-work .btn-icon{color:#ffffffb3}body.is-running-work .action-btn:hover,body.is-running-work .btn-icon:hover{color:#fff;background:#ffffff1a}body.is-running-break{background-color:var(--color-green-500)}body.is-running-break .timer-display{color:#fff}body.is-running-break .timer .btn-primary{background:#fff;color:var(--color-green-600)}body.is-running-break .timer .btn-primary:hover{background:#ffffffe6}body.is-running-break .action-btn,body.is-running-break .btn-icon{color:#ffffffb3}body.is-running-break .action-btn:hover,body.is-running-break .btn-icon:hover{color:#fff;background:#ffffff1a}.timer{display:flex;flex-direction:column;align-items:center;gap:2rem}.timer-display{font-size:8rem;font-weight:200;font-variant-numeric:tabular-nums;color:var(--color-text-primary);line-height:1;letter-spacing:-.02em;transition:color .3s ease;font-family:system-ui,-apple-system,sans-serif}.timer-controls{display:flex;align-items:center;gap:1rem}.btn{border:none;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.btn-primary{background:var(--color-accent);color:var(--color-accent-contrast);width:64px;height:64px;border-radius:50%}.btn-primary:hover{opacity:.9;transform:scale(1.05)}.btn-icon{background:transparent;color:var(--color-text-secondary);width:44px;height:44px;border-radius:50%}.btn-icon:hover{color:var(--color-text-primary);background:var(--color-bg-tertiary)}.timer.break .btn-primary{background:var(--color-break)}@media(max-width:480px){.timer-display{font-size:5rem}.btn-primary{width:56px;height:56px}.btn-icon{width:40px;height:40px}}.shortcut-hint{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);font-size:.75rem;color:var(--color-text-secondary);opacity:.5;transition:opacity .3s ease;pointer-events:none;-webkit-user-select:none;user-select:none}.shortcut-hint.hidden{opacity:0}.heatmap-container{display:flex;flex-direction:column;gap:1rem;width:100%;overflow:hidden}.heatmap-scroll-area{position:relative;width:100%}.heatmap-mask{position:absolute;top:0;bottom:.5rem;width:40px;pointer-events:none;z-index:1;transition:opacity .2s ease}.heatmap-mask-left{left:0;background:linear-gradient(to right,var(--color-bg-secondary) 0%,transparent 100%)}.heatmap-mask-right{right:0;background:linear-gradient(to left,var(--color-bg-secondary) 0%,transparent 100%)}.heatmap-wrapper{overflow-x:auto;padding-bottom:.5rem;max-width:100%;scrollbar-width:thin;scrollbar-color:var(--color-tomato-300) transparent}.heatmap-wrapper::-webkit-scrollbar{height:6px}.heatmap-wrapper::-webkit-scrollbar-track{background:transparent}.heatmap-wrapper::-webkit-scrollbar-thumb{border-radius:3px}.heatmap-grid{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:3px}.heatmap-cell{width:12px;height:12px;border-radius:2px;transition:transform .1s ease,background-color .3s ease}.heatmap-cell:hover{transform:scale(1.2)}.heatmap-cell[data-level="-1"]{background:transparent}.heatmap-cell[data-level="0"]{background:var(--color-bg-tertiary)}.heatmap-cell[data-level="1"]{background:var(--color-tomato-200)}.heatmap-cell[data-level="2"]{background:var(--color-tomato-300)}.heatmap-cell[data-level="3"]{background:var(--color-tomato-400)}.heatmap-cell[data-level="4"]{background:var(--color-tomato-500)}.heatmap-legend{display:flex;align-items:center;justify-content:flex-end;gap:3px}.heatmap-legend .heatmap-cell{width:10px;height:10px}.heatmap-legend .heatmap-cell:hover{transform:none}.settings-modal{max-width:400px}.settings-content{display:flex;flex-direction:column;gap:1rem}.settings-group{display:flex;flex-direction:column;gap:.5rem}.settings-label{font-size:.875rem;font-weight:500;color:var(--color-text-secondary)}.settings-input-wrapper{display:flex;align-items:center;gap:.75rem}.settings-input{width:80px;padding:.625rem .75rem;font-size:1rem;border:1px solid var(--color-bg-tertiary);border-radius:var(--radius-sm);background:var(--color-bg-primary);color:var(--color-text-primary);text-align:center;transition:border-color .2s ease,box-shadow .2s ease}.settings-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #ff634726}.settings-input::-webkit-inner-spin-button,.settings-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.settings-input[type=number]{-moz-appearance:textfield}.settings-unit{font-size:.875rem;color:var(--color-text-tertiary)}.settings-language-buttons{display:flex;gap:.5rem}.lang-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border:1px solid var(--color-bg-tertiary);border-radius:var(--radius-sm);background:var(--color-bg-primary);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.lang-btn:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.lang-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-contrast)}.settings-divider{height:1px;background:var(--color-bg-tertiary);margin:.5rem 0}.settings-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-bg-tertiary)}.settings-footer-right{display:flex;gap:.75rem}.settings-btn{padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease}.settings-btn-reset{background:transparent;border:none;color:var(--color-text-tertiary);padding-left:0}.settings-btn-reset:hover{color:var(--color-text-primary)}.settings-btn-cancel{background:transparent;border:1px solid var(--color-bg-tertiary);color:var(--color-text-secondary)}.settings-btn-cancel:hover{border-color:var(--color-text-tertiary);color:var(--color-text-primary)}.settings-btn-save{background:var(--color-accent);border:none;color:var(--color-accent-contrast)}.settings-btn-save:hover{background:var(--color-accent-hover)}.settings-btn-save:disabled{opacity:.5;cursor:not-allowed}@media(max-width:480px){.settings-modal{max-width:100%}.settings-footer{flex-direction:column;gap:1rem}.settings-btn-reset{order:1}.settings-footer-right{width:100%;order:0}.settings-btn-cancel,.settings-btn-save{flex:1}}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100%;overflow:hidden;position:relative}.top-actions{position:fixed;top:1.5rem;right:1.5rem;display:flex;align-items:center;gap:.5rem;z-index:100}.action-btn{background:transparent;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:color .2s ease,background .2s ease}.action-btn:hover{color:var(--color-text-primary)}.main-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.modal-overlay{position:fixed;inset:0;background:#0000;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;opacity:0;visibility:hidden;transition:opacity .25s ease,background .25s ease,visibility .25s}.modal-overlay.visible{opacity:1;visibility:visible;background:#00000080}.modal{background:var(--color-bg-secondary);border-radius:var(--radius-md);padding:1.5rem;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;transform:scale(.9) translateY(20px);opacity:0;transition:transform .25s ease,opacity .25s ease}.modal-overlay.visible .modal{transform:scale(1) translateY(0);opacity:1}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.modal-header h2{font-size:1rem;font-weight:600;color:var(--color-text-primary);margin:0}.modal-close{background:transparent;border:none;font-size:1.5rem;color:var(--color-text-secondary);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;line-height:1}.modal-close:hover{color:var(--color-text-primary)}@media(max-width:480px){.top-actions{top:1rem;right:1rem}}