/* =====================================================================
   PromptsTime V3 - design system
   Brand: Bricolage Grotesque (display) + Plus Jakarta Sans (text)
   Ink / violet / coral palette, soft depth, category icons as identity.
   Breakpoints: 640 / 1000 / 1280. Motion respects prefers-reduced-motion.
   ===================================================================== */
@font-face{font-family:"PT Display";src:url(/assets/store/fonts/BricolageGrotesque-latin-var.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"PT Sans";src:url(/assets/store/fonts/PlusJakartaSans-latin-var.woff2) format("woff2");font-weight:400 800;font-display:swap}
@view-transition{navigation:auto}
:root{
  --ink:#0f1222;--text:#3a4056;--muted:#6b7089;--faint:#9aa0b5;--line:#e8e9f2;--line-2:#d9dbe8;
  --bg:#fff;--surface:#f7f7fb;--surface-2:#f0f0f8;
  --brand:#5b4bff;--brand-600:#4838ee;--brand-50:#f1efff;--brand-100:#e3dfff;--coral:#ff6a4d;
  --free:#12814f;--free-50:#e8f8ef;
  --display:"PT Display","PT Sans",system-ui,sans-serif;--sans:"PT Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
  --sh-1:0 1px 2px rgba(15,18,34,.06);--sh-2:0 12px 32px -14px rgba(24,20,70,.22),0 2px 6px rgba(24,20,70,.05);
  --sh-3:0 36px 70px -30px rgba(24,20,70,.42),0 8px 20px -10px rgba(24,20,70,.16);
  --ease:cubic-bezier(.2,.7,.2,1);--wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 16px/1.6 var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;line-height:1.05;letter-spacing:-.025em;font-weight:750}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid var(--brand-100);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media (min-width:640px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:200;border-radius:8px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:700 15.5px/1 var(--sans);white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 24px -12px rgba(15,18,34,.7)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(15,18,34,.75)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 12px 26px -12px rgba(91,75,255,.8)}
.btn-brand:hover{background:var(--brand-600);transform:translateY(-1px)}
.btn-soft{background:#fff;color:var(--ink);border-color:var(--line-2)}.btn-soft:hover{border-color:var(--ink)}
.btn-lg{min-height:58px;padding:0 30px;font-size:16.5px}
.btn-block{width:100%}
.btn .arr{transition:transform .2s var(--ease)}.btn:hover .arr{transform:translateX(3px)}

/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.hdr.is-scrolled{border-color:var(--line);box-shadow:0 6px 20px -16px rgba(24,20,70,.35)}
.hdr-row{height:68px;display:flex;align-items:center;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font:750 20px var(--display);letter-spacing:-.02em;color:var(--ink)}
.brand-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#7a6cff,var(--brand) 55%,#3f2fe0);display:grid;place-content:center;color:#fff;font:800 19px var(--display);box-shadow:0 8px 18px -8px rgba(91,75,255,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.brand b{color:var(--brand);font-weight:750}
.nav{display:none;align-items:center;gap:4px;margin-left:28px}
.nav a,.nav summary{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;font:600 15px var(--sans);color:var(--text);list-style:none;cursor:pointer;transition:background .15s,color .15s}
.nav a:hover,.nav summary:hover,.nav a.on{background:var(--surface-2);color:var(--ink)}
.nav summary::-webkit-details-marker{display:none}
.nav summary svg{width:14px;height:14px;transition:transform .2s}.mega[open] summary svg{transform:rotate(180deg)}
.mega{position:relative}
.mega-panel{position:absolute;top:calc(100% + 14px);left:-40px;width:560px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;animation:pop .18s var(--ease)}
.nav .mega-panel a{height:auto;border-radius:var(--r);padding:10px;display:flex;align-items:center;gap:14px}
.mega-panel img{width:52px;height:46px;object-fit:contain}
.mega-panel b{display:block;font:700 15px var(--sans);color:var(--ink)}.mega-panel small{color:var(--muted);font-size:13px}
.nav .mega-all{grid-column:1/-1;justify-content:center;border-top:1px solid var(--line);border-radius:0;margin-top:4px;padding-top:12px;font-weight:700;color:var(--brand)}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.search-trigger{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--muted);font:500 15px var(--sans);transition:border-color .2s,box-shadow .2s}
.search-trigger:hover{border-color:var(--ink);color:var(--ink)}
.search-trigger .label{display:none}
.search-trigger kbd{display:none;font:600 12px var(--sans);color:var(--faint);border:1px solid var(--line-2);border-radius:6px;padding:2px 7px}
.icon-btn{width:44px;height:44px;display:grid;place-content:center;border-radius:999px;border:0;background:transparent;color:var(--ink)}
.icon-btn:hover{background:var(--surface-2)}
.search-trigger.mobile{width:44px;padding:0;justify-content:center;border:0;background:transparent;color:var(--ink)}
.search-trigger.desk{display:none}
@media (min-width:1000px){
  .nav{display:flex}.menu-btn{display:none}
  .search-trigger.mobile{display:none}.search-trigger.desk{display:inline-flex;width:250px}
  .search-trigger .label{display:inline;flex:1;text-align:left}.search-trigger kbd{display:inline}
}
/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:90;background:rgba(15,18,34,.4);opacity:0;pointer-events:none;transition:opacity .2s}
.sheet.is-open{opacity:1;pointer-events:auto}
.sheet-panel{position:absolute;top:0;bottom:0;right:0;width:min(420px,100%);background:#fff;padding:10px 20px 28px;overflow-y:auto;transform:translateX(100%);transition:transform .28s var(--ease)}
.sheet.is-open .sheet-panel{transform:none}
.sheet-top{display:flex;justify-content:space-between;align-items:center;height:52px;margin-bottom:6px}
.sheet-links a{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);font:700 21px var(--display);color:var(--ink)}
.sheet h3{font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:26px 0 12px}
.sheet-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet-cats a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:var(--r);background:var(--surface);font:700 14px var(--sans);color:var(--ink);text-align:center}
.sheet-cats img{width:64px;height:56px;object-fit:contain}

/* ---------------- search overlay ---------------- */
.search-dlg{position:fixed;inset:0;z-index:100;display:none;background:rgba(15,18,34,.42);backdrop-filter:blur(6px);padding:12px}
.search-dlg.is-open{display:block;animation:fade .18s ease}
.search-box{max-width:720px;margin:6vh auto 0;background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;animation:pop .22s var(--ease)}
.search-field{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line)}
.search-field svg{color:var(--muted)}
.search-field input{flex:1;height:68px;border:0;outline:0;font:500 19px var(--sans);color:var(--ink);background:transparent;min-width:0}
.search-field .esc{font:600 12px var(--sans);color:var(--faint);border:1px solid var(--line-2);border-radius:6px;padding:3px 8px;background:#fff}
.search-body{max-height:min(62vh,540px);overflow-y:auto;padding:12px}
.search-body h4{font:800 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:10px 8px}
.sr-item{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--r)}
.sr-item:hover,.sr-item.is-active{background:var(--surface)}
.sr-item img{width:72px;height:54px;border-radius:10px;object-fit:cover;flex:none;box-shadow:var(--sh-1)}
.sr-item.sr-cat img{width:48px;height:42px;object-fit:contain;box-shadow:none}
.sr-item b{display:block;color:var(--ink);font:700 15.5px var(--sans)}.sr-item small{color:var(--muted);font-size:13.5px}
.sr-cats{display:flex;flex-wrap:wrap;gap:8px;padding:0 8px 8px}
.sr-cats a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;background:var(--surface);font:600 14px var(--sans);color:var(--ink)}
.sr-cats img{width:30px;height:26px;object-fit:contain}
.sr-empty{padding:18px 10px;color:var(--muted)}
.sr-all{display:block;text-align:center;padding:12px;font-weight:700;color:var(--brand);border-top:1px solid var(--line);margin-top:8px}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(760px 520px at 78% 30%,rgba(91,75,255,.14),transparent 70%),radial-gradient(620px 420px at 100% 100%,rgba(255,106,77,.12),transparent 70%),linear-gradient(180deg,#fff,#fafaff)}
.hero-grid{display:grid;gap:30px;padding:30px 0 40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--sans);color:var(--brand);background:var(--brand-50);padding:6px 12px;border-radius:999px}
.hero h1{font-size:clamp(40px,7.2vw,72px);line-height:.98;letter-spacing:-.035em;margin-top:18px;max-width:11.5em}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--brand),#a24bff 60%,var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(17px,2.2vw,19.5px);line-height:1.55;color:var(--text);margin-top:18px;max-width:34em}
.hero-search{position:relative;display:flex;align-items:center;margin-top:26px;max-width:560px;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 20px;box-shadow:var(--sh-2);transition:border-color .2s,box-shadow .2s}
.hero-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 5px var(--brand-50),var(--sh-2)}
.hero-search svg{color:var(--muted)}
.hero-search input{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;font:500 16.5px var(--sans);color:var(--ink);padding:0 12px}
.hero-search .btn{min-height:48px;padding:0 22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;color:var(--muted);font:600 14px var(--sans)}
.hero-facts span{display:inline-flex;align-items:center;gap:8px}.hero-facts svg{width:17px;height:17px;color:var(--free)}
/* layered cover composition (real resources) */
.stack{position:relative;height:clamp(280px,62vw,540px)}
.stack a{position:absolute;width:62%;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);transition:transform .55s var(--ease),box-shadow .3s;will-change:transform;background:#fff}
.stack img{width:100%;height:100%;object-fit:cover}
.stack a:nth-child(1){left:19%;top:16%;z-index:4;transform:translate3d(calc(var(--px,0)*10px),calc(var(--py,0)*8px),0)}
.stack a:nth-child(2){left:0;top:2%;z-index:3;transform:translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*-6px),0) rotate(-7deg) scale(.88)}
.stack a:nth-child(3){right:0;top:30%;z-index:2;transform:translate3d(calc(var(--px,0)*16px),calc(var(--py,0)*10px),0) rotate(6deg) scale(.86)}
.stack a:nth-child(4){left:6%;bottom:0;z-index:1;transform:translate3d(calc(var(--px,0)*-8px),calc(var(--py,0)*12px),0) rotate(-3deg) scale(.78)}
@media (hover:hover){
  .stack:hover a:nth-child(2){transform:translate(-5%,-4%) rotate(-10deg) scale(.88)}
  .stack:hover a:nth-child(3){transform:translate(6%,4%) rotate(9deg) scale(.86)}
  .stack:hover a:nth-child(4){transform:translate(-4%,8%) rotate(-5deg) scale(.78)}
  .stack a:hover{z-index:5;box-shadow:0 44px 80px -30px rgba(24,20,70,.55)}
}
@media (min-width:1000px){.hero-grid{grid-template-columns:1.02fr 1fr;padding:54px 0 72px;gap:48px}}

/* ---------------- sections ---------------- */
.sec{padding:52px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.sec-head h2{font-size:clamp(28px,4vw,40px)}
.sec-head p{color:var(--muted);margin-top:8px;font-size:16px;max-width:40em}
.more{display:inline-flex;align-items:center;gap:6px;font:700 15px var(--sans);color:var(--ink);white-space:nowrap;border-bottom:2px solid var(--brand-100);padding-bottom:2px;transition:border-color .2s}
.more:hover{border-color:var(--brand)}
.band{background:var(--surface)}
@media (min-width:1000px){.sec{padding:80px 0}}

/* ---------------- category tiles (approved icons) ---------------- */
.cats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,44%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 14px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-height:196px;padding:18px 14px;border-radius:var(--r-xl);background:linear-gradient(180deg,var(--tint,#f4f3ff),#fff 85%);border:1px solid var(--line);text-align:center;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.cat img{width:108px;height:95px;object-fit:contain;transition:transform .45s var(--ease);filter:drop-shadow(0 14px 16px rgba(24,20,70,.14))}
.cat b{font:750 18px var(--display);color:var(--ink);letter-spacing:-.01em}
.cat small{font:600 13px var(--sans);color:var(--muted);margin-top:-6px}
@media (hover:hover){.cat:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}.cat:hover img{transform:translateY(-6px) scale(1.06) rotate(-3deg)}}
@media (min-width:640px){.cats{grid-auto-columns:minmax(170px,1fr)}}
@media (min-width:1000px){.cats{grid-auto-flow:row;grid-template-columns:repeat(var(--n,5),1fr);overflow:visible}}
.tint-business{--tint:#e6eeff}.tint-marketing{--tint:#ffe6f1}.tint-social-media{--tint:#eeeaff}.tint-productivity{--tint:#e3f7ea}.tint-education{--tint:#fff3dc}.tint-writing{--tint:#f3f3f7}.tint-calendars{--tint:#ffe9ea}.tint-video{--tint:#ffeaea}

/* ---------------- resource cards ---------------- */
.grid{display:grid;gap:30px 22px;grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:34px 24px}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,1fr);gap:40px 28px}}
.rc a{display:block}
.rc-media{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);box-shadow:var(--sh-1);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.rc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rc-cta{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(15,18,34,.88);color:#fff;font:700 13.5px var(--sans);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease)}
.rc-body{padding:16px 4px 0}
.rc-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:700 12px var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
.price{font:800 16px var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}.price.free{color:var(--free)}
.rc h3{font-size:22px;line-height:1.15;margin-top:8px;letter-spacing:-.02em}
.rc p{color:var(--muted);margin-top:6px;font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){.rc:hover .rc-media{box-shadow:var(--sh-3);transform:translateY(-4px)}.rc:hover .rc-media img{transform:scale(1.035)}.rc:hover .rc-cta{opacity:1;transform:none}}
/* lead feature */
.lead{display:grid;gap:22px;align-items:center;padding:12px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);margin-bottom:40px}
.lead-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;display:block}
.lead-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.lead:hover .lead-media img{transform:scale(1.03)}
.lead-body{padding:4px 10px 14px}
.lead-kicker{display:flex;align-items:center;gap:10px;font:800 12.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.lead-kicker img{width:36px;height:32px;object-fit:contain}
.lead h3{font-size:clamp(30px,3.6vw,44px);margin-top:14px;line-height:1.02}
.lead p{font-size:18px;color:var(--text);margin-top:14px;max-width:30em}
.lead ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.lead li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.lead li svg{color:var(--free);margin-top:3px;width:18px;height:18px}
.lead-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}
.lead-foot .price{font:750 28px var(--display)}
@media (min-width:1000px){.lead{grid-template-columns:1.15fr 1fr;padding:18px;gap:44px}.lead-body{padding:10px 26px 10px 0}}
.why{display:grid;gap:12px;margin-bottom:30px}
.why div{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.why svg{color:var(--brand);margin-top:2px}.why b{display:block;color:var(--ink);font-size:15.5px}.why span{color:var(--muted);font-size:14.5px}
@media (min-width:1000px){.why{grid-template-columns:repeat(3,1fr)}}

/* ---------------- discover / listing ---------------- */
.page-head{padding:30px 0 26px;background:linear-gradient(180deg,var(--tint,#f7f7fb),#fff)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:600 14px var(--sans);color:var(--muted);margin-bottom:14px}
.crumbs a:hover{color:var(--ink)}
.page-head-row{display:flex;align-items:center;gap:18px}
.page-head-row img{width:92px;height:81px;object-fit:contain;flex:none;filter:drop-shadow(0 14px 16px rgba(24,20,70,.16))}
.page-head h1{font-size:clamp(34px,5.5vw,56px)}
.page-head p{color:var(--text);font-size:17px;margin-top:10px;max-width:40em}
.filters{position:sticky;top:68px;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.filters-row{display:flex;align-items:center;gap:10px;padding:12px 0;overflow-x:auto;scrollbar-width:none}
.filters-row::-webkit-scrollbar{display:none}
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:4px;flex:none}
.seg a{padding:9px 16px;border-radius:999px;font:700 14px var(--sans);color:var(--muted);transition:background .2s,color .2s}
.seg a.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.fcat{display:inline-flex;align-items:center;gap:8px;flex:none;height:44px;padding:0 14px 0 8px;border-radius:999px;border:1px solid var(--line);background:#fff;font:700 14px var(--sans);color:var(--text);transition:border-color .2s,background .2s}
.fcat img{width:32px;height:28px;object-fit:contain}
.fcat:hover{border-color:var(--line-2)}.fcat.on{border-color:var(--ink);background:var(--ink);color:#fff}
.fsort{margin-left:auto;flex:none;display:flex;align-items:center}
.fsort select{height:44px;border:1px solid var(--line);border-radius:999px;padding:0 34px 0 14px;font:700 14px var(--sans);color:var(--ink);appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7089' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center}
.count{color:var(--muted);font:600 14.5px var(--sans);margin:26px 0 20px}
.qchip{display:inline-flex;align-items:center;gap:8px;margin-left:10px;padding:4px 6px 4px 12px;border-radius:999px;background:var(--brand-50);color:var(--brand-600);font-weight:700}
.qchip a{display:grid;place-content:center;width:22px;height:22px;border-radius:50%;background:#fff}
.empty{text-align:center;padding:60px 20px;border-radius:var(--r-xl);background:var(--surface)}
.empty h2{font-size:28px}.empty p{color:var(--muted);margin:10px 0 22px}

/* ---------------- resource page ---------------- */
.crumbs-bar{padding:18px 0 14px;margin:0}
.rp-top{display:grid;gap:26px;padding-bottom:44px}
.gal-main{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:var(--surface-2);box-shadow:var(--sh-2);cursor:zoom-in}
.gal-main img{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.gal-main .zoom{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.94);font:700 13.5px var(--sans);color:var(--ink);box-shadow:var(--sh-1)}
.gal-main .zoom svg{width:16px;height:16px}
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.gal-thumbs button{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2);transition:border-color .2s,transform .2s}
.gal-thumbs button:hover{transform:translateY(-2px)}
.gal-thumbs button.on{border-color:var(--brand)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.rp-info{display:flex;flex-direction:column;gap:16px}
.rp-cat{display:inline-flex;align-items:center;gap:10px;font:700 14px var(--sans);color:var(--muted);align-self:flex-start}
.rp-cat img{width:40px;height:35px;object-fit:contain}
.rp-cat:hover{color:var(--ink)}
.rp-type{font:800 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.rp-info h1{font-size:clamp(34px,4.4vw,50px);line-height:1}
.rp-outcome{font-size:clamp(18px,2vw,21px);line-height:1.45;color:var(--text)}
.rp-buy{padding:22px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);display:grid;gap:14px;margin-top:4px}
.rp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rp-price b{font:750 40px var(--display);color:var(--ink);letter-spacing:-.03em;line-height:1}
.rp-price b.free{color:var(--free)}
.rp-price span{color:var(--muted);font:600 14.5px var(--sans)}
.rp-note{font:600 13.5px var(--sans);color:var(--muted);text-align:center}
.rp-signals{display:grid;gap:10px;font:600 14.5px var(--sans);color:var(--text)}
.rp-signals div{display:flex;gap:10px;align-items:flex-start}
.rp-signals svg{width:18px;height:18px;margin-top:2px;color:var(--free)}
.rp-signals a{color:var(--brand);font-weight:700}
@media (min-width:1000px){.rp-top{grid-template-columns:minmax(0,1.3fr) minmax(380px,1fr);gap:52px;align-items:start}.rp-info{position:sticky;top:92px}}
/* story */
.story{padding:60px 0;border-top:1px solid var(--line)}
.story-label{font:800 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.story h2{font-size:clamp(28px,4vw,42px);max-width:22em}
.story-sub{color:var(--muted);font-size:16.5px;margin-top:12px;max-width:40em}
.outcome{display:grid;gap:30px}
.outcome-quote{font:700 clamp(26px,3.6vw,40px)/1.15 var(--display);color:var(--ink);letter-spacing:-.025em;max-width:18em}
.outcome-for{margin-top:18px;color:var(--muted);font-size:16.5px}.outcome-for b{color:var(--ink)}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--text)}
.checks li::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;margin-top:-1px;background:var(--free-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17 19 7' fill='none' stroke='%2312814f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
@media (min-width:1000px){.outcome{grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}}
.examples{display:grid;gap:26px;margin-top:30px}
.ex{margin:0}
.ex button{display:block;width:100%;padding:0;border:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);cursor:zoom-in;background:var(--surface-2);transition:transform .35s var(--ease),box-shadow .35s}
.ex button:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.ex img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ex figcaption{margin-top:12px;color:var(--muted);font-size:14.5px}.ex figcaption b{color:var(--ink);display:block;font-size:16px}
@media (min-width:1000px){.examples{grid-template-columns:1fr 1fr}}
.contents{display:grid;gap:14px;margin-top:30px}
.ct{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.ct:hover{border-color:var(--line-2);box-shadow:var(--sh-1)}
.ct-ico{flex:none;width:46px;height:54px;border-radius:9px;display:grid;place-content:center;font:800 10.5px var(--sans);letter-spacing:.04em;color:#fff;background:var(--c,#5b4bff);position:relative;overflow:hidden;box-shadow:0 8px 16px -8px var(--c,#5b4bff)}
.ct-ico::after{content:"";position:absolute;right:0;top:0;width:13px;height:13px;background:linear-gradient(225deg,#fff 50%,rgba(255,255,255,.45) 50%)}
.ct b{display:block;color:var(--ink);font-size:16.5px}.ct span{display:block;color:var(--muted);font-size:14.5px;margin-top:2px;line-height:1.45}
@media (min-width:640px){.contents{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.contents{grid-template-columns:repeat(3,1fr)}}
.files{margin-top:18px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.files summary{padding:16px 20px;font:700 15px var(--sans);color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.files summary::-webkit-details-marker{display:none}
.files summary::after{content:"+";font-size:20px;line-height:1;color:var(--muted)}.files[open] summary::after{content:"\2212"}
.files ul{list-style:none;margin:0;padding:0}
.files li{display:flex;justify-content:space-between;gap:16px;padding:11px 20px;border-top:1px solid var(--line);font:500 13.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);overflow-wrap:anywhere}
.files li span:last-child{color:var(--faint);flex:none}
.steps{display:grid;gap:16px;margin-top:30px;counter-reset:s;list-style:none;padding:0}
.step{padding:24px;border-radius:var(--r-lg);background:var(--surface);counter-increment:s}
.step::before{content:counter(s);display:grid;place-content:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:#fff;font:800 18px var(--display);margin-bottom:16px}
.step p{font-size:16px;color:var(--text);line-height:1.5}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.pv{margin-top:30px;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1)}
.pv-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface);font:700 14px var(--sans);color:var(--ink)}
.pv-head .dots{display:flex;gap:6px;margin-right:6px}.pv-head .dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.pv pre{margin:0;padding:22px 24px;font:500 14.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);white-space:pre-wrap;word-break:break-word}
.pv.locked pre{max-height:10.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.pv-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);font:600 14.5px var(--sans);color:var(--muted)}
.pv-foot svg{color:var(--ink);width:18px;height:18px}
.compat{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.compat span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:700 14.5px var(--sans);color:var(--ink)}
.compat svg{width:16px;height:16px;color:var(--free)}
.lic{display:grid;gap:26px}
.lic-card{padding:26px;border-radius:var(--r-xl);background:var(--surface)}
.lic-card p{font-size:16.5px;color:var(--text)}
.lic-card .ok{display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:700;color:var(--free)}
.lic-card small{display:block;margin-top:12px;color:var(--muted);font-size:14px}
.lic-card a{color:var(--brand);font-weight:700}
@media (min-width:1000px){.lic{grid-template-columns:1fr 1fr;align-items:start}}
.closing{display:grid;gap:22px;align-items:center;padding:20px;border-radius:var(--r-xl);background:linear-gradient(120deg,var(--brand-50),#fff 65%);border:1px solid var(--line)}
.closing img{width:100%;max-width:300px;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.closing h3{font-size:clamp(24px,3vw,32px)}
.closing p{color:var(--muted);margin-top:8px}
.closing .row{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:18px}
.closing .row b{font:750 28px var(--display);color:var(--ink)}.closing .row b.free{color:var(--free)}
@media (min-width:1000px){.closing{grid-template-columns:300px 1fr;padding:24px 34px 24px 24px;gap:36px}}

/* ---------------- lightbox ---------------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(10,12,24,.94);display:none;align-items:center;justify-content:center;padding:64px 12px}
.lb.is-open{display:flex;animation:fade .2s ease}
.lb-stage{max-width:min(1400px,100%);max-height:100%;overflow:hidden;border-radius:16px;touch-action:pan-y}
.lb-stage img{max-height:calc(100vh - 150px);width:auto;margin:auto;transition:transform .35s var(--ease);cursor:zoom-in}
.lb-stage.zoomed img{transform:scale(2);cursor:zoom-out}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-content:center;transition:background .2s}
.lb-btn:hover{background:rgba(255,255,255,.26)}
.lb-close{top:14px;right:14px}.lb-prev{left:14px;top:50%;margin-top:-24px}.lb-next{right:14px;top:50%;margin-top:-24px}
.lb-count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.78);font:600 14px var(--sans)}

/* ---------------- info pages ---------------- */
.article{max-width:780px;padding:10px 0 70px}
.article h1{font-size:clamp(36px,5vw,52px);margin:6px 0 26px}
.article p{font-size:17px;margin:0 0 16px;color:var(--text)}

/* ---------------- footer ---------------- */
.ftr{margin-top:48px;border-top:1px solid var(--line);background:var(--surface)}
.ftr-top{display:grid;gap:30px;padding:44px 0 30px}
.ftr-brand p{color:var(--muted);margin-top:12px;max-width:26em;font-size:15px}
.ftr-icons{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ftr-icons a{width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-content:center;transition:transform .25s var(--ease),box-shadow .25s}
.ftr-icons a:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.ftr-icons img{width:34px;height:30px;object-fit:contain}
.ftr-links{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ftr-links nav{display:grid;gap:10px;align-content:start}
.ftr-links h2{font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.ftr-links a{font:600 15px var(--sans);color:var(--text)}.ftr-links a:hover{color:var(--brand)}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:18px 0 26px;border-top:1px solid var(--line);color:var(--faint);font:600 13.5px var(--sans)}
@media (min-width:1000px){.ftr-top{grid-template-columns:1.2fr 2fr}.ftr-links{grid-template-columns:repeat(3,1fr)}}

/* ---------------- motion ---------------- */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  @view-transition{navigation:none}
}

/* approved icons: keep their artwork, round the built-in tile so it reads as intentional */
.cat img{border-radius:26px}.page-head-row img{border-radius:24px}.lead-kicker img,.rp-cat img{border-radius:9px}.fcat img,.sr-cats img{border-radius:8px}.mega-panel img,.sr-item.sr-cat img{border-radius:12px}.sheet-cats img{border-radius:14px}.ftr-icons img{border-radius:8px}

/* v3 fixes from review capture */
.search-field input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.hdr{isolation:isolate}
.mega-panel{animation:none;opacity:1;background:#fff;z-index:80;backdrop-filter:none}
.mega[open] .mega-panel{animation:none}

/* ---------------- before / after (creation systems) ---------------- */
.ba{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);background:var(--surface-2);aspect-ratio:4/5;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.ba .ba-knob{position:absolute;top:50%;left:var(--pos,50%);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:var(--sh-2);display:grid;place-content:center;font:800 16px var(--sans);color:var(--ink);pointer-events:none}
.ba .ba-tag{position:absolute;top:14px;padding:7px 12px;border-radius:999px;font:800 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(15,18,34,.78);color:#fff}
.ba .ba-tag.l{left:14px}.ba .ba-tag.r{right:14px;background:var(--brand)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-grid{display:grid;gap:26px;margin-top:30px}
.ba-cap{margin-top:12px;color:var(--muted);font-size:14.5px}.ba-cap b{color:var(--ink);display:block;font-size:16px}
@media (min-width:1000px){.ba-grid{grid-template-columns:repeat(3,1fr)}}
.no-js .ba .ba-before{clip-path:none;width:50%}

/* ---------------- homepage v4: creation-studio story ---------------- */
.v4 .hero h1{font-size:clamp(38px,6vw,64px);max-width:13em}
.hero-ba{margin:0;max-width:520px;justify-self:center;width:100%}
.hero-ba .ba{box-shadow:var(--sh-3)}
.hero-ba figcaption{margin-top:14px;text-align:center;font:700 14px var(--sans);color:var(--muted)}
.how3{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.how3 li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:14px 14px 22px}
.how-img{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.how-img>img{width:100%;height:100%;object-fit:cover}
.how-code{background:#15172a;display:flex;align-items:center}
.how-code pre{margin:0;padding:18px 20px;font:600 13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d9dcff;white-space:pre-wrap}
.how-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:none}
.how-trio img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.how-n{position:absolute;top:26px;left:26px;width:38px;height:38px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-content:center;font:800 17px var(--display);box-shadow:0 10px 20px -10px var(--brand)}
.how3 h3{font-size:22px;margin:18px 8px 6px}.how3 p{margin:0 8px;color:var(--muted);font-size:15.5px}
@media (min-width:1000px){.how3{grid-template-columns:repeat(3,1fr)}}
.studio-head{display:flex;align-items:center;gap:22px;margin-bottom:30px}
.studio-head img{width:96px;height:84px;object-fit:contain;border-radius:24px;filter:drop-shadow(0 14px 16px rgba(24,20,70,.16))}
.studio-head h2{font-size:clamp(30px,4.4vw,44px)}.studio-head p{color:var(--muted);margin-top:8px;font-size:16.5px}
.ladder{display:grid;gap:22px}
.tier{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1)}
.tier-live{border-color:var(--brand-100);box-shadow:var(--sh-2)}
.tier-media{display:block;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.tier-media>img{width:100%;height:100%;object-fit:cover}
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.tier-grid img{width:100%;height:100%;object-fit:cover}
.tier-plan{display:grid;place-content:center;background:linear-gradient(160deg,#ffe6f1,#fff)}
.tier-plan img{width:120px;border-radius:26px}
.tier-ph{grid-column:1/-1;display:grid;place-content:center;color:var(--muted);font-weight:700}
.tier-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.tier-body h3{font-size:24px}.tier-body p{color:var(--muted);font-size:15.5px;flex:1}
.tier-body .btn{align-self:flex-start}
.tier-status{align-self:flex-start;font:800 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:8px}
.tier-status.ok{background:var(--free-50);color:var(--free)}.tier-status.dev{background:var(--brand-50);color:var(--brand-600)}.tier-status.plan{background:var(--surface-2);color:var(--muted)}
@media (min-width:1000px){.ladder{grid-template-columns:1.15fr 1fr 1fr}}
.results-ed{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.results-ed figure{margin:0;border-radius:var(--r-xl);overflow:hidden;position:relative;background:var(--surface-2)}
.results-ed img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.results-ed figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.92);font-size:13.5px;color:var(--muted)}
.results-ed figcaption b{display:block;color:var(--ink);font-size:15px}
@media (min-width:1000px){.results-ed{grid-template-columns:repeat(4,1fr)}.results-ed .res-1{grid-row:span 2}.results-ed .res-1 img{aspect-ratio:auto;height:100%}}
.sec-trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust4{display:grid;gap:14px;padding:30px 0}
.trust4>div{display:flex;gap:12px;align-items:flex-start}.trust4 svg{color:var(--free);margin-top:2px}
.trust4 b{display:block;color:var(--ink);font-size:15.5px}.trust4 span{color:var(--muted);font-size:14.5px}
@media (min-width:1000px){.trust4{grid-template-columns:repeat(4,1fr);gap:26px}}

.tier-grid3{grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr}.tier-grid3 img:first-child{grid-row:span 2}

/* =====================================================================
   V5 — header / hero / footer redesign
   ===================================================================== */
/* ---------- compact platform bar ---------- */
.bar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.bar-row{height:56px;display:flex;align-items:center;gap:6px}
.bar-brand{display:inline-flex;align-items:center;gap:9px;margin-right:18px}
.bar-mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(145deg,#7a6cff,var(--brand) 55%,#3f2fe0);color:#fff;display:grid;place-content:center;font:800 15px var(--display);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.bar-word{font:750 17px var(--display);letter-spacing:-.02em;color:var(--ink)}.bar-word b{color:var(--brand);font-weight:750}
.bar-nav{display:none;align-items:center;height:100%}
.bar-nav>a,.bar-menu>summary{position:relative;display:inline-flex;align-items:center;gap:5px;height:56px;padding:0 13px;font:600 14.5px var(--sans);color:var(--text);cursor:pointer;list-style:none;transition:color .15s}
.bar-menu>summary::-webkit-details-marker{display:none}
.bar-nav>a::after,.bar-menu>summary::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transition:transform .2s var(--ease)}
.bar-nav>a:hover,.bar-menu>summary:hover,.bar-nav>a.on,.bar-menu[open]>summary{color:var(--ink)}
.bar-nav>a.on::after,.bar-nav>a:hover::after,.bar-menu[open]>summary::after{transform:scaleX(1)}
.bar-menu summary svg{width:13px;height:13px;transition:transform .2s}.bar-menu[open] summary svg{transform:rotate(180deg)}
.bar-menu{position:relative;height:100%}
.studios-panel{position:absolute;top:calc(100% + 1px);left:-8px;width:620px;display:grid;grid-template-columns:1.35fr 1fr;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;box-shadow:0 24px 50px -24px rgba(24,20,70,.35);overflow:hidden}
.sp-studio{padding:20px}.sp-cats{padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:4px}
.sp-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sp-head img{width:52px;height:46px;object-fit:contain;border-radius:12px}
.sp-kicker{display:block;font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sp-head b{display:block;font:750 17px var(--display);color:var(--ink);margin-top:2px}
.sp-tiers{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sp-tiers a,.sp-muted{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font:600 14px var(--sans);color:var(--ink)}
.sp-tiers a:hover{background:var(--surface)}
.sp-muted{color:var(--muted)}
.sp-tiers em,.ms-tier em,.sf-tiers em{font-style:normal;font:700 11.5px var(--sans);color:var(--muted);white-space:nowrap}
em.st-ok{color:var(--free)}
.sp-cats a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font:600 14px var(--sans);color:var(--ink)}
.sp-cats a:hover{background:#fff}.sp-cats img{width:36px;height:32px;object-fit:contain;border-radius:8px}.sp-cats small{margin-left:auto;color:var(--faint)}
.bar-search{display:none;margin-left:auto;align-items:center;gap:8px;height:34px;padding:0 6px 0 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);font:500 13.5px var(--sans);color:var(--muted);min-width:190px;transition:border-color .15s,background .15s}
.bar-search:hover{border-color:var(--ink);background:#fff;color:var(--ink)}
.bar-search svg{width:16px;height:16px}.bar-search span{flex:1;text-align:left}
.bar-search kbd{font:600 11px var(--sans);color:var(--faint);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;background:#fff}
.bar-icon{width:40px;height:40px;display:grid;place-content:center;border:0;background:transparent;border-radius:10px;color:var(--ink)}
.bar-icon:hover{background:var(--surface-2)}
.bar-m:first-of-type{margin-left:auto}
@media (min-width:1000px){.bar-nav{display:flex}.bar-search{display:inline-flex}.bar-m{display:none}}
/* ---------- mobile bottom sheet ---------- */
.msheet .sheet-panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88vh;border-radius:22px 22px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%)}
.msheet.is-open .sheet-panel{transform:none}
.ms-grip{width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:4px auto 6px}
.ms-top{display:flex;justify-content:space-between;align-items:center;height:48px}
.ms-main{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px}
.ms-main a{padding:14px;border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:2px}
.ms-main span{font:750 18px var(--display);color:var(--ink)}.ms-main small{color:var(--muted);font-size:12.5px}
.ms-studio{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px}
.ms-tier{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-top:1px solid var(--line);font:600 14.5px var(--sans);color:var(--ink)}
.ms-cats{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.ms-cats a{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:12px;background:var(--surface);font:600 14px var(--sans)}
.ms-cats img{width:40px;height:35px;object-fit:contain;border-radius:9px}
.ms-legal{display:flex;flex-wrap:wrap;gap:16px;padding:14px 4px 4px;border-top:1px solid var(--line);margin-top:10px;font:600 13px var(--sans);color:var(--muted)}
/* ---------- buttons ---------- */
.btn-s{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:10px;font:700 14px var(--sans);transition:background .15s,transform .15s}
.btn-s-dark{background:var(--ink);color:#fff}.btn-s-dark:hover{background:#000;transform:translateY(-1px)}
.show-link{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--sans);color:var(--ink);border-bottom:1.5px solid var(--line-2);padding-bottom:1px}.show-link:hover{border-color:var(--ink)}
/* ---------- hero: transformation showcase ---------- */
.show{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fafafd)}
.show-grid{display:grid;gap:26px;padding:26px 0 30px}
.show-kicker{font:800 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.show-copy h1{font-size:clamp(28px,3.3vw,42px);line-height:1.05;letter-spacing:-.03em;margin:12px 0 0}
.show-copy h1 span{display:block;color:var(--muted)}
.show-copy p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--text);max-width:30em}
.show-actions{display:flex;align-items:center;gap:18px;margin-top:20px}
.show-meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:22px;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.show-meta dt{font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}.show-meta dd{margin:3px 0 0;font:700 14px var(--sans);color:var(--ink)}
.viewer{display:grid;gap:12px}
.viewer-stage{margin:0}
.viewer-stage .ba{aspect-ratio:4/5;max-height:520px;border-radius:18px;box-shadow:0 24px 50px -28px rgba(24,20,70,.45)}
.viewer-stage .ba-after{transition:opacity .25s ease}
.viewer-stage figcaption{margin-top:8px;font:600 12.5px var(--sans);color:var(--muted)}
.viewer-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.viewer-rail li>button,.rail-src{display:flex;flex-direction:column;gap:6px;width:100%;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.rail-src{cursor:default;background:var(--surface)}
.viewer-rail button:hover{border-color:var(--line-2)}
.viewer-rail button.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rail-img{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-2)}.rail-img img{width:100%;height:100%;object-fit:cover}
.rail-txt b{display:block;font:700 12.5px var(--sans);color:var(--ink)}.rail-txt small{font-size:11px;color:var(--muted)}
@media (min-width:1000px){
  .show-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:44px;align-items:center;padding:34px 0 36px}
  .viewer{grid-template-columns:minmax(0,1fr) 170px;align-items:start;gap:14px}
  .viewer-stage .ba{aspect-ratio:auto;height:500px}
  .viewer-rail{grid-template-columns:1fr;gap:8px}
  .viewer-rail li>button,.rail-src{flex-direction:row;align-items:center}
  .rail-img{width:56px;flex:none}
}
/* ---------- creation studios ---------- */
.studios{padding:36px 0 44px}
.row-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:18px}
.row-head h2{font-size:clamp(22px,2.4vw,28px)}.row-head p{color:var(--muted);font-size:14.5px}
.studio-feature{display:grid;gap:14px}
.sf-card{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fff}
.sf-head{display:flex;align-items:center;gap:14px}.sf-head img{width:64px;height:56px;object-fit:contain;border-radius:14px}.sf-head h3{font-size:22px;margin-top:2px}
.sf-card>p{color:var(--muted);font-size:14.5px;margin:12px 0 10px}
.sf-tiers{list-style:none;margin:0;padding:0}
.sf-tiers li>a,.sf-tiers li>span{display:flex}
.sf-tiers li{border-top:1px solid var(--line)}
.sf-tiers li a,.sf-tiers li{display:flex;align-items:center;gap:12px;padding:12px 2px}
.sf-tiers li a{padding:0;width:100%}
.sf-tiers li a:hover .t-name{color:var(--brand)}
.t-n{width:26px;height:26px;border-radius:8px;background:var(--surface-2);display:grid;place-content:center;font:800 12.5px var(--sans);color:var(--ink);flex:none}
.t-name{flex:1;font:700 14.5px var(--sans);color:var(--ink)}.t-name small{display:block;font:500 12.5px var(--sans);color:var(--muted)}
.sf-proof{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;position:relative}
.sf-proof figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.sf-proof .sfp-0{grid-row:span 2}
.sf-proof img{width:100%;height:100%;object-fit:cover;min-height:150px}
.sf-proof figcaption{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.92);font:700 11.5px var(--sans);color:var(--ink)}
.sf-note{grid-column:1/-1;font-size:13px;color:var(--muted)}.sf-note b{color:var(--ink)}
@media (min-width:1000px){.studio-feature{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px}.sf-proof{grid-template-rows:230px 230px auto}}
/* ---------- kept faithful ---------- */
.faithful{padding:40px 0 48px;background:var(--surface);border-top:1px solid var(--line)}
.faithful-grid{display:grid;gap:24px;align-items:center}
.annot{margin:0;position:relative;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 20px 44px -30px rgba(24,20,70,.45);max-width:460px}
.annot img{width:100%;display:block}
.pin{position:absolute;display:inline-flex;align-items:center;gap:8px;transform:translate(-6px,-50%);font:700 11.5px var(--sans);color:var(--ink);background:rgba(255,255,255,.95);padding:4px 9px 4px 4px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.12);white-space:nowrap}
.pin i{width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(91,75,255,.22)}
.pin-l{transform:translate(calc(-100% + 6px),-50%);flex-direction:row-reverse;padding:4px 4px 4px 9px}
.faithful-copy h2{font-size:clamp(24px,2.8vw,34px)}.faithful-copy>p{color:var(--muted);margin:10px 0 16px;font-size:15px;max-width:34em}
.code-card{margin:0 0 14px;padding:16px 18px;border-radius:14px;background:#15172a;color:#c9cdf5;font:500 12.5px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.code-card b{color:#fff;font-weight:700}
.checks-inline{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.checks-inline li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:#fff;border:1px solid var(--line);font:700 12.5px var(--sans);color:var(--ink)}
.checks-inline li::before{content:"\2713";color:var(--free)}
@media (min-width:1000px){.faithful-grid{grid-template-columns:420px 1fr;gap:56px}}
/* ---------- quiet footer ---------- */
.foot{border-top:1px solid var(--line);background:#fff}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:22px 0 calc(22px + env(safe-area-inset-bottom))}
.foot-brand{margin-right:0}.foot-brand .bar-word{font-size:15px}.foot-brand .bar-mark{width:22px;height:22px;font-size:13px;border-radius:7px}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font:600 13.5px var(--sans);color:var(--muted)}
.foot-links a:hover{color:var(--ink)}
.foot-sep{width:1px;height:14px;background:var(--line-2)}
.foot-copy{margin-left:auto;font:600 13px var(--sans);color:var(--faint)}
@media (max-width:640px){.foot-sep{display:none}.foot-copy{margin-left:0;width:100%}}

.bar-search+.bar-m{margin-left:auto}@media (min-width:1000px){.bar-search+.bar-m{margin-left:0}}
/* v5 review fixes */
@media (min-width:1000px){
  .viewer{grid-template-columns:auto 176px;justify-content:end}
  .viewer-stage .ba{height:520px;width:auto;aspect-ratio:4/5;max-height:none}
  .show-grid{grid-template-columns:minmax(0,1fr) auto}
}
.sf-tiers li>span{display:block}
.t-name{display:block}
.sf-card{align-self:start}

/* restore side padding (vertical-only spacing) */
.show-grid{padding-left:20px;padding-right:20px}.foot-row{padding-left:20px;padding-right:20px}
@media (min-width:640px){.show-grid,.foot-row{padding-left:32px;padding-right:32px}}

/* ---------------- What's included: system, not file types ---------------- */
.inc{padding:44px 0}
.inc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.inc-head h2{font-size:clamp(22px,2.6vw,30px);margin-top:6px}
.inc-meta{font:600 13px var(--sans);color:var(--faint);white-space:nowrap}
.inc-grid{display:grid;gap:12px}
.inc-feat{background:#15172a;color:#c9cdf5;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.inc-feat h3{color:#fff;font-size:20px}.inc-feat>p{color:#aeb3dc;font-size:14.5px;margin:0}
.inc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.inc-core{font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#a99dff}
.inc-sys{margin-top:8px;border-top:1px solid rgba(255,255,255,.1);display:grid}
.inc-sys div{display:grid;grid-template-columns:128px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);font:500 12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.inc-sys b{color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.inc-sys span{color:#b9bde6}
.inc-side{display:grid;gap:12px}
.inc-card{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;transition:border-color .15s,box-shadow .15s}
.inc-card:hover{border-color:var(--line-2);box-shadow:0 10px 24px -18px rgba(24,20,70,.35)}
.inc-body{min-width:0;flex:1}.inc-card h3{font-size:15.5px}.inc-card p{margin:3px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.inc-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:grid;place-content:center;color:var(--ink)}
.inc-ic-d{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.inc-svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.inc-checks{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.inc-checks li{font:600 11.5px var(--sans);color:var(--ink);background:var(--surface);border-radius:6px;padding:3px 8px}
.inc-checks li::before{content:"\2713  ";color:var(--brand)}
.inc-strip{display:flex;gap:6px;margin-top:10px}.inc-strip img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.inc-ba{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--faint)}.inc-ba figure{margin:0;position:relative}
.inc-ba img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.inc-ba figcaption{position:absolute;left:4px;bottom:4px;font:700 9.5px var(--sans);text-transform:uppercase;letter-spacing:.05em;color:#fff;background:rgba(15,18,34,.72);padding:1px 5px;border-radius:4px}
.inc-snip{display:block;margin-top:10px;padding:7px 10px;border-radius:8px;background:var(--surface);font:500 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inc-files{margin-top:12px}.inc-files summary{cursor:pointer;font:600 13px var(--sans);color:var(--muted);list-style:none;display:inline-flex;gap:6px}
.inc-files summary::-webkit-details-marker{display:none}.inc-files summary::after{content:"+";color:var(--faint)}.inc-files[open] summary::after{content:"–"}
.inc-files ul{list-style:none;margin:8px 0 0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;columns:2 260px;column-gap:28px}
.inc-files li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;break-inside:avoid}.inc-files li span:last-child{color:var(--faint)}
@media (min-width:640px){.inc-side{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.inc-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.6fr);align-items:stretch}.inc-feat{padding:24px}}
@media (max-width:639px){.inc{padding:32px 0}.inc-head{flex-direction:column;align-items:flex-start;gap:4px}.inc-sys div{grid-template-columns:104px 1fr}}

/* ---------------- What's included v2 (ix): creation system, not files ---------------- */
.ix{padding:40px 0}
.ix-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.ix-head h2{font-size:22px;letter-spacing:-.01em}.ix-head p{margin:4px 0 0;color:var(--muted);font-size:15px}
.ix-meta{font:600 12.5px var(--sans);color:var(--faint);white-space:nowrap}
.ix-grid{display:grid;gap:12px}
.ix-feat{background:#15172a;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.ix-feat h3{color:#fff;font-size:20px}.ix-feat>p{color:#aeb3dc;font-size:14px;margin:0;line-height:1.5}
.ix-feat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.ix-core{font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#a99dff}
.ix-sys{margin-top:6px;border-top:1px solid rgba(255,255,255,.1)}
.ix-sys div{display:grid;grid-template-columns:minmax(118px,auto) 1fr;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);font:500 12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.ix-sys b{color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}.ix-sys span{color:#b9bde6}
.ix-side{display:grid;gap:12px}
.ix-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ix-row{display:flex;gap:12px;align-items:flex-start}.ix-row h3{font-size:15px}.ix-row p{margin:2px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.ix-ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:grid;place-content:center;color:var(--ink)}
.ix-ic-d{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.ix-svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ix-scenes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ix-scenes figure{margin:0}.ix-scenes img,.ix-ph{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line);background:var(--surface)}
.ix-ph{display:grid;place-content:center;color:var(--faint)}.ix-ph .ix-svg{width:22px;height:22px}
.ix-scenes figcaption{font:650 11.5px var(--sans);color:var(--ink);margin-top:5px;text-align:center}
.ix-note{color:var(--faint);font-size:11.5px}
.ix-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ix-checks li{display:flex;align-items:center;gap:5px;font:650 12px var(--sans);color:var(--ink);background:var(--surface);border-radius:7px;padding:5px 8px}
.ix-checks .ix-svg{width:13px;height:13px;color:var(--brand);stroke-width:2.4}
.ix-ba{display:flex;align-items:center;gap:8px}.ix-ba figure{margin:0;position:relative;flex:1;max-width:120px}
.ix-ba img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.ix-ba figcaption{position:absolute;left:5px;bottom:5px;font:700 9.5px var(--sans);text-transform:uppercase;letter-spacing:.05em;color:#fff;background:rgba(15,18,34,.75);padding:1px 6px;border-radius:4px}
.ix-arrow{color:var(--faint);font-weight:700}
.ix-flows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ix-flows li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:var(--surface);font:600 13px var(--sans);color:var(--ink)}
.ix-flows b{font:700 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--brand)}.ix-flows em{margin-left:auto;font-style:normal;font-weight:500;font-size:12px;color:var(--muted)}
.ix-files{margin-top:12px}.ix-files summary{cursor:pointer;font:600 13px var(--sans);color:var(--muted);list-style:none;display:inline-flex;gap:6px}
.ix-files summary::-webkit-details-marker{display:none}.ix-files summary::after{content:"+";color:var(--faint)}.ix-files[open] summary::after{content:"\2013"}
.ix-files ul{list-style:none;margin:8px 0 0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;columns:2 260px;column-gap:28px}
.ix-files li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;break-inside:avoid}.ix-files li span:last-child{color:var(--faint)}
@media (min-width:700px){.ix-side{grid-template-columns:1fr 1fr}.ix-wide{grid-column:1/-1}}
@media (min-width:1000px){.ix-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr);align-items:stretch}.ix-feat{padding:24px}.ix-flows{grid-template-columns:repeat(3,1fr)}.ix-flows em{margin-left:0;display:block}.ix-flows li{flex-wrap:wrap;gap:2px 8px}}
@media (max-width:699px){.ix{padding:30px 0}.ix-head{flex-direction:column;align-items:flex-start;gap:4px}.ix-scenes{gap:6px}.ix-scenes figcaption{font-size:10.5px}.ix-checks{grid-template-columns:repeat(2,minmax(0,1fr))}.ix-sys div{grid-template-columns:1fr;gap:1px}}

/* =====================================================================
   V6 — homepage, header and footer
   ===================================================================== */
/* ---------- header: compact platform bar ---------- */
.nv{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.nv-row{height:52px;display:flex;align-items:center;gap:4px}
.nv-brand{display:inline-flex;align-items:center;gap:8px;font:750 16px var(--display);letter-spacing:-.02em;color:var(--ink);margin-right:22px}
.nv-mark{width:24px;height:24px;border-radius:7px;background:var(--ink);color:#fff;display:grid;place-content:center;font:800 13px var(--display)}
.nv-links{display:none;align-items:center;height:52px;gap:2px}
.nv-links>a,.nv-menu>summary{height:34px;display:inline-flex;align-items:center;gap:4px;padding:0 12px;border-radius:8px;font:600 14px var(--sans);color:var(--muted);cursor:pointer;list-style:none;transition:color .15s,background .15s}
.nv-menu>summary::-webkit-details-marker{display:none}
.nv-links>a:hover,.nv-menu>summary:hover,.nv-links>a.on,.nv-menu[open]>summary{color:var(--ink);background:var(--surface)}
.nv-menu summary svg{width:14px;height:14px;transition:transform .2s}.nv-menu[open] summary svg{transform:rotate(180deg)}
.nv-menu{position:relative}
.nv-panel{position:absolute;top:calc(100% + 9px);left:-12px;width:640px;display:grid;grid-template-columns:1.4fr 1fr;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -30px rgba(24,20,70,.38);overflow:hidden;animation:nvIn .16s ease}
@keyframes nvIn{from{opacity:0;transform:translateY(-4px)}}
.nvp-studios{padding:14px}.nvp-feature{padding:14px;background:var(--surface);border-left:1px solid var(--line)}
.nvp-k{display:block;font:800 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:2px 6px 8px}
.nvp-studio{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:10px;transition:background .15s}
a.nvp-studio:hover{background:var(--surface)}
.nvp-studio img{width:44px;height:39px;object-fit:contain;border-radius:10px}
.nvp-studio b{display:block;font:700 14px var(--sans);color:var(--ink)}.nvp-studio small{font-size:12px;color:var(--muted)}
.nvp-studio em{font:700 11px var(--sans);font-style:normal;color:var(--brand)}.nvp-later em{color:var(--faint)}.nvp-later b{color:var(--text)}
.nvp-card{display:block;padding:8px;border-radius:12px;background:#fff;border:1px solid var(--line);transition:box-shadow .15s}.nvp-card:hover{box-shadow:0 10px 24px -16px rgba(24,20,70,.4)}
.nvp-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px}.nvp-pair img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
.nvp-card b{display:block;font:700 13.5px var(--sans);color:var(--ink)}.nvp-card small{font-size:12px;color:var(--muted)}
.nv-search{display:none;margin-left:auto;align-items:center;gap:8px;height:34px;min-width:200px;padding:0 6px 0 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);font:500 13.5px var(--sans);transition:border-color .15s,background .15s,color .15s}
.nv-search:hover{border-color:var(--line-2);background:#fff;color:var(--ink)}.nv-search svg{width:15px;height:15px}.nv-search span{flex:1;text-align:left}
.nv-search kbd{font:600 11px var(--sans);color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:0 6px;background:#fff}
.nv-ib{width:40px;height:40px;display:grid;place-content:center;border:0;background:none;border-radius:10px;color:var(--ink)}.nv-ib:hover{background:var(--surface)}
.nv-m:first-of-type{margin-left:auto}.nv-search+.nv-m{margin-left:auto}
@media (min-width:980px){.nv-links{display:flex}.nv-search{display:inline-flex}.nv-m{display:none}}
/* ---------- mobile sheet ---------- */
.nvs .sheet-panel{top:0;left:0;right:0;width:100%;height:100%;max-height:none;border-radius:0;padding:0 18px calc(20px + env(safe-area-inset-bottom));transform:translateY(-12px);opacity:0;transition:transform .22s var(--ease),opacity .22s}
.nvs.is-open .sheet-panel{transform:none;opacity:1}
.nvs-top{display:flex;justify-content:space-between;align-items:center;height:52px}
.nvs-search{width:100%;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 15px var(--sans);color:var(--muted);margin:6px 0 14px}
.nvs-main{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.nvs-main a{padding:13px 14px;border-radius:12px;border:1px solid var(--line);font:700 16px var(--display);color:var(--ink)}
.nvs-studios{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.nvs-st{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;background:var(--surface);text-align:center}
.nvs-st img{width:48px;height:42px;object-fit:contain;border-radius:10px}.nvs-st b{font:700 13.5px var(--sans);color:var(--ink)}.nvs-st small{font:600 11px var(--sans);color:var(--brand)}.nvs-st.nvp-later small{color:var(--faint)}
.nvs-feature{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line);border-radius:14px}.nvs-feature img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.nvs-feature b{display:block;font:700 14px var(--sans);color:var(--ink)}.nvs-feature small{font-size:12.5px;color:var(--muted)}
.nvs-legal{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font:600 13px var(--sans);color:var(--muted)}
/* ---------- buttons ---------- */
.hx-btn{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:10px;background:var(--ink);color:#fff;font:700 14px var(--sans);transition:transform .15s,background .15s}.hx-btn:hover{background:#000;transform:translateY(-1px)}
.hx-btn-l{background:#fff;color:var(--ink)}.hx-btn-l:hover{background:#eef}
.hx-link{font:700 14px var(--sans);color:var(--ink);padding:10px 4px}.hx-link:hover{color:var(--brand)}
/* ---------- 1 · hero ---------- */
.hx{background:radial-gradient(900px 480px at 85% 0%,#f1eeff 0%,transparent 60%),#fbfbfd;border-bottom:1px solid var(--line)}
.hx-grid{display:grid;gap:22px;padding:22px 0 26px}
.hx-k{font:800 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.hx-copy h1{font-size:clamp(28px,3.1vw,40px);line-height:1.06;letter-spacing:-.03em;margin:10px 0 0}.hx-copy h1 span{color:var(--muted)}
.hx-copy p{margin:12px 0 0;font-size:15.5px;line-height:1.55;color:var(--text);max-width:31em}
.hx-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.hx-studio{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.hx-studio:hover{border-color:var(--line-2);box-shadow:0 12px 24px -18px rgba(24,20,70,.4)}.hx-studio img{width:40px;height:35px;object-fit:contain;border-radius:9px}
.hx-studio b{display:block;font:700 13.5px var(--sans);color:var(--ink)}.hx-studio small{font-size:12px;color:var(--muted)}
.hx-stage{display:grid;gap:10px}
.hx-ba{aspect-ratio:4/5;border-radius:18px;box-shadow:0 26px 50px -30px rgba(24,20,70,.55)}
.hx-ba .ba-after{transition:opacity .25s ease}
.hx-seq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hx-seq li>button,.hx-src{width:100%;display:flex;flex-direction:column;gap:5px;padding:5px;border-radius:12px;border:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.hx-src{cursor:default;background:var(--surface)}
.hx-seq img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.hx-seq b{display:block;font:700 11.5px var(--sans);color:var(--ink)}.hx-seq small{display:none;font-size:11px;color:var(--muted)}
.hx-seq button.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.hx-seq button:hover{border-color:var(--line-2)}
@media (min-width:980px){
  .hx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:center;padding:34px 0 36px}
  .hx-stage{grid-template-columns:minmax(0,1fr) 150px;align-items:start;gap:12px}
  .hx-ba{aspect-ratio:auto;height:480px}
  .hx-seq{grid-template-columns:1fr;gap:8px}
  .hx-seq li>button,.hx-src{flex-direction:row;align-items:center;gap:9px;padding:6px}
  .hx-seq img{width:48px;flex:none}.hx-seq small{display:block}
}
/* ---------- section headings ---------- */
.sx-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-bottom:16px}
.sx-head h2{font-size:clamp(21px,2.2vw,26px);letter-spacing:-.02em}.sx-head p{color:var(--muted);font-size:14.5px;max-width:52em}
/* ---------- 2 · creation studios ---------- */
.sx{padding:34px 0 38px}
.sx-grid{display:grid;gap:12px}
.sx-main{display:grid;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.sx-info{padding:20px}
.sx-id{display:flex;align-items:center;gap:14px}.sx-id img{width:64px;height:56px;object-fit:contain;border-radius:14px}
.sx-live{font:800 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--free)}.sx-id h3{font-size:22px;margin-top:2px}
.sx-info>p{color:var(--muted);font-size:14.5px;margin:12px 0 14px}
.sx-ladder{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sx-ladder li,.sx-ladder li a{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sx-ladder li{padding:11px 2px;border-bottom:1px solid var(--line)}.sx-ladder li a{width:100%}
.sx-ladder b{font:700 14px var(--sans);color:var(--ink)}.sx-ladder li:not(.on) b{color:var(--muted)}
.sx-ladder em{font:700 11.5px var(--sans);font-style:normal;color:var(--faint);white-space:nowrap}.sx-ladder li.on em{color:var(--free)}
.sx-ladder li.on a:hover b{color:var(--brand)}
.sx-mosaic{position:relative;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:4px;min-height:260px;background:var(--surface)}
.sx-mosaic img{width:100%;height:100%;object-fit:cover;min-height:0}.sx-mosaic .sm-0{grid-row:span 2}
.sx-cap{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.93);font:700 11.5px var(--sans);color:var(--ink)}
.sx-later{border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.sx-k{font:800 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.sx-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.sx-row img{width:52px;height:46px;object-fit:contain;border-radius:12px}.sx-row b{display:block;font:700 14px var(--sans);color:var(--ink)}.sx-row small{font-size:12.5px;color:var(--muted)}
.sx-note{margin-top:auto;font-size:12.5px;color:var(--muted);padding-top:6px}
@media (min-width:980px){.sx-grid{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}.sx-main{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.sx-mosaic{min-height:340px}}
/* ---------- 3 · what can you create ---------- */
.cx{padding:34px 0 38px;background:#fbfbfd;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-tile{margin:0;position:relative;border-radius:16px;overflow:hidden;background:var(--surface);aspect-ratio:4/5}
.cx-tile>img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.cx-tile:hover>img{transform:scale(1.03)}
.cx-tile figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.94);font-size:12.5px;color:var(--muted)}
.cx-tile figcaption b{display:block;font:700 14px var(--sans);color:var(--ink)}
.cx-from{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(15,18,34,.8);color:#fff;font:700 11px var(--sans);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.cx-from img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.cx-tile:hover .cx-from,.cx-tile:focus-within .cx-from{opacity:1;transform:none}
.cx-big{grid-column:1/-1}.cx-wide{grid-column:1/-1;aspect-ratio:16/10}
@media (hover:none){.cx-from{opacity:1;transform:none}}
@media (min-width:980px){.cx-grid{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:280px 280px}.cx-tile{aspect-ratio:auto}.cx-big{grid-column:auto;grid-row:span 2}.cx-wide{grid-column:span 2;aspect-ratio:auto}}
/* ---------- 4 · featured system ---------- */
.fx{background:#14162a;color:#c9cdf5}
.fx-grid{display:grid;gap:22px;padding:36px 0}
.fx-k{font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#a99dff}
.fx-copy h2{color:#fff;font-size:clamp(24px,2.6vw,32px);margin:8px 0 10px}.fx-copy p{color:#b4b8e0;font-size:15px;line-height:1.55;margin:0 0 14px}
.fx-list{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.fx-list li{font:600 13.5px var(--sans);color:#e7e8fb;display:flex;gap:8px}.fx-list li::before{content:"\2713";color:#a99dff}
.fx-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:stretch}
.fx-how li{display:flex;flex-direction:column;gap:8px;position:relative}
.fx-how li:not(:last-child)::after{content:"\2192";position:absolute;right:-9px;top:50%;transform:translate(50%,-50%);z-index:2;width:22px;height:22px;border-radius:50%;background:#2b2e4c;color:#fff;display:grid;place-content:center;font-size:12px}
.fx-step{font:800 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8e93c7}
.fx-how img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px}
.fx-sys pre{margin:0;flex:1;aspect-ratio:4/5;padding:12px;border-radius:12px;background:#1e2140;border:1px solid rgba(255,255,255,.08);font:500 10.5px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;color:#b9bde6;white-space:pre-wrap;overflow:hidden}
.fx-sys pre b{color:#fff}
.fx-how small{font-size:12px;color:#9aa0d0}
@media (min-width:980px){.fx-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:56px;align-items:center;padding:44px 0}.fx-sys pre{font-size:12px}}
/* ---------- 5 · creation types ---------- */
.tx{padding:34px 0 30px}
.tx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tx-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:16px;border:1px solid var(--line);background:#fff;transition:transform .2s var(--ease),box-shadow .2s}
.tx-tile img{width:64px;height:56px;object-fit:contain;border-radius:14px;margin-bottom:6px;transition:transform .25s var(--ease)}
.tx-tile b{font:700 14px var(--sans);color:var(--ink)}.tx-tile small{font:600 11.5px var(--sans);color:var(--faint)}
.tx-live{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.tx-live small{color:var(--free)}
.tx-live:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ink),0 16px 30px -20px rgba(24,20,70,.5)}.tx-tile:hover img{transform:scale(1.06) rotate(-2deg)}
@media (min-width:700px){.tx-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.tx-grid{grid-template-columns:repeat(8,1fr)}.tx-tile{align-items:center;text-align:center;padding:16px 10px}.tx-tile img{width:72px;height:63px}}
/* ---------- 6 · family ---------- */
.lx{padding:10px 0 40px}
.lx-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
.lx-steps li{position:relative;display:grid;gap:3px;padding:16px;border-radius:16px;border:1px dashed var(--line-2);background:#fff}
.lx-steps li.lx-on{border:1px solid var(--ink)}
.lx-n{font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint)}
.lx-steps b{font:700 15.5px var(--sans);color:var(--ink)}.lx-steps small{font-size:13.5px;color:var(--muted)}
.lx-steps em{font:700 11.5px var(--sans);font-style:normal;color:var(--faint);margin-top:6px}.lx-steps em.lx-ok{color:var(--free)}
.lx-steps a{position:absolute;top:16px;right:16px;font:700 13px var(--sans);color:var(--ink)}.lx-steps a:hover{color:var(--brand)}
@media (min-width:980px){.lx-steps{grid-template-columns:repeat(3,1fr);gap:0}.lx-steps li{border-radius:0}.lx-steps li:first-child{border-radius:16px 0 0 16px}.lx-steps li:last-child{border-radius:0 16px 16px 0}.lx-steps li+li{margin-left:-1px}}
/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);background:#fff}
.ft-row{display:grid;gap:12px;padding:20px 20px calc(20px + env(safe-area-inset-bottom))}
.ft-brand{font-size:14.5px;margin:0}.ft-brand .nv-mark{width:20px;height:20px;font-size:11px;border-radius:6px}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px 26px}.ft-nav span{display:flex;flex-wrap:wrap;gap:6px 16px}
.ft-nav a{font:600 13px var(--sans);color:var(--muted)}.ft-nav a:hover{color:var(--ink)}
.ft-copy{font:600 12.5px var(--sans);color:var(--faint)}
@media (min-width:980px){.ft-row{grid-template-columns:auto 1fr auto;align-items:center;gap:30px;padding:18px 32px}.ft-nav span+span{padding-left:26px;border-left:1px solid var(--line)}}
/* v6 review fixes */
.hx-grid,.fx-grid{padding-left:20px;padding-right:20px}
@media (min-width:640px){.hx-grid,.fx-grid{padding-left:32px;padding-right:32px}}
@media (min-width:980px){.hx-stage{grid-template-columns:auto 150px;justify-content:end}.hx-ba{height:480px;width:auto;aspect-ratio:4/5}.sx-grid{align-items:start}}

.nv-panel{animation:none;opacity:1;z-index:80;background:#fff}.nv{isolation:isolate}.nv-menu[open]{z-index:80}

/* =====================================================================
   V7 — blue/white platform homepage (owner reference: density + balance)
   ===================================================================== */
:root{--pb:#1b64f2;--pb2:#1452d4;--pb-50:#eef4ff;--pb-100:#dce8ff}
/* header */
.nv{background:rgba(255,255,255,.96)}
.nv-row{height:60px}
.nv-mark{width:30px;height:30px;border-radius:8px;background:var(--pb);font-size:16px}
.nv-word{display:flex;flex-direction:column;line-height:1.05;font:800 19px var(--display);letter-spacing:-.02em;color:var(--ink)}.nv-word b{color:var(--pb);font-weight:800}
.nv-word small{font:600 10.5px var(--sans);letter-spacing:0;color:var(--muted);margin-top:2px}
.nv-links{margin-left:auto;gap:6px}
.nv-links>a,.nv-menu>summary{height:60px;border-radius:0;padding:0 12px;background:none!important;position:relative;color:var(--text)}
.nv-links>a::after,.nv-menu>summary::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--pb);transform:scaleX(0);transition:transform .2s}
.nv-links>a:hover,.nv-menu>summary:hover,.nv-menu[open]>summary{color:var(--pb)}.nv-links>a.on{color:var(--pb)}.nv-links>a.on::after,.nv-menu[open]>summary::after,.nv-links>a:hover::after{transform:scaleX(1)}
.nv-panel{top:100%;border-top:0;border-radius:0 0 14px 14px}
.nv-sico{display:none;width:40px;height:40px;margin-left:10px;border-radius:10px;border:1px solid var(--line);background:#fff;place-content:center;color:var(--ink)}.nv-sico:hover{border-color:var(--pb);color:var(--pb)}.nv-sico .i{width:18px;height:18px}
@media (min-width:980px){.nv-sico{display:grid}}
.nvp-studio em{color:var(--pb)}.nvs-st small{color:var(--pb)}
/* buttons + tags */
.b7{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--pb-100);background:#fff;color:var(--pb);font:700 13.5px var(--sans);transition:background .15s,border-color .15s}
.b7:hover{background:var(--pb-50);border-color:var(--pb)}.b7-p{background:var(--pb);border-color:var(--pb);color:#fff}.b7-p:hover{background:var(--pb2);border-color:var(--pb2)}
.tg{display:inline-block;font:700 11px var(--sans);padding:3px 8px;border-radius:5px;background:var(--pb-50);color:var(--pb)}.tg-free{background:#e7f7ee;color:#12814f;border:1px solid #bfe8d0}
.ck{width:18px;height:18px;flex:none}.ck circle{fill:#1ea672}.ck path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* hero */
.h7{background:linear-gradient(180deg,#eaf2ff 0%,#f5f9ff 60%,#fff 100%);border-bottom:1px solid var(--line)}
.h7-grid{display:grid;gap:26px;padding:26px 20px 30px}
.h7-k{font:800 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.h7-copy h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.035em;margin:8px 0 0}.h7-copy h1 span{color:var(--pb)}
.h7-copy p{margin:12px 0 0;font-size:16.5px;color:var(--text);max-width:34em}
.h7-facts{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px}.h7-facts li{display:flex;align-items:center;gap:7px;font:600 14px var(--sans);color:var(--ink)}
.h7-search{display:flex;align-items:center;gap:10px;margin-top:18px;background:#fff;border:1px solid var(--pb-100);border-radius:12px;padding:6px 6px 6px 14px;box-shadow:0 10px 30px -18px rgba(27,100,242,.45);max-width:600px}
.h7-search .i{width:20px;height:20px;color:var(--pb)}.h7-search input{flex:1;min-width:0;border:0;outline:0;font:500 15px var(--sans);color:var(--ink);background:none;height:42px}
.h7-search button{height:44px;padding:0 22px;border:0;border-radius:9px;background:var(--pb);color:#fff;font:700 14.5px var(--sans);cursor:pointer}.h7-search button:hover{background:var(--pb2)}
.h7-pop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;font:600 12.5px var(--sans);color:var(--ink)}
.h7-pop a{padding:4px 10px;border-radius:7px;background:#fff;border:1px solid var(--line);color:var(--text);font-weight:600}.h7-pop a:hover{border-color:var(--pb);color:var(--pb)}
.h7-art{position:relative;display:grid;grid-template-columns:.8fr auto 1.2fr;align-items:center;gap:10px;min-height:300px}
.h7-art figure{margin:0;position:relative}.h7-art img{display:block;width:100%;object-fit:cover;border-radius:14px}
.h7-art figcaption{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:6px;background:rgba(15,18,34,.78);color:#fff;font:700 11px var(--sans)}
.h7-src img{aspect-ratio:3/4;border:5px solid #fff;box-shadow:0 18px 36px -22px rgba(24,40,90,.6);transform:rotate(-3deg)}
.h7-arrow{width:34px;height:34px;border-radius:50%;background:var(--pb);display:grid;place-content:center;box-shadow:0 10px 20px -8px rgba(27,100,242,.7)}.h7-arrow svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.h7-main img{aspect-ratio:4/5;box-shadow:0 26px 50px -26px rgba(24,40,90,.65)}
.h7-mini{display:none}.h7-note{display:none}
.h7-mini figcaption{top:auto;bottom:6px;left:6px}
@media (min-width:980px){
  .h7-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:center;padding:30px 32px 30px}
  .h7-art{grid-template-columns:130px 34px 210px 150px;grid-template-rows:auto auto;gap:12px;min-height:340px;justify-content:end}
  .h7-src{grid-row:span 2}.h7-arrow{grid-row:span 2}.h7-main{grid-row:span 2}
  .h7-mini{display:block}.h7-mini img{aspect-ratio:1;border:4px solid #fff;box-shadow:0 14px 28px -18px rgba(24,40,90,.6)}
  .h7-note{display:block;position:absolute;right:-6px;top:-8px;width:0;height:0}
}
@media (min-width:1180px){
  .h7-art{grid-template-columns:130px 34px 220px 150px 170px}
  .h7-note{position:static;width:auto;height:auto;grid-column:5;grid-row:1/span 2;align-self:center;background:#fff;border:1px solid var(--pb-100);border-radius:14px;padding:14px;box-shadow:0 16px 34px -24px rgba(27,100,242,.6)}
  .h7-note b{display:block;font:800 16px/1.15 var(--display);color:var(--ink);margin-bottom:8px}
  .h7-note ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.h7-note li{display:flex;align-items:center;gap:7px;font:600 13px var(--sans);color:var(--text)}.h7-note .ck{width:16px;height:16px}
}
/* sections */
.s7{padding:28px 0 30px}.s7-alt{background:#f7f9fc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s7-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.s7-h h2{font-size:clamp(21px,2.2vw,26px);letter-spacing:-.02em}.s7-h p{margin:3px 0 0;color:var(--muted);font-size:14.5px}
.s7-more{font:700 13.5px var(--sans);color:var(--pb);white-space:nowrap}.s7-more:hover{color:var(--pb2)}
/* creation types */
.t7-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.t7{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px 10px;border-radius:12px;background:#f5f7fb;border:1px solid transparent;text-align:center;transition:background .15s,border-color .15s,transform .15s}
.t7 img{width:52px;height:46px;object-fit:contain;transition:transform .2s var(--ease)}
.t7 span{font:600 12.5px var(--sans);color:var(--ink);line-height:1.2}
.t7 small{position:absolute;top:6px;right:6px;font:700 9.5px var(--sans);text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.t7-on{background:#fff;border-color:var(--pb-100);box-shadow:0 8px 18px -14px rgba(27,100,242,.6)}
.t7-on:hover{border-color:var(--pb);transform:translateY(-2px)}.t7:hover img{transform:scale(1.07)}
@media (min-width:700px){.t7-grid{grid-template-columns:repeat(8,1fr);gap:10px}.t7{padding:14px 6px 12px}.t7 img{width:60px;height:53px}.t7 span{font-size:13px}}
/* free systems */
.f7-grid{display:grid;gap:12px}
.f7-feat{display:grid;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.f7-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}.f7-pair figure{margin:0;position:relative}.f7-pair img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.f7-pair figcaption{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:6px;background:rgba(15,18,34,.78);color:#fff;font:700 11px var(--sans)}
.f7-body{padding:14px;display:flex;flex-direction:column;gap:6px}.f7-tags{display:flex;gap:6px;justify-content:space-between}
.f7-body h3{font-size:17px}.f7-body p{margin:0;color:var(--muted);font-size:13.5px}.f7-act{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.r7{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.r7:hover{border-color:var(--pb-100);box-shadow:0 14px 28px -20px rgba(24,40,90,.5);transform:translateY(-2px)}
.r7 img{width:100%;aspect-ratio:4/3;object-fit:cover}.r7-b{padding:12px;display:flex;flex-direction:column;gap:3px}.r7-b .tg{align-self:flex-start;margin-bottom:3px}
.r7-b b{font:700 15px var(--sans);color:var(--ink)}.r7-b small{font-size:12.5px;color:var(--muted)}.r7-b em{font-style:normal;font:700 12px var(--sans);color:#12814f;margin-top:4px}
@media (min-width:700px){.f7-grid{grid-template-columns:repeat(3,1fr)}.f7-feat{grid-column:1/-1;grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.f7-grid{grid-template-columns:1.9fr 1fr 1fr 1fr}.f7-feat{grid-column:auto;grid-template-columns:1.1fr 1fr}.f7-body{padding:16px;justify-content:center}}
/* real creations gallery */
.g7{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.g7-i{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.g7-i:hover{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(24,40,90,.5)}
.g7-i img{width:100%;aspect-ratio:1;object-fit:cover}.g7-i span{padding:9px 11px;display:flex;flex-direction:column}.g7-i b{font:700 13.5px var(--sans);color:var(--ink)}.g7-i small{font-size:11.5px;color:var(--muted)}
@media (min-width:700px){.g7{grid-template-columns:repeat(3,1fr)}}@media (min-width:1100px){.g7{grid-template-columns:repeat(6,1fr)}}
/* how it works + studio */
.w7-grid{display:grid;gap:18px}
.w7 h2{font-size:clamp(21px,2.2vw,26px)}.w7-sub{margin:3px 0 14px;color:var(--muted);font-size:14.5px}
.w7-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.w7-steps li{position:relative;display:flex;flex-direction:column;gap:5px}
.w7-n{position:absolute;top:8px;left:8px;z-index:1;width:26px;height:26px;border-radius:50%;background:var(--pb);color:#fff;display:grid;place-content:center;font:800 13px var(--sans)}
.w7-steps img,.w7-sys{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.w7-sys{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px 12px 10px 42px;background:#fff}.w7-sys i{font:700 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:var(--pb);letter-spacing:.02em}
.w7-steps b{font:700 15px var(--sans);color:var(--ink)}.w7-steps small{font-size:12.5px;color:var(--muted);line-height:1.4}
.p7{background:linear-gradient(135deg,#eef4ff,#e3edff);border:1px solid var(--pb-100);border-radius:16px;padding:18px}
.p7-h{display:flex;align-items:center;gap:12px}.p7-h img{width:56px;height:49px;object-fit:contain}.p7-k{font:800 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--pb)}.p7-h h3{font-size:19px;margin-top:2px}
.p7-ladder{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.p7-ladder li,.p7-ladder a{display:flex;justify-content:space-between;align-items:center;gap:10px}
.p7-ladder li{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.7);border:1px dashed #c9d8f5}.p7-ladder a{width:100%}
.p7-ladder li.p7-on{background:#fff;border:1px solid var(--pb)}.p7-ladder b{font:700 14px var(--sans);color:var(--ink)}.p7-ladder li:not(.p7-on) b{color:var(--muted)}
.p7-ladder em{font-style:normal;font:700 11.5px var(--sans);color:var(--faint);white-space:nowrap}.p7-on em{color:#12814f}
.p7-more{margin:12px 0 0;font:600 12.5px var(--sans);color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.p7-more span{display:inline-flex;align-items:center;gap:5px;color:var(--ink)}
@media (min-width:980px){.w7-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center}}
/* footer */
.ft2{background:#fff;border-top:1px solid var(--line)}
.ft2-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:28px 20px 20px}
.ft2-brand{grid-column:1/-1}.ft2-brand p{margin:10px 0 0;color:var(--muted);font-size:13.5px;max-width:30em}
.ft2 nav{display:flex;flex-direction:column;gap:7px}.ft2 nav b{font:800 13px var(--sans);color:var(--ink);margin-bottom:3px}
.ft2 nav a{font:500 13.5px var(--sans);color:var(--muted)}.ft2 nav a:hover{color:var(--pb)}
.ft2-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:14px 20px calc(16px + env(safe-area-inset-bottom));color:var(--faint)}
@media (min-width:800px){.ft2-grid{grid-template-columns:2fr 1fr 1fr 1fr;padding:32px 32px 22px}.ft2-brand{grid-column:auto}.ft2-bottom{padding:14px 32px 18px}}
/* v7 review fixes */
.nv-word{display:block;white-space:nowrap}.nv-word small{display:block}
.nv-row{position:relative}.nv-menu{position:static}.nv-panel{left:auto;right:32px;top:60px}
.h7-art{min-height:0}
.h7-copy h1{font-size:clamp(32px,3.6vw,48px)}
@media (min-width:980px){.h7-grid{grid-template-columns:minmax(0,1fr) auto;gap:28px}.h7-art{grid-template-columns:108px 30px 190px 128px;gap:10px}.h7-arrow{width:30px;height:30px}}
@media (min-width:1180px){.h7-art{grid-template-columns:108px 30px 200px 128px 150px}}
@media (max-width:979px){.h7-art{grid-template-columns:.85fr 34px 1.15fr}}

/* ---------- V7b: purple primary ---------- */
:root{--pb:#5b4bff;--pb2:#4636e8;--pb-50:#f1efff;--pb-100:#e1dcff}
.h7{background:linear-gradient(180deg,#f1eeff 0%,#f8f7ff 60%,#fff 100%)}
.h7-search{box-shadow:0 10px 30px -18px rgba(91,75,255,.5)}.h7-arrow{box-shadow:0 10px 20px -8px rgba(91,75,255,.7)}
.t7-on{box-shadow:0 8px 18px -14px rgba(91,75,255,.6)}.h7-note{box-shadow:0 16px 34px -24px rgba(91,75,255,.6)}
.p7{background:linear-gradient(135deg,#f3f1ff,#e9e5ff)}.p7-ladder li{border-color:#d9d3ff}
.p7-t{font:800 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--pb);background:#fff;border:1px solid var(--pb-100);border-radius:5px;padding:2px 6px;margin-right:auto}
.p7-ladder li,.p7-ladder a{justify-content:flex-start}.p7-ladder em{margin-left:auto}.p7-ladder b{margin-left:8px}

/* =====================================================================
   V7b MOBILE (< 700px) — its own composition: one strong column,
   swipe rails where content benefits, own type scale. Desktop unchanged.
   ===================================================================== */
@media (max-width:699px){
  /* header: one compact row */
  .nv-row{height:56px;gap:2px}.nv-brand{margin-right:auto}.nv-mark{width:28px;height:28px;font-size:15px}
  .nv-word{font-size:17px}.nv-word small{font-size:10px}.nv-m:first-of-type,.nv-search+.nv-m{margin-left:0}
  /* type scale */
  .s7-h{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:12px}.s7-h h2,.w7 h2{font-size:21px;line-height:1.15}.s7-h p,.w7-sub{font-size:14px}
  .s7{padding:24px 0 26px}
  /* hero: headline -> big transformation -> message -> search -> discovery */
  .h7-grid{display:flex;flex-direction:column;gap:0;padding:18px 20px 22px}
  .h7-copy{display:contents}
  .h7-k{order:1;font-size:11px}
  .h7-copy h1{order:2;font-size:31px;line-height:1.05;margin:6px 0 14px}
  .h7-art{order:3;display:block;position:relative;margin:0 0 16px}
  .h7-main img{width:100%;aspect-ratio:4/5;max-height:430px;border-radius:18px}
  .h7-src{position:absolute;left:12px;bottom:12px;width:34%;z-index:2}
  .h7-src img{border-width:4px}.h7-src figcaption{top:auto;bottom:8px;font-size:10px;padding:2px 7px}
  .h7-arrow{position:absolute;left:calc(12px + 34% - 6px);bottom:calc(12px + 18%);z-index:3;width:30px;height:30px}
  .h7-mini,.h7-note{display:none!important}
  .h7-copy p{order:4;margin:0;font-size:15.5px}
  .h7-facts{order:5;margin-top:10px;gap:6px 14px}.h7-facts li{font-size:13.5px}
  .h7-search{order:6;margin-top:14px;padding:5px 5px 5px 12px}.h7-search input{font-size:15px}.h7-search button{height:44px;padding:0 16px}
  .h7-pop{order:7;flex-wrap:nowrap;overflow-x:auto;margin:10px -20px 0;padding:0 20px 4px;scrollbar-width:none}.h7-pop::-webkit-scrollbar{display:none}.h7-pop a{flex:none}.h7-pop span{flex:none}
  /* categories: swipe rail with large icons */
  .t7-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -20px;padding:2px 20px 8px;scrollbar-width:none}.t7-grid::-webkit-scrollbar{display:none}
  .t7{flex:0 0 108px;scroll-snap-align:start;padding:14px 8px 12px;gap:8px}.t7 img{width:64px;height:56px}.t7 span{font-size:13px}
  /* featured creation system: one full-width card */
  .f7-grid{display:flex;flex-direction:column;gap:14px}
  .f7-feat{display:block}.f7-pair img{aspect-ratio:4/5}
  .f7-body{padding:16px}.f7-body h3{font-size:19px}.f7-body p{font-size:14.5px}
  .f7-act{flex-direction:column;align-items:stretch;gap:6px}.f7-act .b7{height:46px;font-size:15px}.f7-act .b7:not(.b7-p){border:0;height:auto;padding:6px 0;background:none}
  /* recipes: swipe rail of wide cards */
  .f7-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}.f7-rail::-webkit-scrollbar{display:none}
  .r7{flex:0 0 72%;scroll-snap-align:start}.r7 img{aspect-ratio:4/3}
  /* real creations: large swipe gallery */
  .g7{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}.g7::-webkit-scrollbar{display:none}
  .g7-i{flex:0 0 78%;scroll-snap-align:center}.g7-i img{aspect-ratio:4/5}.g7-i span{padding:10px 12px}.g7-i b{font-size:15px}
  /* how it works: vertical, compact */
  .w7-steps{grid-template-columns:1fr;gap:0}
  .w7-steps li{display:grid;grid-template-columns:30px 88px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 0;position:relative}
  .w7-n{position:static;grid-row:span 2}
  .w7-steps img,.w7-sys{grid-row:span 2;width:88px;aspect-ratio:1;border-radius:10px}
  .w7-sys{padding:6px;gap:3px;align-items:center;justify-content:center}.w7-sys i{font-size:7.5px}
  .w7-steps b{align-self:end;font-size:15.5px}.w7-steps small{align-self:start;font-size:13.5px}
  .w7-steps li:not(:last-child)::after{content:"\2193";position:absolute;left:8px;bottom:-9px;color:var(--pb);font-weight:800}
  /* creation family: vertical progression */
  .p7{padding:16px}.p7-ladder{gap:0}
  .p7-ladder li{padding:13px 12px;position:relative;margin-bottom:18px}.p7-ladder li:last-child{margin-bottom:0}
  .p7-ladder li:not(:last-child)::after{content:"\2193";position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);color:var(--pb);font-weight:800;font-size:14px}
  .p7-ladder b{font-size:14.5px}
  /* footer: grouped, compact */
  .ft2-grid{grid-template-columns:1fr;gap:16px;padding:24px 20px 14px}
  .ft2 nav{flex-direction:row;flex-wrap:wrap;gap:6px 18px}.ft2 nav b{width:100%;margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
  .ft2 nav a{font-size:14.5px;color:var(--text)}
  .ft2-bottom{padding:12px 20px calc(16px + env(safe-area-inset-bottom))}
}

.f7-rail{display:contents}
@media (max-width:699px){.f7-rail{display:flex}}
@media (max-width:699px){
  .h7-art .h7-src{position:absolute;left:12px;bottom:12px;width:36%;z-index:2}
  .h7-art .h7-main{position:relative}
  .h7-art .h7-arrow{position:absolute;left:calc(12px + 36% - 10px);bottom:calc(12px + 20%);z-index:3}
  .h7-art .h7-src figcaption{top:6px;bottom:auto;left:6px}
}

.btn-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.price.soon{color:var(--muted);font-weight:700}

/* ---------- V8: real inventory sections ---------- */
.tg-soon{background:#fff4e5;color:#9a5b00;border:1px solid #f5d9a8}
.p8-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:3px}.p8-tags .tg{margin:0}
.p8-cta{color:var(--pb)!important}
.p8-grid{display:grid;gap:12px}
@media (min-width:700px){.p8-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.p8-grid{grid-template-columns:repeat(4,1fr)}.f8-grid{grid-template-columns:1.5fr 1fr 1fr;grid-auto-rows:auto}.f8-grid .f7-feat{grid-row:span 2;grid-template-columns:1fr;align-content:start}.f8-grid .f7-pair img{aspect-ratio:1}}
@media (max-width:699px){.p8-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}.p8-grid::-webkit-scrollbar{display:none}.p8{flex:0 0 72%;scroll-snap-align:start}}
.r7 img{aspect-ratio:4/3}

/* featured card fills its two-row height (no empty area) */
@media (min-width:1100px){.f8-grid .f7-feat{display:flex;flex-direction:column}.f8-grid .f7-pair{flex:1;min-height:0}.f8-grid .f7-pair img{height:100%;aspect-ratio:auto}}

/* =====================================================================
   V9 — creation-system showcase (result first · system second · contents last)
   ===================================================================== */
.sc-open{background:linear-gradient(180deg,#f3f0ff,#fbfaff 70%,#fff);border-bottom:1px solid var(--line)}
.sc-open-grid{display:grid;gap:22px;padding:20px 20px 28px}
.sc-labels{display:grid;grid-template-columns:1fr 1fr;margin-bottom:8px;font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.sc-labels span:last-child{text-align:right;color:var(--pb)}
.sc-ba{aspect-ratio:4/5;border-radius:18px;box-shadow:0 30px 60px -34px rgba(40,30,110,.6)}.sc-ba .ba-after{transition:opacity .25s ease}
.sc-tabs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}.sc-tabs::-webkit-scrollbar{display:none}
.sc-tabs button{flex:none;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:12px;border:1px solid var(--line);background:#fff;font:700 13px var(--sans);color:var(--text);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.sc-tabs button img{width:34px;height:34px;object-fit:cover;border-radius:8px}
.sc-tabs button.on{border-color:var(--pb);box-shadow:0 0 0 1px var(--pb);color:var(--ink)}.sc-tabs button:hover{border-color:var(--pb-100)}
.sc-crumb{font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--pb)}
.sc-copy h1{font-size:clamp(28px,3.2vw,40px);line-height:1.08;letter-spacing:-.03em;margin:8px 0 10px}
.sc-copy p{font-size:16px;color:var(--text);margin:0 0 16px}
.sc-buy{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}.sc-buy b{font:800 30px var(--display);color:#12814f}.sc-buy span{color:var(--muted);font-size:14px}
.sc-cta{display:flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:12px;background:var(--pb);color:#fff;font:700 16px var(--sans);box-shadow:0 14px 28px -14px rgba(91,75,255,.8);transition:background .15s,transform .15s}.sc-cta:hover{background:var(--pb2);transform:translateY(-1px)}
.sc-proof{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}.sc-proof li{font:600 13.5px var(--sans);color:var(--text);display:flex;gap:8px}.sc-proof li::before{content:"\2713";color:#12814f;font-weight:800}
@media (min-width:980px){.sc-open-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding:30px 32px 36px}.sc-ba{aspect-ratio:auto;height:560px}.sc-cta{display:inline-flex}}
.sc-sec{padding:34px 0}.sc-alt{background:#f8f7fc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-h{margin-bottom:16px}.sc-h h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}.sc-h p{margin:4px 0 0;color:var(--muted)}
.sc-create{display:grid;gap:12px}
.sc-c{margin:0;position:relative;border-radius:18px;overflow:hidden;background:var(--surface)}.sc-c>img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5;transition:transform .5s var(--ease)}.sc-c:hover>img{transform:scale(1.02)}
.sc-c figcaption{position:absolute;left:12px;bottom:12px;right:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.94);display:flex;flex-direction:column}.sc-c figcaption b{font:800 16px var(--sans);color:var(--ink)}.sc-c figcaption span{font-size:13px;color:var(--muted)}
.sc-from{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(15,18,34,.8);color:#fff;font:700 11px var(--sans);opacity:0;transition:opacity .2s}.sc-from img{width:28px;height:28px;border-radius:50%;object-fit:cover}.sc-c:hover .sc-from{opacity:1}
@media (hover:none){.sc-from{opacity:1}}
.sc-c3>img{aspect-ratio:3/2}
@media (min-width:980px){.sc-create{grid-template-columns:1fr 1fr 1fr;grid-template-rows:340px 300px}.sc-c>img{aspect-ratio:auto}.sc-c1{grid-row:span 2}.sc-c3{grid-column:2/4}.sc-c0{grid-column:1}.sc-c1{grid-column:2}.sc-c2{grid-column:3}.sc-c3{grid-row:2}.sc-c1{grid-row:1}.sc-create .sc-c0{grid-row:1/3}}
.sc-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:st}
.sc-steps li{counter-increment:st;display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}
.sc-steps li>img,.sc-chips,.sc-code{grid-row:span 2;width:72px;height:72px;border-radius:10px;object-fit:cover}
.sc-chips,.sc-code{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px;background:var(--pb-50);font:700 8.5px var(--sans);color:var(--pb)}.sc-chips i,.sc-code i{font-style:normal}.sc-code{background:#15172a;color:#c9cdf5;font-family:ui-monospace,Menlo,monospace}
.sc-steps b{align-self:end;font:800 15px var(--sans);color:var(--ink)}.sc-steps b::before{content:counter(st) ". ";color:var(--pb)}.sc-steps li>span:last-child{align-self:start;font-size:13.5px;color:var(--muted)}
@media (min-width:980px){.sc-steps{grid-template-columns:repeat(4,1fr);gap:12px}.sc-steps li{grid-template-columns:1fr;grid-template-rows:auto;padding:12px}.sc-steps li>img,.sc-chips,.sc-code{grid-row:auto;width:100%;height:140px;margin-bottom:10px}.sc-chips,.sc-code{font-size:12px;gap:6px;padding:14px}}
.sc-ctrl{background:#14162a;color:#c9cdf5;padding:40px 0}
.sc-ctrl-grid{display:grid;gap:22px}
.sc-k{font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#a99dff}.sc-ctrl h2{color:#fff;font-size:clamp(24px,2.6vw,32px);margin:8px 0 10px}.sc-ctrl-copy>p{color:#b4b8e0;margin:0 0 16px;font-size:15px}
.sc-annot{position:relative;margin:0;border-radius:16px;overflow:hidden;max-width:380px;background:#fff}.sc-annot img{width:100%;display:block}
.sc-ctrls{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sc-ctrls li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:2px;padding:14px;border-radius:14px;background:#1c1f3a;border:1px solid rgba(255,255,255,.07)}
.sc-ci{grid-row:span 2;width:40px;height:40px;border-radius:10px;background:rgba(169,157,255,.14);display:grid;place-content:center;color:#cfc8ff}.sc-svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-ctrls b{color:#fff;font:700 15px var(--sans)}.sc-ctrls li>span:last-child{font-size:13px;color:#aab0dc;line-height:1.45}
@media (min-width:700px){.sc-ctrls{grid-template-columns:1fr 1fr}}@media (min-width:980px){.sc-ctrl-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}}
.sc-end{border-top:1px solid var(--line);padding:26px 0}
.sc-end-row{display:grid;gap:14px;align-items:center}.sc-end-row h3{font-size:20px}.sc-end-row p{margin:4px 0 0;color:var(--muted);font-size:14px}
.sc-end-pair{display:flex;align-items:center;gap:8px}.sc-end-pair img{width:64px;height:80px;object-fit:cover;border-radius:10px}.sc-end-pair span{color:var(--pb);font-weight:800}
@media (min-width:980px){.sc-end-row{grid-template-columns:auto 1fr auto;gap:24px}}
.ix-fix li::before{content:"";}
/* discover card: source -> result */
.rc-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:4/3;background:var(--line)}
.rc-pair>span{position:relative;overflow:hidden}.rc-pair img{width:100%;height:100%;object-fit:cover;display:block}
.rc-pair em{position:absolute;left:8px;bottom:8px;font:700 10.5px var(--sans);font-style:normal;padding:2px 7px;border-radius:5px;background:rgba(15,18,34,.78);color:#fff}
.rc-pair i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:var(--pb);color:#fff;display:grid;place-content:center;font-style:normal;font-weight:800;box-shadow:0 8px 16px -6px rgba(91,75,255,.7)}
/* homepage feature */
.fz{display:grid;gap:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.fz-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--line)}
.fz-pair figure{margin:0;position:relative}.fz-pair img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.fz-pair figcaption{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:7px;background:rgba(15,18,34,.8);color:#fff;font:800 11px var(--sans);letter-spacing:.08em;text-transform:uppercase}.fz-pair figure:last-child figcaption{background:var(--pb)}
.fz-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--pb);display:grid;place-content:center;font:800 20px var(--sans);box-shadow:0 10px 24px -10px rgba(20,20,60,.6)}
.fz-body{padding:18px;display:flex;flex-direction:column;gap:8px}.fz-body .tg{align-self:flex-start}.fz-body h3{font-size:22px}.fz-body>p{margin:0;color:var(--muted);font-size:15px}
.fz-results{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 4px}.fz-results a{display:flex;flex-direction:column;gap:4px}.fz-results img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.fz-results span{font:700 11.5px var(--sans);color:var(--text)}
.fz-act{display:flex;align-items:center;gap:14px;margin-top:6px}.fz-free{font:800 22px var(--display);color:#12814f}.fz-cta{height:46px;padding:0 20px;font-size:15px}
.fz-more{margin-top:12px}
@media (min-width:980px){.fz{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.fz-pair img{aspect-ratio:auto;height:460px}.fz-body{padding:28px;justify-content:center}}
@media (max-width:699px){.fz-results{grid-template-columns:repeat(2,1fr)}.fz-act{flex-direction:column;align-items:stretch}.fz-cta{justify-content:center}}
/* homepage gallery for one system */
.gz{display:grid;gap:10px}.gz-i{position:relative;border-radius:16px;overflow:hidden;display:block}.gz-i img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.gz-i span{position:absolute;left:10px;right:10px;bottom:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.94);font-size:12.5px;color:var(--muted);display:flex;flex-direction:column}.gz-i b{font:800 14.5px var(--sans);color:var(--ink)}
@media (min-width:980px){.gz{grid-template-columns:1fr 1fr 1fr;grid-template-rows:300px 260px}.gz-i img{aspect-ratio:auto}.gz-0{grid-row:span 2}.gz-3{grid-column:2/4}.gz-3 img{object-position:center}}
@media (max-width:699px){.gz{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}.gz::-webkit-scrollbar{display:none}.gz-i{flex:0 0 80%;scroll-snap-align:center}.gz-3{flex-basis:92%}.gz-3 img{aspect-ratio:3/2}}

/* =====================================================================
   Q — PT platform shell: PURPLE + PEARL (Pair10-level maturity, PT identity)
   Contrast: text #17152a on pearl 16.6:1 · #5c5872 on pearl 6.4:1 · white on #5b3ff0 5.9:1 · #5b3ff0 on pearl 5.6:1
   ===================================================================== */
:root{--q-purple:#5b3ff0;--q-purple-h:#4a2fdc;--q-deep:#2c1d7a;--q-ink:#15112a;--q-ink-2:#1e1838;--q-tint:#efebff;--q-tint-2:#e2dbff;
  --q-pearl:#f7f5f1;--q-pearl-2:#f1eee8;--q-surface:#ffffff;--q-text:#17152a;--q-text-2:#5c5872;--q-text-3:#8a8699;--q-line:#e5e1d9;--q-line-2:#d6d1c7;
  --q-focus:rgba(91,63,240,.38);--q-ok:#0f7a55;--q-err:#c0334d;--q-r:10px}
body.q{background:var(--q-pearl);color:var(--q-text)}
.q :focus-visible{outline:3px solid var(--q-focus);outline-offset:2px;border-radius:6px}
/* buttons */
.qb{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:9px;border:1px solid transparent;font:700 14px var(--sans);white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.qb-p{background:var(--q-purple);color:#fff;box-shadow:0 8px 18px -10px rgba(91,63,240,.8)}.qb-p:hover{background:var(--q-purple-h);transform:translateY(-1px)}
.qb-s{background:var(--q-surface);color:var(--q-text);border-color:var(--q-line-2)}.qb-s:hover{border-color:var(--q-purple);color:var(--q-purple)}
.qb-q{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}.qb-q:hover{background:rgba(255,255,255,.14)}
.qb-lg{height:48px;padding:0 22px;font-size:15px}.qb-dis,.qb[disabled]{opacity:.55;pointer-events:none}.qb[aria-busy=true]{opacity:.75;cursor:progress}
/* header */
.qh{position:sticky;top:0;z-index:60;background:var(--q-ink);border-bottom:1px solid rgba(255,255,255,.06)}
.qh-row{height:64px;display:flex;align-items:center;gap:8px}
.qh-brand{display:inline-flex;align-items:center;gap:10px;color:#fff}
.qh-mark{width:34px;height:34px;border-radius:10px;background:var(--q-purple);display:grid;place-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.qh-mark svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.qh-word{display:block;font:800 18px/1.05 var(--display);letter-spacing:-.02em}.qh-word b{color:#b5a6ff;font-weight:800}.qh-word small{display:block;font:600 10.5px var(--sans);letter-spacing:.02em;color:rgba(255,255,255,.55);margin-top:2px}
.qh-nav{display:none;margin-left:auto;align-items:center;gap:2px}
.qh-nav>a,.qh-menu>summary{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 12px;border-radius:8px;font:600 14px var(--sans);color:rgba(255,255,255,.82);cursor:pointer;list-style:none;transition:color .15s,background .15s}
.qh-menu>summary::-webkit-details-marker{display:none}.qh-menu summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}.qh-menu[open] summary svg{transform:rotate(180deg)}
.qh-nav>a:hover,.qh-menu>summary:hover,.qh-menu[open]>summary,.qh-nav>a.on{color:#fff;background:rgba(255,255,255,.08)}
.qh-menu{position:relative}
.qh-panel{position:absolute;top:calc(100% + 12px);left:-10px;width:420px;padding:12px;background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;box-shadow:0 30px 60px -28px rgba(21,17,42,.55);display:grid;gap:4px;z-index:80}
.qh-k{display:block;font:800 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--q-text-3);margin:2px 6px 6px}
.qh-st{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:10px;color:var(--q-text)}a.qh-st:hover{background:var(--q-pearl)}
.qh-st img{width:42px;height:37px;object-fit:contain}.qh-st b{display:block;font:700 14px var(--sans)}.qh-st small{font-size:12px;color:var(--q-text-2)}.qh-st em{font:700 11px var(--sans);font-style:normal;color:var(--q-purple)}.qh-later em{color:var(--q-text-3)}.qh-later b{color:var(--q-text-2)}
.qh-feat{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;margin-top:6px;padding:8px;border-radius:12px;background:var(--q-pearl);color:var(--q-text)}.qh-feat:hover{background:var(--q-tint)}
.qh-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px}.qh-pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}.qh-feat b{display:block;font:700 13.5px var(--sans)}.qh-feat small{font-size:12px;color:var(--q-text-2)}
.qh-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.qh-ib{width:40px;height:40px;border-radius:9px;display:grid;place-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer}.qh-ib:hover{background:rgba(255,255,255,.14)}.qh-ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.qh-cta{display:none}
@media (min-width:1000px){.qh-nav{display:flex}.qh-right{margin-left:12px}.qh-cta{display:inline-flex}.qh-m{display:none}}
/* mobile sheet */
.qs .sheet-panel{top:0;left:0;right:0;width:100%;height:100%;max-height:none;border-radius:0;background:var(--q-pearl);padding:0 18px calc(20px + env(safe-area-inset-bottom));transform:translateY(-10px);opacity:0;transition:transform .22s var(--ease),opacity .22s}
.qs.is-open .sheet-panel{transform:none;opacity:1}
.qs-top{display:flex;justify-content:space-between;align-items:center;height:64px;margin:0 -18px 12px;padding:0 18px;background:var(--q-ink)}
.qs-search{width:100%;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border:1px solid var(--q-line-2);border-radius:12px;background:var(--q-surface);font:500 15px var(--sans);color:var(--q-text-2);margin-bottom:12px}.qs-search svg{width:18px;height:18px;fill:none;stroke:var(--q-purple);stroke-width:2.2}
.qs-nav{display:grid;margin-bottom:18px;background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;overflow:hidden}
.qs-nav a{display:flex;justify-content:space-between;padding:15px 16px;font:700 16px var(--sans);color:var(--q-text);border-top:1px solid var(--q-line)}.qs-nav a:first-child{border-top:0}.qs-nav span{color:var(--q-purple)}
.qs-st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.qs-st a,.qs-st span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:12px;background:var(--q-surface);border:1px solid var(--q-line);text-align:center;color:var(--q-text)}
.qs-st img{width:46px;height:40px;object-fit:contain}.qs-st b{font:700 13.5px var(--sans)}.qs-st small{font:700 11px var(--sans);color:var(--q-purple)}.qs-st .qh-later small{color:var(--q-text-3)}
.qs-cta{width:100%;height:50px;font-size:15.5px}
/* hero */
.qhero{position:relative;overflow:hidden;background:var(--q-ink);color:#fff;padding-bottom:0}
.qhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(.85) blur(1px)}
.qhero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 50% 0%,rgba(91,63,240,.35),transparent 70%),linear-gradient(180deg,rgba(21,17,42,.55),rgba(21,17,42,.92) 78%,var(--q-ink));z-index:1}
.qhero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 20px 22px}
.qpill{display:inline-flex;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);font:700 12px var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.85)}.qpill b{color:#b5a6ff}
.qhero h1{margin:16px 0 0;font-size:clamp(34px,5.2vw,68px);line-height:1.02;letter-spacing:-.035em;color:#fff}.qhero h1 span{color:#b5a6ff}
.qhero-in>p{margin:14px 0 0;max-width:36em;font-size:17px;color:rgba(255,255,255,.78)}
.qhero-act{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.qrail{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:30px;width:100%}
.qrail figure{margin:0;position:relative;flex:0 1 190px}.qrail img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 40px -24px rgba(0,0,0,.8)}
.qrail figcaption{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:6px;background:rgba(21,17,42,.82);font:700 11.5px var(--sans);color:#fff}
.qrail-src img{filter:saturate(.9)}.qrail-src figcaption{background:rgba(255,255,255,.9);color:var(--q-text)}
.qrail-arrow{flex:none;width:40px;height:40px;border-radius:50%;background:var(--q-purple);display:grid;place-content:center;box-shadow:0 10px 24px -8px rgba(91,63,240,.9)}.qrail-arrow svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.qdock{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;background:var(--q-ink-2);border:1px solid rgba(255,255,255,.08);border-radius:14px 14px 0 0;overflow:hidden}
.qdock li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;padding:14px 16px;border-left:1px solid rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.07)}
.qdock-i{grid-row:span 2;width:40px;height:40px;border-radius:10px;background:rgba(181,166,255,.14);display:grid;place-content:center}.qdock-i svg{width:20px;height:20px;fill:none;stroke:#cfc4ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qdock b{font:700 14px var(--sans);color:#fff}.qdock small{font-size:12.5px;color:rgba(255,255,255,.6)}
@media (min-width:1000px){.qhero-in{padding:56px 32px 34px}.qdock{grid-template-columns:repeat(4,1fr)}.qdock li{border-top:0}.qdock li:first-child{border-left:0}}
@media (max-width:699px){.qhero-in{padding:28px 20px 20px}.qhero-in>p{font-size:15.5px}.qhero-act{flex-direction:column;width:100%}.qhero-act .qb{width:100%}
  .qrail{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:22px -20px 0;padding:0 20px 6px;width:calc(100% + 40px);scrollbar-width:none}.qrail::-webkit-scrollbar{display:none}.qrail figure{flex:0 0 42%;scroll-snap-align:start}.qrail-arrow{width:32px;height:32px}
  .qdock li{padding:12px}.qdock b{font-size:13px}.qdock small{font-size:11.5px}}
/* sections */
.qsec{padding:56px 0;background:var(--q-surface)}.qsec-pearl{background:var(--q-pearl)}.qsec-dark{background:var(--q-ink);color:#fff}
.qhd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}.qhd-c{justify-content:center;text-align:center}
.qk{font:800 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--q-purple)}.qsec-dark .qk{color:#b5a6ff}
.qhd h2{font-size:clamp(26px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em;margin:8px 0 0}.qsec-dark h2{color:#fff}
.qhd p{margin:8px 0 0;color:var(--q-text-2);font-size:15.5px}
.qlink{font:700 14px var(--sans);color:var(--q-purple);white-space:nowrap}.qlink:hover{color:var(--q-purple-h)}
/* cards */
.qcards{display:grid;gap:16px}
.qcard{display:flex;flex-direction:column;background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.qcard-live:hover{box-shadow:0 22px 44px -28px rgba(21,17,42,.45);transform:translateY(-2px)}
.qcard-media{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--q-line);aspect-ratio:16/11}
.qcard-media>span{position:relative;overflow:hidden}.qcard-media img{width:100%;height:100%;object-fit:cover;display:block}
.qcard-media em{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:6px;background:rgba(21,17,42,.8);color:#fff;font:700 11px var(--sans);font-style:normal}
.qcard-media i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--q-purple);color:#fff;display:grid;place-content:center;font-style:normal;font-weight:800;box-shadow:0 10px 20px -8px rgba(91,63,240,.9)}
.qcard-art{position:relative;aspect-ratio:16/11;background:linear-gradient(160deg,var(--q-tint),var(--q-pearl));display:grid;place-content:center}.qcard-art img{width:96px;height:84px;object-fit:contain;opacity:.95}
.qsoon{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:6px;background:var(--q-surface);border:1px solid var(--q-line);font:700 11px var(--sans);color:var(--q-text-2)}
.qcard-b{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.qcard-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.qcard-t h3{font-size:17px;letter-spacing:-.01em}.qprice{font:800 16px var(--display);color:var(--q-ok)}
.qmeta{font:600 12.5px var(--sans);color:var(--q-text-3)}.qcard-b p{margin:0;color:var(--q-text-2);font-size:14px;line-height:1.5;flex:1}
.qmeta-row{display:flex;justify-content:space-between;gap:8px}
.qcard-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.qcard-soon .qcard-act{grid-template-columns:1fr}
@media (min-width:760px){.qcards{grid-template-columns:repeat(3,1fr)}}
/* creation types */
.qtypes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qtype{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;background:var(--q-pearl);border:1px solid var(--q-line);color:var(--q-text);transition:border-color .15s,background .15s}
.qtype img{width:52px;height:46px;object-fit:contain;margin-bottom:6px}.qtype b{font:700 15px var(--sans)}.qtype small{font-size:13px;color:var(--q-text-2);line-height:1.45}
.qtype em{margin-top:6px;font:800 11px var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--q-text-3)}
.qtype-on{background:var(--q-surface);border-color:var(--q-purple);box-shadow:0 0 0 1px var(--q-purple)}.qtype-on em{color:var(--q-purple)}.qtype-on:hover{background:var(--q-tint)}
@media (min-width:760px){.qtypes{grid-template-columns:repeat(4,1fr)}}
@media (max-width:699px){.qtype{padding:12px}.qtype img{width:44px;height:39px}.qtype b{font-size:14px}.qtype small{font-size:12px}}
/* steps (dark) */
.qsteps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.qsteps li{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:var(--q-ink-2);border:1px solid rgba(255,255,255,.08)}
.qn{font:800 13px var(--sans);color:#b5a6ff;background:rgba(181,166,255,.12);border-radius:7px;padding:3px 8px;align-self:flex-start}
.qsteps img,.qsys{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin:6px 0}
.qsys{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px;background:#0f0c20;border:1px solid rgba(255,255,255,.08)}.qsys i{font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:#cfc4ff;letter-spacing:.03em}
.qsteps b{font:700 16px var(--sans);color:#fff}.qsteps small{font-size:14px;color:rgba(255,255,255,.65)}
@media (min-width:760px){.qsteps{grid-template-columns:repeat(3,1fr)}}
/* faq */
.qfaq{display:grid;gap:24px}.qfaq h2{font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.03em;margin:8px 0 0}.qfaq>div>p{color:var(--q-text-2);margin:10px 0 0}
.qfaq-list{display:grid;gap:10px}
.qfaq-list details{background:var(--q-surface);border:1px solid var(--q-line);border-radius:12px;padding:0 16px}
.qfaq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;font:700 15px var(--sans);color:var(--q-text)}.qfaq-list summary::-webkit-details-marker{display:none}
.qfaq-list summary::after{content:"+";font-size:20px;color:var(--q-purple);transition:transform .2s}.qfaq-list details[open] summary::after{transform:rotate(45deg)}
.qfaq-list p{margin:0 0 15px;color:var(--q-text-2);font-size:14.5px;line-height:1.55}
@media (min-width:900px){.qfaq{grid-template-columns:.9fr 1.1fr;gap:48px}}
/* footer */
.qf{background:var(--q-ink);color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.06)}
.qf-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:34px 20px calc(26px + env(safe-area-inset-bottom))}
.qf-in>p{margin:0;font-size:14px;color:rgba(255,255,255,.6)}
.qf nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}.qf nav a{font:600 13.5px var(--sans);color:rgba(255,255,255,.78)}.qf nav a:hover{color:#fff}
.qf small{font-size:12px;color:rgba(255,255,255,.45)}
/* showcase + discover inherit pearl */
body.q .sc-open{background:linear-gradient(180deg,var(--q-tint),var(--q-pearl) 75%)}body.q .sc-cta{background:var(--q-purple)}body.q .sc-ctrl{background:var(--q-ink)}
body.q .sc-alt{background:var(--q-pearl-2)}body.q .ix-feat{background:var(--q-ink)}

/* q review fixes */
@media (min-width:980px){.sc-open-grid{grid-template-columns:auto minmax(0,1fr)}.sc-stage{width:450px}.sc-ba{height:auto;aspect-ratio:4/5;width:100%}}
.qcard-art img{width:140px;height:122px}

/* =====================================================================
   Q2 — complete platform: listing, detail, documents, search, controls
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qb-d{background:var(--q-ink);color:#fff}.qb-d:hover{background:#000}.qb-block{width:100%}
/* page head */
.qpage-h{background:var(--q-pearl-2);border-bottom:1px solid var(--q-line);padding:24px 0 26px}
.qcrumb{display:flex;gap:8px;flex-wrap:wrap;font:600 13px var(--sans);color:var(--q-text-3);margin-bottom:14px}.qcrumb a{color:var(--q-text-2)}.qcrumb a:hover{color:var(--q-purple)}
.qpage-row{display:flex;align-items:center;gap:18px}.qpage-icon{width:64px;height:56px;object-fit:contain}
.qpage-h h1{font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;line-height:1.05;margin:6px 0 0}.qpage-h p{margin:8px 0 0;color:var(--q-text-2);font-size:15.5px}
.qpage-h-sm h1{font-size:clamp(28px,3.4vw,40px)}
/* listing */
.qlist{padding:22px 0 56px;background:var(--q-pearl)}
.qfilter{display:grid;gap:8px;padding:10px;background:var(--q-surface);border:1px solid var(--q-line);border-radius:12px;box-shadow:0 10px 30px -24px rgba(21,17,42,.4)}
.qfield{position:relative;display:flex;align-items:center}
.qfield input,.qfield select{width:100%;height:42px;padding:0 12px;border:1px solid var(--q-line-2);border-radius:9px;background:var(--q-surface);font:500 14.5px var(--sans);color:var(--q-text);appearance:none;-webkit-appearance:none}
.qfield select{padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5872' stroke-width='2.2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.qfield input:focus,.qfield select:focus{border-color:var(--q-purple);outline:none;box-shadow:0 0 0 3px var(--q-focus)}
.qfield-search svg{position:absolute;left:12px;width:18px;height:18px;fill:none;stroke:var(--q-purple);stroke-width:2.2;pointer-events:none}.qfield-search input{padding-left:38px}
.qfilter .qb{height:42px}
@media (min-width:860px){.qfilter{grid-template-columns:minmax(0,1fr) 220px 180px auto}}
.qcount{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 2px 12px;font:600 14px var(--sans);color:var(--q-text-2)}.qcount b{color:var(--q-text)}
.qchip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;border-radius:999px;background:var(--q-tint);color:var(--q-deep);font-weight:700}.qchip a{width:20px;height:20px;border-radius:50%;display:grid;place-content:center;background:#fff;color:var(--q-deep)}
.qgrid{display:grid;gap:16px}@media (min-width:700px){.qgrid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1080px){.qgrid{grid-template-columns:repeat(3,1fr)}}
.qcard-t h3 a{color:inherit}.qcard-t h3 a:hover{color:var(--q-purple)}
.qcard-media-1{grid-template-columns:1fr}.qprice-soon{color:var(--q-text-3)}
.qempty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:44px 20px;background:var(--q-surface);border:1px dashed var(--q-line-2);border-radius:14px}
.qempty img{width:72px;height:63px;object-fit:contain;opacity:.9}.qempty h2{font-size:22px}.qempty p{max-width:34em;margin:0;color:var(--q-text-2)}
.qnext{margin-top:28px;padding:16px;border-radius:14px;background:var(--q-pearl-2);border:1px solid var(--q-line);display:grid;gap:12px}
.qnext-h p{margin:4px 0 0;color:var(--q-text-2);font-size:14px}
.qnext-row{display:grid;gap:8px}.qnext-i{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--q-surface);border:1px solid var(--q-line)}
.qnext-i img{width:44px;height:39px;object-fit:contain}.qnext-i b{display:block;font:700 14px var(--sans);color:var(--q-text-2)}.qnext-i small{font:700 11px var(--sans);color:var(--q-text-3);text-transform:uppercase;letter-spacing:.06em}
@media (min-width:760px){.qnext{grid-template-columns:1fr 1.4fr;align-items:center}.qnext-row{grid-template-columns:1fr 1fr}}
/* detail page */
.qd-top{background:var(--q-pearl);padding:20px 0 32px}
.qd-grid{display:grid;gap:18px}
.qd-main h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;line-height:1.05;margin:0}
.qd-badges{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 16px}
.qbadge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;background:var(--q-surface);border:1px solid var(--q-line);font:700 12px var(--sans);color:var(--q-text-2)}.qbadge img{width:18px;height:16px;object-fit:contain}
.qbadge-free{background:#e6f5ee;border-color:#bfe3d1;color:var(--q-ok)}
.qd-stage{background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;padding:12px}
.qd-labels{display:flex;justify-content:space-between;margin:0 2px 8px;font:800 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--q-text-3)}.qd-labels span:last-child{color:var(--q-purple)}
.qd-ba{aspect-ratio:4/5;border-radius:12px}.qd-ba .ba-after{transition:opacity .25s ease}
.qd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.qd-thumbs button{display:flex;flex-direction:column;gap:5px;padding:5px;border-radius:10px;border:1px solid var(--q-line);background:var(--q-surface);cursor:pointer;font:700 12px var(--sans);color:var(--q-text-2);transition:border-color .15s,box-shadow .15s}
.qd-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px}.qd-thumbs button.on{border-color:var(--q-purple);box-shadow:0 0 0 1px var(--q-purple);color:var(--q-text)}.qd-thumbs button:hover{border-color:var(--q-tint-2)}
.qd-get{align-self:start;display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;box-shadow:0 20px 40px -32px rgba(21,17,42,.5)}
.qd-price{display:flex;align-items:baseline;gap:10px}.qd-price b{font:800 34px var(--display);color:var(--q-ok)}.qd-price span{color:var(--q-text-2);font-size:14px}
.qd-get>p{margin:0;color:var(--q-text-2);font-size:14.5px}
.qd-ticks{list-style:none;margin:0;padding:0;display:grid;gap:7px}.qd-ticks li{display:flex;gap:8px;font:600 14px var(--sans)}.qd-ticks li::before{content:"\2713";color:var(--q-ok);font-weight:800}
.qd-get small{color:var(--q-text-3);font-size:12.5px;text-align:center}.qd-get small a{color:var(--q-purple)}
@media (min-width:1000px){.qd-grid{grid-template-columns:minmax(0,1fr) 360px;gap:32px}.qd-stage{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px}.qd-labels{grid-column:1/-1;margin-bottom:0}.qd-ba{aspect-ratio:auto;height:560px;max-width:448px;width:100%;justify-self:center}.qd-thumbs{grid-template-columns:1fr;margin:0;align-content:start}.qd-get{margin-top:92px}}
.qd-tabs{position:sticky;top:64px;z-index:20;background:rgba(247,245,241,.96);backdrop-filter:blur(8px);border-top:1px solid var(--q-line);border-bottom:1px solid var(--q-line)}
.qd-tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.qd-tabs .wrap::-webkit-scrollbar{display:none}
.qd-tabs a{flex:none;padding:13px 12px;font:700 13.5px var(--sans);color:var(--q-text-2);border-bottom:2px solid transparent}.qd-tabs a:hover{color:var(--q-purple);border-bottom-color:var(--q-purple)}
.qd-sec{padding:48px 0;background:var(--q-surface);scroll-margin-top:110px}.qd-pearl{background:var(--q-pearl)}
.qd-results{display:grid;gap:12px}
.qd-r{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--q-pearl)}.qd-r img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.qd-r figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.95);display:flex;flex-direction:column}.qd-r b{font:800 15px var(--sans);color:var(--q-text)}.qd-r span{font-size:12.5px;color:var(--q-text-2)}
@media (min-width:1000px){.qd-results{grid-template-columns:1fr 1fr 1fr;grid-template-rows:320px 300px}.qd-r img{aspect-ratio:auto}.qd-r0{grid-row:1/3}.qd-r3{grid-column:2/4}}
@media (max-width:999px){.qd-results{grid-template-columns:1fr 1fr}.qd-r3{grid-column:1/-1}.qd-r3 img{aspect-ratio:3/2}}
.qd-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.qd-steps li{padding:18px;border-radius:14px;background:var(--q-surface);border:1px solid var(--q-line);display:flex;flex-direction:column;gap:6px}
.qd-steps b{font:800 16px var(--sans);color:var(--q-text)}.qd-steps p{margin:0;color:var(--q-text-2);font-size:14px}
@media (min-width:760px){.qd-steps{grid-template-columns:1fr 1fr}}@media (min-width:1100px){.qd-steps{grid-template-columns:repeat(4,1fr)}}
.qd-dark{background:var(--q-ink);color:#fff;border-radius:18px;padding:24px;display:grid;gap:20px}
.qd-dark-h h2{color:#fff;font-size:clamp(24px,2.8vw,34px);margin:8px 0 8px;letter-spacing:-.02em}.qd-dark-h p{margin:0;color:rgba(255,255,255,.7)}.qd-dark .qk{color:#b5a6ff}
.qd-ctrls{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.qd-ctrls li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:14px;border-radius:12px;background:var(--q-ink-2);border:1px solid rgba(255,255,255,.07)}
.qd-ci{grid-row:span 2;width:40px;height:40px;border-radius:10px;background:rgba(181,166,255,.14);display:grid;place-content:center}.qd-ci svg{width:20px;height:20px;fill:none;stroke:#cfc4ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qd-ctrls b{font:700 15px var(--sans);color:#fff}.qd-ctrls li>span:last-child{font-size:13px;color:rgba(255,255,255,.66);line-height:1.45}
@media (min-width:760px){.qd-ctrls{grid-template-columns:1fr 1fr}}@media (min-width:1100px){.qd-dark{grid-template-columns:.8fr 1.6fr;padding:32px;align-items:center}}
.qd-inc{display:grid;gap:20px}.qd-inc h2{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em;margin:8px 0}.qd-inc>div>p{color:var(--q-text-2);margin:0}
.qd-checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qd-checklist li{display:flex;gap:10px;padding:12px 14px;border-radius:10px;background:var(--q-surface);border:1px solid var(--q-line);font:600 14px var(--sans)}.qd-checklist li::before{content:"\2713";color:var(--q-purple);font-weight:800}
@media (min-width:760px){.qd-checklist{grid-template-columns:1fr 1fr}}@media (min-width:1000px){.qd-inc{grid-template-columns:.8fr 1.4fr;gap:40px}}
.qd-files{margin-top:12px}.qd-files summary{cursor:pointer;list-style:none;font:600 13px var(--sans);color:var(--q-text-3)}.qd-files summary::-webkit-details-marker{display:none}
.qd-files ul{list-style:none;margin:8px 0 0;padding:10px 14px;background:var(--q-surface);border:1px solid var(--q-line);border-radius:10px;columns:2 240px;column-gap:24px}.qd-files li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:12.5px;color:var(--q-text-2);break-inside:avoid}
.qd-faq{display:grid;gap:10px}@media (min-width:860px){.qd-faq{grid-template-columns:1fr 1fr}}
.qd-faq details{background:var(--q-pearl);border:1px solid var(--q-line);border-radius:12px;padding:0 16px;align-self:start}
.qd-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:14px 0;font:700 15px var(--sans)}.qd-faq summary::-webkit-details-marker{display:none}.qd-faq summary::after{content:"+";color:var(--q-purple);font-size:19px}.qd-faq details[open] summary::after{content:"\2013"}
.qd-faq p{margin:0 0 14px;color:var(--q-text-2);font-size:14.5px}
.qd-meta{display:grid;gap:12px}.qd-meta-i{padding:16px;border-radius:12px;background:var(--q-surface);border:1px solid var(--q-line)}.qd-meta-i p{margin:6px 0 0;color:var(--q-text-2);font-size:14px;line-height:1.7}.qd-meta-i a{color:var(--q-purple);font-weight:700}.qd-meta-i img{vertical-align:-3px}
@media (min-width:860px){.qd-meta{grid-template-columns:repeat(3,1fr)}}
@media (max-width:699px){.qd-sec{padding:34px 0}.qd-get{padding:16px}.qd-price b{font-size:28px}.qd-thumbs span{font-size:11px}}
/* documents */
.qdoc-wrap{background:var(--q-pearl);padding:28px 0 56px}.qdoc-grid{display:grid;gap:20px}
.qdoc{background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;padding:24px;max-width:760px}.qdoc p{margin:0 0 14px;font-size:15.5px;line-height:1.7;color:var(--q-text)}
.qdoc-note{padding:12px 14px;border-radius:10px;background:var(--q-tint);color:var(--q-deep)!important;font-weight:600}
.qdoc-side nav{display:grid;gap:2px;margin-top:8px}.qdoc-side a{padding:9px 12px;border-radius:8px;font:600 14px var(--sans);color:var(--q-text-2)}.qdoc-side a:hover,.qdoc-side a.on{background:var(--q-surface);color:var(--q-purple)}
@media (min-width:1000px){.qdoc-grid{grid-template-columns:minmax(0,1fr) 220px;align-items:start}.qdoc{padding:36px 40px}}
/* search overlay in the platform language */
body.q .search-dlg{background:rgba(21,17,42,.55)}body.q .search-box{background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px}
body.q .search-field{border-bottom:1px solid var(--q-line)}body.q .search-field svg{color:var(--q-purple);stroke:var(--q-purple)}
body.q .search-body h4{color:var(--q-text-3)}body.q .sr-item:hover,body.q .sr-item.is-active{background:var(--q-pearl)}
body.q .sr-cats a{background:var(--q-pearl);border:1px solid var(--q-line);color:var(--q-text-2)}body.q .sr-cats a:hover{border-color:var(--q-purple);color:var(--q-purple)}
/* single result: wide feature card instead of one card beside empty columns */
@media (min-width:760px){.qgrid-one{grid-template-columns:1fr!important}.qgrid-one .qcard{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.qgrid-one .qcard-media{aspect-ratio:auto;min-height:380px}.qgrid-one .qcard-b{padding:28px;justify-content:center;gap:10px}.qgrid-one .qcard-t h3{font-size:24px}.qgrid-one .qcard-b p{flex:none;font-size:15.5px}.qgrid-one .qcard-act{max-width:420px}}
.qd-meta-i p img{display:inline-block;margin-right:4px}
/* gallery hero (characters, posters, covers...) */
.qd-gmain{margin:0;border-radius:12px;overflow:hidden;background:var(--q-pearl-2)}.qd-gmain img{width:100%;aspect-ratio:4/5;object-fit:contain;display:block;transition:opacity .25s ease}
@media (min-width:1000px){.qd-stage-g .qd-gmain{height:560px}.qd-stage-g .qd-gmain img{height:100%;aspect-ratio:auto}}
.qd-results-g{display:grid;gap:12px;grid-template-columns:1fr 1fr;grid-template-rows:none}
.qd-results-g .qd-r img{aspect-ratio:4/5;height:auto}.qd-results-g .qd-r-wide{grid-column:1/-1}.qd-results-g .qd-r-wide img{aspect-ratio:3/2;object-fit:contain;background:#f3f1ee}
@media (min-width:1000px){.qd-results-g{grid-template-columns:repeat(3,1fr)}.qd-results-g .qd-r0,.qd-results-g .qd-r3{grid-row:auto;grid-column:auto}.qd-results-g .qd-r-wide{grid-column:span 2}}

/* card media always the card ratio; 2 results fill the row */
.qcard-media-1{aspect-ratio:16/11}.qcard-media-1>span{height:100%}.qcard-media-1 img{height:100%;object-fit:cover;object-position:center 20%}
@media (min-width:1080px){.qgrid-two{grid-template-columns:repeat(2,1fr)}.qgrid-two .qcard-media{aspect-ratio:16/10}}

/* card media: fixed-ratio frame, images fill it (never stretch the card) */
.qcard-media{grid-template-rows:100%;overflow:hidden}.qcard-media>span{position:relative;overflow:hidden;min-height:0}.qcard-media>span>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.qcard-media-1>span>img{object-position:center 22%}

/* =====================================================================
   P — prompt marketplace: output-first cards + simple listing page
   ===================================================================== */
.pc-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.pc-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1080px){.pc-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1360px){.pc-grid{grid-template-columns:repeat(4,1fr)}}
.pc{position:relative;display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--q-ink);box-shadow:0 14px 30px -22px rgba(21,17,42,.6);transition:transform .2s var(--ease),box-shadow .2s}
.pc:hover{transform:translateY(-3px);box-shadow:0 24px 40px -24px rgba(21,17,42,.7)}
.pc-imgs{position:absolute;inset:0;display:grid;gap:2px}.pc-n2{grid-template-columns:1fr 1fr}.pc-n3{grid-template-columns:1fr 1fr 1fr}
.pc-imgs img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;transition:transform .5s var(--ease)}.pc:hover .pc-imgs img{transform:scale(1.04)}
.pc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,17,42,.35) 0%,transparent 26%,transparent 55%,rgba(21,17,42,.85) 100%);pointer-events:none}
.pc-model{position:absolute;z-index:1;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;background:rgba(21,17,42,.72);backdrop-filter:blur(6px);color:#fff;font:700 11.5px var(--sans)}.pc-model svg{width:12px;height:12px;fill:#b5a6ff}
.pc-foot{position:absolute;z-index:1;left:12px;right:12px;bottom:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;color:#fff}
.pc-foot b{font:700 14.5px/1.25 var(--sans);text-shadow:0 1px 8px rgba(0,0,0,.5)}.pc-foot em{flex:none;font:800 13.5px var(--sans);font-style:normal;padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.95);color:var(--q-text)}.pc-foot em.pc-free{background:#e6f5ee;color:var(--q-ok)}
/* listing page */
.pl-top{background:var(--q-pearl);padding:18px 0 28px}
.pl-grid{display:grid;gap:18px}
.pl-gallery{display:grid;gap:8px}
.pl-main{margin:0;position:relative;border-radius:16px;overflow:hidden;background:var(--q-ink)}.pl-main img{width:100%;aspect-ratio:4/5;object-fit:contain;display:block;background:#0f0c20;transition:opacity .25s}
.pl-main figcaption{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:7px;background:rgba(21,17,42,.8);color:#fff;font:700 12px var(--sans)}
.pl-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.pl-thumbs button{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:none}.pl-thumbs button.on{border-color:var(--q-purple)}.pl-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pl-side{display:flex;flex-direction:column;gap:12px}
.pl-model{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:var(--q-ink);color:#fff;font:700 12.5px var(--sans)}.pl-model svg{width:13px;height:13px;fill:#b5a6ff}
.pl-side h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.025em;line-height:1.08;margin:0}
.pl-by{display:flex;align-items:center;gap:8px;font:600 13.5px var(--sans);color:var(--q-text-2)}.pl-by b{color:var(--q-text)}.pl-avatar{width:26px;height:26px;border-radius:8px}.pl-avatar svg{width:15px;height:15px}
.pl-creates{margin:0;color:var(--q-text-2);font-size:15px;line-height:1.55}
.pl-buy{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;background:var(--q-surface);border:1px solid var(--q-line)}.pl-buy>b{font:800 30px var(--display);color:var(--q-text)}.pl-buy>b.pl-free{color:var(--q-ok)}
.pl-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--q-line);border:1px solid var(--q-line);border-radius:12px;overflow:hidden}
.pl-facts li{background:var(--q-surface);padding:10px 12px;display:flex;flex-direction:column}.pl-facts span{font:700 11px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--q-text-3)}.pl-facts b{font:700 14px var(--sans)}
@media (min-width:1000px){.pl-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px}.pl-gallery{grid-template-columns:1fr 92px}.pl-main img{height:620px;aspect-ratio:auto}.pl-thumbs{grid-template-columns:1fr;align-content:start}}
.pl-sec{padding:40px 0;background:var(--q-surface)}.pl-pearl{background:var(--q-pearl)}.pl-sec h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;margin:0 0 14px}
.pl-body{display:grid;gap:22px}@media (min-width:1000px){.pl-body{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px}}
.pl-prompt{position:relative;border-radius:14px;background:var(--q-ink);border:1px solid rgba(255,255,255,.06);margin-bottom:26px}
.pl-prompt pre{margin:0;padding:22px;max-height:420px;overflow:auto;white-space:pre-wrap;font:500 13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d9d5f5}
.pl-copy{position:absolute;top:12px;right:12px;height:34px}
.pl-locked pre{filter:blur(3.5px);user-select:none;max-height:170px;overflow:hidden}
.pl-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:20px;color:#fff}.pl-lock svg{width:26px;height:26px;fill:none;stroke:#cfc4ff;stroke-width:2}.pl-lock span{font-size:13px;color:rgba(255,255,255,.7);max-width:30em}
.pl-muted{color:var(--q-text-2);margin:-6px 0 12px}
.pl-vars{display:grid;gap:8px}.pl-vars>div{display:grid;grid-template-columns:minmax(120px,auto) 1fr;column-gap:14px;padding:12px 14px;border-radius:10px;background:var(--q-pearl);border:1px solid var(--q-line)}
.pl-vars b{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--q-purple)}.pl-vars span{font-size:14px}.pl-vars em{grid-column:2;font-style:normal;font-size:12.5px;color:var(--q-text-3)}
.pl-col-s{display:grid;gap:12px;align-content:start}.pl-box{padding:16px;border-radius:14px;background:var(--q-pearl);border:1px solid var(--q-line)}.pl-box h3{font-size:15px;margin:0 0 8px}.pl-box p{margin:0;color:var(--q-text-2);font-size:14px}.pl-box a{color:var(--q-purple);font-weight:700}
.pl-wall{columns:2 200px;column-gap:12px}.pl-wall figure{margin:0 0 12px;break-inside:avoid;border-radius:12px;overflow:hidden;position:relative}.pl-wall img{width:100%;display:block}.pl-wall figcaption{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:6px;background:rgba(21,17,42,.8);color:#fff;font:700 11.5px var(--sans)}
@media (min-width:1000px){.pl-wall{columns:4 220px}}
@media (max-width:699px){.pl-vars>div{grid-template-columns:1fr}.pl-vars em{grid-column:1}.pl-prompt pre{padding:18px;font-size:12.5px}}

/* ---------- homepage showcase (curated real outputs) ---------- */
.sh{position:relative;overflow:hidden;background:var(--q-ink);color:#fff}
.sh-bgs{position:absolute;inset:0}.sh-bgs img{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(40px) saturate(1.1);opacity:0;transition:opacity 1.2s ease;transform:scale(1.1)}.sh-bgs img.on{opacity:.4}
.sh::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(21,17,42,.94) 0%,rgba(21,17,42,.7) 45%,rgba(21,17,42,.35) 100%)}
.sh-in{position:relative;z-index:2;display:grid;gap:22px;padding:26px 20px 30px}
.sh-copy h1{margin:14px 0 0;font-size:clamp(32px,4.4vw,58px);line-height:1.02;letter-spacing:-.035em;color:#fff}.sh-copy h1 span{color:#b5a6ff}
.sh-copy p{margin:12px 0 0;max-width:30em;font-size:16px;color:rgba(255,255,255,.78)}
.sh-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.sh-stage{position:relative;aspect-ratio:4/5;max-height:560px;width:100%}
.sh-slide{position:absolute;inset:0;border-radius:18px;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.sh-slide.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.sh-slide img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;transform:scale(1.03);transition:transform 7s ease}.sh-slide.on img{transform:scale(1)}
.sh-info{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:rgba(21,17,42,.72);backdrop-filter:blur(10px)}
.sh-meta{display:flex;gap:6px}.sh-meta em{font:700 11px var(--sans);font-style:normal;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.12);color:#e6e2ff}
.sh-info b{font:700 17px var(--sans);color:#fff}.sh-price{font:700 13px var(--sans);color:#cfc4ff}
.sh-nav{position:absolute;z-index:3;top:12px;right:12px;display:flex;align-items:center;gap:8px;padding:5px;border-radius:999px;background:rgba(21,17,42,.6);backdrop-filter:blur(8px)}
.sh-btn{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.14);display:grid;place-content:center;cursor:pointer}.sh-btn svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.sh-btn:hover{background:rgba(255,255,255,.26)}
.sh-dots{display:flex;gap:6px}.sh-dots button{width:8px;height:8px;border-radius:4px;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:width .3s,background .3s}.sh-dots button.on{width:22px;background:#fff}
@media (min-width:1000px){.sh-in{grid-template-columns:minmax(0,1fr) 440px;gap:48px;align-items:center;padding:40px 32px 44px}.sh-stage{height:540px;aspect-ratio:auto}}
@media (max-width:699px){.sh-in{padding:20px 20px 24px}.sh-copy h1{font-size:32px}.sh-copy p{font-size:15px}.sh-act{flex-direction:column}.sh-act .qb{width:100%}.sh-stage{max-height:none}.sh-info b{font-size:16px}}
@media (prefers-reduced-motion:reduce){.sh-slide,.sh-bgs img,.sh-slide img{transition:none}}
.qh-one{grid-template-columns:1fr}.qh-one img{aspect-ratio:1}
/* hero v2: prompt -> result is understood at a glance */
.sh-how{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.sh-how li{display:flex;align-items:center;gap:12px;font:600 16px var(--sans);color:rgba(255,255,255,.9)}
.sh-how b{width:30px;height:30px;border-radius:9px;background:rgba(181,166,255,.18);color:#cfc4ff;display:grid;place-content:center;font:800 14px var(--sans)}
.sh-tag{position:absolute;z-index:2;left:12px;top:12px;padding:5px 10px;border-radius:7px;background:#fff;color:var(--q-text);font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.sh-info{gap:10px;padding:14px;background:rgba(15,12,32,.86)}
.sh-prompt{display:block;font:500 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e1dcff;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
.sh-prompt i{display:block;font:800 10.5px var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#b5a6ff;margin-bottom:4px}
.sh-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.sh-row b{display:block;font:700 15px var(--sans);color:#fff;margin-bottom:4px}
.sh-get{flex:none;padding:8px 12px;border-radius:9px;background:var(--q-purple);color:#fff;font:700 13px var(--sans)}
@media (min-width:1000px){.sh-in{grid-template-columns:minmax(0,1fr) 480px}.sh-stage{height:600px}}
@media (max-width:699px){.sh-how li{font-size:15px}.sh-prompt{font-size:11.5px}.sh-get{padding:7px 10px;font-size:12px}}
/* listing view: no black letterbox bars */
.pl-main{background:var(--q-pearl-2);border:1px solid var(--q-line)}.pl-main img{background:var(--q-pearl-2)}
@media (min-width:1000px){.pl-main img{height:600px}}

/* =====================================================================
   V — visual marketplace: the assets are the interface (80% art / 20% UI)
   ===================================================================== */
html.no-scroll{overflow:hidden}
/* homepage head: short positioning + search + category chips */
.vh{background:var(--q-ink);color:#fff;padding:26px 0 22px}
.vh-in{display:grid;gap:14px}
.vh h1{margin:0;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1.05;color:#fff}.vh-copy p{margin:8px 0 0;color:rgba(255,255,255,.7);font-size:15.5px;max-width:40em}
.vh-search{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:12px;background:#fff;max-width:620px}.vh-search svg{width:20px;height:20px;fill:none;stroke:var(--q-purple);stroke-width:2.2;flex:none}.vh-search input{flex:1;border:0;outline:0;font:500 15.5px var(--sans);color:var(--q-text);background:none;min-width:0}
.vh-cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.vh-cats::-webkit-scrollbar{display:none}
.vh-cats a{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font:600 13.5px var(--sans)}.vh-cats a:hover,.vh-cats a.on{background:#fff;color:var(--q-text)}.vh-cats img{width:22px;height:19px;object-fit:contain}
@media (min-width:1000px){.vh-in{grid-template-columns:minmax(0,1fr) 480px;align-items:center;column-gap:40px}.vh-cats{grid-column:1/-1}}
/* the wall: masonry that keeps each creation's own proportions */
.vw{padding:18px 0 34px;background:var(--q-pearl)}
.wall{columns:2 150px;column-gap:10px}
@media (min-width:700px){.wall{columns:3 220px;column-gap:14px}}@media (min-width:1100px){.wall{columns:4 240px}}
.at{position:relative;display:block;break-inside:avoid;margin:0 0 10px;border-radius:14px;overflow:hidden;background:var(--q-pearl-2);isolation:isolate}
@media (min-width:700px){.at{margin-bottom:14px}}
.at img{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
.at::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(21,17,42,.78));opacity:0;transition:opacity .25s}
.at-ov{position:absolute;z-index:1;left:12px;right:12px;bottom:11px;display:flex;flex-direction:column;gap:2px;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.at-ov b{font:700 15px/1.25 var(--sans)}.at-ov span{font:600 12px var(--sans);color:rgba(255,255,255,.78)}
.at-price{position:absolute;z-index:1;top:10px;right:10px;padding:3px 9px;border-radius:7px;background:rgba(255,255,255,.95);font:800 12px var(--sans);color:var(--q-text)}.at-price.is-free{color:var(--q-ok)}
.at-count{position:absolute;z-index:1;top:10px;left:10px;padding:3px 8px;border-radius:7px;background:rgba(21,17,42,.72);color:#fff;font:700 11px var(--sans)}
@media (hover:hover){.at:hover img{transform:scale(1.03)}.at:hover::after,.at:focus-visible::after{opacity:1}.at:hover .at-ov,.at:focus-visible .at-ov{opacity:1;transform:none}}
@media (hover:none){.at::after{opacity:1}.at-ov{opacity:1;transform:none}.at-ov span{display:none}.at-ov b{font-size:13px}}
.vw-more{display:flex;justify-content:center;margin-top:14px}
.vstrip{background:var(--q-surface);border-top:1px solid var(--q-line)}.vstrip-in{display:grid;gap:12px;padding:22px 20px}
.vstrip-in>div{display:flex;gap:12px;align-items:center}.vstrip-in b{width:32px;height:32px;border-radius:9px;background:var(--q-tint);color:var(--q-purple);display:grid;place-content:center;font:800 14px var(--sans);flex:none}.vstrip-in strong{display:block;font:700 14.5px var(--sans);color:var(--q-text)}.vstrip-in span{font-size:13.5px;color:var(--q-text-2)}
@media (min-width:860px){.vstrip-in{grid-template-columns:repeat(3,1fr);padding:24px 32px}}
/* discover / category: slim head, one filter row, image grid */
.dh{background:var(--q-surface);border-bottom:1px solid var(--q-line);padding:16px 0}
.dh-in{display:grid;gap:12px}
.dh-t{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.dh-t img{width:40px;height:35px;object-fit:contain}.dh-t h1{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:0}.dh-t span{font:600 14px var(--sans);color:var(--q-text-3)}.dh-t a{color:var(--q-purple);font-weight:800;margin-left:4px}
.dh-f{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dh-f select,.dh-f input{width:100%;height:40px;padding:0 12px;border:1px solid var(--q-line-2);border-radius:9px;background:var(--q-surface);font:500 14px var(--sans);color:var(--q-text);appearance:none;-webkit-appearance:none}
.dh-f select{padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5872' stroke-width='2.2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:15px}
.dh-s{grid-column:1/-1;position:relative;display:flex;align-items:center}.dh-s svg{position:absolute;left:12px;width:17px;height:17px;fill:none;stroke:var(--q-purple);stroke-width:2.2}.dh-s input{padding-left:36px}
@media (min-width:900px){.dh-in{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:24px}.dh-f{grid-template-columns:minmax(0,1fr) 190px 150px;justify-self:end;width:min(620px,100%)}.dh-s{grid-column:auto}}
.dl{padding:18px 0 40px;background:var(--q-pearl)}
/* listing: gallery first */
.lg{background:var(--q-pearl);padding:16px 0 26px}
.lg-in{display:grid;gap:18px}
.lg-gal{display:grid;gap:10px}
.lg-main{position:relative;display:block;padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--q-pearl-2);cursor:zoom-in}
.lg-main img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;margin:0 auto}
.lg-cap{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:7px;background:rgba(21,17,42,.78);color:#fff;font:700 12.5px var(--sans)}
.lg-zoom{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:10px;background:rgba(21,17,42,.7);display:grid;place-content:center}.lg-zoom svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.lg-more{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.lg-more::-webkit-scrollbar{display:none}
.lg-t{position:relative;flex:0 0 38%;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--q-pearl-2);cursor:zoom-in}
.lg-t img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .4s var(--ease)}.lg-t:hover img{transform:scale(1.04)}
.lg-t span{position:absolute;left:8px;bottom:8px;right:8px;padding:3px 8px;border-radius:6px;background:rgba(21,17,42,.75);color:#fff;font:700 11px var(--sans);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-src span{background:rgba(255,255,255,.92);color:var(--q-text)}
@media (min-width:1000px){.lg-in{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:start}.lg-gal{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}.lg-main img{max-height:680px}.lg-more{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.lg-t{flex:none}}
.lg-info{display:flex;flex-direction:column;gap:12px}
.lg-info h1{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.025em;line-height:1.08;margin:0}
.lg-creates{margin:0;font-size:16.5px;line-height:1.5;color:var(--q-text)}
.lg-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:600 13px var(--sans);color:var(--q-text-2)}.lg-meta span{display:inline-flex;align-items:center;gap:5px}.lg-meta svg{width:13px;height:13px;fill:var(--q-purple)}
.lg-buy{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--q-line);border-bottom:1px solid var(--q-line)}.lg-buy b{font:800 28px var(--display)}.lg-buy b.is-free{color:var(--q-ok)}.lg-buy .qb{flex:1}
.lg-vars div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.lg-vars em{font-style:normal;font:600 13px var(--sans);padding:5px 10px;border-radius:8px;background:var(--q-surface);border:1px solid var(--q-line);color:var(--q-text)}
@media (min-width:1000px){.lg-info{position:sticky;top:84px}}
.lp{background:var(--q-surface);padding:36px 0}.lp-in{display:grid;gap:26px}.lp h2,.lr h2{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;margin:0 0 12px}
.lp-dl a,.lp-note a{color:var(--q-purple);font-weight:700}.lp-note{margin-top:12px;font-size:13px;color:var(--q-text-3)}
@media (min-width:1000px){.lp-in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px}}
.lr{background:var(--q-pearl);padding:34px 0 44px}
/* quick view */
.qv{position:fixed;inset:0;z-index:120;background:rgba(15,12,32,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.qv[hidden]{display:none}
.qv-box{position:relative;width:min(1080px,100%);max-height:92vh;overflow:auto;background:var(--q-surface);border-radius:18px;display:grid;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.qv-x,.lbx-x{position:absolute;z-index:3;top:10px;right:10px;width:40px;height:40px;border-radius:12px;border:0;background:rgba(21,17,42,.75);display:grid;place-content:center;cursor:pointer}.qv-x svg,.lbx-x svg,.lbx-nav svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.qv-media{background:#0f0c20;display:flex;flex-direction:column}.qv-media>img{width:100%;max-height:62vh;object-fit:contain;display:block}
.qv-thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto}.qv-thumbs button{flex:0 0 64px;height:64px;padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;cursor:pointer;background:none;opacity:.7}.qv-thumbs button.on{border-color:#b5a6ff;opacity:1}.qv-thumbs img{width:100%;height:100%;object-fit:cover}
.qv-info{padding:20px;display:flex;flex-direction:column;gap:10px}.qv-cat{font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--q-purple)}.qv-info h2{font-size:24px;margin:0;letter-spacing:-.02em}.qv-info p{margin:0;color:var(--q-text-2);font-size:15px}
.qv-meta{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--q-line);font:600 13.5px var(--sans);color:var(--q-text-2)}.qv-meta b{font:800 22px var(--display);color:var(--q-text)}.qv-meta b.is-free{color:var(--q-ok)}
@media (min-width:900px){.qv-box{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);overflow:hidden}.qv-media>img{height:min(72vh,680px);max-height:none}.qv-info{justify-content:center;padding:32px}}
/* fullscreen viewer */
.lbx{position:fixed;inset:0;z-index:130;background:#0b0918;display:grid;grid-template-rows:1fr auto;align-items:center}
.lbx[hidden]{display:none}
.lbx-stage{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 60px 8px;overflow:hidden}
.lbx-stage img{max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;cursor:zoom-in;transition:transform .3s ease}.lbx-stage img.zoom{transform:scale(2.2);cursor:zoom-out}
.lbx-stage figcaption{margin-top:10px;font:600 13px var(--sans);color:rgba(255,255,255,.75);white-space:pre}
.lbx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:grid;place-content:center;cursor:pointer}.lbx-nav:hover{background:rgba(255,255,255,.2)}.lbx-prev{left:14px}.lbx-next{right:14px}
.lbx-strip{display:flex;gap:8px;justify-content:center;padding:10px 12px calc(14px + env(safe-area-inset-bottom));overflow-x:auto}.lbx-strip button{flex:0 0 60px;height:60px;padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;opacity:.55;cursor:pointer;background:none}.lbx-strip button.on{border-color:#fff;opacity:1}.lbx-strip img{width:100%;height:100%;object-fit:cover}
@media (max-width:699px){.lbx-stage{padding:56px 8px 6px}.lbx-nav{display:none}.lbx-stage img{max-height:calc(100vh - 160px)}}

/* listing: supporting images fill the main image height (no empty corner) */
@media (min-width:1000px){.lg-gal{align-items:stretch}.lg-more{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);height:100%;max-height:680px}.lg-t img{height:100%;aspect-ratio:auto}.lg-main{align-self:start}}

/* ===== PT Studio: accounts, generator, pricing, header account ===== */
.qh-signin{font:600 14px var(--sans);color:rgba(255,255,255,.85);padding:0 10px;display:none}.qh-signin:hover{color:#fff}
.qh-credits{display:none;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;background:rgba(181,166,255,.14);color:#e6e0ff;font:700 13.5px var(--sans)}.qh-credits svg{width:16px;height:16px;fill:none;stroke:#cfc4ff;stroke-width:2}
@media (min-width:1000px){.qh-signin,.qh-credits{display:inline-flex;align-items:center}}
.qv-prompt{padding:12px;border-radius:10px;background:var(--q-pearl);border:1px solid var(--q-line)}.qv-prompt span{font:800 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--q-purple)}.qv-prompt p{margin:6px 0 0;font:500 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--q-text);max-height:120px;overflow:auto}
.st-page{background:var(--q-pearl);padding:28px 0 56px;min-height:60vh}
.st-muted{color:var(--q-text-2)}.st-h2{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;margin:32px 0 14px}
.st-card{background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px}.st-card h3{margin:0;font-size:17px}.st-card p{margin:0;font-size:14px}.st-card .qb{align-self:flex-start;margin-top:4px}
/* auth */
.st-auth{background:radial-gradient(900px 500px at 50% 0%,var(--q-tint),var(--q-pearl) 70%);min-height:calc(100vh - 64px);display:grid;place-items:center;padding:32px 16px}
.st-auth-card{width:min(420px,100%);background:var(--q-surface);border:1px solid var(--q-line);border-radius:18px;padding:28px;box-shadow:0 30px 60px -40px rgba(21,17,42,.5)}
.st-auth-brand{color:var(--q-text);margin-bottom:18px}.st-auth-brand .qh-word{color:var(--q-text)}.st-auth-brand .qh-word b{color:var(--q-purple)}
.st-auth-card h1{font-size:26px;margin:0 0 6px;letter-spacing:-.02em}.st-auth-card>p{margin:0 0 16px;font-size:14.5px}
.st-form{display:grid;gap:12px}.st-form label{display:grid;gap:5px;font:600 13.5px var(--sans);color:var(--q-text)}
.st-form input[type=email],.st-form input[type=password],.st-form input:not([type]),.st-panel textarea,.st-panel select{width:100%;height:44px;padding:0 12px;border:1px solid var(--q-line-2);border-radius:10px;font:500 15px var(--sans);color:var(--q-text);background:var(--q-surface)}
.st-form input:focus,.st-panel textarea:focus,.st-panel select:focus{outline:0;border-color:var(--q-purple);box-shadow:0 0 0 3px var(--q-focus)}
.st-check{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:8px;font-weight:500!important;color:var(--q-text-2)!important}.st-check a,.st-switch a,.st-from a,.st-note a{color:var(--q-purple);font-weight:700}
.st-err{padding:10px 12px;border-radius:10px;background:#fdecef;color:var(--q-err);font:600 14px var(--sans);margin-bottom:12px}
.st-switch{margin:16px 0 0;text-align:center;font-size:14px;color:var(--q-text-2)}
/* account */
.st-acc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}.st-acc-head h1{font-size:clamp(26px,3vw,34px);margin:6px 0 4px;letter-spacing:-.02em}.st-acc-head p{margin:0}
.st-acc-grid{display:grid;gap:12px}@media (min-width:860px){.st-acc-grid{grid-template-columns:1fr 1fr 1fr}}
.st-bal b{font:800 40px var(--display);color:var(--q-text);line-height:1}
.st-hist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* generator */
.st-gen{display:grid;gap:18px}@media (min-width:1000px){.st-gen{grid-template-columns:420px minmax(0,1fr);align-items:start}}
.st-panel{background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.st-panel h1{font-size:26px;margin:4px 0 0;letter-spacing:-.02em}.st-from{margin:0;font-size:14px;color:var(--q-text-2)}
.st-lbl{display:grid;gap:6px;font:700 13px var(--sans);color:var(--q-text)}
.st-panel textarea{height:auto;min-height:150px;padding:12px;line-height:1.5;resize:vertical}
.st-panel select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5872' stroke-width='2.2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:15px;padding-right:32px}
.st-panel input[type=file]{font:500 13px var(--sans);color:var(--q-text-3)}
.st-models{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.st-model{position:relative;cursor:pointer}.st-model input{position:absolute;opacity:0}.st-model span{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border:1px solid var(--q-line);border-radius:10px;background:var(--q-pearl);transition:border-color .15s,background .15s}
.st-model b{font:700 12.5px var(--sans);color:var(--q-text)}.st-model em{font:700 11.5px var(--sans);font-style:normal;color:var(--q-purple)}
.st-model input:checked+span{border-color:var(--q-purple);background:var(--q-tint);box-shadow:0 0 0 1px var(--q-purple)}.st-model input:focus-visible+span{outline:3px solid var(--q-focus)}
.st-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-cost{display:flex;align-items:baseline;gap:10px;padding:12px 0 2px;border-top:1px solid var(--q-line);font:600 14px var(--sans)}.st-cost b{font:800 22px var(--display)}.st-cost .st-muted{margin-left:auto;font-size:13px}
.st-note{margin:0;font-size:13px;color:var(--q-text-3)}
.st-canvas{min-height:520px;border-radius:16px;border:1px dashed var(--q-line-2);background:var(--q-surface);display:grid;place-items:center;padding:24px}
.st-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:var(--q-text-2)}.st-empty svg{width:48px;height:48px;fill:none;stroke:var(--q-purple);stroke-width:1.6}.st-empty b{font:700 17px var(--sans);color:var(--q-text)}
/* pricing */
.st-price-head{text-align:center;max-width:680px;margin:0 auto 8px}.st-price-head h1{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em;margin:8px 0}
.st-plans{display:grid;gap:14px}@media (min-width:860px){.st-plans{grid-template-columns:repeat(3,1fr)}}
.st-plan{position:relative;background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px}.st-plan h3{margin:0;font-size:18px}
.st-plan-hot{border-color:var(--q-purple);box-shadow:0 0 0 1px var(--q-purple),0 24px 40px -30px rgba(91,63,240,.6)}
.st-tag{position:absolute;top:-11px;left:22px;padding:3px 10px;border-radius:999px;background:var(--q-purple);color:#fff;font:700 11.5px var(--sans)}
.st-amt b{font:800 36px var(--display)}.st-amt span{color:var(--q-text-2);font-weight:600}.st-plan p{margin:0}
.st-plan ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:5px}.st-plan li{font-size:14px;display:flex;gap:7px}.st-plan li::before{content:"\2713";color:var(--q-ok);font-weight:800}
.st-packs{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}@media (min-width:860px){.st-packs{grid-template-columns:repeat(4,1fr)}}
.st-pack{background:var(--q-surface);border:1px solid var(--q-line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:2px;text-align:center}.st-pack>b{font:800 26px var(--display)}.st-pack strong{font:800 18px var(--sans);margin:8px 0}
.st-costs{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.st-costs div{display:flex;justify-content:space-between;padding:12px 14px;border-radius:10px;background:var(--q-surface);border:1px solid var(--q-line);font-size:14px}.st-costs b{color:var(--q-purple)}

/* ===== sign-in popup ===== */
.am{position:fixed;inset:0;z-index:140;background:rgba(15,12,32,.66);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.am[hidden]{display:none}
.am-box{position:relative;width:min(420px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--q-surface);border-radius:20px;padding:28px 26px 22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);text-align:center;animation:am-in .22s var(--ease)}
@keyframes am-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.am-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:10px;background:var(--q-pearl);display:grid;place-content:center;cursor:pointer}.am-x svg{width:18px;height:18px;fill:none;stroke:var(--q-text-2);stroke-width:2.4;stroke-linecap:round}.am-x:hover{background:var(--q-line)}
.am-mark{width:46px;height:46px;border-radius:13px;margin:0 auto 12px}.am-mark svg{width:26px;height:26px}
.am-box h2{margin:0;font-size:24px;letter-spacing:-.02em}.am-sub{margin:6px 0 18px;color:var(--q-text-2);font-size:14.5px}
.am-google{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border:1px solid var(--q-line-2);border-radius:11px;font:700 15px var(--sans);color:var(--q-text);background:var(--q-surface)}.am-google svg{width:20px;height:20px}.am-google:hover{background:var(--q-pearl)}
.am-or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--q-text-3);font:600 12.5px var(--sans)}.am-or::before,.am-or::after{content:"";flex:1;height:1px;background:var(--q-line)}
.am-form{display:grid;gap:11px;text-align:left}.am-form label{display:grid;gap:5px;font:600 13.5px var(--sans)}
.am-form input[type=email],.am-form input[type=password],.am-form input[name=name]{height:46px;padding:0 13px;border:1px solid var(--q-line-2);border-radius:11px;font:500 15px var(--sans);color:var(--q-text);background:var(--q-surface)}
.am-form input:focus{outline:0;border-color:var(--q-purple);box-shadow:0 0 0 3px var(--q-focus)}
.am-check{display:flex!important;align-items:flex-start;gap:8px;font-weight:500!important;color:var(--q-text-2)}.am-check a{color:var(--q-purple);font-weight:700}
.am-err{margin:0;padding:10px 12px;border-radius:10px;background:#fdecef;color:var(--q-err);font:600 13.5px var(--sans)}
.am-switch{margin:16px 0 0;font-size:14px;color:var(--q-text-2)}.am-switch button{border:0;background:none;padding:0;color:var(--q-purple);font:700 14px var(--sans);cursor:pointer}
@media (max-width:699px){.am{place-items:end center;padding:0}.am-box{width:100%;border-radius:20px 20px 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom));animation:am-up .25s var(--ease)}@keyframes am-up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}}

.am-form [hidden],.am [hidden]{display:none!important}
/* studio v2: media switch, model blurbs, video soon */
.st-media{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--q-pearl-2)}
.st-media button{height:38px;border:0;border-radius:9px;background:none;font:700 14px var(--sans);color:var(--q-text-2);cursor:pointer}.st-media button.on{background:var(--q-surface);color:var(--q-text);box-shadow:0 2px 8px -4px rgba(21,17,42,.35)}
.st-model small{font:500 11.5px var(--sans);color:var(--q-text-3);line-height:1.3}
.st-soon{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:12px;background:var(--q-pearl);border:1px dashed var(--q-line-2);text-align:center}.st-soon b{font:700 15px var(--sans)}.st-soon span{font-size:13.5px;color:var(--q-text-2)}
[data-pane][hidden]{display:none!important}

/* =====================================================================
   APP SHELL - sidebar + one rounded content card on a purple/pearl gradient + floating dock
   ===================================================================== */
body.app{background:#f3f0fb;min-height:100vh}
body.app::before{content:"";position:fixed;inset:-20%;z-index:-1;background:
  radial-gradient(40% 35% at 15% 20%,rgba(181,166,255,.55),transparent 70%),
  radial-gradient(35% 30% at 85% 15%,rgba(255,214,231,.55),transparent 70%),
  radial-gradient(45% 40% at 70% 85%,rgba(196,228,255,.5),transparent 70%),
  radial-gradient(40% 35% at 20% 90%,rgba(247,245,241,.9),transparent 70%);animation:ap-drift 40s ease-in-out infinite alternate}
@keyframes ap-drift{to{transform:translate(3%,-2%) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){body.app::before{animation:none}}
.ap{min-height:100vh}
.ap-side{position:fixed;top:0;left:0;bottom:0;width:248px;display:flex;flex-direction:column;gap:14px;padding:18px 14px 14px;overflow-y:auto;scrollbar-width:none}
.ap-side::-webkit-scrollbar{display:none}
.ap-brand{display:inline-flex;align-items:center;gap:10px;color:var(--q-text);padding:0 6px}
.ap-word{font:800 19px var(--display);letter-spacing:-.02em;color:var(--q-text)}.ap-word b{color:var(--q-purple)}
.ap-nav{display:grid;gap:2px}
.ap-nav a,.ap-nav button{display:flex;align-items:center;gap:11px;height:40px;padding:0 10px;border:0;border-radius:11px;background:none;font:600 14.5px var(--sans);color:var(--q-text);cursor:pointer;text-align:left;width:100%}
.ap-nav svg,.ap-dock svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ap-nav a:hover,.ap-nav button:hover{background:rgba(255,255,255,.6)}.ap-nav a.on{background:#fff;box-shadow:0 2px 10px -6px rgba(21,17,42,.35)}
.ap-nav kbd{margin-left:auto;font:600 11px var(--sans);color:var(--q-text-3);background:rgba(255,255,255,.7);border:1px solid var(--q-line);border-radius:6px;padding:1px 6px}
.ap-tags summary{list-style:none;cursor:pointer;font:700 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--q-text-3);padding:4px 10px}.ap-tags summary::-webkit-details-marker{display:none}
.ap-tags summary::after{content:"\25BE";margin-left:6px}.ap-tags:not([open]) summary::after{content:"\25B8"}
.ap-tags div{display:grid;gap:1px;margin-top:4px}
.ap-tags a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:10px;font:600 13.5px var(--sans);color:var(--q-text-2)}.ap-tags a:hover{background:rgba(255,255,255,.6);color:var(--q-text)}.ap-tags a.on{background:#fff;color:var(--q-text)}
.ap-tags img{width:22px;height:19px;object-fit:contain}.ap-tags small{margin-left:auto;font-size:11.5px;color:var(--q-text-3)}
.ap-free{width:22px;height:19px;display:grid;place-content:center;border-radius:6px;background:#e6f5ee;color:var(--q-ok);font:800 11px var(--sans)}
.ap-bottom{margin-top:auto;display:grid;gap:8px}
.ap-user{display:flex;align-items:center;gap:10px;padding:6px;border-radius:12px;color:var(--q-text);font:600 14px var(--sans)}.ap-user:hover{background:rgba(255,255,255,.6)}
.ap-av{width:32px;height:32px;border-radius:50%;background:var(--q-purple);color:#fff;display:grid;place-content:center;font:800 14px var(--sans)}
.ap-credits{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 8px 0 16px;border-radius:999px;background:var(--q-ink);color:#fff;font:700 14px var(--sans)}
.ap-credits b{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:800}.ap-credits svg{width:14px;height:14px;fill:#ffd23f}
.ap-credits:hover{background:#000}
.ap-signin{text-align:center;font:600 14px var(--sans);color:var(--q-text-2);padding:6px}.ap-signin:hover{color:var(--q-purple)}
.ap-legal{display:flex;flex-wrap:wrap;gap:4px 12px;padding:4px 8px 0}.ap-legal a{font:500 12px var(--sans);color:var(--q-text-3)}.ap-legal a:hover{color:var(--q-text)}
.ap-main{margin-left:248px;padding:12px 12px 12px 0}
.ap-card{position:relative;min-height:calc(100vh - 24px);background:var(--q-surface);border-radius:24px;overflow:clip;box-shadow:0 20px 60px -40px rgba(40,30,110,.35),0 0 0 1px rgba(255,255,255,.6)}
.ap-top{display:none}
.ap-ib{width:40px;height:40px;border-radius:11px;border:1px solid var(--q-line);background:var(--q-surface);display:grid;place-content:center;cursor:pointer}.ap-ib svg{width:19px;height:19px;fill:none;stroke:var(--q-text);stroke-width:2.1;stroke-linecap:round}
.ap-dock{position:fixed;z-index:70;left:calc(50% + 124px);bottom:18px;transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:18px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.8);box-shadow:0 18px 40px -20px rgba(21,17,42,.45)}
.ap-dock a,.ap-dock button{width:44px;height:44px;border:0;border-radius:13px;background:none;display:grid;place-content:center;color:var(--q-text-2);cursor:pointer;transition:background .15s,color .15s}
.ap-dock a:hover,.ap-dock button:hover{background:rgba(255,255,255,.9);color:var(--q-text)}.ap-dock a.on{color:var(--q-purple);background:#fff}
.ap-dock-gen{background:var(--q-purple)!important;color:#fff!important}.ap-dock-gen:hover{background:var(--q-purple-h)!important}
/* sticky elements used to sit under the old 64px header */
.app .qd-tabs{top:0}.app .lg-info{top:16px}.app .qd-sec{scroll-margin-top:60px}
/* pages were full-bleed; inside the card they keep their own backgrounds, with card-friendly bottom space for the dock */
.app main{padding-bottom:84px}
@media (max-width:999px){
  .ap-side{display:none}.ap-main{margin-left:0;padding:0}
  .ap-card{border-radius:0;min-height:100vh;box-shadow:none}
  .ap-top{display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 14px;position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--q-line)}
  .ap-top-r{display:flex;align-items:center;gap:8px}.ap-top-cta{height:38px;padding:0 14px}
  .ap-credits-sm{height:38px;padding:0 4px 0 4px}.ap-credits-sm b{background:none}
  .ap-dock{left:50%;bottom:calc(12px + env(safe-area-inset-bottom))}
  .app .qd-tabs{top:58px}
}
.app .qs .qs-top{background:var(--q-surface);border-bottom:1px solid var(--q-line)}

/* ===== Gallery feed (home) ===== */
.gf{padding:0 18px 18px}
.gf-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 12px;background:linear-gradient(180deg,#fff 80%,rgba(255,255,255,0))}
.gf-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.gf-tabs::-webkit-scrollbar{display:none}
.gf-tabs button,.gf-sort button{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--q-line);background:var(--q-surface);font:600 13.5px var(--sans);color:var(--q-text-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.gf-tabs button svg{width:14px;height:14px;fill:var(--q-purple)}
.gf-tabs button.on,.gf-sort button.on{background:var(--q-ink);border-color:var(--q-ink);color:#fff}.gf-tabs button.on svg{fill:#b5a6ff}
.gf-tabs button:hover:not(.on),.gf-sort button:hover:not(.on){border-color:var(--q-line-2);color:var(--q-text)}
.gf-right{display:flex;align-items:center;gap:8px}.gf-sort{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--q-pearl-2)}.gf-sort button{height:30px;border:0;background:none}
.gf-search{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--q-line);background:var(--q-surface);font:600 13.5px var(--sans);color:var(--q-text-2);cursor:pointer}.gf-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.gf-grid{columns:4 220px;column-gap:12px}
.gc{position:relative;break-inside:avoid;margin:0 0 12px;border-radius:14px;overflow:hidden;background:var(--q-pearl-2);isolation:isolate}
.gc[hidden]{display:none}
.gc-link{display:block}.gc-link img{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
.gc-ov{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;flex-direction:column;gap:8px;padding:40px 12px 12px;background:linear-gradient(180deg,transparent,rgba(12,10,26,.82));opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;pointer-events:none}
.gc-prompt{margin:0;font:500 12.5px/1.45 var(--sans);color:rgba(255,255,255,.92);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gc-by{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--sans);color:#fff}
.gc-av{width:22px;height:22px;border-radius:50%;background:var(--q-purple);color:#fff;display:inline-grid;place-content:center;font:800 11px var(--sans);flex:none}
.gc-use{pointer-events:auto;height:30px;padding:0 12px;border-radius:999px;background:#fff;color:var(--q-text);font:700 12.5px var(--sans);display:inline-flex;align-items:center}.gc-use:hover{background:var(--q-tint)}
.gc-price{position:absolute;z-index:1;top:10px;right:10px;padding:3px 9px;border-radius:7px;background:rgba(255,255,255,.95);font:800 12px var(--sans)}
@media (hover:hover){.gc:hover .gc-ov,.gc:focus-within .gc-ov{opacity:1;transform:none}.gc:hover .gc-link img{transform:scale(1.03)}}
@media (max-width:999px){.gf{padding:0 12px 12px}.gf-bar{top:58px}.gf-right .gf-search span{display:none}}
@media (max-width:699px){.gf-grid{columns:2 140px;column-gap:8px}.gc{margin-bottom:8px;border-radius:12px}.gf-bar{flex-wrap:wrap}.gf-right{width:100%;justify-content:space-between}}
/* ===== Creation detail overlay ===== */
.dv{position:fixed;inset:0;z-index:150;display:grid;grid-template-columns:minmax(0,1fr) 440px;background:#0b0918}
.dv[hidden]{display:none}
.dv-img{position:relative;overflow:hidden;display:grid;place-items:center;min-height:0}
.dv-bg{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);object-fit:cover;filter:blur(48px) saturate(1.2);opacity:.55;transform:scale(1.1)}
.dv-main{position:relative;max-width:calc(100% - 64px);max-height:calc(100vh - 64px);object-fit:contain;border-radius:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.dv-tools{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:2}
.dv-btn{height:38px;min-width:38px;padding:0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:600 12px var(--sans)}
.dv-btn svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.dv-btn:hover{background:rgba(255,255,255,.26)}
.dv-x span{opacity:.75}
.dv-info{display:flex;flex-direction:column;min-height:0;background:var(--q-surface)}
.dv-scroll{flex:1;overflow-y:auto;padding:22px 22px 12px;display:flex;flex-direction:column;gap:14px}
.dv-head{display:flex;align-items:center;gap:10px}.dv-av{width:36px;height:36px;font-size:14px}.dv-head b{display:block;font:700 14.5px var(--sans)}.dv-head small{font:500 12.5px var(--sans);color:var(--q-text-3)}
.dv-model{margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--q-tint);color:var(--q-deep);font:700 12px var(--sans);white-space:nowrap}
.dv-info h2{margin:0;font-size:21px;letter-spacing:-.02em}
.dv-actions{display:flex;gap:8px}
.dv-act{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--q-line);background:var(--q-surface);font:600 13.5px var(--sans);color:var(--q-text);cursor:pointer}.dv-act:hover{border-color:var(--q-purple);color:var(--q-purple)}
.dv-act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dv-act[hidden]{display:none}
.dv-k{display:block;font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--q-text-3);margin-bottom:6px}
.dv-prompt,.dv-locked{padding:14px;border-radius:14px;background:var(--q-pearl);border:1px solid var(--q-line)}.dv-prompt[hidden],.dv-locked[hidden]{display:none}
.dv-ptext{margin:0;font:500 13.5px/1.6 var(--sans);color:var(--q-text);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.dv-ptext.open{display:block;-webkit-line-clamp:unset}
.dv-more{margin-top:6px;border:0;background:none;padding:0;font:700 13px var(--sans);color:var(--q-purple);cursor:pointer}.dv-more[hidden]{display:none}
.dv-locked p{margin:0;font-size:14px;color:var(--q-text-2)}
.dv-related h3{margin:6px 0 10px;font-size:16px}
.dv-rgrid{columns:2;column-gap:8px}.dv-r{display:block;width:100%;margin:0 0 8px;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--q-pearl-2);break-inside:avoid}.dv-r img{display:block;width:100%;transition:transform .4s var(--ease)}.dv-r:hover img{transform:scale(1.04)}
.dv-foot{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--q-line);background:var(--q-surface)}.dv-foot .qb[hidden]{display:none}
.dv-ghost{position:fixed;z-index:160;object-fit:cover;border-radius:14px;pointer-events:none;will-change:transform}
@media (max-width:999px){
  .dv{display:block;overflow-y:auto;background:var(--q-surface)}
  .dv-img{min-height:auto;padding:0;background:#0b0918}.dv-main{max-width:100%;max-height:72vh;border-radius:0;margin:0 auto;display:block}
  .dv-info{min-height:0}.dv-scroll{overflow:visible;padding:18px}
  .dv-foot{position:sticky;bottom:0}
}

/* detail buttons stay visible on light images; no "esc" label on touch screens */
.dv-btn{background:rgba(15,12,32,.55)}.dv-btn:hover{background:rgba(15,12,32,.75)}
@media (hover:none){.dv-x span{display:none}}

/* =====================================================================
   MOBILE-FIRST LAYER - phones are the primary design; desktop layers on top (>=1000px)
   ===================================================================== */
/* bottom tab bar (phones/tablets) */
.ap-tabs{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-top:1px solid var(--q-line)}
.ap-tabs a,.ap-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;background:none;color:var(--q-text-3);font:600 11px var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ap-tabs svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ap-tabs a.on,.ap-tabs button.on{color:var(--q-purple)}
.ap-tab-create i{width:50px;height:50px;margin-top:-22px;border-radius:17px;background:var(--q-purple);display:grid;place-content:center;box-shadow:0 10px 22px -8px rgba(91,63,240,.8);border:3px solid #fff}
.ap-tab-create i svg{stroke:#fff;fill:rgba(255,255,255,.25)}.ap-tab-create span{color:var(--q-text)}
.ap-dock{display:none}
.app main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.ap-top-signin{height:40px;padding:0 14px;display:inline-flex;align-items:center;border-radius:11px;font:700 14px var(--sans);color:var(--q-purple)}
@media (min-width:1000px){.ap-tabs{display:none}.ap-dock{display:flex}.app main{padding-bottom:84px}}
/* gallery filters: ONE swipeable row on phones */
@media (max-width:999px){
  .gf-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;padding:10px 12px;margin:0 -12px;top:58px}.gf-bar::-webkit-scrollbar{display:none}
  .gf-tabs{overflow:visible;flex:none}.gf-right{width:auto;flex:none}.gf-search{display:none}
  .gf-tabs button,.gf-sort button{height:38px}.gf-sort{flex:none}
}
/* ===== Studio (phone-first) ===== */
.sg{display:block}
.sg-panel{display:flex;flex-direction:column;gap:14px;padding:16px 16px 0}
.sg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.sg-head h1{margin:0;font-size:26px;letter-spacing:-.02em}
.sg-media{display:flex;padding:3px;border-radius:999px;background:var(--q-pearl-2)}.sg-media button{height:38px;min-width:76px;padding:0 14px;border:0;border-radius:999px;background:none;font:700 14px var(--sans);color:var(--q-text-2);cursor:pointer}.sg-media button.on{background:var(--q-surface);color:var(--q-text);box-shadow:0 2px 8px -4px rgba(21,17,42,.35)}
.sg-from{margin:-4px 0 0;font-size:14px;color:var(--q-text-2)}.sg-from a{color:var(--q-purple);font-weight:700}
.sg-prompt{width:100%;min-height:140px;padding:14px;border:1px solid var(--q-line-2);border-radius:16px;font:500 16px/1.5 var(--sans);color:var(--q-text);background:var(--q-pearl);resize:vertical}
.sg-prompt:focus{outline:0;border-color:var(--q-purple);box-shadow:0 0 0 3px var(--q-focus);background:var(--q-surface)}
.sg-opts{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}.sg-opts::-webkit-scrollbar{display:none}
.sg-chip{flex:none;position:relative;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--q-line-2);background:var(--q-surface);font:600 14px var(--sans);color:var(--q-text);cursor:pointer;white-space:nowrap}
.sg-chip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sg-model{border-color:var(--q-ink);background:var(--q-ink);color:#fff}.sg-model svg:first-child{fill:#b5a6ff;stroke:none}.sg-caret{width:15px!important;height:15px!important}
.sg-chip select{appearance:none;-webkit-appearance:none;border:0;background:none;font:600 14px var(--sans);color:var(--q-text);padding:0;cursor:pointer}
.sg-chip select:focus{outline:0}.sg-chip:focus-within{box-shadow:0 0 0 3px var(--q-focus)}
.sg-chip[disabled]{opacity:.5;cursor:not-allowed}
.sg-soon{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:16px;background:var(--q-pearl);border:1px dashed var(--q-line-2);text-align:center}.sg-soon b{font:700 15px var(--sans)}.sg-soon span{font-size:14px;color:var(--q-text-2)}
.sg-bar{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:10px;margin:4px -16px 0;padding:10px 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--q-line)}
.sg-bal{font:600 13px var(--sans);color:var(--q-text-2);white-space:nowrap}a.sg-bal{color:var(--q-purple)}
.sg-gen{margin-left:auto;flex:1;max-width:260px;display:flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 8px 0 20px;border:0;border-radius:999px;background:var(--q-ink);color:#fff;font:700 16px var(--sans);cursor:pointer}
.sg-gen b{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:800}.sg-gen b svg{width:15px;height:15px;fill:#ffd23f}
.sg-gen:disabled{background:#3b3752;cursor:not-allowed}.sg-gen:not(:disabled):hover{background:#000}
.sg-canvas{display:none}
.sg-sheet{position:fixed;inset:0;z-index:140;background:rgba(15,12,32,.5);display:flex;align-items:flex-end}.sg-sheet[hidden]{display:none}
.sg-sheet-box{width:100%;max-height:82vh;overflow-y:auto;background:var(--q-surface);border-radius:22px 22px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));animation:am-up .22s var(--ease)}
.sg-sheet-grip{width:40px;height:5px;border-radius:3px;background:var(--q-line-2);margin:4px auto 10px}
.sg-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.sg-sheet-head h2{margin:0;font-size:19px}
.sg-list{display:grid;gap:6px}
.sg-opt{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:14px;border:1px solid var(--q-line);cursor:pointer}
.sg-opt input{position:absolute;opacity:0;pointer-events:none}
.sg-opt-t{display:flex;flex-direction:column;gap:2px;flex:1}.sg-opt b{font:700 15px var(--sans)}.sg-opt small{font-size:12.5px;color:var(--q-text-3)}
.sg-opt em{display:inline-flex;align-items:center;gap:3px;font:800 14px var(--sans);font-style:normal;color:var(--q-text)}.sg-opt em svg{width:14px;height:14px;fill:#e0a800}
.sg-opt:has(input:checked){border-color:var(--q-purple);background:var(--q-tint);box-shadow:0 0 0 1px var(--q-purple)}.sg-opt:has(input:focus-visible){outline:3px solid var(--q-focus)}
@media (min-width:1000px){
  .sg{display:grid;grid-template-columns:420px minmax(0,1fr);min-height:calc(100vh - 24px)}
  .sg-panel{border-right:1px solid var(--q-line);padding:22px 22px 0}
  .sg-bar{position:sticky;bottom:0;margin:auto -22px 0;padding:14px 22px}
  .sg-opts{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
  .sg-canvas{display:grid;place-items:center;padding:24px;background:var(--q-pearl)}
  .sg-sheet{align-items:center;justify-content:center}.sg-sheet-box{width:min(520px,92vw);border-radius:20px;max-height:80vh;animation:am-in .2s var(--ease)}.sg-sheet-grip{display:none}
}
/* detail overlay above the tab bar on phones */
@media (max-width:999px){.dv{z-index:150}.dv-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}}
/* phones: Generate bar pinned above the tab bar; creations area fills the space */
@media (max-width:999px){
  .sg-bar{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));margin:0;z-index:85;box-shadow:0 -10px 24px -18px rgba(21,17,42,.35)}
  .page-studio main{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
  .sg-canvas{display:grid;place-items:center;margin:16px;padding:32px 16px;border-radius:18px;border:1px dashed var(--q-line-2);background:var(--q-pearl)}
}
a.sg-bal{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

/* =====================================================================
   PT's OWN navigation identity (not a meigen copy): search field, Create button,
   Explore / My creations / Credits, Collections icon grid, purple credits card, purple primary actions
   ===================================================================== */
.ap-searchbox{display:flex;align-items:center;gap:9px;width:100%;height:42px;padding:0 12px;border-radius:12px;border:1px solid rgba(91,63,240,.18);background:rgba(255,255,255,.75);font:500 14px var(--sans);color:var(--q-text-3);cursor:pointer;text-align:left}
.ap-searchbox svg{width:17px;height:17px;fill:none;stroke:var(--q-purple);stroke-width:2.2;flex:none}.ap-searchbox span{flex:1}
.ap-searchbox kbd{font:600 11px var(--sans);color:var(--q-text-3);background:var(--q-pearl);border:1px solid var(--q-line);border-radius:6px;padding:1px 6px}
.ap-searchbox:hover{border-color:var(--q-purple);background:#fff}
.ap-create{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;background:linear-gradient(135deg,#6d4dff,#4a2fdc);color:#fff;font:800 16px var(--sans);box-shadow:0 12px 24px -12px rgba(91,63,240,.85);transition:transform .15s,box-shadow .15s}
.ap-create span{width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.2);display:grid;place-content:center;font-size:18px;line-height:1}
.ap-create:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(91,63,240,.9)}
.ap-nav a.on{background:var(--q-tint);color:var(--q-deep);box-shadow:none}.ap-nav a.on svg{stroke:var(--q-purple)}
.ap-coll-h{display:block;font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--q-text-3);padding:2px 6px 8px}
.ap-coll-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap-coll-grid a{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);color:var(--q-text);transition:border-color .15s,transform .15s}
.ap-coll-grid a:hover{border-color:var(--q-purple);transform:translateY(-1px)}.ap-coll-grid a.on{border-color:var(--q-purple);box-shadow:0 0 0 1px var(--q-purple)}
.ap-coll-grid img{width:34px;height:30px;object-fit:contain;margin-bottom:2px}.ap-coll-grid b{font:700 13px var(--sans)}.ap-coll-grid small{font:500 11.5px var(--sans);color:var(--q-text-3)}
.ap-free{display:inline-grid;place-content:center;height:30px;width:44px;margin-bottom:2px;border-radius:8px;background:#e6f5ee;color:var(--q-ok);font:800 10.5px var(--sans);letter-spacing:.06em}
.ap-wallet{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:linear-gradient(145deg,#2c1d7a,#5b3ff0);color:#fff;box-shadow:0 16px 30px -18px rgba(44,29,122,.9)}
.ap-wallet-k{font:700 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ap-wallet>b{display:inline-flex;align-items:center;gap:6px;font:800 28px var(--display)}.ap-wallet>b svg{width:20px;height:20px;fill:#ffd23f}
.ap-wallet a{display:flex;align-items:center;justify-content:center;height:40px;border-radius:11px;background:#fff;color:var(--q-deep);font:800 14px var(--sans)}.ap-wallet a:hover{background:var(--q-tint)}
.ap-wallet p{margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.82)}
.ap-wallet .ap-wallet-sub{background:none;color:#fff;height:30px;font-weight:600;font-size:13px}.ap-wallet .ap-wallet-sub:hover{background:rgba(255,255,255,.12)}
/* PT purple for primary actions (instead of black pills) */
.sg-gen{background:linear-gradient(135deg,#6d4dff,#4a2fdc)}.sg-gen:not(:disabled):hover{background:linear-gradient(135deg,#5b3ff0,#3d24c4)}.sg-gen:disabled{background:#8f84c9}
.sg-model{background:var(--q-tint);border-color:var(--q-purple);color:var(--q-deep)}.sg-model svg:first-child{fill:var(--q-purple)}
.gf-tabs button.on,.gf-sort button.on{background:var(--q-purple);border-color:var(--q-purple)}.gf-tabs button.on svg{fill:#fff}
.dv-foot .qb[hidden]{display:none}.dv-foot-note{grid-column:1/-1;text-align:center;font:600 13.5px var(--sans);color:var(--q-text-3);padding:12px 0}.dv-foot-note[hidden]{display:none}
.qs .ap-searchbox,.qs .ap-create{margin-bottom:12px}.qs .ap-coll-grid{margin-bottom:16px}
@media (min-width:1000px){.app main{padding-bottom:32px}}

/* ===== Search (redesigned): one clean bar, visual results ===== */
body.q .search-dlg{position:fixed;inset:0;z-index:170;display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;background:rgba(21,17,42,.45);backdrop-filter:blur(6px)}
body.q .search-dlg.is-open{display:flex}
body.q .search-box{width:min(720px,100%);max-height:78vh;display:flex;flex-direction:column;background:var(--q-surface);border:0;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(21,17,42,.6);animation:am-in .18s var(--ease)}
body.q .search-field{display:flex;align-items:center;gap:12px;height:64px;padding:0 12px 0 20px;border-bottom:1px solid var(--q-line);margin:0}
body.q .search-field .i{width:22px;height:22px;flex:none;fill:none;stroke:var(--q-purple);stroke-width:2.2}
body.q .search-field input,body.q .search-field input:focus{flex:1;min-width:0;height:100%;padding:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent;font:500 18px var(--sans);color:var(--q-text);-webkit-appearance:none;appearance:none}
body.q .search-field input::placeholder{color:var(--q-text-3)}
body.q .search-field input::-webkit-search-cancel-button{display:none}
.sr-close{width:40px;height:40px;flex:none;border:0;border-radius:12px;background:var(--q-pearl);display:grid;place-content:center;cursor:pointer}.sr-close svg{width:18px;height:18px;fill:none;stroke:var(--q-text-2);stroke-width:2.4;stroke-linecap:round}.sr-close:hover{background:var(--q-line)}
body.q .search-body{overflow-y:auto;padding:6px 20px 20px}
body.q .search-body h4{margin:16px 0 10px;font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--q-text-3)}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px}
.sr-cat{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:var(--q-pearl);border:1px solid var(--q-line);font:600 14px var(--sans);color:var(--q-text)}
.sr-cat img{width:26px;height:23px;object-fit:contain}.sr-free{width:26px;height:23px;display:grid;place-content:center;border-radius:6px;background:#e6f5ee;color:var(--q-ok);font:800 11px var(--sans)}
.sr-cat:hover,.sr-cat.is-active{border-color:var(--q-purple);background:var(--q-tint)}
.sr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sr-card{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--q-pearl-2);outline-offset:2px}
.sr-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}.sr-card:hover img{transform:scale(1.04)}
.sr-card span{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:1px;padding:26px 10px 9px;background:linear-gradient(180deg,transparent,rgba(12,10,26,.82))}
.sr-card b{font:700 13px/1.25 var(--sans);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sr-card small{font:600 11.5px var(--sans);color:rgba(255,255,255,.75)}
.sr-card.is-active{outline:3px solid var(--q-purple)}
.sr-all{display:flex;align-items:center;justify-content:space-between;margin-top:16px;height:48px;padding:0 16px;border-radius:14px;background:var(--q-tint);font:700 14.5px var(--sans);color:var(--q-deep)}.sr-all:hover,.sr-all.is-active{background:var(--q-tint-2)}
.sr-empty{display:flex;flex-direction:column;gap:4px;padding:22px 4px 6px;text-align:center}.sr-empty b{font:700 16px var(--sans)}.sr-empty span{color:var(--q-text-2);font-size:14px}
@media (max-width:699px){
  body.q .search-dlg{padding:0;background:var(--q-surface);backdrop-filter:none}
  body.q .search-box{width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none;animation:none}
  body.q .search-field{height:62px;padding:0 8px 0 16px}body.q .search-field input{font-size:17px}
  body.q .search-body{padding:4px 16px calc(24px + env(safe-area-inset-bottom))}
  .sr-grid{grid-template-columns:repeat(2,1fr)}
}

/* search: remove old first-design limits (top gap, 62vh results cap) */
body.q .search-box{margin:0}body.q .search-body{max-height:none;flex:1;min-height:0}
@media (max-width:699px){body.q .search-box{height:100%;height:100dvh}}

/* ===== PT duotone icon style (distinct from generic outline sets) ===== */
.pti{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pti .d{fill:currentColor;stroke:none;opacity:.14}
.pti .f{fill:currentColor;stroke:none}
.ap-tabs .pti{width:25px;height:25px}
.ap-tabs a.on .pti .d,.ap-tabs button.on .pti .d,.ap-nav a.on .pti .d{opacity:.28}
.ap-tabs a.on,.ap-tabs button.on{color:var(--q-purple)}
.ap-tabs a.on span{font-weight:800}
.ap-tab-create i{border-radius:50%;background:linear-gradient(135deg,#6d4dff,#4a2fdc)}
.ap-tab-create i .pti{width:26px;height:26px;stroke:#fff;stroke-width:2.8}
.ap-nav .pti{width:21px;height:21px}
.ap-searchbox .pti{width:18px;height:18px;color:var(--q-purple)}
.ap-dock{display:none!important}

/* ===== Purple site background, white sidebar (owner) ===== */
body.app{background:#ebe4ff}
body.app::before{background:
  radial-gradient(45% 40% at 20% 10%,rgba(123,97,255,.38),transparent 70%),
  radial-gradient(40% 35% at 90% 20%,rgba(181,140,255,.35),transparent 70%),
  radial-gradient(50% 45% at 75% 90%,rgba(140,110,255,.30),transparent 70%),
  radial-gradient(45% 40% at 25% 85%,rgba(214,196,255,.55),transparent 70%)}
.ap-side{background:#fff;border-right:1px solid var(--q-line);z-index:20}
.ap-nav a:hover,.ap-nav button:hover{background:var(--q-pearl)}
.ap-searchbox{background:var(--q-pearl)}
.ap-coll-grid a{background:var(--q-pearl);border-color:var(--q-line)}
.ap-main{padding:0}
.ap-card{background:transparent;border-radius:0;box-shadow:none;min-height:100vh}
.gf-bar{background:rgba(235,228,255,.82);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);margin:0 -18px;padding-left:18px;padding-right:18px}
.gf-tabs button:not(.on),.gf-search{background:rgba(255,255,255,.75);border-color:rgba(91,63,240,.14)}
.gf-sort{background:rgba(255,255,255,.6)}
.gc{box-shadow:0 10px 24px -18px rgba(44,29,122,.55)}
@media (max-width:999px){.gf-bar{margin:0 -12px;padding:10px 12px}.ap-top{background:rgba(255,255,255,.94)}}
/* purple shows through every page; content sits in white cards on it */
.app .st-page,.app .dl,.app .lg,.app .lr,.app .qsec-pearl,.app .vw{background:transparent}
.app .dh{background:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.app .lp{background:rgba(255,255,255,.85)}
@media (min-width:1000px){
  .sg{gap:16px;padding:16px;min-height:100vh;align-items:stretch}
  .sg-panel{background:#fff;border:0;border-radius:22px;box-shadow:0 20px 50px -34px rgba(44,29,122,.6);overflow:hidden}
  .sg-canvas{background:rgba(255,255,255,.55);border:1.5px dashed rgba(91,63,240,.28);border-radius:22px}
  .sg-bar{border-radius:0 0 22px 22px}
}
@media (max-width:999px){.sg-canvas{background:rgba(255,255,255,.6);border-color:rgba(91,63,240,.25)}.sg-prompt{background:#fff}}

/* ===== SEO: home H1 + creation pages (phone-first) ===== */
.gf-h1{margin:14px 0 0;font:800 20px/1.2 var(--display);letter-spacing:-.02em;color:var(--q-text)}
@media (min-width:1000px){.gf-h1{font-size:22px;margin-top:18px}}
.cp{padding:14px 14px 24px;max-width:1280px;margin:0 auto}
.cp-crumb{display:flex;flex-wrap:wrap;gap:6px;font:600 13px var(--sans);color:var(--q-text-3);margin-bottom:12px}.cp-crumb a{color:var(--q-text-2)}.cp-crumb a:hover{color:var(--q-purple)}
.cp-main{display:grid;gap:16px}
.cp-img{margin:0;border-radius:18px;overflow:hidden;background:#0b0918;box-shadow:0 20px 50px -30px rgba(44,29,122,.6)}.cp-img img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;margin:0 auto}
.cp-info{display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 50px -34px rgba(44,29,122,.5)}
.cp-info h1{margin:0;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.15}
.cp-cap{margin:0;color:var(--q-text-2);font-size:15px}
.cp-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.cp-sec{margin-top:26px}.cp-sec h2{margin:0 0 12px;font-size:clamp(18px,2vw,22px);letter-spacing:-.02em}
.cp-grid{columns:2 140px;column-gap:10px}
.cp-t{display:block;break-inside:avoid;margin:0 0 10px;border-radius:14px;overflow:hidden;background:var(--q-pearl-2);box-shadow:0 10px 24px -18px rgba(44,29,122,.55)}.cp-t img{display:block;width:100%;height:auto;transition:transform .4s var(--ease)}.cp-t:hover img{transform:scale(1.03)}
@media (min-width:700px){.cp-grid{columns:4 180px}}
@media (min-width:1000px){.cp{padding:20px 24px 32px}.cp-main{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}.cp-info{position:sticky;top:16px}.cp-grid{columns:5 180px}}
/* free download on creation pages */
.cp-dl{display:flex;flex-direction:column;gap:6px}.cp-dl .qb{display:inline-flex;align-items:center;justify-content:center;gap:8px}.cp-dl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cp-pack{align-self:center;font:600 13px var(--sans);color:var(--q-purple)}.cp-pack:hover{text-decoration:underline}

/* like / download / share row */
.dv-actions{flex-wrap:wrap}
.dv-act[hidden]{display:none}
.dv-like svg{stroke:currentColor}.dv-like.on{border-color:#ff4d8d;color:#e11d63;background:#fff0f5}.dv-like.on svg{fill:#ff4d8d;stroke:#ff4d8d}
.dv-like:active svg{transform:scale(1.25)}.dv-like svg{transition:transform .15s}
@media (hover:hover){.dv-like:hover{border-color:#ff4d8d;color:#e11d63}}