.popup-home {
  --home-shell-1: #fffdf7;
  --home-shell-2: #eee2cb;
  --home-shell-edge: #cdbb9d;
  --home-shell-shine: rgb(255 255 255 / 82%);
  position: relative;
  width: 100%;
  aspect-ratio: 1.72;
  padding: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--home-shell-edge) 64%, white);
  border-radius: 28px;
  background:
    linear-gradient(152deg, var(--home-shell-shine), transparent 25%),
    linear-gradient(160deg, var(--home-shell-1) 0 58%, var(--home-shell-2));
  box-shadow:
    inset 0 2px 1px rgb(255 255 255 / 86%),
    inset 0 -4px 8px rgb(117 89 51 / 12%),
    0 12px 20px rgb(65 49 29 / 14%);
  isolation: isolate;
}

.popup-home[data-frame="mint"] { --home-shell-1:#e7fff5;--home-shell-2:#aee4cf;--home-shell-edge:#6fb9a2;--home-shell-shine:rgb(255 255 255 / 72%); }
.popup-home[data-frame="lilac"] { --home-shell-1:#f4efff;--home-shell-2:#cbb7ee;--home-shell-edge:#967abe;--home-shell-shine:rgb(255 255 255 / 72%); }
.popup-home[data-frame="night"] { --home-shell-1:#344568;--home-shell-2:#131d38;--home-shell-edge:#7888b0;--home-shell-shine:rgb(182 207 255 / 22%); }
.popup-home[data-frame="peach"] { --home-shell-1:#fff0e8;--home-shell-2:#f7b49c;--home-shell-edge:#d7796f;--home-shell-shine:rgb(255 255 255 / 76%);border-radius:32px 25px 32px 25px; }
.popup-home[data-frame="wood"] { --home-shell-1:#c98b58;--home-shell-2:#855238;--home-shell-edge:#613a29;--home-shell-shine:rgb(255 240 206 / 30%);border-radius:22px; background:linear-gradient(152deg,var(--home-shell-shine),transparent 25%),repeating-linear-gradient(8deg,rgb(91 48 27 / 10%) 0 2px,transparent 2px 8px),linear-gradient(160deg,var(--home-shell-1) 0 58%,var(--home-shell-2)); }
.popup-home[data-frame="starry"] { --home-shell-1:#3b477c;--home-shell-2:#171d46;--home-shell-edge:#8a79be;--home-shell-shine:rgb(199 218 255 / 26%);border-radius:34px 21px 34px 21px;background:radial-gradient(circle at 13% 24%,#fff2ae 0 1px,transparent 2px),radial-gradient(circle at 82% 20%,#b9dcff 0 1px,transparent 2px),radial-gradient(circle at 89% 75%,#fff 0 1px,transparent 2px),linear-gradient(152deg,var(--home-shell-shine),transparent 25%),linear-gradient(160deg,var(--home-shell-1) 0 58%,var(--home-shell-2)); }
.popup-home[data-frame="none"] { --home-shell-1:#f0f1f2;--home-shell-2:#d5d8dc;--home-shell-edge:#a7adb4;--home-shell-shine:rgb(255 255 255 / 55%); }

.popup-home__screen {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--home-shell-edge) 70%, #5b4c39);
  border-radius: 19px;
  background: #f9c995;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--home-shell-edge) 33%, white),
    inset 0 4px 7px rgb(60 38 18 / 20%);
}

.popup-home__background,
.popup-home__pet-slot,
.popup-home__frame-overlay { position: absolute; inset: 0; }
.popup-home__background { z-index: 1; overflow: hidden; image-rendering: auto; }
.popup-home__pet-slot { z-index: 2; display: grid; align-items: end; justify-items: center; padding-bottom: 4%; pointer-events: none; }
.popup-home__frame-overlay { z-index: 3; pointer-events: none; }

.popup-home__frame-overlay::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 21px;
  content: "";
}

.popup-home[data-frame="night"] .popup-home__frame-overlay::after {
  position: absolute;
  inset: 5px 10px auto auto;
  width: 3px;
  height: 3px;
  background: #fff4a5;
  box-shadow: -20px 7px #8bdcff, -246px 5px #fff4a5, -258px 19px #bca8ff;
  content: "";
}

.popup-home[data-frame="peach"] .popup-home__screen { border-radius:22px 16px 22px 16px; }
.popup-home[data-frame="peach"] .popup-home__frame-overlay::before { inset:7px;border:2px dotted rgb(255 247 229 / 74%);border-radius:25px 18px 25px 18px; }
.popup-home[data-frame="peach"] .popup-home__frame-overlay::after { position:absolute;inset:7px;background:radial-gradient(circle at 4px 4px,#fff5dc 0 2px,#f59a91 2.5px 5px,transparent 5.5px),radial-gradient(circle at calc(100% - 4px) 4px,#fff5dc 0 2px,#f59a91 2.5px 5px,transparent 5.5px),radial-gradient(circle at 4px calc(100% - 4px),#fff5dc 0 2px,#f59a91 2.5px 5px,transparent 5.5px),radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),#fff5dc 0 2px,#f59a91 2.5px 5px,transparent 5.5px);content:""; }
.popup-home[data-frame="wood"] .popup-home__screen { border-width:4px;border-color:#68412e;border-radius:14px;box-shadow:0 0 0 3px #d5a06c,inset 0 4px 7px rgb(55 27 14 / 24%); }
.popup-home[data-frame="wood"] .popup-home__frame-overlay::before { inset:7px;border:1px dashed rgb(255 224 177 / 48%);border-radius:17px; }
.popup-home[data-frame="wood"] .popup-home__frame-overlay::after { position:absolute;inset:7px;background:radial-gradient(circle at 3px 3px,#f3ca8e 0 2px,#65402c 2.5px 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 3px) 3px,#f3ca8e 0 2px,#65402c 2.5px 3.5px,transparent 4px),radial-gradient(circle at 3px calc(100% - 3px),#f3ca8e 0 2px,#65402c 2.5px 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#f3ca8e 0 2px,#65402c 2.5px 3.5px,transparent 4px);content:""; }
.popup-home[data-frame="starry"] .popup-home__screen { border-color:#8c84c8;border-radius:25px 14px 25px 14px;box-shadow:0 0 0 4px rgb(192 184 255 / 26%),inset 0 4px 9px rgb(3 5 24 / 40%); }
.popup-home[data-frame="starry"] .popup-home__frame-overlay::before { inset:7px;border:1px dotted rgb(226 224 255 / 70%);border-radius:28px 17px 28px 17px; }
.popup-home[data-frame="starry"] .popup-home__frame-overlay::after { position:absolute;inset:6px;background:radial-gradient(circle at calc(100% - 5px) 5px,#ffe995 0 4px,#9a8ccc 4.5px 6px,transparent 6.5px),radial-gradient(circle at 5px 12px,#bde6ff 0 2px,transparent 2.5px),radial-gradient(circle at 7px calc(100% - 5px),#ffe995 0 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 12px) calc(100% - 5px),#d8c3ff 0 2px,transparent 2.5px);content:""; }

.popup-home__background {
  background: linear-gradient(#e5e8eb 0 72%,#c8cdd2 72% 75%,#d8dce0 75%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.popup-home__background::before,
.popup-home__background::after,
.popup-home__decor { position:absolute;display:block;content:""; }

.popup-home__background::before { z-index:0;inset:0;background:linear-gradient(145deg,rgb(255 255 255 / 14%),transparent 38% 74%,rgb(255 221 191 / 6%));pointer-events:none; }
.popup-home__background::after { z-index:4;inset:0;background:radial-gradient(ellipse at 50% 38%,transparent 42%,rgb(45 30 35 / 8%) 100%);box-shadow:inset 0 0 18px rgb(65 41 31 / 8%);pointer-events:none; }
.popup-home__decor { z-index:1; }

.popup-home[data-background="room"] .popup-home__background { background-image:url("./home-backgrounds/clay-v1/room.webp"),linear-gradient(#f6d7a8 0 68%,#c57f4d 68% 73%,#e7a967 73%); }
.popup-home[data-background="garden"] .popup-home__background { background-image:url("./home-backgrounds/illustrated-v1/garden.webp"),linear-gradient(#8bcfe6 0 57%,#8dc96a 57% 70%,#4f8744 70%); }
.popup-home[data-background="rain"] .popup-home__background { background-image:url("./home-backgrounds/illustrated-v1/rain.webp"),linear-gradient(#8ea8b6 0 64%,#6d5a55 64% 70%,#a9826f 70%); }
.popup-home[data-background="space"] .popup-home__background { background-image:url("./home-backgrounds/illustrated-v1/space.webp"),linear-gradient(#111b3b 0 66%,#303d58 66% 73%,#59637a 73%); }
.popup-home[data-background="sakura"] .popup-home__background { background-image:url("./home-backgrounds/illustrated-v1/sakura.webp"),linear-gradient(#9ed6e8 0 52%,#9fc37e 52% 70%,#658858 70%); }
.popup-home[data-background="cafe"] .popup-home__background { background-image:url("./home-backgrounds/illustrated-v1/cafe.webp"),linear-gradient(#3f405b 0 54%,#805b4b 54% 72%,#664138 72%); }
.popup-home[data-background="coast"] .popup-home__background { background-image:url("./home-backgrounds/illustrated-v1/coast.webp"),linear-gradient(#8fd7ee 0 50%,#57b4c7 50% 72%,#e2c98f 72%); }
.popup-home[data-background="aurora"] .popup-home__background { background-image:url("./home-backgrounds/illustrated-v1/aurora.webp"),linear-gradient(#111b3e 0 57%,#29465b 57% 70%,#b8cbd5 70%); }
.popup-home[data-background="solid_milk"] .popup-home__background { background:#fff8ed; }
.popup-home[data-background="solid_mint"] .popup-home__background { background:#dff7ec; }
.popup-home[data-background="solid_lilac"] .popup-home__background { background:#eee8ff; }
.popup-home[data-background="solid_graphite"] .popup-home__background { background:#303642; }
.popup-home[data-background="gradient_dawn"] .popup-home__background { background:linear-gradient(135deg,#ffe3d4 0%,#f1ddff 52%,#ddecff 100%); }
.popup-home[data-background="gradient_ocean"] .popup-home__background { background:linear-gradient(135deg,#dff7f6 0%,#bfe2f5 50%,#cfd8ff 100%); }
.popup-home[data-background="gradient_dusk"] .popup-home__background { background:linear-gradient(135deg,#4c5575 0%,#6d5f87 52%,#9a718c 100%); }
.popup-home[data-background="gradient_peach"] .popup-home__background { background:linear-gradient(135deg,#fff0dc 0%,#ffd4c5 52%,#f6c2cf 100%); }
.popup-home[data-background^="solid_"] .popup-home__background::before,
.popup-home[data-background^="solid_"] .popup-home__background::after,
.popup-home[data-background^="gradient_"] .popup-home__background::before,
.popup-home[data-background^="gradient_"] .popup-home__background::after { display:none; }
.popup-home[data-background="none"] .popup-home__background { background-image:none; }

.popup-home__decor--room-glow { inset:0;background:linear-gradient(119deg,rgb(255 246 199 / 28%),transparent 46%);opacity:.72; }
.popup-home__decor--room-dust { top:22%;left:27%;width:2px;height:2px;border-radius:50%;background:rgb(255 247 212 / 75%);box-shadow:15px 11px rgb(255 246 204 / 62%),38px -7px rgb(255 249 218 / 72%),66px 17px rgb(255 240 189 / 55%),97px 1px rgb(255 249 218 / 66%); }
.popup-home__decor--garden-cloud { top:10%;left:10%;width:18%;height:8%;border-radius:50%;background:rgb(255 255 255 / 18%);filter:blur(4px); }
.popup-home__decor--garden-fireflies { right:14%;bottom:31%;width:3px;height:3px;border-radius:50%;background:#fff1a3;box-shadow:-24px 8px #fff0a0,-51px -6px #f5ffaf,-79px 11px #fff5b8,-121px -4px #f6ffab;opacity:.58; }
.popup-home__decor--rain-drops { display:none; }
.popup-home__decor--space-stars { top:6%;left:3%;width:45%;height:48%;border-radius:50%;background:radial-gradient(circle at 18% 25%,#fff4b0 0 1px,transparent 2px),radial-gradient(circle at 37% 47%,#9bd1ff 0 1px,transparent 2px),radial-gradient(circle at 62% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 78% 58%,#d6bfff 0 1px,transparent 2px),radial-gradient(circle at 48% 76%,#fff5bd 0 1px,transparent 2px);opacity:.68; }
.popup-home__decor--sakura-petals { top:17%;left:14%;width:5px;height:3px;border-radius:80% 10% 80% 10%;background:#ffd3e0;box-shadow:28px 12px #f5a9c5,59px -7px #ffe0e8,91px 19px #f6b3cf,125px -3px #ffd8e4,161px 13px #ef9fbe,198px -9px #ffdfeb;opacity:.78; }
.popup-home__decor--cafe-light { top:-18%;right:-5%;width:58%;height:90%;border-radius:50%;background:radial-gradient(circle,rgb(255 224 165 / 22%),transparent 67%);opacity:.72; }
.popup-home__decor--coast-waves { top:40%;right:-3%;left:-3%;height:21%;background:repeating-linear-gradient(174deg,transparent 0 9px,rgb(235 255 254 / 22%) 10px 12px,transparent 13px 21px);opacity:.62; }
.popup-home__decor--aurora-shimmer { top:-20%;left:-8%;width:116%;height:79%;border-radius:50%;background:radial-gradient(ellipse at 45% 100%,transparent 47%,rgb(109 244 190 / 26%) 51% 56%,transparent 62%),radial-gradient(ellipse at 68% 100%,transparent 44%,rgb(156 128 255 / 22%) 49% 54%,transparent 61%);filter:blur(2px);opacity:.68; }

.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--room-glow,
.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--cafe-light { animation:popup-home-glow 5.2s ease-in-out infinite; }
.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--room-dust { animation:popup-home-drift 7s ease-in-out infinite; }
.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--sakura-petals { animation:popup-home-petals 7s linear infinite; }
@keyframes popup-home-petals { 0% { transform:translate(0,0);opacity:0; } 10%,90% { opacity:.8; } 100% { transform:translate(24px,45px);opacity:0; } }
.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--garden-cloud { animation:popup-home-cloud 9s ease-in-out infinite; }
.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--garden-fireflies,
.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--space-stars { animation:popup-home-stars 4.5s ease-in-out infinite; }

.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--coast-waves { animation:popup-home-waves 5.4s ease-in-out infinite; }
.popup-home[data-motion="ambient"]:not([hidden]):not([aria-hidden="true"]) .popup-home__decor--aurora-shimmer { animation:popup-home-aurora 8s ease-in-out infinite; }

@keyframes popup-home-glow { 0%,100% { opacity:.58; } 50% { opacity:.82; } }
@keyframes popup-home-drift { 0%,100% { transform:translate3d(0,0,0);opacity:.62; } 50% { transform:translate3d(7px,8px,0);opacity:.88; } }
@keyframes popup-home-cloud { 0%,100% { transform:translateX(0);opacity:.42; } 50% { transform:translateX(8px);opacity:.62; } }
@keyframes popup-home-stars { 0%,100% { opacity:.48; } 50% { opacity:.88; } }
@keyframes popup-home-rain { 0% { transform:translate3d(0,-4px,0);opacity:.42; } 100% { transform:translate3d(-4px,7px,0);opacity:.62; } }
@keyframes popup-home-waves { 0%,100% { transform:translateX(-3px);opacity:.48; } 50% { transform:translateX(3px);opacity:.72; } }
@keyframes popup-home-aurora { 0%,100% { transform:translateX(-4px) rotate(-3deg);opacity:.52; } 50% { transform:translateX(6px) rotate(-1deg);opacity:.78; } }

.popup-home__pet-slot > * { position:relative;display:block;flex:0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .popup-home * { animation: none !important; }
}

.popup-home[data-frame="arcade"] {
  --home-shell-1:#39235d;
  --home-shell-2:#17112c;
  --home-shell-edge:#8f68d4;
  --home-shell-shine:rgb(165 125 255 / 24%);
  border:2px solid #9770dd;
  border-radius:9px;
  background:repeating-linear-gradient(0deg,#9c79f00a 0 1px,transparent 1px 4px),linear-gradient(145deg,#39235d,#17112c);
  box-shadow:inset 0 2px 0 #b794ff66,inset 0 -4px 0 #080619,0 0 0 2px #211436,0 10px 22px #19102d44;
}
.popup-home[data-frame="arcade"] .popup-home__screen {
  border:3px solid #100b24;
  border-radius:3px;
  box-shadow:0 0 0 2px #3ae5da,inset 0 0 12px #09061a55;
}
.popup-home[data-frame="arcade"] .popup-home__frame-overlay::before {
  inset:5px;
  border:1px solid #a68bdb66;
  border-radius:4px;
}
.popup-home[data-frame="arcade"] .popup-home__frame-overlay::after {
  position:absolute;
  inset:0;
  background:linear-gradient(#baff36,#baff36) 8px 7px/18px 3px no-repeat,linear-gradient(#34e9e4,#34e9e4) 8px 7px/3px 12px no-repeat,linear-gradient(#baff36,#baff36) right 8px bottom 7px/18px 3px no-repeat,linear-gradient(#34e9e4,#34e9e4) right 8px bottom 7px/3px 12px no-repeat;
  content:"";
}

.popup-home[data-frame="kawaii"] {
  --home-shell-1:#263d60;
  --home-shell-2:#0d192f;
  --home-shell-edge:#aebccf;
  --home-shell-shine:rgb(218 234 255 / 24%);
  padding:20px;
  border:2px solid #b9c7d9;
  border-radius:32px;
  background:radial-gradient(circle at 76% 8px,#e9edee 0 1px,transparent 2px),radial-gradient(circle at 70% 12px,#c2d8f1 0 1px,transparent 2px),linear-gradient(145deg,#354e73,#152840 48%,#0b1427);
  box-shadow:inset 0 2px 0 #f2f4e9b3,inset 0 -4px 0 #060f22,0 0 0 2px #152139,0 12px 24px #0a14294d;
}
.popup-home[data-frame="kawaii"] .popup-home__screen {
  border:2px solid #18273f;
  border-radius:19px;
  box-shadow:0 0 0 2px #bac8d9,0 0 0 5px #344b66,inset 0 0 16px #111c3655;
}
.popup-home[data-frame="kawaii"] .popup-home__frame-overlay::before {
  inset:7px;
  border:1px solid #b8cad16b;
  border-radius:25px;
}
.popup-home[data-frame="kawaii"] .popup-home__frame-overlay::after {
  position:absolute;
  inset:5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M25 25A13 13 0 1 1 17 3a11 11 0 0 0 8 22Z' fill='%23eee8d6' stroke='%23c2cbd6' stroke-width='.7'/%3E%3C/svg%3E") 3px 2px/25px 25px no-repeat,radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#e8eadc 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 24px) calc(100% - 6px),#a9c7e4 0 1px,transparent 2px);
  content:"";
}

.popup-home[data-frame="royal"] {
  --home-shell-1:#321722;
  --home-shell-2:#160b11;
  --home-shell-edge:#b8914d;
  --home-shell-shine:rgb(255 235 181 / 20%);
  border:2px solid #c5a45e;
  border-radius:24px;
  background:
    linear-gradient(135deg,var(--home-shell-shine),transparent 24%),
    linear-gradient(90deg,transparent 0 11%,rgb(234 209 140 / 10%) 11% 11.5%,transparent 11.5% 88.5%,rgb(234 209 140 / 10%) 88.5% 89%,transparent 89%),
    linear-gradient(155deg,#3a1926,#24111a 58%,#12090e);
  box-shadow:inset 0 0 0 3px #6c492b,inset 0 0 0 4px #e1c77952,inset 0 2px 0 #fff1bd38,0 12px 24px #1a090f52;
}

.popup-home[data-frame="royal"] .popup-home__screen {
  border:2px solid #dec47a;
  border-radius:15px;
  box-shadow:0 0 0 2px #6e4930,0 0 0 3px #cfad634d,inset 0 4px 8px #230c156b;
}

.popup-home[data-frame="royal"] .popup-home__frame-overlay::before {
  inset:6px;
  border:1px solid rgb(255 235 181 / 64%);
  border-radius:19px;
  box-shadow:inset 0 0 0 2px rgb(79 38 50 / 44%);
}

.popup-home[data-frame="royal"] .popup-home__frame-overlay::after {
  position:absolute;
  top:3px;
  left:50%;
  width:46px;
  height:15px;
  border:1px solid #f1d889;
  background:linear-gradient(145deg,#f5dfa0,#b88b43 70%,#775027);
  box-shadow:inset 0 1px 0 #fff2bd,0 2px 0 #4a2632;
  clip-path:polygon(0 100%,5% 28%,26% 62%,38% 10%,50% 58%,62% 10%,74% 62%,95% 28%,100% 100%);
  content:"";
  transform:translateX(-50%);
}

/* Art41 frames keep all ornament in the shell and the noninteractive overlay. */
.popup-home:is([data-frame="pixel_mint"],[data-frame="pixel_lilac"],[data-frame="pixel_ember"]) {
  border-radius:0;
  border:3px solid var(--pixel-outline);
  background:repeating-linear-gradient(90deg,var(--pixel-step) 0 8px,transparent 8px 16px),var(--pixel-face);
  box-shadow:inset 0 0 0 3px var(--pixel-highlight),inset 0 0 0 7px var(--pixel-shadow),0 6px 0 var(--pixel-outline),0 10px 16px rgb(25 23 36 / 23%);
}
.popup-home:is([data-frame="pixel_mint"],[data-frame="pixel_lilac"],[data-frame="pixel_ember"]) .popup-home__screen {
  border:3px solid var(--pixel-outline);
  border-radius:0;
  box-shadow:0 0 0 3px var(--pixel-highlight),0 0 0 6px var(--pixel-shadow);
}
.popup-home:is([data-frame="pixel_mint"],[data-frame="pixel_lilac"],[data-frame="pixel_ember"]) .popup-home__frame-overlay::before {
  inset:7px;
  border:2px dashed var(--pixel-highlight);
  border-radius:0;
}
.popup-home[data-frame="pixel_mint"] {
  --pixel-outline:#235b57;--pixel-face:#6fd7ad;--pixel-step:#ffffff22;--pixel-highlight:#d8ffe2;--pixel-shadow:#348b78;
  padding:18px;
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
}
.popup-home[data-frame="pixel_mint"] .popup-home__frame-overlay::after {
  position:absolute;inset:0;
  background:linear-gradient(#e6ffe9,#e6ffe9) 7px 7px/12px 8px no-repeat,linear-gradient(#286e65,#286e65) 19px 7px/8px 8px no-repeat,linear-gradient(#e6ffe9,#e6ffe9) right 7px top 7px/12px 8px no-repeat,linear-gradient(#286e65,#286e65) right 19px top 7px/8px 8px no-repeat,linear-gradient(#e6ffe9,#e6ffe9) 7px bottom 7px/8px 12px no-repeat,linear-gradient(#e6ffe9,#e6ffe9) right 7px bottom 7px/8px 12px no-repeat;
  content:"";
}
.popup-home[data-frame="pixel_lilac"] {
  --pixel-outline:#46356d;--pixel-face:#bc9dec;--pixel-step:#ffffff24;--pixel-highlight:#f5dfff;--pixel-shadow:#7652a7;
  padding:22px;
  clip-path:polygon(0 30px,10px 30px,10px 16px,24px 16px,24px 6px,34px 6px,34px 0,calc(100% - 34px) 0,calc(100% - 34px) 6px,calc(100% - 24px) 6px,calc(100% - 24px) 16px,calc(100% - 10px) 16px,calc(100% - 10px) 30px,100% 30px,100% calc(100% - 30px),calc(100% - 10px) calc(100% - 30px),calc(100% - 10px) calc(100% - 16px),calc(100% - 24px) calc(100% - 16px),calc(100% - 24px) calc(100% - 6px),calc(100% - 34px) calc(100% - 6px),calc(100% - 34px) 100%,34px 100%,34px calc(100% - 6px),24px calc(100% - 6px),24px calc(100% - 16px),10px calc(100% - 16px),10px calc(100% - 30px),0 calc(100% - 30px));
}
.popup-home[data-frame="pixel_lilac"] .popup-home__frame-overlay::before {
  inset:9px;
  border:3px solid #f5dfff;
  border-radius:0;
  clip-path:polygon(0 22px,12px 22px,12px 10px,22px 10px,22px 0,calc(100% - 22px) 0,calc(100% - 22px) 10px,calc(100% - 12px) 10px,calc(100% - 12px) 22px,100% 22px,100% calc(100% - 22px),calc(100% - 12px) calc(100% - 22px),calc(100% - 12px) calc(100% - 10px),calc(100% - 22px) calc(100% - 10px),calc(100% - 22px) 100%,22px 100%,22px calc(100% - 10px),12px calc(100% - 10px),12px calc(100% - 22px),0 calc(100% - 22px));
}
.popup-home[data-frame="pixel_lilac"] .popup-home__frame-overlay::after {
  position:absolute;inset:0;
  background:linear-gradient(#f9e9ff,#f9e9ff) 15px 18px/10px 10px no-repeat,linear-gradient(#603d94,#603d94) 25px 8px/10px 10px no-repeat,linear-gradient(#f9e9ff,#f9e9ff) right 15px top 18px/10px 10px no-repeat,linear-gradient(#603d94,#603d94) right 25px top 8px/10px 10px no-repeat,linear-gradient(#f9e9ff,#f9e9ff) 15px bottom 18px/10px 10px no-repeat,linear-gradient(#603d94,#603d94) 25px bottom 8px/10px 10px no-repeat,linear-gradient(#f9e9ff,#f9e9ff) right 15px bottom 18px/10px 10px no-repeat,linear-gradient(#603d94,#603d94) right 25px bottom 8px/10px 10px no-repeat,linear-gradient(#fff2ff,#fff2ff) center 5px/22px 8px no-repeat,linear-gradient(#72439b,#72439b) center 13px/10px 6px no-repeat;
  content:"";
}
.popup-home[data-frame="pixel_ember"] {
  --pixel-outline:#602c35;--pixel-face:#df7045;--pixel-step:#ffd06a33;--pixel-highlight:#ffe08a;--pixel-shadow:#a33e38;
  padding:18px;
  clip-path:polygon(0 12px,12px 12px,12px 0,24% 0,24% 9px,30% 9px,30% 0,46% 0,46% 9px,54% 9px,54% 0,70% 0,70% 9px,76% 9px,76% 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,76% 100%,76% calc(100% - 9px),70% calc(100% - 9px),70% 100%,54% 100%,54% calc(100% - 9px),46% calc(100% - 9px),46% 100%,30% 100%,30% calc(100% - 9px),24% calc(100% - 9px),24% 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px));
}
.popup-home[data-frame="pixel_ember"] .popup-home__frame-overlay::before {
  inset:8px;
  border:3px solid #ffe08a;
  border-radius:0;
  border-top-style:dotted;
  border-bottom-style:dotted;
}
.popup-home[data-frame="pixel_ember"] .popup-home__frame-overlay::after {
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,#ffe990 0 10px,#9c3836 10px 16px,#ffb54d 16px 24px) center top 2px/calc(100% - 60px) 8px no-repeat,repeating-linear-gradient(90deg,#ffb54d 0 8px,#9c3836 8px 16px,#ffe990 16px 24px) center bottom 2px/calc(100% - 60px) 8px no-repeat,linear-gradient(#fff1a6,#fff1a6) 8px 8px/8px 8px no-repeat,linear-gradient(#ffb54d,#ffb54d) 16px 16px/8px 8px no-repeat,linear-gradient(#fff1a6,#fff1a6) right 8px top 8px/8px 8px no-repeat,linear-gradient(#ffb54d,#ffb54d) right 16px top 16px/8px 8px no-repeat,linear-gradient(#fff1a6,#fff1a6) 8px bottom 8px/8px 8px no-repeat,linear-gradient(#ffb54d,#ffb54d) 16px bottom 16px/8px 8px no-repeat,linear-gradient(#fff1a6,#fff1a6) right 8px bottom 8px/8px 8px no-repeat,linear-gradient(#ffb54d,#ffb54d) right 16px bottom 16px/8px 8px no-repeat;
  content:"";
}

.popup-home[data-frame="cartoon_amber"] {
  border:4px solid #663c32;border-radius:39px 34px 43px 36px;padding:19px;
  background:radial-gradient(ellipse at 35% 10%,#fff5b7 0,#ffd377 38%,#e99548 72%,#ad543a 100%);
  box-shadow:inset 0 4px 0 #fff2b8,inset 0 -6px 0 #bd653c,0 5px 0 #663c32,0 13px 20px #74452c66;
}
.popup-home[data-frame="cartoon_amber"] .popup-home__screen {border:4px solid #743d30;border-radius:25px 21px 28px 23px;box-shadow:0 0 0 3px #fff2ae,inset 0 3px 6px #73422866;}
.popup-home[data-frame="cartoon_amber"] .popup-home__frame-overlay::before {inset:7px;border:3px solid #fff0ae;border-radius:32px 28px 36px 30px;}
.popup-home[data-frame="cartoon_amber"] .popup-home__frame-overlay::after {position:absolute;inset:0;background:radial-gradient(circle at 14px 15px,#fff5c3 0 5px,#9e563d 6px 8px,transparent 9px),radial-gradient(circle at calc(100% - 14px) 15px,#fff5c3 0 5px,#9e563d 6px 8px,transparent 9px),radial-gradient(circle at 14px calc(100% - 15px),#fff5c3 0 5px,#9e563d 6px 8px,transparent 9px),radial-gradient(circle at calc(100% - 14px) calc(100% - 15px),#fff5c3 0 5px,#9e563d 6px 8px,transparent 9px);content:"";}

.popup-home[data-frame="cyber_neon"] {
  border:2px solid #24e3ec;border-radius:0;padding:18px;
  clip-path:polygon(0 16px,16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px));
  background:linear-gradient(120deg,#2e255d,#0e1537 53%,#182750);
  box-shadow:inset 0 0 0 3px #b833e5,inset 0 0 16px #29cde177,0 0 16px #32cfe588;
}
.popup-home[data-frame="cyber_neon"] .popup-home__screen {border:2px solid #30e4e6;border-radius:0;box-shadow:0 0 0 3px #8229c3,inset 0 0 12px #162757;}
.popup-home[data-frame="cyber_neon"] .popup-home__frame-overlay::before {inset:6px;border:1px solid #46f8e8;border-radius:0;clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));}
.popup-home[data-frame="cyber_neon"] .popup-home__frame-overlay::after {position:absolute;inset:0;background:linear-gradient(90deg,#f45bff,#33f2eb) 16px 7px/27% 2px no-repeat,linear-gradient(#33f2eb,#33f2eb) right 10px top 16px/2px 26% no-repeat,linear-gradient(90deg,#33f2eb,#f45bff) right 16px bottom 7px/27% 2px no-repeat,linear-gradient(#f45bff,#f45bff) 10px bottom 16px/2px 26% no-repeat;content:"";}

.popup-home[data-frame="cat_cafe"] {
  border:2px solid #af727d;border-radius:35px;padding:21px;
  background:radial-gradient(circle at 14px 15px,#f6aac4 0 4px,transparent 5px),radial-gradient(circle at calc(100% - 14px) 15px,#f6aac4 0 4px,transparent 5px),linear-gradient(#fff2df 0 55%,#e9b5ac);
  box-shadow:inset 0 4px 0 #fffdf6,inset 0 -5px 0 #d8929e,0 10px 22px #8c5a6640;
}
.popup-home[data-frame="cat_cafe"] .popup-home__screen {border:3px solid #a96b72;border-radius:22px;box-shadow:0 0 0 3px #fff8e7,inset 0 3px 8px #8c596344;}
.popup-home[data-frame="cat_cafe"] .popup-home__frame-overlay::before {inset:8px;border:3px solid #fffaf0;border-radius:29px;box-shadow:0 3px 0 #f8ced2;}
.popup-home[data-frame="cat_cafe"] .popup-home__frame-overlay::after {position:absolute;inset:0;background:radial-gradient(circle at 30px 9px,#f8a5bd 0 4px,transparent 5px),radial-gradient(circle at 39px 10px,#f8a5bd 0 3px,transparent 4px),radial-gradient(circle at 22px 10px,#f8a5bd 0 3px,transparent 4px),radial-gradient(circle at calc(100% - 30px) 9px,#f8a5bd 0 4px,transparent 5px),radial-gradient(circle at calc(100% - 39px) 10px,#f8a5bd 0 3px,transparent 4px),radial-gradient(circle at calc(100% - 22px) 10px,#f8a5bd 0 3px,transparent 4px),repeating-radial-gradient(circle at center,#fff6e8 0 3px,#e8a8a5 4px 5px,transparent 6px 13px) center bottom 5px/60px 9px no-repeat;content:"";}

.popup-home[data-frame="steampunk"] {
  border:3px solid #4e342b;border-radius:14px;padding:19px;
  background:repeating-linear-gradient(90deg,#f8dfae22 0 2px,transparent 2px 14px),linear-gradient(145deg,#b38b52,#735236 65%,#493529);
  box-shadow:inset 0 0 0 3px #d7b779,inset 0 0 0 6px #65442c,inset 0 3px 0 #f4d7a2,0 10px 18px #4d362d66;
}
.popup-home[data-frame="steampunk"] .popup-home__screen {border:3px solid #422e27;border-radius:6px;box-shadow:0 0 0 3px #e6bd77,inset 0 4px 8px #35251d88;}
.popup-home[data-frame="steampunk"] .popup-home__frame-overlay::before {inset:7px;border:2px dotted #dfbf7e;border-radius:9px;}
.popup-home[data-frame="steampunk"] .popup-home__frame-overlay::after {position:absolute;inset:0;background:radial-gradient(circle at 12px 12px,#f9e1a9 0 2px,#694a31 3px 5px,transparent 6px),radial-gradient(circle at calc(100% - 12px) 12px,#f9e1a9 0 2px,#694a31 3px 5px,transparent 6px),radial-gradient(circle at 12px calc(100% - 12px),#f9e1a9 0 2px,#694a31 3px 5px,transparent 6px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#f9e1a9 0 2px,#694a31 3px 5px,transparent 6px),repeating-conic-gradient(from 0deg,#e4c080 0 15deg,#5d402e 15deg 30deg) center top 1px/16px 16px no-repeat;content:"";}

/* Refined royal frame: satin burgundy, warm metal and an enamel crown. */
.popup-home[data-frame="royal"]{border:2px solid #d6b86f;border-radius:25px;background:linear-gradient(135deg,rgba(255,238,194,.22),transparent 20%),repeating-linear-gradient(135deg,rgba(235,194,122,.035) 0 1px,transparent 1px 5px),linear-gradient(145deg,#742b3d,#421520 48%,#220d16);box-shadow:inset 0 0 0 2px #4b2227,inset 0 0 0 4px #d6b66c,inset 0 0 0 5px #81532e,inset 0 3px 3px #ffe3a060,inset 0 -5px 7px #1e0813a8,0 12px 26px #2d101c52}
.popup-home[data-frame="royal"] .popup-home__screen{border:2px solid #e8cc87;border-radius:14px;box-shadow:0 0 0 2px #734b30,0 0 0 3px #f1dba566,inset 0 3px 8px #35111b4d}
.popup-home[data-frame="royal"] .popup-home__frame-overlay::before{inset:7px;border:1px solid #f7df9e91;border-radius:18px;box-shadow:inset 0 0 0 1px #4e202b90}
.popup-home[data-frame="royal"] .popup-home__frame-overlay::after{inset:0;width:auto;height:auto;border:0;clip-path:none;transform:none;box-shadow:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M3%2031C3%2012%2010%204%2030%204M5%2025C8%2013%2015%207%2028%206M5%2020c3-5%205-8%2011-11M9%2014c-2%206%200%209%204%208%204-1%203-5%201-6M14%209c5-2%209%200%208%203-1%203-4%203-5%201%22%20fill%3D%22none%22%20stroke%3D%22%23e3c77d%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2028c2-3%205-4%207-3-1%203-3%205-7%205M28%204c-3%202-4%204-3%207%203-1%205-3%205-7%22%20fill%3D%22%23d2a855%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%20fill%3D%22%23fbe8ad%22%2F%3E%3C%2Fsvg%3E") left 4px top 4px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20transform%3D%22translate%2840%200%29%20scale%28-1%201%29%22%3E%3Cpath%20d%3D%22M3%2031C3%2012%2010%204%2030%204M5%2025C8%2013%2015%207%2028%206M5%2020c3-5%205-8%2011-11M9%2014c-2%206%200%209%204%208%204-1%203-5%201-6M14%209c5-2%209%200%208%203-1%203-4%203-5%201%22%20fill%3D%22none%22%20stroke%3D%22%23e3c77d%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2028c2-3%205-4%207-3-1%203-3%205-7%205M28%204c-3%202-4%204-3%207%203-1%205-3%205-7%22%20fill%3D%22%23d2a855%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%20fill%3D%22%23fbe8ad%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right 4px top 4px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20transform%3D%22translate%280%2040%29%20scale%281%20-1%29%22%3E%3Cpath%20d%3D%22M3%2031C3%2012%2010%204%2030%204M5%2025C8%2013%2015%207%2028%206M5%2020c3-5%205-8%2011-11M9%2014c-2%206%200%209%204%208%204-1%203-5%201-6M14%209c5-2%209%200%208%203-1%203-4%203-5%201%22%20fill%3D%22none%22%20stroke%3D%22%23e3c77d%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2028c2-3%205-4%207-3-1%203-3%205-7%205M28%204c-3%202-4%204-3%207%203-1%205-3%205-7%22%20fill%3D%22%23d2a855%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%20fill%3D%22%23fbe8ad%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left 4px bottom 4px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20transform%3D%22translate%2840%2040%29%20scale%28-1%20-1%29%22%3E%3Cpath%20d%3D%22M3%2031C3%2012%2010%204%2030%204M5%2025C8%2013%2015%207%2028%206M5%2020c3-5%205-8%2011-11M9%2014c-2%206%200%209%204%208%204-1%203-5%201-6M14%209c5-2%209%200%208%203-1%203-4%203-5%201%22%20fill%3D%22none%22%20stroke%3D%22%23e3c77d%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2028c2-3%205-4%207-3-1%203-3%205-7%205M28%204c-3%202-4%204-3%207%203-1%205-3%205-7%22%20fill%3D%22%23d2a855%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%20fill%3D%22%23fbe8ad%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right 4px bottom 4px/24px 24px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2030%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff0bd%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23d9ae5f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238a5b25%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M9%2023%205%208%2027%2015%2035%205%2050%2015%2065%205%2073%2015%2095%208%2091%2023Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%2369401d%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11%2021h78v5H11z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%2369401d%22%2F%3E%3Cpath%20d%3D%22m50%2015%205%204-5%204-5-4z%22%20fill%3D%22%239c2638%22%20stroke%3D%22%23ffe8a5%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%227%22%20r%3D%222.3%22%20fill%3D%22%23f8d790%22%2F%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%224%22%20r%3D%222.3%22%20fill%3D%22%23f8d790%22%2F%3E%3Ccircle%20cx%3D%2265%22%20cy%3D%224%22%20r%3D%222.3%22%20fill%3D%22%23f8d790%22%2F%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%227%22%20r%3D%222.3%22%20fill%3D%22%23f8d790%22%2F%3E%3Cpath%20d%3D%22M14%2023h72%22%20stroke%3D%22%23fff1bd%22%20stroke-opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E") center 1px/54px 17px no-repeat,radial-gradient(circle at 10px 10px,#fff0b7 0 1px,#b98a42 1.5px 2.5px,transparent 3px),radial-gradient(circle at calc(100% - 10px) 10px,#fff0b7 0 1px,#b98a42 1.5px 2.5px,transparent 3px),radial-gradient(circle at 10px calc(100% - 10px),#fff0b7 0 1px,#b98a42 1.5px 2.5px,transparent 3px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#fff0b7 0 1px,#b98a42 1.5px 2.5px,transparent 3px);content:""}