@supports (-webkit-touch-callout: none){.app,#root{height:-webkit-fill-available;min-height:-webkit-fill-available}}@media screen and (max-width: 767px){input[type=text],input[type=number],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=search],select,textarea{font-size:16px!important;-webkit-appearance:none;-webkit-border-radius:0;border-radius:0}}*{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.task-input-field,input,textarea{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}.customization-panel .panel-content,.panel-content{-webkit-overflow-scrolling:touch;overflow-scrolling:touch}@-moz-document url-prefix(){.control-button,.selector-option,.customization-button,.action-button{-moz-appearance:none;background-clip:padding-box}}@supports (-moz-appearance: none){.app-main,.clock-container,.timer-controls,.mode-selector-container{min-height:0;min-width:0}}@media screen and (max-width: 767px){.app,#root{height:100vh;height:100dvh}}.control-button:focus,.selector-option:focus,.customization-button:focus,.action-button:focus{outline:2px solid #007bff;outline-offset:2px}.flip-animation,.flip-card-inner,.selector-slider,.control-button,.customization-button{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;-moz-perspective:1000px;-ms-perspective:1000px;perspective:1000px}@media (max-width: 767px){.flip-card.flipping .flip-animation{animation-duration:.4s}@media (prefers-reduced-motion: reduce){.flip-card.flipping .flip-animation,.selector-slider,.control-button svg{animation:none!important;transition:none!important}}}.control-button,.selector-option,.customization-button,.action-button,.tab-button,.close-button{min-width:44px;min-height:44px;touch-action:manipulation}@media (max-width: 767px){.control-button:active,.selector-option:active,.customization-button:active{transition-duration:.1s}}.app-main,.clock-container,.timer-controls,.mode-selector-container,.content-layout{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.app-main,.clock-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.timer-controls,.mode-selector-container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-orient:horizontal;-moz-box-direction:normal;-ms-flex-direction:row;flex-direction:row}@supports not (display: grid){.content-layout{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column}.preview-section{-webkit-order:-1;order:-1;margin-bottom:1rem}}.clock-container,.customization-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes flipDown{0%{-webkit-transform:rotateX(0deg) translateZ(0);-moz-transform:rotateX(0deg) translateZ(0);-ms-transform:rotateX(0deg) translateZ(0);-o-transform:rotateX(0deg) translateZ(0);transform:rotateX(0) translateZ(0)}to{-webkit-transform:rotateX(-180deg) translateZ(0);-moz-transform:rotateX(-180deg) translateZ(0);-ms-transform:rotateX(-180deg) translateZ(0);-o-transform:rotateX(-180deg) translateZ(0);transform:rotateX(-180deg) translateZ(0)}}.flip-card,.flip-card *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (max-width: 767px){.app,.app-main,.clock-container{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}}@media screen and (orientation: landscape){html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}}@media (prefers-contrast: high){.control-button,.selector-option,.customization-button{border:2px solid}.flip-card-inner{border:1px solid}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;-webkit-transition-duration:.01ms!important;-o-transition-duration:.01ms!important;-moz-transition-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.digit,.flip-card-top .digit,.flip-card-bottom .digit,.flip-animation-front .digit,.flip-animation-back .digit{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1;-webkit-font-feature-settings:"kern" 1;-moz-font-feature-settings:"kern" 1;-ms-font-feature-settings:"kern" 1}.panel-content,.customization-panel .panel-content{-webkit-overflow-scrolling:touch;overflow-scrolling:touch}body{overscroll-behavior:none;-webkit-overscroll-behavior:none}@supports (padding: max(0px)){.app{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right));padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom))}}@supports not (padding: max(0px)){.app{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right);padding-top:constant(safe-area-inset-top);padding-bottom:constant(safe-area-inset-bottom)}}.ios-browser .app,.ios-browser #root{height:var(--vh, 100vh);min-height:var(--vh, 100vh)}.browser-chrome.mobile-browser .app{height:var(--app-height, 100vh)}.firefox-mobile-flex-fix .app-main,.firefox-mobile-flex-fix .clock-container,.firefox-mobile-flex-fix .timer-controls{min-height:0;min-width:0}.low-performance .flip-card.flipping .flip-animation{animation-duration:.3s}.low-performance .selector-slider{transition-duration:.2s}.low-performance .control-button:hover{transform:none}.high-dpi .digit,.high-dpi .flip-card-top .digit,.high-dpi .flip-card-bottom .digit{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.browser-samsung .customization-panel{-webkit-transform:translateZ(0);transform:translateZ(0)}.browser-edge.mobile-browser .flip-animation{-ms-transform-origin:bottom;transform-origin:bottom}.android-browser .control-button,.android-browser .selector-option{-webkit-tap-highlight-color:rgba(0,0,0,.1)}@supports not (backdrop-filter: blur(10px)){.clock-container{background:#000c;-webkit-backdrop-filter:none;backdrop-filter:none}.customization-overlay{background:#000000e6;-webkit-backdrop-filter:none;backdrop-filter:none}}@supports not (display: grid){.content-layout{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column}.preview-section{-webkit-order:-1;order:-1;margin-bottom:1rem}@media (min-width: 768px){.content-layout{-webkit-flex-direction:row;flex-direction:row}.options-section{-webkit-flex:1;flex:1}.preview-section{-webkit-flex:0 0 300px;flex:0 0 300px;-webkit-order:0;order:0;margin-bottom:0;margin-left:2rem}}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--clock-font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;--mobile-bg-primary: #1a1a1a;--mobile-bg-secondary: #2a2a2a;--mobile-bg-tertiary: #3a3a3a;--mobile-text-primary: rgba(255, 255, 255, .95);--mobile-text-secondary: rgba(255, 255, 255, .8);--mobile-text-tertiary: rgba(255, 255, 255, .6);--mobile-border-primary: rgba(255, 255, 255, .2);--mobile-border-secondary: rgba(255, 255, 255, .1);--mobile-accent-primary: #007bff;--mobile-accent-secondary: #0056b3}@media (prefers-color-scheme: light){:root{--mobile-bg-primary: #ffffff;--mobile-bg-secondary: #f8f9fa;--mobile-bg-tertiary: #e9ecef;--mobile-text-primary: rgba(0, 0, 0, .9);--mobile-text-secondary: rgba(0, 0, 0, .7);--mobile-text-tertiary: rgba(0, 0, 0, .5);--mobile-border-primary: rgba(0, 0, 0, .2);--mobile-border-secondary: rgba(0, 0, 0, .1)}}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}html{font-size:16px}@media (min-width: 768px){html{font-size:17px}}@media (min-width: 1024px){html{font-size:18px}}@media (max-width: 767px){body{text-rendering:optimizeSpeed;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}*{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}button{font-size:1rem;line-height:1.5;letter-spacing:.025em}a{font-size:inherit;line-height:inherit;text-decoration-thickness:2px;text-underline-offset:2px}}@media (min-resolution: 2dppx){body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (max-width: 767px){:root{--mobile-enhanced-contrast: 1.2}h1,h2,h3,h4,h5,h6,button,a,input,select,textarea{filter:contrast(var(--mobile-enhanced-contrast))}}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-reduced-motion: reduce){.flip-card.flipping .flip-animation{animation:none!important}}@media (max-width: 767px){.flip-card.flipping .flip-animation{animation:flipDown .4s ease-out forwards!important}}@media (prefers-reduced-motion: reduce){.selector-slider{transition:transform .15s ease!important}.tab-content{animation:none!important}.control-button:hover,.customization-button:hover{transform:none!important}.timer-indicator{animation:none!important}.customization-button:hover svg{animation:none!important}.play-button svg{animation:none!important}.stop-button,.stop-button.exiting{animation:none!important}}@media (max-width: 767px){.timer-indicator{animation:pulse 2s infinite!important}.selector-slider{transition:transform .3s ease!important}.control-button:active,.customization-button:active{transform:scale(.95)!important;transition:transform .1s ease!important}}@media (max-width: 767px){.flip-card-inner,.flip-animation,.flip-animation-front,.flip-animation-back,.selector-slider{transform:translateZ(0);will-change:transform}.control-button{transform:translateZ(0);will-change:transform,background-color}.customization-panel{transform:translateZ(0);will-change:transform}.panel-content{transform:translateZ(0);will-change:scroll-position}}@media (max-width: 767px){.flip-card{contain:layout style}.flip-card-inner{contain:paint}.customization-panel{contain:layout style}.timer-controls{contain:layout}.mode-selector{contain:layout style}}@media (max-width: 767px){.timer-controls{transform:translateZ(0)}.customization-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.clock-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.flip-card-inner{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.customization-panel{box-shadow:0 10px 20px #0003}}@media (max-width: 767px) and (pointer: coarse){.control-button:hover,.customization-button:hover,.selector-option:hover,.tab-button:hover,.close-button:hover{background:inherit!important;transform:none!important;box-shadow:inherit!important}.control-button:active,.customization-button:active,.selector-option:active{transition:all .1s ease!important}}@media (max-width: 767px){.flip-card:not(.flipping) .flip-card-inner,.flip-card:not(.flipping) .flip-animation{will-change:auto}.selector-slider:not(:hover){will-change:auto}.control-button:not(:active){will-change:auto}}@media (max-width: 767px) and (max-resolution: 1.5dppx){.customization-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:#000c}.clock-container{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0003}.app-header h1,.flip-card .digit{text-shadow:none}}@media (max-width: 767px){.battery-low .flip-card.flipping .flip-animation,.battery-low .selector-slider,.battery-low .control-button,.battery-low .customization-button{transition:none!important;animation:none!important}}.mobile-device{-webkit-overflow-scrolling:touch;scroll-behavior:auto}.mobile-device .customization-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.mobile-device .clock-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.low-end-device .flip-card.flipping .flip-animation{animation:flipDown .3s ease-out forwards!important}.low-end-device .customization-overlay,.low-end-device .clock-container{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.low-end-device .timer-indicator{animation:pulse 3s infinite!important}.low-end-device .customization-button:hover svg{animation:none!important}.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.flip-card-inner,.selector-slider,.control-button,.customization-panel{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}@media (max-width: 767px){.flip-card .digit{text-rendering:optimizeSpeed;-webkit-font-smoothing:subpixel-antialiased}}:root{--mobile-space-xs: .25rem;--mobile-space-sm: .5rem;--mobile-space-md: .75rem;--mobile-space-lg: 1rem;--mobile-space-xl: 1.5rem;--mobile-space-2xl: 2rem;--mobile-space-3xl: 3rem;--mobile-size-xs: .75rem;--mobile-size-sm: .875rem;--mobile-size-md: 1rem;--mobile-size-lg: 1.125rem;--mobile-size-xl: 1.25rem;--mobile-size-2xl: 1.5rem;--touch-target-min: 44px;--touch-target-comfortable: 48px;--touch-target-large: 56px;--mobile-radius-sm: 6px;--mobile-radius-md: 8px;--mobile-radius-lg: 12px;--mobile-radius-xl: 16px;--mobile-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--mobile-shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--mobile-shadow-lg: 0 8px 16px rgba(0, 0, 0, .2);--mobile-text-xs: .75rem;--mobile-text-sm: .875rem;--mobile-text-base: 1rem;--mobile-text-lg: 1.125rem;--mobile-text-xl: 1.25rem;--mobile-text-2xl: 1.5rem;--mobile-text-3xl: 1.875rem;--mobile-leading-tight: 1.25;--mobile-leading-normal: 1.5;--mobile-leading-relaxed: 1.75;--mobile-contrast-high: rgba(0, 0, 0, .9);--mobile-contrast-medium: rgba(0, 0, 0, .7);--mobile-contrast-low: rgba(0, 0, 0, .5);--mobile-contrast-high-light: rgba(255, 255, 255, .95);--mobile-contrast-medium-light: rgba(255, 255, 255, .8);--mobile-contrast-low-light: rgba(255, 255, 255, .6)}.mobile-flex{display:flex}.mobile-flex-col{flex-direction:column}.mobile-flex-row{flex-direction:row}.mobile-flex-center{align-items:center;justify-content:center}.mobile-flex-between{justify-content:space-between}.mobile-flex-around{justify-content:space-around}.mobile-flex-wrap{flex-wrap:wrap}.mobile-flex-nowrap{flex-wrap:nowrap}.mobile-grid{display:grid}.mobile-grid-1{grid-template-columns:1fr}.mobile-grid-2{grid-template-columns:repeat(2,1fr)}.mobile-grid-auto{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.mobile-gap-xs{gap:var(--mobile-space-xs)}.mobile-gap-sm{gap:var(--mobile-space-sm)}.mobile-gap-md{gap:var(--mobile-space-md)}.mobile-gap-lg{gap:var(--mobile-space-lg)}.mobile-gap-xl{gap:var(--mobile-space-xl)}.mobile-gap-2xl{gap:var(--mobile-space-2xl)}.mobile-p-xs{padding:var(--mobile-space-xs)}.mobile-p-sm{padding:var(--mobile-space-sm)}.mobile-p-md{padding:var(--mobile-space-md)}.mobile-p-lg{padding:var(--mobile-space-lg)}.mobile-p-xl{padding:var(--mobile-space-xl)}.mobile-p-2xl{padding:var(--mobile-space-2xl)}.mobile-px-xs{padding-left:var(--mobile-space-xs);padding-right:var(--mobile-space-xs)}.mobile-px-sm{padding-left:var(--mobile-space-sm);padding-right:var(--mobile-space-sm)}.mobile-px-md{padding-left:var(--mobile-space-md);padding-right:var(--mobile-space-md)}.mobile-px-lg{padding-left:var(--mobile-space-lg);padding-right:var(--mobile-space-lg)}.mobile-py-xs{padding-top:var(--mobile-space-xs);padding-bottom:var(--mobile-space-xs)}.mobile-py-sm{padding-top:var(--mobile-space-sm);padding-bottom:var(--mobile-space-sm)}.mobile-py-md{padding-top:var(--mobile-space-md);padding-bottom:var(--mobile-space-md)}.mobile-py-lg{padding-top:var(--mobile-space-lg);padding-bottom:var(--mobile-space-lg)}.mobile-m-xs{margin:var(--mobile-space-xs)}.mobile-m-sm{margin:var(--mobile-space-sm)}.mobile-m-md{margin:var(--mobile-space-md)}.mobile-m-lg{margin:var(--mobile-space-lg)}.mobile-m-xl{margin:var(--mobile-space-xl)}.mobile-m-2xl{margin:var(--mobile-space-2xl)}.mobile-mx-auto{margin-left:auto;margin-right:auto}.mobile-my-auto{margin-top:auto;margin-bottom:auto}.mobile-mt-xs{margin-top:var(--mobile-space-xs)}.mobile-mt-sm{margin-top:var(--mobile-space-sm)}.mobile-mt-md{margin-top:var(--mobile-space-md)}.mobile-mt-lg{margin-top:var(--mobile-space-lg)}.mobile-mt-xl{margin-top:var(--mobile-space-xl)}.mobile-mb-xs{margin-bottom:var(--mobile-space-xs)}.mobile-mb-sm{margin-bottom:var(--mobile-space-sm)}.mobile-mb-md{margin-bottom:var(--mobile-space-md)}.mobile-mb-lg{margin-bottom:var(--mobile-space-lg)}.mobile-mb-xl{margin-bottom:var(--mobile-space-xl)}.touch-target-min{min-width:var(--touch-target-min);min-height:var(--touch-target-min)}.touch-target-comfortable{min-width:var(--touch-target-comfortable);min-height:var(--touch-target-comfortable)}.touch-target-large{min-width:var(--touch-target-large);min-height:var(--touch-target-large)}.touch-action-none{touch-action:none}.touch-action-pan-x{touch-action:pan-x}.touch-action-pan-y{touch-action:pan-y}.touch-callout-none{-webkit-touch-callout:none}.tap-highlight-none{-webkit-tap-highlight-color:transparent}.user-select-none{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mobile-text-xs{font-size:var(--mobile-text-xs)}.mobile-text-sm{font-size:var(--mobile-text-sm)}.mobile-text-base{font-size:var(--mobile-text-base)}.mobile-text-lg{font-size:var(--mobile-text-lg)}.mobile-text-xl{font-size:var(--mobile-text-xl)}.mobile-text-2xl{font-size:var(--mobile-text-2xl)}.mobile-text-3xl{font-size:var(--mobile-text-3xl)}.mobile-leading-tight{line-height:var(--mobile-leading-tight)}.mobile-leading-normal{line-height:var(--mobile-leading-normal)}.mobile-leading-relaxed{line-height:var(--mobile-leading-relaxed)}.mobile-font-light{font-weight:300}.mobile-font-normal{font-weight:400}.mobile-font-medium{font-weight:500}.mobile-font-semibold{font-weight:600}.mobile-font-bold{font-weight:700}.mobile-text-left{text-align:left}.mobile-text-center{text-align:center}.mobile-text-right{text-align:right}.mobile-text-high-contrast{color:var(--mobile-contrast-high)}.mobile-text-medium-contrast{color:var(--mobile-contrast-medium)}.mobile-text-low-contrast{color:var(--mobile-contrast-low)}.app.light-bg .mobile-text-high-contrast{color:var(--mobile-contrast-high-light)}.app.light-bg .mobile-text-medium-contrast{color:var(--mobile-contrast-medium-light)}.app.light-bg .mobile-text-low-contrast{color:var(--mobile-contrast-low-light)}.mobile-shadow-sm{box-shadow:var(--mobile-shadow-sm)}.mobile-shadow-md{box-shadow:var(--mobile-shadow-md)}.mobile-shadow-lg{box-shadow:var(--mobile-shadow-lg)}.mobile-rounded-sm{border-radius:var(--mobile-radius-sm)}.mobile-rounded-md{border-radius:var(--mobile-radius-md)}.mobile-rounded-lg{border-radius:var(--mobile-radius-lg)}.mobile-rounded-xl{border-radius:var(--mobile-radius-xl)}.mobile-container{width:100%;max-width:100%;padding-left:var(--mobile-space-md);padding-right:var(--mobile-space-md)}.mobile-card{background:#ffffff1a;border-radius:var(--mobile-radius-lg);padding:var(--mobile-space-lg);box-shadow:var(--mobile-shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mobile-panel{background:#000c;border-radius:var(--mobile-radius-xl) var(--mobile-radius-xl) 0 0;padding:var(--mobile-space-lg);position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);transition:transform .3s ease}.mobile-panel.open{transform:translateY(0)}.mobile-stack{display:flex;flex-direction:column;gap:var(--mobile-space-md)}.mobile-stack-tight{gap:var(--mobile-space-sm)}.mobile-stack-loose{gap:var(--mobile-space-xl)}.mobile-grid-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--touch-target-comfortable),1fr));gap:var(--mobile-space-md)}.mobile-grid-settings{display:grid;grid-template-columns:1fr;gap:var(--mobile-space-lg)}.responsive-heading-1{font-size:var(--mobile-text-2xl);line-height:var(--mobile-leading-tight);font-weight:700}.responsive-heading-2{font-size:var(--mobile-text-xl);line-height:var(--mobile-leading-tight);font-weight:600}.responsive-heading-3{font-size:var(--mobile-text-lg);line-height:var(--mobile-leading-normal);font-weight:600}.responsive-body{font-size:var(--mobile-text-base);line-height:var(--mobile-leading-normal);font-weight:400}.responsive-caption{font-size:var(--mobile-text-sm);line-height:var(--mobile-leading-normal);font-weight:400}.responsive-small{font-size:var(--mobile-text-xs);line-height:var(--mobile-leading-normal);font-weight:400}.mobile-touch-feedback{transition:all .1s ease;-webkit-tap-highlight-color:transparent}.mobile-touch-feedback:active{transform:scale(.95);opacity:.8}.mobile-button{display:flex;align-items:center;justify-content:center;gap:var(--mobile-space-sm);padding:var(--mobile-space-md) var(--mobile-space-lg);border:none;border-radius:var(--mobile-radius-md);font-size:var(--mobile-text-base);font-weight:500;min-height:var(--touch-target-min);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.mobile-button-primary{background:#007bff;color:#fff}.mobile-button-primary:active{background:#0056b3;transform:scale(.98)}.mobile-button-secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.mobile-button-secondary:active{background:#fff3;transform:scale(.98)}.mobile-input{width:100%;padding:var(--mobile-space-md);border:1px solid rgba(255,255,255,.2);border-radius:var(--mobile-radius-md);background:#ffffff1a;color:#fff;font-size:var(--mobile-text-base);min-height:var(--touch-target-min);-webkit-appearance:none;-moz-appearance:none;appearance:none}.mobile-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.mobile-sr-only,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-40px;left:6px;background:#000;color:#fff;padding:8px;text-decoration:none;border-radius:4px;z-index:9999;transition:top .2s ease}.skip-link:focus{top:6px}.mobile-focus-visible:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #007bff;outline-offset:2px;border-radius:4px}@media (max-width: 767px){button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #007bff;outline-offset:3px}}.focus-trap{position:relative}.focus-trap:focus{outline:none}.keyboard-user button:focus,.keyboard-user input:focus,.keyboard-user select:focus,.keyboard-user textarea:focus,.keyboard-user [tabindex]:focus{outline:2px solid #007bff;outline-offset:2px}.touch-user button:focus,.touch-user input:focus,.touch-user select:focus,.touch-user textarea:focus{outline:none}@media (prefers-contrast: high){.mobile-card,.mobile-button,.mobile-input{border:2px solid}.mobile-text-high-contrast{color:#000}.app.light-bg .mobile-text-high-contrast{color:#fff}}@media (prefers-reduced-motion: reduce){.mobile-touch-feedback,.mobile-button,.mobile-panel{transition:none}.mobile-touch-feedback:active,.mobile-button:active{transform:none}}.mobile-gpu-accelerated{transform:translateZ(0);will-change:transform}.mobile-gpu-accelerated-scroll{transform:translateZ(0);-webkit-overflow-scrolling:touch}.mobile-contain-layout{contain:layout}.mobile-contain-style{contain:style}.mobile-contain-paint{contain:paint}.mobile-contain-all{contain:layout style paint}@media (max-width: 767px) and (orientation: portrait){.portrait-only{display:block}.landscape-only{display:none}.portrait-stack{flex-direction:column}}@media (max-width: 767px) and (orientation: landscape){.portrait-only{display:none}.landscape-only{display:block}.landscape-row{flex-direction:row}.landscape-compact{padding:var(--mobile-space-sm);gap:var(--mobile-space-sm)}}@media (max-width: 767px){button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=tab]:focus-visible,[role=button]:focus-visible{outline:3px solid #007bff;outline-offset:3px;border-radius:6px}button:active,[role=button]:active,[role=tab]:active{transform:scale(.95);transition:transform .1s ease}button,input,select,textarea,[role=button],[role=tab]{min-height:var(--touch-target-min);min-width:var(--touch-target-min)}button+button,[role=button]+[role=button],[role=tab]+[role=tab]{margin-left:var(--mobile-space-sm)}}.live-region{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}@media (max-width: 767px){[role=dialog]{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000}[role=tablist]{display:flex;border-bottom:2px solid rgba(255,255,255,.2)}[role=tab]{position:relative;padding:var(--mobile-space-md) var(--mobile-space-lg);border:none;background:transparent;color:inherit;cursor:pointer;transition:all .2s ease}[role=tab][aria-selected=true]{background:#ffffff1a}[role=tab][aria-selected=true]:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#007bff}input[type=number],input[type=text],select,textarea{padding:var(--mobile-space-md);border:2px solid rgba(255,255,255,.2);border-radius:var(--mobile-radius-md);background:#ffffff1a;color:inherit;font-size:var(--mobile-text-base)}input:focus,select:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff40}}@media (max-width: 767px){.mobile-show{display:block!important}.mobile-hide{display:none!important}.mobile-full-width{width:100%!important;max-width:100%!important}.mobile-center{margin-left:auto!important;margin-right:auto!important;text-align:center!important}.mobile-stack-force{flex-direction:column!important;align-items:stretch!important}.mobile-compact{padding:var(--mobile-space-sm)!important;gap:var(--mobile-space-sm)!important}}@media (min-width: 768px){.tablet-show{display:block!important}.tablet-hide{display:none!important}}body{transition:background .3s ease;overflow:hidden}#root{max-width:100%;margin:0 auto;padding:0;text-align:center;height:100vh}@media (min-width: 768px){#root{max-width:1280px}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.app{height:100vh;display:flex;flex-direction:column}.app.dark-bg{--text-color: #ffffff;--text-shadow: 0 2px 4px rgba(0, 0, 0, .5)}.app.light-bg{--text-color: #333333;--text-shadow: 0 1px 2px rgba(255, 255, 255, .8)}.app-header{padding:.5rem 0;flex-shrink:0}.app-header h1{color:var(--text-color, #ffffff);text-shadow:var(--text-shadow, 0 2px 4px rgba(0, 0, 0, .3));margin:0;font-size:2rem;font-weight:700}.app-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;flex:1;padding:0 1rem;min-height:0}.clock-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0000001a;border-radius:20px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0003;flex-shrink:0;gap:1rem}.app-main{padding:0 .5rem;gap:.75rem}.clock-container{width:100%;max-width:100%;padding:1rem;margin:0}.app-header h1{font-size:1.5rem}@media (min-width: 768px){.app-main{padding:0 1rem;gap:1rem}.clock-container{flex-direction:row;gap:0;padding:1.5rem;width:auto}.app-header h1{font-size:2rem}}@media (min-width: 1024px){.app-main{padding:0 1rem}}@media (max-width: 767px) and (orientation: landscape){.app{transition:all .3s ease}.app-header{padding:.25rem 0}.app-header h1{font-size:1.25rem;margin:0}.app-main{padding:0 1rem;gap:.5rem;flex-direction:row;align-items:center;justify-content:center}.clock-container{flex-direction:row;padding:1rem;margin:0;flex-shrink:0;max-width:none;width:auto}.mode-selector-container{margin-top:0;margin-left:1rem;flex-direction:column;gap:1rem}}@media (max-width: 767px){.app,.app-main,.clock-container,.mode-selector-container{transition:all .3s ease}}.flip-card,.flip-card *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.flip-card{display:inline-block;margin:0 6px;contain:layout style paint}.flip-card-inner{position:relative;width:20vw;height:18vw;max-width:350px;max-height:315px;min-width:160px;min-height:135px;border-radius:12px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;overflow:hidden;border:1px solid rgba(255,255,255,.1);contain:paint}.flip-card-top{position:absolute;top:0;left:0;width:100%;height:50%;overflow:hidden;z-index:1;border-top-left-radius:12px;border-top-right-radius:12px}.flip-card-bottom{position:absolute;bottom:0;left:0;width:100%;height:50%;overflow:hidden;z-index:1;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.flip-card-divider{position:absolute;top:50%;left:0;right:0;height:2px;z-index:30;transform:translateY(-50%);pointer-events:none}.flip-card-top .digit{position:absolute;top:100%;left:50%;transform:translate(-50%,-50%) translateZ(0);font-family:var( --clock-font-family, "Impact", "Arial Black", Arial, sans-serif );font-size:12vw;font-weight:900;line-height:.8;letter-spacing:.05em;font-stretch:condensed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.flip-card-bottom .digit{position:absolute;top:0%;left:50%;transform:translate(-50%,-50%) translateZ(0);font-family:var( --clock-font-family, "Impact", "Arial Black", Arial, sans-serif );font-size:12vw;font-weight:900;line-height:.8;letter-spacing:.05em;font-stretch:condensed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.flip-animation{position:absolute;top:0;left:0;width:100%;height:50%;z-index:22;transform-origin:bottom;transform-style:preserve-3d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.flip-animation-front{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;backface-visibility:hidden;z-index:23;transform:translateZ(0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-top-left-radius:12px;border-top-right-radius:12px}.flip-animation-front .digit{position:absolute;top:100%;left:50%;transform:translate(-50%,-50%) translateZ(0);font-family:var( --clock-font-family, "Impact", "Arial Black", Arial, sans-serif );font-size:12vw;font-weight:900;line-height:.8;letter-spacing:.05em;font-stretch:condensed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.flip-animation-back{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;backface-visibility:hidden;transform:rotateX(180deg) translateZ(0);z-index:23;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.flip-animation-back .digit{position:absolute;top:0%;left:50%;transform:translate(-50%,-50%) translateZ(0);font-family:var( --clock-font-family, "Impact", "Arial Black", Arial, sans-serif );font-size:12vw;font-weight:900;line-height:.8;letter-spacing:.05em;font-stretch:condensed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}@keyframes flipDown{0%{transform:rotateX(0) translateZ(0)}to{transform:rotateX(-180deg) translateZ(0)}}.flip-card.flipping .flip-card-inner{perspective:1000px}.flip-card.flipping .flip-animation{animation:flipDown .6s ease-in-out forwards;box-shadow:0 1px 4px #0003;will-change:transform;transform:translateZ(0)}.flip-card.flipping .flip-card-top{visibility:visible;z-index:1}.flip-card.mini .flip-card-inner{width:4vw;height:2.4vw;max-width:70px;max-height:42px;min-width:40px;min-height:24px;border-radius:6px;box-shadow:none}.flip-card.mini .flip-card-top .digit,.flip-card.mini .flip-animation-front .digit{font-size:2.4vw;letter-spacing:.02em;line-height:.8;top:100%;transform:translate(-50%,-50%) translateZ(0)}.flip-card.mini .flip-card-bottom .digit,.flip-card.mini .flip-animation-back .digit{font-size:2.4vw;letter-spacing:.02em;line-height:.8;top:0%;transform:translate(-50%,-50%) translateZ(0)}.flip-card.mini .flip-card-divider{display:none}.flip-card.mini.flipping .flip-animation{box-shadow:none}@media (max-width: 767px){.flip-card-top .digit,.flip-card-bottom .digit,.flip-animation-front .digit,.flip-animation-back .digit{font-size:clamp(3rem,15vw,8rem)}.flip-card.mini .flip-card-top .digit,.flip-card.mini .flip-card-bottom .digit,.flip-card.mini .flip-animation-front .digit,.flip-card.mini .flip-animation-back .digit{font-size:clamp(1rem,4vw,2rem)}}@media (max-width: 767px) and (orientation: portrait){.flip-card-top .digit,.flip-card-bottom .digit,.flip-animation-front .digit,.flip-animation-back .digit{font-size:clamp(3.5rem,18vw,9rem)}}.pomodoro-session-header{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:400px}.session-type{display:block;font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:color .3s ease}.session-type{color:#fff!important;padding:.3rem .8rem;border-radius:6px;text-shadow:0 1px 3px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.session-type.focus{background:#ef4444e6}.session-type.shortBreak,.session-type.longBreak{background:#3b82f6e6}.flip-clock.pomodoro-mode .pomodoro-session-header{top:20px}@media (max-width: 768px){.pomodoro-session-header{top:-30px;max-width:350px}.session-type{font-size:1.1rem}}@media (max-width: 480px){.pomodoro-session-header{top:-25px;max-width:300px}.session-type{font-size:1rem}}.session-progress{display:flex;justify-content:center;align-items:center;padding:.5rem 0}.session-indicators{display:flex;gap:.75rem;align-items:center}.session-indicator{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.session-dot{width:12px;height:12px;border-radius:50%;background:#0006;border:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.session-indicator.completed .session-dot{background:#22c55e;box-shadow:0 0 8px #22c55e66}.session-indicator.current:not(.active) .session-dot{background:#3b82f6;transform:scale(1.1)}.progress-bar{width:60px;height:12px;background:#0000004d;border:none;border-radius:6px;overflow:hidden;position:relative;animation:expandToBar .6s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 8px #0003}.progress-fill{height:100%;border-radius:6px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill.focus{background:linear-gradient(90deg,#22c55ecc,#22c55e);box-shadow:0 0 8px #22c55e4d}.progress-fill.shortBreak,.progress-fill.longBreak{background:linear-gradient(90deg,#3b82f6cc,#3b82f6);box-shadow:0 0 8px #3b82f64d}@keyframes expandToBar{0%{width:12px;height:12px;border-radius:50%}30%{width:20px;height:12px;border-radius:6px}70%{width:45px;height:12px;border-radius:6px}to{width:60px;height:12px;border-radius:6px}}@media (max-width: 768px){.session-indicators{gap:.5rem}.progress-bar{width:50px;height:10px}.session-dot{width:10px;height:10px}}@media (max-width: 480px){.session-indicators{gap:.4rem}.progress-bar{width:40px;height:8px}.session-dot{width:8px;height:8px}}.pomodoro-session-indicator{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;max-width:400px;margin-top:.5rem}.flip-clock.pomodoro-mode .pomodoro-session-indicator{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);margin-top:0;z-index:10}.session-type-display{text-align:center}.session-type{display:block;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:color .3s ease;margin-bottom:.5rem}.session-type.focus{color:#ef4444e6}.session-type.shortBreak{color:#22c55ee6}.session-type.longBreak{color:#3b82f6e6}@media (max-width: 768px){.pomodoro-session-indicator{max-width:350px}.session-type{font-size:.8rem}}@media (max-width: 480px){.pomodoro-session-indicator{max-width:300px}.session-type{font-size:.75rem}}.flip-clock{position:relative;display:flex;justify-content:center;align-items:center;padding:2rem;min-height:calc(20vw + 6rem);max-height:calc(350px + 6rem)}.flip-clock.pomodoro-mode{overflow:visible}.time-display{display:flex;align-items:center;gap:1.5rem;min-height:20vw;max-height:350px;transition:width .4s ease-in-out}.minutes-group{position:relative}.seconds-overlay{position:absolute;bottom:8px;right:0;z-index:20}@keyframes flipLeft{0%{transform:rotateY(0) translateZ(0)}50%{transform:rotateY(-90deg) translateZ(0)}to{transform:rotateY(0) translateZ(0)}}@keyframes flipRight{0%{transform:rotateY(0) translateZ(0)}50%{transform:rotateY(90deg) translateZ(0)}to{transform:rotateY(0) translateZ(0)}}.flip-clock.flipping-left{animation:flipLeft .3s ease-in-out;will-change:transform}.flip-clock.flipping-right{animation:flipRight .3s ease-in-out;will-change:transform}.flip-clock.flipping-left,.flip-clock.flipping-right{transform-style:preserve-3d;transform:translateZ(0)}.pomodoro-task-input{width:100%;max-width:400px;display:flex;justify-content:center;margin:1.5rem 0 1rem}.flip-clock.pomodoro-mode .pomodoro-task-input{position:absolute;bottom:30px;left:50%;transform:translate(-50%);margin:0;z-index:10}.task-input-field{width:100%;max-width:350px;padding:.6rem 1rem;font-size:.9rem;border:2px solid rgba(0,0,0,.3);border-radius:8px;background:#0006;color:#fff;text-align:center;transition:all .2s ease;outline:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0003}.task-input-field::placeholder{color:#ffffffb3}.task-input-field:focus{border-color:#3b82f699;background:#00000080;box-shadow:0 4px 12px #0000004d,0 0 0 3px #3b82f633}.task-input-field:disabled{opacity:.6;cursor:not-allowed}.app.light-bg .task-input-field{border:2px solid rgba(0,0,0,.2);background:#fffc;color:#000000e6;box-shadow:0 4px 12px #0000001a}.app.light-bg .task-input-field::placeholder{color:#00000080}.app.light-bg .task-input-field:focus{border-color:#3b82f699;background:#ffffffe6;box-shadow:0 4px 12px #00000026,0 0 0 3px #3b82f633}@media (max-width: 767px) and (orientation: landscape){.flip-clock{padding:1rem;min-height:calc(15vw + 4rem);max-height:calc(250px + 4rem)}.time-display{gap:1rem;min-height:15vw;max-height:250px}.flip-clock.pomodoro-mode .pomodoro-task-input{bottom:15px;max-width:300px}.task-input-field{padding:.5rem .75rem;font-size:.8rem;max-width:280px}}@media (max-width: 767px) and (orientation: portrait){.time-display{flex-direction:column;gap:1rem;align-items:center;justify-content:center}.flip-clock{padding:1.5rem;min-height:calc(40vw + 4rem);max-height:calc(600px + 4rem)}.minutes-group{display:flex;flex-direction:column;align-items:center;gap:.5rem}.seconds-overlay{position:relative;bottom:auto;right:auto;margin-top:.5rem}.flip-clock.pomodoro-mode .pomodoro-task-input{bottom:20px}}@media (max-width: 767px){.flip-clock,.time-display,.task-input-field{transition:all .3s ease}}.mode-selector-container{margin-top:2rem;display:flex;align-items:center;justify-content:center;gap:1rem}@media (max-width: 767px){.mode-selector-container{gap:1.5rem}}.mode-selector{display:flex;justify-content:center;contain:layout style}.selector-background{position:relative;background:#2a2a2a;border-radius:12px;padding:4px;display:flex;box-shadow:inset 0 2px 4px #0000004d;transition:background-color .3s ease,box-shadow .3s ease}:root.light-bg .selector-background{background:#ffffffe6;box-shadow:inset 0 2px 4px #0000001a,0 2px 8px #0000001a}.selector-slider{position:absolute;top:4px;left:4px;width:calc(33.333% - 4px);height:calc(100% - 8px);background:#fff;border-radius:8px;transition:transform .3s ease;box-shadow:0 2px 8px #0003;will-change:transform;transform:translateZ(0)}.selector-slider.slider-left{transform:translate(0) translateZ(0)}.selector-slider.slider-center{transform:translate(100%) translateZ(0)}.selector-slider.slider-right{transform:translate(200%) translateZ(0)}.selector-option{position:relative;background:transparent;border:none;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:color .3s ease;z-index:1;min-width:80px;min-height:44px;outline:none;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:8px}.selector-option:focus{outline:none;box-shadow:none}.selector-option.active{color:#1a1a1a}.selector-option:not(.active){color:#fff;transition:color .3s ease}.selector-option:hover:not(.active){color:#ccc}:root.light-bg .selector-option:not(.active){color:#333}:root.light-bg .selector-option:hover:not(.active){color:#666}.timer-indicator{width:8px;height:8px;background:#0f8;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:1;transform:scale(1) translateZ(0)}50%{opacity:.5;transform:scale(1.2) translateZ(0)}to{opacity:1;transform:scale(1) translateZ(0)}}.customization-button{background:#2a2a2a;border:none;border-radius:12px;padding:12px;color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px #0000004d;outline:none;-webkit-tap-highlight-color:transparent;min-width:44px;min-height:44px}.customization-button:hover{background:#3a3a3a;transform:translateY(-1px);box-shadow:inset 0 2px 4px #0000004d,0 4px 8px #0003}@media (max-width: 767px){.customization-button:active{background:#4a4a4a;transform:scale(.95);transition:all .1s ease}.selector-option:active{background:transparent!important;transform:scale(.95);transition:all .1s ease}.selector-option:focus{background:transparent!important}.selector-option{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}}:root.light-bg .customization-button{background:#ffffffe6;color:#333;box-shadow:inset 0 2px 4px #0000001a,0 2px 8px #0000001a}:root.light-bg .customization-button:hover{background:#fff;box-shadow:inset 0 2px 4px #0000001a,0 4px 12px #00000026}.customization-button:active{transform:translateY(0);box-shadow:inset 0 2px 4px #0000004d}.customization-button svg{transition:transform .3s ease}.customization-button:hover svg{animation:brushWiggle .6s ease-in-out}@keyframes brushWiggle{0%,to{transform:rotate(0) translateZ(0)}25%{transform:rotate(-10deg) translateZ(0)}75%{transform:rotate(10deg) translateZ(0)}}.mode-icon{font-size:20px;transition:transform .2s ease}.mode-label{position:absolute;top:100%;left:50%;transform:translate(-50%);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;opacity:0;transition:opacity .2s ease,transform .2s ease,color .3s ease;pointer-events:none;white-space:nowrap;margin-top:4px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}:root.light-bg .mode-label{color:#000;text-shadow:0 1px 3px rgba(255,255,255,.8)}:root.dark-bg .mode-label{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}.selector-option:hover .mode-icon{transform:scale(1.1)}.selector-option.active .mode-icon{transform:scale(1.05)}.selector-option:hover .mode-label{opacity:1;transform:translate(-50%) translateY(2px)}.selector-option.active .mode-label{opacity:.7}@media (max-width: 480px){.selector-option{min-width:70px;padding:10px 16px}.mode-icon{font-size:18px}.mode-label{font-size:10px}}@media (max-width: 767px) and (orientation: landscape){.mode-selector-container{margin-top:0;flex-direction:column;gap:1rem;align-items:center;justify-content:center}.mode-selector{transform:scale(.9)}.selector-option{padding:8px 16px;min-width:60px;min-height:40px}.mode-icon{font-size:16px}.customization-button{padding:8px;min-width:40px;min-height:40px;transform:scale(.9)}.mode-label{font-size:9px;margin-top:2px}}@media (max-width: 767px){.mode-selector-container,.mode-selector,.selector-option,.customization-button{transition:all .3s ease}}.pomodoro-controls{position:static;display:flex;flex-direction:column;gap:1rem;align-items:center;padding:4px 0;width:100%}@media (min-width: 768px){.pomodoro-controls{position:absolute;right:-150px;top:50%;transform:translateY(-50%);width:auto}}@media (max-width: 767px){.pomodoro-controls{gap:1.5rem}}.play-stop-container{display:flex;flex-direction:row;gap:.5rem;position:relative;width:130px;height:60px;justify-content:flex-start}.bottom-controls{display:flex;flex-direction:row;gap:.5rem;width:130px;height:60px;justify-content:flex-start;margin-left:70px}.control-button{width:60px;height:60px;border:none;border-radius:12px;background:#2a2a2a;color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;min-width:60px;max-width:60px;min-height:60px;max-height:60px;flex-shrink:0;-webkit-tap-highlight-color:transparent}.control-button:hover:not(:disabled){background:#3a3a3a;transform:translateY(-1px)}@media (max-width: 767px){.control-button:active:not(:disabled){background:#4a4a4a;transform:scale(.95);transition:all .1s ease}}.control-button:disabled{opacity:.5;cursor:not-allowed;transform:none}@keyframes playToPause{0%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.8) rotate(90deg);opacity:.7}to{transform:scale(1) rotate(0);opacity:1}}@keyframes pauseToPlay{0%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.8) rotate(-90deg);opacity:.7}to{transform:scale(1) rotate(0);opacity:1}}.stop-button{background:#2a2a2a!important;animation:slideInRight .3s ease-out;position:absolute;right:-65px;z-index:1}.stop-button:hover:not(:disabled){background:#dc2626!important}.skip-button{background:#f59e0b}.skip-button:hover:not(:disabled){background:#d97706}.skip-button svg{width:20px;height:20px}@keyframes slideInRight{0%{opacity:0;transform:translate(-65px)}to{opacity:1;transform:translate(0)}}.pomodoro-controls .settings-button{width:60px!important;height:60px!important;padding:0!important;min-width:60px!important;max-width:60px!important;min-height:60px!important;max-height:60px!important;box-sizing:border-box!important;flex-shrink:0!important;background:#2a2a2a!important}.settings-button svg{width:22px;height:22px;transition:transform .3s ease}.settings-button:hover svg{transform:rotate(45deg)}.timer-controls{position:static;display:flex;flex-direction:row;gap:var(--mobile-space-lg);align-items:center;justify-content:center;padding:var(--mobile-space-xs) 0;width:100%;contain:layout}@media (max-width: 767px){.timer-controls{gap:var( --mobile-space-xl )}}@media (min-width: 768px){.timer-controls{position:absolute;right:-120px;top:50%;transform:translateY(-50%);flex-direction:column;width:auto;justify-content:flex-start}}.timer-controls .settings-button{width:60px!important;height:60px!important;padding:0!important;min-width:60px!important;max-width:60px!important;box-sizing:border-box!important;flex-shrink:0!important;background:var( --mobile-bg-secondary )!important;border-radius:var(--mobile-radius-lg)!important}@media (max-width: 767px){.timer-controls .settings-button{min-width:var(--touch-target-min)!important;min-height:var(--touch-target-min)!important}}.play-stop-container{display:flex;flex-direction:row;gap:var(--mobile-space-sm);position:relative;width:130px;height:60px;justify-content:center}@media (max-width: 767px){.play-stop-container{width:auto;flex:0 0 auto}}.control-button{width:60px;height:60px;border:none;border-radius:var(--mobile-radius-lg);background:var(--mobile-bg-secondary);color:var(--mobile-text-primary);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;min-width:var(--touch-target-min);min-height:var(--touch-target-min);-webkit-tap-highlight-color:transparent}.control-button:hover{background:var(--mobile-bg-tertiary);transform:translateY(-2px)}@media (max-width: 767px){.control-button:active{background:var(--mobile-bg-tertiary);transform:scale(.95);transition:all .1s ease}}.play-button{position:relative;z-index:2}.play-button svg{width:24px;height:24px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}.play-button.running svg{animation:playToPause .3s cubic-bezier(.4,0,.2,1) forwards}.play-button.paused svg,.play-button.stopped svg{animation:pauseToPlay .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes playToPause{0%{transform:scale(1) rotate(0) translateZ(0);opacity:1}50%{transform:scale(.8) rotate(90deg) translateZ(0);opacity:.7}to{transform:scale(1) rotate(0) translateZ(0);opacity:1}}@keyframes pauseToPlay{0%{transform:scale(1) rotate(0) translateZ(0);opacity:1}50%{transform:scale(.8) rotate(-90deg) translateZ(0);opacity:.7}to{transform:scale(1) rotate(0) translateZ(0);opacity:1}}.stop-button{background:#dc2626;animation:slideInRight .3s ease-out;position:absolute;right:-35px;z-index:1}@media (max-width: 767px){.stop-button{right:-35px}}.stop-button:hover{background:#b91c1c}.stop-button svg{width:20px;height:20px}@keyframes slideInRight{0%{opacity:0;transform:translate(-35px) translateZ(0)}to{opacity:1;transform:translate(0) translateZ(0)}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0) translateZ(0)}to{opacity:0;transform:translate(-35px) translateZ(0)}}.stop-button.exiting{animation:slideOutLeft .3s ease-in forwards}.timer-controls .settings-button:hover{background:var(--mobile-bg-tertiary)!important}.timer-controls .settings-button svg{width:22px;height:22px;transition:transform .3s ease}.timer-controls .settings-button:hover svg{transform:rotate(45deg)}@media (max-width: 767px) and (orientation: landscape){.timer-controls{position:absolute;right:-100px;top:50%;transform:translateY(-50%);flex-direction:column;gap:var(--mobile-space-md);width:auto;justify-content:center}.play-stop-container{width:60px;height:auto;flex-direction:column;gap:var(--mobile-space-sm)}.stop-button{position:relative;right:0;top:0}.control-button{width:50px;height:50px;min-width:var(--touch-target-min);min-height:var(--touch-target-min)}.timer-controls .settings-button{width:50px!important;height:50px!important;min-width:var(--touch-target-min)!important;min-height:var(--touch-target-min)!important}}@media (max-width: 767px){.timer-controls,.play-stop-container,.control-button{transition:all .3s ease}}.spectrum-color-picker{margin-bottom:1.5rem}.spectrum-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.spectrum-header h4{margin:0;font-size:1rem;font-weight:600;color:var(--text-color, #333)}.spectrum-grid-container{background:var(--panel-bg, #fff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:0;box-shadow:0 8px 25px #0000001a;overflow:hidden}.spectrum-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:0;border-radius:8px;overflow:visible;width:100%}.spectrum-row{display:contents}.spectrum-color{width:100%;height:40px;border:none;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;border-radius:0;aspect-ratio:1}.spectrum-color:hover{transform:scale(1.1);z-index:10;border-radius:4px;box-shadow:0 4px 12px #00000040}.spectrum-color.selected{transform:scale(1.15);z-index:15;border-radius:4px;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent-color, #3b82f6)}.spectrum-color:focus{outline:2px solid var(--accent-color, #3b82f6);outline-offset:2px}@media (max-width: 768px){.spectrum-color{height:35px}}@media (prefers-reduced-motion: reduce){.spectrum-color{transition:none}.spectrum-color:hover{transform:none}}.gradient-picker{margin-bottom:1.5rem}.gradient-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.gradient-header h4{margin:0;font-size:1rem;font-weight:600;color:var(--text-color, #333)}.gradient-grid-container{background:var(--panel-bg, #fff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:0;box-shadow:0 8px 25px #0000001a;overflow:hidden}.gradient-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%}@media (max-width: 767px){.gradient-grid{gap:2px}.gradient-square:active{transform:scale(.95);transition:all .1s ease}}.gradient-square{width:100%;height:60px;border:none;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;border-radius:0;aspect-ratio:2;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent}.gradient-square:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0000000d;opacity:0;transition:opacity .15s ease;pointer-events:none}.gradient-square:hover{transform:scale(1.05);z-index:10;border-radius:4px;box-shadow:0 4px 12px #00000040}.gradient-square:hover:before{opacity:1}.gradient-square.selected{transform:scale(1.08);z-index:15;border-radius:4px;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent-color, #3b82f6)}.gradient-square.selected:before{opacity:0}.gradient-square:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid rgba(255,255,255,.1);pointer-events:none}.gradient-square:focus{outline:2px solid var(--accent-color, #3b82f6);outline-offset:2px}@media (max-width: 768px){.gradient-square{height:50px}}@media (prefers-reduced-motion: reduce){.gradient-square{transition:none}.gradient-square:hover{transform:none}}.image-picker{margin-bottom:1.5rem}.image-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.image-header h4{margin:0;font-size:1rem;font-weight:600;color:var(--text-color, #333)}.image-grid-container{background:var(--panel-bg, #fff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:0;box-shadow:0 8px 25px #0000001a;overflow:hidden}.image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%;contain:layout style paint}.image-square{content-visibility:auto;contain-intrinsic-size:100px 60px}.image-square{width:100%;height:60px;border:none;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;border-radius:0;overflow:hidden;aspect-ratio:2}.image-background{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;background-repeat:no-repeat;will-change:background-image;transform:translateZ(0);backface-visibility:hidden;background-color:#f0f0f0;transition:opacity .3s ease}.image-background.loading{opacity:.5;background-image:none!important}.image-background.error{background:linear-gradient(135deg,#f0f0f0,#e0e0e0);opacity:.7}.image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:1;transition:all .15s ease}.image-icon{color:#fff;font-size:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.image-square:hover{transform:scale(1.05);z-index:10;border-radius:4px;box-shadow:0 4px 12px #00000040}.image-square:hover .image-overlay{background:#0003}.image-square:hover .image-icon{transform:scale(1.1)}.image-square.selected{transform:scale(1.08);z-index:15;border-radius:4px;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent-color, #3b82f6)}.image-square.selected .image-overlay{background:#3b82f64d}.image-square.selected .image-icon{color:#fff;transform:scale(1.2)}.image-square .image-background:not([style*=background-image]){background:linear-gradient(135deg,#f0f0f0,#e0e0e0)}.image-square .image-background:not([style*=background-image])+.image-overlay{background:#0000001a}.image-square .image-background:not([style*=background-image])+.image-overlay .image-icon{color:#999}.image-square:focus{outline:2px solid var(--accent-color, #3b82f6);outline-offset:2px}.image-background{image-rendering:optimizeQuality;transform:translateZ(0);will-change:background-image}.image-background:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#f0f0f0,#e0e0e0);z-index:-1}.image-background{background-color:#f0f0f0;transition:opacity .3s ease}@media (max-width: 768px){.image-square{height:50px}.image-icon{font-size:16px}.image-background{background-size:cover;image-rendering:optimizeSpeed;filter:contrast(.9) brightness(1.1)}.image-square:hover{transform:none;box-shadow:none}.image-square:hover .image-overlay{background:#0006}.image-square:hover .image-icon{transform:none}}@media (prefers-reduced-motion: reduce){.image-square,.image-overlay,.image-icon{transition:none}.image-square:hover{transform:none}}.background-selector{margin-bottom:1.5rem}.background-selector h3{margin:0 0 1.5rem;font-size:1.2rem;font-weight:600;color:var(--text-color, #333)}.background-category{margin-bottom:2rem}.background-category:last-child{margin-bottom:0}.category-title{margin:0 0 1rem;font-size:1rem;font-weight:500;color:var(--text-muted, #666);text-transform:uppercase;letter-spacing:.5px}.background-options{display:grid;gap:.5rem}@media (max-width: 767px){.background-options{gap:.75rem}.background-option:active{transform:scale(.95);transition:all .1s ease}}.background-category:has(.background-option:first-child[title*=Default]) .background-options,.background-category:has(.background-option:first-child[title*=White]) .background-options{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.background-category:has(.category-title:contains("Gradients")) .background-options,.background-category .background-options:has(.background-option[title*=Sunset]){grid-template-columns:repeat(3,1fr);max-width:360px;margin:0 auto}.background-category:has(.category-title:contains("Images")) .background-options{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.background-option{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;border:2px solid transparent;border-radius:8px;background:var(--panel-bg, #fff);cursor:pointer;transition:all .2s ease;min-height:70px;min-width:44px;-webkit-tap-highlight-color:transparent}.background-category:has(.background-option:first-child[title*=Default]) .background-option,.background-category:has(.background-option:first-child[title*=White]) .background-option{min-height:60px;padding:.4rem}.background-option:hover{border-color:var(--accent-color, #007bff);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.background-option.selected{border-color:var(--accent-color, #007bff);background:var(--accent-bg, rgba(0, 123, 255, .1))}.background-thumbnail{width:40px;height:40px;border-radius:6px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.background-category:has(.background-option:first-child[title*=Default]) .background-thumbnail,.background-category:has(.background-option:first-child[title*=White]) .background-thumbnail{width:32px;height:32px}.background-name{font-size:.85rem;font-weight:500;text-align:center;color:var(--text-color, #333);line-height:1.2}.gradients-grid{grid-template-columns:repeat(3,1fr)!important;max-width:360px!important;margin:0 auto!important;gap:8px!important}.images-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important}@media (max-width: 768px){.background-options{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.5rem}.gradients-grid{grid-template-columns:repeat(3,1fr)!important;max-width:300px!important;gap:6px!important}.background-option{padding:.5rem;min-height:70px}.background-thumbnail{width:32px;height:32px}.background-name{font-size:.8rem}}.font-selector{margin-bottom:1.5rem}.font-selector h3{margin:0 0 1rem;color:var(--text-color, #333);font-size:1rem;font-weight:600}.font-options{background:var(--panel-bg, #fff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:0;box-shadow:0 8px 25px #0000001a;overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:480px;margin:0 auto}.font-option{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 8px;border:none;background:transparent;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);color:var(--text-color, #333);height:80px;position:relative;border-radius:0;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent}.font-option:hover{transform:scale(1.05);z-index:10;border-radius:4px;box-shadow:0 4px 12px #00000026;background:var(--hover-bg, #f8f9fa)}.font-option.selected{transform:scale(1.08);z-index:15;border-radius:4px;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent-color, #3b82f6);background:var(--accent-bg, rgba(59, 130, 246, .05))}.font-name{font-size:.8rem;font-weight:500;margin-bottom:4px;opacity:.8;text-align:center;line-height:1.2}.font-sample{font-size:1.3rem;font-weight:600;opacity:1;line-height:1}.font-option:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(0,0,0,.05);pointer-events:none}.font-option:focus{outline:2px solid var(--accent-color, #3b82f6);outline-offset:2px}@media (max-width: 767px){.font-option:active{transform:scale(.95);transition:all .1s ease}}@media (max-width: 768px){.font-options{max-width:360px;gap:2px}.font-option{padding:12px 6px;height:70px}.font-name{font-size:.75rem}.font-sample{font-size:1.1rem}}@media (prefers-reduced-motion: reduce){.font-option{transition:none}.font-option:hover{transform:none}}.color-selector{margin-bottom:1.5rem}.color-selector h3{margin:0 0 .5rem;font-size:1.2rem;font-weight:600;color:var(--text-color, #333)}.color-description{margin:0 0 2rem;font-size:.9rem;color:var(--text-muted, #666);line-height:1.4}.clock-preview{margin-bottom:2rem}.clock-preview h3{margin:0 0 1rem;color:var(--text-color, #333);font-size:1.1rem;font-weight:600}.preview-container{width:100%;height:140px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 4px 12px #00000026;border:2px solid rgba(255,255,255,.1);background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}.preview-clock{display:flex;align-items:center;justify-content:center;background:#0000001a;border-radius:8px;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #0003}.preview-card-group{display:flex;align-items:center;gap:.5rem}.preview-card{border-radius:6px;padding:0;font-size:2.2rem;font-weight:900;width:55px;height:55px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000004d,inset 0 1px #ffffff1a;line-height:1;letter-spacing:.02em;aspect-ratio:1}.preview-separator{font-size:2.2rem;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);margin:0 .25rem}@media (max-width: 768px){.preview-container{height:120px}.preview-card{font-size:1.8rem;padding:0;width:45px;height:45px}.preview-separator{font-size:1.8rem}.preview-clock{padding:.8rem}}.preview-card{transition:all .3s ease}.preview-container{transition:background .3s ease}.preview-signature{position:absolute;bottom:8px;left:12px;font-size:1rem;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.5);font-weight:600;letter-spacing:.5px}.customization-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.customization-panel{background:var(--panel-bg, #ffffff);border-radius:16px;box-shadow:0 20px 40px #0000004d;width:100%;max-width:900px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;contain:layout style}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--border-color, #eee);background:var(--header-bg, #f8f9fa)}.panel-header h2{margin:0;font-size:1.5rem;font-weight:600;color:var(--text-color, #333)}.close-button{background:none;border:none;font-size:1.2rem;color:var(--text-color, #666);cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.close-button:hover{background:var(--hover-bg, #e9ecef);color:var(--text-color, #333)}.panel-tabs{display:flex;border-bottom:1px solid var(--border-color, #eee);background:var(--tabs-bg, #ffffff);padding:0 1rem;gap:.5rem}.tab-button{padding:.75rem 1.5rem;border:none;background:none;color:var(--text-muted, #666);font-weight:500;cursor:pointer;transition:all .2s ease;border-radius:8px 8px 0 0;position:relative;margin-bottom:-1px}.tab-button:hover:not(:disabled){background:var(--hover-bg, #f8f9fa);color:var(--text-color, #333)}.tab-button.active{color:var(--accent-color, #007bff);background:var(--active-bg, #ffffff);border:1px solid var(--border-color, #eee);border-bottom:1px solid var(--active-bg, #ffffff);font-weight:600}.tab-button:disabled{opacity:.4;cursor:not-allowed;color:var(--text-muted, #999)}.panel-content{flex:1;overflow-y:auto;padding:2rem}.content-layout{display:grid;grid-template-columns:1fr 300px;gap:2rem;height:100%}.options-section{min-width:0}.preview-section{position:sticky;top:0;height:fit-content}.tab-content{animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px) translateZ(0)}to{opacity:1;transform:translateY(0) translateZ(0)}}.panel-actions{padding:1.5rem 2rem;border-top:1px solid var(--border-color, #eee);background:var(--footer-bg, #f8f9fa);display:flex;justify-content:space-between;align-items:center;gap:1rem}.action-button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:80px}.action-button.primary{background:var(--accent-color, #007bff);color:#fff}.action-button.primary:hover{background:var(--accent-hover, #0056b3)}.action-button.secondary{background:var(--secondary-bg, #6c757d);color:#fff}.action-button.secondary:hover{background:var(--secondary-hover, #545b62)}.panel-signature{font-size:1rem;color:var(--text-muted, #666);font-weight:500;letter-spacing:.5px}.app.dark-bg .customization-panel{--panel-bg: #2a2a2a;--header-bg: #1a1a1a;--tabs-bg: #2a2a2a;--footer-bg: #1a1a1a;--text-color: #ffffff;--text-muted: #aaa;--border-color: #444;--hover-bg: #3a3a3a;--active-bg: #2a2a2a}@media (max-width: 768px){.customization-overlay{padding:.25rem}.customization-panel{max-height:95vh;max-width:none;width:100%;margin:0;border-radius:12px}.panel-header{padding:.75rem 1rem}.panel-header h2{font-size:1.125rem}.panel-tabs{padding:0 .5rem;gap:.25rem}.tab-button{padding:.625rem .75rem;font-size:.875rem;min-height:44px}.panel-content{padding:1rem}.panel-actions{padding:.75rem 1rem;flex-direction:column-reverse;gap:.75rem}.content-layout{grid-template-columns:1fr;gap:1rem}.preview-section{order:-1}.panel-signature{font-size:.875rem;text-align:center}.action-button{width:100%;min-height:44px}}@media (max-width: 480px){.customization-overlay{padding:0}.customization-panel{max-height:100vh;height:100vh;border-radius:0;max-width:none}.panel-header{padding:.5rem .75rem}.panel-header h2{font-size:1rem}.panel-tabs{padding:0 .25rem}.tab-button{padding:.5rem;font-size:.8125rem;flex:1}.panel-content{padding:.75rem}.panel-actions{padding:.5rem .75rem}.content-layout{gap:.75rem}}@media (max-width: 767px) and (orientation: landscape){.customization-overlay{padding:.5rem}.customization-panel{max-height:90vh;max-width:95vw;width:100%}.panel-header{padding:.5rem 1rem}.panel-header h2{font-size:1rem}.panel-tabs{padding:0 .5rem}.tab-button{padding:.5rem 1rem;font-size:.8rem;min-height:36px}.panel-content{padding:.75rem}.content-layout{grid-template-columns:1fr 250px;gap:1rem}.preview-section{order:0}.panel-actions{padding:.5rem 1rem;flex-direction:row}.action-button{width:auto;min-width:80px;min-height:36px;padding:.5rem 1rem}}@media (max-width: 767px){.customization-panel,.panel-header,.panel-content,.content-layout{transition:all .3s ease}}.time-input{display:flex;flex-direction:column;align-items:center;gap:.5rem}.time-input-label{font-size:.875rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.05em}.time-input-field{width:60px;height:50px;background:#1a1a1a;border:2px solid #3a3a3a;border-radius:8px;color:#fff;font-size:1.5rem;font-weight:700;text-align:center;font-family:Impact,Arial Black,Arial,sans-serif;transition:all .2s ease;outline:none;-webkit-tap-highlight-color:transparent}.time-input-field:focus{border-color:#646cff;box-shadow:0 0 0 3px #646cff1a}.time-input-field:hover{border-color:#4a4a4a}.time-input-field::placeholder{color:#666}@media (max-width: 767px){.time-input{gap:.75rem}.time-input-label{font-size:1rem}.time-input-field{width:70px;height:56px;font-size:1.75rem;border-width:3px}.time-input-field:focus{border-color:#646cff;box-shadow:0 0 0 4px #646cff26}.time-input-field:active{transform:scale(.98);transition:transform .1s ease}}@media (min-width: 768px) and (max-width: 1023px){.time-input-field{width:65px;height:52px;font-size:1.6rem}}.timer-settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.timer-settings-modal{background:#2a2a2a;border-radius:16px;padding:2rem;box-shadow:0 20px 40px #00000080;border:1px solid #3a3a3a;min-width:400px;max-width:90vw;animation:modalSlideIn .3s ease-out}.timer-settings-header{text-align:center;margin-bottom:1.5rem}.timer-settings-header h2{color:#fff;font-size:1.5rem;font-weight:700;margin:0}.timer-settings-content{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem}.time-inputs{display:flex;align-items:center;gap:1rem}.time-separator{color:#fff;font-size:2rem;font-weight:700;font-family:Impact,Arial Black,Arial,sans-serif;margin:0 .5rem}.timer-settings-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}@media (max-width: 767px){.timer-settings-overlay{padding:.5rem;align-items:flex-end}.timer-settings-modal{min-width:auto;width:100%;max-width:none;margin:0;padding:1.5rem;border-radius:16px 16px 0 0;animation:modalSlideUp .3s ease-out}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.timer-settings-header h2{font-size:1.25rem}.timer-settings-content{margin-bottom:1.5rem}.time-inputs{gap:1.5rem;flex-wrap:wrap;justify-content:center}.time-separator{font-size:1.5rem;margin:0 .25rem}.timer-settings-actions{gap:1rem;flex-direction:column}.settings-button{width:100%;padding:1rem 2rem;font-size:1.1rem;min-height:48px}.settings-button:active{transform:scale(.95);transition:all .1s ease}}@media (min-width: 768px) and (max-width: 1023px){.timer-settings-modal{min-width:350px;max-width:500px}}.settings-button{padding:.75rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:100px;min-height:44px;-webkit-tap-highlight-color:transparent}.save-button:hover{background:#16a34a;transform:translateY(-1px)}.settings-button:active{transform:translateY(0)}@media (max-width: 767px) and (orientation: landscape){.timer-settings-overlay{align-items:center;padding:1rem}.timer-settings-modal{border-radius:16px;animation:modalSlideIn .3s ease-out;max-height:80vh;overflow-y:auto;padding:1rem 1.5rem}.timer-settings-header{margin-bottom:1rem}.timer-settings-header h2{font-size:1.125rem}.timer-settings-content{margin-bottom:1rem}.time-inputs{gap:1rem;flex-wrap:nowrap}.time-separator{font-size:1.25rem}.timer-settings-actions{flex-direction:row;gap:1rem;margin-top:1rem}.settings-button{width:auto;min-width:100px;padding:.75rem 1.5rem;font-size:.9rem;min-height:40px}}@media (max-width: 767px){.timer-settings-modal,.timer-settings-content,.timer-settings-actions{transition:all .3s ease}}.pomodoro-settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.pomodoro-settings-modal{background:#2a2a2a;border-radius:16px;padding:2rem;box-shadow:0 20px 40px #00000080;border:1px solid #3a3a3a;min-width:500px;max-width:90vw;max-height:90vh;overflow-y:auto;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.pomodoro-settings-header{text-align:center;margin-bottom:1.5rem}.pomodoro-settings-header h2{color:#fff;font-size:1.5rem;font-weight:700;margin:0}.pomodoro-settings-content{display:flex;flex-direction:column;gap:1.5rem}.settings-section{display:flex;flex-direction:column;gap:.75rem}.settings-section h3{color:#fff;font-size:1.1rem;font-weight:600;margin:0;border-bottom:1px solid #3a3a3a;padding-bottom:.5rem}.preset-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.preset-button{padding:.5rem 1rem;border:2px solid #3a3a3a;border-radius:8px;background:#1a1a1a;color:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:80px;min-height:44px;-webkit-tap-highlight-color:transparent}.preset-button:hover{border-color:#4a4a4a;background:#2a2a2a}.preset-button.active{border-color:#22c55e;background:#22c55e;color:#fff}.duration-inputs{display:flex;flex-direction:column;gap:1rem}.duration-input-group{display:flex;flex-direction:column;gap:.25rem}.duration-input-group label{color:#ccc;font-size:.9rem;font-weight:500}.duration-input-group input{padding:.5rem;border:2px solid #3a3a3a;border-radius:6px;background:#1a1a1a;color:#fff;font-size:1rem;width:100px;transition:border-color .2s ease}.duration-input-group input:focus{outline:none;border-color:#22c55e}.duration-input-group input.error{border-color:#ef4444}.error-message{color:#ef4444;font-size:.8rem;margin-top:.25rem}.toggle-group{display:flex;align-items:center;gap:.75rem}.toggle-label{color:#fff;font-size:1rem;font-weight:500;cursor:pointer}.toggle-checkbox{width:18px;height:18px;accent-color:#22c55e;cursor:pointer}.toggle-description{color:#999;font-size:.85rem;margin:0;margin-top:.25rem}.pomodoro-settings-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem;padding-top:1rem;border-top:1px solid #3a3a3a}.settings-button{padding:.75rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:120px;min-height:44px;-webkit-tap-highlight-color:transparent}.cancel-button{background:#3a3a3a;color:#fff}.cancel-button:hover{background:#4a4a4a}.save-button{background:#22c55e;color:#fff}.save-button:hover:not(:disabled){background:#16a34a;transform:translateY(-1px)}.save-button:disabled{background:#666;cursor:not-allowed;opacity:.6}.settings-button:active:not(:disabled){transform:translateY(0)}@media (max-width: 767px){.pomodoro-settings-overlay{padding:.5rem;align-items:flex-end}.pomodoro-settings-modal{min-width:auto;width:100%;max-width:none;margin:0;padding:1.5rem;border-radius:16px 16px 0 0;max-height:85vh;animation:modalSlideUp .3s ease-out}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.pomodoro-settings-header h2{font-size:1.25rem}.pomodoro-settings-content{gap:2rem}.settings-section{gap:1rem}.settings-section h3{font-size:1rem;padding-bottom:.75rem}.preset-buttons{gap:.75rem;justify-content:center}.preset-button{padding:.75rem 1.25rem;font-size:1rem;min-width:90px;min-height:48px}.preset-button:active{transform:scale(.95);transition:all .1s ease}.duration-inputs{gap:1.5rem}.duration-input-group{gap:.5rem}.duration-input-group label{font-size:1rem;font-weight:600}.duration-input-group input{padding:.75rem;font-size:1.1rem;width:120px;min-height:48px;border-width:3px}.duration-input-group input:focus{border-color:#22c55e;box-shadow:0 0 0 4px #22c55e26}.duration-input-group input:active{transform:scale(.98);transition:transform .1s ease}.error-message{font-size:.9rem}.toggle-group{gap:1rem;padding:.5rem 0}.toggle-label{font-size:1.1rem}.toggle-checkbox{width:24px;height:24px;min-width:44px;min-height:44px;padding:10px}.toggle-description{font-size:.95rem;margin-top:.5rem}.pomodoro-settings-actions{gap:1rem;flex-direction:column;margin-top:2.5rem;padding-top:1.5rem}.settings-button{width:100%;padding:1rem 2rem;font-size:1.1rem;min-height:48px}.settings-button:active:not(:disabled){transform:scale(.95);transition:all .1s ease}}@media (min-width: 768px) and (max-width: 1023px){.pomodoro-settings-modal{min-width:450px;max-width:600px;margin:2rem}.preset-buttons{gap:.75rem}.duration-input-group input{width:110px}}@media (max-width: 480px){.pomodoro-settings-modal{padding:1rem}.preset-buttons{flex-direction:column;align-items:stretch}.preset-button{width:100%;min-width:auto}.duration-input-group input{width:100%}}@media (max-width: 767px) and (orientation: landscape){.pomodoro-settings-overlay{align-items:center;padding:1rem}.pomodoro-settings-modal{border-radius:16px;animation:modalSlideIn .3s ease-out;max-height:85vh;overflow-y:auto;padding:1rem 1.5rem;max-width:90vw}.pomodoro-settings-header{margin-bottom:1rem}.pomodoro-settings-header h2{font-size:1.125rem}.settings-section{margin-bottom:1rem}.settings-section h3{font-size:1rem;margin-bottom:.75rem}.time-inputs{gap:.75rem;flex-wrap:nowrap}.time-separator{font-size:1.125rem}.pomodoro-settings-actions{flex-direction:row;gap:1rem;margin-top:1rem}.settings-button{width:auto;min-width:100px;padding:.75rem 1.5rem;font-size:.9rem;min-height:40px}}@media (max-width: 767px){.pomodoro-settings-modal,.settings-section,.pomodoro-settings-actions{transition:all .3s ease}}.coffee-button{position:fixed;bottom:30px;right:30px;z-index:1000;display:flex;align-items:center;gap:8px;background:#ffffffe6;color:#333;border:1px solid rgba(0,0,0,.1);border-radius:25px;padding:10px 16px;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0000001a;pointer-events:auto}.coffee-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026;background:#fff}.coffee-button:active{transform:translateY(0);transition:transform .1s ease}.coffee-icon{font-size:16px;transition:transform .3s ease}.coffee-button:hover .coffee-icon{transform:rotate(15deg) scale(1.1)}.coffee-text{font-family:inherit;white-space:nowrap}:root.dark-bg .coffee-button{background:#000c;color:#fff;border:1px solid rgba(255,255,255,.2)}:root.dark-bg .coffee-button:hover{background:#000000e6;box-shadow:0 6px 20px #0000004d}:root.light-bg .coffee-button{background:#fffffff2;color:#333;border:1px solid rgba(0,0,0,.15)}:root.light-bg .coffee-button:hover{background:#fff;box-shadow:0 6px 20px #0003}@media (max-width: 768px){.coffee-button{bottom:20px;right:20px;padding:8px 14px;font-size:13px}.coffee-icon{font-size:14px}}@media (max-width: 480px){.coffee-text{display:none}.coffee-button{padding:10px;border-radius:50%;width:44px;height:44px;justify-content:center}}@media (prefers-reduced-motion: reduce){.coffee-button,.coffee-icon{transition:none}.coffee-button:hover,.coffee-button:hover .coffee-icon{transform:none}}.coffee-button:focus{outline:2px solid #ff813f;outline-offset:2px}.customization-overlay~* .coffee-button,.modal-overlay~* .coffee-button{z-index:999}