:root{--bg-color: #eaeaea;--text-color: #000;--faint-color: rgba(0, 0, 0, .4);--ui-border: rgba(0, 0, 0, .1);--accent-color: #ff6b00}body.dark-mode{--bg-color: #242424;--text-color: #fff;--faint-color: rgba(255, 255, 255, .4);--ui-border: rgba(255, 255, 255, .1)}body.layer-mode{--bg-color: #CAFF00;--text-color: #000;--faint-color: rgba(0, 0, 0, .4);--ui-border: rgba(0, 0, 0, .2)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background-color:var(--bg-color);color:var(--text-color);font-family:Inter,sans-serif;overflow:hidden;transition:background-color .8s cubic-bezier(.16,1,.3,1)}.dot-grid{position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(var(--text-color) .5px,transparent .5px);background-size:40px 40px;background-position:center;opacity:.05;z-index:-1;transition:opacity 1s,background-image 1s}.main-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.canvas-wrapper{width:100%;max-width:820px;aspect-ratio:1}canvas{width:100%;height:100%;display:block}.knob-container{position:fixed;right:40px;bottom:40px;display:none;align-items:center;z-index:200;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.footer-section.knob-section{position:absolute;right:40px;bottom:0;display:none}.layer-mode .footer-section.knob-section,.layer-mode .knob-container{display:flex}.knob-container.knob-expanded{transform:scale(1.6)}.knob{width:32px;height:32px;border-radius:50%;background:var(--bg-color);border:1px solid var(--ui-border);box-shadow:none;cursor:pointer;position:relative;transition:background-color .8s,box-shadow .3s;-webkit-user-select:none;user-select:none}.knob-container.knob-expanded .knob{cursor:grab}.knob-container.knob-expanded .knob.knob-active{cursor:grabbing;box-shadow:0 3px 8px #0000001f}.knob-indicator{position:absolute;top:4px;left:50%;width:1.5px;height:6px;background:var(--text-color);transform:translate(-50%);border-radius:1px}.knob.knob-active .knob-indicator{background:var(--text-color)}.app-footer{position:fixed;bottom:30px;left:0;width:100%;display:flex;justify-content:center;align-items:center;gap:24px;padding:0 40px;z-index:100;pointer-events:none}.footer-section{display:flex;align-items:center;gap:32px;pointer-events:auto}.footer-section.actions{position:absolute;left:50%;transform:translate(-50%);bottom:0;top:auto!important}.text-link{background:transparent;border:none;color:var(--faint-color);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s;padding:4px 0;font-family:Space Mono,monospace}.text-link:hover{color:var(--text-color)}.text-link.active{color:var(--text-color);opacity:1}.icon-btn{background:none;border:none;color:var(--faint-color);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:none;border-radius:0;transition:color .2s ease}.theme-button{position:fixed;top:40px;right:40px;z-index:120;padding:0;background:none;border:none}.layer-button{position:fixed;left:40px;bottom:40px;z-index:120;padding:0;background:none;border:none}.footer-divider{color:var(--ui-border);font-size:12px}.world-time{position:fixed;right:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;z-index:100;pointer-events:auto}.world-time-track{display:flex;flex-direction:column;gap:0;align-items:flex-end}.world-time-city{font-size:10px;font-weight:500;letter-spacing:1px;color:var(--faint-color);cursor:default;transition:color .2s ease,opacity .2s ease;font-family:Space Mono,monospace;position:relative;height:28px;line-height:28px;opacity:.25;white-space:nowrap}.world-time-city:before{display:none}.world-time-city.active{color:#000;opacity:1;transform:scale(1);font-weight:600}.dark-mode .world-time-city.active{color:#fff}.selected-city-left{position:fixed;left:40px;top:50%;transform:translateY(-50%);color:var(--text-color);font-family:Space Mono,monospace;font-size:12px;letter-spacing:2px;opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none}.layer-mode .theme-button{display:none}.layer-label{position:fixed;left:40px;top:calc(50% + 18px);transform:translateY(-50%);font-family:Space Mono,monospace;font-size:10px;letter-spacing:2px;color:var(--text-color);opacity:0;transition:opacity .25s ease;pointer-events:none;mix-blend-mode:normal}.layer-label.is-visible{opacity:.45}@media(max-width:480px){.theme-button{top:20px;right:20px}.layer-button{left:20px;bottom:20px}.world-time{right:16px}.selected-city-left{left:20px;font-size:10px}.layer-label{left:20px}.app-footer{bottom:16px;padding:0 16px}.footer-section.knob-section{right:20px}.canvas-wrapper{max-width:100%;padding:0 8px}}