[data-studio-session-slot] {
  --ss-peek: 100px;
  --ss-gutter: clamp(20px, 3vw, 56px);
  position: relative;
  z-index: 2;
  margin-block-start: calc(-1 * var(--ss-peek));
  padding-inline: var(--ss-gutter);
}

.ss-job-actions { padding-block-start: 8px; }
.ss-card-failed{--failure-border:#f87171;--failure-text:#fecaca}
.ss-card-failed .ss-failure-preview{padding:6px 12px;overflow:auto;place-items:safe center;border:1px solid transparent;background:linear-gradient(145deg,var(--panel),var(--bg)) padding-box,linear-gradient(130deg,var(--failure-border),color-mix(in srgb,var(--failure-border) 15%,var(--panel)),color-mix(in srgb,var(--failure-border) 50%,var(--panel))) border-box}
.ss-failure-content{display:grid;justify-items:center;gap:4px;max-width:38ch;text-align:center}
.ss-failure-content h3{margin:0;font-size:clamp(13px,1.2vw,16px);line-height:1.25;font-weight:600;color:var(--text);text-wrap:balance}
.ss-failure-content p{margin:0;font-size:12px;line-height:1.35;color:var(--muted);text-wrap:pretty}
.ss-failure-actions{display:flex;align-items:center;justify-content:center;gap:6px}
.ss-failure-actions .ss-details{min-height:44px;padding:8px 10px;font-size:12px;justify-content:center}
.ss-failure-content .ss-retry{min-height:44px;padding:8px 16px;border:1px solid var(--failure-border);border-radius:9px;color:var(--failure-text);background:linear-gradient(rgb(255 255 255 / .06),transparent),color-mix(in srgb,var(--failure-border) 12%,var(--panel));box-shadow:inset 0 1px rgb(255 255 255 / .1),0 2px 0 var(--bg);justify-content:center;font-size:12px;font-weight:600}
.ss-failure-help{margin-top:12px;padding:12px 0 0;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--muted)}
.ss-failure-help p{margin:0 0 8px}
.ss-failure-help summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;color:var(--text)}
.ss-failure-help summary::before{content:'+';font-size:16px}.ss-failure-help details[open] summary::before{content:'−'}
.ss-support-reference code{display:block;overflow-wrap:anywhere;color:var(--text);user-select:all;font-size:11px}
@media(hover:hover){.ss-failure-content .ss-retry:hover{filter:brightness(1.12)}}

[data-studio-session-slot]:has([data-empty]) {
  --ss-peek: 54px;
}

[data-studio-session] {
  min-height: calc(65svh + var(--ss-peek));
  padding-block: 10px 56px;
}

[data-studio-session][data-empty] {
  min-height: var(--ss-peek);
  padding-block: 0;
}

.ss-header,
.ss-title {
  display: flex;
  align-items: center;
}

.ss-header {
  justify-content: space-between;
  gap: 8px 20px;
  min-height: 44px;
  margin-block-end: 16px;
  padding-block-end: 6px;
  border-bottom: 1px solid var(--line-strong);
}

[data-studio-session][data-empty] .ss-header {
  justify-content: center;
  margin: 0;
  padding-block-end: 0;
  border-bottom: 0;
}

.ss-title {
  gap: 8px 12px;
  flex-wrap: wrap;
}

.ss-title h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(19px, 1.85vw, 26px);
  font-weight: 600;
  letter-spacing: -.025em;
}

.ss-count,
.ss-card-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ss-count {
  font-variant-numeric: tabular-nums;
}

.ss-library {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ss-library svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.ss-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(240px, 22vw, 320px)), 1fr));
  gap: clamp(20px, 2vw, 32px);
  transition: opacity 220ms var(--studio-ease), filter 220ms var(--studio-ease);
}

.ss-grid:not([data-revealed], :has(:focus-visible)) {
  opacity: .36;
  filter: blur(5px);
  pointer-events: none;
}

.ss-card {
  position: relative;
  min-width: 0;
}

.ss-card-button {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.ss-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: var(--ss-ratio, 16 / 9);
  contain: size;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--studio-surface);
  transition: border-color 180ms var(--studio-ease);
}

.ss-media:has(> :is(img, video)) {
  display: block;
  aspect-ratio: auto;
  contain: none;
}

.ss-media > :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto var(--ss-ratio, 16 / 9);
}

.ss-media-generating {
  position: relative;
  border-color: #3a3d43;
  background:
    radial-gradient(ellipse at 50% 51%, #040506 32%, transparent 68%),
    radial-gradient(ellipse at 95% 16%, #0f1216, transparent 52%),
    radial-gradient(ellipse at 5% 84%, #0e1013, transparent 54%),
    #040506;
}

.ss-media-generating studio-galaxy {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ss-generation-live {
  position: fixed;
  z-index: 20;
  inset-inline-end: max(18px, env(safe-area-inset-right, 0px));
  inset-block-end: max(16px, env(safe-area-inset-bottom, 0px));
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  text-shadow: 0 1px 5px var(--bg), 0 0 12px var(--bg);
  pointer-events: none;
}

.ss-generation-live:not(:empty)::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: #c8c8ff;
  vertical-align: .12em;
}


.ss-placeholder {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
}

.ss-placeholder svg {
  width: 16px;
  height: 16px;
}


[data-studio-session] :is(a, button, .ss-grid):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

@media (hover: hover) {
  .ss-library:hover {
    background: var(--studio-surface);
    color: var(--text);
  }

  .ss-card-button:hover .ss-media {
    border-color: var(--studio-line);
  }
}

@media (max-width: 720px), (max-height: 740px) {
  .marketing-studio:has(+ [data-studio-session-slot] .ss-grid) {
    padding-block-end: 106px;
  }

  .marketing-studio:has(+ [data-studio-session-slot] [data-empty]) {
    padding-block-end: 52px;
  }
}

@media (max-width: 720px) {
  .marketing-studio:has(+ [data-studio-session-slot]) {
    min-height: calc(100svh - 60px);
  }

  [data-studio-session] {
    scroll-margin-block-start: 72px;
  }

  .ss-header {
    column-gap: 5px;
  }

  .ss-title {
    display: grid;
    gap: 3px;
  }

  .ss-library {
    font-size: 12px;
  }

  .ss-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-grid,
  .ss-media {
    transition: none;
  }
}