:root{font-family:system-ui,sans-serif;color:#392f5a;background:#fff6df}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:1rem;justify-content:space-between;align-items:center;padding:.7rem 1rem;background:#ffcf56;flex-wrap:wrap}h1{margin:0}.settings,.tools{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center}main{display:grid;grid-template-columns:160px minmax(0,1fr);gap:1rem;padding:1rem}nav{display:grid;gap:.5rem;align-content:start}button{border:2px solid #392f5a;border-radius:12px;padding:.65rem;background:#fff;color:#392f5a;font-weight:700;cursor:pointer}button[aria-current=true],button[aria-pressed=true]{background:#72ddf7}.studio{min-width:0}canvas{display:block;width:min(100%,900px);height:auto;background:#fff;border:4px solid #392f5a;border-radius:18px;touch-action:none;outline-offset:4px}canvas:focus{outline:5px solid #087e8b}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.reduce-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}@media(max-width:700px){main{grid-template-columns:1fr;padding:.6rem}nav{grid-template-columns:repeat(3,1fr)}header{align-items:flex-start}}@media(orientation:landscape)and (max-height:600px){main{grid-template-columns:140px 1fr}.studio p{margin:.3rem 0}canvas{max-height:72vh;width:auto;max-width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}