html[data-hide-ui=true] .masthead,html[data-hide-ui=true] .hud-toggle,html[data-hide-ui=true] footer{display:none}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;background:#020305;color:#d5d5cd;font-family:Arial,sans-serif}canvas{position:absolute;width:100%;height:100%;touch-action:none}.masthead{position:absolute;top:42px;left:48px;pointer-events:none}.overline{font:10px monospace;letter-spacing:3px;color:#7d939d}h1{font-size:38px;letter-spacing:9px;font-weight:400;margin:15px 0 9px}header p{font:9px monospace;letter-spacing:2.3px;color:#9b9c93}button,select{font:10px monospace;color:#b7c5c9;background:#11191dcc;border:1px solid #354047;cursor:pointer}button{padding:11px 12px}button:hover,button.active{border-color:#bd9867;color:#ecd3a3}.hud-toggle{position:absolute;right:34px;top:34px;z-index:2}aside{position:absolute;right:34px;top:82px;bottom:70px;width:284px;background:#080d11dc;border:1px solid #26333c;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:18px;display:flex;flex-direction:column;gap:17px;box-shadow:0 14px 60px #0005}.panel-title{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1px}.live{font-size:9px;color:#86a797}.quality{display:flex;justify-content:space-between;align-items:center}.quality label,.debug{font:9px monospace;letter-spacing:1px;color:#798f99}select{padding:7px;max-width:100%}.presets{display:grid;grid-template-columns:1fr 1fr;gap:5px}.presets button{font-size:8px;text-align:left;padding:10px 7px}.transport{display:flex;gap:6px}.transport button:first-child{flex:1}.debug{display:flex;flex-direction:column;gap:8px}.sliders{overflow:auto;scrollbar-width:thin;scrollbar-color:#435460 transparent;flex:1;padding-right:6px}.sliders label{display:block;margin-bottom:17px;font:10px monospace;color:#a0b0b7}.sliders span{display:flex;justify-content:space-between}.sliders output{color:#d8be91}input[type=range]{width:100%;height:3px;accent-color:#d9b983;margin:12px 0 0;cursor:pointer}.keys{font:9px/1.9 monospace;color:#6d838e;border-top:1px solid #25313a;padding-top:12px}footer{position:absolute;bottom:30px;left:48px;right:34px;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1px;color:#788b95;pointer-events:none}.recovery{position:absolute;top:45%;width:100%;text-align:center;color:#e6c599;background:#111d;padding:22px}@media(max-width:700px){.masthead{top:26px;left:22px}.overline{font-size:8px;letter-spacing:1px}h1{font-size:23px;letter-spacing:5px}header p{font-size:7px;letter-spacing:1px}.hud-toggle{top:auto;bottom:22px;right:18px}aside{inset:auto 18px 64px;width:auto;height:52vh;gap:12px}.presets{grid-template-columns:repeat(4,1fr)}.presets button{font-size:7px}footer{left:20px;bottom:27px;right:150px;font-size:7px}footer span:last-child{display:none}}