*{box-sizing:border-box}body{margin:0;background:#0d1420;color:#e8eef8;font:14px system-ui,sans-serif}header{padding:18px 22px;border-bottom:1px solid #334155;display:flex;gap:16px;justify-content:space-between;align-items:center}header strong{letter-spacing:.16em}header span{display:block;font-size:12px;color:#a7b7cb;margin-top:5px}nav{display:flex;flex-wrap:wrap;gap:6px}button,input,select{font:inherit}button{background:#25364c;border:1px solid #506580;border-radius:6px;color:#f1f5f9;padding:8px 10px;cursor:pointer}button:hover,button:focus-visible{background:#3b526e;outline:2px solid #65dfc5}main{display:grid;grid-template-columns:minmax(0,1fr) 280px;height:calc(100dvh - 125px);min-height:350px}#viewport{position:relative;min-height:300px;overflow:hidden}canvas{display:block;touch-action:none}#status{position:absolute;left:20px;top:20px;max-width:85%;padding:12px;background:#172436;z-index:2}aside{padding:18px;background:#152030;overflow:auto;border-left:1px solid #334155}h1{font-size:18px;margin:0 0 12px}p{line-height:1.6;color:#b6c5d8}label{display:block;margin:12px 0}input[type=search],select{display:block;width:100%;padding:8px;margin-top:5px;background:#0d1420;color:inherit;border:1px solid #506580;border-radius:5px}#objects{max-height:180px;overflow:auto;display:grid;gap:4px}#objects button{text-align:left;font-size:12px}article{margin:16px 0;padding:12px;background:#0d1420;white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere}footer{padding:10px 18px;font-size:11px;color:#9eb0c6}summary{cursor:pointer}small{color:#a7b7cb}@media(max-width:650px){header{padding:12px;align-items:start;flex-direction:column}main{height:auto;display:block}#viewport{height:58dvh;min-height:320px}aside{border-left:0}#objects{max-height:130px}footer{line-height:1.6}}

/* Escenario a todo el ancho, sin panel lateral. */
body{height:100dvh;display:flex;flex-direction:column}header,footer{flex-shrink:0}main{display:block;flex:1;min-height:0;height:auto}#viewport{height:100%;min-height:0;width:100%}aside[hidden]{display:none!important}footer{line-height:1.5}@media(max-width:650px){main{flex:1;min-height:0}#viewport{height:100%;min-height:0}}