/* Dots v99 — one CharacterStudio, one direct preview. */
#studioOverlay{padding:0;border:1px solid rgba(242,246,255,.24);border-radius:20px;width:min(1120px,calc(100% - 48px));max-width:none;max-height:calc(100dvh - 48px);color:var(--text);background:linear-gradient(145deg,rgba(247,249,255,.075),rgba(29,33,46,.48) 42%,rgba(22,26,38,.54));box-shadow:0 30px 100px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.035);-webkit-backdrop-filter:blur(26px) saturate(138%);backdrop-filter:blur(26px) saturate(138%);overflow:hidden}#studioOverlay::backdrop{background:rgba(8,10,16,.34);-webkit-backdrop-filter:blur(3px) saturate(112%);backdrop-filter:blur(3px) saturate(112%)}.overlay-shell{max-height:calc(100dvh - 50px);overflow:auto;overscroll-behavior:contain;scrollbar-color:#404654 transparent;background:transparent}.overlay-header{position:relative;top:auto;z-index:4;display:flex;align-items:center;gap:12px;padding:4px 14px;border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.overlay-header h2{font-size:12px;color:var(--muted);font-weight:500;margin:0;flex:1;text-align:center;letter-spacing:.6px}.overlay-header h2:focus{outline:0}.overlay-header .button{font-size:12px}.icon-button{width:44px;height:44px;padding:12px;border-color:transparent;background:transparent;flex-shrink:0}.icon-button:hover{background:var(--elevated)}.character-studio{display:grid;grid-template-columns:54% 46%;min-height:560px}.studio-media-column{padding:32px 28px 28px;min-width:0;background:radial-gradient(ellipse at 45% 35%,rgba(138,128,184,.09),transparent 68%),linear-gradient(135deg,rgba(255,255,255,.018),transparent 65%)}.studio-preview{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;max-height:550px;min-height:280px;overflow:hidden}.artwork-detail__image{width:100%;height:100%;object-fit:contain;min-height:0;max-height:520px}.preview-label{position:absolute;left:10px;top:0;color:var(--muted);font-size:11px;letter-spacing:.4px;padding:5px 10px;background:rgba(25,29,41,.54);border:1px solid rgba(240,244,255,.16);border-radius:6px;-webkit-backdrop-filter:blur(10px) saturate(125%);backdrop-filter:blur(10px) saturate(125%)}.studio-draft-host{width:100%;height:100%;min-width:0;display:grid;place-items:center}.studio-draft-host>*,.studio-draft-host canvas{max-width:100%;max-height:100%;object-fit:contain}.studio-draft-host canvas{width:100%;height:auto;display:block}.preview-status{color:var(--muted);font-size:12px;margin:10px 0 0;text-align:center;min-height:18px}.preview-retry{display:block;margin:auto}.studio-content{min-width:0;padding:24px 30px 28px;border-left:1px solid rgba(240,244,255,.09);background:transparent}.studio-series{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-light);margin:0 0 10px}.artwork-detail__title{font-size:30px;letter-spacing:-.6px;margin-bottom:16px;line-height:1.25}.pending-label{font-size:11px;display:inline-block;border:1px solid #f3c98460;border-radius:6px;color:#f3c984;padding:4px 8px;margin-bottom:16px}.artwork-detail__description{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:18px}.artwork-detail__tags{display:flex;list-style:none;gap:7px;flex-wrap:wrap;padding:0;margin:0 0 25px}.artwork-detail__tag{font-size:10px;color:#c8cede;background:#ffffff05;border:1px solid var(--border);padding:5px 9px;border-radius:6px}.studio-actions{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 14px}.studio-actions>.button{flex:1;min-width:140px}.studio-actions>.quiet{flex-basis:100%;justify-content:center}.studio-original,.studio-prompt,.studio-remix,.studio-related{border-top:1px solid rgba(240,244,255,.15);margin-top:18px;padding-top:8px}.studio-original>summary,.studio-prompt>summary,.studio-remix>summary,.studio-related>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;color:var(--text);font-size:12px;font-weight:550;padding:0 4px;list-style:none}.studio-original>summary::-webkit-details-marker,.studio-prompt>summary::-webkit-details-marker,.studio-remix>summary::-webkit-details-marker,.studio-related>summary::-webkit-details-marker{display:none}.studio-original>summary::marker,.studio-prompt>summary::marker,.studio-remix>summary::marker,.studio-related>summary::marker{content:""}.studio-original>summary::after,.studio-prompt>summary::after,.studio-remix>summary::after,.studio-related>summary::after{content:"";display:block;flex:0 0 9px;width:9px;height:9px;margin:0 12px 4px auto;border:0;border-right:1.5px solid #c2c9d7;border-bottom:1.5px solid #c2c9d7;border-radius:0;color:transparent;transform:rotate(45deg);transition:transform .15s ease}.studio-original[open]>summary::after,.studio-prompt[open]>summary::after,.studio-remix[open]>summary::after,.studio-related[open]>summary::after{transform:rotate(225deg)}.studio-original>summary:hover,.studio-prompt>summary:hover,.studio-remix>summary:hover,.studio-related>summary:hover{color:#fff}.studio-artwork-info{margin:0 0 16px}.studio-artwork-info .artwork-detail__description{margin-bottom:14px}.studio-artwork-info .artwork-detail__tags{margin-bottom:0}.studio-original>.studio-actions{margin-top:8px}.studio-original .studio-prompt{margin-top:10px;padding-top:8px}.studio-prompt pre,.studio-remix pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:250px;overflow:auto;padding:14px;background:#0b0d12;border:1px solid var(--border);border-radius:8px;font-size:11px;line-height:1.8;color:var(--muted)}.studio-remix pre:empty{display:none}.helper,.studio-editor-status{color:var(--muted);font-size:12px;line-height:1.7}.artwork-detail__feedback{font-size:12px;line-height:1.7;color:var(--accent-light);margin:10px 0;overflow-wrap:anywhere}.artwork-detail__feedback:empty{display:none}.remix-facts{display:grid;gap:9px;margin-bottom:16px}.remix-fact{display:grid;grid-template-columns:1fr 110px;gap:6px;align-items:center;font-size:11px;color:var(--muted)}.remix-fact select,.remix-fact input{min-height:44px;padding:8px;color:var(--text);width:100%}.remix-fact input{grid-column:1/-1}.remix-direction{display:grid;gap:8px;font-size:12px;color:var(--muted)}.remix-direction textarea,.artwork-detail__fallback-text{color:var(--text);width:100%;padding:12px;resize:vertical;min-height:90px;line-height:1.7;font-size:12px}.remix-error{color:#ffb4ab;font-size:11px}.related-items{display:flex;gap:8px}.related-character{min-width:96px;max-width:112px;flex:0 0 clamp(96px,9vw,112px);background:rgba(20,24,33,.42);padding:8px 7px;display:grid;justify-items:start;align-content:start;gap:5px;font-size:10px;color:var(--muted);text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:8px}.related-character img{width:64px;height:64px;object-fit:contain}.artwork-detail__versions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}.artwork-detail__copy-fallback{margin-top:16px}.studio-editor-content fieldset{border:0;padding:0;margin:0 0 18px}.studio-editor-content legend{font-size:12px;color:var(--muted);margin-bottom:9px}.studio-editor-content button{min-height:44px}.studio-editor-content label{color:var(--muted);font-size:12px}.studio-editor-content select{min-height:44px;padding:8px;color:var(--text)}.studio-editor-content input{min-height:44px}.studio-editor-content .studio-config-copy{width:100%;margin-top:12px}.studio-editor-controls{display:grid;gap:12px}.studio-editor-controls button[aria-pressed=true]{border-color:#a989ee;background:#7c3aed24}.studio-editor-controls [role=status]{font-size:12px;color:var(--muted)}.studio-editor-controls .editor-options{display:flex;gap:8px;flex-wrap:wrap}.studio-editor-controls .editor-actions{display:flex;flex-wrap:wrap;gap:8px}.studio-editor-controls .editor-options button{padding:8px 12px}.studio-editor-controls .editor-actions button{padding:10px 16px}
@media(max-width:850px){#studioOverlay{width:calc(100% - 32px);max-height:calc(100dvh - 32px)}.overlay-shell{max-height:calc(100dvh - 34px)}.character-studio{grid-template-columns:1fr}.studio-media-column{padding:14px 30px 10px}.studio-preview{height:340px;max-height:340px;min-height:0;aspect-ratio:auto}.artwork-detail__image{max-height:340px}.studio-draft-host{max-height:340px}.studio-draft-host canvas{width:auto;max-height:320px}.studio-content{border-left:0;border-top:1px solid var(--border);padding:26px 30px 30px}.artwork-detail__title{font-size:28px}.preview-status:empty{display:none}.studio-preview>.preview-label{left:0;top:4px}}
@media(max-width:600px){#studioOverlay{width:100%;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}.overlay-shell{height:100dvh;max-height:none;padding-bottom:env(safe-area-inset-bottom)}.overlay-header{padding:2px 10px;padding-top:max(2px,env(safe-area-inset-top));gap:4px}.overlay-header h2{font-size:11px}.overlay-header .button{padding-left:6px;padding-right:6px;font-size:11px}.studio-media-column{padding:12px 22px 6px}.studio-preview{height:260px;max-height:260px}.artwork-detail__image{max-height:260px}.studio-draft-host{max-height:260px}.studio-draft-host canvas{max-height:260px}.studio-content{padding:20px 20px 28px}.artwork-detail__title{font-size:25px;margin-bottom:13px}.studio-series{font-size:10px;margin-bottom:8px}.artwork-detail__description{font-size:12px}.studio-actions>.button{min-width:120px;font-size:12px;padding:10px 12px}.studio-prompt,.studio-remix,.studio-related{margin-top:16px}.artwork-detail__tags{margin-bottom:20px;gap:5px}.artwork-detail__tag{font-size:10px;padding:4px 7px}.preview-label{font-size:10px}.preview-status{font-size:11px}.studio-preview{background:none}}@media(max-width:350px){.studio-preview,.studio-draft-host{height:220px;max-height:220px}.artwork-detail__image,.studio-draft-host canvas{max-height:220px}.studio-content{padding:18px 16px 24px}.artwork-detail__title{font-size:23px}.studio-media-column{padding-left:16px;padding-right:16px}.overlay-header h2{font-size:10px;letter-spacing:0}}
@supports not (backdrop-filter:blur(1px)){
#studioOverlay{background:#1f2431;-webkit-backdrop-filter:none;backdrop-filter:none}
#studioOverlay::backdrop{background:rgba(10,13,20,.58);-webkit-backdrop-filter:none;backdrop-filter:none}
.overlay-header{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.studio-editor-tabs{background:#242a38;-webkit-backdrop-filter:none;backdrop-filter:none}
.studio-media-column{background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 55%),#242a38}
.studio-content{background:rgba(35,41,55,.96)}
.preview-label{background:#242a38;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-transparency:reduce){
#studioOverlay{background:#202633;-webkit-backdrop-filter:none;backdrop-filter:none}
#studioOverlay::backdrop{background:rgba(12,15,22,.62);-webkit-backdrop-filter:none;backdrop-filter:none}
.overlay-header{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.studio-editor-tabs{background:#242a38;-webkit-backdrop-filter:none;backdrop-filter:none}
.studio-media-column{background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 55%),#242a38}
.studio-content{background:#242a38}
.preview-label{background:#242a38;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.remix-fact select,.remix-fact input,.remix-direction textarea,.artwork-detail__fallback-text,.studio-editor-field select{border-color:#626b80}
.studio-editor-options{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.studio-editor-field{display:grid;gap:7px}.studio-editor-field[role=tabpanel][hidden]{display:none!important}.studio-editor-field select{width:100%;background:#10141d}.studio-editor-fixed-shape{font-size:11px;color:var(--muted);margin:0}.studio-editor-actions{display:flex;flex-wrap:wrap;gap:8px}.studio-editor-actions [hidden]{display:none}.studio-editor-actions button{padding:10px 14px}.studio-editor-actions [data-action=export]{background:var(--accent);border-color:var(--accent);color:white;flex:1}.studio-editor-controls>h3{font-size:16px;margin:0 0 6px}.studio-editor-preview{width:100%;height:100%;position:relative;display:grid;place-items:center}.studio-editor-preview-status{position:absolute;left:12px;right:12px;bottom:0;text-align:center;font-size:11px;color:var(--muted);background:rgba(20,24,35,.68);padding:6px 10px;border-radius:8px}.studio-editor-preview[data-stale=false] .studio-editor-preview-status{display:none}
.studio-editor-tabs{position:sticky;top:62px;z-index:3;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin:0 0 14px;padding:4px;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid rgba(240,244,255,.16);border-radius:12px;background:rgba(24,28,39,.88);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);scrollbar-width:thin;scrollbar-color:#697083 transparent}.studio-editor-tab{min-width:0;min-height:44px;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}.studio-editor-tab:hover{background:rgba(255,255,255,.07);color:var(--text)}.studio-editor-tab[aria-selected=true]{border-color:#b99aff80;background:linear-gradient(180deg,#7352a7,#4a376b);box-shadow:inset 0 1px 0 #ffffff24,0 2px 8px #0004;color:#fff}.studio-editor-tab:focus-visible{outline:2px solid #e0ccff;outline-offset:2px}.studio-editor-field-title{margin:0 0 9px;color:var(--text);font-size:12px;font-weight:650}.studio-editor-field[role=tabpanel]{scroll-margin-top:112px}

/* Compact real capabilities keep the successful export action in the panel. */
.studio-editor-options{grid-template-columns:minmax(0,1fr);column-gap:12px}.studio-editor-fixed-shape{grid-column:1/-1}.studio-editor-review-note{font-size:11px;font-weight:400;line-height:1.5;color:var(--muted)}
.studio-editor-field{display:grid;gap:7px;min-width:0;margin:0;padding:0;border:0}
.studio-editor-category{display:grid;gap:18px;min-width:0}.studio-editor-category[hidden]{display:none}.studio-editor-hint{margin:0}
#studioOverlay{--muted:#cbd2e1}
.studio-editor-field>legend{padding:0;color:var(--muted);font-size:11px;line-height:1.4}
.studio-editor-option-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0}
.studio-editor-option{display:grid;grid-template-rows:56px minmax(1.5em,auto);align-content:start;justify-items:center;gap:4px;width:100%;min-width:0;min-height:92px;padding:7px 5px;border:1px solid #626b80;border-radius:9px;background:#10141d;color:var(--text);font:inherit;font-size:10px;line-height:1.3;text-align:center;overflow-wrap:anywhere;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.studio-editor-option:hover:not(:disabled){background:#191d28;border-color:#9b86c7}
.studio-editor-option[aria-pressed=true]{border-color:#c3a8ff;background:#352653;box-shadow:inset 0 0 0 1px #b997ff80}
.studio-editor-option:focus-visible{outline:2px solid #e0ccff;outline-offset:2px;z-index:1}
.studio-editor-option:disabled{cursor:not-allowed;background:#12151c;border-style:dashed;color:#c0c5d0}
.studio-editor-option-visual{position:relative;display:grid;place-items:center;width:56px;height:56px;max-width:100%;overflow:hidden;border:0;border-radius:0;background:transparent;isolation:isolate}
.studio-editor-option-layer{position:absolute;display:block;max-width:none;max-height:none;object-fit:fill;pointer-events:none}
.studio-editor-option-thumbnail{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:transparent}
.studio-editor-option-eyes{background:#a8b0c2;color:#192131}.studio-editor-option-eyes:hover:not(:disabled){background:#bcc3d2}.studio-editor-controls .studio-editor-option-eyes[aria-pressed=true]{background:#c3afe7;color:#192131;border-color:#e0ccff}
.studio-editor-color-swatch{width:42px;height:42px;border-radius:50%;border:2px solid #f4f1ff;background:var(--option-color,#555);box-shadow:0 0 0 2px #0b0d12}
.studio-editor-option-none,.studio-editor-option-visual[data-thumbnail-state=error]{background:#151922;border-style:dashed}
.studio-editor-option-none-mark,.studio-editor-option-unavailable-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #7b8498;border-radius:50%;color:#e1e5ef;font-size:22px;line-height:1}
.studio-editor-option-unavailable-mark{border-color:#b78989;color:#ffc1bc}
.studio-editor-option:not([data-field=colors]):not([data-field=color]){grid-template-rows:76px minmax(2.6em,auto);min-height:120px;gap:8px;padding:8px 6px;font-size:11px;background-image:radial-gradient(ellipse 90% 80% at 50% 20%,color-mix(in srgb,var(--focus) 58%,transparent) 0%,color-mix(in srgb,var(--accent-light) 33%,transparent) 55%,transparent 100%)}
.studio-editor-option:not([data-field=colors]):not([data-field=color]) .studio-editor-option-visual{width:100%;height:76px;border-radius:0;background:transparent}
.studio-editor-option-thumbnail{max-width:calc(100% - 12px);max-height:68px;filter:drop-shadow(0 1px 1px #0004)}
.studio-editor-option-visual[data-thumbnail-state=loading]::after,.studio-editor-option-visual[data-thumbnail-state=waiting-for-manifest]::after{content:"";width:22px;height:22px;border:2px solid #d6c9f766;border-top-color:#f4efff;border-radius:50%;animation:studio-option-loading .9s linear infinite}
@keyframes studio-option-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.studio-editor-option-visual[data-thumbnail-state=loading]::after,.studio-editor-option-visual[data-thumbnail-state=waiting-for-manifest]::after{animation:none}}
.studio-editor-option-label{display:block;width:100%;min-height:1.5em;color:inherit;overflow-wrap:anywhere}
@media(max-width:850px){.studio-editor-option-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.studio-editor-tabs{top:62px;grid-auto-columns:minmax(0,1fr);scroll-snap-type:x proximity}.studio-editor-tab{min-width:0;padding-inline:6px;font-size:11px;scroll-snap-align:start}.studio-editor-option-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:350px){.studio-editor-option-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.studio-editor-option{padding:6px 3px;font-size:9px}.studio-editor-option-visual{width:50px;height:50px;grid-template-rows:50px}.studio-editor-option{grid-template-rows:50px minmax(1.5em,auto)}}
@media(prefers-reduced-motion:reduce){.studio-editor-tab,.studio-editor-option{transition:none!important;scroll-behavior:auto!important}}

/* Keep the editable preview in view while its controls scroll on compact screens. */
@media(max-width:600px){
#studioOverlay[open]:has(.studio-editor-content:not([hidden])){display:flex;flex-direction:column}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .overlay-header{flex:0 0 auto}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) #overlayBody{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .overlay-shell{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;height:auto;max-height:none;overflow:hidden;padding-bottom:0}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .character-studio{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:visible}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-media-column{display:flex;flex:0 0 clamp(170px,28dvh,220px);flex-direction:column;min-height:0;padding:7px 22px;overflow:hidden}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-preview{height:100%;max-height:100%;min-height:0;aspect-ratio:auto}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-preview{display:flex;align-items:center;justify-content:center}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .artwork-detail__image{width:100%;height:100%;max-height:100%;object-fit:contain}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-draft-host{height:100%;max-height:100%;min-height:0}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-draft-host>.studio-editor-preview{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-draft-host canvas{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--border);padding:12px 20px calc(16px + env(safe-area-inset-bottom))}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-editor-tabs{top:0;z-index:6}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-editor-actions{position:static;margin:12px 0 0;padding:0;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not (backdrop-filter:blur(1px)){
.studio-editor-tabs{background:#242a38;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-transparency:reduce){
.studio-editor-tabs{background:#242a38;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
.studio-original>summary::after,.studio-prompt>summary::after,.studio-remix>summary::after,.studio-related>summary::after{transition:none}
}

/* Character detail: a non-sticky title bar and one explicit content scrollport. */
#studioOverlay[open]{display:flex;flex-direction:column;height:min(860px,calc(100dvh - 48px));max-height:calc(100dvh - 48px)}
#studioOverlay[open] .overlay-shell{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;height:100%;max-height:none;overflow:hidden;padding-bottom:0}
#studioOverlay[open] .overlay-header{position:relative;top:auto;z-index:auto;flex:0 0 auto}
#studioOverlay[open] .overlay-header{display:grid;grid-template-columns:minmax(72px,88px) minmax(0,1fr) auto 44px;align-items:center;gap:8px;padding:8px 14px}
#studioOverlay[open] #overlayBack{grid-row:1;grid-column:1;justify-self:start;min-width:72px;padding-inline:12px;white-space:nowrap}
#studioOverlay[open] .overlay-header h2{grid-row:1;grid-column:2;min-width:0;width:100%;font-size:13px;line-height:1.35;letter-spacing:.2px;text-align:center;white-space:normal}
#studioOverlay[open] .overlay-header .button{font-size:13px}
#studioOverlay[open] #overlayClose{grid-row:1;grid-column:4;justify-self:end}
#studioOverlay[open] #overlayBody{display:block;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#404654 transparent}
#studioOverlay[open] .character-studio{min-height:100%;height:auto;align-content:start}
.studio-editor-tabs,#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-editor-tabs{position:static;top:auto;z-index:auto}
.studio-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;width:100%;margin:12px 0}
.studio-actions>.button,.studio-actions>.quiet{flex:initial;min-width:0;width:100%;min-height:48px;height:auto;padding:8px 9px;justify-content:center;text-align:center;text-align-last:center;white-space:normal;line-height:1.25}
.studio-actions>[data-action=copy-prompt]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 18px rgba(124,58,237,.16)}
.studio-actions>[data-action=open-chatgpt]{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);color:var(--text)}
.studio-actions>button[data-action=export]{grid-column:auto;min-width:72px;width:auto;min-height:48px;padding:8px 9px;background:transparent;border-color:transparent;color:var(--text);box-shadow:none;white-space:nowrap}
.studio-actions>button[data-action=export]:hover{background:rgba(255,255,255,.06);color:var(--text)}
.studio-prompt-actions{display:grid;gap:8px;margin-top:8px}
.studio-prompt-actions .prompt-direction{display:grid;gap:7px;color:var(--text);font-size:12px;font-weight:550}
.studio-prompt-actions .artwork-detail__additional-direction{width:100%;min-height:86px;padding:11px 12px;color:var(--text);line-height:1.6;resize:vertical}
.studio-prompt-actions .prompt-direction-note,.studio-prompt-actions .chatgpt-hint{margin:0}
.studio-prompt-actions .prompt-direction-note{color:var(--text)}
.studio-related{display:block;border-top:1px solid rgba(240,244,255,.15);margin-top:12px;padding-top:11px}
.studio-related h4{margin:0 0 10px;color:var(--text);font-size:13px;font-weight:650;line-height:1.4}
.studio-related .related-items{display:flex;justify-content:flex-start;align-items:stretch;gap:8px}
.studio-related .related-character{min-height:96px;align-content:start;text-align:left;justify-items:start}
.studio-related .related-character img{width:clamp(54px,6vw,76px);height:clamp(54px,6vw,76px)}
@media(max-width:850px){
 #studioOverlay[open]{height:min(900px,calc(100dvh - 32px));max-height:calc(100dvh - 32px)}
 #studioOverlay[open] .character-studio{grid-template-columns:minmax(0,1fr);min-height:100%;height:auto}
 #studioOverlay[open] .studio-media-column{padding:16px 28px 12px;min-width:0}
 #studioOverlay[open] .studio-preview{width:100%;height:clamp(280px,38dvh,360px);max-height:360px;min-height:240px;aspect-ratio:auto}
 #studioOverlay[open] .artwork-detail__image{width:100%;height:100%;max-height:100%;object-fit:contain}
 #studioOverlay[open] .studio-draft-host{height:100%;max-height:100%;min-height:0}
 #studioOverlay[open] .studio-draft-host canvas{width:100%;height:100%;max-height:100%;object-fit:contain}
 #studioOverlay[open] .studio-content{border-left:0;border-top:1px solid var(--border);padding:24px 28px 30px}
 .studio-related .related-character img{width:clamp(58px,11vw,76px);height:clamp(58px,11vw,76px)}
}
@media(max-width:600px){
 #studioOverlay[open]{width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 #studioOverlay[open] .overlay-shell{height:100%;max-height:none;padding-bottom:env(safe-area-inset-bottom)}
 #studioOverlay[open] .overlay-header{grid-template-columns:72px minmax(0,1fr) auto 44px;padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top));gap:4px}
 #studioOverlay[open] .overlay-header h2{font-size:12px;letter-spacing:0}
 #studioOverlay[open] .overlay-header .button{padding-left:6px;padding-right:6px;font-size:12px}
 #studioOverlay[open] #overlayBack{padding-inline:6px}
 #studioOverlay[open] #overlayBody{display:block;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}
 #studioOverlay[open] .character-studio{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;min-height:100%;height:auto;overflow:visible}
 #studioOverlay[open] .studio-media-column{display:block;padding:12px 20px 10px;overflow:visible}
 #studioOverlay[open] .studio-preview{height:clamp(238px,38dvh,320px);max-height:320px;min-height:220px}
 #studioOverlay[open] .studio-draft-host canvas{width:100%;height:100%;max-height:100%;object-fit:contain}
 #studioOverlay[open] .studio-content{min-width:0;padding:20px 20px calc(26px + env(safe-area-inset-bottom));overflow:visible}
 #studioOverlay[open] .studio-actions>.button{min-width:0;font-size:12px;padding:9px 8px}
 #studioOverlay[open] .studio-related{margin-top:12px}
 #studioOverlay[open] .studio-related .related-items{display:flex;justify-content:flex-start;gap:7px}
 #studioOverlay[open] .studio-related .related-character{flex:0 0 96px;width:96px;min-width:96px;max-width:112px;min-height:96px;padding:7px;font-size:10px;overflow-wrap:anywhere;text-align:left;justify-items:start}
 #studioOverlay[open] .studio-related .related-character img{width:clamp(52px,17vw,68px);height:clamp(52px,17vw,68px)}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .overlay-shell{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;height:100%;max-height:none;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) #overlayBody{display:block;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .character-studio{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;min-height:100%;height:auto;overflow:visible}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-media-column{display:block;flex:none;min-height:0;height:auto;padding:12px 20px 10px;overflow:visible}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-preview{display:grid;width:100%;height:clamp(238px,38dvh,320px);max-height:320px;min-height:220px;aspect-ratio:auto}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-draft-host{height:100%;max-height:100%;min-height:0}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-draft-host>.studio-editor-preview{display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-draft-host canvas{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-content{flex:none;min-height:0;overflow:visible;border-top:1px solid var(--border);padding:20px 20px calc(26px + env(safe-area-inset-bottom))}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-editor-tabs{position:static;top:auto;z-index:auto}
}
@media(max-width:350px){
 #studioOverlay[open] .studio-media-column{padding-left:16px;padding-right:16px}
 #studioOverlay[open] .studio-preview{height:clamp(224px,37dvh,260px);max-height:260px;min-height:210px}
 #studioOverlay[open] .studio-content{padding-left:16px;padding-right:16px}
 #studioOverlay[open] .overlay-header h2{font-size:12px;letter-spacing:0}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-media-column{padding-left:16px;padding-right:16px}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-preview{height:clamp(224px,37dvh,260px);max-height:260px;min-height:210px}
 #studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-content{padding-left:16px;padding-right:16px}
}

/* Keep the transparent canvas constrained to the same preview cell at tablet widths. */
#studioOverlay[open] .studio-preview{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#studioOverlay[open] .studio-preview>.artwork-detail__image,
#studioOverlay[open] .studio-preview>.studio-draft-host{grid-area:1/1;min-width:0;min-height:0}
#studioOverlay[open] .studio-draft-host{min-height:0;overflow:hidden}
#studioOverlay[open]:has(.studio-editor-content:not([hidden])) .studio-draft-host>.studio-editor-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
#studioOverlay[open] .studio-draft-host canvas.studio-editor-canvas{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain}

/* Five capability tabs remain in the natural document flow. */
.studio-editor-tabs{grid-auto-columns:minmax(80px,1fr)}
.studio-editor-option-reason{grid-column:1/-1;font-size:10px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.studio-editor-option[disabled]{cursor:not-allowed;opacity:1}
@media(max-width:600px){.studio-editor-tabs{grid-auto-columns:minmax(75px,1fr)}.studio-editor-tab{min-width:75px}}

/* Resource recovery is separate from each option's compatibility state. */
.studio-editor-selection-summary{font-size:11px;line-height:1.6;margin:0 0 12px;overflow-wrap:anywhere}
.studio-editor-option-item{min-width:0;display:flex;flex-direction:column;gap:4px}
.studio-editor-option-item>.studio-editor-option{flex:1}
.studio-editor-thumbnail-retry{min-height:44px;width:100%;border:1px solid #7b8498;border-radius:7px;background:#191d28;color:#e1e5ef;font:inherit;font-size:11px;cursor:pointer}
.studio-editor-thumbnail-retry[hidden]{display:none}
.studio-editor-thumbnail-retry:focus-visible{outline:2px solid #e0ccff;outline-offset:2px}

/* The same global selector enters the modal, so page inertness never hides it. */
#studioOverlay[open] .overlay-language-mount{grid-row:1;grid-column:3;display:flex;flex:0 0 auto;align-items:center}
#studioOverlay[open] #languagePreference{font-size:13px}
.overlay-header h2{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){.overlay-header{gap:6px}.overlay-header h2{font-size:11px;letter-spacing:0}.overlay-header #overlayBack{padding-inline:6px}}

.studio-editor-option-guidance{width:100%;min-width:0;color:var(--muted);font-size:12px;line-height:1.65}
.studio-editor-option-guidance p{margin:0 0 8px;color:var(--muted);line-height:1.65;overflow-wrap:anywhere}
.studio-editor-option-guidance p:last-child{margin-bottom:0}

/* Compact modal navigation; coarse pointers retain larger hit targets. */
#studioOverlay[open] .overlay-header{grid-template-columns:auto minmax(0,1fr) auto 36px;gap:8px;padding:4px 14px}
#studioOverlay[open] #overlayBack{min-width:0;min-height:36px;height:36px;padding:6px 8px;gap:6px;font-size:12px;line-height:18px}
#studioOverlay[open] .overlay-header h2{font-size:12px;line-height:1.35;letter-spacing:.2px}
#studioOverlay[open] #overlayClose{width:36px;height:36px;min-height:36px;padding:9px}
#studioOverlay[open] #languagePreference{min-height:36px;height:36px;padding:0 28px 0 8px;border-radius:8px;font-size:12px;line-height:20px;background-position:right 8px center,0 0;background-size:10px 10px,100% 100%}
#studioOverlay[open] .studio-editor-controls{grid-template-columns:minmax(0,1fr)}
#studioOverlay[open] .studio-editor-tabs{display:flex;width:max-content;min-width:0;max-width:100%;gap:3px;padding:3px;border-radius:10px;overflow-x:auto}
#studioOverlay[open] .studio-editor-tab{flex:0 0 auto;width:auto;min-width:0;min-height:36px;height:36px;padding:6px 10px;border-radius:7px;font-size:12px;line-height:18px;white-space:nowrap}
@supports(appearance:base-select){
 #studioOverlay[open] #languagePreference::picker(select){min-width:128px;padding:4px;margin-top:6px;border-radius:10px}
 #studioOverlay[open] #languagePreference option{min-height:36px;padding:6px 10px;border-radius:6px;font-size:12px;line-height:20px}
}
@media(max-width:600px){
 #studioOverlay[open] .overlay-header{padding:4px 10px;padding-top:max(4px,env(safe-area-inset-top));gap:4px}
 #studioOverlay[open] .overlay-header h2{letter-spacing:0}
 #studioOverlay[open] #overlayBack{padding-inline:6px}
}
@media(pointer:coarse){
 #studioOverlay[open] .overlay-header{grid-template-columns:auto minmax(0,1fr) auto 44px;padding-block:2px;padding-top:max(2px,env(safe-area-inset-top))}
 #studioOverlay[open] #overlayBack,#studioOverlay[open] #overlayClose,#studioOverlay[open] #languagePreference,#studioOverlay[open] .studio-editor-tab{min-height:44px;height:44px}
 #studioOverlay[open] #overlayClose{width:44px}
 #studioOverlay[open] #languagePreference option{min-height:44px}
}