*{box-sizing:border-box}body{margin:0;background:#101923;color:#eaf2fa;font:16px system-ui,sans-serif}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;height:100dvh}.viewport{min-height:420px;position:relative}canvas{width:100%;height:100%;display:block;touch-action:none}aside{padding:24px;overflow:auto;border-left:1px solid #415366}h1{font-size:1.6rem;margin:8px 0 20px}h2{font-size:1rem;margin-top:24px}.eyebrow{color:#8edfff;font-size:.8rem;letter-spacing:.12em}dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}dd{margin:0;font-weight:700}button{display:block;width:100%;margin:10px 0;padding:11px;border:1px solid #77c8ea;border-radius:5px;background:#204c65;color:white;font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:hover:enabled{background:#316f8c}.help{color:#b9cbd9;font-size:.85rem;line-height:1.6}#status{color:#ffe399}ol{padding-left:22px;font-size:.85rem}li{margin:8px 0}@media(max-width:800px){main{grid-template-columns:1fr;height:auto}.viewport{height:65dvh}aside{border-left:0}}