/* Shared visual language for the landing page and creative workspace. */
:root { --text:#f0f2f8; --muted:#adb5c8; --purple:#aea2ed; --purple-light:#c6bcff; --border:#2c3345; --surface:#141925; --raised:#1b2231; --orange:#eabd96; }
body { font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:#0c1018; }
button,input,textarea,select { font:inherit; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button,summary,.button { transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
button:active,.button:active { transform:translateY(1px); }
:is(button,a,summary,input,select,textarea):focus-visible { outline:2px solid #c8beff; outline-offset:4px; }
[hidden] { display:none !important; }
.shell { height:100dvh; background:#0c1018; }
.shell .sidebar { width:222px; padding:26px 16px 18px; background:#10151f; box-shadow:none; border-color:#242b3b; }
.sidebar .logo { font-size:22px; letter-spacing:-.7px; padding:4px 8px 30px; text-shadow:none; color:#eae6fc; }
.studio-nav { display:flex; flex-direction:column; gap:5px; }
.studio-nav .navbtn { display:flex; gap:12px; align-items:center; padding:12px; min-height:46px; font-size:14px; font-weight:500; border-radius:10px; margin:0; }
.studio-nav svg { width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.studio-nav .navbtn.active { background:#26283d; border-color:#42435e; color:#e5dfff; }
.sidebar .upgrade { margin-top:15px; background:#eabd96; color:#221913; border-radius:10px; }
.sidebar .adbox { font-size:10px; padding:12px; opacity:.65; }
.shell .main { display:flex; flex-direction:column; min-height:0; }
.shell .top { flex:none; height:78px; padding:0 30px; background:#10151fe8; box-shadow:none; gap:18px; z-index:15; }
.top:after { content:none !important; }
.top > div:first-child { flex:1; min-width:0; }
.top b { font-size:16px; font-weight:600; }
.top small { font-size:12px; margin-top:5px; }
.top .quota { background:none; border:0; font-size:11px; }
.shell .content,.pro .content { flex:1; height:auto; min-height:0; }
.banner { flex:none; height:25px; font-size:9px; }
.panel.active { animation:studio-enter .32s ease both; }
.creator { background-image:none; padding:40px clamp(20px,4vw,70px); }
.creator > h1,.welcome h1 { color:#f0f2f8; background:none; text-shadow:none; font-size:clamp(28px,3.3vw,42px); font-weight:550; letter-spacing:-1.4px; }
.creator > h1 { margin:0 0 12px; }
.creator > p.muted { margin-top:0; font-size:14px; line-height:1.7; }
.creator form { text-align:left; padding:26px; border:1px solid var(--border); border-radius:18px; background:#131925; }
.creator :is(textarea,input,select),.studio-preferences :is(input,select) { background:#0e1420; color:var(--text); border:1px solid #3b4459; border-radius:9px; padding:12px; min-width:0; }
.creator button:not(.tool-card),.studio-disclosure button { min-height:40px; font-weight:500; padding:10px 14px; border:1px solid #3b4459; border-radius:9px; color:var(--text); background:#1b2231; cursor:pointer; box-shadow:none; }
.creator form > button[type="submit"],#creatorForm button[type="submit"],.paybtn { background:#eabd96 !important; color:#241a14 !important; border-color:#eabd96 !important; font-weight:650; }
.creator .preset-row button { box-shadow:none !important; background:#1b2231 !important; }
.grid,.template-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.creator .tool-card { min-width:0; min-height:152px; padding:24px; background:#161d2a !important; border-color:#30394b !important; box-shadow:none; border-radius:15px; justify-content:flex-start; }
.creator .tool-card:before,.creator .tool-card:after { content:none; }
.creator .tool-card:hover { transform:translateY(-4px); background:#1c2536 !important; box-shadow:0 12px 30px #0003; border-color:#8174b5 !important; }
.creator .tool-card h3 { font-size:16px; font-weight:600; }
.creator .tool-card p { font-size:13px; color:#b8c0d2 !important; line-height:1.65; }
.creator .tool-card p { font-weight:400; }
.studio-hero { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:300px; overflow:hidden; border-radius:20px; border:1px solid #3a4155; background:#151c2b; margin-bottom:32px; text-align:left; }
.studio-hero-copy { padding:36px; }
.studio-eyebrow { display:block; font-size:10px; letter-spacing:2.2px; font-weight:650; color:#d2bc9f; margin-bottom:14px; text-transform:uppercase; }
.studio-hero h1 { margin:0 0 14px; font-weight:550; font-size:clamp(28px,3vw,42px); letter-spacing:-1.4px; line-height:1.13; }
.studio-hero p { color:#b9c2d6; font-size:14px; line-height:1.7; max-width:360px; margin:0; }
.studio-hero img { width:100%; height:100%; min-height:300px; object-fit:cover; }
.studio-section-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:32px 0 16px; text-align:left; }
.studio-section-title h2 { font-weight:550; font-size:20px; margin:0; letter-spacing:-.5px; }
.studio-section-title span { color:#aeb6c7; font-size:12px; }
.template-grid .tool-card { padding:0 0 22px; gap:0; }
.template-grid .tool-card img { width:100%; height:155px; object-fit:cover; margin-bottom:20px; transition:transform .5s ease; }
.template-grid .tool-card:hover img { transform:scale(1.035); }
.template-grid .tool-card :is(h3,p) { margin-left:20px; margin-right:20px; }
.studio-disclosure { position:relative; font-size:13px; }
.studio-disclosure > summary { display:list-item; list-style:revert; cursor:pointer; color:#c8ccda; padding:10px 13px; min-height:40px; border:1px solid #323c50; border-radius:9px; background:#171e2b; white-space:nowrap; }
.studio-disclosure[open] > summary { color:#ece8ff; border-color:#8b7eaf; }
.studio-menu { position:absolute; right:0; top:calc(100% + 8px); width:220px; display:grid; padding:8px; gap:4px; border:1px solid #444e63; background:#18202e; box-shadow:0 18px 40px #0008; border-radius:12px; z-index:25; }
.studio-menu button { text-align:left; margin:0; width:100%; background:transparent; border-color:transparent; font-size:13px; }
.studio-menu button:hover { background:#293249; }
#chat .chat-tools { max-width:930px; padding:18px 24px 8px; gap:8px; flex-wrap:nowrap; }
.chat-tools label { display:none; }
.chat-tools button,.chat-tools select { min-height:40px; font-size:13px; background:#171e2b; border-color:#323c50; border-radius:9px; }
.chat-tools #newChat { background:#d6cff3; color:#211d30; border-color:#d6cff3; font-weight:600; }
.studio-preferences { flex:none; width:calc(100% - 48px); max-width:882px; margin:0 auto 4px; }
.studio-preferences > summary { background:none; border-color:transparent; display:inline list-item; font-size:12px; min-height:30px; padding:5px 0; }
.studio-preferences[open] { padding:12px 18px; border:1px solid #323c50; border-radius:12px; max-height:32vh; overflow:auto; background:#141b28; }
.studio-preferences .chat-preferences { margin:12px 0; }
.custom-instructions { padding:10px 0; }
.custom-instructions summary { cursor:pointer; padding:8px 0; color:#d6cff3; }
.custom-instructions label { display:grid; gap:8px; margin:12px 0; }
.custom-instructions input { width:100%; }
#customInstructionsStatus { display:block; margin:10px 0; color:#b9c2d6; line-height:1.6; }
#chat .chat-history-status { max-width:882px; width:calc(100% - 48px); margin:4px auto; line-height:1.5; font-size:11px; }
#chat .messages { padding:12px 28px 24px; }
.welcome { margin:6vh auto; max-width:590px; }
.welcome:before { content:''; display:block; width:86px; height:86px; margin:0 auto 22px; border-radius:26px; background:url('/assets/studio-orbit.svg') center / cover; border:1px solid #505473; box-shadow:0 12px 45px #6568ac25; }
.welcome h1 { font-size:32px; letter-spacing:-1px; }
.welcome p { color:#b6bfd1; line-height:1.7; }
.msg { font-size:15px; line-height:1.8; max-width:850px; }
.msg.user { background:#202a3b; border:1px solid #364359; border-radius:16px 16px 4px 16px; }
.msg.assistant { background:none; border:0; padding-left:4px; }
.studio-reply-more { margin-top:10px; white-space:normal; }
.studio-reply-more > summary { width:fit-content; border:0; background:none; color:#b5bfd4; padding:6px 0; font-size:12px; min-height:32px; }
.studio-reply-actions { display:flex; flex-wrap:wrap; gap:8px; padding:10px 0; }
.studio-reply-actions button { font-size:12px; }
#chat .composer { border:1px solid #45506b; border-radius:18px; background:#192232; box-shadow:0 8px 28px #0003; padding:8px; }
.composer #sendChat { color:#241d34; background:#d6cff3; border-radius:12px; }
.composer #voiceChat { background:transparent; color:#d6cff3; }
.chat-input-count { font-size:10px; color:#aab5c9; }
.accountCard,.project-card { background:#151c29; box-shadow:none; border-color:#303c51; }
.project-toolbar { gap:10px; padding:16px; border:1px solid #303c51; border-radius:14px; background:#141b27; }
.project-toolbar input { flex:1; min-width:150px; }
.out img { max-height:65vh; object-fit:contain; }
.auth { background:radial-gradient(ellipse at 80% 20%,#30344c,transparent 60%),#0c1018; }
.authbox { box-shadow:0 30px 90px #0005; }
/* Landing page */
.container > .nav { box-shadow:none; background:#10151fe8; backdrop-filter:blur(16px); }
.hero h1 { font-size:clamp(40px,5.6vw,72px); line-height:1.06; letter-spacing:-3px; font-weight:550; }
.hero .hero-card { min-height:480px; background:#172030 url('/assets/studio-landscape.svg') center / cover; animation:studio-float 9s ease-in-out infinite; border-color:#4b5367; }
.hero-card:after { display:none; }
.hero-card-top { color:#e7e7f2; text-shadow:0 1px 5px #000; font-size:11px; letter-spacing:1px; }
.hero-card .prompt-box { background:#111a29e8; backdrop-filter:blur(16px); border:1px solid #7a839455; padding:22px; }
.hero-card .prompt-box strong { font-weight:500; line-height:1.35; font-size:21px; }
.button { border-radius:10px; }
.button-orange { background:#eabd96; color:#231a14; border-color:#eabd96; }
.container .card { border-radius:16px; box-shadow:none; background:#161d2a; color:#eff1f8; }
.container .card p { color:#b6bfd1; line-height:1.7; }
.container .section h2 { letter-spacing:-1px; font-weight:550; }
.studio-home-art { display:block; width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:22px; }
.container .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.studio-mobile-signout { display:none; }
.studio-generation-fields { display:grid; gap:12px; padding-top:18px; }
.studio-generation-options > summary { text-align:left; }
@keyframes studio-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes studio-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@media(max-width:1100px) { .grid,.template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .shell .sidebar { width:190px; } .top .quota { display:none; } }
@media(max-width:760px) {
  .shell .sidebar { width:100%; padding:10px 14px 0; display:grid; grid-template-columns:1fr auto; gap:0; }
  .sidebar .logo { grid-row:1; grid-column:1; font-size:19px; padding:4px 0; }
  .sidebar #logout { grid-row:1; grid-column:2; width:auto; padding:8px 12px; min-height:36px; }
  .sidebar .upgrade,.sidebar .grow,.sidebar .adbox { display:none; }
  .shell .sidebar { padding:5px 4px max(5px,env(safe-area-inset-bottom)); border-bottom:0; }
  .studio-nav { grid-row:1; grid-column:1/-1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; padding:0; }
  .studio-nav .navbtn { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:55px; padding:5px 1px; font-size:9px; gap:5px; white-space:normal; line-height:1.2; }
  .studio-nav svg { width:16px; height:16px; }
  .shell .top { height:60px; min-height:60px; padding:0 16px; gap:8px; }
  .top small { font-size:11px; }.studio-utilities > summary { font-size:11px; padding:9px; }
  .creator { padding:24px 16px; }.creator form { padding:18px; }
  .studio-hero { grid-template-columns:1fr; }.studio-hero-copy { padding:26px; }.studio-hero img { height:170px; min-height:0; }
  .studio-section-title span { max-width:130px; text-align:right; }
  .creator .tool-card { padding:18px; min-height:140px; }.template-grid .tool-card { padding:0 0 18px; }
  .template-grid .tool-card img { height:120px; }.template-grid .tool-card :is(h3,p) { margin-left:14px; margin-right:14px; }
  #chat .chat-tools { padding:12px 12px 4px; gap:6px; }.chat-tools button,.chat-tools select { font-size:12px; padding:8px; }
  .studio-conversation > summary { font-size:11px; padding:10px 8px; }
  .studio-preferences,#chat .chat-history-status { width:calc(100% - 28px); }
  #chat .messages { padding:8px 16px 20px; }.welcome { margin:4vh auto; }.welcome h1 { font-size:27px; }
  .welcome:before { width:60px; height:60px; border-radius:18px; margin-bottom:16px; }
  .hero .hero-card { min-height:360px; }.hero h1 { letter-spacing:-2px; }
  .project-toolbar { flex-wrap:wrap; }.studio-menu { max-width:calc(100vw - 32px); }
  .studio-menu .studio-mobile-signout { display:block; }
  .container .grid { grid-template-columns:1fr; }
  .chat-keyboard .shell .sidebar,.chat-keyboard .shell .top { display:none; }
}
@media(max-width:390px) { .grid { gap:10px; }.creator .tool-card h3 { font-size:14px; }.creator .tool-card p { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
/* Readable assistant content and copyable code; safe on narrow screens. */
.access-hint { color:#c0c6d2; font-size:14px; line-height:1.6; margin:12px 0; }
.pfindr-tag { display:inline-block; color:#d0c4ff; font-size:12px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; }
.pfindr-addon-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; border:1px solid #514568; border-radius:16px; background:linear-gradient(125deg,#25203a,#141b27); }
.pfindr-addon-card h3 { margin:8px 0; font-size:24px; }
.pfindr-addon-card p { margin:0 0 8px; color:#d0d3df; line-height:1.6; }
.pfindr-addon-card small { color:#b5bdcd; line-height:1.6; }
.pfindr-addon-card button { flex-shrink:0; min-height:44px; }
.creator.pfindr-panel button,.creator .pfindr-addon-card button { min-height:44px; }
.pfindr-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.pfindr-heading h1 { margin:8px 0; font-size:clamp(30px,4vw,44px); letter-spacing:-1px; }
.pfindr-heading button { flex-shrink:0; }
.pfindr-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:24px 0 12px; }
.pfindr-actions :is(button,a),.pfindr-heading button { min-height:44px; }
.pfindr-actions #pfindrLoad { background:#d0b1f0; border-color:#d0b1f0; color:#21172a; font-weight:650; }
.pfindr-actions a { display:inline-flex; align-items:center; padding:10px 0; color:#d1c3ff; text-decoration:underline; text-underline-offset:4px; line-height:1.5; }
.pfindr-status { color:#c1c8d5; font-size:14px; line-height:1.65; margin:12px 0 20px; }
.pfindr-frame-host { width:100%; overflow:hidden; border:1px solid #4e465f; border-radius:14px; background:#fff; }
.pfindr-frame { display:block; width:100%; height:70vh; min-height:500px; border:0; background:#fff; }
.pfindr-access { margin-top:24px; padding:16px 20px; border:1px solid #343d50; border-radius:12px; color:#c6ccda; }
.pfindr-access summary { min-height:28px; cursor:pointer; color:#e2daf5; }
.pfindr-access p { font-size:14px; line-height:1.7; max-width:900px; }
.pfindr-panel a:focus-visible { outline:2px solid #c8bbff; outline-offset:4px; }
@media(max-width:760px) {
  .pfindr-addon-card,.pfindr-heading { align-items:flex-start; flex-direction:column; }
  .pfindr-addon-card { padding:20px; gap:20px; }
  .pfindr-addon-card button { width:100%; }
  .pfindr-frame { min-height:480px; height:70vh; }
}
.gallery-card .studio-home-art { aspect-ratio:1; object-fit:contain; height:auto; background:#10151f; }
.gallery-card details { margin:18px 0; line-height:1.6; }
.gallery-card summary { cursor:pointer; color:#c6bcff; }
.gallery-card p { overflow-wrap:anywhere; }
.creator-starters { margin:24px 0; max-width:900px; }
.creator-starters h2 { font-size:20px; margin-bottom:8px; }
.creator-starters p { font-size:14px; line-height:1.6; color:#b6bfd1; }
.creator-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.creator-template { text-align:left; color:#f0f2f8; background:#171d2b; border:1px solid #3c4257; border-radius:12px; padding:16px; cursor:pointer; }
.creator-template strong,.creator-template span { display:block; }
.creator-template span { margin-top:8px; font-size:13px; color:#b6bfd1; line-height:1.5; }
.creator-template:hover { background:#28283e; border-color:#aea2ed; }
@media(max-width:480px) { .creator-template-grid { grid-template-columns:1fr; } }
.guest-signin,.starter-actions button,#projects > button { border:1px solid #635c83; background:#29253e; color:#f0eaff; border-radius:10px; padding:10px 14px; min-height:44px; cursor:pointer; }
.guest-signin:hover,.starter-actions button:hover,#projects > button:hover { background:#39334f; }
.starter-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:24px 0; }
.starter-actions button { white-space:normal; }
.top .guest-signin { margin-left:auto; max-width:190px; white-space:normal; }
.guest-signin:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid #c8bbff; outline-offset:4px; }
.authbox { max-height:calc(100dvh - 32px); overflow-y:auto; }
.formatted-answer {white-space:normal;line-height:1.7;overflow-wrap:anywhere;min-width:0}
.formatted-answer p {margin:.45rem 0 1rem;color:inherit}
.formatted-answer ul,.formatted-answer ol {padding-left:1.5rem}
.formatted-answer a {color:#c8bbff;text-decoration:underline}
.formatted-answer code {font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:#11151e;padding:.15em .35em;border-radius:4px}
.formatted-answer .code-block {border:1px solid #3b4253;border-radius:12px;background:#0d1017;margin:1rem 0;padding:12px;max-width:100%;overflow:hidden}
.code-block>span {color:#bfc6d6;font-size:.8rem}
.code-block>button {float:right;min-height:36px;padding:6px 12px!important;font-size:.8rem!important}
.code-block pre {clear:both;overflow:auto;white-space:pre;margin-top:18px;padding:8px 0;max-width:100%}
.code-block pre code {background:none;padding:0}
/* Public product walkthrough: native disclosures remain usable without JavaScript. */
#models,#gallery { scroll-margin-top:110px; }
.walkthrough-examples-link { align-self:center; padding:12px 4px; color:#c8bbff; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.product-walkthrough { display:grid; gap:12px; }
.product-walkthrough > details { border:1px solid #3c4257; border-radius:16px; background:#10151f; }
.product-walkthrough > details > summary { padding:20px 24px; color:#f6f7fb; font-size:20px; font-weight:700; line-height:1.4; cursor:pointer; border-radius:15px; }
.product-walkthrough > details > summary::marker { color:#b6aaff; }
.product-walkthrough > details[open] > summary { border-bottom:1px solid #303748; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.walkthrough-number { margin-right:12px; color:#ffb27a; font-size:14px; letter-spacing:1px; }
.walkthrough-content { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); align-items:center; gap:28px; padding:24px; }
.walkthrough-copy { min-width:0; }
.walkthrough-copy p { margin:0 0 18px; color:#c0c6d2; line-height:1.65; overflow-wrap:anywhere; }
.walkthrough-copy .button { margin-top:4px; max-width:100%; }
.walkthrough-shot { display:block; min-width:0; overflow:hidden; border:1px solid #3c4257; border-radius:10px; background:#080a0f; }
.walkthrough-shot img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.walkthrough-shot span { display:block; padding:12px 16px; color:#c8bbff; font-size:13px; line-height:1.4; text-decoration:underline; text-underline-offset:3px; border-top:1px solid #303748; }
.walkthrough-shot:hover,.product-walkthrough > details > summary:hover { background:#1b2030; }
.product-walkthrough :is(summary,a):focus-visible,.walkthrough-examples-link:focus-visible { outline:2px solid #ffb27a; outline-offset:4px; }
@media(max-width:800px) {
  .walkthrough-content { grid-template-columns:minmax(0,1fr); gap:22px; padding:20px; }
  .product-walkthrough > details > summary { padding:18px 20px; font-size:18px; }
}