html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden;background:#000;display:flex;justify-content:center;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
#navbar{position:fixed;top:30px;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);z-index:10;text-decoration:none}
#navbar svg{display:block}
#navbar .st0{fill:#ffffff46}
#clock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%}
#dev-panel{position:fixed;bottom:10px;left:10px;background:rgba(255,255,255,0.9);padding:10px;border-radius:5px;border:1px solid #ccc;z-index:10;display:flex;gap:8px;align-items:center;font-size:14px}
#dev-panel input{width:50px;text-align:center}
#dev-panel button{padding:5px 10px}
#footer{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);color:rgba(255,255,255,0.6);font-size:12px;text-align:center;z-index:10}
#sound-toggle,#fullscreen-toggle{background:transparent;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;opacity:0.7;transition:opacity .3s;color:rgba(255,255,255,0.4);font-size:1.5em;-webkit-tap-highlight-color:transparent;outline:none}
#sound-toggle:hover,#fullscreen-toggle:hover{opacity:1}
#stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;display:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 50%,rgba(0,0,0,0.8) 100%);-webkit-mask-image:linear-gradient(to bottom,black 0%,transparent 100%);mask-image:linear-gradient(to bottom,black 0%,transparent 100%);transition:opacity 3s ease}
#stars.visible{opacity:1}
.star{position:absolute;background:white;border-radius:50%;box-shadow:0 0 5px rgba(255,255,255,0.3);animation:twinkle 1s infinite alternate}
@keyframes twinkle{0%{opacity:0.5}100%{opacity:1}}
#time-mode-toggle{display:flex;gap:5px;margin:0 15px}
#time-mode-toggle button{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:bold;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#time-mode-toggle button:hover{background:rgba(255,255,255,0.25);transform:translateY(-1px)}
#time-mode-toggle button.active{background:rgba(255,255,255,0.4);box-shadow:0 0 8px rgba(255,255,255,0.5);transform:scale(1.05)}
body{transition:background 3s ease !important}