/* Bespoke visual specimens for the home gallery. */

.preview::before,
.preview::after,
.pv-ui::before,
.pv-ui::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

/* 01 — Minimal */
.p-minimal { place-items: start; background: #f1eee8; color: #222820; }
.p-minimal .pv-mark { margin: 12% 0 0 10%; font-size: .68rem; letter-spacing: .32em; }
.p-minimal .pv-ui { inset: 31% 14% 12% 55%; width: auto; height: auto; border-radius: 48% 48% 38% 38% / 17% 17% 11% 11%; background: linear-gradient(90deg,#cbc6bd,#eeeae3 43%,#beb8ae); box-shadow: 0 20px 22px rgba(47,43,37,.14); }
.p-minimal .pv-ui::before { inset: -5px 0 auto; height: 14%; border: 1px solid #c7c1b7; border-radius: 50%; background: #e6e1d9; }
.p-minimal::after { left: 10%; right: 10%; bottom: 13%; height: 1px; background: #c5c0b7; }

/* 02 — Brutalist */
.p-brutalist { place-items: end start; border: 3px solid #111; background: linear-gradient(#222 1px,transparent 1px),linear-gradient(90deg,#222 1px,transparent 1px),#d8d4c9; background-size: 22px 22px; color: #111; }
.p-brutalist .pv-mark { z-index: 4; margin: 0 0 8% 7%; font-size: clamp(2.2rem,5vw,3.7rem); letter-spacing: -.1em; transform: rotate(-4deg); text-shadow: 4px 4px 0 #ff3b18; }
.p-brutalist .pv-ui { inset: 8% 7% auto auto; width: 34%; height: 42%; border: 3px solid #111; background: #ffe500; box-shadow: 6px 6px 0 #111; }
.p-brutalist .pv-ui::before { right: -12px; bottom: -28px; width: 42px; height: 42px; border: 3px solid #111; border-radius: 50%; background: #ff3b18; }

/* 03 — Glass */
.p-glass { place-items: end start; background: radial-gradient(circle at 22% 20%,#38c6b3 0 4%,transparent 29%),radial-gradient(circle at 82% 70%,#476de8 0 5%,transparent 32%),linear-gradient(145deg,#042e3b,#123861 52%,#17204d); color: #f5fbff; }
.p-glass::before { inset: 8% 45% 18% 9%; border-radius: 50%; background: #2dd4bf; filter: blur(24px); opacity: .48; }
.p-glass .pv-mark { z-index: 5; margin: 0 0 10% 10%; font-size: 1rem; letter-spacing: .2em; }
.p-glass .pv-ui { inset: 16% 10% 17% 37%; width: auto; height: auto; border: 1px solid rgba(255,255,255,.34); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06)); box-shadow: 0 18px 40px rgba(0,0,0,.24); backdrop-filter: blur(12px); transform: rotate(4deg); }
.p-glass .pv-ui::before { top: 16%; left: 14%; width: 44%; height: 5px; border-radius: 9px; background: rgba(255,255,255,.78); box-shadow: 0 16px 0 rgba(255,255,255,.26),0 32px 0 rgba(255,255,255,.16); }

/* 04 — Neumorphism */
.p-neumorph { place-items: start; background: #e5e8ef; color: #354d9c; }
.p-neumorph .pv-mark { margin: 12% 0 0 10%; font-size: .78rem; letter-spacing: .24em; }
.p-neumorph .pv-ui { inset: 28% auto auto 39%; width: 30%; aspect-ratio: 1; height: auto; border-radius: 50%; background: #e5e8ef; box-shadow: 10px 10px 19px #b8becb,-10px -10px 19px #fff,inset 3px 3px 6px rgba(255,255,255,.75); }
.p-neumorph .pv-ui::before { inset: 30%; border-radius: 50%; background: #637fd6; box-shadow: inset 2px 2px 3px rgba(255,255,255,.5),0 4px 8px rgba(69,88,153,.25); }
.p-neumorph .pv-ui::after { top: 122%; left: -55%; width: 210%; height: 13px; border-radius: 999px; background: #e5e8ef; box-shadow: inset 3px 3px 6px #b8becb,inset -3px -3px 6px #fff; }

/* 05 — Flat */
.p-flat { place-items: start; background: #fff8ee; color: #17223b; }
.p-flat .pv-mark { z-index: 4; margin: 11% 0 0 9%; font-size: clamp(1.8rem,4vw,3rem); letter-spacing: -.08em; }
.p-flat::before { right: -5%; bottom: 0; width: 55%; height: 64%; background: #2ec4b6; clip-path: polygon(24% 0,100% 0,100% 100%,0 100%); }
.p-flat::after { right: 17%; top: 13%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ffbf3f; }
.p-flat .pv-ui { inset: auto auto 13% 9%; width: 35%; height: 14%; border-radius: 0; background: #e71d36; }

/* 06 — Editorial */
.p-editorial { place-items: end start; background: #f3f0e9; color: #15181b; }
.p-editorial::before { inset: 0 0 0 59%; background: linear-gradient(155deg,#1d3041,#386f8d 55%,#adc6cd); }
.p-editorial::after { left: 9%; top: 14%; width: 42%; height: 1px; background: #17191b; box-shadow: 0 12px 0 rgba(23,25,27,.22); }
.p-editorial .pv-mark { z-index: 3; margin: 0 0 13% 8%; font-family: Georgia,serif; font-size: clamp(1.8rem,4vw,3rem); font-style: italic; font-weight: 400; letter-spacing: -.07em; }
.p-editorial .pv-ui { inset: 38% auto auto 9%; width: 37%; height: 27%; background: repeating-linear-gradient(180deg,#73746e 0 1px,transparent 1px 8px); }

/* 07 — Playful */
.p-playful { background: radial-gradient(circle at 15% 18%,#67c8ff 0 10px,transparent 11px),radial-gradient(circle at 83% 20%,#ffe268 0 16px,transparent 17px),#fff0e6; color: #ff568c; }
.p-playful::before { left: 8%; bottom: 12%; width: 24%; aspect-ratio: 1; border: 3px solid #2b211d; border-radius: 48% 52% 36% 64%; background: #8dffa9; transform: rotate(13deg); }
.p-playful .pv-mark { z-index: 4; font-size: clamp(2rem,5vw,3.6rem); letter-spacing: -.09em; transform: rotate(-5deg); -webkit-text-stroke: 2px #2b211d; paint-order: stroke fill; }
.p-playful .pv-ui { inset: auto 8% 11% auto; width: 31%; height: 17%; border: 3px solid #2b211d; border-radius: 999px; background: #b5a5ff; box-shadow: 4px 4px 0 #2b211d; transform: rotate(-7deg); }

/* 08 — Corporate */
.p-corporate { place-items: start; background: linear-gradient(135deg,#0a2034,#123653 62%,#15867f); color: #f5fbff; }
.p-corporate .pv-mark { margin: 10% 0 0 9%; font-size: .76rem; letter-spacing: .28em; }
.p-corporate::before { left: 9%; bottom: 12%; width: 31%; height: 34%; border-left: 1px solid rgba(255,255,255,.38); border-bottom: 1px solid rgba(255,255,255,.38); background: linear-gradient(145deg,transparent 0 39%,#49d6c8 40% 43%,transparent 44% 57%,#9bc9ff 58% 61%,transparent 62%); }
.p-corporate .pv-ui { inset: 23% 8% 12% 51%; width: auto; height: auto; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.11); box-shadow: 0 14px 30px rgba(1,18,31,.2); }
.p-corporate .pv-ui::before { inset: 13% 12% auto; height: 7px; border-radius: 5px; background: #fff; box-shadow: 0 18px 0 rgba(255,255,255,.18),0 36px 0 #43c7b8; }

/* 09 — Skeuomorphism */
.p-skeuomorphism { place-items: start; background: repeating-linear-gradient(92deg,#3c2416 0 8px,#57331e 9px 16px,#452818 17px 24px); color: #e5c46a; }
.p-skeuomorphism::after { inset: 8%; border: 1px solid rgba(244,208,132,.22); border-radius: 7px; box-shadow: inset 0 0 0 3px rgba(20,10,5,.3); }
.p-skeuomorphism .pv-mark { z-index: 4; margin: 11% 0 0 10%; font-family: Georgia,serif; font-size: .72rem; letter-spacing: .28em; }
.p-skeuomorphism .pv-ui { inset: 24% 13% 14% 49%; width: auto; height: auto; border: 5px solid #26130a; border-radius: 50%; background: radial-gradient(circle,#6d7779 0 8%,#222a2c 9% 43%,#a18d72 44% 52%,#332116 53%); box-shadow: inset 3px 3px 7px rgba(255,255,255,.16),4px 6px 10px #1b0d07; }
.p-skeuomorphism .pv-ui::before { left: 49%; top: 8%; width: 2px; height: 34%; background: #e6c86f; transform-origin: bottom; transform: rotate(28deg); }

/* 10 — Maximalism */
.p-maximalism { background: repeating-linear-gradient(45deg,rgba(255,238,0,.18) 0 7px,transparent 7px 15px),#38106b; color: #ffe935; }
.p-maximalism::before { left: -8%; top: -15%; width: 54%; aspect-ratio: 1; border: 8px solid #ff3d81; border-radius: 50%; background: #10dfc4; }
.p-maximalism::after { right: -4%; bottom: -16%; width: 47%; aspect-ratio: 1; background: repeating-conic-gradient(#ff3d81 0 12deg,#ffe935 12deg 24deg); transform: rotate(12deg); }
.p-maximalism .pv-mark { z-index: 4; font-size: clamp(2.3rem,6vw,4.2rem); letter-spacing: -.1em; text-shadow: 4px 4px 0 #ff3d81,8px 8px 0 #151515; transform: rotate(-6deg); }
.p-maximalism .pv-ui { inset: auto auto 8% 11%; width: 28%; height: 13%; border: 3px solid #111; background: #fff; transform: rotate(8deg); }

/* 11 — Vaporwave */
.p-vaporwave { place-items: start; background: linear-gradient(180deg,#22133f 0%,#633784 50%,#f172bf 69%,#1dd4e8 70%); color: #fff; }
.p-vaporwave::before { left: 36%; top: 24%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: repeating-linear-gradient(180deg,#ffc85d 0 7px,#ef5fa7 7px 13px); box-shadow: 0 0 30px #ff77c8; }
.p-vaporwave::after { left: -15%; right: -15%; bottom: -28%; height: 54%; border-top: 2px solid #21efff; background: repeating-linear-gradient(90deg,transparent 0 23px,rgba(20,34,82,.75) 24px 25px),repeating-linear-gradient(0deg,transparent 0 15px,#21efff 16px 17px); transform: perspective(160px) rotateX(62deg); transform-origin: top; }
.p-vaporwave .pv-mark { z-index: 4; margin: 10% 0 0 9%; font-family: Georgia,serif; font-size: 1.15rem; font-style: italic; letter-spacing: .04em; text-shadow: 2px 2px 0 #18dcea; }
.p-vaporwave .pv-ui { display: none; }

/* 12 — Cyberpunk */
.p-cyberpunk { place-items: start; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(5,217,232,.06) 3px 4px),#05070a; color: #f7ef18; }
.p-cyberpunk::before { right: -12%; top: 12%; width: 48%; height: 8px; background: #ff2a6d; box-shadow: 0 18px 0 rgba(255,42,109,.2); transform: rotate(-34deg); }
.p-cyberpunk .pv-mark { z-index: 5; margin: 11% 0 0 8%; font-size: 1.05rem; letter-spacing: .18em; text-shadow: 3px 0 #05d9e8; }
.p-cyberpunk .pv-ui { inset: 35% 9% 12% 31%; width: auto; height: auto; border: 1px solid #05d9e8; background: linear-gradient(90deg,rgba(5,217,232,.11),rgba(255,42,109,.08)); clip-path: polygon(0 0,91% 0,100% 18%,100% 100%,9% 100%,0 82%); }
.p-cyberpunk .pv-ui::before { inset: 15% 12% auto; height: 2px; background: #05d9e8; box-shadow: 0 15px 0 rgba(5,217,232,.36),0 30px 0 #ff2a6d; }

/* 13 — Organic */
.p-organic { place-items: start; background: #eef1e6; color: #315d49; }
.p-organic::before { right: -5%; top: -13%; width: 63%; aspect-ratio: 1; border-radius: 42% 58% 61% 39% / 62% 34% 66% 38%; background: #b8d5bd; transform: rotate(19deg); }
.p-organic::after { left: -8%; bottom: -21%; width: 55%; aspect-ratio: 1; border-radius: 62% 38% 52% 48%; background: #e8b7a1; opacity: .66; }
.p-organic .pv-mark { z-index: 4; margin: 12% 0 0 10%; font-family: Georgia,serif; font-size: 1.35rem; font-weight: 400; letter-spacing: -.04em; }
.p-organic .pv-ui { inset: 42% 13% 12% 52%; width: auto; height: auto; border: 1px solid rgba(49,93,73,.26); border-radius: 66% 34% 55% 45%; background: rgba(255,255,255,.38); }

/* 14 — Swiss */
.p-swiss { place-items: start; background: linear-gradient(90deg,transparent 24%,rgba(0,0,0,.08) 24% 24.5%,transparent 24.5% 62%,rgba(0,0,0,.08) 62% 62.5%,transparent 62.5%),#f2f1ed; color: #111; }
.p-swiss::before { right: 8%; top: 10%; width: 28%; aspect-ratio: 1; background: #e21b23; }
.p-swiss::after { left: 8%; right: 8%; bottom: 13%; height: 2px; background: #111; }
.p-swiss .pv-mark { z-index: 4; margin: 22% 0 0 8%; font-size: clamp(2.7rem,6vw,4.4rem); letter-spacing: -.11em; }
.p-swiss .pv-ui { inset: auto auto 18% 8%; width: 30%; height: 7%; background: #111; }

/* 15 — OLED */
.p-oled { background: #000; color: #f8fbff; }
.p-oled::before { inset: 14% 17%; border: 1px solid rgba(160,191,255,.13); border-radius: 50%; box-shadow: 0 0 55px rgba(92,135,255,.18),inset 0 0 35px rgba(92,135,255,.08); }
.p-oled::after { left: 18%; right: 18%; bottom: 22%; height: 1px; background: linear-gradient(90deg,transparent,#79a7ff,transparent); box-shadow: 0 0 12px #79a7ff; }
.p-oled .pv-mark { z-index: 4; font-size: clamp(2rem,5vw,3.4rem); font-weight: 700; letter-spacing: .16em; text-shadow: 0 0 26px rgba(127,168,255,.55); }
.p-oled .pv-ui { display: none; }

/* 16 — Sketch */
.p-sketch { place-items: start; background: repeating-linear-gradient(transparent 0 15px,#c8dbeb 15px 16px),#f7f0de; color: #213e64; }
.p-sketch::before { right: 9%; top: 13%; width: 28%; aspect-ratio: 1; border: 3px solid #d04f43; border-radius: 50% 46% 52% 48%; transform: rotate(8deg); }
.p-sketch::after { left: 10%; bottom: 18%; width: 40%; height: 3px; background: #213e64; transform: rotate(-4deg); box-shadow: 0 8px 0 rgba(33,62,100,.45),0 16px 0 rgba(33,62,100,.24); }
.p-sketch .pv-mark { z-index: 4; margin: 13% 0 0 9%; font-family:"Comic Sans MS",cursive; font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em; transform: rotate(-4deg); }
.p-sketch .pv-ui { inset: 30% 13% 13% 55%; width: auto; height: auto; border: 2px solid #1f1a14; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: rgba(255,255,255,.34); transform: rotate(3deg); }

/* 17 — Y2K */
.p-y2k { place-items: start; background: radial-gradient(circle at 15% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 84% 16%,#fff 0 1px,transparent 2px),linear-gradient(145deg,#c9edff,#99b9ff 43%,#e7c8ff); color: #28316e; }
.p-y2k::before { right: 10%; top: 16%; width: 35%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 27%,#fff 0 7%,transparent 8%),linear-gradient(145deg,rgba(255,255,255,.9),rgba(79,126,255,.58) 46%,rgba(247,87,219,.58)); box-shadow: inset -10px -12px 20px rgba(45,40,164,.24),0 14px 30px rgba(54,66,163,.22); }
.p-y2k::after { left: 13%; bottom: 15%; width: 25%; height: 16%; border: 2px outset #f5f7ff; border-radius: 999px; background: linear-gradient(#fff,#b8c5dd); }
.p-y2k .pv-mark { z-index: 4; margin: 14% 0 0 9%; font-size: 1rem; letter-spacing: .15em; text-shadow: 2px 2px 0 #fff,4px 4px 0 #ff75d8; }
.p-y2k .pv-ui { display: none; }

/* 18 — Art Deco */
.p-artdeco { place-items: end center; background: radial-gradient(ellipse at 50% 0,#2b2219,#090807 64%); color: #d4b85d; }
.p-artdeco::before { left: 28%; right: 28%; top: 11%; height: 63%; border: 1px solid #b89b46; border-bottom: 0; border-radius: 999px 999px 0 0; box-shadow: 0 0 0 7px #0d0b09,0 0 0 8px #6f5b2d; }
.p-artdeco::after { left: 13%; right: 13%; bottom: 16%; height: 31%; background: repeating-conic-gradient(from -90deg at 50% 100%,#b89b46 0 2deg,transparent 2deg 10deg); opacity: .72; }
.p-artdeco .pv-mark { z-index: 5; margin-bottom: 10%; font-size: .9rem; letter-spacing: .34em; }
.p-artdeco .pv-ui { display: none; }

/* 19 — Bauhaus */
.p-bauhaus { place-items: start; border: 2px solid #111; background: #f3f0e8; color: #111; }
.p-bauhaus::before { left: 12%; bottom: 12%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #e21b23; }
.p-bauhaus::after { right: 10%; top: 13%; width: 26%; height: 53%; background: #1655a5; }
.p-bauhaus .pv-mark { z-index: 4; margin: 10% 0 0 11%; font-size: .72rem; letter-spacing: .22em; }
.p-bauhaus .pv-ui { inset: auto auto 13% 47%; width: 12%; height: 60%; background: #f4c51b; transform: rotate(32deg); }

/* 20 — Memphis */
.p-memphis { place-items: end start; background: radial-gradient(#111 1.5px,transparent 1.5px),#fff6e3; background-size: 18px 18px; color: #111; }
.p-memphis::before { right: 7%; top: 9%; width: 32%; height: 34%; border: 3px solid #111; background: #ff6c79; clip-path: polygon(50% 0,100% 100%,0 100%); transform: rotate(8deg); }
.p-memphis::after { left: 9%; top: 16%; width: 20%; aspect-ratio: 1; border: 4px solid #111; border-radius: 50%; background: #ffe45d; }
.p-memphis .pv-mark { z-index: 4; margin: 0 0 11% 9%; font-size: 1.7rem; letter-spacing: -.06em; text-shadow: 3px 3px 0 #55cfc5; }
.p-memphis .pv-ui { inset: auto 8% 10% auto; width: 31%; height: 16%; border: 3px solid #111; border-radius: 999px; background: #55cfc5; transform: rotate(-9deg); }

/* 21 — Grunge */
.p-grunge { background: repeating-linear-gradient(105deg,rgba(255,255,255,.03) 0 2px,transparent 2px 7px),linear-gradient(145deg,#28231c,#100e0b); color: #e3d8c7; }
.p-grunge::before { left: -5%; top: 19%; width: 72%; height: 31%; background: #d7cfbd; clip-path: polygon(0 5%,8% 0,17% 6%,27% 1%,39% 7%,51% 2%,63% 8%,77% 1%,90% 6%,100% 2%,98% 94%,86% 100%,72% 93%,58% 99%,43% 92%,29% 98%,13% 91%,0 96%); transform: rotate(-4deg); }
.p-grunge::after { right: 5%; bottom: 12%; width: 44%; height: 18%; background: #a44220; opacity: .82; transform: rotate(6deg); }
.p-grunge .pv-mark { z-index: 4; font-size: clamp(2.2rem,5vw,3.8rem); letter-spacing: -.08em; transform: rotate(-3deg); text-shadow: 3px 3px 0 #000; mix-blend-mode: difference; }
.p-grunge .pv-ui { display: none; }

/* 22 — Soft UI */
.p-softui { place-items: start; background: radial-gradient(circle at 15% 15%,#ffe3ef,transparent 38%),radial-gradient(circle at 85% 75%,#d9f3ff,transparent 40%),#eef1f7; color: #5368a8; }
.p-softui .pv-mark { margin: 12% 0 0 10%; font-size: .78rem; letter-spacing: .22em; }
.p-softui .pv-ui { inset: 30% 13% 18% 17%; width: auto; height: auto; border-radius: 22px; background: rgba(255,255,255,.66); box-shadow: 0 17px 34px rgba(83,104,168,.16),inset 0 1px 0 #fff; }
.p-softui .pv-ui::before { left: 10%; top: 22%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg,#b8c7ff,#8ea5f5); box-shadow: 0 7px 16px rgba(83,104,168,.2); }
.p-softui .pv-ui::after { right: 10%; top: 25%; width: 42%; height: 7px; border-radius: 8px; background: #95a2c7; box-shadow: 0 17px 0 #d2d8e8; }

/* 23 — Claymorphism */
.p-clay { background: #eee9ff; color: #4b235f; }
.p-clay::before { left: 8%; bottom: 9%; width: 29%; aspect-ratio: 1; border-radius: 42% 58% 63% 37%; background: #ff9fbe; box-shadow: inset -8px -9px 0 #ed78a1,0 9px 0 #d96b94; transform: rotate(12deg); }
.p-clay::after { right: 7%; top: 10%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #79c8ff; box-shadow: inset -7px -8px 0 #56a8e4,0 8px 0 #4c9ad3; }
.p-clay .pv-mark { z-index: 4; font-size: clamp(2rem,5vw,3.5rem); letter-spacing: -.09em; text-shadow: 0 5px 0 rgba(75,35,95,.18); }
.p-clay .pv-ui { inset: auto 29% 10% auto; width: 25%; height: 22%; border-radius: 999px; background: #78dfbd; box-shadow: inset -6px -7px 0 #54bd9a,0 7px 0 #48ad8b; transform: rotate(-7deg); }

/* 24 — Isometric */
.p-isometric { place-items: start; background: linear-gradient(150deg,transparent 0 74%,rgba(42,157,143,.08) 75%),#e5f2f5; color: #245f60; }
.p-isometric .pv-mark { margin: 11% 0 0 9%; font-size: .75rem; letter-spacing: .24em; }
.p-isometric .pv-ui { left: 43%; top: 27%; width: 31%; aspect-ratio: 1; height: auto; background: #53c7b6; transform: rotate(30deg) skewY(-30deg) scaleY(.86); box-shadow: 17px 17px 0 #287f78,34px 34px 0 rgba(40,127,120,.22); }
.p-isometric .pv-ui::before { left: -37%; top: 37%; width: 37%; height: 100%; background: #226b68; transform: skewY(45deg); transform-origin: right top; }
.p-isometric .pv-ui::after { left: 0; top: -37%; width: 100%; height: 37%; background: #83dfd2; transform: skewX(45deg); transform-origin: left bottom; }

/* 25 — Spatial */
.p-spatial { background: radial-gradient(ellipse at 45% 0,#263d6b,#0a1020 67%); color: #eef6ff; perspective: 500px; }
.p-spatial::before { inset: 18% 34% 25% 12%; border: 1px solid rgba(164,214,255,.26); border-radius: 15px; background: rgba(86,150,207,.12); transform: rotateY(18deg) translateZ(-15px); box-shadow: 0 18px 35px rgba(0,0,0,.28); }
.p-spatial .pv-mark { z-index: 5; font-size: 1rem; letter-spacing: .24em; text-shadow: 0 0 18px #7dd3fc; }
.p-spatial .pv-ui { inset: 23% 10% 18% 50%; width: auto; height: auto; border: 1px solid rgba(255,255,255,.35); border-radius: 17px; background: linear-gradient(145deg,rgba(255,255,255,.18),rgba(125,211,252,.07)); backdrop-filter: blur(8px); transform: rotateY(-18deg) translateZ(25px); box-shadow: 0 20px 35px rgba(0,0,0,.3); }

/* 26 — Aurora */
.p-aurora { place-items: end start; background: #061521; color: #f5fbff; }
.p-aurora::before { inset: -35% -15% 7% 5%; border-radius: 48%; background: conic-gradient(from 80deg,#0bb9a1,#67d9fc,#b866df,#f0b05d,#0bb9a1); filter: blur(23px); opacity: .78; transform: rotate(-13deg); }
.p-aurora::after { inset: 4% 22% 28% -10%; border: 22px solid rgba(35,245,188,.34); border-radius: 50%; filter: blur(12px); transform: rotate(27deg); }
.p-aurora .pv-mark { z-index: 5; margin: 0 0 10% 9%; font-size: .82rem; letter-spacing: .25em; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.p-aurora .pv-ui { inset: auto 9% 12% auto; width: 35%; height: 1px; background: rgba(255,255,255,.8); }

/* 27 — Duotone */
.p-duotone { background: linear-gradient(90deg,#1b0735 0 50%,#ff4f71 50%); color: #fff; }
.p-duotone::before { left: 31%; top: 18%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(90deg,#ff4f71 0 50%,#1b0735 50%); box-shadow: 0 0 0 2px rgba(255,255,255,.16); }
.p-duotone::after { left: 13%; right: 13%; bottom: 16%; height: 2px; background: linear-gradient(90deg,#ff91a8 0 50%,#8b71b3 50%); }
.p-duotone .pv-mark { z-index: 4; font-size: clamp(2.5rem,6vw,4.4rem); letter-spacing: -.1em; color: #fff; mix-blend-mode: difference; }
.p-duotone .pv-ui { display: none; }

/* 28 — Risograph */
.p-risograph { place-items: end center; background: radial-gradient(#c9c1b4 1px,transparent 1px),#f5eee1; background-size: 7px 7px; color: #9e3314; }
.p-risograph::before { left: 22%; top: 16%; width: 39%; aspect-ratio: 1; border-radius: 50%; background: #df4e1f; opacity: .83; }
.p-risograph::after { right: 18%; top: 25%; width: 39%; aspect-ratio: 1; border-radius: 50%; background: #08736e; mix-blend-mode: multiply; opacity: .86; }
.p-risograph .pv-mark { z-index: 5; margin-bottom: 9%; font-family: Georgia,serif; font-size: 1.1rem; letter-spacing: .22em; }
.p-risograph .pv-ui { left: 31%; top: 28%; width: 35%; height: 28%; background: repeating-linear-gradient(45deg,transparent 0 4px,rgba(255,255,255,.35) 4px 6px); transform: rotate(-9deg); mix-blend-mode: screen; }

/* 29 — Collage */
.p-collage { place-items: start; background: radial-gradient(#c7c0b3 1px,transparent 1px),#e8e0d2; background-size: 13px 13px; color: #1f2425; }
.p-collage::before { left: 29%; top: 12%; width: 49%; height: 66%; background: linear-gradient(145deg,#89a9b9,#315c73); clip-path: polygon(5% 0,100% 6%,91% 100%,0 90%); transform: rotate(5deg); box-shadow: -13px 10px 0 #faf4e9; }
.p-collage::after { right: 7%; bottom: 8%; width: 34%; height: 27%; background: #c81c28; clip-path: polygon(0 18%,90% 0,100% 78%,12% 100%); transform: rotate(-5deg); }
.p-collage .pv-mark { z-index: 5; margin: 12% 0 0 8%; padding: .35rem .55rem; background: #f8f2e7; font-family: Georgia,serif; font-size: 1rem; letter-spacing: .08em; transform: rotate(-4deg); box-shadow: 0 1px 4px rgba(0,0,0,.13); }
.p-collage .pv-ui { inset: auto auto 8% 10%; width: 35%; height: 10%; background: #dfbd6d; transform: rotate(8deg); }

/* 30 — Luxury */
.p-luxury { background: radial-gradient(ellipse at 78% 18%,#382b22,#080808 55%); color: #f4efe6; }
.p-luxury::before { right: -4%; top: -28%; width: 59%; height: 147%; border-radius: 52%; background: linear-gradient(110deg,transparent 28%,rgba(183,141,90,.2) 42%,rgba(255,239,211,.07) 50%,transparent 66%); transform: rotate(14deg); }
.p-luxury::after { inset: 9%; border: 1px solid rgba(222,193,148,.22); }
.p-luxury .pv-mark { z-index: 4; font-family: Georgia,serif; font-size: clamp(1.1rem,3vw,1.5rem); font-weight: 400; letter-spacing: .35em; }
.p-luxury .pv-ui { inset: auto 30% 15%; height: 1px; background: linear-gradient(90deg,transparent,#c8a66c,transparent); }

/* 31 — Cottagecore */
.p-cottage { place-items: start; background: radial-gradient(circle at 14% 24%,rgba(255,255,255,.8) 0 2px,transparent 3px),linear-gradient(#eff4e8,#dfe8d4); color: #45633e; }
.p-cottage::before { right: 9%; top: 11%; width: 31%; height: 68%; border-radius: 50% 50% 10% 10%; background: rgba(255,255,255,.55); border: 1px solid #bfd0b0; }
.p-cottage::after { right: 19%; top: 21%; width: 10%; height: 43%; border-left: 2px solid #6e8b63; border-radius: 50%; transform: rotate(18deg); box-shadow: 9px 9px 0 -6px #6e8b63,-7px 18px 0 -5px #6e8b63; }
.p-cottage .pv-mark { z-index: 4; margin: 18% 0 0 9%; font-family: Georgia,serif; font-size: 1.6rem; font-style: italic; font-weight: 400; letter-spacing: -.04em; }
.p-cottage .pv-ui { inset: auto auto 17% 9%; width: 35%; height: 1px; background: #78906e; }

/* 32 — Industrial */
.p-industrial { place-items: start; background: repeating-linear-gradient(90deg,#1b1e22 0 22px,#24282e 23px 24px); color: #f0a202; }
.p-industrial::before { right: 0; top: 0; width: 36%; height: 100%; background: repeating-linear-gradient(135deg,#f0a202 0 9px,#15171a 9px 18px); clip-path: polygon(42% 0,100% 0,100% 100%,0 100%); }
.p-industrial::after { left: 8%; right: 10%; bottom: 12%; height: 2px; background: #4a5059; box-shadow: 0 -1px 0 #090a0c; }
.p-industrial .pv-mark { z-index: 4; margin: 11% 0 0 9%; font-size: 1.05rem; letter-spacing: .19em; }
.p-industrial .pv-ui { inset: 38% 29% 18% 9%; width: auto; height: auto; border: 1px solid #4a5059; background: #111316; box-shadow: inset 0 -7px 0 #f0a202; }
.p-industrial .pv-ui::before,.p-industrial .pv-ui::after { top: 12px; width: 6px; aspect-ratio: 1; border-radius: 50%; background: #737983; box-shadow: inset 0 1px 1px #b5bac0; }
.p-industrial .pv-ui::before { left: 12px; }
.p-industrial .pv-ui::after { right: 12px; }