/* Last-loaded reference layer: glass, water, and readable creation controls. */
html[data-theme="light"] { --hero-surface:var(--studio-bg); --hero-ink:#263747; --hero-soft:#637583; }
html[data-theme="dark"] { --hero-surface:var(--studio-bg); --hero-ink:#edf3f7; --hero-soft:#b6c4cf; }

/* Keep the photographed object whole; the image occupies the right of the scene. */
#stage .hero {
  position:relative; isolation:isolate; display:flex; flex-direction:row; justify-content:flex-start; align-items:center;
  width:100%; max-width:none; min-height:440px; margin:0 auto; padding:44px 48px; gap:0; overflow:hidden;
  border:0; border-radius:0; box-shadow:none;
  background:var(--hero-surface); text-align:left;
}
#stage .hero-aura { display:none; }
#stage .hero-copy { position:relative; z-index:2; width:45%; max-width:500px; text-align:left; }
#stage .hero-kicker { color:var(--hero-soft); font-size:9px; letter-spacing:.18em; margin-bottom:22px; }
#stage .hero-kicker i { background:var(--hero-soft); box-shadow:none; }
#stage .hero-title { color:var(--hero-ink); font-family:"Songti SC","STSong",ui-serif,Georgia,serif; font-size:clamp(58px,6.15vw,88px); font-weight:500; line-height:1.12; letter-spacing:-.05em; }
html[data-theme] #stage .hero-title > span { display:block; color:#5b86a6; background:linear-gradient(110deg,#55799f 12%,#6a9ebb 76%,#8fb3c5); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
html[data-theme="dark"] #stage .hero-title > span { background-image:linear-gradient(110deg,#a9cce7 12%,#80b1d2 76%,#c0dae8); }
#stage .hero-lede { max-width:350px; margin:22px 0 0; color:var(--hero-soft); font-size:12px; line-height:1.9; }
#stage .hero-scene { position:absolute; z-index:0; inset:-8px; margin:0; pointer-events:none; transform:translate(calc(var(--hero-shift-x,0px) * -.18),calc(var(--hero-shift-y,0px) * -.22)); transition:transform 1.3s cubic-bezier(.16,1,.3,1); }
#stage .hero-scene img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; transform-origin:72% 60%; animation:lake-light-breathe 13s ease-in-out infinite alternate; }
#stage .hero-scene::before { content:""; position:absolute; z-index:1; inset:-15%; background:radial-gradient(ellipse at calc(66% + var(--hero-shift-x,0px)) calc(38% + var(--hero-shift-y,0px)),rgba(255,247,226,.18),transparent 36%); mix-blend-mode:soft-light; transition:background-position 1s ease; }
#stage .hero-scene::after { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(90deg,color-mix(in srgb,var(--hero-surface) 65%,transparent),color-mix(in srgb,var(--hero-surface) 24%,transparent) 34%,transparent 58%),linear-gradient(0deg,var(--hero-surface),color-mix(in srgb,var(--hero-surface) 46%,transparent) 9%,transparent 28%); }
html[data-theme="dark"] #stage .hero-scene img { filter:brightness(.59) saturate(.78); }
html[data-theme="dark"] #stage .hero-scene::after { background:linear-gradient(90deg,color-mix(in srgb,var(--hero-surface) 75%,transparent),color-mix(in srgb,var(--hero-surface) 30%,transparent) 35%,transparent 61%),linear-gradient(0deg,var(--hero-surface),transparent 30%); }
#stage > #composer { position:relative; z-index:3; margin-top:-24px; }

/* Upload geometry is invariant across pointer, focus, theme, and workspace states. */
#composer #attachBtn, body.reference-workspace #dock #composer #attachBtn,
#composer #attachBtn:is(:hover,:focus,:focus-visible,:active),
body.reference-workspace #dock #composer #attachBtn:is(:hover,:focus,:focus-visible,:active) {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 40px; width:40px; min-width:40px; max-width:40px;
  height:40px; min-height:40px; max-height:40px; padding:0; margin:1px 0 0;
  border-radius:11px; transform:none !important; transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s;
}
#composer #attachBtn svg, body.reference-workspace #dock #composer #attachBtn svg { flex:0 0 18px; width:18px; height:18px; }
#composer #attachBtn > span, #composer #attachBtn > b { display:none !important; }
#composer #attachBtn:focus-visible { outline:2px solid var(--studio-focus); outline-offset:3px; }

/* Capability-driven hidden controls stay hidden; visible settings remain in flow. */
#composer #composerOptions,
#composer.options-open #composerOptions,
body.reference-workspace #dock #composer #composerOptions,
body.reference-workspace #dock #composer.options-open #composerOptions {
  position:static !important; inset:auto !important; display:flex !important; flex-wrap:wrap;
  align-items:center; justify-content:flex-start; gap:6px; width:100%; height:auto; min-height:0;
  max-height:none !important; margin:11px 0 0; padding:0; overflow:visible;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  transform:none !important; animation:none !important;
}
#composer #composerOptions > .chip,
body.reference-workspace #dock #composer #composerOptions > .chip {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  flex:0 1 auto; width:auto; max-width:100%; height:30px; min-height:30px; padding:0 9px;
  border:1px solid var(--studio-line); border-radius:8px; background:var(--studio-panel-2);
  color:var(--studio-muted); transform:none !important; font-size:11px;
}
#composer #composerOptions > .chip .chip-key { display:inline; margin:0; color:var(--studio-quiet); font-size:9px; line-height:1; }
#composer #composerOptions > .chip .chip-label { min-width:0; margin:0; color:var(--studio-text); font-size:11px; line-height:1; }
#composer #composerOptions > .chip .chev { width:8px; height:5px; margin:0; }
#composer #composerOptions > .chip .toggle { margin:0; transform:scale(.78); transform-origin:center; }
#composer #composerOptions[hidden], body.reference-workspace #dock #composer #composerOptions[hidden],
#composer #composerOptions > .chip[hidden], body.reference-workspace #dock #composer #composerOptions > .chip[hidden] { display:none !important; }
#composer #dockOptionsToggle, body.reference-workspace #dock #composer #dockOptionsToggle { display:none !important; }

/* Models are explanations, with one readable card per row. */
#modelPanel { width:min(650px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:min(580px,calc(100dvh - 24px)); border-radius:16px; }
#modelPanel[hidden] { display:none !important; }
#modelPanel .model-panel-head { flex:0 0 auto; padding:17px 19px 14px; gap:5px; }
#modelPanel .model-panel-head > span { font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:0; color:var(--studio-text); }
#modelPanel .model-panel-head small { font-family:var(--sans); font-size:11px; letter-spacing:0; }
#modelPanel #modelList { display:flex; flex-direction:column; gap:8px; min-height:0; padding:10px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#modelPanel #modelList .model-item { position:relative; display:flex; flex:0 0 auto; align-items:flex-start; gap:14px; min-height:0; width:100%; padding:17px 18px; border:1px solid var(--studio-line); border-radius:11px; background:var(--studio-panel); transform:none; box-shadow:none; }
#modelPanel #modelList .model-item:is(:hover,.selected) { border-color:var(--studio-line-strong); background:var(--studio-accent-soft); }
#modelPanel #modelList .model-item:focus-visible { outline:2px solid var(--studio-focus); outline-offset:-2px; }
#modelPanel #modelList .model-item-left { flex:1; gap:6px; min-width:0; }
#modelPanel #modelList .model-item-name { display:flex; flex-wrap:wrap; gap:7px; font-size:14px; line-height:1.5; font-weight:600; }
#modelPanel #modelList .model-check { flex:0 0 18px; margin-top:3px; }
#modelPanel #modelList .model-label { display:inline; color:var(--studio-accent); font-size:10px; font-weight:500; line-height:1.5; padding:0; border:0; background:none; }
#modelPanel #modelList .model-purpose { display:block; margin:3px 0 0; color:var(--studio-text); font-size:13px; font-weight:500; line-height:1.65; }
#modelPanel #modelList .model-fit { display:block; margin:0; color:var(--studio-muted); font-size:12px; font-weight:400; line-height:1.7; overflow-wrap:anywhere; }
#modelPanel #modelList .model-input-hint { display:block; margin:3px 0 0; color:var(--studio-text); font-size:12px; font-weight:400; line-height:1.7; overflow-wrap:anywhere; }
#modelPanel #modelList .model-limit { display:block; margin:0; color:var(--studio-muted); font-size:11px; font-weight:400; line-height:1.7; overflow-wrap:anywhere; }

/* On hover/focus, the full facts scroll above a fixed action row. */
:is(body.reference-workspace #stage, #viewAssets) .card :is(.card-media-progress,.card-media-unavailable) { position:absolute; z-index:2; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:18px; text-align:center; color:var(--studio-muted); font:11px/1.7 var(--sans); background:var(--studio-panel-2); }
:is(body.reference-workspace #stage, #viewAssets) .card :is(.card-media-shell,.card-video-shell).media-loading .card-media-progress { display:flex; }
:is(body.reference-workspace #stage, #viewAssets) .card :is(.card-media-shell,.card-video-shell).media-failed .card-media-unavailable { display:flex; }
:is(body.reference-workspace #stage, #viewAssets) .card .card-media-progress::before { content:""; width:26px; height:26px; border-radius:50%; border:1px solid var(--studio-line-strong); border-top-color:var(--studio-accent); animation:preview-frame-turn 1.3s linear infinite; }
@keyframes preview-frame-turn { to { transform:rotate(360deg); } }
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details) .card-overlay { gap:5px; z-index:3; }
:is(body.reference-workspace #stage, #viewAssets) .card .output-details { display:none; min-height:0; }
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details):is(:hover,:focus-within) .card-overlay {
  inset:0; min-height:0; padding:18px 16px 52px; justify-content:flex-start;
  background:linear-gradient(135deg,rgba(13,24,36,.94),rgba(12,20,30,.89)); backdrop-filter:blur(13px);
  overflow:hidden; opacity:1; transform:none;
}
:is(body.reference-workspace #stage, #viewAssets) .card:is(:hover,:focus-within) .output-details { display:flex; flex-direction:column; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:3px; }
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details):is(:hover,:focus-within) .card-overlay > :is(.card-prompt,.card-config,.card-created-date),
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details):is(:hover,:focus-within) .card-model { display:none; }
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details):is(:hover,:focus-within) .card-meta { flex:0 0 auto; margin-top:auto; }
.output-facts { flex:0 0 auto; order:0; margin:0; color:#eff4fa; font-size:11px; line-height:1.6; }
.output-facts > div { display:grid; grid-template-columns:62px minmax(0,1fr); align-items:baseline; gap:3px 8px; margin-bottom:5px; }
.output-facts dt { margin:0; color:#9fb0c2; font-size:9px; font-weight:400; line-height:1.6; }
.output-facts dd { margin:0; color:#eff4fa; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.output-full-prompt { flex:0 0 auto; order:1; margin:10px 0 0; padding-top:10px; border-top:1px solid rgba(225,237,249,.14); color:#eff4fa; font-size:11px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details) .card-actions { position:absolute; display:flex; gap:4px; right:12px; bottom:11px; z-index:5; }
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details) .card-actions button { min-height:30px; background:rgba(238,244,251,.1); border-color:rgba(238,244,251,.22); }
:is(body.reference-workspace #stage, #viewAssets) .card:not(:hover):not(:focus-within) .card-actions { opacity:0; pointer-events:none; }

/* Tool previews keep download links and native playback controls exposed. */
#viewAiTools .ai-output-media { position:relative; isolation:isolate; outline-offset:-3px; }
#viewAiTools .ai-output-media:focus-visible { outline:2px solid var(--studio-focus); }
#viewAiTools .tool-output-details {
  position:absolute; z-index:2; inset:0 0 36px; display:block; padding:18px;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  background:linear-gradient(135deg,rgba(13,24,36,.94),rgba(12,20,30,.89)); color:#eff4fa; backdrop-filter:blur(13px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s,visibility .2s;
}
#viewAiTools .ai-output-media:has(> video) .tool-output-details { bottom:88px; }
#viewAiTools .ai-output-media:has(> audio) .tool-output-details { bottom:100px; }
#viewAiTools .ai-output-media:is(:hover,:focus-within) .tool-output-details { opacity:1; visibility:visible; pointer-events:auto; }
#viewAiTools .ai-output-media figcaption { position:relative; z-index:3; min-height:36px; box-sizing:border-box; }
#viewAiTools .tool-output-details .output-facts { font-size:11px; }
#viewAiTools .tool-output-details > .output-details { display:flex; flex-direction:column; }

/* A refracted ripple opens, settles, and reveals using the existing phase timing. */
.generation-transition .transition-bloom { transform-origin:var(--transition-x,50%) var(--transition-y,65%); }
.generation-transition .transition-bloom i { background:radial-gradient(ellipse,rgba(177,215,246,.42),transparent 64%); }
.generation-transition .transition-bloom i:nth-child(2) { background:radial-gradient(ellipse,rgba(209,223,241,.35),transparent 66%); }
.generation-transition .transition-bloom i:nth-child(3) { background:radial-gradient(ellipse,rgba(255,236,203,.27),transparent 58%); }
.generation-transition .transition-lens {
  position:absolute; left:var(--transition-x,50%); top:var(--transition-y,65%); width:min(76vw,740px); aspect-ratio:1;
  border-radius:50%; border:1px solid rgba(230,244,255,.72); opacity:0; transform:translate(-50%,-50%) scale(.12);
  background:radial-gradient(circle at 27% 23%,rgba(255,255,255,.32),transparent 19%),conic-gradient(from 28deg,transparent 9%,rgba(167,203,239,.19) 19%,transparent 31%,rgba(255,239,211,.24) 52%,transparent 70%,rgba(208,233,251,.17) 87%,transparent);
  box-shadow:inset 0 0 40px 3px rgba(172,210,244,.14),inset 8px 7px 26px rgba(255,255,255,.2),0 0 50px 10px var(--studio-focus-soft);
}
.generation-transition .transition-lens::before { content:""; position:absolute; inset:12%; border-radius:50%; border:1px solid rgba(204,230,250,.43); box-shadow:inset 0 0 25px rgba(188,220,244,.15); }
.generation-transition .transition-lens::after { content:""; position:absolute; inset:27%; border-radius:50%; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 36%),radial-gradient(circle at 66% 75%,rgba(162,203,237,.16),transparent 66%); border:1px solid rgba(231,244,253,.38); }
.generation-transition .transition-beam { left:-35%; top:var(--transition-y,65%); width:160%; height:2px; background:linear-gradient(90deg,transparent 8%,rgba(163,207,240,.2),rgba(254,247,231,.93) 50%,rgba(176,215,245,.3),transparent 90%); box-shadow:0 0 18px 7px rgba(174,215,244,.25),0 0 70px 15px var(--studio-focus-soft); }
.generation-transition .transition-aperture { inset:auto; left:var(--transition-x,50%); top:var(--transition-y,65%); width:min(140vw,1200px); aspect-ratio:1; border-color:rgba(208,233,251,.4); background:radial-gradient(circle,transparent 26%,rgba(175,215,245,.13) 31%,transparent 38%,rgba(238,230,211,.1) 48%,transparent 63%); transform:translate(-50%,-50%) scale(.1); }
.generation-transition[data-phase="launch"] .transition-bloom { animation:waterlight-launch 1.35s cubic-bezier(.22,.7,.2,1) both; }
.generation-transition[data-phase="launch"] .transition-lens { animation:waterlight-lens 1.35s cubic-bezier(.16,1,.3,1) both; }
.generation-transition[data-phase="launch"] .transition-beam { animation:waterlight-beam 1.35s cubic-bezier(.16,1,.3,1) both; }
.generation-transition[data-phase="launch"] .transition-aperture { animation:waterlight-aperture 1.35s cubic-bezier(.16,1,.3,1) both; }
.generation-transition[data-phase="waiting"] .transition-bloom { animation:none; opacity:.1; transform:scale(1.4) translateY(-4%); }
.generation-transition[data-phase="waiting"] .transition-lens { opacity:.16; transform:translate(-50%,-50%) scale(1.08); animation:waterlight-rest 5s ease-in-out infinite alternate; }
.generation-transition[data-phase="waiting"] .transition-beam { opacity:0; animation:none; }
.generation-transition[data-phase="waiting"] .transition-aperture { opacity:.07; transform:translate(-50%,-50%) scale(1.15); animation:none; }
.generation-transition[data-phase="reveal"] .transition-bloom { animation:waterlight-reveal-bloom 1.1s cubic-bezier(.16,1,.3,1) both; }
.generation-transition[data-phase="reveal"] .transition-lens { animation:waterlight-reveal-lens 1.1s cubic-bezier(.16,1,.3,1) both; }
.generation-transition[data-phase="reveal"] .transition-beam { animation:waterlight-reveal-beam 1.1s ease-out both; }
.generation-transition[data-phase="reveal"] .transition-aperture { animation:waterlight-reveal-aperture 1.1s cubic-bezier(.16,1,.3,1) both; }
body.reference-workspace #stage .gen-orbit, #viewAiTools .ai-task-lens { background:radial-gradient(circle at 25% 22%,rgba(255,255,255,.35),transparent 27%),conic-gradient(from 18deg,transparent,rgba(179,214,242,.15),transparent 40%,rgba(238,228,209,.18),transparent 80%); border-color:color-mix(in srgb,var(--studio-focus) 40%,transparent); box-shadow:inset 0 0 24px var(--studio-focus-soft),inset 3px 2px 10px rgba(255,255,255,.12),0 0 45px var(--studio-focus-soft); }
body.reference-workspace #stage .gen-preview { min-height:148px; isolation:isolate; }
body.reference-workspace #stage .gen-preview::before {
  content:""; display:block; position:absolute; z-index:-2; inset:-24px -16px;
  background:url('./assets/lumina-glass-lake-hero-20260929.png') 78% 48% / auto 225px;
  filter:blur(16px); opacity:.27; border:0;
  mask-image:radial-gradient(ellipse,#000 8%,transparent 71%);
}
body.reference-workspace #stage .gen-orbit {
  width:140px; height:82px; top:20px; border:5px solid rgba(204,226,245,.7); border-radius:50%;
  background:conic-gradient(from 30deg,rgba(255,255,255,.62),rgba(164,201,234,.26),rgba(246,231,209,.76),rgba(151,191,228,.36),rgba(255,255,255,.62));
  box-shadow:inset 1px 3px 9px rgba(255,255,255,.84),inset -4px -2px 10px rgba(143,181,212,.32),0 10px 24px rgba(141,184,218,.16),0 0 55px rgba(182,215,243,.4);
  animation:glass-wait-float 7s ease-in-out infinite alternate;
}
body.reference-workspace #stage .gen-orbit::after { inset:7px; border:1px solid rgba(255,255,255,.76); }
body.reference-workspace #stage .gen-star {
  width:48px; height:48px; flex:0 0 48px; border-radius:50%; font-size:0; margin-top:8px;
  background:radial-gradient(circle at 30% 23%,rgba(255,255,255,.97) 0,rgba(226,239,250,.86) 20%,rgba(164,199,230,.42) 62%,rgba(240,226,201,.79));
  box-shadow:inset 0 0 1px 1px rgba(255,255,255,.8),inset -6px -5px 10px rgba(141,183,217,.25),0 8px 28px rgba(152,192,225,.3);
  animation:glass-pearl-breathe 5s ease-in-out infinite alternate;
}
body.reference-workspace #stage .gen-preview > span { margin-top:12px; }
@keyframes glass-wait-float { from{transform:rotate(-27deg) translateY(-3px)} to{transform:rotate(-19deg) translateY(3px)} }
@keyframes glass-pearl-breathe { from{transform:translateY(-2px);opacity:.82} to{transform:translateY(2px);opacity:1} }

@keyframes waterlight-launch { 0%{opacity:0;transform:scale(.18) translateY(14%)} 40%{opacity:.65} 100%{opacity:.1;transform:scale(1.4) translateY(-4%)} }
@keyframes waterlight-lens { 0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-14deg)} 34%{opacity:.68} 100%{opacity:.16;transform:translate(-50%,-50%) scale(1.08) rotate(0deg)} }
@keyframes waterlight-beam { 0%{opacity:0;transform:rotate(-9deg) translateY(70px) scaleX(.2)} 25%{opacity:.85} 100%{opacity:0;transform:rotate(-9deg) translateY(-180px) scaleX(1.25)} }
@keyframes waterlight-aperture { 0%{opacity:0;transform:translate(-50%,-50%) scale(.1)} 35%{opacity:.6} 100%{opacity:.07;transform:translate(-50%,-50%) scale(1.15)} }
@keyframes waterlight-rest { from{opacity:.12;transform:translate(-50%,-50%) scale(1.08)} to{opacity:.18;transform:translate(-50%,-50%) scale(1.11)} }
@keyframes waterlight-reveal-bloom { from{opacity:var(--reveal-bloom-opacity,var(--reveal-opacity,.1));transform:var(--reveal-bloom-transform,var(--reveal-transform,scale(1.4) translateY(-4%)))} to{opacity:0;transform:scale(1.8) translateY(-8%)} }
@keyframes waterlight-reveal-lens { from{opacity:var(--reveal-lens-opacity,.16);transform:var(--reveal-lens-transform,translate(-50%,-50%) scale(1.08))} to{opacity:0;transform:translate(-50%,-50%) scale(1.36)} }
@keyframes waterlight-reveal-beam { from{opacity:var(--reveal-beam-opacity,var(--beam-opacity,0));transform:var(--reveal-beam-transform,var(--beam-transform,rotate(-9deg) translateY(-180px) scaleX(1.25)))} to{opacity:0;transform:rotate(-9deg) translateY(-230px) scaleX(1.5)} }
@keyframes waterlight-reveal-aperture { from{opacity:var(--reveal-aperture-opacity,var(--aperture-opacity,.07));transform:var(--reveal-aperture-transform,var(--aperture-transform,translate(-50%,-50%) scale(1.15)))} to{opacity:0;transform:translate(-50%,-50%) scale(1.6)} }

@keyframes lake-light-breathe { from{transform:scale(1.012);opacity:.96} to{transform:scale(1.035);opacity:1} }
#viewCreate:not(.active) .hero-scene img, body.reference-workspace .hero-scene img { animation-play-state:paused; }
@media (min-width:1700px) { #stage .hero { min-height:460px; } }
@media (max-width:1100px) and (min-width:761px) {
  #stage .hero { min-height:420px; padding:36px 30px; }
  #stage .hero-copy { width:45%; }
  #stage .hero-title { font-size:clamp(50px,6vw,66px); }
  #stage .hero-lede { font-size:11px; max-width:290px; }
}
@media (max-width:760px) {
  #stage .hero { display:block; min-height:390px; margin-top:0; padding:27px 24px 206px; border-radius:0; text-align:left; }
  #stage .hero-copy { width:100%; max-width:none; text-align:left; }
  #stage .hero-kicker { font-size:8px; margin-bottom:12px; }
  #stage .hero-title { font-size:clamp(42px,11vw,58px); line-height:1.06; }
  html[data-theme] #stage .hero-title > span { display:block; }
  #stage .hero-lede { max-width:270px; margin:12px 0 0; font-size:10px; line-height:1.8; }
  #stage .hero-scene img { inset:auto 0 0; width:100%; height:245px; object-position:79% center; }
  #stage .hero-scene::after, html[data-theme="dark"] #stage .hero-scene::after { background:linear-gradient(180deg,var(--hero-surface) 0%,color-mix(in srgb,var(--hero-surface) 90%,transparent) 29%,color-mix(in srgb,var(--hero-surface) 42%,transparent) 48%,transparent 67%),linear-gradient(0deg,var(--hero-surface),transparent 19%); }
  #stage > #composer { margin-top:-16px; }
  #composer #composerOptions, body.reference-workspace #dock #composer #composerOptions { gap:5px; margin-top:9px; }
  #composer #composerOptions > .chip, body.reference-workspace #dock #composer #composerOptions > .chip { padding:0 7px; height:29px; min-height:29px; gap:5px; }
  #composer #composerOptions > .chip .chip-key { font-size:8px; }
  #composer #composerOptions > .chip .chip-label { font-size:10px; }
  #modelPanel .model-panel-head { padding:15px 16px 12px; }
  #modelPanel #modelList { padding:8px; gap:7px; }
  #modelPanel #modelList .model-item { padding:14px 13px; }
  #modelPanel #modelList .model-item-name { font-size:13px; }
  #modelPanel #modelList .model-purpose { font-size:12px; }
  #modelPanel #modelList .model-fit, #modelPanel #modelList .model-input-hint { font-size:11px; }
  :is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details):is(:hover,:focus-within) .card-overlay { padding:12px 10px 49px; }
  :is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details) .card-actions { right:8px; bottom:8px; }
  .output-facts { font-size:10px; }
  .output-facts > div { grid-template-columns:53px minmax(0,1fr); gap:3px 6px; margin-bottom:5px; }
  #viewAiTools .tool-output-details { padding:14px; }
  .generation-transition .transition-lens { width:92vw; }
  .generation-transition .transition-beam { box-shadow:0 0 18px 5px var(--studio-focus-soft); }
}
@media (prefers-reduced-motion:reduce) {
  .generation-transition { display:none !important; }
  #stage .hero-scene { transform:none !important; }
  .generation-transition *, #stage .hero *, #composer #attachBtn, .card-media-progress::before,
  #viewAiTools .tool-output-details, #modelPanel .model-item,
  body.reference-workspace #stage .gen-orbit, #viewAiTools .ai-task-lens { animation:none !important; transition:none !important; }
}