:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:#000;overflow:hidden}#root{width:100%}.flip-card{position:relative;display:inline-block;width:200px;height:300px;background-color:var(--card-bg, #1a1a1a);border-radius:18px;font-size:240px;line-height:300px;text-align:center;color:var(--card-text, #d4d4d4);font-family:Oswald,Helvetica Neue,sans-serif;font-weight:700;perspective:600px;overflow:hidden;box-shadow:var(--card-shadow, 0 10px 30px rgba(0, 0, 0, .8));transition:background-color .5s ease,color .5s ease,box-shadow .5s ease}.flip-card.small-card{width:100px;height:150px;font-size:120px;line-height:150px;border-radius:10px}.flip-card-placeholder{width:200px;height:300px;display:inline-block;visibility:hidden}.top,.bottom,.top-flip,.bottom-flip{position:absolute;left:0;width:100%;height:50%;overflow:hidden;background-color:var(--card-bg, #1a1a1a);box-sizing:border-box;transition:background-color .5s ease}.top,.top-flip{top:0;border-top-left-radius:18px;border-top-right-radius:18px}.small-card .top,.small-card .top-flip{border-top-left-radius:10px;border-top-right-radius:10px}.bottom,.bottom-flip{bottom:0;border-bottom-left-radius:18px;border-bottom-right-radius:18px}.small-card .bottom,.small-card .bottom-flip{border-bottom-left-radius:10px;border-bottom-right-radius:10px}.top-text,.top-flip-text{display:block;line-height:300px}.bottom-text,.bottom-flip-text{display:block;line-height:300px;transform:translateY(-50%)}.small-card .top-text,.small-card .top-flip-text{line-height:150px}.small-card .bottom-text,.small-card .bottom-flip-text{line-height:150px;transform:translateY(-50%)}.top-flip,.bottom-flip{backface-visibility:hidden}.top-flip{z-index:2;transform-origin:bottom center}.bottom-flip{z-index:1;transform-origin:top center;transform:rotateX(90deg)}.animating .top-flip{animation:flipTop var(--flip-duration, .6s) ease-in forwards}.animating .bottom-flip{animation:flipBottom var(--flip-duration, .6s) ease-out var(--flip-delay, .3s) forwards}@keyframes flipTop{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flipBottom{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.flip-card:before{content:"";position:absolute;top:50%;left:0;width:100%;height:3px;background-color:#000;z-index:10;transform:translateY(-50%)}.clock-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:max-content;transform-origin:center center}.clock-main{display:flex;align-items:center;justify-content:center;gap:10px}.digit-group{display:flex;gap:8px;position:relative}.ampm-indicator{position:absolute;top:12%;left:8px;font-family:Oswald,sans-serif;color:var(--card-text, #d4d4d4);font-size:16px;font-weight:700;z-index:20;text-transform:uppercase}.seconds-group{display:flex;gap:4px;position:fixed;bottom:10px;right:10px;transform:scale(.5);transform-origin:bottom right}@media(max-width:479px){.clock-wrapper{transform:scale(.35)}.clock-main{gap:6px}.digit-group{gap:4px}.ampm-indicator{font-size:12px;left:4px}.seconds-group{bottom:6px;right:6px;gap:2px;transform:scale(.35)}}@media(min-width:480px)and (max-width:767px){.clock-wrapper{transform:scale(.45)}.clock-main{gap:10px}.digit-group{gap:6px}.ampm-indicator{font-size:18px;left:6px}.seconds-group{bottom:8px;right:8px;gap:3px;transform:scale(.38)}}@media(max-width:767px)and (orientation:landscape){.seconds-group{bottom:6px;right:6px;transform:scale(.3)}}@media(min-width:768px)and (max-width:1023px){.clock-wrapper{transform:scale(.55)}.clock-main{gap:15px}.digit-group{gap:10px}.ampm-indicator{font-size:24px;left:8px}.seconds-group{bottom:12px;right:12px;gap:4px;transform:scale(.42)}}@media(min-width:1024px)and (max-width:1439px){.clock-wrapper{transform:scale(.7)}.clock-main{gap:20px}.digit-group{gap:12px}.ampm-indicator{font-size:28px;left:10px}.seconds-group{bottom:15px;right:15px;gap:5px;transform:scale(.48)}}@media(min-width:1440px){.clock-wrapper{transform:scale(.9)}.clock-main{gap:30px}.digit-group{gap:15px}.ampm-indicator{font-size:32px;left:12px}.seconds-group{bottom:18px;right:18px;gap:6px;transform:scale(.5)}}@media(min-width:1920px){.clock-wrapper{transform:scale(1)}.seconds-group{bottom:20px;right:20px;transform:scale(.55)}}.mode-container{display:flex;flex-direction:column;align-items:center;gap:30px;padding:20px}.colon{color:var(--card-text, #d4d4d4);font-size:80px;font-family:Oswald,sans-serif;font-weight:700;opacity:.6;margin-top:-15px;-webkit-user-select:none;user-select:none}.colon.light{color:#333}.colon.blink{animation:blink .5s infinite}.stopwatch-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;max-width:100vw;overflow:visible}.stopwatch-display{display:flex;align-items:center;justify-content:center;gap:2px;transform:scale(.28);transform-origin:center center}.stopwatch-centiseconds{margin-top:-35px;margin-left:auto;padding-right:20%;font-family:Oswald,sans-serif;font-size:20px;font-weight:500;color:var(--card-text, #d4d4d4);opacity:.7;-webkit-user-select:none;user-select:none}.stopwatch-centiseconds.light{color:#333}.centiseconds-value{letter-spacing:-2px}.mode-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.mode-btn-control{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;padding:12px 24px;border-radius:8px;cursor:pointer;font-family:Oswald,sans-serif;font-size:14px;letter-spacing:1px;transition:all .2s;display:flex;align-items:center;gap:6px}.mode-btn-control:hover{opacity:.8}.mode-btn-control.light{background:#00000014;border:1px solid rgba(0,0,0,.2);color:#333}.mode-btn-control.primary{background:#64c8824d;border-color:#64c88280}.mode-btn-control.danger{background:#ff64644d;border-color:#ff646480}.mode-btn-control.warning{background:#ffb4644d;border-color:#ffb46480}.mode-btn-control.info{background:#64b4ff4d;border-color:#64b4ff80}.mode-btn-control:disabled{opacity:.5;cursor:not-allowed}.mode-btn-control svg{width:16px;height:16px}.timer-status{color:#ff6b6b;font-family:Oswald,sans-serif;font-size:20px;font-weight:700;letter-spacing:2px;animation:blink .5s infinite;margin-top:-10px}.timer-modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000;padding:20px}.timer-modal-overlay.open{opacity:1;visibility:visible}.timer-modal{background:#1e1e23f2;border-radius:20px;padding:28px 32px;transform:scale(.9) translateY(20px);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 25px 80px #0006;border:1px solid rgba(255,255,255,.1);max-width:100%;width:auto}.timer-modal-overlay.open .timer-modal{transform:scale(1) translateY(0)}.timer-modal.light{background:#fffffff2;border:1px solid rgba(0,0,0,.1)}.timer-modal-header{text-align:center;margin-bottom:20px}.timer-modal-header h3{margin:0;font-family:Oswald,sans-serif;font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#ffffff80}.timer-modal.light .timer-modal-header h3{color:#00000080}.timer-inputs{display:flex;align-items:center;gap:6px;margin-bottom:24px;justify-content:center}.timer-input-group{text-align:center}.timer-input{width:50px;height:44px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;font-size:22px;font-family:Oswald,sans-serif;text-align:center;outline:none;transition:all .2s}.timer-input:focus{border-color:#64b4ff80;background:#ffffff26}.timer-modal.light .timer-input{background:#0000000f;border:2px solid rgba(0,0,0,.15);color:#333}.timer-modal.light .timer-input:focus{border-color:#64b4ff80}.timer-input-label{margin-top:5px;font-size:9px;font-family:Oswald,sans-serif;letter-spacing:1px;color:#fff6;text-transform:uppercase}.timer-modal.light .timer-input-label{color:#0006}.timer-input-separator{font-size:28px;font-weight:700;color:#ffffff4d;margin-bottom:18px}.timer-modal.light .timer-input-separator{color:#0000004d}.timer-modal-actions{display:flex;gap:10px;justify-content:center}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@media(max-width:479px){.mode-container{gap:20px;padding:10px}.colon{font-size:50px;margin-top:-10px}.stopwatch-display{transform:scale(.28);gap:2px}.stopwatch-centiseconds{font-size:18px;margin-top:-35px;padding-right:20%}.mode-controls{gap:8px}.mode-btn-control{padding:10px 16px;font-size:12px}.timer-status{font-size:16px}.timer-modal{padding:20px;border-radius:16px}.timer-input{width:44px;height:40px;font-size:18px}.timer-input-separator{font-size:22px}.timer-modal-actions{flex-direction:column;width:100%}.timer-modal-actions .mode-btn-control{width:100%;justify-content:center}}@media(min-width:480px)and (max-width:767px){.mode-container{gap:25px;padding:15px}.colon{font-size:60px}.stopwatch-display{transform:scale(.4);gap:3px}.stopwatch-centiseconds{font-size:28px;margin-top:-25px;padding-right:12%}.mode-btn-control{padding:10px 20px;font-size:13px}.timer-input{width:48px;height:42px;font-size:20px}}@media(min-width:768px)and (max-width:1023px){.colon{font-size:70px}.stopwatch-display{transform:scale(.5);gap:4px}.stopwatch-centiseconds{font-size:36px;margin-top:-20px;padding-right:10%}.timer-input{width:52px;height:44px}}@media(min-width:1024px){.mode-container{gap:35px}.colon{font-size:90px}.stopwatch-display{transform:scale(.65);gap:5px}.stopwatch-centiseconds{font-size:44px;margin-top:-18px;padding-right:8%}.mode-btn-control{padding:12px 28px}.timer-input{width:56px;height:48px;font-size:24px}}@media(min-width:1440px){.colon{font-size:100px}.stopwatch-display{transform:scale(.85);gap:8px}.stopwatch-centiseconds{font-size:52px;margin-top:-15px;padding-right:6%}.timer-input{width:60px;height:50px}}@media(min-width:1920px){.stopwatch-display{transform:scale(1);gap:10px}.stopwatch-centiseconds{font-size:60px;margin-top:-12px;padding-right:5%}}.settings-container{position:fixed;top:20px;right:20px;z-index:1000}.settings-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.settings-btn:hover{background:#ffffff26;border-color:#ffffff40;transform:scale(1.05)}.settings-btn.light{background:#00000014;border:1px solid rgba(0,0,0,.15)}.settings-btn.light:hover{background:#0000001f;border-color:#00000040}.settings-btn.light .settings-icon{color:#0009}.settings-btn.light:hover .settings-icon{color:#000000e6}.settings-icon{width:22px;height:22px;color:#ffffffb3;transition:transform .5s cubic-bezier(.4,0,.2,1),color .3s}.settings-btn:hover .settings-icon{color:#fffffff2}.settings-icon.rotate{transform:rotate(90deg)}.settings-panel{position:absolute;top:54px;right:0;width:280px;background:#141416f2;border:1px solid rgba(255,255,255,.1);border-radius:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff0d inset;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.95);transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden}.settings-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.settings-header{padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.08)}.settings-header h3{margin:0;font-family:Oswald,sans-serif;font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff80}.settings-content{padding:12px 0}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;transition:background .2s}.setting-item:hover{background:#ffffff08}.setting-item label{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;font-weight:500;color:#ffffffd9}.toggle-group{display:flex;background:#ffffff0f;border-radius:8px;padding:3px}.toggle-btn{padding:6px 14px;font-family:Oswald,sans-serif;font-size:12px;font-weight:500;letter-spacing:.5px;color:#fff6;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s}.toggle-btn.active{background:#ffffff26;color:#fff}.toggle-btn:hover:not(.active){color:#ffffffb3}.switch{position:relative;width:44px;height:26px;background:#ffffff1a;border:none;border-radius:13px;cursor:pointer;transition:background .3s}.switch.on{background:#64c88299}.switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000004d}.switch.on .switch-knob{transform:translate(18px)}.slider-container{display:flex;align-items:center;gap:12px}.slider{width:100px;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff26;border-radius:2px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:transform .2s}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d}.slider-value{font-family:SF Mono,Fira Code,monospace;font-size:11px;color:#ffffff80;min-width:50px;text-align:right}.mode-setting{flex-direction:column;align-items:flex-start;gap:12px}.mode-selector{display:flex;gap:8px;width:100%}.mode-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;background:#ffffff0f;border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s}.mode-btn:hover{background:#ffffff1a}.mode-btn.active{background:#64b4ff33;border-color:#64b4ff80}.mode-icon{font-size:20px}.mode-name{font-family:Oswald,sans-serif;font-size:11px;font-weight:500;letter-spacing:.5px;color:#ffffffb3;text-transform:uppercase}.mode-btn.active .mode-name{color:#fff}.theme-dropdown-wrapper{display:flex;align-items:center;gap:10px}.theme-dropdown{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 32px 8px 12px;font-family:Oswald,sans-serif;font-size:13px;font-weight:500;letter-spacing:.5px;color:#ffffffe6;cursor:pointer;transition:all .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:120px}.theme-dropdown:hover{background-color:#ffffff1f;border-color:#ffffff40}.theme-dropdown:focus{outline:none;border-color:#fff6;box-shadow:0 0 0 2px #ffffff1a}.theme-dropdown option{background:#1a1a1e;color:#ffffffe6;padding:8px}.theme-dropdown-preview{width:20px;height:20px;border-radius:6px;flex-shrink:0}.settings-footer{display:flex;align-items:center;justify-content:center;gap:4px;padding:16px 20px;border-top:1px solid rgba(255,255,255,.08);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;color:#fff6}.heart-icon{width:14px;height:14px;color:#e25555;animation:heartbeat 1.5s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.github-link{display:inline-flex;align-items:center;gap:5px;color:#ffffffb3;text-decoration:none;font-weight:500;transition:color .2s}.github-link:hover{color:#fff}.github-icon{width:14px;height:14px}.settings-backdrop{position:fixed;inset:0;z-index:-1}@media(max-width:479px){.settings-container{top:10px;right:10px}.settings-btn{width:38px;height:38px;border-radius:10px}.settings-icon{width:18px;height:18px}.settings-panel{position:fixed;inset:auto 0 0;width:100%;max-height:70vh;border-radius:20px 20px 0 0;transform:translateY(100%);overflow-y:auto}.settings-panel.open{transform:translateY(0)}.setting-item{padding:12px 16px}.mode-btn{padding:8px 6px}.mode-icon{font-size:18px}.mode-name{font-size:10px}.theme-btn{width:24px;height:24px}.theme-preview{width:12px;height:12px}.settings-footer{flex-wrap:wrap;padding:12px 16px;font-size:11px}}@media(min-width:480px)and (max-width:767px){.settings-container{top:12px;right:12px}.settings-btn{width:40px;height:40px}.settings-icon{width:20px;height:20px}.settings-panel{width:260px;top:50px}}@media(min-width:768px)and (max-width:1023px){.settings-container{top:15px;right:15px}.settings-btn{width:42px;height:42px}.settings-panel{width:270px}}.app-container{min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:background-color .5s ease}.app-controls{position:fixed;top:20px;left:20px;z-index:1000;display:flex;flex-direction:column;gap:10px}.app-control-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:6px;cursor:pointer;font-family:Oswald,sans-serif;font-size:14px;letter-spacing:1px;opacity:.7;transition:opacity .3s,background .3s,border-color .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app-control-btn:hover{opacity:1}.app-control-btn.dark{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff}.app-control-btn.dark:hover{background:#fff3}.app-control-btn.light{background:#00000014;border:1px solid rgba(0,0,0,.2);color:#333}.app-control-btn.light:hover{background:#0000001f}.app-control-btn.snow-active{background:#64b4ff40!important;border-color:#64b4ff80!important;opacity:1}.snow-icon{font-size:16px}@media(max-width:479px){.app-controls{top:10px;left:10px;gap:8px}.app-control-btn{padding:8px 12px;font-size:11px;gap:6px;border-radius:6px}.snow-icon{font-size:14px}.fullscreen-text{display:none}.fullscreen-icon{display:block;font-size:16px}}@media(min-width:480px)and (max-width:767px){.app-controls{top:12px;left:12px;gap:8px}.app-control-btn{padding:8px 14px;font-size:12px}.fullscreen-text{display:inline}.fullscreen-icon{display:none}}@media(min-width:768px)and (max-width:1023px){.app-controls{top:15px;left:15px}.app-control-btn{padding:10px 16px;font-size:13px}}@media(min-width:1024px){.app-controls{top:20px;left:20px;gap:10px}.app-control-btn{padding:10px 16px;font-size:14px}}.fullscreen-text{display:inline}.fullscreen-icon{display:none}.mode-arrow{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all .2s ease;z-index:100;opacity:.5}.mode-arrow:hover{opacity:1;transform:translateY(-50%) scale(1.1)}.mode-arrow-left{left:20px}.mode-arrow-right{right:20px}.mode-arrow-tooltip{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%) translateY(-5px);padding:8px 14px;border-radius:6px;font-family:Oswald,sans-serif;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:capitalize;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;z-index:1000}.mode-arrow:hover .mode-arrow-tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.mode-arrow.dark .mode-arrow-tooltip{background:#fffffff2;color:#1a1a1a;box-shadow:0 4px 15px #0000004d}.mode-arrow.light .mode-arrow-tooltip{background:#141414f2;color:#fff;box-shadow:0 4px 15px #00000040}.mode-arrow.dark{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff}.mode-arrow.dark:hover{background:#fff3;border-color:#ffffff4d}.mode-arrow.light{background:#00000014;border:1px solid rgba(0,0,0,.15);color:#333}.mode-arrow.light:hover{background:#0000001f;border-color:#00000040}@media(max-width:479px){.mode-arrow{width:36px;height:36px}.mode-arrow-left{left:8px}.mode-arrow-right{right:8px}.mode-arrow svg{width:18px;height:18px}.mode-arrow-tooltip{display:none}}@media(min-width:480px)and (max-width:767px){.mode-arrow{width:40px;height:40px}.mode-arrow-left{left:12px}.mode-arrow-right{right:12px}.mode-arrow svg{width:20px;height:20px}}@media(min-width:768px)and (max-width:1023px){.mode-arrow{width:44px;height:44px}.mode-arrow-left{left:15px}.mode-arrow-right{right:15px}}
