@media (min-width: 768px){main:has(>aside){flex-direction:row;align-items:flex-start}main:has(>aside)>section{flex:3 1 0}main:has(>aside)>aside{flex:1 1 0;min-width:16rem}}main>section{margin:0;position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden}main>section canvas{display:block;width:100%;height:100%}main :is(section,aside) :is(ul,ol){list-style:none;margin:0;display:grid;gap:.2rem;padding:1px}main>aside{display:flex;flex-direction:column;gap:.5rem}main fieldset{border:1px solid rgba(128,128,128,.3);border-radius:.35rem;padding:.5rem .75rem .6rem;margin:0;display:grid;gap:.4rem}main legend{padding:0 .4rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7}main legend button{font-size:.75rem;opacity:.75;margin-left:.4rem}main fieldset fieldset{border:0;padding:0}main fieldset label{display:grid;grid-template-columns:6rem 1fr 3rem;align-items:center;gap:.5rem;font-size:.9rem}main fieldset label:has(input[type=checkbox]){grid-template-columns:auto 1fr}main fieldset label:has(input[type=color]){grid-template-columns:6rem 1fr}main fieldset>select,main fieldset>textarea{width:100%}main input[type=range]{width:100%}main menu{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}main menu li{display:contents}main aside small{font-size:.8rem;opacity:.7}main :is(ul,ol) li:has(>label){display:flex;align-items:center;gap:.25rem}main :is(ul,ol) li>label{flex:1;display:flex;align-items:center;gap:.4rem;padding:.15rem .4rem;cursor:pointer;border-radius:.25rem}main :is(ul,ol) li>label:hover{background:color-mix(in srgb,currentColor 8%,transparent)}main :is(ul,ol) li>label:has(:checked){outline:1px solid color-mix(in srgb,currentColor 40%,transparent);font-weight:600}main :is(ul,ol) li>label>span:empty{flex:none;width:.8rem;height:.8rem;border-radius:.2rem;border:1px solid color-mix(in srgb,currentColor 30%,transparent)}main :is(ul,ol) li>label~button{opacity:.6}main :is(ul,ol) li>label~button:disabled{opacity:.25}main li>label em{font-style:normal;font-size:.7rem;opacity:.5}main [role=group]:has(input[type=radio]){display:flex}main [role=group] label{flex:1;display:flex;align-items:center;justify-content:center;gap:.2rem;padding:.2rem 0;opacity:.5;cursor:pointer}main [role=group] label:has(em){opacity:.8}main [role=group] label:has(:checked){opacity:1;font-weight:600}main [role=group] em{font-style:normal;font-size:.55rem;vertical-align:super;opacity:.7}main>section>svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}main>section>menu{position:absolute;z-index:2;gap:.35rem}main>section>menu :is(button,output){height:32px;margin:0;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#ffffffd9;color:#333;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #00000014}main>section>menu button{width:32px;padding:0;cursor:pointer}main>section>menu output{min-width:3rem;padding:0 .5rem;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}main>section>menu button:hover{background:#fff}main>section>menu button[aria-pressed=true]{background:#2850dceb;color:#fff;border-color:#2850dc}main>section>footer{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.4rem;padding:.6rem .8rem .7rem;background:linear-gradient(to top,color-mix(in srgb,var(--paper) 70%,transparent),transparent);color:var(--ink);font-size:.75rem;pointer-events:none}main>section>footer>div{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;pointer-events:auto}main>section>footer label{display:flex;align-items:center;gap:.35rem}main>section>footer label span{opacity:.8}main>section>footer input[type=range]{flex:1}main>section>footer output{min-width:2.6rem;text-align:right;opacity:.85}main>section>footer button{white-space:nowrap;font-weight:600;padding:.2rem .6rem}