body .hero-studio{max-width:720px}
#studio.studio-minimal{background:transparent;border:0;box-shadow:none;overflow:visible;border-radius:24px;backdrop-filter:none}
#studio .studio-layout{display:block}#studio #generator-form{padding:0;border:0}
.studio-composer{position:relative;isolation:isolate;background:#19191f;border:1px solid #7df9ff66;border-radius:24px;box-shadow:0 0 18px #7df9ff16}
.electric-border__canvas{position:absolute;top:-64px;left:-64px;z-index:1;display:block;pointer-events:none}
#studio #prompt{display:block;resize:vertical;min-height:126px;height:126px;max-height:320px;padding:24px 24px 12px;border:0;border-radius:24px 24px 0 0;background:transparent;color:#f1f1f5;font:inherit;font-size:16px;line-height:1.65;box-shadow:none;caret-color:#7df9ff}
#studio #prompt::placeholder{color:#aaaab7}#studio #prompt:focus{outline:none}.studio-composer:focus-within{border-color:#b0fbff}
.composer-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px 16px}
#studio .composer-icon,#studio .composer-submit,.composer-settings>summary{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:1px solid #ffffff12;border-radius:50%;background:#2b2b34;color:#dedee8;padding:0;cursor:pointer}
.composer-model{font-size:13px;font-weight:500;color:#d2d2df;margin-right:auto}.composer-settings{position:relative}
.composer-settings>summary{width:auto;border-radius:20px;gap:8px;padding:0 12px;font-size:12px;list-style:none}.composer-settings>summary::-webkit-details-marker{display:none}
#studio .composer-submit{background:#ededf4;color:#18181e;border:0}#studio .composer-submit:hover{background:#c7fbff}#studio .composer-submit:disabled{opacity:.5;cursor:wait}
#studio .composer-icon:hover,.composer-settings>summary:hover{background:#3a3a46}#studio button:focus-visible,.composer-settings>summary:focus-visible{outline:2px solid #7df9ff;outline-offset:4px}
.composer-options{position:absolute;right:0;top:calc(100% + 12px);width:320px;max-width:calc(100vw - 48px);z-index:20;background:#202026;border:1px solid #45454f;border-radius:16px;padding:16px;box-shadow:0 14px 32px #0006}
#studio .composer-options .settings-row{display:block;margin:18px 0 0}#studio .composer-options fieldset+fieldset{margin-top:16px}#studio .composer-options .segmented{background:#131318}#studio .composer-options .segmented input:checked+span{background:#35474c;color:#e4fcff;box-shadow:none}#studio .composer-options .segmented input:focus-visible+span{outline-color:#7df9ff}
#studio .form-status{font-size:12px;line-height:1.6;margin:16px 8px 0;color:#aaaab7}#studio .reference-area{margin:22px 0 0;padding:16px;border:1px solid #3b3b45;border-radius:16px;background:#19191f}#studio .reference-area[hidden]{display:none}#studio .upload-label{border-color:#575766}#studio #reference-urls{width:100%;min-height:90px;height:auto;background:#131318}
#studio .studio-preview{display:none;min-height:0;background:transparent;border-radius:16px;margin-top:24px}#studio .studio-preview:has(img){display:block}#studio .preview-center{position:relative;inset:auto;transform:none;padding:0;width:100%;display:grid;gap:16px}#studio .preview-center a{display:block}#studio .preview-center img{border-radius:16px}#studio .preview-center a span{display:block;margin-top:8px;font-size:13px;color:#c5f7fa}#studio .preview-bottom{position:static;padding:12px 0;font-size:12px}
@media(max-width:600px){#studio #prompt{font-size:16px;padding:20px 18px 10px;min-height:132px;height:132px}.composer-toolbar{padding:8px 12px 12px;gap:8px}.composer-model{font-size:12px}.composer-settings>summary{padding:0 10px;gap:6px}.composer-settings>summary svg{width:16px}.composer-options{right:-48px}}
@media(prefers-reduced-motion:reduce){.electric-border__canvas{display:none}}

#studio [hidden]{display:none!important}
#studio .composer-settings>summary span{font-size:12px;font-weight:400;color:#dedee8;line-height:1;letter-spacing:normal}

/* Settings popover: compact rows and scoped summary styles. */
#studio .composer-settings>summary{gap:8px;transition:background .18s ease,border-color .18s ease}
#studio .composer-settings>summary span{transform:none;transition:none;white-space:nowrap}
#studio .composer-settings[open]>summary{background:#303d42;border-color:#7df9ff55}
#studio .composer-options{width:332px;padding:12px;background:#1c1c22;border:1px solid #ffffff18;border-radius:16px;box-shadow:0 18px 48px #0008;text-align:left}
#studio .composer-options>.segmented{padding:3px;gap:3px;border-radius:10px;background:#111115}
#studio .composer-options .segmented span{display:flex;align-items:center;justify-content:center;min-height:36px;padding:6px 10px;font-size:12px;font-weight:500;line-height:1.2;border-radius:7px;color:#bcbcc8;transition:background .16s ease,color .16s ease}
#studio .composer-options .segmented label:hover span{background:#ffffff08;color:#f1f1f5}
#studio .composer-options .segmented input:checked+span{background:#c6f4f3;color:#173235;box-shadow:none}
#studio .composer-options .settings-row{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 2px 4px}
#studio .composer-options .settings-row fieldset{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;position:relative;min-height:36px;padding-left:80px}
#studio .composer-options .settings-row fieldset+fieldset{margin:0}
#studio .composer-options .settings-row legend{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:12px;font-weight:400;color:#aaaab7;margin:0;padding:0}
#studio .composer-options .settings-row .segmented{grid-column:1/-1;gap:3px;padding:3px;border-radius:9px;background:#121216}
#studio .composer-options .compact span{min-height:30px;padding:5px 8px;font-size:11px;font-variant-numeric:tabular-nums}
@media(max-width:600px){#studio .composer-options{width:316px;max-width:calc(100vw - 48px);right:-48px}#studio .composer-options .settings-row fieldset{padding-left:76px;grid-template-columns:76px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){#studio .composer-settings>summary,#studio .composer-options .segmented span{transition:none}}
/* Reference dropdown floats below the form without changing hero alignment. */
#studio #generator-form{position:relative}
#studio .reference-area{position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:30;margin:0;max-height:min(360px,55svh);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 16px 40px #0006}
body .hero.hero-motion{overflow:visible}
/* Shared credit packs on the home and pricing pages. */
.credit-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.credit-pack-grid .credit-pack{display:flex;flex-direction:column;padding:30px;border:1px solid #38383f;border-radius:16px;background:#16161b;color:#f3f3f6;min-width:0;scroll-margin-top:110px}
.credit-pack h3{font-size:24px;font-weight:750;letter-spacing:-.5px}
.credit-pack .pack-purpose{font-size:15px;line-height:1.65;min-height:75px;margin:14px 0 0;color:#bdbdc9}
.credit-pack .plan-price{font-size:46px;font-weight:650;letter-spacing:-2px;margin:24px 0 0;line-height:1.2}
.credit-pack .plan-price small{font-size:12px;letter-spacing:0;color:#bdbdc9}
.credit-pack .pack-billing{font-size:14px;margin:10px 0 24px;color:#bdbdc9}
.credit-pack .plan-credits{font-size:24px;font-weight:650;color:#f3f3f6;margin:0;padding-bottom:20px;border-bottom:1px solid #38383f}
.credit-pack ul{padding-left:19px;margin:20px 0 16px;font-size:14px;line-height:1.7;color:#dddde5}
.credit-pack li+li{margin-top:10px}
.credit-pack .pack-estimate{font-size:12px;line-height:1.6;color:#aaaab8;margin:0 0 24px}
.credit-pack .button{margin-top:auto;width:100%;min-height:48px}
.payment-benefits{display:flex;justify-content:center;flex-wrap:wrap;gap:24px;padding-top:28px;color:#c6c6cf;font-size:14px}
.payment-benefits>span{display:inline-flex;align-items:center;gap:10px}.payment-benefits svg{flex-shrink:0;color:#bce9e8}
@media(max-width:900px){.credit-pack-grid{gap:14px}.credit-pack-grid .credit-pack{padding:22px}.credit-pack .plan-price{font-size:38px}}
@media(max-width:700px){.credit-pack-grid{grid-template-columns:1fr}.credit-pack .pack-purpose{min-height:0}.payment-benefits{align-items:center;flex-direction:column;gap:14px}}
.generation-cost{font-size:12px;white-space:nowrap;color:#c6f4f3;font-variant-numeric:tabular-nums}
#studio .studio-preview.has-generation{display:block;padding:0;border:0}
#studio .preview-center img{width:100%;max-height:520px;object-fit:contain}
.generation-wait{position:relative;overflow:hidden;min-height:260px;display:flex;align-items:center;justify-content:center;gap:20px;background:linear-gradient(135deg,#15272b,#19191f);border:1px solid #7df9ff55;border-radius:18px;text-align:left;padding:28px}
.generation-wait strong,.generation-progress strong{display:block;font-size:17px;color:#e8fcff}.generation-wait small,.generation-progress small{display:block;margin-top:8px;color:#b4c5cc;font-size:13px}
.generation-spinner{display:inline-block;flex-shrink:0;width:40px;height:40px;border:3px solid #7df9ff22;border-top-color:#a6f8ff;border-right-color:#a6f8ff;border-radius:50%;animation:generation-spin 1s linear infinite}
.generation-sweep{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#b5faff12 50%,transparent 70%);transform:translateX(-100%);animation:generation-sweep 2.8s ease-in-out infinite;pointer-events:none}
.generation-progress{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);padding:18px 22px;border:1px solid #7df9ff66;border-radius:16px;background:#18272bf5;box-shadow:0 12px 50px #0008;text-decoration:none}.generation-progress[hidden]{display:none}.generation-progress .generation-spinner{width:30px;height:30px}
@keyframes generation-spin{to{transform:rotate(360deg)}}@keyframes generation-sweep{to{transform:translateX(100%)}}
@media(max-width:600px){.generation-cost{font-size:11px}.composer-toolbar{flex-wrap:wrap}.generation-progress{right:16px;bottom:16px}.generation-wait{min-height:230px;padding:20px;gap:14px}}
@media(prefers-reduced-motion:reduce){.generation-spinner,.generation-sweep{animation:none}.generation-spinner{border-color:#a6f8ff}.generation-wait{border-color:#a6f8ff}}
/* Keep the electric glow inside the viewport while leaving vertical popovers open. */
body .hero.hero-motion{overflow-x:clip;overflow-y:visible}
.generated-result{position:relative;background:transparent;padding:0;border:0;box-shadow:none}.result-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px;background:#151a20f5}.generated-result>.result-actions{position:static;justify-content:center;gap:10px;padding:16px 0 0;background:transparent}.result-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 10px;border:1px solid #ffffff35;border-radius:9px;background:#272e38;color:#f2f7fc;font:inherit;font-size:12px;cursor:pointer}.result-action:hover{background:#354653}.result-action:focus-visible{outline:2px solid #a6f8ff;outline-offset:2px}.result-action:disabled{opacity:.5;cursor:wait}.result-reopen{margin-top:12px;padding:9px 16px;background:#273940;border:1px solid #8de9ef66;border-radius:9px;color:#e6fcff;cursor:pointer}.generated-image-dialog{padding:0;border:1px solid #ffffff35;border-radius:14px;background:#0f1218;color:#f1f5fa;max-width:96vw;max-height:94dvh;width:fit-content;margin:auto;overflow:auto}.generated-image-dialog::backdrop{background:#03070de8;backdrop-filter:blur(8px)}.generated-image-dialog>.result-actions{position:sticky;top:0;z-index:1}.generated-image-dialog>img{display:block;max-width:92vw;max-height:calc(90dvh - 90px);object-fit:contain;margin:auto}.generated-image-dialog>p{font-size:13px;padding:0 16px}.generated-image-dialog>p:empty{display:none}

#studio .generated-result>img{display:block;width:auto;max-width:100%;height:auto;max-height:520px;margin-inline:auto;border-radius:14px}
.generated-result .result-action{min-height:40px;padding:9px 16px;gap:7px;border-radius:999px;border:1px solid #bcf3f34d;background:#d4f6f21a;color:#e2faf8;backdrop-filter:blur(12px);font-size:12px;font-weight:500;transition:background .18s ease,border-color .18s ease,transform .18s ease}.generated-result .result-action:hover{background:#d4f6f233;border-color:#bcf3f399;transform:translateY(-1px)}.generated-result .result-action[aria-label="Download image"]{background:#c4efeb;color:#143c3d;border-color:#c4efeb;box-shadow:0 3px 14px #7df9ff18}.generated-result .result-action[aria-label="Download image"]:hover{background:#dcfaf5}.generated-result .result-action[aria-label="Close preview"]{background:#ffffff0d;color:#d2dcde;border-color:#ffffff29}@media(max-width:420px){.generated-result .result-action{padding:9px 12px}.generated-result>.result-actions{gap:8px}}@media(prefers-reduced-motion:reduce){.generated-result .result-action{transition:none}}
/* Closed results must stay hidden even when display rules match the panel. */
#studio .studio-preview[hidden]{display:none}

/* Wider composer with individually accessible inline parameters. */
body .hero-studio{max-width:1040px}
body .hero-layout{max-width:1120px}
#studio #prompt{height:180px;min-height:180px}
#studio .composer-toolbar{gap:10px;flex-wrap:wrap}
#studio .composer-model{margin-right:12px}
#studio .generation-cost{margin-left:auto;white-space:nowrap}
#studio .composer-clear{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-left:0;min-height:38px;padding:8px 13px;border:1px solid #ffffff20;border-radius:20px;background:#ffffff06;color:#c9c9d2;font:500 14px/1.4 Arial,sans-serif;cursor:pointer}
#studio .composer-clear svg{width:16px;height:16px}
#studio .composer-clear:hover{background:#ffffff0c;color:#fff}
#studio .composer-clear:focus-visible{outline:2px solid #c6f4f3;outline-offset:2px}
#studio .composer-clear~.generation-cost{margin-left:auto}
#studio .composer-parameter>.composer-options{left:0;right:auto;top:auto;bottom:calc(100% + 12px);width:180px;max-width:calc(100vw - 48px)}
#studio .composer-parameter .segmented{display:flex;flex-direction:column}
#studio .composer-parameter .segmented span{justify-content:flex-start}
#studio .composer-parameter>summary svg{width:12px;height:12px}
@media(max-width:600px){
 #studio #prompt{height:156px;min-height:156px}
 #studio .composer-toolbar{gap:8px}
 #studio .composer-model{margin-right:0;flex:1}
 #studio .composer-parameter,#studio .composer-clear{order:2}
 #studio .composer-parameter>summary{padding:0 10px}
 #studio .generation-cost{margin-left:0;font-size:11px}
 #studio .composer-submit{order:1}
 #studio .composer-parameter:last-of-type>.composer-options{left:auto;right:0}
}

/* Reference uploads live inside the composer; URLs use a dedicated dialog. */
#studio .composer-modes{display:flex;width:fit-content;gap:4px;margin:16px 20px 0;padding:4px;background:#111115;border-radius:12px}
#studio .composer-modes span{padding:10px 18px;color:#aaaab7;font-size:13px;font-weight:600;border-radius:8px}
#studio .composer-modes input:checked+span{background:#c6f4f3;color:#173235;box-shadow:none}
#studio .composer-modes input:focus-visible+span{outline:2px solid #7df9ff;outline-offset:2px}
#studio .studio-composer .reference-area{position:static;margin:0 20px 12px;padding:0;border:0;box-shadow:none;max-height:220px;background:transparent;overflow:auto}
#studio .reference-area .upload-label{padding:20px;border:1px dashed #575766;border-radius:10px}
#studio .reference-area .upload-label small{color:#aaaab7;margin-top:5px}
#studio .reference-previews:empty{display:none}
.reference-link-dialog{width:min(460px,calc(100vw - 32px));padding:22px;background:#19191f;color:#f1f1f5;border:1px solid #45454f;border-radius:18px;box-shadow:0 24px 80px #0008}
.reference-link-dialog::backdrop{background:#0009}
.reference-link-dialog h2{font-size:18px;letter-spacing:normal;margin:0 0 16px}
.reference-link-dialog p{font-size:13px;line-height:1.6;color:#aaaab7;margin:0 0 18px}
.reference-link-dialog label{display:block;font-size:13px;margin-bottom:8px}
.reference-link-dialog #reference-url-input{display:block;width:100%;height:44px;padding:0 12px;background:#111115;color:#f1f1f5;border:1px solid #45454f;border-radius:8px;font:inherit;font-size:14px;box-sizing:border-box}
.reference-link-dialog #reference-url-input:focus{outline:1px solid #7df9ff;outline-offset:1px}
.reference-link-dialog [data-link-error]{color:#ff738b;margin-top:10px}
.reference-link-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.reference-link-actions .button{padding:8px 14px;min-height:36px;font-size:12px}
.reference-link-dialog [data-link-error]:empty{display:none}
@media(max-width:600px){#studio .composer-modes{margin:12px 12px 0}#studio .composer-modes span{padding:10px 12px}#studio .studio-composer .reference-area{margin-inline:12px}.reference-link-dialog{padding:20px}}

/* Compact reference card beside the prompt, matching the supplied layout. */
#studio .composer-input-row{display:flex;align-items:flex-start;gap:18px;padding:24px 22px 8px;min-width:0}
#studio .composer-input-row #prompt{flex:1;min-width:0;width:0;height:142px;min-height:142px;padding:0;border-radius:0}
#studio .composer-input-row .reference-area{flex:0 0 82px;width:82px;margin:8px 0 0;max-height:220px;overflow:visible}
#studio .composer-input-row .upload-label{position:relative;display:flex;align-items:center;justify-content:center;width:58px;height:76px;padding:0;margin:0 auto 26px;border:1px dashed #626774;border-radius:8px;transform:rotate(-5deg)}
#studio .upload-card-plus{font-size:30px;font-weight:300;line-height:1;color:#dedee8}
#studio .upload-card-caption{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) rotate(5deg);white-space:nowrap;font-size:10px;color:#aaaab7}
#studio .composer-input-row .reference-previews{max-height:110px;overflow:auto;padding:5px;gap:8px}
#studio .composer-input-row .reference-thumb{flex:none;width:58px;height:58px}
#studio .composer-modes{margin-top:10px;margin-bottom:0}
@media(max-width:600px){#studio .composer-input-row{padding:20px 14px 8px;gap:12px}#studio .composer-input-row .reference-area{flex-basis:70px;width:70px}#studio .composer-input-row #prompt{height:142px;min-height:142px;font-size:16px}}

/* Mode tabs join the input surface, as in the supplied reference. */
#studio .studio-composer{background:#131318}
#studio .composer-modes{gap:0;margin:0;padding:12px 12px 0;background:transparent;border-radius:0;width:fit-content}
#studio .composer-modes label{flex:none}
#studio .composer-modes span{display:flex;align-items:center;gap:9px;min-height:46px;padding:12px 20px;border-radius:12px 12px 0 0;background:transparent;color:#aaaab7;font-size:13px;font-weight:500}
#studio .composer-modes svg{flex:none}
#studio .composer-modes input:checked+span{background:#19191f;color:#f1f1f5;box-shadow:none}
#studio .composer-modes label:hover span{color:#f1f1f5}
#studio .composer-input-row{background:#19191f;border-radius:14px 14px 0 0;margin:0 10px}
#studio .composer-toolbar{background:#19191f;border-radius:0 0 16px 16px;margin:0 10px 10px}
@media(max-width:600px){#studio .composer-modes{padding:10px 10px 0}#studio .composer-modes span{padding:11px 13px;gap:7px;font-size:12px}#studio .composer-input-row{margin-inline:8px}#studio .composer-toolbar{margin:0 8px 8px}}

/* Settings disclosures must not inherit the FAQ separator. */
#studio details.composer-settings{border-bottom:0}
/* A visible baseline survives WebGL failure and reduced-motion preferences. */
#studio .studio-composer{overflow:visible;border:1px solid #b6fbff;box-shadow:0 0 3px #d9fdff,0 0 12px #7df9ff70,0 0 26px #7df9ff35}
#studio .studio-composer.electric-border--fallback{animation:electric-fallback-glow 2.4s ease-in-out infinite alternate}
@keyframes electric-fallback-glow{from{box-shadow:0 0 3px #d9fdff,0 0 12px #7df9ff70,0 0 26px #7df9ff35}to{box-shadow:0 0 5px #efffff,0 0 18px #7df9ff99,0 0 36px #7df9ff50}}
@media(prefers-reduced-motion:reduce){#studio .studio-composer.electric-border--fallback{animation:none}}

.clear-prompt-dialog{width:min(360px,calc(100vw - 40px));padding:24px;border:1px solid #ffffff26;border-radius:16px;background:#19191f;color:#f4f4f6;box-shadow:0 24px 80px #0008}.clear-prompt-dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}.clear-prompt-dialog h2{margin:0 0 24px;font-size:18px;line-height:1.5;letter-spacing:0}.clear-prompt-actions{display:flex;justify-content:flex-end;gap:10px}.clear-prompt-actions button{padding:8px 16px;border:1px solid #ffffff28;border-radius:8px;background:transparent;color:#e8e8ed;font:500 14px/1.5 Arial,sans-serif;cursor:pointer}.clear-prompt-actions [data-confirm-clear]{background:#e82b42;border-color:#e82b42;color:#fff}.clear-prompt-actions button:hover{filter:brightness(1.15)}.clear-prompt-actions button:focus-visible{outline:2px solid #c6f4f3;outline-offset:3px}