:root{font-family:ui-sans-serif,system-ui,sans-serif;color:#233d36;background:#eee9de;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #a1aca1;background:transparent;color:inherit;padding:.7rem .9rem;border-radius:4px;margin:.18rem;transition:background .15s}button:hover{background:#d9dfcf}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b85e40;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2.2rem;border-bottom:1px solid #bac3b5;font-size:.75rem;letter-spacing:.12em}.heading{padding:2.2rem 3rem}.heading>p:first-child{font-size:.7rem;letter-spacing:.2em}h1{font-size:clamp(2.5rem,5vw,5.6rem);letter-spacing:-.06em;line-height:1.05;margin:.5rem 0}h1 em{font-family:Georgia,serif;font-weight:400;color:#aa6046}h2{font-size:.85rem;letter-spacing:.04em}.workspace{display:grid;grid-template-columns:250px minmax(300px,1fr) 260px;gap:1px;background:#b9c1b4;border-block:1px solid #b9c1b4;min-height:80vh}.workspace>aside{padding:1.3rem;background:#eee9de}.stage{background:#dfe4d7;padding:1.4rem}.stage-top{display:flex;justify-content:space-between;font-size:.7rem;margin-bottom:1rem}.stage canvas{display:block;width:min(100%,640px);height:auto;aspect-ratio:1;margin:auto;image-rendering:pixelated;box-shadow:0 8px 45px #233d3620}.stage>p{font-size:.8rem}.pixels{display:grid;grid-template-columns:repeat(16,1fr);gap:1px;margin:1rem 0}.pixels button{width:100%;aspect-ratio:1;padding:0;margin:0;border:0;border-radius:0}.controls{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}fieldset{border:1px solid #9fad9b;font-size:.75rem}label{display:block;margin:.55rem 0;font-size:.8rem}input[type=number]{width:80px;float:right}input[type=range]{width:100%}input[type=color]{display:block;width:100%;height:35px}aside p,footer p{font-size:.75rem;line-height:1.55}aside>button{display:block;width:100%;text-align:left}.note{border-top:1px solid #bbc5b6;padding-top:1rem}.editor,footer{padding:1.5rem 3rem}.editor textarea{display:block;width:100%;height:160px;background:#f7f4ec;border:1px solid #a1aca1;padding:1rem;font-family:monospace}.gpu canvas{width:100%;max-width:512px;image-rendering:auto}.gpu:empty{min-height:0}.focus .heading,.focus .editor,.focus footer{display:none}.focus .workspace{min-height:calc(100vh - 70px)}@media(max-width:1000px){.workspace{grid-template-columns:210px 1fr}.workspace>aside:last-child{grid-column:1/-1}.controls{grid-template-columns:1fr}}@media(max-width:650px){.workspace{grid-template-columns:1fr}.workspace>aside:last-child{grid-column:auto}.heading,.editor,footer{padding:1rem}.pixels{max-width:300px}header{padding:.7rem;gap:.6rem}.stage{padding:.6rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}canvas[hidden]{display:none!important}