*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#000;color:#fff;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#000,#111,#000);position:relative}.app:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,255,255,.02) 0%,transparent 70%);pointer-events:none}.app-header{text-align:center;padding:40px 20px;border-bottom:1px solid rgba(255,255,255,.1)}.app-title{font-size:2.5rem;font-weight:300;letter-spacing:3px;margin-bottom:10px;background:linear-gradient(45deg,#fff,#ccc);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase}.app-subtitle{font-size:1rem;color:#888;font-weight:300;letter-spacing:1px}.app-content{flex:1;display:flex;justify-content:center;align-items:center;padding:20px}.clock-container{display:flex;justify-content:center;align-items:center;width:100%;max-width:800px}.clock-wrapper{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:60px 40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px #0000004d,inset 0 1px #ffffff1a,inset 0 -1px #ffffff0d;text-align:center;position:relative;overflow:hidden}.clock-wrapper:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);border-radius:22px;z-index:-1}.date-display{margin-bottom:40px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}.day-of-week{font-size:1.2rem;color:#ccc;font-weight:300;letter-spacing:2px;margin-bottom:8px;text-transform:uppercase}.full-date{font-size:1rem;color:#888;font-weight:300}.digital-clock{margin-bottom:40px}.time-display{font-size:4rem;font-weight:300;font-family:Courier New,monospace;color:#fff;letter-spacing:4px;text-shadow:0 0 20px rgba(255,255,255,.3),0 0 40px rgba(255,255,255,.1);position:relative}.time-display:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.clock-info{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);gap:10px}.method-indicator{display:flex;align-items:center;gap:10px}.indicator-dot{width:8px;height:8px;background:#0f8;border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 10px #00ff8880}.method-text{font-size:.9rem;color:#888;font-weight:300;letter-spacing:1px}.extra-info{font-size:.8rem;color:#888;font-weight:300;letter-spacing:.5px;text-align:center;max-width:90%}.app-footer{text-align:center;padding:30px 20px;border-top:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff05;box-shadow:0 0 10px #0003}.footer-text{padding-top:10px;font-size:.9rem;color:#aaa}.app-footer a{color:#aaa;text-decoration:none;font-weight:500;transition:all .3s ease}.app-footer a:hover{color:#fff}.tech-badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.badge{background:#ffffff14;border:1px solid rgba(255,255,255,.15);padding:6px 14px;border-radius:20px;font-size:.75rem;color:#ccc;font-weight:400;letter-spacing:1px;box-shadow:inset 0 0 4px #ffffff0d;transition:all .3s ease}.badge:hover{cursor:pointer;border-color:#aaa}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}to{transform:scale(1);opacity:1}}@media (max-width: 768px){.app-title{font-size:2rem;letter-spacing:2px}.app-subtitle{font-size:.9rem}.clock-wrapper{margin:20px;padding:40px 30px}.time-display{font-size:3rem;letter-spacing:2px}.day-of-week{font-size:1rem}.full-date{font-size:.9rem}}@media (max-width: 480px){.app-title{font-size:1.5rem;letter-spacing:1px}.clock-wrapper{margin:10px;padding:30px 20px}.time-display{font-size:2.2rem;letter-spacing:1px}.tech-badges{gap:8px}.badge{padding:4px 10px;font-size:.7rem}}