:root{color:#1c1b19;background:#e7e2da;font-family:Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%}#app{display:grid;grid-template-rows:auto auto 1fr auto;min-height:100%}header,aside{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 16px;background:#f6f3ee}h1,p,ul{margin:0}h1{font-size:18px;font-weight:600}p,li{font-size:14px;line-height:1.4}header p,aside{color:#5c574f}.actions{display:flex;flex-wrap:wrap;gap:8px}button{border:1px solid #c9c2b6;background:#fff;color:#1c1b19;border-radius:6px;padding:8px 12px;font:inherit;cursor:pointer}button:hover{background:#f0ebe3}.colors{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px 16px;background:#f6f3ee;border-top:1px solid #e4ddd3}.colors label{display:flex;align-items:center;gap:6px;font-size:13px;color:#5c574f}.colors input[type=color]{width:36px;height:26px;padding:0;border:1px solid #c9c2b6;border-radius:4px;background:#fff;cursor:pointer}#view{position:relative;min-height:0}#view canvas{display:block;width:100%;height:100%}aside ul{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;list-style:none}@media(max-width:800px){header,aside{flex-direction:column;align-items:flex-start}}