:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#efe5cc;background:#182d31;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100dvh;padding:28px clamp(18px,5vw,88px);max-width:1800px;margin:auto}header{padding:0 0 30px;border-bottom:1px solid #667775;margin-bottom:30px}.badge{font-size:11px;letter-spacing:.25em;color:#e6ad73}h1{font-size:clamp(42px,6vw,84px);font-weight:500;letter-spacing:-.06em;margin:12px 0}h1 i{font-family:Georgia,serif;font-weight:400;color:#eda878}p{font-size:14px;line-height:1.6;color:#b8c4bb}h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:18px 0}.workspace{display:grid;grid-template-columns:minmax(240px,310px) 1fr;gap:40px}.tiles{display:grid;grid-template-columns:repeat(16,1fr);margin-top:18px;aspect-ratio:1}.tiles button{padding:0;border:0;min-height:0;border-radius:0;aspect-ratio:1}.tiles button:hover{outline:2px solid white;z-index:1}.art{position:relative;width:min(100%,780px);aspect-ratio:1;margin:auto;background:#f3e3c6;box-shadow:0 18px 60px #0003}.art canvas,.art svg{position:absolute;width:100%;height:100%;inset:0;image-rendering:pixelated}.art svg{cursor:crosshair}button{background:#284247;border:1px solid #678078;border-radius:5px;color:#f2e7d0;padding:10px 13px;cursor:pointer;font:inherit;font-size:12px;margin:3px 3px 3px 0}button:hover,button[aria-pressed=true]{background:#3e5d60}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffbd75;outline-offset:2px}.primary{background:#c86543;border-color:#e39e6d}.row{display:flex;flex-wrap:wrap;gap:5px}.caption{font-size:11px;color:#acb8af}.status{border-left:3px solid #eda878;background:#233d41;padding:14px;min-height:60px}.editor{border-top:1px solid #667775;margin-top:35px;padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:30px}textarea{width:100%;height:240px;background:#10262b;color:#f0dfbd;border:1px solid #69827b;padding:14px;font:12px/1.5 monospace;resize:vertical}footer{margin-top:35px;border-top:1px solid #667775;padding-top:20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}footer small{color:#9caea8;font-size:11px;max-width:620px}label{display:flex;align-items:center;gap:16px}input[type=color]{border:0;background:none;width:52px;height:36px}@media(max-width:750px){.workspace,.editor{grid-template-columns:1fr}.tiles{max-width:320px}main{padding:20px}.art{width:100%}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}header{animation:appear .5s ease-out}@keyframes appear{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}}.focused header,.focused aside,.focused .editor,.focused footer{display:none}.focused .workspace{grid-template-columns:1fr}.focused .art{width:min(75dvh,90vw)}