*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%;overflow:hidden}canvas{max-width:100%;height:100vh;position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Arial,sans-serif;font-size:15px;color:#fff;z-index:1000;pointer-events:none;-webkit-user-select:none;user-select:none}.loader-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:1050;opacity:1;visibility:visible;transition:opacity .35s ease,visibility .35s ease;display:flex;align-items:center;justify-content:center}.loader-overlay.hidden{opacity:0;visibility:hidden}.loader-progress{color:#fff;font-size:32px;font-family:monospace;z-index:1100;pointer-events:none;-webkit-user-select:none;user-select:none}.bar-container{width:100vw;position:fixed;height:100vh;pointer-events:none;top:0;left:0;z-index:10;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.bar-container .bar{width:100%;height:5rem;background-color:#000}.bar-container .bar1{transform:translateY(-100%)}.bar-container .bar2{transform:translateY(100%)}#app{width:100vw;height:100vh}.controls{position:fixed;top:20px;left:20px;background:#fffc;padding:20px;border-radius:8px}.control-group{margin-bottom:15px}label{display:block;margin-bottom:5px}.color-options{display:flex;gap:10px}.color-option{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}.color-option.selected{border-color:#000}#counter{font-size:5vw;position:fixed;width:50%;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Arial,sans-serif;color:#fff;display:none;z-index:100}.counter{display:flex;align-items:center;font-family:Arial,sans-serif;font-size:24px;color:#fff;position:fixed;z-index:1000;top:50%;left:50%;transform:translate(-50%,-50%)}.time-unit{display:flex;flex-direction:column;align-items:center;margin:0 10px}.separator{font-size:24px;color:#333}