@import"https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,700,800&display=swap";:root,.dark{--bg-primary: #101215;--bg-secondary: #1f2329;--bg-tertiary: #2a2e35;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--text-tertiary: rgba(255, 255, 255, .5);--border-color: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .2);--shadow-color: rgba(0, 0, 0, .5);--overlay-bg: rgba(0, 0, 0, .8);--accent-primary: #04fc43;--accent-primary-rgb: 4, 252, 67;--accent-secondary: #fee800;--accent-secondary-rgb: 254, 232, 0;--accent-tertiary: #ff2972;--accent-tertiary-rgb: 255, 41, 114;--clock-hour: #ff2972;--clock-minute: #fee800;--clock-second: #04fc43}.light{--bg-primary: #f0f4f8;--bg-secondary: #ffffff;--bg-tertiary: #e6ecf2;--text-primary: #1a202c;--text-secondary: #4a5568;--text-tertiary: #718096;--border-color: rgba(0, 0, 0, .08);--border-hover: rgba(0, 0, 0, .15);--shadow-color: rgba(0, 0, 0, .1);--overlay-bg: rgba(240, 244, 248, .95);--accent-primary: #10b981;--accent-primary-rgb: 16, 185, 129;--accent-secondary: #f59e0b;--accent-secondary-rgb: 245, 158, 11;--accent-tertiary: #ef4444;--accent-tertiary-rgb: 239, 68, 68;--clock-hour: #ef4444;--clock-minute: #f59e0b;--clock-second: #10b981}.minimal{--bg-primary: #fafafa;--bg-secondary: #ffffff;--bg-tertiary: #f0f0f0;--text-primary: #1a1a1a;--text-secondary: #3d3d3d;--text-tertiary: #666666;--border-color: rgba(0, 0, 0, .15);--border-hover: rgba(0, 0, 0, .25);--shadow-color: rgba(0, 0, 0, .12);--overlay-bg: rgba(250, 250, 250, .98);--accent-primary: #262626;--accent-primary-rgb: 38, 38, 38;--accent-secondary: #404040;--accent-secondary-rgb: 64, 64, 64;--accent-tertiary: #525252;--accent-tertiary-rgb: 82, 82, 82;--clock-hour: #1a1a1a;--clock-minute: #404040;--clock-second: #737373}:root{--clr-hours: #ff2972;--clr-minutes: #fee800;--clr-seconds: #04fc43}#hrDots{--clr: var(--clr-hours)}#minDots{--clr: var(--clr-minutes)}#secDots{--clr: var(--clr-seconds)}#clock{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:80px;padding:40px 20px}#secDots,#minDots,#hrDots{position:relative;width:200px;height:200px;border-radius:50%;rotate:90deg}#secDots:before,#minDots:before,#hrDots:before{content:"";position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;border-radius:50%}#secDots h1,#minDots h1,#hrDots h1,#secDots h2,#minDots h2,#hrDots h2,#secDots h3,#minDots h3,#hrDots h3{position:absolute;text-align:center;transform:rotate(-90deg);top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;flex-direction:column;font-size:4em;font-weight:500;color:var(--clr)}#secDots h1 span,#minDots h1 span,#hrDots h1 span,#secDots h2 span,#minDots h2 span,#hrDots h2 span,#secDots h3 span,#minDots h3 span,#hrDots h3 span{position:absolute;font-size:.25em;font-weight:500;bottom:50px;text-transform:uppercase;letter-spacing:.1em}#hrDots b{position:absolute;color:#fff;display:inline-flex;transform:rotate(-90deg) translate(-30px,90px)}#secDots .dot,#minDots .dot,#hrDots .dot{position:absolute;top:50%;width:10px;height:3px;background:var(--clr);transform-origin:100px}#secDots .active.dot,#minDots .active.dot,#hrDots .active.dot{background:var(--clr);box-shadow:0 0 10px var(--clr),0 0 20px var(--clr),0 0 30px var(--clr)}#secDots .active.dot~.dot,#minDots .active.dot~.dot,#hrDots .active.dot~.dot{background:#555}#secDots .dot:nth-child(5n+5),#minDots .dot:nth-child(5n+5),#hrDots .dot{width:20px}#hrDots .dot:before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:4px;background:var(--clr);box-shadow:1.5px 9px var(--clr),4px 18px var(--clr),7px 27px var(--clr)}#hrDots .dot.active~.dot:before{background:#555;box-shadow:1.5px 9px #555,4px 18px #555,7px 27px #555}#clock .date{text-align:center;color:#fff;font-weight:600;letter-spacing:.05em;text-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px rgba(255,255,255,.3);font-variant-numeric:tabular-nums;font-size:1.5rem;opacity:.8;white-space:nowrap;flex-basis:100%;margin-top:20px}@media screen and (max-width: 880px){#clock{flex-direction:column;gap:25px;padding:20px 10px}#secDots,#minDots,#hrDots{width:150px;height:150px}#secDots:before,#minDots:before,#hrDots:before{border-radius:50%;top:-15px;right:-15px;bottom:-15px;left:-15px}#hrDots .dot:before{box-shadow:1.5px 9px var(--clr),4px 18px var(--clr)}#hrDots .dot.active~.dot:before{box-shadow:1.5px 9px #555,4px 18px #555}#secDots h1,#minDots h1,#hrDots h1,#secDots h2,#minDots h2,#hrDots h2,#secDots h3,#minDots h3,#hrDots h3{font-size:3em}#secDots h1 span,#minDots h1 span,#hrDots h1 span,#secDots h2 span,#minDots h2 span,#hrDots h2 span,#secDots h3 span,#minDots h3 span,#hrDots h3 span{font-size:.25em;bottom:36px}#secDots .dot,#minDots .dot,#hrDots .dot{transform-origin:75px}#hrDots b{transform:rotate(-90deg) translate(-63px,27px)}#clock .date{font-size:1.2rem;margin-top:10px}}#digitalClock{text-align:center;color:#fff;font-size:5em;font-weight:600;letter-spacing:.05em;text-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px rgba(255,255,255,.3);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}#digitalClock .time-container{display:flex;align-items:center;justify-content:center;gap:0}#digitalClock .time{display:inline-block;min-width:2.5ch;text-align:center}#digitalClock .separator{display:inline-block;margin:0 .1em}#digitalClock .separator.blink{animation:blink 1s infinite}#digitalClock .daytime{font-size:.4em;margin-left:.5em;vertical-align:middle}#digitalClock .date{font-size:1.5rem;opacity:.8;white-space:nowrap}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:.3}}@media screen and (max-width: 880px){#digitalClock{font-size:3em}#digitalClock .date{font-size:1.2rem}}@media screen and (max-width: 480px){#digitalClock{font-size:2em}}#analogClock{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:400px;width:100%;gap:30px}.clock-face{position:relative;width:400px;height:400px;border-radius:50%}.clock-face:before{content:"";position:absolute;top:20px;right:20px;bottom:20px;left:20px;border-radius:50%;z-index:1}.tick{position:absolute;top:0;left:50%;width:2px;height:50%;margin-left:-1px;transform-origin:50% 100%;z-index:2;pointer-events:none}.tick:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);background:#ffffff4d}.tick.major:before{width:4px;height:20px;background:#fff9}.tick.minor:before{width:2px;height:10px}.clock-number{position:absolute;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.5em;font-weight:600;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.3);z-index:3}.hand{position:absolute;bottom:50%;left:50%;transform-origin:center bottom;border-radius:4px 4px 0 0;box-shadow:0 0 10px #00000080;z-index:4}.hour-hand{width:8px;height:80px;margin-left:-4px;background:linear-gradient(180deg,#ff2972,#ff1a5e);box-shadow:0 0 15px #ff297299}.minute-hand{width:6px;height:110px;margin-left:-3px;background:linear-gradient(180deg,#fee800,#fdd700);box-shadow:0 0 15px #fee80099}.second-hand{width:4px;height:130px;margin-left:-2px;background:linear-gradient(180deg,#04fc43,#03db3a);box-shadow:0 0 15px #04fc4399}.center-dot{position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff,#ccc);box-shadow:0 0 10px #ffffff80,0 0 20px #ffffff4d,inset 0 2px 5px #0000004d;z-index:10}#analogClock .date{text-align:center;color:#fff;font-weight:600;letter-spacing:.05em;text-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px rgba(255,255,255,.3);font-variant-numeric:tabular-nums;font-size:1.5rem;opacity:.8;white-space:nowrap;margin-top:20px}@media screen and (max-width: 880px){.clock-face{width:300px;height:300px}.clock-number{font-size:1.2em;width:30px;height:30px}.hour-hand{width:6px;height:60px;transform:translate(-50%)}.minute-hand{width:4px;height:85px}.second-hand{width:2px;height:100px;transform:translate(-50%)}.tick:before{top:0}.tick.major:before{height:15px}.tick.minor:before{height:8px}.center-dot{width:12px;height:12px}#analogClock .date{font-size:1.2rem}}@media screen and (max-width: 480px){.clock-face{width:250px;height:250px}.clock-number{font-size:1em;width:25px;height:25px}.hour-hand{width:5px;height:50px;transform:translate(-50%)}.minute-hand{width:4px;height:70px;transform:translate(-50%)}.second-hand{width:2px;height:85px;transform:translate(-50%)}.tick:before{top:0}.tick.major:before{width:3px;height:12px}.tick.minor:before{width:1.5px;height:6px}.center-dot{width:10px;height:10px}}.settings-button{position:fixed;top:20px;right:20px;width:56px;height:56px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.settings-button:hover{background:#ffffff1f;border-color:#04fc4366;box-shadow:0 8px 32px #04fc4333;transform:scale(1.05)}.settings-icon{width:24px;height:24px;color:#fff;transition:transform .3s cubic-bezier(.4,0,.2,1)}.settings-button:hover .settings-icon{transform:rotate(90deg)}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease;padding:20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-panel{background:linear-gradient(145deg,#1a1e26,#0a0c11);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:0;max-width:520px;width:100%;max-height:85vh;overflow:hidden;box-shadow:0 0 0 1px #ffffff0d,0 24px 48px #0009,0 12px 24px #0006;animation:slideIn .3s cubic-bezier(.4,0,.2,1)}@keyframes slideIn{0%{transform:scale(.95) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.settings-content::-webkit-scrollbar{width:6px}.settings-content::-webkit-scrollbar-track{background:transparent}.settings-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.settings-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;background:#0003;border-bottom:1px solid rgba(255,255,255,.08)}.settings-header h2{font-size:1.75em;font-weight:700;color:#fff;letter-spacing:-.02em;margin:0}.settings-close{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#ffffffe6;width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.settings-close:hover{background:#ff297226;border-color:#ff29724d;color:#ff2972;transform:scale(1.05)}.settings-content{padding:24px 32px 32px;display:flex;flex-direction:column;gap:16px;max-height:calc(85vh - 140px);overflow-y:auto}.settings-group{background:#00000040;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;transition:all .2s ease}.settings-group:hover{border-color:#ffffff26;background:#0000004d}.settings-label{display:flex;align-items:center;gap:10px;font-size:.95em;font-weight:600;color:#fffffff2;margin-bottom:14px;letter-spacing:-.01em}.label-icon{font-size:1.3em;filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.settings-select{width:100%;background:#00000059;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 44px 14px 16px;color:#fff;font-size:.95em;font-family:Poppins,sans-serif;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}.settings-select:hover{border-color:#ffffff40}.settings-select:focus{border-color:#04fc43;box-shadow:0 0 0 3px #04fc4326;outline:none}.settings-select option{background:#1a202c;color:#fff;padding:12px}.settings-toggles{display:flex;flex-direction:column;gap:12px}.settings-toggle-item{background:#00000040;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;transition:all .2s ease}.settings-toggle-item:hover{border-color:#ffffff26;background:#0000004d;transform:translate(2px)}.toggle-label{display:flex;align-items:center;gap:10px;font-size:.95em;font-weight:500;color:#fffffff2}.toggle-switch{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ffffff26;transition:.3s cubic-bezier(.4,0,.2,1);border-radius:28px}.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background:#fff;transition:.3s cubic-bezier(.4,0,.2,1);border-radius:50%;box-shadow:0 2px 6px #0000004d}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,#04fc43,#03db3a)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.settings-reset-btn{width:100%;background:#ff29721a;border:1px solid rgba(255,41,114,.25);color:#ff2972;padding:16px;border-radius:14px;font-size:.95em;font-weight:600;font-family:Poppins,sans-serif;cursor:pointer;transition:all .2s ease;margin-top:8px}.settings-reset-btn:hover{background:#ff297226;border-color:#ff297266;transform:translateY(-1px);box-shadow:0 4px 12px #ff297233}.settings-reset-btn:active{transform:translateY(0)}.clock-type-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.clock-switch-btn{padding:12px 16px;border:1px solid rgba(255,255,255,.15);background:#00000040;color:#ffffffb3;border-radius:12px;cursor:pointer;font-size:.9em;font-weight:600;transition:all .2s ease;font-family:Poppins,sans-serif}.clock-switch-btn:hover{background:#00000059;border-color:#ffffff40;color:#fffffff2;transform:translateY(-1px)}.clock-switch-btn.active{background:linear-gradient(135deg,#04fc4333,#03db3a26);border-color:#04fc4380;color:#04fc43;box-shadow:0 0 20px #04fc4333}.settings-footer{margin-top:20px;padding:20px 32px;background:#0003;border-top:1px solid rgba(255,255,255,.08);text-align:center}.settings-footer p{color:#ffffff80;font-size:.85em;margin:6px 0;font-weight:500}.settings-footer-small{font-size:.75em!important;color:#ffffff59!important}.settings-fade-in{animation:fadeInUp .3s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width: 880px){.settings-button{width:50px;height:50px;top:16px;right:16px;border-radius:14px}.settings-icon{width:22px;height:22px}.settings-panel{max-width:480px}.settings-header{padding:24px 28px}.settings-header h2{font-size:1.6em}.settings-content{padding:20px 28px 28px}.settings-footer{padding:18px 28px}}@media screen and (max-width: 480px){.settings-overlay{padding:0}.settings-panel{max-height:100vh;border-radius:0;max-width:100%}.settings-button{width:46px;height:46px;top:12px;right:12px}.settings-header{padding:20px 24px}.settings-header h2{font-size:1.4em}.settings-close{width:34px;height:34px}.settings-content{padding:18px 24px 24px;max-height:calc(100vh - 130px)}.settings-group{padding:16px;border-radius:14px}.settings-toggle-item{padding:16px 18px}.clock-type-selector{grid-template-columns:1fr;gap:8px}.clock-switch-btn{padding:14px}.settings-footer{padding:16px 24px}.settings-footer p{font-size:.8em}}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background:var(--bg-primary);color:var(--text-primary);padding:20px;transition:background-color .3s ease,color .3s ease}#clockControls{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap;justify-content:center}.clock-switch-btn{background:var(--bg-secondary);color:var(--text-primary);border:2px solid var(--border-color);padding:10px 20px;border-radius:8px;cursor:pointer;font-size:1em;font-weight:500;transition:all .3s ease}.clock-switch-btn:hover{background:var(--bg-tertiary);border-color:var(--border-hover)}.clock-switch-btn.active{background:var(--accent-primary);color:var(--bg-primary);border-color:var(--accent-primary);box-shadow:0 0 20px rgba(var(--accent-primary-rgb),.5)}#clockContainer{position:relative;min-height:400px;display:flex;justify-content:center;align-items:center}.clock-display{display:none}.clock-display.active{display:flex}#digitalClock.active{display:block}@media screen and (max-width: 880px){body{min-height:auto;padding-top:2.75rem}#clockControls{margin-bottom:30px}.clock-switch-btn{padding:8px 16px;font-size:.9em}}