.site-loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#e7dfce;transition:opacity .45s ease,visibility .45s;isolation:isolate}
.site-loader::before{content:'';position:absolute;inset:0;opacity:.22;background:repeating-radial-gradient(ellipse at 30% 40%,#a1957c30 0 1px,transparent 1px 4px);pointer-events:none}
.site-loader.is-ready{opacity:0;visibility:hidden;pointer-events:none}
.loading-inner{width:clamp(130px,22vw,240px);position:relative}
.loading-inner>img{width:100%;filter:drop-shadow(0 7px 10px #776b4e18)}
.loading-paws{display:flex;justify-content:center;gap:12px;margin:16px 0 0;height:10px}
.loading-paws i{width:7px;height:7px;background:#8a8d6c;border-radius:45% 55% 50% 40%;animation:paw-light 1.2s ease-in-out infinite}
.loading-paws i:nth-child(2){animation-delay:.16s}.loading-paws i:nth-child(3){animation-delay:.32s}
@keyframes paw-light{0%,75%,100%{opacity:.25;transform:scale(.8)}35%{opacity:.9;transform:scale(1.1)}}
.preview-frame{position:absolute;left:4.9%;top:23.2%;width:43.6%;height:44.5%;overflow:hidden;border-radius:2%;isolation:isolate;background:#d9d2bc;perspective:900px}
#generator .preview-frame .pfp-preview{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:fill;transform-origin:center;will-change:transform,opacity,filter}
.pfp-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;pointer-events:none}
.pfp-loader{position:absolute;inset:0;z-index:5;background:#e7dfcee8;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .18s ease;pointer-events:none}
.pfp-loader>img{width:46%;height:auto;object-fit:contain!important}.pfp-loader .loading-paws{gap:7px;margin-top:8px}
.preview-frame.is-loading .pfp-loader{opacity:1;visibility:visible}
.thumbnail-tray button{background:#d3cbb6}.thumbnail-tray img{transition:opacity .2s ease}
@media(prefers-reduced-motion:reduce){.loading-paws i{animation:none;opacity:.55}.site-loader,.pfp-loader{transition:none}}
/* Clip the baked corner remnants without changing any UI hit coordinates. */
#generator{background:transparent;border-radius:3%;clip-path:inset(.25% round 3%);box-shadow:none}
#generator .generator-art{border-radius:3%}
.thumbnail-tray{border-radius:3%;overscroll-behavior:contain}
/* The photographed keys have tapered shoulders, not rectangular halos. */
.hotspot.key{border-radius:0}
.hotspot.key::after{inset:0;box-shadow:none!important;border-radius:0;clip-path:polygon(15% 4%,84% 4%,89% 6%,93% 13%,97% 68%,98% 83%,95% 92%,89% 96%,10% 96%,4% 92%,2% 84%,3% 68%,7% 15%,10% 8%);background:rgba(255,245,213,.24);mix-blend-mode:soft-light;transition:opacity .16s ease}
.hotspot.key:hover::after{opacity:1}
.hotspot.key:active::after{background:rgba(96,83,56,.24)}
.hotspot.key:focus-visible{outline:none}
.hotspot.key:focus-visible::after{opacity:1;background:rgba(255,245,213,.38)}
@media(prefers-reduced-motion:reduce){.hotspot.key::after{transition:none}}
/* Scale each artboard as one unit: preserve its native ratio and all hotspots. */
html,body{background:#d1c8b4}
body::before{display:block;position:fixed;inset:-28px;content:'';background:url('assets/full-desktop.png') center/cover no-repeat;filter:blur(24px) brightness(.8);pointer-events:none}
main{height:100dvh;width:100%;display:grid;place-items:center;overflow:hidden}
.stage{width:min(100vw,124.95544dvh);height:auto;aspect-ratio:1402 / 1122;container-type:inline-size;flex:none;box-shadow:0 0 65px #403f3330}
.art,.blink{width:100%;height:100%}.art img,.blink img{width:100%;height:100%;object-fit:contain}
.ca-text{font-size:clamp(11px,1.8cqw,21px)}
.ca-plaque{width:40%;min-width:0}
.ca-plaque.has-address .ca-text{font-size:clamp(8px,1.2cqw,14px)}
#generator .preview-frame .pfp-preview,.pfp-ghost{object-fit:cover}
@media(max-width:640px){body::before{background-image:url('assets/full-mobile.png')}.stage{width:min(100vw,47.33955dvh);height:auto;aspect-ratio:863 / 1823}.ca-plaque{width:86%}.ca-text{font-size:clamp(11px,4cqw,18px)}.ca-plaque.has-address .ca-text{font-size:clamp(8px,2.55cqw,12px)}}