*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{width:100vw;height:100vh;position:relative}#cloudscape-canvas{display:block;width:100%;height:100%;background:linear-gradient(to bottom,#87ceeb,#e0f6ff,#fff)}.sidebar{position:fixed;top:20px;right:20px;z-index:1000;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}.sidebar.collapsed{transform:translate(calc(100% + 20px))}.sidebar-content{display:flex;flex-direction:column;gap:20px}.collapse-button{position:fixed;top:10px;right:10px;width:32px;height:32px;background:#fffffff2;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#333;box-shadow:2px 2px 8px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .2s ease;z-index:1001}.collapse-button:hover{background:#fff;box-shadow:2px 2px 12px #0006;transform:scale(1.05)}.collapse-button:active{transform:scale(.95)}.controls-block{background:#ffffffe6;border-radius:8px;box-shadow:2px 2px 8px #0003;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:220px}.control-item{margin-bottom:20px}.control-item:last-child{margin-bottom:0}.control-label{display:block;font-size:14px;font-weight:500;color:#333;margin-bottom:8px;text-align:left}.slider{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#4a90e2;cursor:pointer;box-shadow:0 2px 4px #0003;transition:all .2s ease}.slider::-webkit-slider-thumb:hover{background:#357abd;box-shadow:0 2px 6px #0000004d}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#4a90e2;cursor:pointer;border:none;box-shadow:0 2px 4px #0003;transition:all .2s ease}.slider::-moz-range-thumb:hover{background:#357abd;box-shadow:0 2px 6px #0000004d}.slider::-moz-range-track{height:6px;border-radius:3px;background:#ddd;border:none}.social-links{width:220px;text-align:center}.social-links a{color:#4a90e2;text-decoration:none;font-weight:500;font-size:13px;padding:6px 12px;border:2px solid #4a90e2;border-radius:4px;background:transparent;transition:all .2s ease;display:inline-block;margin:0 4px}.social-links a:hover{background:#4a90e2;color:#fff}.sidebar-section .time-control-widget{width:220px}.time-control-widget{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;padding:15px;color:#333;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;-webkit-user-select:none;user-select:none;box-shadow:2px 2px 8px #0003;width:200px}.time-display{font-size:20px;font-weight:600;text-align:center;margin-bottom:12px;letter-spacing:1px;color:#333}.time-display .colon{transition:opacity .1s ease}.time-display .colon.hidden{opacity:0}.dial-controls-container{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto;width:fit-content}.time-adjust-button{width:28px;height:28px;border:none;border-radius:50%;background:#4a90e21a;color:#4a90e2cc;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-user-select:none;user-select:none;box-shadow:0 1px 3px #0000001a}.time-adjust-button:hover{background:#4a90e233;color:#4a90e2;box-shadow:0 2px 6px #00000026;transform:scale(1.05)}.time-adjust-button:active{transform:scale(.95);box-shadow:0 1px 2px #0000001a}.time-adjust-button:focus{outline:none;box-shadow:0 0 0 2px #4a90e24d}.dial-container{position:relative;width:80px;height:80px;margin:0 auto}.dial-background{position:absolute;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#4a90e21a,#4a90e20d);border:2px solid rgba(74,144,226,.3);box-shadow:inset 0 2px 8px #0000001a;cursor:grab;transition:transform .1s ease}.dial-background:active{cursor:grabbing}.hour-marker{position:absolute;top:50%;left:50%;width:2px;height:6px;background:#4a90e299;transform-origin:0 0;border-radius:1px}.hour-marker.major{width:3px;height:10px;background:#4a90e2cc}.dial-background:after{content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;background:#4a90e2cc;border-radius:50%;transform:translate(-50%,-50%)}@media (max-width: 768px){.time-control-widget{top:10px;right:10px;padding:12px}.time-display{font-size:20px}.dial-controls-container{gap:10px}.time-adjust-button{width:24px;height:24px;font-size:14px}.dial-container{width:70px;height:70px}}