/* Separate visual study inspired by Yuzeum Studio. */
:root{--paper:#ffffff;--ink:#20231c;--line:#d9dad2}
body{background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.top{background:var(--paper);height:90px;padding:0 4vw;border-bottom:1px solid var(--line)}
.wordmark{font-size:24px;font-weight:500;letter-spacing:-.05em}.nav a{font-weight:400}.round{border-color:#d9dad2}.nav a.active{color:#20231c}
.hero{min-height:900px!important;background:#ffffff;color:#20231c;isolation:isolate}
.hero:after{top:340px;background:linear-gradient(0deg,#0004,transparent 45%)}
.hero-slide{top:340px!important;background-position:center 56%!important}
.hero-content{min-height:340px!important;height:340px;width:100%;max-width:none;padding:55px 4vw!important;display:block}
.hero-content>div{display:flex;justify-content:space-between;align-items:center;gap:50px;width:100%}
.hero h1{font-size:clamp(56px,6.5vw,104px);font-weight:500;letter-spacing:-.065em;line-height:1.02;margin:0}
.hero h1 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#20231c;letter-spacing:-.065em}
.hero-cta{flex-direction:column;gap:18px;align-items:flex-start;min-width:220px;margin-right:5vw}
.hero-cta a{color:#20231c;background:none;border:0;border-bottom:1px solid #aaa;padding:12px 0;font-size:14px;font-weight:400;letter-spacing:0;border-radius:0}
.hero-controls{color:white}.hero-track{height:2px}
main #drops,main #worlds,main #trending,main #themes,main #favorites,main #offers,main #browse.creator-roster{background:#ffffff;padding-left:4vw;padding-right:4vw}
.section-head,.creator-roster .section-head{padding-top:95px;padding-bottom:34px}
.section-head h2,#trending .section-head h2,#themes .section-head h2,#browse .section-head h2{font-size:clamp(30px,3.6vw,52px);font-weight:500;letter-spacing:-.055em;line-height:1.08}
.motion-controls button,.drop-controls button{border-color:#d0d1c8;font-weight:400}.card-meta h3{font-weight:500}.badge{background:#ffffff;font-weight:500;letter-spacing:.03em}
.world-focus{gap:24px}.focus-card h3,.focus-card.active h3{font-weight:500;letter-spacing:-.045em}.focus-card a{font-weight:400}
main #trending{padding-bottom:55px}#trending>.section-head{padding-left:0;padding-right:0}.trend-window{background:transparent;grid-template-columns:46% 54%}.trend-copy-window{padding-left:12%;padding-right:8%}.trend-title-row h3{font-size:clamp(23px,2.7vw,40px);font-weight:400;letter-spacing:-.045em}.trend-title-row.selected h3{font-family:Georgia,serif;font-style:italic}
main #browse.creator-roster{padding-top:10px;padding-bottom:75px}.creator-roster .section-head{border-top:1px solid #d9dad2;padding-top:65px}.creator-entry h3{font-weight:400}.creator-entry span{color:#72766b}
.theme-grid{gap:22px}.theme-card h3{font-weight:400!important}.theme-card b{font-weight:400;letter-spacing:.02em;text-transform:none;font-size:13px}
main #favorites{padding-bottom:105px}.favorites-rail{gap:30px 22px}.browse-card h3{font-weight:400!important;font-size:15px}
main #offers.library-callout{background:#152337 url('/marketplace/hero.webp') 75% center/cover no-repeat;padding:90px 6vw;min-height:660px}.library-copy h2{font-weight:500;font-size:clamp(48px,6vw,90px)}.library-copy h2 em{font-family:Georgia,serif;font-weight:400}.library-actions a{font-size:17px;font-weight:400;border-radius:0}
.site-footer{background:#eaece3;color:#20231c;margin-top:0;padding:70px 4vw 30px}.footer-top,.footer-bottom{border-color:#cbd0c2}.footer-top h2{font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.055em}.footer-brand strong{font-weight:500}.footer-about p,.footer-links a,.footer-bottom,.footer-about span{color:#5a6052}.footer-links h3{color:#20231c;font-weight:500}.footer-top{border-bottom:1px solid #cbd0c2}
@media(max-width:640px){.top{height:74px}.hero{min-height:790px!important}.hero-content{height:330px;min-height:330px!important;padding:38px 5vw!important}.hero-content>div{display:block}.hero h1{font-size:58px}.hero-slide{top:330px!important}.hero:after{top:330px}.hero-cta{margin-top:23px;flex-direction:row;gap:24px;min-width:0}.hero-cta a{font-size:12px;padding:8px 0}.section-head,.creator-roster .section-head{padding-top:65px;padding-bottom:28px}.section-head h2,#trending .section-head h2,#themes .section-head h2,#browse .section-head h2{font-size:32px}.world-focus{gap:10px}.trend-window{grid-template-columns:40% 60%}.trend-copy-window{padding-left:18px;padding-right:12px}.trend-title-row h3{font-size:20px}.theme-grid{gap:12px}main #offers.library-callout{padding:65px 6vw;min-height:580px}.library-copy h2{font-size:51px}.site-footer{padding-top:55px}}
/* Studio typography over the full-bleed hero artwork. */
.hero{min-height:min(800px,calc(100svh - 90px))!important;color:#fff;background:#17202b}
.hero-slide{top:0!important;background-position:center 56%!important}
.hero:after{top:0;background:linear-gradient(90deg,rgba(5,10,18,.7),rgba(5,10,18,.22) 60%,transparent)}
.hero-content{height:auto;min-height:min(800px,calc(100svh - 90px))!important;padding:75px 6vw 110px!important;display:flex;justify-content:center}
.hero-content>div{display:block;width:100%}
.hero h1{color:white;max-width:780px;text-shadow:0 2px 24px #0002}
.hero h1 em{color:white}
.hero-cta{margin-top:35px;margin-right:0;flex-direction:row;gap:28px;align-items:center}
.hero-cta a{color:white;border-bottom:1px solid #ffffff9c;padding:12px 0}
@media(max-width:640px){.hero{min-height:calc(100svh - 74px)!important}.hero-slide{top:0!important;background-position:65% center!important}.hero:after{top:0;background:linear-gradient(0deg,#050a12c9, #050a1233 85%)}.hero-content{height:auto;min-height:calc(100svh - 74px)!important;padding:60px 6vw 110px!important;justify-content:flex-end}.hero h1{font-size:clamp(48px,12vw,64px)}.hero-cta{gap:24px;margin-top:28px}.hero-cta a{font-size:12px}}

/* Text-only, contrasting rectangular hero buttons. */
.hero-cta{gap:14px;flex-wrap:wrap}
.hero-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:16px 24px;border:1px solid #111;border-radius:0;background:#111;color:#fff;font-size:14px;font-weight:500;letter-spacing:0;text-decoration:none}
.hero-cta a.secondary{background:#fff;color:#111;border-color:#fff}
.hero-cta a:hover{background:#333;border-color:#333;color:#fff}
.hero-cta a.secondary:hover{background:#eee;border-color:#eee;color:#111}
@media(max-width:640px){.hero-cta{gap:12px}.hero-cta a{font-size:12px;min-height:46px;padding:14px 18px}}
/* Tighter Trending composition: smaller image and three compact title rows. */
.trend-window{height:280px;grid-template-columns:39% 61%}
.trend-copy-window{padding-top:17px;padding-bottom:17px;clip-path:inset(17px 0);padding-left:9%;padding-right:7%}
.trend-titles{height:410px}
.trend-title-row{height:82px}
.trend-title-row h3{font-size:clamp(22px,2.35vw,34px)}
@media(max-width:640px){.trend-window{height:255px;grid-template-columns:34% 66%}.trend-copy-window{padding:15px 16px;clip-path:inset(15px 0)}.trend-titles{height:375px}.trend-title-row{height:75px}.trend-title-row h3{font-size:18px}}
/* Softer theme cards with the calm typography of Yuzeum Studio. */
.theme-grid{gap:18px}
.theme-card{border-radius:8px;box-shadow:0 10px 28px rgba(24,28,20,.06);isolation:isolate;background-blend-mode:normal;transition:transform .3s ease,box-shadow .3s ease}
.theme-card:before{display:block!important;background:linear-gradient(180deg,rgba(18,22,20,.03) 25%,rgba(18,22,20,.12) 52%,rgba(18,22,20,.56) 100%)!important}
.theme-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(24,28,20,.1)}
.theme-card h3{font-family:Arial,Helvetica,sans-serif;font-size:clamp(25px,2.7vw,38px)!important;font-weight:400!important;letter-spacing:-.045em!important;line-height:1.04!important;text-shadow:0 2px 12px rgba(0,0,0,.16)}
.theme-card b{font-family:Arial,Helvetica,sans-serif;font-weight:400!important;font-size:12px!important;letter-spacing:0!important;line-height:1.35;text-transform:none!important;max-width:100%;width:max-content;display:inline-block}
@media(max-width:640px){.theme-grid{gap:14px}.theme-card{border-radius:7px;padding:20px!important}.theme-card h3{font-size:clamp(22px,6vw,29px)!important;margin-bottom:16px}.theme-card b{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.theme-card{transition:none}.theme-card:hover{transform:none}}

/* Match the Studio brand lockup in the marketplace header. */
.wordmark{display:flex;align-items:center;gap:0;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:400;letter-spacing:-.04em;white-space:nowrap}
.wordmark .mark{margin-right:15px;flex:none}
.wordmark .brand-name{color:#20231c;font-weight:500}
.wordmark .brand-section{color:#50534d;font-weight:400;margin-left:8px}
@media(max-width:640px){.wordmark{font-size:18px}.wordmark .mark{margin-right:10px}.wordmark .brand-section{margin-left:6px}}
/* Transparent outlined pair over the hero image. */
.hero-cta a{background:rgba(12,18,23,.12);border:1px solid rgba(255,255,255,.95);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-cta a.secondary{background:rgba(255,255,255,.6);border:1px solid #171a18;color:#171a18;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-cta a:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
.hero-cta a.secondary:hover{background:rgba(255,255,255,.8);border-color:#171a18;color:#171a18}
/* Clear glass: artwork color remains visible through both buttons. */
.hero-cta a,
.hero-cta a.secondary{
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(11px) saturate(1.55) brightness(1.06);
  backdrop-filter:blur(11px) saturate(1.55) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(0,0,0,.12);
}
.hero-cta a{border-color:rgba(255,255,255,.9);color:#fff}
.hero-cta a.secondary{background:rgba(255,255,255,.16);border-color:rgba(18,21,24,.9);color:#15191c;text-shadow:0 1px 3px rgba(255,255,255,.55)}
.hero-cta a:hover{background:rgba(255,255,255,.16);color:#fff}
.hero-cta a.secondary:hover{background:rgba(255,255,255,.27);border-color:#15191c;color:#15191c}
.hero-cta a{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.025) 60%,rgba(255,255,255,.08));backdrop-filter:blur(6px) saturate(1.7);-webkit-backdrop-filter:blur(6px) saturate(1.7)}
.hero-cta a.secondary{background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.27) 70%,rgba(255,255,255,.46));backdrop-filter:blur(7px) saturate(1.7);-webkit-backdrop-filter:blur(7px) saturate(1.7)}
/* Solid primary, clear liquid-glass secondary. */
.hero-cta a{position:relative;overflow:hidden;background:#000;border:1px solid #000;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;text-shadow:none}
.hero-cta a:hover{background:#161616;border-color:#161616;color:#fff}
.hero-cta a.secondary{background:linear-gradient(125deg,rgba(255,255,255,.24),rgba(255,255,255,.025) 42%,rgba(255,255,255,.09) 75%,rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.65);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45);backdrop-filter:blur(1.5px) saturate(1.35);-webkit-backdrop-filter:blur(1.5px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 1px 0 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.2),0 5px 18px rgba(0,0,0,.1)}
.hero-cta a.secondary:before{content:'';position:absolute;inset:-80% -100%;pointer-events:none;background:linear-gradient(115deg,transparent 43%,rgba(255,255,255,.02) 46%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.04) 54%,transparent 58%);transform:translateX(-25%);animation:glassLight 9s ease-in-out infinite}
.hero-cta a.secondary:hover{background:linear-gradient(125deg,rgba(255,255,255,.3),rgba(255,255,255,.04) 45%,rgba(255,255,255,.16));border-color:rgba(255,255,255,.85);color:#fff}
@keyframes glassLight{0%,20%{transform:translateX(-25%)}65%,100%{transform:translateX(25%)}}
@media(prefers-reduced-motion:reduce){.hero-cta a.secondary:before{animation:none}}
.hero-cta a.primary,.hero-cta a.primary:hover{border:1px solid #fff;background:#000;color:#fff}
/* Feather the artwork perimeter into the white page while keeping copy sharp. */
.theme-card,.theme-card:hover{border:0!important;border-radius:0;box-shadow:none}
.theme-card:after{content:'';position:absolute;inset:-1px;z-index:0;pointer-events:none;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:inset 0 0 18px 9px #fff;background:transparent;mask-image:linear-gradient(90deg,#000,transparent 15%,transparent 85%,#000),linear-gradient(0deg,#000,transparent 13%,transparent 87%,#000);-webkit-mask-image:linear-gradient(90deg,#000,transparent 15%,transparent 85%,#000),linear-gradient(0deg,#000,transparent 13%,transparent 87%,#000)}
.theme-card>div{position:relative;z-index:1}
@media(max-width:640px){.theme-card:after{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:inset 0 0 13px 6px #fff}}