@import"https://fonts.googleapis.com/css2?family=VT323&family=Arial&display=swap";body{background-color:#333;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;font-family:Arial,sans-serif}.clock-container{background-color:#000;border-radius:5px;padding:10px;width:350px;border:2px solid #444;box-shadow:0 5px 15px #00000080}.header-grid{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:2px solid #00aaff}.brand{font-weight:700;color:#fff;font-size:1.2em}.model{font-size:1em;color:#aaa}.screen{background-color:#cdd1d3;border-radius:5px;padding:15px;margin-top:10px;border:2px solid #555;box-shadow:inset 0 0 10px #00000080;position:relative;overflow:hidden;opacity:.7;transition:opacity .5s ease}.screen.light-on{opacity:1}.screen:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 25% 50%,#cf99,#cf90 40%);opacity:0;transition:opacity .5s ease;pointer-events:none}.screen.light-on:before{opacity:1}.clock{font-family:VT323,monospace;font-size:3.5em;color:#000;letter-spacing:3px;display:flex;align-items:center;justify-content:center}#time{width:220px;text-align:center}.ampm-container{display:flex;flex-direction:column;font-size:.4em;margin-left:10px}.ampm-container span{opacity:.2;line-height:1}.ampm-container span.active{opacity:1}.ampm-container #_24h-indicator{opacity:.2;line-height:1}.ampm-container #_24h-indicator.active{opacity:1}.clock .separator{animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.button-grid{display:flex;justify-content:space-between;margin-top:10px}.main-button,.side-button{border:1px solid #555;padding:10px;border-radius:3px;cursor:pointer;font-size:.9em;width:100px;text-align:center;transition:background-color .2s}.main-button{background-color:#333;color:#fff}.main-button:hover{background-color:#444}.main-button:active{background-color:#555}.side-button{background-color:#222;color:#aaa}.side-button:hover{background-color:#333}.side-button:active{background-color:#444}.shout-indicator{display:inline-flex;flex-direction:column-reverse;align-items:center;height:40px;width:15px;justify-content:space-between;margin-left:10px;align-self:center}.shout-indicator .bar{width:10px;height:6px;background-color:#0000001a;margin:.5px 0;border-radius:1px;transition:background-color .2s,opacity .2s;opacity:.2}.shout-indicator .bar.active{background-color:#000;opacity:1}.audio-indicator{position:relative;font-size:.4em;color:#000;opacity:.2;transition:opacity .2s;align-self:center;margin-right:5px}.audio-indicator.active{opacity:1}