.app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw;--x: 0%;--y: 50%;--opacity: 1;--light: 0%;--angle: 0deg}.app[data-theme=flat]{font-family:inherit}.app[data-theme=xp]{font-family:Tahoma,Trebuchet MS;font-size:12px}.app[data-theme=xp][data-state=day]{background:url(https://binsta.dev/api/v1/files/YE2ru3_wpJ/transform?format=webp&size=xl&quality=hi)}.app[data-theme=xp][data-state=night]{background:url(https://binsta.dev/api/v1/files/4AA7dO33BR/transform?format=webp&size=xl&quality=hi)}.app[data-state=day]{background-color:var(--gray3);transition:all 1s ease}.app[data-state=night]{background-color:#101010;transition:all 1s ease}.card{position:relative;width:400px;height:200px;overflow:hidden;box-sizing:border-box;font-weight:500}.app[data-theme=flat] .card{border-radius:24px;letter-spacing:-.5px;padding:32px}.app[data-theme=flat] .title-bar{display:none}.app[data-theme=xp] .card{font-family:Tahoma;overflow:hidden;letter-spacing:0px;border-top-left-radius:8px;border-top-right-radius:8px;display:flex;flex-direction:column}.app[data-theme=xp][data-state=day] .card{color:var(--gray12);--shadow-color: 0 0% 8.5%;box-shadow:inset -1px -1px #00138c,inset 1px 1px #0831d9,inset -2px -2px #001ea0,inset 2px 2px #166aee,inset -3px -3px #003bda,inset 3px 3px #0855dd,var(--boxShadow);background:#ece9d8}.app[data-theme=xp][data-state=night] .card{color:var(--darkgray12);--shadow-color: 0 0% 8.5%;box-shadow:inset -1px -1px var(--darkgray2),inset 1px 1px var(--darkgray3),inset -2px -2px var(--darkgray2),inset 2px 2px var(--darkgray5),inset -3px -3px var(--darkgray4),inset 3px 3px var(--darkgray6),var(--boxShadow);background:linear-gradient(calc(var(--angle) - 90deg),var(--darkgray5) 0%,var(--darkgray6) 100%)}.app[data-theme=xp] .title-bar{font-family:Trebuchet MS;padding:3px 5px 3px 14px;border-top-left-radius:8px;border-top-right-radius:7px;font-size:13px;letter-spacing:-.25px}.app[data-theme=xp][data-state=day] .title-bar{color:var(--gray1);text-shadow:1px 1px #0f1089;background:linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7) padding-box,radial-gradient(50px 20px at calc(100% - var(--x)) calc(100% - var(--y)),#41b0ff 0%,#003dd7 100%) border-box;border:1px solid transparent}.app[data-theme=xp][data-state=night] .title-bar{text-shadow:0px 0px 1px var(--darkgray11);background:linear-gradient(180deg,var(--darkgray8),var(--darkgray4) 8%,var(--darkgray3) 40%,var(--darkgray2) 88%,var(--darkgray2) 95%,var(--darkgray1) 96%,var(--darkgray1)) padding-box,radial-gradient(50px 20px at calc(var(--x)) calc(var(--y)),hsl(0,0%,clamp(11%,calc(-1 * var(--light)),62.8%)) 0%,var(--darkgray2) 100%) border-box;border:1px solid transparent}@media only screen and (max-width: 600px){.card{width:350px;height:175px}}.app[data-theme=flat][data-state=day] .card{color:var(--gray12);--secondary-color: var(--gray11);--tertiary-color: var(--gray10);background:linear-gradient(calc(var(--angle) - 90deg),white 0%,white 100%) padding-box,linear-gradient(calc(var(--angle) - 90deg),hsl(0 0% 88.7% / .8) 0%,var(--gray2) 100%) border-box;border:1px solid transparent;box-shadow:var(--boxShadow)}.app[data-theme=flat][data-state=night] .card{color:var(--darkgray12);--secondary-color: var(--darkgray11);--tertiary-color: var(--darkgray10);background:linear-gradient(calc(var(--angle) - 90deg),var(--darkgray3) 0%,var(--darkgray2) 100%) padding-box,radial-gradient(100px 100px at var(--x) calc(var(--y)),hsl(0,0%,clamp(11%,calc(-1 * var(--light)),62.8%)) 0%,var(--darkgray2) 100%) border-box;border:1px solid transparent;transition:background 1s ease}[data-state=night]>.glow{display:block}.glow{display:none;--left: -10%;--top: -75%;position:absolute;width:100px;height:100px;top:calc(var(--top) + 50px);left:calc(var(--left) - 50px);background:white;opacity:var(--opacity);filter:blur(50px);border-radius:9999px}.app[data-theme=flat] .text{height:100%}.text{position:relative;display:flex;flex-direction:column;justify-content:space-between;flex:1}.progressContainer{display:flex;flex-direction:column;gap:8px}.app[data-theme=flat] .progressContainer{display:none}.app[data-theme=xp][data-state=night] .progress{background-color:var(--darkgray8);box-shadow:0 0 0 1px var(--darkgray5),inset 0 0 2px #6fd35a}.app[data-theme=xp] .progress{position:relative;height:14px;border-radius:4px;box-shadow:0 0 0 1px var(--gray11),inset 0 0 2px 0 var(--gray10);display:flex;justify-content:space-between;gap:1px;padding:3px;background-color:var(--gray1)}.app[data-theme=xp] .progress:before{position:absolute;content:"";inset:2px;clip-path:inset(0% 0% 0% var(--progress))}.app[data-theme=xp][data-state=day] .progress:before{background-color:var(--gray1)}.app[data-theme=xp][data-state=night] .progress:before{background-color:var(--darkgray8)}.loader{flex:1;height:100%;background:linear-gradient(#a4e999,#6fd35a,#a4e999)}.app[data-theme=xp] .text{padding:16px}.time{color:var(--secondary-color)}.banner{width:100%;display:flex;justify-content:space-between}.location{color:var(--tertiary-color)}.app[data-theme=flat] button{margin-top:32px;font-size:12px;font-weight:500;text-shadow:0px 0px 1px var(--gray7);letter-spacing:-.5px;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;border-radius:9999px;padding:6px 12px;min-width:120px;cursor:pointer}.app[data-theme=flat][data-state=day] button{color:var(--gray12);background:linear-gradient(calc(var(--angle) - 90deg),white 0%,white 100%) padding-box,linear-gradient(calc(var(--angle) - 90deg),hsl(0 0% 88.7% / .8) 0%,var(--gray2) 100%) border-box;border:1px solid transparent}.app[data-theme=flat][data-state=night] button{color:var(--darkgray12);--secondary-color: var(--darkgray11);--tertiary-color: var(--darkgray10);background:linear-gradient(calc(var(--angle) - 90deg),var(--darkgray3) 0%,var(--darkgray2) 100%) padding-box,radial-gradient(50% 50% at var(--x) calc(var(--y)),hsl(0,0%,clamp(11%,calc(-1 * var(--light)),62.8%)) 0%,var(--darkgray2) 100%) border-box;border:1px solid transparent;transition:background 1s ease}.app[data-theme=xp] button{margin-top:32px;font-family:Tahoma;min-width:75px;min-height:23px;padding:0 12px;font-size:11px;box-sizing:border-box;box-shadow:none;border-radius:3px}.app[data-theme=xp] button:hover{box-shadow:inset -1px 1px #fff0cf,inset 1px 2px #fdd889,inset -2px 2px #fbc761,inset 2px -2px #e5a01a}.app[data-theme=xp][data-state=night] button:active{background:linear-gradient(180deg,var(--darkgrey4),var(--darkgrey5) 8%,var(--darkgrey6) 94%,var(--darkgrey7))}.app[data-theme=xp][data-state=day] button:active{background:linear-gradient(180deg,#cdcac3,#e3e3db 8%,#e5e5de 94%,#f2f2f1)}.app[data-theme=xp] button:focus-visible{box-shadow:inset -1px 1px #cee7ff,inset 1px 2px #98b8ea,inset -2px 2px #bcd4f6,inset 1px -1px #89ade4,inset 2px -2px #89ade4;outline:1px dotted #000;outline-offset:-4px}.app[data-theme=xp][data-state=day] button{background:linear-gradient(180deg,#fff,#ecebe5 86%,#d8d0c4);border:1px solid #003c74}.app[data-theme=xp][data-state=night] button{color:var(--darkgray12);background:linear-gradient(180deg,var(--darkgray5),var(--darkgray8) 86%,var(--darkgray8));border:1px solid #34495d}.toggleGroup{position:absolute;top:0;display:flex;gap:16px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--foreground);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--foreground: var(--darkgray12);--background: var(--darkgray1);--gray1: hsl(0, 0%, 99%);--gray2: hsl(0, 0%, 97.3%);--gray3: hsl(0, 0%, 95.1%);--gray4: hsl(0, 0%, 93%);--gray5: hsl(0, 0%, 90.9%);--gray6: hsl(0, 0%, 88.7%);--gray7: hsl(0, 0%, 85.8%);--gray8: hsl(0, 0%, 78%);--gray9: hsl(0, 0%, 56.1%);--gray10: hsl(0, 0%, 52.3%);--gray11: hsl(0, 0%, 43.5%);--gray12: hsl(0, 0%, 9%);--darkgray1: hsl(0, 0%, 8.5%);--darkgray2: hsl(0, 0%, 11%);--darkgray3: hsl(0, 0%, 13.6%);--darkgray4: hsl(0, 0%, 15.8%);--darkgray5: hsl(0, 0%, 17.9%);--darkgray6: hsl(0, 0%, 20.5%);--darkgray7: hsl(0, 0%, 24.3%);--darkgray8: hsl(0, 0%, 31.2%);--darkgray9: hsl(0, 0%, 43.9%);--darkgray10: hsl(0, 0%, 49.4%);--darkgray11: hsl(0, 0%, 62.8%);--darkgray12: hsl(0, 0%, 93%);--shadow-color: 0deg 0% 63%;--shadow: 1px 0px 1.1px hsl(var(--shadow-color) / .36), 3.3px 0px 3.7px -.8px hsl(var(--shadow-color) / .36), 8.2px 0px 9.2px -1.7px hsl(var(--shadow-color) / .36), 20px 0px 22.5px -2.5px hsl(var(--shadow-color) / .36)}body{margin:0}