*{box-sizing:border-box}body{margin:0;background:#f3eedf;color:#494737;font:15px system-ui}header{padding:20px 28px;display:flex;gap:30px;align-items:center;border-bottom:1px solid #d8cfb9}nav{display:flex;gap:18px}a{color:#536845}nav a{text-decoration:none;padding:8px}.active{background:#dde3cc;border-radius:8px}#status{margin-left:auto;font-size:13px}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;padding:28px}.preview{min-width:0}.heading h1{font:32px Georgia;margin-bottom:8px}.heading p{color:#77715f}canvas{width:100%;background:repeating-conic-gradient(#ddd9cc 0% 25%,#eeeade 0% 50%) 0/28px 28px;border-radius:14px}aside{background:#fffcf3;border:1px solid #dfd7c4;padding:22px;border-radius:14px}h2{font:22px Georgia;margin:18px 0}label{display:block;margin:12px 0}select,input:not([type=checkbox]),button{width:100%;margin-top:6px;padding:9px;border:1px solid #c8c6ad;border-radius:6px;background:#faf8ee;color:inherit}button{cursor:pointer;background:#dce5cd}input[type=range]{padding:0;accent-color:#657c4d}meter{width:100%;margin-top:12px}aside p{font-size:13px;line-height:1.5;color:#736e5d}#open{display:block;margin-top:12px}.stream{background:transparent;overflow:hidden}.stream header,.stream aside,.stream .heading,.stream #pose{display:none}.stream main{display:block;padding:0}.stream canvas{display:block;border-radius:0;background:transparent;width:100vw;height:100vh;object-fit:contain}@media(max-width:900px){main{grid-template-columns:1fr}}

.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.extras{border-top:1px solid #ddd2b8;margin-top:22px}canvas{touch-action:none}.preview{position:sticky;top:20px;align-self:start}.stream .preview{position:static}

[hidden]{display:none!important}
@media(max-width:900px){.preview{position:static}header{flex-wrap:wrap;gap:10px}nav{flex-wrap:wrap}}