:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;flex-direction:column;width:100vw;height:100dvh}#canvas-container{width:100%;height:100%;display:flex;place-items:center;place-content:center;align-content:center;justify-content:center}@media screen and (orientation: portrait){#canvas-container{height:50%}}#navigation-container{display:flex;flex-direction:row;align-content:center;justify-content:center;gap:10px}#page-info{place-content:center}#navigation-container button{padding:5px 10px;border-radius:5px;background-color:#1a1a1a;color:#fff;border:none;cursor:pointer}#mqtt-status{width:10px;height:10px;border-radius:100%;background-color:red;align-self:center}#mqtt-status.connected{background-color:#0f0}@media screen and (orientation: landscape){#navigation-container{position:absolute;bottom:0;right:0;margin:15px;padding:10px;background-color:#090909;border-radius:10px;transition:opacity .3s ease-in-out;opacity:.25}#navigation-container:hover{opacity:1}}@media screen and (orientation: portrait){#navigation-container{position:relative;flex:1;padding:20px;font-size:2em}#navigation-container button{flex:1;font-size:2.5em}#mqtt-status{position:absolute;bottom:0;right:0;margin:10px}}