*{box-sizing:border-box}html,body{margin:0;background:#fafafa;color:#29292b;font-family:monospace}main{width:100%;height:100svh;min-height:580px;position:relative;overflow:hidden}header{position:absolute;left:25px;top:24px;font-size:10px;letter-spacing:.1em;z-index:2}header span:last-child{display:none}#stage{position:absolute;inset:15px 0 95px}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.title{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px}.title h1,.title p{display:none}.controls{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #eee;border-radius:15px;background:white;box-shadow:0 3px 10px #00000008}button{font-family:inherit;font-size:11px;border:0;background:#f3f3f3;color:#333;height:38px;min-width:38px;padding:0 12px;cursor:pointer;border-radius:25px;white-space:nowrap}button:hover{background:#e5e5e5}button:focus-visible{outline:2px solid #555;outline-offset:3px}button span{margin-left:6px}#demo{background:#29292b;color:#fff}footer{position:absolute;bottom:115px;left:0;right:0;text-align:center;font-size:9px;color:#a0a0a0;pointer-events:none}footer span:last-child{display:none}.swatch{padding:0;width:27px;min-width:27px;height:27px;border:2px solid white;box-shadow:0 0 0 1px #ddd;background:conic-gradient(#ddd,#555,#fff,#999,#ddd)}.swatch.gold{background:conic-gradient(#b28d4a,#352514,#d0ad59,#66512e,#b28d4a)}.swatch.ink{background:conic-gradient(#303941,#bcd1dd,#27333c,#7d939f,#303941)}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #333}#error{padding:20%;text-align:center}@media(max-width:600px){header{font-size:8px;top:15px;left:15px}#stage{inset:25px 0 130px}.controls{gap:5px;padding:8px}button{font-size:9px;padding:0 10px}.title{bottom:45px}footer{bottom:123px;font-size:8px}}

@media(max-width:600px){.controls{flex-wrap:wrap;justify-content:center;max-width:310px;width:calc(100vw - 24px)}button{height:38px}.title{bottom:22px}footer{bottom:133px}#stage{bottom:145px}}