body{background-color:#f0f0f0}h1,h2{color:#333}h3{font-size:2em;color:#333}p{font-size:1.25em;line-height:1.4;color:#555}.ui-container{position:relative;width:100%;height:100%}.ui-header-container{position:absolute;left:5%;top:5%;font-size:clamp(12px,1vw,24px);width:30%;height:25%}.display-toggle-container{position:absolute;left:50%;transform:translate(-50%);top:5%;pointer-events:auto;display:flex;border-radius:8px;overflow:hidden;border:1px solid #aaa}.ui-text,.action-button{pointer-events:auto}.ui-overview-info-container{position:absolute;right:5%;bottom:10%;width:30%;height:25%;font-size:clamp(12px,1vw,24px);pointer-events:auto}.block-info-container{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;pointer-events:auto;width:25%;font-size:clamp(12px,1vw,24px)}.icon-grid-container{position:absolute;left:5%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;row-gap:1vw;pointer-events:auto;width:20%}.icon-row{display:flex;gap:1vw}.icon-button{display:flex;flex-direction:column;align-items:center;background-color:transparent;border:none;cursor:pointer;transition:all .2s ease;position:relative}.icon-button:hover{transform:scale(1.05)}.icon-button-inactive{cursor:default}.icon-button-inactive:hover{transform:none}.icon-image-inactive{opacity:.4;filter:grayscale(80%)}.icon-image{width:5vw;max-width:70px;min-width:45px;height:5vw;max-height:70px;min-height:45px;z-index:2;position:relative}.icon-shadow{bottom:-10%;width:6vw;max-width:90px;min-width:55px;height:6vw;max-height:90px;min-height:55px;z-index:1;position:absolute;pointer-events:none}.icon-label{font-size:10px;margin-top:4px;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navigation-button{pointer-events:auto;padding:8px 16px;cursor:pointer;background-color:#fff;transition:background-color .2s ease,transform .2s ease;display:flex;align-items:center;gap:.5rem}.navigation-button:hover,.navigation-button:focus{background-color:#e0e0e0}.navigation-button:active{background-color:#ccc;transform:scale(.95)}.navigation-button-up{position:absolute;top:10%;left:50%;transform:translate(-50%)}.navigation-button-down{position:absolute;bottom:10%;left:50%;transform:translate(-50%)}.navigation-button-close{position:absolute;top:5%;right:5%}.navigation-button-overview{position:absolute;bottom:10%;left:5%}.display-button{pointer-events:auto;background-color:#fff9;border:1px solid #aaa;border-radius:6px;padding:0 16px;cursor:pointer;transition:all .2s ease;font-weight:700;margin-right:8px}.display-button:last-child{margin-right:0}.display-button:hover{background-color:#ffffffe6}.display-button.active{background-color:#333;color:#fff;border-color:#333}.display-button.active p{color:#fff}.nav-icon{width:24px;height:24px}.rotate-90{transform:rotate(90deg)}.block-info-container{position:absolute;right:5%;top:50%;transform:translateY(-50%);max-width:400px;background-color:#fffc;padding:20px;border-radius:10px;pointer-events:auto;width:25%}.knob{width:20px;height:20px;border-radius:50%;background:#f0f0f0;border:2px solid #000;cursor:grab;box-shadow:0 0 6px #00000059;transition:background .15s ease}.knob:hover,.knob--active{background:#fcba03}