body{margin:0;overflow:hidden;background-color:#000;font-family:sans-serif;touch-action:none}canvas{display:block}#main-ui{position:absolute;top:20px;left:20px;color:#fff;font-family:monospace;pointer-events:none;z-index:10}#dimension-info{position:absolute;top:20px;left:50%;transform:translate(-50%);color:#fff;font-family:Arial,sans-serif;text-align:center;text-shadow:0 0 10px #000;pointer-events:none;width:80%;z-index:10}.controls-container{position:absolute;bottom:40px;right:20px;display:flex;flex-direction:column;gap:20px;z-index:20}.control-btn{width:60px;height:60px;border-radius:50%;background:#fff3;border:2px solid rgba(255,255,255,.5);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .2s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.control-btn:active{background:#ffffff80}@media(max-width:768px){#main-ui h1{font-size:1.2em;margin:0 0 5px}#main-ui p{font-size:.9em;margin:2px 0}#dimension-info{top:10px;width:90%}#dimension-info h2{font-size:1.5em!important}#dimension-info p{font-size:1em!important}.controls-container{bottom:30px;right:30px}}