/* Self-hosted DM Sans. A slow font must not replace already painted text. */
/* latin-ext */
@font-face {
  font-family: 'PV Lab Navigation';
  font-style: normal;
  font-weight: 300 500;
  font-display: optional;
  src: url(./fonts/dm-sans-latin-ext-v17.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PV Lab Navigation';
  font-style: normal;
  font-weight: 300 500;
  font-display: optional;
  src: url(./fonts/dm-sans-latin-v17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shared navigation identity for the landing page, Explore Moods and Studio. */
:root{--lab-page-gutter:clamp(22px,3.5vw,64px);--lab-header-height:82px}
.landing-header{
  position:absolute;inset:0 0 auto;z-index:20;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:clamp(24px,3vw,58px);
  width:100%;height:var(--lab-header-height);padding:0 var(--lab-page-gutter);margin:0;
  font:400 14px/1.3 'PV Lab Navigation',Arial,sans-serif;color:#f6f3ed;
  background:rgba(12,13,12,.92);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.landing-header .lab-brand{
  flex:none;white-space:nowrap;font-size:19px;font-weight:400;line-height:1;letter-spacing:.01em;
}
.landing-header nav{
  display:flex;position:static;inset:auto;align-items:center;
  gap:clamp(18px,2vw,36px);min-width:0;white-space:nowrap;
  font-size:14px;line-height:1.3;font-weight:400;
}
.landing-header nav a{position:relative;flex:none;padding:14px 0;color:#e7e2d9;transition:color .2s}
.landing-header a{text-decoration:none}
.landing-header nav a:hover,.landing-header nav a[aria-current="page"]{color:#fff}
.landing-header nav a[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;
}
.landing-header :is(a,button,summary):focus-visible{outline:2px solid #fff;outline-offset:4px}
.landing-header [hidden]{display:none!important}
.landing-header button{cursor:pointer}
.landing-header--moods{position:relative}
.landing-header--moods nav{justify-content:flex-end}
.landing-header .lab-brand{color:#f6f3ed}
.landing-header-actions{display:grid;grid-template-columns:auto 76px;min-height:42px;align-items:center;gap:18px;min-width:0}
.landing-header-actions>.studio-link{grid-area:1 / 1}
.landing-header-actions>#lab-header-signin,
.landing-header-actions>#lab-account-strip{grid-area:1 / 2;justify-self:end}
.landing-header-actions>.lab-auth-link{
  flex:none;background:transparent;border:0;backdrop-filter:none;
  padding:10px 0;color:inherit;font:400 12px/1.2 "PV Lab Navigation",Arial,sans-serif;letter-spacing:.02em;white-space:nowrap;
}
.landing-header .studio-link{
  display:inline-flex;align-items:center;justify-content:center;gap:13px;flex:none;
  margin-left:0;border:1px solid rgba(255,255,255,.38);border-radius:100px;
  padding:12px 18px;line-height:1;white-space:nowrap;font-size:12px;font-weight:300;
  color:#f3f1ed;transition:border-color .2s,background .2s;
}
.landing-header .studio-link:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.landing-header .studio-link span{margin-left:0}
.studio-link-label-compact{display:none}
.lab-account-menu{position:relative;flex:none;font:400 12px/1.3 'PV Lab Navigation',Arial,sans-serif}
.lab-account-menu[hidden],.lab-account-panel button[hidden]{display:none!important}
.lab-account-menu>summary{
  display:flex;align-items:center;gap:9px;min-height:42px;
  color:#efeee9;cursor:pointer;list-style:none;white-space:nowrap;user-select:none;
}
.lab-account-menu>summary::-webkit-details-marker{display:none}
.lab-account-menu>summary::marker{content:''}
.lab-account-menu>summary span{font-size:17px;color:#aaa9a4;transition:transform .2s}
.lab-account-menu[open]>summary span{transform:rotate(180deg)}
.lab-account-menu>summary:hover{color:#fff}
.lab-account-panel{
  position:absolute;top:calc(100% + 12px);right:0;z-index:30;
  width:min(290px,calc(100vw - 32px));padding:17px 19px 10px;
  background:#1a1b19;color:#f3f1ec;border:1px solid #4a4c48;border-radius:12px;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
}
.lab-account-details{padding:4px 0 14px;border-bottom:1px solid rgba(255,255,255,.13)}
.lab-account-eyebrow{display:block;margin-bottom:9px;color:#959992;font-size:10px;letter-spacing:.13em}
.lab-account-details strong{display:block;font-weight:400;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.lab-account-panel button{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:13px 0;background:transparent;border:0;
  color:#deddd8;text-align:left;font:400 12px 'PV Lab Navigation',Arial,sans-serif;
}
.lab-account-panel button+button{border-top:1px solid rgba(255,255,255,.09)}
.lab-account-panel button:hover{color:#fff}
@media(min-width:901px) and (max-width:1270px){
  :root{--lab-page-gutter:3vw}
  .landing-header{column-gap:20px}
  .landing-header nav{gap:clamp(11px,1.45vw,20px);font-size:12px}
  .landing-header-actions{gap:12px}
  .landing-header .studio-link{padding-inline:13px}
}
@media(max-width:900px){
  :root{--lab-page-gutter:22px;--lab-header-height:109px}
  .landing-header{
    grid-template-areas:'brand actions' 'nav nav';grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;row-gap:2px;column-gap:16px;
    height:var(--lab-header-height);min-height:109px;padding:15px var(--lab-page-gutter) 8px;
    background:rgba(12,13,12,.94);
  }
  .landing-header .lab-brand{grid-area:brand}
  .landing-header nav{
    grid-area:nav;position:static;inset:auto;width:100%;max-width:100%;
    overflow-x:auto;overflow-y:hidden;gap:26px;scrollbar-width:none;
    white-space:nowrap;overscroll-behavior-x:contain;font-size:14px;
  }
  .landing-header--moods nav{justify-content:flex-start}
  .landing-header nav::-webkit-scrollbar{display:none}
  .landing-header nav a{padding:11px 0}
  .landing-header-actions{grid-area:actions;gap:16px}
}
@media(max-width:560px){
  :root{--lab-page-gutter:18px;--lab-header-height:102px}
  .landing-header{min-height:102px;padding:13px var(--lab-page-gutter) 7px;column-gap:12px}
  .landing-header .lab-brand{font-size:17px}
  .landing-header-actions{gap:12px;grid-template-columns:auto 64px;min-height:38px}
  .landing-header-actions>.lab-auth-link{font-size:11px}
  .landing-header .studio-link{font-size:11px;padding:10px 13px;gap:8px}
  .studio-link-label-full{display:none}
  .studio-link-label-compact{display:inline}
  .lab-account-menu>summary{font-size:11px;gap:5px;min-height:38px}
  .landing-header nav{gap:22px;font-size:13px}
}

/* Align both public pages to the same horizontal grid. Hero heights stay page-specific. */
.lab-hero .hero-copy{left:var(--lab-page-gutter)}
@media(min-width:901px){.lab-hero .hero-copy{left:calc(var(--lab-page-gutter) + 35px)}}
.lab-hero :is(.hero-poster,.hero-motion){top:var(--lab-header-height);height:calc(100% - var(--lab-header-height))}
.mc-explore-page .mc-explore-hero-copy{padding-left:var(--lab-page-gutter)}
.mc-explore-page .mc-explore-collection{padding-inline:var(--lab-page-gutter)}
.mc-explore-page .mc-discovery-edition,.mc-explore-page .mc-hero-controls{right:var(--lab-page-gutter)}
.landing-header .lab-header-status{
  position:absolute;top:100%;right:var(--lab-page-gutter);z-index:30;
  width:min(320px,calc(100vw - 36px));padding:12px 16px;margin:8px 0 0;
  border:1px solid #4a4c48;border-radius:8px;background:#1a1b19;color:#f3f1ec;font-size:12px;
}
.landing-header .lab-header-status:empty{display:none}
@media(prefers-reduced-motion:reduce){.landing-header *{transition:none!important}}


/* Keep the working Studio tools and account controls in the same masthead grid. */
:root{--studio-header-height:var(--lab-header-height)}
body>#studio-header{
  height:var(--lab-header-height);background:rgba(12,13,12,.92);
  border-bottom:1px solid rgba(255,255,255,.12);box-shadow:none;
  font:400 14px/1.3 'PV Lab Navigation',Arial,sans-serif;color:#f6f3ed;
}
body>#studio-header .wrap.top{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr;
  align-items:center;column-gap:clamp(24px,3vw,58px);row-gap:0;
  width:100%;height:100%;min-height:0;padding:0 var(--lab-page-gutter);
}
#studio-header .lab-brand{
  grid-area:auto;white-space:nowrap;font:400 19px/1 'PV Lab Navigation',Arial,sans-serif;
  letter-spacing:.01em;color:#f6f3ed;text-decoration:none;
}
body>#studio-header .tool-switch{
  grid-area:auto;align-self:center;align-items:center;width:100%;max-width:100%;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;
}
body>#studio-header .tool-switch::-webkit-scrollbar{display:none}
#studio-header .tool-switch>.tool-group{
  align-items:center;justify-content:flex-start;gap:clamp(18px,2vw,36px);
  width:max-content;min-width:max-content;flex-wrap:nowrap;
}
#studio-header .tool-switch>.tool-group>button,
#studio-header .tool-switch>.tool-group>a.tool-link{
  min-height:0;height:auto;padding:14px 0;border:0;border-radius:0;
  background:transparent;box-shadow:none;color:#e7e2d9;
  font:400 14px/1.3 'PV Lab Navigation',Arial,sans-serif;
}
#studio-header .tool-switch>.tool-group>button::after,
#studio-header .tool-switch>.tool-group>a.tool-link::after{
  bottom:6px;height:1px;background:currentColor;box-shadow:none;
}
#studio-header .tool-switch>.tool-group>button[aria-pressed="true"]{color:#fff}
#studio-header .actions{grid-area:auto;min-width:0;margin-left:0;gap:18px}
#studio-header .actions>details>summary{
  min-height:42px;padding:0;color:#efeee9;
  font:400 12px/1.3 'PV Lab Navigation',Arial,sans-serif;
}
#studio-header .lab-wallet-toggle{font-family:'PV Lab Navigation',Arial,sans-serif;font-weight:400}
#studio-header .account-menu .account-options,
#studio-header .queue-popover-panel{background:#1a1b19;border-color:#4a4c48}
#studio-header :is(a,button,summary):focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media(min-width:901px) and (max-width:1270px){
  body>#studio-header .wrap.top{column-gap:20px}
  #studio-header .tool-switch>.tool-group{gap:clamp(11px,1.45vw,20px)}
  #studio-header .tool-switch>.tool-group>button,
  #studio-header .tool-switch>.tool-group>a.tool-link{font-size:12px}
  #studio-header .actions{gap:12px}
}
@media(max-width:900px){
  body>#studio-header{background:rgba(12,13,12,.94)}
  body>#studio-header .wrap.top{
    grid-template-areas:'brand actions' 'nav nav';grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;row-gap:2px;column-gap:16px;
    padding:15px var(--lab-page-gutter) 8px;
  }
  #studio-header .lab-brand{grid-area:brand}
  #studio-header .actions{grid-area:actions;gap:16px}
  body>#studio-header .tool-switch{grid-area:nav}
  #studio-header .tool-switch>.tool-group{gap:26px}
  #studio-header .tool-switch>.tool-group>button,
  #studio-header .tool-switch>.tool-group>a.tool-link{font-size:14px;padding:11px 0}
  body:has(#app[hidden])>#studio-header{height:var(--lab-header-height)}
  body:has(#app[hidden])>#studio-header .wrap.top{grid-template-rows:auto auto}
}
@media(max-width:560px){
  body>#studio-header .wrap.top{padding:13px var(--lab-page-gutter) 7px;column-gap:12px}
  #studio-header .lab-brand{font-size:17px}
  #studio-header .actions{gap:8px}
  #studio-header .actions>details>summary{font-size:11px;min-height:38px;gap:5px}
  #studio-header .tool-switch>.tool-group{gap:22px}
  #studio-header .tool-switch>.tool-group>button,
  #studio-header .tool-switch>.tool-group>a.tool-link{font-size:13px}
  #studio-header .lab-wallet-toggle{max-width:25vw;overflow:hidden;text-overflow:ellipsis;padding-inline:8px}
  #studio-header .actions:has(.lab-wallet-toggle:not([hidden])) .queue-summary-title,
  #studio-header .actions:has(.lab-wallet-toggle:not([hidden])) .queue-summary-chevron{display:none}
  #studio-header .actions:has(.lab-wallet-toggle:not([hidden])) .queue-popover>summary{min-width:18px}
}
@media(prefers-reduced-motion:reduce){#studio-header *{transition:none!important}}

/* Workspace controls sit at the gallery edge, with quiet monochrome surfaces. */
body>#studio-header .wrap.top{max-width:none;padding-right:16px}
#studio-header .actions{justify-self:end;align-items:center;gap:12px}
#studio-header .actions>#tool-assets.studio-assets-icon{
  border-color:#ffffff24;background:transparent;box-shadow:none;color:#d5d3ce;
}
#studio-header .actions>#tool-assets.studio-assets-icon:hover{
  border-color:#ffffff50;background:#ffffff08;color:#f3f1ec;
}
#studio-header .actions>#tool-assets.studio-assets-icon[aria-pressed="true"]{
  border-color:#ffffff70;background:#ffffff0e;color:#f3f1ec;
}
#studio-header .pv-account-avatar{border-color:#ffffff30;box-shadow:none}
@media(max-width:640px){
  body>#studio-header .wrap.top{padding-right:10px}
  #studio-header .actions{gap:8px}
}
.lab-hero #lab-entry-status:empty{display:none}
.lab-hero #lab-entry-status:not(:empty){margin-top:14px}

/* Center Clerk dialogs in the viewport; tall forms remain scrollable. */
.cl-modalBackdrop{
  box-sizing:border-box!important;height:100dvh!important;
  padding:24px 16px!important;overflow-y:auto!important;
}
.cl-modalBackdrop .cl-modalContent{
  margin:auto 0!important;max-width:100%!important;
}

/* Homepage navigation: emphasize entry without competing with the hero CTA. */
@media(min-width:901px){
  .landing-header--home .landing-header-actions{gap:14px;grid-template-columns:auto 65px}
  .landing-header--home .studio-link{min-height:42px;padding:12px 23px;font-size:13px;font-weight:400}
  .landing-header--home .lab-auth-link{display:inline-flex;align-items:center;justify-content:flex-end;min-height:42px;padding:10px 0;font-size:13px;font-weight:400}
  .landing-header--home nav a{color:#f0ede7}
}
@media(min-width:901px) and (max-width:1270px){
  .landing-header--home .studio-link{padding-inline:17px}
  .landing-header--home .landing-header-actions{gap:11px}
}

/* Localize the real semi-bold face to homepage actions, leaving other text unchanged. */
@font-face{
  font-family:'PV Lab Homepage Action';font-style:normal;font-weight:600 700;
  font-display:optional;src:url(./fonts/dm-sans-latin-v17.woff2) format('woff2');
}
/* Homepage controls: Open studio first, then a quiet, real-credit action and avatar. */
.landing-header--home .landing-header-actions{grid-template-columns:auto auto 44px;column-gap:12px}
.landing-header--home .landing-header-actions>.studio-link{grid-area:1 / 1}
.landing-header--home .landing-header-actions>.lab-home-credits,
.landing-header--home .landing-header-actions>.lab-home-credit-placeholder{grid-area:1 / 2;justify-self:end}
.landing-header--home .landing-header-actions>.lab-home-avatar-placeholder{grid-area:1 / 3;justify-self:end}
.landing-header--home .landing-header-actions>#lab-header-signin,
.landing-header--home .landing-header-actions>#lab-account-strip{grid-area:1 / 3;justify-self:end}
.landing-header--home .lab-home-credits{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:136px;box-sizing:border-box;min-height:42px;padding:5px 7px;
  border:1px solid transparent;border-radius:100px;
  color:#f3f1ed;font:600 13px/1.2 'PV Lab Homepage Action','PV Lab Navigation',Arial,sans-serif;
  white-space:nowrap;transition:color .18s,border-color .18s,background .18s;
}
.landing-header--home .lab-home-credits[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}
.landing-header--home .lab-home-credits:hover{color:#fff;border-color:#ffffff38;background:#ffffff08}
/* First paint: neutral slots, no fictitious identity or credit amount. */
.landing-header--home .lab-home-credit-placeholder{
  display:flex;align-items:center;justify-content:center;
  width:136px;min-height:42px;pointer-events:none;
}
.landing-header--home .lab-home-credit-placeholder::before{
  content:'';width:68px;height:5px;border-radius:10px;background:#ffffff23;
}
.landing-header--home .lab-home-credit-placeholder::after{
  content:'';width:21px;height:21px;margin-left:7px;border:1px solid #ffffff30;border-radius:50%;
}
.landing-header--home .lab-home-avatar-placeholder{
  display:grid;place-items:center;flex:none;width:44px;min-height:44px;pointer-events:none;
}
.landing-header--home .lab-home-avatar-placeholder::before{
  content:'';box-sizing:border-box;width:32px;height:32px;
  border:1px solid #ffffff33;border-radius:50%;background:#252622;
}
.landing-header--home.is-account-ready .lab-home-avatar-placeholder,
.landing-header--home.is-account-ready:not(.is-credit-loading) .lab-home-credit-placeholder{
  visibility:hidden;
}
.landing-header--home .lab-home-credit-plus{
  display:inline-grid;place-items:center;flex:none;box-sizing:border-box;
  width:21px;height:21px;border:1px solid #797b76;border-radius:50%;
  color:#e9e7e2;font:400 17px/1 'PV Lab Navigation',Arial,sans-serif;
}
.landing-header--home .lab-home-credits:hover .lab-home-credit-plus{border-color:#e9e7e2}
.landing-header--home .studio-link{font-family:'PV Lab Homepage Action','PV Lab Navigation',Arial,sans-serif;font-weight:600!important;border-color:rgba(255,255,255,.7)}
.landing-header--home .studio-link:hover{border-color:#fff;background:rgba(255,255,255,.11)}
@media(min-width:901px){
  .landing-header--home .studio-link{min-height:42px;padding:12px 23px;font-size:13px;font-weight:400}
  .landing-header--home .lab-auth-link{display:inline-flex;align-items:center;justify-content:flex-end;min-height:42px;padding:10px 0;font-size:13px;font-weight:400}
  .landing-header--home nav a{color:#f0ede7}
}
@media(min-width:901px) and (max-width:1270px){
  .landing-header--home .studio-link{padding-inline:17px}
  .landing-header--home .landing-header-actions{column-gap:8px}
  .landing-header--home .lab-home-credits{font-size:11px;gap:5px;padding-inline:4px}
}
@media(max-width:900px){
  .landing-header--home .landing-header-actions{grid-template-columns:auto auto 40px;column-gap:9px}
  .landing-header--home .lab-home-credits,
  .landing-header--home .lab-home-credit-placeholder{min-height:38px;width:110px}
}
@media(max-width:560px){
  .landing-header--home .landing-header-actions{grid-template-columns:auto auto 34px;column-gap:6px}
  .landing-header--home .lab-home-credits{min-height:36px;width:94px;padding:3px 2px;gap:5px;font-size:11px}
  .landing-header--home .lab-home-credit-placeholder{min-height:36px;width:94px}
  .landing-header--home .lab-home-credit-placeholder::before{width:52px}
  .landing-header--home .lab-home-credit-placeholder::after{width:18px;height:18px;margin-left:5px}
  .landing-header--home .lab-home-credit-unit{display:none}
  .landing-header--home .lab-home-credit-plus{width:18px;height:18px;font-size:14px}
  .landing-header--home .studio-link{padding-inline:11px}
}
@media(max-width:375px){
  .landing-header--home .lab-home-credit-copy,
  .landing-header--home .lab-home-credit-unit{display:none}
  .landing-header--home .lab-home-credits{width:34px;padding:2px 0}
  .landing-header--home .lab-home-credit-placeholder{width:34px}
  .landing-header--home .lab-home-credit-placeholder::before{display:none}
  .landing-header--home .lab-home-credit-placeholder::after{width:24px;height:24px;margin:0}
  .landing-header--home .lab-home-credit-plus{width:24px;height:24px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.landing-header--home .lab-home-credits{transition:none}}


/* Consistent desktop hero regardless of account state. Keep the same editorial text block. */
@media(min-width:901px){
  .landing-header--home + main .lab-hero .hero-copy{max-width:min(620px,52vw)}
  .landing-header--home + main .lab-hero .hero-description{
    max-width:620px;
    white-space:nowrap;
  }
}