/* NEON LABS / Original four-theme design system. No images, third-party branding or GPU-heavy canvas. */
/* All motifs are CSS-built; user content and accessibility remain primary. */
:where(.style-shot.emerald-orbit,.live-preview.layout-emerald-orbit,.emerald-orbit-mini,.storefront[data-theme="emerald-orbit"],body[data-theme="emerald-orbit"]){--lab-bg:#041810;--lab-card:#0b3427;--lab-ink:#e7fff0;--lab-accent:#73f7b0;--lab-muted:#a7d8bf;--lab-glow:#62f9b782;--lab-scene:radial-gradient(circle at 77% 49%,transparent 0 17%,#78ffc255 17.4% 18.2%,transparent 19% 23%,#59dfa63b 23.4% 24.2%,transparent 25%),radial-gradient(ellipse at 77% 55%,#25846a,#09271d 36%,#041811 82%)}
:where(.style-shot.cyan-pulse,.live-preview.layout-cyan-pulse,.cyan-pulse-mini,.storefront[data-theme="cyan-pulse"],body[data-theme="cyan-pulse"]){--lab-bg:#04131e;--lab-card:#0d2b40;--lab-ink:#e8fbff;--lab-accent:#63efff;--lab-muted:#a9d6e2;--lab-glow:#5debf68b;--lab-scene:repeating-linear-gradient(0deg,transparent 0 27px,#75e9fa14 28px 29px),radial-gradient(ellipse at 87% 15%,#126e92,#071a33 55%,#04131e)}
:where(.style-shot.magenta-flux,.live-preview.layout-magenta-flux,.magenta-flux-mini,.storefront[data-theme="magenta-flux"],body[data-theme="magenta-flux"]){--lab-bg:#1d0627;--lab-card:#411245;--lab-ink:#ffe9fc;--lab-accent:#ff79df;--lab-muted:#e0bbdf;--lab-glow:#ff6bd57d;--lab-scene:linear-gradient(125deg,#290933 0 48%,#7b235d 48.2% 67%,#360b53 67.2% 100%)}
:where(.style-shot.solar-neon,.live-preview.layout-solar-neon,.solar-neon-mini,.storefront[data-theme="solar-neon"],body[data-theme="solar-neon"]){--lab-bg:#1a110f;--lab-card:#3a221b;--lab-ink:#fff3df;--lab-accent:#ffb35f;--lab-muted:#edc29a;--lab-glow:#ffaf6280;--lab-scene:radial-gradient(ellipse at 77% 88%,#f1a74b95 0 8%,transparent 30%),repeating-linear-gradient(0deg,transparent 0 21px,#ffaa6915 22px 23px),linear-gradient(130deg,#170c13,#632c23 72%,#19121d)}
/* Their selection cards already show recognizably different navigation, hero and materials. */
:where(.style-shot.emerald-orbit,.style-shot.cyan-pulse,.style-shot.magenta-flux,.style-shot.solar-neon){background:var(--lab-scene)!important;color:var(--lab-ink)!important;isolation:isolate;overflow:hidden;font-family:system-ui,sans-serif}
:where(.style-shot.emerald-orbit,.style-shot.cyan-pulse,.style-shot.magenta-flux,.style-shot.solar-neon) h3{color:var(--lab-ink);font-weight:950;letter-spacing:-.065em;text-shadow:0 3px 16px #000a}
:where(.style-shot.emerald-orbit,.style-shot.cyan-pulse,.style-shot.magenta-flux,.style-shot.solar-neon) .sample-button{background:var(--lab-accent);color:var(--lab-bg);box-shadow:0 0 19px var(--lab-glow)}
.style-shot.emerald-orbit:after{content:"";position:absolute;width:37%;height:79%;top:11%;right:7%;border:3px solid #78ffc2;border-radius:50%;background:radial-gradient(circle,#82ffbb33,transparent 70%);box-shadow:0 0 30px var(--lab-glow),inset 0 0 25px #5efc8a55;transform:rotate(-18deg)}
.style-shot.cyan-pulse:after{content:"";position:absolute;width:40%;height:64%;top:20%;right:5%;clip-path:polygon(0 50%,16% 50%,28% 0,38% 95%,49% 32%,65% 32%,75% 0,88% 60%,100% 60%,100% 69%,82% 69%,76% 44%,68% 44%,55% 44%,33% 100%,23% 35%,18% 62%,0 62%);background:#7ef8ff;filter:drop-shadow(0 0 9px var(--lab-glow))}
.style-shot.magenta-flux:after{content:"";position:absolute;width:39%;height:100%;right:0;top:0;background:repeating-linear-gradient(-30deg,#fda7de50 0 8px,#6b1c76 8px 18px);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.style-shot.magenta-flux h3{font-style:italic;transform:rotate(-3deg)}
.style-shot.solar-neon:after{content:"";position:absolute;width:35%;aspect-ratio:1;right:7%;top:16%;border-radius:50%;background:linear-gradient(#fff3bb,#feab64 58%,#b34a34);box-shadow:0 0 30px #ff8e5699;clip-path:polygon(0 0,100% 0,100% 18%,0 18%,0 24%,100% 24%,100% 41%,0 41%,0 48%,100% 48%,100% 65%,0 65%,0 74%,100% 74%,100% 100%,0 100%)}
:where(.emerald-orbit-mini,.cyan-pulse-mini,.magenta-flux-mini,.solar-neon-mini){color:var(--lab-ink)!important;background:var(--lab-scene)!important;font-family:system-ui,sans-serif}
:where(.emerald-orbit-mini,.cyan-pulse-mini,.magenta-flux-mini,.solar-neon-mini) .mini-brand{color:var(--lab-accent)!important;letter-spacing:.16em;font:800 9px ui-monospace,monospace}
:where(.emerald-orbit-mini,.cyan-pulse-mini,.magenta-flux-mini,.solar-neon-mini) .mini-hero{position:relative;z-index:2;color:var(--lab-ink)!important;font:950 clamp(20px,2.8vw,35px)/.92 system-ui,sans-serif;letter-spacing:-.075em;text-shadow:0 2px 10px #000e;white-space:pre-wrap}
.emerald-orbit-mini:after{content:"";position:absolute;right:4%;top:23%;width:37%;aspect-ratio:1;border:5px double #65f5af;border-radius:50%;box-shadow:0 0 24px var(--lab-glow)}
.cyan-pulse-mini:after{content:"";position:absolute;right:4%;top:23%;height:55%;width:35%;border-left:9px solid #67e8fe;border-right:2px solid #67e8fe;transform:skew(-20deg);box-shadow:9px 1px 22px var(--lab-glow)}
.magenta-flux-mini:after{content:"";position:absolute;right:-5%;top:10%;width:47%;height:90%;transform:rotate(15deg);background:repeating-linear-gradient(90deg,#e45cb5 0 14%,#54275e 15% 29%)}
.solar-neon-mini:after{content:"";position:absolute;right:6%;top:16%;width:34%;aspect-ratio:1;border-radius:50%;background:linear-gradient(#fff0b6,#fb8750);box-shadow:0 0 36px #ff934b99}
/* Web live preview — separate page architecture (header, hero, cards). */
:where(.live-preview.layout-emerald-orbit,.live-preview.layout-cyan-pulse,.live-preview.layout-magenta-flux,.live-preview.layout-solar-neon){background:var(--lab-bg);color:var(--lab-ink);font-family:system-ui,sans-serif}
:where(.live-preview.layout-emerald-orbit,.live-preview.layout-cyan-pulse,.live-preview.layout-magenta-flux,.live-preview.layout-solar-neon) .live-topbar{color:var(--lab-ink);background:var(--lab-card);border-bottom:1px solid var(--lab-accent)}
:where(.live-preview.layout-emerald-orbit,.live-preview.layout-cyan-pulse,.live-preview.layout-magenta-flux,.live-preview.layout-solar-neon) .live-hero{background:var(--lab-scene);isolation:isolate;color:var(--lab-ink)}
:where(.live-preview.layout-emerald-orbit,.live-preview.layout-cyan-pulse,.live-preview.layout-magenta-flux,.live-preview.layout-solar-neon) .live-hero h3{color:var(--lab-ink);font-weight:950;letter-spacing:-.075em;text-wrap:balance}
:where(.live-preview.layout-emerald-orbit,.live-preview.layout-cyan-pulse,.live-preview.layout-magenta-flux,.live-preview.layout-solar-neon) .live-hero p{color:var(--lab-muted)}
:where(.live-preview.layout-emerald-orbit,.live-preview.layout-cyan-pulse,.live-preview.layout-magenta-flux,.live-preview.layout-solar-neon) .live-cta{background:var(--lab-accent);color:#071510;border-radius:6px;box-shadow:0 0 19px var(--lab-glow)}
:where(.live-preview.layout-emerald-orbit,.live-preview.layout-cyan-pulse,.live-preview.layout-magenta-flux,.live-preview.layout-solar-neon) .live-sections{background:var(--lab-bg)}
:where(.live-preview.layout-emerald-orbit,.live-preview.layout-cyan-pulse,.live-preview.layout-magenta-flux,.live-preview.layout-solar-neon) .live-card{background:var(--lab-card);color:var(--lab-ink);border:1px solid var(--lab-glow)}
.live-preview.layout-emerald-orbit .live-topbar{border-radius:0 0 22px 22px;padding:19px 6%}
.live-preview.layout-emerald-orbit .live-hero{grid-template-columns:1.15fr .85fr;min-height:410px}
.live-preview.layout-emerald-orbit .live-art:not(.with-photo){position:relative;overflow:visible;border-radius:50%;border:4px double #87ffd1;background:radial-gradient(circle at 50% 50%,#55ffd866,transparent 52%),#092d22;box-shadow:0 0 35px #4ef3b68c,inset 0 0 26px #65f5af55;animation:lw-orbit-breathe 4s ease-in-out infinite alternate}
.live-preview.layout-emerald-orbit .live-grid{grid-template-columns:1.3fr .85fr .85fr}
.live-preview.layout-cyan-pulse .live-topbar{border-bottom:3px solid var(--lab-accent);letter-spacing:.08em;font-family:ui-monospace,monospace}
.live-preview.layout-cyan-pulse .live-hero{grid-template-columns:1fr .55fr;min-height:365px;border-bottom:1px solid #72ebff55}
.live-preview.layout-cyan-pulse .live-hero h3{font:900 clamp(35px,4.6vw,58px)/.98 ui-monospace,monospace}
.live-preview.layout-cyan-pulse .live-art:not(.with-photo){background:repeating-linear-gradient(90deg,#70eaff 0 8px,transparent 9px 17px),radial-gradient(ellipse,#16567b,#09202e);clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);border:0;opacity:.88}
.live-preview.layout-cyan-pulse .live-card{border-radius:3px;border-left:4px solid var(--lab-accent)}
.live-preview.layout-magenta-flux .live-topbar{border-bottom:0;background:linear-gradient(90deg,#371044 0 35%,#6c225a 35% 36%,#251033 36%)}
.live-preview.layout-magenta-flux .live-hero{grid-template-columns:1fr .75fr;min-height:420px;clip-path:polygon(0 0,100% 0,100% 92%,0 100%)}
.live-preview.layout-magenta-flux .live-hero h3{font:950 italic clamp(39px,6vw,73px)/.94 system-ui,sans-serif;letter-spacing:-.09em}
.live-preview.layout-magenta-flux .live-art:not(.with-photo){border-radius:0 50% 0 50%;transform:rotate(-12deg);background:linear-gradient(135deg,#ff9bed,#8c316e 50%,#35104a);box-shadow:0 0 35px #ff78da6a}
.live-preview.layout-magenta-flux .live-grid{grid-template-columns:1.3fr 1fr;gap:15px}
.live-preview.layout-magenta-flux .live-card:first-child{grid-row:span 2}
.live-preview.layout-solar-neon .live-topbar{background:#291810;border-bottom:2px solid #ffae57}
.live-preview.layout-solar-neon .live-hero{grid-template-columns:1fr .85fr;min-height:405px;align-items:end}
.live-preview.layout-solar-neon .live-hero h3{font:950 clamp(37px,5.4vw,66px)/.98 system-ui,sans-serif;text-transform:uppercase}
.live-preview.layout-solar-neon .live-art:not(.with-photo){border-radius:50% 50% 7px 7px;background:linear-gradient(180deg,#fff7b3,#fc8a56 50%,#8a403c);box-shadow:0 0 37px #ffbb6285;clip-path:polygon(0 0,100% 0,100% 50%,0 50%,0 62%,100% 62%,100% 78%,0 78%,0 90%,100% 90%,100% 100%,0 100%)}
.live-preview.layout-solar-neon .live-card{border-radius:4px;border-top:4px solid #ffa657}
/* LuckyShop inline AND full page share tokens, but keep separate DOM-specific selectors. */
.storefront[data-theme="emerald-orbit"],body[data-theme="emerald-orbit"]{--store-bg:#041810;--store-hero:#0b3427;--product-surface:#123d2e;--store-muted:#a7d8bf;--bg:#041810;--paper:#0b3427;--ink:#e7fff0;--muted:#a7d8bf;--hero:#0a3224;--surface:#123b2a;--shape:#42cf99;color:#e7fff0;font-family:system-ui,sans-serif}
.storefront[data-theme="cyan-pulse"],body[data-theme="cyan-pulse"]{--store-bg:#04131e;--store-hero:#0d2b40;--product-surface:#0b293c;--store-muted:#a9d6e2;--bg:#04131e;--paper:#0d2b40;--ink:#e8fbff;--muted:#a9d6e2;--hero:#102b3b;--surface:#0b2d42;--shape:#3bc4d8;color:#e8fbff;font-family:ui-monospace,monospace}
.storefront[data-theme="magenta-flux"],body[data-theme="magenta-flux"]{--store-bg:#1d0627;--store-hero:#411245;--product-surface:#441a4f;--store-muted:#e0bbdf;--bg:#1d0627;--paper:#411245;--ink:#ffe9fc;--muted:#e0bbdf;--hero:#4c2051;--surface:#4f1c56;--shape:#f265c5;color:#ffe9fc;font-family:system-ui,sans-serif}
.storefront[data-theme="solar-neon"],body[data-theme="solar-neon"]{--store-bg:#1a110f;--store-hero:#3a221b;--product-surface:#492b22;--store-muted:#edc29a;--bg:#1a110f;--paper:#3a221b;--ink:#fff3df;--muted:#edc29a;--hero:#44241f;--surface:#40251e;--shape:#f3a54d;color:#fff3df;font-family:system-ui,sans-serif}
.storefront:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .storefront-hero,
body:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) main .hero{background:var(--lab-scene)}
.storefront:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .storefront-header,
body:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .store-header{background:var(--lab-card);border-bottom:2px solid var(--lab-accent)}
.storefront:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .storefront-hero h3,
body:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .hero h1{color:var(--lab-ink);font-weight:950;letter-spacing:-.085em}
.storefront:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .preview-product,
body:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .product-card{background:var(--lab-card);border:1px solid var(--lab-glow);border-radius:11px;color:var(--lab-ink)}
.storefront:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .hero-art,
body:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .hero-graphic{background:var(--lab-scene);border:1px solid var(--lab-glow)}
.storefront[data-theme="emerald-orbit"] .hero-art,body[data-theme="emerald-orbit"] .hero-graphic{border-radius:50%;border:4px double #77ffd1;box-shadow:0 0 34px #50efb37f;animation:lw-orbit-breathe 4s ease-in-out infinite alternate}
.storefront[data-theme="emerald-orbit"] .storefront-header strong,body[data-theme="emerald-orbit"] .store-name{text-shadow:0 0 13px #69ecaa85}
.storefront[data-theme="emerald-orbit"] .preview-product:first-child,body[data-theme="emerald-orbit"] .product-card:first-child{border-radius:30px 7px 7px 7px}
.storefront[data-theme="cyan-pulse"] .storefront-header,body[data-theme="cyan-pulse"] .store-header{border-bottom:3px solid #67eeff;font-family:ui-monospace,monospace;text-transform:uppercase}
.storefront[data-theme="cyan-pulse"] .hero-art,body[data-theme="cyan-pulse"] .hero-graphic{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);border-radius:0}
.storefront[data-theme="cyan-pulse"] .preview-product,body[data-theme="cyan-pulse"] .product-card{border-radius:2px;border-left:4px solid #6bf1ff}
.storefront[data-theme="magenta-flux"] .storefront-header,body[data-theme="magenta-flux"] .store-header{background:linear-gradient(90deg,#391049,#682357 56%,#261139)}
.storefront[data-theme="magenta-flux"] .storefront-hero h3,body[data-theme="magenta-flux"] .hero h1{font-style:italic;text-shadow:0 4px 28px #ff8cdc6d}
.storefront[data-theme="magenta-flux"] .hero-art,body[data-theme="magenta-flux"] .hero-graphic{clip-path:polygon(23% 0,100% 0,77% 100%,0 100%);border-radius:0}
.storefront[data-theme="magenta-flux"] .preview-product:first-child,body[data-theme="magenta-flux"] .product-card:first-child{grid-row:span 2}
.storefront[data-theme="solar-neon"] .storefront-header,body[data-theme="solar-neon"] .store-header{background:#25150e;border-bottom:3px double #ffc16e}
.storefront[data-theme="solar-neon"] .hero-art,body[data-theme="solar-neon"] .hero-graphic{border-radius:50% 50% 5px 5px;box-shadow:0 0 32px #ffaf6380;background:var(--lab-scene)}
.storefront[data-theme="solar-neon"] .preview-product,body[data-theme="solar-neon"] .product-card{border-radius:2px;border-top:4px solid #ffbc65}
.storefront[data-theme="solar-neon"] .storefront-hero h3,body[data-theme="solar-neon"] .hero h1{text-transform:uppercase}
@keyframes lw-orbit-breathe{from{box-shadow:0 0 17px #63e7ad52,inset 0 0 20px #64f6aa35}to{box-shadow:0 0 41px #63e7ad99,inset 0 0 33px #64f6aa65}}
/* Keep controls and existing composition families usable at every viewport size. */
@media(max-width:760px){
.live-preview:is(.layout-emerald-orbit,.layout-cyan-pulse,.layout-magenta-flux,.layout-solar-neon) .live-hero{grid-template-columns:1fr!important}
.live-preview:is(.layout-emerald-orbit,.layout-cyan-pulse,.layout-magenta-flux,.layout-solar-neon) .live-art{min-height:160px;height:190px;max-width:100%}
.storefront:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .storefront-hero,
body:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) main .hero{grid-template-columns:1fr!important}
.storefront:is([data-theme="emerald-orbit"],[data-theme="cyan-pulse"],[data-theme="magenta-flux"],[data-theme="solar-neon"]) .hero-art{min-height:120px;height:160px}
}
@media(prefers-reduced-motion:reduce){.live-preview.layout-emerald-orbit .live-art:not(.with-photo),.storefront[data-theme="emerald-orbit"] .hero-art,body[data-theme="emerald-orbit"] .hero-graphic{animation:none!important}}
