/* Forge Quick Starts — image-first creative library */
.qs-shelf{
  position:relative;
  z-index:3;
  min-width:0;
  margin:16px 0 22px;
  padding:15px;
  overflow:hidden;
  border:1px solid rgba(231,190,101,.16);
  border-radius:12px;
  background:#060a10;
  box-shadow:0 18px 48px rgba(0,0,0,.24);
}
.qs-shelf__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.qs-shelf__header>div{min-width:0}
.qs-eyebrow{
  display:block;
  color:#b99553;
  font:700 8px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.qs-shelf__header h3{
  margin:3px 0 0;
  color:#f0d092;
  font:400 clamp(22px,2vw,30px)/1.05 Georgia,"Times New Roman",serif;
  letter-spacing:-.02em;
}
.qs-browse,.qs-surprise,.qs-library__filters button,.qs-library__close{
  min-height:36px;
  font-family:Inter,"Segoe UI",sans-serif;
  font-size:10px;
  font-weight:750;
}
.qs-browse{
  flex:0 0 auto;
  padding:8px 12px;
  border:1px solid rgba(214,174,91,.26);
  border-radius:999px;
  color:#e9c981;
  background:rgba(61,44,18,.32);
}
.qs-browse:hover{border-color:#e2b85d;background:rgba(91,62,13,.42)}
.qs-rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:inline proximity;
  scrollbar-width:thin;
  scrollbar-color:rgba(215,174,89,.32) transparent;
}
button.qs-card{
  --qs-accent:#dcb35d;
  position:relative;
  display:block;
  min-width:0;
  aspect-ratio:1.9/1;
  padding:0;
  overflow:hidden;
  scroll-snap-align:start;
  text-align:left;
  border:1px solid rgba(212,184,126,.18);
  border-radius:8px;
  background:#03060a;
  color:#f7f3ea;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  cursor:pointer;
  isolation:isolate;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
button.qs-card:hover{
  transform:translateY(-2px);
  border-color:rgba(235,196,111,.7);
  box-shadow:0 13px 28px rgba(0,0,0,.42),0 0 0 1px color-mix(in srgb,var(--qs-accent) 24%,transparent);
}
button.qs-card:focus-visible{outline:3px solid #f0c56d;outline-offset:3px}
button.qs-card:disabled{opacity:.78;cursor:wait}
.qs-card__media{position:absolute;inset:0;display:block;overflow:hidden;background:#08111b}
.qs-card__media::after{
  content:"";
  position:absolute;
  inset:36% 0 0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(2,5,9,.56) 35%,rgba(2,5,9,.96));
}
.qs-card__image{
  position:absolute;
  inset:0;
  display:block;
  background-image:url("/assets/quick-starts.jpg");
  background-size:800% 800%;
  background-position:var(--qs-x,0%) var(--qs-y,0%);
  background-repeat:no-repeat;
  transform:scale(1.002);
  filter:saturate(.94) contrast(1.04);
  transition:transform .45s ease,filter .3s ease;
}
.qs-card:hover .qs-card__image{transform:scale(1.045);filter:saturate(1.08) contrast(1.06)}
.qs-card__meta{
  position:absolute;
  inset:8px 8px auto;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:rgba(255,255,255,.82);
  font:800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 1px 7px #000;
}
.qs-card__number{color:#f4c767}
.qs-card__phase{
  padding:3px 5px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(2,5,9,.52);
  backdrop-filter:blur(5px);
}
.qs-card__copy{
  position:absolute;
  z-index:2;
  left:9px;
  right:36px;
  bottom:8px;
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}
.qs-card__copy>strong{
  overflow:hidden;
  color:#fff;
  font-size:12px;
  line-height:1.12;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-shadow:0 2px 8px #000;
}
.qs-card__medium{
  overflow:hidden;
  color:#c7bfae;
  font:700 7px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.qs-card__play{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:3;
  display:grid;
  width:21px;
  height:21px;
  place-items:center;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  color:#fff4d6;
  background:rgba(2,5,9,.62);
  font-size:7px;
  line-height:1;
  backdrop-filter:blur(6px);
}
.qs-status{
  margin:9px 0 0;
  padding:8px 10px;
  border-left:2px solid #d9b158;
  border-radius:5px;
  background:rgba(80,57,16,.24);
  color:#e6d8bb;
  font-size:11px;
  line-height:1.4;
}
.qs-status:empty{display:none}
.qs-top-action{
  border-color:rgba(220,179,89,.3)!important;
  color:#efd28e!important;
  background:rgba(74,50,12,.28)!important;
}
.qs-modal-open{overflow:hidden}
.qs-library{
  position:fixed;
  inset:0;
  z-index:940;
  display:grid;
  place-items:center;
  padding:10px;
}
.qs-library[hidden]{display:none!important}
.qs-library__backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:rgba(0,3,7,.9);
  backdrop-filter:blur(7px);
  cursor:default;
}
.qs-library__panel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(1440px,calc(100vw - 20px));
  height:calc(100dvh - 20px);
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(219,180,95,.22);
  border-radius:12px;
  background:#050910;
  box-shadow:0 36px 120px rgba(0,0,0,.78);
}
.qs-library__header{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex:0 0 auto;
  min-height:64px;
  padding:13px 16px 8px;
  border-bottom:0;
  background:transparent;
}
.qs-library__header h2{
  margin:2px 0 0;
  color:#efca82;
  font:400 clamp(28px,3vw,43px)/1 Georgia,"Times New Roman",serif;
  letter-spacing:-.03em;
}
.qs-library__close{
  display:grid;
  flex:0 0 36px;
  width:36px;
  padding:0;
  place-items:center;
  border:1px solid rgba(216,180,102,.25);
  border-radius:9px;
  color:#e8dcc5;
  background:#0a1018;
  font-size:23px;
  line-height:1;
}
.qs-library__tools{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:8px;
  flex:0 0 auto;
  padding:4px 16px 8px;
}
.qs-library__search{
  width:100%;
  min-height:39px;
  margin:0;
  padding:8px 12px;
  border:1px solid rgba(154,165,176,.25);
  border-radius:999px;
  outline:none;
  background:#070d15;
  color:#f5f0e5;
  font:500 13px/1.3 Inter,"Segoe UI",sans-serif;
}
.qs-library__search:focus-visible{border-color:#e2b75e;outline:2px solid rgba(226,183,94,.2);outline-offset:2px}
.qs-surprise{
  padding:8px 14px;
  border-color:rgba(221,183,92,.42);
  border-radius:999px;
  color:#f0d48b;
  background:rgba(86,62,17,.32);
}
.qs-library__filters{
  display:flex;
  gap:6px;
  flex:0 0 auto;
  padding:0 16px 8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.qs-library__filters::-webkit-scrollbar{display:none}
.qs-library__filters button{
  flex:0 0 auto;
  min-height:29px;
  padding:6px 10px;
  border-radius:999px;
  color:#9aa6b2;
  background:#080f17;
}
.qs-library__filters button.on{
  border-color:#e1b65d;
  color:#130e04;
  background:linear-gradient(135deg,#f0c975,#c9963f);
}
.qs-library__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex:0 0 auto;
  padding:7px 16px;
  border-block:1px solid rgba(190,174,142,.1);
  color:#8f9aa5;
  font-size:10px;
}
.qs-library__summary b{color:#e0bd68;font-size:11px}
.qs-library__summary span{text-align:right}
.qs-library__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  align-content:start;
  gap:7px;
  min-width:0;
  min-height:0;
  padding:10px 16px 18px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(207,166,81,.34) rgba(3,7,12,.6);
}
.qs-library__grid button.qs-card{aspect-ratio:2.02/1;border-radius:6px}
.qs-library__grid .qs-card__copy>strong{font-size:10px}
.qs-library__grid .qs-card__medium{display:none}
.qs-library__grid .qs-card__meta{inset:6px 7px auto;font-size:7px}
.qs-library__grid .qs-card__phase{display:none}
.qs-library__grid .qs-card__play{right:6px;bottom:6px;width:18px;height:18px;font-size:6px}
.qs-library__grid .qs-card__copy{left:7px;right:29px;bottom:6px}
.qs-library__empty{grid-column:1/-1;padding:40px;text-align:center;color:#a9b6bd;font-size:14px}
.qs-library__panel>.qs-status{flex:0 0 auto;margin:0 16px 10px}
#characters>.qs-shelf,.forgeStageView>.qs-shelf{z-index:4}
@media(max-width:1180px){
  .qs-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,30vw)}
  .qs-library__grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
}
@media(max-width:720px){
  .qs-shelf{margin:11px 0 16px;padding:11px}
  .qs-shelf__header{align-items:center}
  .qs-shelf__header h3{font-size:23px}
  .qs-browse{min-height:34px}
  .qs-rail{grid-auto-columns:minmax(220px,74vw)}
  .qs-library{padding:0}
  .qs-library__panel{width:100vw;height:100dvh;border:0;border-radius:0}
  .qs-library__header{padding:13px 12px 8px}
  .qs-library__tools{grid-template-columns:1fr;padding:4px 12px 8px}
  .qs-surprise{display:none}
  .qs-library__filters{padding:0 12px 8px}
  .qs-library__summary{padding:7px 12px}
  .qs-library__summary span{display:none}
  .qs-library__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:9px 10px 16px}
  .qs-library__grid button.qs-card{aspect-ratio:1.6/1}
}
@media(max-width:420px){
  .qs-library__grid{grid-template-columns:1fr}
  .qs-library__grid button.qs-card{aspect-ratio:2/1}
}
@media(prefers-reduced-motion:reduce){
  button.qs-card,.qs-card__image{transition:none!important}
  .qs-card:hover{transform:none!important}
  .qs-card:hover .qs-card__image{transform:none!important}
}

/* SITE-WIDE VISUAL-FIRST OVERRIDES */
/* Forge V4.15 — visual-first shell inspired by cinematic creative libraries */
:root{
  --vf-ink:#03070c;
  --vf-panel:#070d14;
  --vf-line:rgba(219,184,108,.14);
  --vf-gold:#e5bc68;
  --vf-gold-soft:#b79352;
  --vf-text:#f2efe8;
  --vf-muted:#82909e;
}
body.studioActive{
  background:
    radial-gradient(circle at 76% -8%,rgba(38,84,119,.13),transparent 31%),
    linear-gradient(180deg,#03070c,#050910 58%,#03070c);
}
body.studioActive .forgeAppShell{grid-template-columns:224px minmax(0,1fr)}
body.studioActive .forgeSidebar{
  padding:12px 9px 10px;
  border-right-color:rgba(218,183,107,.12);
  background:linear-gradient(180deg,rgba(4,8,13,.99),rgba(2,5,9,.99));
  box-shadow:12px 0 38px rgba(0,0,0,.28);
}
body.studioActive .forgeSidebar::after{display:none}
body.studioActive .forgeBrandBlock{gap:8px;padding:2px 5px 8px}
body.studioActive .forgeMark{
  width:34px;height:34px;
  border-radius:7px;
  color:#080603;
  font-size:15px;
  background:linear-gradient(145deg,#efcc7d,#9f6f27);
}
body.studioActive .forgeBrandName{font-size:14px;letter-spacing:.08em}
body.studioActive .forgeBrandSub{font-size:10px;line-height:1.35;letter-spacing:.1em}
body.studioActive .forgeBrandTag{
  padding:6px 5px 9px;
  color:#746d61;
  font-size:10px;
  letter-spacing:.1em;
  line-height:1.5;
}
body.studioActive .forgeSideNav{padding:3px 0 12px}
body.studioActive .navGroupLabel{
  padding:11px 8px 4px;
  color:#625f59;
  font-size:11px;
  line-height:1.2;
  letter-spacing:.16em;
}
body.studioActive .forgeSideNav button{
  gap:8px;
  min-height:40px;
  margin:1px 0;
  padding:9px 10px;
  border-radius:7px;
  color:#8f98a2;
  font-size:13px;
  line-height:1.25;
}
body.studioActive .forgeSideNav button span{width:18px;color:#8e9ba8;font-size:14px}
body.studioActive .forgeSideNav button:hover{
  transform:none;
  border-color:rgba(224,186,104,.18);
  color:#f1eadf;
  background:rgba(82,61,25,.15);
}
body.studioActive .forgeSideNav button.on{
  color:#fff4db;
  border-color:rgba(231,190,101,.28);
  background:linear-gradient(90deg,rgba(189,137,49,.24),rgba(59,43,17,.08));
  box-shadow:inset 2px 0 0 #e4b95f;
}
body.studioActive .forgeSideNav button.on span{color:#edc36d}
body.studioActive .forgeSidebarFoot{
  margin-top:5px;
  padding:8px;
  border-radius:8px;
  background:rgba(8,13,19,.7);
}
body.studioActive .forgeSidebarFoot b{font-size:12px}
body.studioActive .forgeSidebarFoot span{font-size:11px}
body.studioActive .forgeTopbar{
  min-height:60px;
  padding:9px 17px;
  border-bottom-color:rgba(214,181,109,.1);
  background:rgba(3,7,12,.91);
}
body.studioActive .forgeSearch{
  max-width:700px;
  min-height:38px;
  border-color:rgba(183,175,155,.2);
  border-radius:999px;
  background:#060c13;
}
body.studioActive .forgeSearch input{padding:9px 0;font-size:11px}
body.studioActive .forgeTopActions{gap:7px}
body.studioActive .topAction,
body.studioActive .creditPill,
body.studioActive .operatorPill{
  min-height:36px;
  border-radius:999px;
}
body.studioActive .topAction{
  color:#f1d18c!important;
  border-color:rgba(230,188,97,.28)!important;
  background:rgba(75,52,15,.25)!important;
  box-shadow:none;
}
body.studioActive #quickNewProject{
  color:#161005!important;
  background:linear-gradient(135deg,#f0ca76,#a66e20)!important;
}
body.studioActive .forgeMain{padding:14px 18px 90px!important}
body.studioActive .view>.title,
body.studioActive .projectHubHero,
body.studioActive .characterVaultHead{
  min-height:55px;
  margin:0 0 10px;
  padding:4px 2px 8px;
  border-bottom:1px solid rgba(215,182,111,.1);
}
body.studioActive .view>.title h2,
body.studioActive .projectHubHero h2,
body.studioActive .characterVaultHead h2{
  margin:2px 0 0;
  color:#edcc8b;
  font:400 clamp(27px,3vw,39px)/1 Georgia,"Times New Roman",serif;
  letter-spacing:-.025em;
}
body.studioActive .view>.title small,
body.studioActive .projectHubHero small,
body.studioActive .characterVaultHead small{
  color:#8c7751;
  font:700 7px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.2em;
}
body.studioActive .projectHubHero p,
body.studioActive .characterVaultHead p{display:none}
body.studioActive .panel,
body.studioActive .cards article,
body.studioActive .editorGrid>div,
body.studioActive .editorGrid>aside{
  border-color:rgba(151,160,165,.12);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(7,13,20,.96),rgba(4,8,13,.98));
  box-shadow:0 14px 34px rgba(0,0,0,.17);
}
body.studioActive button:not(.qs-card):not(.qs-library__backdrop){
  border-radius:7px;
}
body.studioActive button.gold{
  border-color:rgba(240,199,109,.5);
  background:linear-gradient(135deg,#e9c36f,#a36c20);
  color:#130d04;
}
body.studioActive button.needsInput{
  opacity:1;
  border-color:rgba(228,187,98,.34);
  color:#e2c486;
  background:rgba(75,54,18,.22);
  cursor:pointer;
}
body.studioActive button.needsInput:hover{border-color:#e2b75e;background:rgba(104,73,17,.34)}
body.studioActive .availabilityNote{
  margin-top:11px;
  padding:9px 11px;
  border:1px solid rgba(89,209,150,.22);
  border-radius:7px;
  color:#aee7c9;
  background:rgba(17,73,49,.2);
  font-size:10px;
  line-height:1.4;
}
body.studioActive #dashboard{max-width:1600px}
body.studioActive #dashboard .dashHero{display:none}
body.studioActive #dashboard>.qs-shelf{margin-top:0}
body.studioActive .dashActionGrid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin:9px 0;
}
body.studioActive .dashActionGrid button{
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:8px;
  min-height:58px;
  padding:8px 9px;
  border-color:rgba(143,154,160,.13);
  border-radius:8px;
  background:#060c13;
}
body.studioActive .dashActionGrid button>span{
  width:27px;height:27px;
  border-color:rgba(225,185,98,.16);
  border-radius:6px;
  color:#dfb762;
  background:rgba(85,59,17,.16);
  font-size:14px;
}
body.studioActive .dashActionGrid b{font-size:10px}
body.studioActive .dashActionGrid small{display:none}
body.studioActive .dashActionGrid i{font-size:12px}
body.studioActive .dashMainGrid{grid-template-columns:minmax(0,2fr) minmax(230px,.7fr) minmax(190px,.5fr);gap:8px}
body.studioActive .dashRecent,
body.studioActive .dashStatus{padding:11px!important}
body.studioActive .dashSectionHead{margin-bottom:8px}
body.studioActive .dashSectionHead h3{font:400 18px/1 Georgia,"Times New Roman",serif;color:#e9d6b1}
body.studioActive .dashProjectGrid{gap:7px}
body.studioActive .dashProjectArt{height:92px}
body.studioActive .dashProjectCopy{padding:7px}
body.studioActive .dashPromo{min-height:210px;border-color:rgba(218,179,91,.14)}
body.studioActive .dashPromoCopy p{display:none}
body.studioActive .dashPromoCopy h3{font-family:Georgia,"Times New Roman",serif;font-weight:400}
body.studioActive .dashComposerPreview{margin-top:8px;padding:10px 12px!important}
body.studioActive .dashComposerPreview small{font-size:7px}
body.studioActive .dashComposerPreview h3{font:400 18px/1 Georgia,"Times New Roman",serif}
body.studioActive .dashToolGrid{gap:7px;margin-top:8px}
body.studioActive .dashToolGrid article{min-height:58px;padding:9px}
body.studioActive .dashToolGrid small{display:none}
body.studioActive .forgeCreationGrid{gap:9px}
body.studioActive .forgeComposer,
body.studioActive .forgeStatusPanel{padding:14px}
body.studioActive .composerHead{margin-bottom:10px}
body.studioActive .composerHead h3,
body.studioActive .statusHead h3{font-family:Georgia,"Times New Roman",serif;font-weight:400}
body.studioActive .composerBadge,
body.studioActive .statusLive,
body.studioActive .dashLive{
  border-color:rgba(93,221,158,.24);
  color:#83dbae;
  background:rgba(17,70,48,.18);
}
body.studioActive .forgeLowerDash .lowerCard p{display:none}
body.studioActive .forgeLowerDash .lowerCard{min-height:92px}
body.studioActive .projectFilterBar{margin:8px 0 12px}
body.studioActive .projectExperienceGrid{gap:8px}
body.studioActive #runwayPreflight>.panel>p,
body.studioActive #billing .billingHero>p{max-width:760px;color:#8c99a5;font-size:11px}
body.studioActive .statusRow{min-height:32px}
body.studioActive .statusRow b{color:#e8c77f}
body.studioActive .characterInstructionCard p{font-size:10px;line-height:1.45}
body.studioActive .characterDnaLocks b{font-size:7px}
body.studioActive .characterDnaLocks small{font-size:7px}
body.studioActive .revelationSignal b.locked{color:#65dda2}
@media(max-width:1180px){
  body.studioActive .forgeAppShell{grid-template-columns:200px minmax(0,1fr)}
  body.studioActive .forgeBrandName{font-size:13px}
  body.studioActive .forgeSideNav button{font-size:12px}
  body.studioActive .dashMainGrid{grid-template-columns:minmax(0,1.7fr) minmax(220px,.65fr)}
  body.studioActive .dashPromo{display:none}
}
@media(max-width:900px){
  body.studioActive .forgeAppShell{display:block}
  body.studioActive .forgeMain{padding:11px 11px 98px!important}
  body.studioActive .forgeTopbar{padding:8px 10px}
  body.studioActive .forgeTopActions{gap:5px}
  body.studioActive .creditPill span,
  body.studioActive .paidCreditsAction{display:none}
  body.studioActive .dashActionGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.studioActive .dashMainGrid{grid-template-columns:1fr}
  body.studioActive .forgeSidebar{
    inset:auto 7px 7px;
    padding:6px;
    border:1px solid rgba(218,183,107,.16);
    border-radius:11px;
    background:rgba(3,7,12,.95);
  }
  body.studioActive .forgeSideNav button{min-height:44px;padding:9px 10px;font-size:12px}
}
@media(max-width:620px){
  .qs-browse,
  .qs-surprise,
  .qs-library__filters button,
  .qs-library__close{min-height:44px}
  .qs-library__search{font-size:16px}
  body.studioActive .forgeSearch{min-width:0}
  body.studioActive .forgeTopActions #quickNewProject{display:none}
  body.studioActive .dashActionGrid{grid-template-columns:1fr 1fr}
  body.studioActive .dashActionGrid button:last-child{display:none}
  body.studioActive .dashComposerPreview{grid-template-columns:1fr}
  body.studioActive .dashComposerPreview button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  body.studioActive *{scroll-behavior:auto!important}
}