main.hidePointer *{cursor:none!important}main{width:100vw;height:100vh;margin:0;padding:0;display:block}.viewport{position:relative;width:100%;height:100%;border:0;overflow:hidden;background:#111;-webkit-user-select:none;user-select:none;-touch-action:none;touch-action:none}canvas.view{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;cursor:grab}.overlay{position:absolute;left:50%;bottom:0;transform:translate(-50%);z-index:10;padding:.75rem;pointer-events:none;min-width:min(1040px,90vw);max-width:min(1040px,90vw)}.overlayBox{position:relative;overflow:hidden;pointer-events:auto;font:12px/1.2 system-ui,sans-serif;padding:.5rem .6rem;border-radius:8px;background:#0000008c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12)}.overlayBox:before{content:"";position:absolute;inset:0;background:#fff3;transform-origin:left center;transform:scaleX(calc(1 - var(--cooldown-progress, 0)));opacity:0;transition:opacity .15s ease;pointer-events:none;z-index:0}.overlayBox>*{position:relative;z-index:1}.overlayBox.cooldownActive:before{opacity:1}.cookieNotice{position:absolute;left:50%;bottom:5.2rem;transform:translate(-50%);z-index:12;max-width:min(640px,92vw);padding:.65rem .8rem;border-radius:10px;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);color:#ffffffeb;font:12px/1.4 system-ui,sans-serif;box-shadow:0 6px 20px #00000059;pointer-events:auto;display:grid;gap:.5rem}.cookieNotice p{margin:0}.cookieNotice button{justify-self:end;border:0;border-radius:6px;padding:.35rem .7rem;font:600 12px/1 system-ui,sans-serif;background:#ffe3a3;color:#1f1b12;cursor:pointer}.toolbar{display:grid;gap:.5rem;transition:opacity .18s ease}.toolbarStatus{font:700 18px/1.1 system-ui,sans-serif;text-align:center;color:#ffe3a3;text-shadow:0 1px 2px rgba(0,0,0,.75)}.toolbar.cooldownActive{opacity:.58}.zoomControls{display:grid;gap:.35rem}.zoomRow{display:grid;grid-template-columns:20px 1fr 20px;gap:.45rem;align-items:center}.zoomIcon{display:inline-flex;align-items:center;justify-content:center;font:700 16px/1 system-ui,sans-serif;color:#fffc;-webkit-user-select:none;user-select:none;pointer-events:none}.zoomControls label{font-size:11px;color:#ffffffe6}.zoomControls input[type=range]{width:100%}.swatches{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;max-width:100%}.swatches button{--swatch-size: 45px;width:var(--swatch-size);height:var(--swatch-size);border-radius:4px;border:1px solid rgba(255,255,255,.18);padding:0;cursor:pointer;transition:filter .18s ease}@media(max-width:560px){.overlay{padding:.5rem}.cookieNotice{bottom:5.8rem}.swatches{gap:5px}.swatches button{--swatch-size: 38px}}@media(max-width:380px){.swatches{gap:4px}.swatches button{--swatch-size: 32px}.cookieNotice{bottom:6.2rem}}.toolbar.cooldownActive .swatches button{filter:saturate(.65) brightness(.85)}.swatches button.selected{outline:2px solid rgba(255,255,255,.9);outline-offset:1px}.msg{margin-top:.5rem}.msg.error{color:#ffb4b4}.msg.warn{color:#ffe3a3}.cornerCredits{position:absolute;left:.9rem;bottom:.8rem;z-index:9;pointer-events:none;-webkit-user-select:none;user-select:none;min-height:1.2rem;font:600 14px/1.15 system-ui,sans-serif;letter-spacing:.01em}.cornerCredits span{font-family:Kode Mono,monospace;font-weight:500;position:absolute;left:0;bottom:0;opacity:0;transform:translateY(.3rem);transition:opacity .52s ease,transform .52s ease;white-space:nowrap;color:#969696b3;filter:contrast(1.5)}.cornerCredits span.active{opacity:1;transform:translateY(0)}.cornerWatermark{position:absolute;right:.85rem;bottom:.75rem;z-index:9;width:64px;height:64px;pointer-events:auto;-webkit-user-select:none;user-select:none;opacity:.2;image-rendering:auto;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.85)) drop-shadow(0 0 1px rgba(0,0,0,.7)) contrast(1.5)}.cornerWatermark.invert{filter:invert(1) drop-shadow(1px 1px 0 rgba(0,0,0,.85)) drop-shadow(0 0 1px rgba(0,0,0,.7)) contrast(1.5)}