main{max-width:1050px}.studio{background:white;border:1px solid #e2e5d9;padding:22px;border-radius:25px;box-shadow:0 8px 0 #e9eddf}.tools{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.tools h2{font-size:13px;color:#557166;margin:0 0 10px}.palette{display:grid;grid-template-columns:repeat(12,44px);gap:10px;max-width:100%}.swatch{width:44px;height:44px;border:2px solid #ffffff;border-radius:50%;background:var(--color);box-shadow:0 0 0 1px #a4b3a2;position:relative}.swatch[aria-pressed=true]{outline:3px solid #172c40;outline-offset:3px}.swatch[aria-pressed=true]::after{content:'✓';color:var(--check);font-size:23px;font-weight:bold}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions button{padding:12px 15px}.actions button:disabled{opacity:.45;cursor:default}.paper{position:relative;max-width:850px;margin:auto;border:1px solid #d8dfd1;border-radius:12px;overflow:hidden;background:white}.paper canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation}.paper canvas:focus-visible{outline:4px solid #bf6c2d;outline-offset:-4px}#cursor{position:absolute;width:20px;height:20px;border:3px solid #ec5438;border-radius:50%;box-shadow:0 0 0 2px white;transform:translate(-50%,-50%);pointer-events:none}.message{font-size:15px;min-height:23px}.keyboard-tip{text-align:center;font-size:11px;color:#748079;margin-bottom:0}@media(max-width:650px){main{padding:24px 10px 5px}.studio{padding:14px 10px}.tools{gap:16px}.palette{grid-template-columns:repeat(6,44px);gap:10px}.swatch{width:44px;height:44px}.actions{width:100%}.actions button{flex:1;font-size:12px;padding:12px 8px}.message{font-size:13px}.gentle{font-size:12px;line-height:1.5}.keyboard-tip{display:none}}

@media(min-width:651px) and (max-width:850px){.palette{grid-template-columns:repeat(8,44px)}}@media(max-width:370px){.palette{gap:6px}}