.image-studio { position: relative; height: calc(100dvh - var(--site-navigation-height)); display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 52% 42%, #191c1c55, transparent 53%), #101112; color: #f1f1f1; }
.image-promo { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-shrink: 0; min-height: 80px; margin: 12px 10px 0; border-radius: 20px; padding: 18px 20px; overflow: hidden; background: #030303; }
.image-promo > div:first-child { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.image-promo strong, .image-promo > div:first-child > span { font: 800 16px/1.2 'Manrope', var(--font); letter-spacing: -.5px; }.image-promo strong { color: var(--accent-text); }.image-promo > div:first-child > span { color: #c2c3c3; }
.image-promo > button:not(.image-promo-close) { display: flex; align-items: center; gap: 13px; background: var(--accent); padding: 12px 19px; border-radius: 12px; color: var(--accent-ink); font-weight: 700; z-index: 2; box-shadow: 0 3px 0 #6b148f; white-space: nowrap; }
.image-promo > button .icon { width: 15px; height: 15px; }.image-promo-close { position: absolute; z-index: 3; right: 4px; top: 3px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #232525d9; color: #a4a9a6; }.image-promo-close .icon { width: 13px; height: 13px; }
.image-promo-art { display: flex; justify-content: center; align-items: start; position: absolute; z-index: -1; inset: 16px 30% -40px; gap: 0; filter: brightness(.8); mask-image: linear-gradient(transparent, #000 15%, #000 80%, transparent); }
.image-artwork { position: relative; display: block; overflow: hidden; container-type: size; }
.image-artwork::before { content: ''; position: absolute; width: calc(4 * max(100cqw, 100cqh)); height: calc(3 * max(100cqw, 100cqh)); left: calc(50% - (var(--art-x, 0) + .5) * max(100cqw, 100cqh)); top: calc(50% - (var(--art-y, 0) + .5) * max(100cqw, 100cqh)); background: url('/public/images/creative-atlas.webp') 0 0 / 100% 100% no-repeat; }
.image-promo-art span { width: 68px; height: 100px; border-radius: 8px; flex-shrink: 0; transform: rotate(-14deg); border: 3px solid #e2e4e1; box-shadow: 0 0 30px #fff2; }.image-promo-art span:nth-child(2) { transform: rotate(-7deg) translateY(-7px); }.image-promo-art span:nth-child(3) { transform: translateY(-12px); }.image-promo-art span:nth-child(4) { transform: rotate(7deg) translateY(-7px); }.image-promo-art span:nth-child(5) { transform: rotate(14deg); }
.image-main { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 360px; padding: 50px 28px 70px; }
.image-welcome { text-align: center; max-width: 900px; }.image-fan { display: flex; justify-content: center; align-items: center; height: 176px; margin-bottom: 30px; padding: 10px; }
.image-fan > span { width: 140px; height: 150px; flex-shrink: 0; margin-inline: -3px; border: 4px solid #636465; border-radius: 15px; box-shadow: 0 20px 35px #0002; filter: brightness(.75); }
.image-fan > span:nth-child(1) { transform: rotate(-10deg) translateY(2px); z-index: 1; }.image-fan > span:nth-child(2) { transform: rotate(6deg) translateY(-3px); border: 0; height: 154px; }.image-fan > span:nth-child(3) { border-radius: 50%; width: 144px; height: 148px; transform: rotate(-4deg); }.image-fan > span:nth-child(4) { transform: rotate(-4deg) translateY(-2px); }
.image-welcome h1 { font: 800 clamp(25px, 2.1vw, 34px)/1.13 'Manrope', var(--font); letter-spacing: -1.1px; }.image-welcome h1 span { color: var(--accent-text); }.image-welcome > p { margin-top: 16px; color: #8f9598; font-size: 15px; line-height: 1.6; }
.image-composer-area { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3; transform: translateX(-50%); width: min(1120px, calc(100% - 64px)); margin: 0; background: transparent; pointer-events: none; }
.image-composer-area > * { pointer-events: auto; }
.image-main:not(.has-results) { min-height: 0; overflow-y: auto; padding-bottom: calc(var(--image-composer-height, 170px) + 40px); }
.image-composer {
  display: flex; gap: 26px; padding: 20px 22px; min-height: 138px; border-radius: 26px;
  border: 1px solid transparent;
  background:
    linear-gradient(to left, #292b2c 0%, #1b1e1f 45%, #111414 100%) padding-box,
    linear-gradient(to left, color-mix(in srgb, var(--accent-text) 14.9%, transparent), color-mix(in srgb, var(--accent) 14.9%, transparent) 45%, color-mix(in srgb, var(--accent) 9%, transparent)) border-box;
  box-shadow: 0 8px 24px #0003, 0 0 14px color-mix(in srgb, var(--accent) 2.7%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 3.1%, transparent), inset -2px 0 0 #ffffff06;
}
.image-composer-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }.image-composer textarea { resize: none; overflow-y: hidden; font: 14px/1.6 var(--font); min-height: 44px; max-height: min(190px, 26dvh); width: 100%; border: 0; background: transparent; color: #e9edeb; padding: 0 0 12px; outline: none; scrollbar-width: thin; scrollbar-color: #646966 transparent; }.image-composer textarea::placeholder { color: #999e9d; }.image-composer textarea:focus, .image-composer textarea:focus-visible { outline: none; box-shadow: none; }
.image-composer textarea::-webkit-scrollbar { width: 6px; }
.image-composer textarea::-webkit-scrollbar-track { background: transparent; }
.image-composer textarea::-webkit-scrollbar-thumb { background: #646966; border-radius: 6px; }
.image-model-logo { display: block; width: 16px; height: 16px; flex-shrink: 0; background: var(--accent); mask: var(--model-logo) center / contain no-repeat; }
.image-model-logo[data-image-logo="openai"] { mask-size: 145%; }
.image-model-logo[data-image-logo="grok"] { mask-size: 125%; }
#image-model-logo { display: inline-flex; flex-shrink: 0; overflow: visible; }
.image-options { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }.image-option, .image-add-reference, .image-count { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--accent) 6.3%, transparent); background: #232523; color: #eef0ee; border-radius: 12px; padding: 0 11px; font-size: 13px; white-space: nowrap; }
.image-option .icon { width: 15px; height: 15px; color: #c4c9c4; }.image-model-option .icon:first-child { color: var(--accent-text); }.image-model-option .icon:last-child { width: 12px; height: 12px; color: #949992; }.image-model-option { max-width: 280px; font-weight: 600; }.image-model-option span { overflow: hidden; text-overflow: ellipsis; }
.image-setting { display: inline-flex; min-width: 0; }
.image-setting-button { font-weight: 600; transition: background .15s, border-color .15s; }
.image-setting-button:hover:not(:disabled), .image-setting-button[aria-expanded="true"] { background: #2d302c; border-color: #ffffff24; filter: none; }
.image-setting-chevron { display: inline-flex; margin-left: 1px; }
.image-setting-chevron .icon { width: 11px; height: 11px; color: #969b95; transform: rotate(90deg); transition: transform .15s; }
.image-setting-button[aria-expanded="true"] .image-setting-chevron .icon { transform: rotate(-90deg); }
.image-add-reference { gap: 0; padding: 0 4px; }.image-add-reference button { display: grid; place-items: center; width: 34px; padding: 0; height: 26px; color: #b5bab7; font-size: 16px; }.image-add-reference button + button { border-left: 1px solid #414540; }.image-add-reference .icon { width: 18px; height: 18px; }
.image-count { padding: 0 3px; gap: 2px; color: #aaafa9; }.image-count button { display: grid; place-items: center; width: 25px; height: 28px; padding: 0; }.image-count .icon { width: 15px; height: 15px; }.image-count output { min-width: 29px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.image-more { padding: 0 10px; }.image-generate { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: flex-end; gap: 5px; min-width: 146px; min-height: 84px; margin-block: 0; padding: 14px; border-radius: 13px; color: var(--accent-ink); background: var(--accent); font-size: 15px; }.image-generate strong { font-weight: 700; }.image-generate > span { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }.image-generate .icon { width: 13px; height: 13px; fill: currentColor; }.image-generate:disabled { opacity: .6; }
.image-notice { text-align: center; font-size: 12px; line-height: 1.5; color: var(--accent-text); margin-bottom: 10px; }.image-notice:empty { display: none; }.image-notice.is-error { color: #e9b4a7; }
.image-references { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }.image-references:empty { display: none; }.image-reference { position: relative; width: 58px; height: 66px; }.image-reference img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ffffff24; }.image-reference span { position: absolute; bottom: 3px; left: 3px; font-size: 9px; padding: 2px; background: #101310c9; border-radius: 4px; }.image-reference button { position: absolute; right: -4px; top: -4px; border-radius: 50%; background: #343835; width: 18px; height: 18px; padding: 3px; }.image-reference .icon { width: 12px; height: 12px; }
.image-progress { position: absolute; inset: 0; background: #101112eb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; z-index: 2; text-align: center; padding: 20px; }.image-progress strong { font-size: 24px; font-family: 'Manrope', var(--font); }.image-progress p { color: #949d95; font-size: 12px; line-height: 1.7; max-width: 400px; }.image-spinner { width: 35px; height: 35px; border: 2px solid color-mix(in srgb, var(--accent) 12.5%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: image-spin .9s linear infinite; }@keyframes image-spin { to { transform: rotate(360deg); } }
.image-studio.has-results { overflow: hidden; }
.image-main.has-results { display: block; min-height: 0; padding: 12px 0 calc(var(--image-composer-height, 170px) + 32px); scroll-padding-bottom: calc(var(--image-composer-height, 170px) + 24px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.image-results { width: 100%; display: flex; flex-direction: column; gap: 2px; }
.image-result-row { display: flex; align-items: stretch; gap: 2px; flex-shrink: 0; }
.image-result-card { position: relative; flex: none; height: 100%; margin: 0; overflow: hidden; background: #202222; }
.image-result-open { display: block; width: 100%; height: 100%; padding: 0; }
.image-result-open:disabled { opacity: 1; cursor: default; }
.image-result-open:hover:not(:disabled) { filter: none; }
.image-result-open:focus-visible { outline-offset: -3px; }
.image-result-open img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-result-card.has-error img { visibility: hidden; }
.image-result-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; color: #cbd2cb; font-size: 12px; line-height: 1.5; text-align: center; }
.image-result-placeholder { background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--accent) 7.1%, transparent), transparent 65%), #202222; }
.image-result-placeholder .image-result-status { justify-content: flex-start; align-items: flex-start; text-align: left; padding: 20px; }
.image-result-placeholder .image-spinner { width: 20px; height: 20px; }
.image-result-retry { padding: 8px 14px; border: 1px solid #ffffff24; border-radius: 8px; background: #303630; color: var(--accent-text); }
.image-results figcaption { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 24px 12px 10px; background: linear-gradient(transparent, #000b); color: #f2f4f2; font-size: 11px; pointer-events: none; }
.image-results figcaption > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-results figcaption a { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #ffffff18; border-radius: 50%; background: #101112b3; color: #fff; text-decoration: none; pointer-events: auto; }
.image-results figcaption a:hover { color: var(--accent-text); background: #101112; }
.image-results .icon { width: 15px; height: 15px; }
.image-preview-dialog { position: fixed; width: min(1400px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-width: none; max-height: none; margin: auto; padding: 50px 12px 12px; border: 1px solid #ffffff20; border-radius: 16px; background: #0b0d0d; overflow: hidden; }
.image-preview-dialog::backdrop { background: #030505dc; backdrop-filter: blur(8px); }
.image-preview-dialog > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-preview-controls { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; }
.image-preview-controls a, .image-preview-controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #262b29; color: #f0f3f0; }
.image-preview-error { position: absolute; inset: 50px 12px 12px; display: grid; place-items: center; padding: 20px; background: #0b0d0d; color: #e9b4a7; text-align: center; }
.image-dialog { color: #e9efeb; background: #171b1b; width: min(470px, calc(100% - 32px)); max-height: min(82dvh, 850px); border: 1px solid #ffffff20; border-radius: 22px; padding: 24px; box-shadow: 0 30px 90px #0009; }.image-dialog::backdrop { background: #070909bf; backdrop-filter: blur(7px); }.image-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }.image-dialog-heading h2 { font-size: 22px; letter-spacing: -.6px; }.image-dialog-heading > div > span { font-size: 9px; color: #b6a7c6; letter-spacing: 1px; display: block; margin-bottom: 7px; }.image-dialog-heading button { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #ffffff07; }.image-dialog label { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; font-size: 12px; color: #b5bfb6; }.image-dialog select, .image-dialog input:not([type='checkbox']), .image-dialog textarea { width: 100%; background: #232a27; border: 1px solid #ffffff12; border-radius: 10px; padding: 11px; font: 12px var(--font); color: #f0f3ef; }.image-dialog textarea { resize: vertical; }.image-dialog .image-checkbox { display: flex; flex-direction: row; align-items: center; gap: 10px; }.image-checkbox input { accent-color: var(--accent); }
.image-model-menu { position: fixed; inset: auto; margin: 0; padding: 0; width: min(402px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 24px)); border: 1px solid #ffffff12; border-radius: 16px; background: linear-gradient(160deg, #242829, #17191a); color: #efefef; box-shadow: 0 16px 48px #0007; overflow: hidden; }
.image-model-menu:popover-open { display: flex; flex-direction: column; }
.image-model-menu::backdrop { background: transparent; backdrop-filter: none; pointer-events: none; }
.image-model-option[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 31.4%, transparent); background: #2a2d27; }
.image-model-option[aria-expanded="true"] > .icon:last-child { transform: rotate(-90deg); }
.image-model-search { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; padding: 0 14px; border-bottom: 1px solid #ffffff07; }
.image-model-search > .icon { width: 18px; height: 18px; color: #929796; }
.image-model-search input { flex: 1; width: 100%; min-width: 0; padding: 12px 0; border: 0; background: transparent; color: #efefef; font: 13px var(--font); }
.image-model-search input::placeholder { color: #939897; }
.image-model-search input:focus-visible { outline: none; }
.image-model-search:focus-within { border-bottom-color: #ffffff16; }
.image-picker-heading { display: flex; align-items: center; gap: 7px; flex-shrink: 0; margin: 0; padding: 10px 14px 6px; color: #949998; font-size: 11px; font-weight: 600; }
.image-picker-heading .icon { width: 13px; height: 13px; fill: currentColor; stroke-width: 1; }
.image-picker-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; scrollbar-width: thin; scrollbar-color: #4a4f4d transparent; }
.image-picker-list::-webkit-scrollbar { width: 5px; }
.image-picker-list::-webkit-scrollbar-track { background: transparent; }
.image-picker-list::-webkit-scrollbar-thumb { background: #4a4f4d; border-radius: 5px; }
.image-picker-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 7px 10px; border-radius: 10px; text-align: left; }
.image-picker-item:hover, .image-picker-item:focus-visible { background: #ffffff07; filter: none; }
.image-picker-item:focus-visible { outline: 1px solid color-mix(in srgb, var(--accent) 50.2%, transparent); outline-offset: -1px; }
.image-picker-item.is-selected { background: #ffffff05; }
.image-picker-logo { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #ffffff06; }
.image-picker-logo .image-model-logo { width: 19px; height: 19px; background: #a1a6a4; }
.image-picker-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.image-picker-copy strong { font-size: 13px; font-weight: 650; line-height: 1.3; }
.image-picker-copy small { color: #939897; font-size: 10px; line-height: 1.4; }
.image-picker-item > .icon { width: 16px; height: 16px; color: var(--accent-text); }
.image-picker-empty { padding: 18px 10px; color: #a1a6a4; font-size: 12px; line-height: 1.5; }
.image-choice-menu { position: fixed; inset: auto; margin: 0; padding: 10px; width: min(288px, calc(100vw - 24px)); max-height: min(480px, calc(100dvh - 24px)); border: 1px solid #ffffff0e; border-radius: 14px; background: #1c1c1c; color: #efefef; box-shadow: 0 16px 48px #0006, 0 4px 12px #0003; overflow: hidden; }
.image-choice-menu:popover-open { display: flex; flex-direction: column; animation: image-choice-in .14s ease-out; }
.image-choice-menu::backdrop { background: transparent; pointer-events: none; }
.image-choice-ratio { width: min(204px, calc(100vw - 24px)); }
.image-choice-title { flex-shrink: 0; margin: 2px 3px 10px; color: #979797; font: 600 13px/1.5 var(--font); letter-spacing: -.15px; }
.image-choice-list { min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #484848 transparent; }
.image-choice-list::-webkit-scrollbar-track { background: transparent; }
.image-choice-item { display: flex; align-items: center; gap: 12px; flex-shrink: 0; width: 100%; min-height: 56px; padding: 10px 12px; border-radius: 8px; text-align: left; transition: background .12s; }
.image-choice-item:hover, .image-choice-item:focus-visible { background: #ffffff08; filter: none; }
.image-choice-item:focus-visible { outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; }
.image-choice-item.is-selected { background: #2d2d2d; }
.image-choice-item.is-selected:hover { background: #343434; }
.image-choice-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.image-choice-copy strong { font-size: 13px; line-height: 1.35; font-weight: 600; }
.image-choice-copy small { color: #a1a1a1; font-size: 11px; line-height: 1.4; }
.image-choice-item > .icon { width: 16px; height: 16px; color: #c3c3c3; }
.image-choice-ratio .image-choice-item { min-height: 42px; padding-block: 10px; }
.image-choice-ratio-icon { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; color: #e4e4e4; }
.image-choice-ratio-icon .icon { width: 18px; height: 18px; }
.image-ratio-shape { display: block; border: 1.5px solid currentColor; border-radius: 3px; }
@keyframes image-choice-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.image-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.image-studio :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.image-studio textarea:focus-visible { outline: none; }
@media (min-width: 1700px) { .image-main { padding-bottom: 100px; }.image-fan { height: 183px; }.image-welcome h1 { font-size: 34px; }.image-composer-area { margin-bottom: 0; }.image-promo strong, .image-promo > div:first-child > span { font-size: 18px; } }
@media (max-width: 1050px) { .image-promo-art { display: none; }.image-promo strong, .image-promo > div:first-child > span { font-size: 13px; }.image-main { padding-block: 35px 45px; }.image-composer-area { width: calc(100% - 40px); }.image-composer { gap: 15px; padding: 18px; }.image-generate { min-width: 125px; }.image-option { font-size: 12px; } }
@media (max-width: 680px) { .image-promo { min-height: 72px; margin-top: 4px; padding: 14px; border-radius: 14px; gap: 12px; }.image-promo strong { font-size: 10px; max-width: 180px; }.image-promo > div:first-child > span { font-size: 9px; max-width: 180px; line-height: 1.4; }.image-promo > button:not(.image-promo-close) { padding: 9px 11px; gap: 5px; font-size: 10px; border-radius: 8px; }.image-promo > button:not(.image-promo-close) .icon { display: none; }.image-main { min-height: 305px; padding: 32px 20px; }.image-fan { height: 115px; margin-bottom: 24px; }.image-fan > span { width: 76px; height: 100px; border-width: 3px; border-radius: 9px; margin-inline: -2px; }.image-fan > span:nth-child(2) { height: 103px; }.image-fan > span:nth-child(3) { width: 81px; height: 99px; }.image-welcome h1 { font-size: 23px; letter-spacing: -.7px; }.image-welcome > p { font-size: 12px; max-width: 320px; margin: 13px auto 0; }.image-composer-area { width: calc(100% - 28px); margin-bottom: 0; }.image-composer { flex-direction: column; padding: 15px; gap: 13px; border-radius: 20px; }.image-composer textarea { font-size: 13px; min-height: 58px; }.image-options { gap: 6px; }.image-option, .image-add-reference, .image-count { height: 35px; border-radius: 9px; font-size: 11px; padding-inline: 8px; }.image-model-option { max-width: calc(100% - 70px); }.image-option .icon { width: 13px; height: 13px; }.image-generate { min-height: 45px; width: 100%; flex-direction: row; gap: 14px; font-size: 13px; padding: 11px; border-radius: 10px; }.image-generate > span { font-size: 11px; }.image-dialog { padding: 18px; }.image-dialog-heading h2 { font-size: 19px; }.image-results { grid-template-columns: minmax(0,1fr); }.image-progress strong { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .image-studio * { animation-duration: 2s; transition: none; } }
@media (prefers-reduced-motion: reduce) { .image-choice-menu:popover-open { animation: none; } }