/* Each mode is a complete, compact studio window. Outputs stay visible. */
.generation-section.generation-studio { padding-block:0; }
.generation-story.showcase-section { display:block; scroll-margin-top:90px; }
.creation-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; grid-auto-rows:1fr; }
.creation-row { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; margin:0; min-width:0; overflow:visible; border:1px solid transparent; border-radius:10px; background:transparent; }
/* Fade only the UI shell; images and videos remain fully opaque to every edge. */
.creation-row::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border:1px solid #ffffff09; border-radius:inherit; background:linear-gradient(180deg,#151517 0%,#111113 52%,#0b0b0c00 100%); mask-image:linear-gradient(180deg,#000 0%,#000 48%,transparent 98%); }
.creation-toolbar { grid-row:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 18px; background:transparent; border-bottom:1px solid #ffffff06; }
.creation-toolbar h3 { margin:0; color:#ededee; font-size:17px; line-height:1.4; font-weight:500; letter-spacing:-.2px; }
.creation-brief { grid-row:3; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 1fr auto; align-content:stretch; align-items:start; gap:14px; min-width:0; padding:18px; border-top:1px solid transparent; }
.creation-prompt { grid-column:1/-1; grid-row:1; padding:12px 13px 10px; border:1px solid #ffffff0c; border-radius:6px; background:linear-gradient(180deg,#19191be6,#141416cc); }
.creation-prompt-label { margin:0 0 7px; color:#9999a3; font-size:11px; line-height:1.4; }
.creation-brief blockquote { margin:0; color:#e0e0e5; font-size:13px; line-height:1.6; font-weight:400; text-wrap:pretty; }
.creation-helper { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding-top:9px; border-top:1px solid #ffffff0b; color:#c8c8d0; font-size:11px; line-height:1.5; text-decoration:none; }
.creation-helper svg { width:12px; height:12px; flex:none; }
.creation-helper:hover { color:#fff; }
.creation-settings { grid-column:1; grid-row:3; display:flex; flex-wrap:wrap; align-self:center; gap:7px; margin:0; }
.creation-settings span { padding:6px 8px; border:1px solid #ffffff0c; border-radius:4px; color:#b5b5bf; font-size:11px; line-height:1.3; }
.creation-submit { grid-column:2; grid-row:3; justify-self:end; display:flex; align-items:center; align-self:center; justify-content:space-between; gap:12px; padding:9px 12px; border-radius:5px; background:#e6e6eb; color:#171719; text-decoration:none; font-size:12px; line-height:1.5; font-weight:550; }
.creation-submit svg { width:17px; height:17px; flex:none; }
.creation-submit:hover { background:#fff; }
.creation-submit:focus-visible,.creation-helper:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.creation-output { grid-row:2; isolation:isolate; position:relative; min-width:0; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--bg,#0b0b0c); }
.creation-output > img,.creation-output > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.creation-output > img { z-index:0; }
.creation-output > video { z-index:1; }
.creation-output > video:not([data-playing]) { visibility:hidden; }
/* A consistent source tray prevents reference images from changing card geometry. */
.creation-inputs { grid-column:1/-1; grid-row:2; display:flex; gap:12px; align-items:flex-start; min-width:0; }
.creation-input { flex:0 1 132px; margin:0; min-width:0; }
.creation-input img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; border-radius:4px; }
.creation-input figcaption { margin-top:6px; color:#a2a2ac; font-size:10px; line-height:1.4; }
#edit-image .creation-input { flex-basis:180px; }
.creation-detail { grid-column:1/-1; margin:0; color:#92929e; font-size:11px; line-height:1.5; }
.creation-detail a { color:inherit; text-underline-offset:3px; }
.creation-media-label { position:absolute; z-index:3; top:12px; left:12px; padding:4px 7px; border-radius:3px; background:#101012dd; color:#dfdfe5; font-size:10px; line-height:1.4; pointer-events:none; }
@media (max-width:959px) {
 .creation-examples { grid-template-columns:minmax(0,1fr); gap:22px; grid-auto-rows:auto; }
 .creation-brief { gap:12px; }
}
@media (max-width:600px) {
 .creation-toolbar { padding:12px 15px; }
 .creation-brief { padding:15px; }
 .creation-input { flex-basis:132px; }
 #edit-image .creation-input { flex-basis:180px; }
}
@media (max-width:380px) {
 .creation-brief { padding:12px; gap:10px; }
 .creation-settings { gap:5px; }
 .creation-settings span { padding:5px 6px; font-size:10px; }
 .creation-submit { padding:8px; font-size:11px; gap:6px; }
}