﻿/* Shared opt-in trend theme. Values from the measured replica design kit. */
.light body[data-pixel-ui='true'] {
  --background: oklch(95.8% .006 255);
  --foreground: oklch(20% .025 266);
  --card: oklch(99.3% .002 255);
  --card-foreground: oklch(20% .025 266);
  --popover: oklch(99.3% .002 255);
  --popover-foreground: oklch(20% .025 266);
  --primary: oklch(66% .2 42);
  --primary-foreground: oklch(17% .025 266);
  --secondary: oklch(91.5% .009 255);
  --secondary-foreground: oklch(24% .025 266);
  --muted: oklch(92.5% .008 255);
  --muted-foreground: oklch(44% .022 262);
  --accent: oklch(92.5% .035 262);
  --accent-foreground: oklch(36% .15 262);
  --destructive: oklch(56% .22 27);
  --destructive-foreground: oklch(100% 0 0);
  --border: oklch(84% .012 258);
  --input: oklch(80% .014 258);
  --ring: oklch(52% .19 262);
  --chart-1: oklch(66% .2 42);
  --chart-2: oklch(52% .19 262);
  --chart-3: oklch(78% .14 85);
  --chart-4: oklch(60% .12 190);
  --chart-5: oklch(40% .03 266);
  --radius: .875rem;
  --stroke: oklch(20% .025 266);
  --shadow-hard: oklch(20% .025 266);
  --sidebar: oklch(94.5% .007 255);
  --sidebar-foreground: oklch(24% .025 266);
  --sidebar-primary: oklch(66% .2 42);
  --sidebar-primary-foreground: oklch(17% .025 266);
  --sidebar-accent: oklch(91% .012 258);
  --sidebar-accent-foreground: oklch(20% .025 266);
  --sidebar-border: oklch(86% .012 258);
  --sidebar-ring: oklch(52% .19 262);
  --font-sans: "Space Grotesk Variable", "Space Grotesk", sans-serif;
  --font-serif-display: "Bricolage Grotesque Variable", "Bricolage Grotesque";
  --font-display: "Anton", "Impact", "Arial Narrow", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body[data-pixel-ui='true'] {
  --background: oklch(17.5% .018 266);
  --foreground: oklch(94% .006 255);
  --card: oklch(21.5% .02 266);
  --card-foreground: oklch(95% .006 255);
  --popover: oklch(21.5% .02 266);
  --popover-foreground: oklch(95% .006 255);
  --primary: oklch(72% .18 48);
  --primary-foreground: oklch(17% .025 266);
  --secondary: oklch(26% .02 266);
  --secondary-foreground: oklch(94% .006 255);
  --muted: oklch(25.5% .02 266);
  --muted-foreground: oklch(73% .016 256);
  --accent: oklch(30% .06 262);
  --accent-foreground: oklch(86% .07 262);
  --destructive: oklch(64% .22 25);
  --destructive-foreground: oklch(98.5% 0 0);
  --border: oklch(33% .022 266);
  --input: oklch(36% .022 266);
  --ring: oklch(68% .15 262);
  --chart-1: oklch(72% .18 48);
  --chart-2: oklch(68% .15 262);
  --chart-3: oklch(80% .14 85);
  --chart-4: oklch(70% .11 190);
  --chart-5: oklch(60% .02 256);
  --stroke: oklch(88% .008 255);
  --shadow-hard: oklch(72% .18 48);
  --sidebar: oklch(20% .02 266);
  --sidebar-foreground: oklch(94% .006 255);
  --sidebar-primary: oklch(72% .18 48);
  --sidebar-primary-foreground: oklch(17% .025 266);
  --sidebar-accent: oklch(28% .025 266);
  --sidebar-accent-foreground: oklch(95% .006 255);
  --sidebar-border: oklch(31% .022 266);
  --sidebar-ring: oklch(68% .15 262);
}

/* Stage layers copied from source CSS, with original selector names. */
.stage-wash {background:radial-gradient(70% 55% at 50% -8%,oklch(42% .14 266/.55),#0000 70%),radial-gradient(45% 40% at 8% 18%,oklch(55% .19 42/.22),#0000 70%),radial-gradient(45% 40% at 92% 22%,oklch(55% .2 262/.28),#0000 70%),linear-gradient(oklch(16% .022 266),oklch(13% .02 266))}
.stage-grid {background-image:radial-gradient(oklch(100% 0 0/.07) 1px,#0000 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(75% 60% at 50% 30%,#000 20%,#0000 75%);mask-image:radial-gradient(75% 60% at 50% 30%,#000 20%,#0000 75%)}
.stage-beam {filter:blur(28px);opacity:.75;transform-origin:50% 0;mix-blend-mode:screen;width:min(55vw,760px);height:135%;position:absolute;top:-12%}
.stage-beam-left {background:conic-gradient(from 168deg at 50% 0,#0000 0deg,oklch(74% .17 50/.34) 10deg,oklch(74% .17 50/.1) 20deg,#0000 26deg);animation:14s ease-in-out infinite stage-sway-a;left:2%}
.stage-beam-right {background:conic-gradient(from 166deg at 50% 0,#0000 0deg,oklch(70% .16 262/.1) 6deg,oklch(70% .16 262/.36) 16deg,#0000 26deg);animation:17s ease-in-out infinite stage-sway-b;right:2%}
.stage-glow {filter:blur(10px);background:radial-gradient(50% 50%,oklch(70% .17 48/.2),oklch(55% .18 290/.1) 45%,#0000 72%)}
.stage-floor {background:radial-gradient(55% 100% at 50% 100%,oklch(72% .18 48/.18),#0000 70%)}
.stage-grain {opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Animations copied from source CSS. */
@keyframes drift-a {0%,to{transform:translate(0)scale(1)}50%{transform:translate(6%,-4%)scale(1.1)}}
@keyframes drift-b {0%,to{transform:translate(0)scale(1)}50%{transform:translate(-5%,5%)scale(.95)}}
@keyframes drift-c {0%,to{transform:translate(0)scale(1)}50%{transform:translate(4%,6%)scale(1.08)}}
@keyframes stage-sway-a {0%,to{transform:rotate(-9deg)}50%{transform:rotate(7deg)}}
@keyframes stage-sway-b {0%,to{transform:rotate(9deg)}50%{transform:rotate(-6deg)}}
@keyframes spin {to{transform:rotate(360deg)}}
@keyframes ping {75%,to{opacity:0;transform:scale(2)}}
@keyframes pulse {50%{opacity:.5}}
@keyframes enter {0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}
@keyframes exit {to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}
@keyframes accordion-down {0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}}
@keyframes accordion-up {0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0}}

.sticker {border:2px solid var(--stroke);box-shadow:4px 4px 0 var(--shadow-hard)}
.sticker-sm {border:2px solid var(--stroke);box-shadow:3px 3px 0 var(--shadow-hard)}

/* The profile flag is rendered on body so dialogs and secondary routes share the theme. */
@font-face { font-family: Anton; src: url('/fonts/pixel/anton-latin.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/pixel/space-grotesk-latin.woff2') format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; }
body[data-pixel-ui='true'] { --pixel-foreground: var(--foreground); --pixel-background: var(--background); --pixel-muted: var(--muted-foreground); --pixel-card: var(--card); --pixel-border: var(--border); --font-sans: 'Space Grotesk', 'Segoe UI', sans-serif; font-family: var(--font-sans); background:var(--background); color:var(--foreground); }
body[data-pixel-ui='true'] .trend-site { --foreground:var(--pixel-foreground); --background:var(--pixel-background); --card:var(--pixel-card); --muted-foreground:var(--pixel-muted); --border:var(--pixel-border); --trend-secondary:var(--primary); color-scheme:dark; font-family:var(--font-sans); }
html.light body[data-pixel-ui='true'] .trend-site { color-scheme:light; }
body[data-pixel-ui='true'] :focus-visible { outline:2px solid var(--ring); outline-offset:3px; }
body[data-pixel-ui='true'] ::selection { background:var(--primary); color:var(--primary-foreground); }
body[data-pixel-ui='true'] :is(input,textarea) { caret-color:var(--primary); }
body[data-pixel-ui='true'] * { scrollbar-color:var(--primary) var(--background); scrollbar-width:thin; }
body[data-pixel-ui='true'] :is(h1,h2,.footer-tagline) { overflow-wrap:anywhere; }
body[data-pixel-ui='true'] main h1 { font-family:Anton,Impact,sans-serif; font-weight:400; text-transform:uppercase; }
body[data-pixel-ui='true'] main h2 { font-family:Anton,Impact,sans-serif; font-weight:400; }
body[data-pixel-ui='true'] article>header h1 { font-family:Anton,Impact,sans-serif; font-weight:400; text-transform:uppercase; }
body[data-pixel-ui='true'] .trend-guide-links a { min-height:44px; border:2px solid var(--stroke); border-radius:999px; background:var(--card); box-shadow:3px 3px 0 var(--shadow-hard); color:var(--foreground); }
body[data-pixel-ui='true'] .guide-site main { background:var(--background); }
body[data-pixel-ui='true'] .guide-intro h1, body[data-pixel-ui='true'] .guide-section h2, body[data-pixel-ui='true'] .guide-faq h2, body[data-pixel-ui='true'] .guide-related h2 { font-family:Anton,Impact,sans-serif; font-weight:400; letter-spacing:.012em; }
body[data-pixel-ui='true'] .guide-action { border:2px solid var(--stroke); border-radius:18px; box-shadow:3px 3px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .guide-faq>div { border-bottom:1px solid var(--border); }
body[data-pixel-ui='true'] .trend-site main { position:relative; isolation:isolate; overflow:hidden; background:none; }
.pixel-stage-art { position:absolute; inset:0 0 auto; height:1760px; z-index:-1; overflow:hidden; pointer-events:none; }
.pixel-stage-art :is(.stage-wash,.stage-grid,.stage-grain) { position:absolute; inset:0; }
.pixel-stage-art .stage-glow { position:absolute; top:4%; left:50%; width:min(1100px,140vw); height:520px; transform:translateX(-50%); }
.pixel-stage-art .stage-floor { position:absolute; left:0; right:0; bottom:0; height:224px; }
html.light .pixel-stage-art { opacity:.28; }
body[data-pixel-ui='true'] .trend-site-header { height:65px; border-bottom:1px solid var(--border); background:color-mix(in oklch,var(--background) 86%,transparent); backdrop-filter:blur(12px); }
html:not(.light) body[data-pixel-ui='true'] .trend-site-header { background:oklab(0.175 -0.00125561 -0.0179562 / .9); }
body[data-pixel-ui='true'] .trend-site-header > div:first-child { height:65px; max-width:none; padding-inline:16px; }
body[data-pixel-ui='true'] .trend-site-header nav a { font-size:14px; font-weight:700; }
body[data-pixel-ui='true'] .trend-header-brand span { max-width:none; font-size:17px; font-weight:700; }
body[data-pixel-ui='true'] .trend-site-header .trend-header-action { min-height:40px; border:2px solid var(--stroke); border-radius:999px; background:var(--primary); color:var(--primary-foreground); box-shadow:3px 3px 0 var(--shadow-hard); font-size:14px; font-weight:700; }
.pixel-theme-toggle { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--foreground); }
.pixel-theme-toggle .pixel-sun { display:none; }
.light .pixel-theme-toggle .pixel-sun { display:block; }
.light .pixel-theme-toggle .pixel-moon { display:none; }
.pixel-theme-toggle:hover { background:var(--accent); }
.pixel-mobile-tools { display:none; }
body[data-pixel-ui='true'] .trend-hero { display:flex; flex-direction:column; align-items:center; max-width:none; padding:42px 16px 0; text-align:center; }
.trend-hero .pixel-trends { order:0; }
body[data-pixel-ui='true'] .trend-hero .trend-badge { order:1; }
.trend-hero .pixel-hero-title-group { order:2; }
body[data-pixel-ui='true'] .trend-hero .trend-subtitle { order:3; }
body[data-pixel-ui='true'] .trend-hero .trend-hero-action { order:4; }
body[data-pixel-ui='true'] .trend-hero .trend-reference-spec { order:5; }
body[data-pixel-ui='true'] .trend-hero .trend-preview-offer { order:6; }
body[data-pixel-ui='true'] .trend-hero :is(.trend-reference-spec,.trend-preview-offer) { display:none; }
.pixel-sample-strip { order:5; display:flex; justify-content:center; gap:16px; width:100%; margin:30px auto 0; }
.pixel-sample-card { position:relative; display:block; flex:0 0 172px; width:172px; height:304px; overflow:hidden; border:2px solid var(--stroke); border-radius:19px; background:#05070b; box-shadow:4px 4px 0 var(--shadow-hard); text-align:left; }
.pixel-sample-card:nth-child(odd) { transform:rotate(-2deg); }
.pixel-sample-card:nth-child(even) { transform:rotate(2deg); }
.pixel-sample-card img { display:block; width:100%; height:100%; object-fit:cover; }
.pixel-sample-card::after { content:''; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#000c); pointer-events:none; }
.pixel-sample-card span,.pixel-sample-card small { position:absolute; z-index:1; left:8px; right:8px; color:#fff; }
.pixel-sample-card span { bottom:26px; font-size:12px; font-weight:700; }
.pixel-sample-card small { bottom:8px; font-size:10px; line-height:14px; }
.pixel-trends { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin:0 auto 23px; }
.pixel-trends>span { color:var(--muted-foreground); font-size:12px; font-weight:700; }
.pixel-trends a { display:inline-flex; justify-content:space-between; align-items:center; gap:18px; min-height:40px; min-width:220px; padding:6px 12px; border:2px solid var(--stroke); border-radius:999px; background:var(--card); box-shadow:3px 3px 0 var(--shadow-hard); font-size:14px; font-weight:700; }
body[data-pixel-ui='true'] .trend-badge { margin:0; padding:5px 12px; border:2px solid var(--stroke); border-radius:6px; background:var(--primary); color:var(--primary-foreground); box-shadow:3px 3px 0 var(--shadow-hard); font-size:12px; font-weight:700; transform:rotate(-2deg); }
body[data-pixel-ui='true'] .pixel-hero-title-group { margin-top:15px; }
body[data-pixel-ui='true'] .trend-hero h1 { max-width:none; margin:0 auto; font:400 96px/1 Anton,Impact,sans-serif; letter-spacing:.012em; text-transform:uppercase; text-wrap:balance; }
body[data-pixel-ui='true'] .pixel-hero-subtitle { margin:8px auto 0; font:400 30px/36px Anton,Impact,sans-serif; text-transform:uppercase; }
body[data-pixel-ui='true'] .trend-subtitle { max-width:672px; margin:12px auto 0; color:var(--muted-foreground); font:400 18px/28px 'Space Grotesk',sans-serif; text-wrap:pretty; }
body[data-pixel-ui='true'] .trend-reference-spec { margin:12px auto 0; font-size:14px; }
body[data-pixel-ui='true'] .trend-hero-action { display:flex; justify-content:center; gap:10px; width:max-content; max-width:460px; min-height:48px; margin:20px auto 0; padding:8px 18px; border:2px solid var(--stroke); border-radius:999px; background:var(--card); color:var(--foreground); box-shadow:3px 3px 0 var(--shadow-hard); font-size:16px; font-weight:700; }
body[data-pixel-ui='true'] .trend-hero-action:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .trend-preview-offer { max-width:672px; margin:12px auto 0; font-size:14px; line-height:20px; }
body[data-pixel-ui='true'] .trend-generator-wrap { max-width:1024px; margin:45px auto 0; padding:0; }
body[data-pixel-ui='true'] .trend-generator-shell { padding:24px; border:2px solid var(--stroke); border-radius:16px; background:var(--card); color:var(--foreground); box-shadow:4px 4px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .trend-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; height:44px; margin:0 0 19px; padding:4px; border-radius:12px; background:var(--muted); }
body[data-pixel-ui='true'] .trend-tabs button { min-height:0; border-radius:10px; font-size:14px; }
body[data-pixel-ui='true'] .trend-tabs button[aria-selected=true] { background:var(--background); color:var(--foreground); }
body[data-pixel-ui='true'] .studio-preview-progress { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body[data-pixel-ui='true'] .studio-panel { padding:0; }
body[data-pixel-ui='true'] .trend-generator-form { gap:0 32px; }
body[data-pixel-ui='true'] .studio-panel-heading { margin-bottom:10px; }
body[data-pixel-ui='true'] .trend-generator-step { gap:8px; font-size:14px; line-height:20px; }
body[data-pixel-ui='true'] .trend-step-number { width:20px; height:20px; font-size:12px; }
body[data-pixel-ui='true'] .studio-photo-grid { gap:16px; }
body[data-pixel-ui='true'] .studio-photo-field>label { font-size:14px; line-height:20px; }
body[data-pixel-ui='true'] .studio-photo { height:227px; min-height:227px; border:2px dashed color-mix(in oklch,var(--foreground) 35%,transparent); border-radius:16px; background:var(--background); overflow:hidden; }
body[data-pixel-ui='true'] .studio-upload { height:100%; min-height:0; color:var(--foreground); font-size:14px; }
body[data-pixel-ui='true'] .studio-upload svg { width:48px; height:48px; padding:11px; border-radius:50%; background:var(--primary); color:var(--primary-foreground); }
body[data-pixel-ui='true'] .studio-photo>img { width:100%; height:100%; max-height:none; object-fit:cover; }
body[data-pixel-ui='true'] .studio-photo-actions { position:absolute; inset:auto 0 0; justify-content:center; padding:18px 6px 6px; background:linear-gradient(transparent,#000b); }
body[data-pixel-ui='true'] .studio-photo-actions button { min-height:30px; color:#fff; }
body[data-pixel-ui='true'] .studio-stage-grid button { min-height:44px; border:1px solid var(--border); border-radius:999px; background:var(--secondary); color:var(--foreground); }
body[data-pixel-ui='true'] .studio-stage-grid button[aria-pressed=true] { border-color:var(--primary); background:var(--background); color:var(--foreground); }
body[data-pixel-ui='true'] .trend-topic-chips button { border:1px solid var(--border); background:var(--background); color:var(--foreground); }
body[data-pixel-ui='true'] .trend-review { border-color:var(--border); }
body[data-pixel-ui='true'] .studio-field textarea { border:1px solid var(--border); border-radius:13px; background:var(--secondary); color:var(--foreground); }
body[data-pixel-ui='true'] .studio-consent { color:var(--muted-foreground); }
body[data-pixel-ui='true'] .studio-price { color:var(--muted-foreground); }
body[data-pixel-ui='true'] .studio-submit { min-height:56px; border:2px solid var(--stroke); border-radius:18px; background:var(--primary); color:var(--primary-foreground); box-shadow:3px 3px 0 var(--shadow-hard); font-size:18px; font-weight:700; letter-spacing:.025em; text-transform:uppercase; }
body[data-pixel-ui='true'] .studio-submit:hover:not(:disabled) { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .studio-submit:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .studio-submit:disabled { opacity:.5; box-shadow:none; }
body[data-pixel-ui='true'] .trend-offer-facts { color:var(--muted-foreground); font-size:14px; line-height:20px; text-align:center; }
body[data-pixel-ui='true'] [data-measure='cost-line'] { margin-top:12px; color:var(--muted-foreground); font-size:14px; line-height:20px; text-align:center; }
body[data-pixel-ui='true'] [data-measure='cost-line'] p+ p { margin-top:8px; font-size:12px; }
body[data-pixel-ui='true'] .trend-mobile-action { display:none; }
body[data-pixel-ui='true'] .trend-reassurance { margin:52px 16px 64px; padding:0; color:var(--muted-foreground); font-size:14px; line-height:20px; }
body[data-pixel-ui='true'] .raindance-reference-gallery { max-width:1152px; margin:0 auto 64px; padding:0 16px; }
body[data-pixel-ui='true'] .raindance-reference-heading h2, body[data-pixel-ui='true'] .trend-other-effects h2, body[data-pixel-ui='true'] :is(.trend-story,.trend-how,.trend-details-grid,.trend-context,.trend-faq) h2, body[data-pixel-ui='true'] #pricing-section-title { font:400 clamp(30px,3vw,36px)/1.2 Anton,Impact,sans-serif; text-transform:uppercase; }
body[data-pixel-ui='true'] .raindance-reference-media { border:2px solid var(--stroke); border-radius:19px; box-shadow:4px 4px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .raindance-reference-grid { grid-template-columns:repeat(4,172px); justify-content:center; gap:16px; }
body[data-pixel-ui='true'] .raindance-reference-grid li:nth-child(odd) { transform:rotate(-2deg); }
body[data-pixel-ui='true'] .raindance-reference-grid li:nth-child(even) { transform:rotate(2deg); }
body[data-pixel-ui='true'] .raindance-reference-choice { position:relative; min-height:304px; border:2px solid var(--stroke); border-radius:19px; background:var(--background); box-shadow:4px 4px 0 var(--shadow-hard); overflow:hidden; }
body[data-pixel-ui='true'] .raindance-reference-thumbnail { height:304px; aspect-ratio:auto; border:0; border-radius:0; }
body[data-pixel-ui='true'] .raindance-reference-thumbnail img { width:100%; height:100%; border-radius:0; object-fit:cover; }
body[data-pixel-ui='true'] .raindance-reference-thumbnail::after { content:''; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#000c); pointer-events:none; }
body[data-pixel-ui='true'] .raindance-reference-choice-caption { position:absolute; z-index:1; right:8px; bottom:8px; left:8px; padding:0; color:#fff; }
body[data-pixel-ui='true'] .raindance-reference-choice-caption>span { color:#e3e3e3; font-size:10px; line-height:1.25; overflow-wrap:anywhere; }
body[data-pixel-ui='true'] .pixel-preview-example { max-width:1152px; padding:40px 16px; margin:auto; }
body[data-pixel-ui='true'] .trend-story { background:var(--secondary); color:var(--foreground); }
body[data-pixel-ui='true'] .trend-story-art { border:2px solid var(--stroke); box-shadow:4px 4px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .trend-how article { border:1px solid var(--border); background:var(--card); }
body[data-pixel-ui='true'] .trend-how-number { font-family:Anton,Impact,sans-serif; }
body[data-pixel-ui='true'] .trend-faq { max-width:none; padding:72px max(16px,calc((100vw - 768px)/2)); background:var(--secondary); color:var(--foreground); }
body[data-pixel-ui='true'] .trend-faq details { border-bottom:1px solid var(--border); }
body[data-pixel-ui='true'] .trend-faq summary { font-weight:700; }
body[data-pixel-ui='true'] .trend-faq summary svg { display:none; }
body[data-pixel-ui='true'] .trend-faq summary::after { content:'+'; font-size:22px; line-height:20px; }
body[data-pixel-ui='true'] .trend-faq details[open] summary::after { content:'−'; }
.pixel-final-action { padding:52px 16px 80px; text-align:center; }
.pixel-final-action a { display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:12px 24px; border:2px solid var(--stroke); border-radius:18px; background:var(--primary); color:var(--primary-foreground); box-shadow:4px 4px 0 var(--shadow-hard); font-size:18px; font-weight:700; }
body[data-pixel-ui='true'] footer { background:#151515; color:#e8e8e8; }
body[data-pixel-ui='true'] footer>div { max-width:1152px; padding:64px 16px 24px; }
body[data-pixel-ui='true'] footer p.font-serif { max-width:480px; margin-bottom:50px; font:400 28px/1.2 Anton,Impact,sans-serif; font-style:normal; text-transform:uppercase; }
body[data-pixel-ui='true'] footer a { color:#b2b2b2; }
body[data-pixel-ui='true'] footer a:hover { color:white; }
body[data-pixel-ui='true'] [role=dialog] { border:1px solid var(--border); border-radius:20px; background:var(--card); color:var(--foreground); box-shadow:0 24px 70px #0009; }
body[data-pixel-ui='true'] [role=dialog] h2 { font-family:var(--font-sans); font-size:20px; font-weight:700; line-height:26px; }
body[data-pixel-ui='true'] [role=dialog] p { color:var(--muted-foreground); }
body[data-pixel-ui='true'] [role=dialog] button:not([aria-label]):not([data-slot='dialog-close']) { border-radius:14px; }
body[data-pixel-ui='true'] [role=dialog] [data-slot='dialog-close'] { top:14px; right:14px; width:32px; height:32px; min-height:0; display:grid; place-items:center; border:0; border-radius:999px; background:transparent; box-shadow:none; color:var(--foreground); opacity:.85; }
body[data-pixel-ui='true'] [role=dialog] [data-slot='dialog-close']:hover { background:var(--secondary); opacity:1; }
body[data-pixel-ui='true'] .pixel-signin-dialog { width:min(calc(100vw - 32px),360px); padding:20px 16px 16px; }
body[data-pixel-ui='true'] .pixel-signin-dialog .pixel-modal-photos { justify-content:center; align-items:center; height:96px; gap:0; }
body[data-pixel-ui='true'] .pixel-modal-photos img { width:76px; height:76px; border:4px solid var(--background); border-radius:18px; transform:rotate(-7deg); }
body[data-pixel-ui='true'] .pixel-modal-photos img+img { margin-left:-12px; transform:rotate(6deg); }
body[data-pixel-ui='true'] .pixel-modal-placeholder { display:grid; place-items:center; height:96px; }
body[data-pixel-ui='true'] .pixel-modal-placeholder img { width:56px; height:56px; object-fit:contain; }
body[data-pixel-ui='true'] .pixel-signin-dialog button:not([aria-label]):not([data-slot='dialog-close']) { min-height:50px; border:2px solid var(--stroke); background:var(--primary); color:var(--primary-foreground); box-shadow:3px 3px 0 var(--shadow-hard); font-size:16px; font-weight:700; }
body[data-pixel-ui='true'] .pixel-signin-dialog a { color:var(--muted-foreground); font-size:14px; }
body[data-pixel-ui='true'] .pixel-plans-dialog { width:min(calc(100vw - 32px),768px); padding:20px 16px; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-plans { gap:16px; }
/* Paywall: name and price on one line so both packs and their buttons fit on a phone screen. */
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:baseline; min-height:0; margin-bottom:14px; padding:16px; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>* { grid-column:1 / -1; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>:is(h2,h3,h4) { grid-column:1; grid-row:1; margin:0; font-size:20px; line-height:26px; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>.trend-pricing-price { grid-column:2; grid-row:1; margin:0; color:var(--foreground); line-height:30px; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card .trend-pricing-price span:first-child { font-size:28px; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>:is(h2,h3,h4)+p { grid-column:1; grid-row:2; margin:2px 0 0; color:var(--muted-foreground); }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>.trend-pricing-unit-price { grid-column:2; grid-row:2; margin:2px 0 0; text-align:right; font-size:13px; color:var(--muted-foreground); }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>.trend-pricing-price+p { display:none; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>.trend-pricing-credit-note { margin-top:8px; font-size:12px; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>.trend-pricing-savings { margin-top:2px; font-size:12px; color:var(--primary); }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>ul { display:none; }
body[data-pixel-ui='true'] .pixel-plans-dialog .trend-pricing-card>.trend-pricing-buy { margin-top:12px; min-height:46px; border:2px solid var(--stroke); background:var(--primary); color:var(--primary-foreground); box-shadow:3px 3px 0 var(--shadow-hard); font-size:15px; font-weight:700; }
/* Below 700px the numbered "Photos" heading is visually hidden, so the line above the photo slots carries the number there. */
@media(max-width:700px) {
  body[data-pixel-ui='true'] .reference-preview-explanation strong { display:flex; align-items:flex-start; gap:10px; }
  body[data-pixel-ui='true'] .reference-preview-explanation strong::before { content:'1'; flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:3px; border-radius:999px; background:var(--primary); color:var(--primary-foreground); font-family:var(--font-sans); font-size:12px; font-weight:700; line-height:1; }
}
body[data-pixel-ui='true'] .studio-panel-heading h2 { font-family:var(--font-sans); font-size:16px; font-weight:700; line-height:22px; letter-spacing:0; text-transform:none; }
body[data-pixel-ui='true'] .trend-best-value { padding:3px 12px; background:var(--primary); color:var(--primary-foreground); font-size:12px; font-weight:700; line-height:18px; margin:0; }
body[data-pixel-ui='true'] [data-sonner-toast] { border:1px solid var(--primary); border-radius:10px; background:var(--card); color:var(--foreground); box-shadow:0 8px 24px #0006; font-family:var(--font-sans); }
body[data-pixel-ui='true'] main:has(>div>div[data-slot='card']) { background:var(--background); }
body[data-pixel-ui='true'] main:has(>div>div[data-slot='card']) [data-slot='card'] { border:2px solid var(--stroke); border-radius:20px; background:var(--card); box-shadow:4px 4px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .trend-pricing-card { position:relative; padding:20px; border:2px solid var(--border); border-radius:18px; background:var(--card); color:var(--foreground); }
body[data-pixel-ui='true'] .trend-pricing-card:has(.trend-best-value) { border-color:var(--stroke); box-shadow:4px 4px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] #pricing .trend-pricing-group:first-child .trend-pricing-card:first-child { border-color:var(--stroke); box-shadow:4px 4px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .trend-best-value { position:absolute; top:-18px; left:50%; transform:translateX(-50%) rotate(-2deg); white-space:nowrap; border:2px solid var(--stroke); border-radius:999px; box-shadow:3px 3px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .trend-pricing-price { margin-top:10px; font-size:36px; line-height:44px; }
body[data-pixel-ui='true'] .trend-pricing-price span:first-child { font-size:36px; letter-spacing:-.04em; }
body[data-pixel-ui='true'] .trend-pricing-buy { min-height:44px; border:1px solid var(--border); border-radius:999px; background:var(--secondary); color:var(--foreground); font-size:14px; }
body[data-pixel-ui='true'] .trend-pricing-card>div.flex-1 { display:none; }
body[data-pixel-ui='true'] .trend-pricing-card>.trend-pricing-buy { order:1; margin-top:16px; }
body[data-pixel-ui='true'] .trend-pricing-card>ul { order:2; margin-top:14px; }
body[data-pixel-ui='true'] .trend-pricing-card:has(.trend-best-value) .trend-pricing-buy { border:2px solid var(--stroke); background:var(--primary); color:var(--primary-foreground); box-shadow:3px 3px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] #pricing .trend-pricing-group:first-child .trend-pricing-card:first-child .trend-pricing-buy { border:2px solid var(--stroke); background:var(--primary); color:var(--primary-foreground); box-shadow:3px 3px 0 var(--shadow-hard); }
body[data-pixel-ui='true'] .trend-pricing-card li { position:relative; margin:5px 0; padding-left:17px; font-size:12px; line-height:18px; }
body[data-pixel-ui='true'] .trend-pricing-card li::before { content:'✓'; position:absolute; left:0; color:var(--primary); }
body[data-pixel-ui='true'] #pricing { max-width:1184px; padding:92px 16px 80px; }
body[data-pixel-ui='true'] main:has(#pricing) { background:radial-gradient(70% 55% at 50% -8%,oklch(42% .14 266/.55),transparent 70%),radial-gradient(45% 40% at 8% 18%,oklch(55% .19 42/.22),transparent 70%),radial-gradient(45% 40% at 92% 22%,oklch(55% .2 262/.28),transparent 70%),linear-gradient(oklch(16% .022 266),oklch(13% .02 266)); }
body[data-pixel-ui='true'] #pricing>div:first-child { max-width:none; margin-bottom:46px; }
body[data-pixel-ui='true'] .pixel-pricing-kicker { display:inline-flex; padding:3px 12px; border:2px solid var(--stroke); border-radius:999px; background:#e8ebf1; color:#111925; box-shadow:3px 3px 0 var(--shadow-hard); font-size:12px; font-weight:700; line-height:20px; }
body[data-pixel-ui='true'] #pricing h1 { max-width:1152px; min-height:96px; margin:18px auto 0; font:400 48px/48px Anton,Impact,sans-serif; text-transform:uppercase; letter-spacing:.012em; }
body[data-pixel-ui='true'] #pricing>div:first-child>p { max-width:576px; margin:16px auto 0; font-size:16px; line-height:24px; }
body[data-pixel-ui='true'] .trend-pricing-plans { gap:54px; }
body[data-pixel-ui='true'] .trend-pricing-cards { gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
body[data-pixel-ui='true'] .trend-pricing-group>h2 { margin-bottom:20px; font:400 30px/36px Anton,Impact,sans-serif; text-transform:uppercase; }
body[data-pixel-ui='true'] #pricing table { font-size:14px; background:var(--card); }
body[data-pixel-ui='true'] #pricing table :is(th,td) { padding:12px; border-bottom:1px solid var(--border); }
@media(max-width:767px) {
  body[data-pixel-ui='true'] .trend-site-header nav { display:none; }
  body[data-pixel-ui='true'] .trend-site-header .trend-header-brand span { display:none; }
  .pixel-mobile-tools { display:flex; align-items:center; gap:2px; margin-left:auto; }
  body[data-pixel-ui='true'] .trend-site-header .trend-header-action { min-height:32px; padding:4px 10px; margin:0 8px 0 0; font-size:12px; }
  body[data-pixel-ui='true'] .trend-hero { padding:32px 16px 0; }
  .pixel-trends { display:block; margin-bottom:18px; }
  .pixel-trends>span { display:block; margin-bottom:8px; }
  .pixel-trends a { display:flex; width:min(260px,100%); min-height:44px; margin:8px auto; }
  body[data-pixel-ui='true'] .trend-badge { display:inline-flex; font-size:11px; }
  body[data-pixel-ui='true'] .pixel-hero-title-group { margin-top:14px; }
  body[data-pixel-ui='true'] .trend-hero h1 { font-size:clamp(38px,10vw,42px); line-height:1; }
  body[data-pixel-ui='true'] .pixel-hero-subtitle { font-size:20px; line-height:28px; }
  body[data-pixel-ui='true'] .trend-subtitle { font-size:16px; line-height:24px; }
  body[data-pixel-ui='true'] .trend-hero-action { width:100%; min-height:64px; margin-top:20px; font-size:14px; line-height:20px; }
  body[data-pixel-ui='true'] .pixel-sample-strip { display:none; }
  body[data-pixel-ui='true'] .trend-generator-wrap { margin:32px 16px 0; }
  body[data-pixel-ui='true'] .trend-generator-shell { padding:16px; }
  body[data-pixel-ui='true'] .trend-tabs { margin-bottom:20px; }
  body[data-pixel-ui='true'] .trend-generator-form { display:block; }
  body[data-pixel-ui='true'] .studio-photo-grid { gap:12px; }
  body[data-pixel-ui='true'] .studio-photo { height:194px; min-height:194px; }
  body[data-pixel-ui='true'] .studio-photo-field>label { min-height:0; font-size:12px; }
  body[data-pixel-ui='true'] .trend-reassurance { margin:51px 16px 64px; }
  body[data-pixel-ui='true'] .raindance-reference-gallery { padding:0 16px; }
  body[data-pixel-ui='true'] .raindance-reference-grid { display:flex; justify-content:flex-start; gap:12px; overflow-x:auto; }
  body[data-pixel-ui='true'] .raindance-reference-grid li { flex:0 0 112px; width:112px; }
  body[data-pixel-ui='true'] .raindance-reference-choice, body[data-pixel-ui='true'] .raindance-reference-thumbnail { min-height:190px; height:190px; }
  body[data-pixel-ui='true'] .raindance-reference-heading h2 { font-size:30px; }
  body[data-pixel-ui='true'] .trend-faq { padding:64px 16px; }
  body[data-pixel-ui='true'] #pricing { padding:80px 16px; }
  body[data-pixel-ui='true'] #pricing h1 { min-height:90px; margin-top:14px; font-size:30px; line-height:30px; }
  body[data-pixel-ui='true'] #pricing>div:first-child>p { max-width:358px; }
  body[data-pixel-ui='true'] .trend-pricing-cards { display:block; }
  body[data-pixel-ui='true'] .trend-pricing-card { min-height:332px; margin-bottom:16px; }
  body[data-pixel-ui='true'] footer>div { padding-top:64px; }
  body[data-pixel-ui='true'] footer>div>div[class*='grid'] { display:block; }
  body[data-pixel-ui='true'] footer>div>div[class*='grid']>div { margin-bottom:30px; }
}
@media(prefers-reduced-motion:reduce) { body[data-pixel-ui='true'] *, body[data-pixel-ui='true'] *::before, body[data-pixel-ui='true'] *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }




