*{box-sizing:border-box}body{color:#edf2f6;background:#10151c;grid-template-columns:minmax(0,1fr) 310px;min-height:100svh;margin:0;font:16px/1.5 system-ui,sans-serif;display:grid}#viewport{height:100svh;min-height:400px}aside{background:#1b2430;padding:32px 24px}h1{margin:0 0 20px;font-size:30px;line-height:1.15}p{color:#bccbd7}label,small{margin-top:18px;display:block}small{color:#bccbd7;font-size:12px}a{color:#a8d9ff}select,button{font:inherit;color:inherit;background:#243549;border:1px solid #8da8bf;border-radius:4px;width:100%;margin-top:8px;padding:10px}button{cursor:pointer}fieldset{border:0;margin:24px 0;padding:0}legend{font-weight:600}input[type=range]{accent-color:#a8d9ff;width:100%}.check{align-items:center;gap:10px;display:flex}input[type=checkbox]{accent-color:#a8d9ff;width:20px;height:20px}output{float:right;font-variant-numeric:tabular-nums}:focus-visible{outline-offset:4px;outline:3px solid #a8d9ff}#error{color:#ffb6aa}canvas{outline-offset:-4px}@media (max-width:700px){body{grid-template-columns:1fr}#viewport{height:58svh}aside{padding:24px}h1{font-size:26px}}@media (min-width:701px){body[data-demo=robot] aside{height:100svh;overflow-y:auto}body[data-demo=robot] label,body[data-demo=robot] small{margin-top:12px}}