*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
.tv-screen{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#172027,#080b0e 50%,#020303)}
.welcome{text-align:center}.welcome-icon{font-size:90px;color:#70b0ff;margin-bottom:20px}.welcome h1{font-size:50px;font-weight:300;letter-spacing:8px}.welcome p{margin-top:15px;color:#8b969e;font-size:18px}
.main-button{margin-top:30px;padding:15px 35px;border:1px solid #456a88;border-radius:10px;background:#111a20;color:#fff;font-size:17px}
.clock-screen{position:fixed;inset:0;z-index:9999;width:100vw;height:100vh;padding:30px 50px;background:radial-gradient(circle at 50% 35%,#18242c,#0b1014 50%,#030405);opacity:0;visibility:hidden;transform:translateY(-100%);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.clock-screen.show{opacity:1;visibility:visible;transform:translateY(0)}
.top-bar{height:65px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:14px;font-size:21px;letter-spacing:2px}.brand-icon{font-size:35px;color:#70b0ff}
.live{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;color:#7d8a94;font-size:12px;letter-spacing:3px}.live-dot{width:7px;height:7px;border-radius:50%;background:#70b0ff;box-shadow:0 0 10px #70b0ff;display:block}.live::before,.live::after{content:none!important}
.close-button{width:50px;height:50px;border:0;background:transparent;color:#fff;font-size:43px}

.clock-area{width:100%;margin-top:78px;display:flex;justify-content:center;align-items:center;gap:26px}
.flip-card{position:relative;width:28%;max-width:390px;height:230px;overflow:hidden;border-radius:18px;background:linear-gradient(to bottom,#283136 0%,#1d2428 48%,#080b0d 50%,#171d20 52%,#252c30 100%);border:1px solid #38444c;box-shadow:0 20px 45px rgba(0,0,0,.6)}
.flip-card span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(100px,13vw,175px);font-weight:300;letter-spacing:-8px;color:#f0f4f7}.card-line{position:absolute;top:50%;left:0;width:100%;height:4px;background:#030405}.colon{font-size:80px}
.full-date{margin-top:22px;text-align:center;font-size:28px;color:#e1e8ed}
.info-container{display:flex;justify-content:center;align-items:center;margin-top:20px}.info-item{width:200px;text-align:center}.info-icon{font-size:25px;color:#70b0ff;margin-bottom:8px}.info-value{font-size:17px;color:#e2e9ee}.info-label{margin-top:7px;font-size:10px;letter-spacing:3px;color:#72808a}.divider{width:1px;height:65px;background:#303b43}
.weather-card{width:min(1100px,90%);min-height:90px;margin:18px auto 0;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #2b3b45;border-radius:15px;background:rgba(18,27,33,.8)}
.weather-left{display:flex;align-items:center;gap:14px}.weather-icon{font-size:40px}.weather-title{font-size:11px;letter-spacing:3px;color:#70b0ff}.weather-location{margin-top:5px;color:#dfe6eb;font-size:16px}.temperature-box{display:flex;align-items:flex-start}#temperature{font-size:42px;font-weight:300}.temperature-box span:last-child{margin-top:7px;color:#85939d;font-size:18px}.weather-details{display:flex;flex-direction:column;gap:7px;color:#aeb9c1;font-size:14px}
.weather-button{padding:11px 17px;border:1px solid #3d617d;border-radius:8px;background:#111b22;color:#fff}.weather-button:focus,.main-button:focus,.close-button:focus{outline:3px solid #70b0ff;outline-offset:3px}
.screensaver-text{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);color:#53616a;font-size:10px;letter-spacing:4px}.bottom-handle{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);width:100px;height:5px;border-radius:10px;background:#70b0ff}
@media(max-width:1000px){.clock-screen{padding:20px}.clock-area{gap:8px}.flip-card{height:145px;border-radius:12px}.flip-card span{font-size:75px}.colon{font-size:45px}.full-date{font-size:20px}.info-item{width:25%}.weather-card{width:97%;margin-top:18px}.weather-icon{font-size:28px}.weather-location{font-size:12px}#temperature{font-size:30px}}