.prompt-library-page {
  overflow-x: clip;
  background:
    radial-gradient(circle at top left, rgba(244, 84, 35, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(24, 24, 24, 0.78) 0%, var(--sc-color-canvas) 22%, var(--sc-color-canvas) 100%);
}

.prompt-library-page * {
  box-sizing: border-box;
}

.prompt-library-page .sc-container {
  max-inline-size: var(--sc-container);
}

.prompt-library-page a,
.prompt-library-page button,
.prompt-library-page input,
.prompt-library-page select,
.prompt-library-page summary,
.prompt-library-page [tabindex="0"] {
  max-inline-size: 100%;
}

.prompt-library-page main a:not(.sc-button) {
  min-height: var(--sc-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.prompt-library-page :focus-visible {
  outline: 3px solid rgba(244, 84, 35, 0.3);
  outline-offset: 3px;
}

.prompt-library-hero__inner,
.prompt-library-notice__grid,
.prompt-library-next__card {
  display: grid;
  gap: var(--sc-space-8);
}

.prompt-library-hero__copy,
.prompt-library__intro,
.prompt-library-faq__intro,
.prompt-library-dialog__content,
.prompt-library-notice__copy {
  display: grid;
  gap: var(--sc-space-4);
}

.prompt-library-hero__copy {
  align-content: start;
}

.prompt-library-hero__actions,
.prompt-library-next__actions,
.prompt-library-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-3);
}

.prompt-library__toolbar,
.prompt-library-notice__copy,
.prompt-library-next__card {
  padding: clamp(var(--sc-space-5), 3vw, var(--sc-space-8));
}

.prompt-library-notice__copy {
  overflow-wrap: anywhere;
}

.prompt-library-hero__count {
  margin: 0;
  color: var(--sc-color-muted);
  font-size: 0.95rem;
}

.prompt-library-hero__count strong {
  color: var(--sc-color-ink);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}

.prompt-library__toolbar {
  display: grid;
  gap: var(--sc-space-4);
  margin-block: var(--sc-space-8) var(--sc-space-5);
  position: sticky;
  top: calc(var(--sc-space-16) + var(--sc-space-4));
  z-index: 20;
  border: 1px solid rgba(16, 32, 25, 0.08);
  border-radius: var(--sc-radius-xl);
  background: color-mix(in srgb, var(--sc-color-surface) 92%, white);
  box-shadow: var(--sc-shadow-sm);
  backdrop-filter: blur(16px);
}

.prompt-library__search-field,
.prompt-library__category-field {
  min-inline-size: 0;
}

.prompt-library__select {
  min-height: var(--sc-control-height);
  padding-inline-end: 2.5rem;
}

.prompt-library-dialog__status,
.prompt-library-dialog__meta,
.prompt-library__load-more {
  margin: 0;
}

.prompt-library__load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--sc-space-5);
}

.prompt-library__empty {
  margin-top: var(--sc-space-4);
}

.prompt-library__empty {
  padding: var(--sc-space-6);
  overflow-wrap: anywhere;
}

.prompt-library__grid {
  column-count: 1;
  column-gap: var(--sc-space-4);
  max-inline-size: 100%;
  margin-top: var(--sc-space-6);
}

.prompt-library__representative {
  display: grid;
  gap: var(--sc-space-3);
  margin: 0 0 var(--sc-space-4);
  padding: var(--sc-space-3);
  break-inside: avoid;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-xl);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-sm);
}

.prompt-library__representative img {
  inline-size: 100%;
  block-size: auto;
  border-radius: calc(var(--sc-radius-xl) - var(--sc-space-1));
  background: var(--sc-color-surface-muted);
}

.prompt-library__representative h3,
.prompt-library__representative p {
  margin: 0 0 var(--sc-space-2);
}

.prompt-library__card {
  width: 100%;
  margin: 0 0 var(--sc-space-4);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sc-space-3);
  padding: var(--sc-space-3);
  break-inside: avoid;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-xl);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-sm);
  color: var(--sc-color-text);
  text-align: left;
  font: 700 0.95rem/1.45 var(--sc-font-sans);
  cursor: pointer;
  transition:
    transform var(--sc-motion-fast) var(--sc-ease),
    border-color var(--sc-motion-fast) var(--sc-ease),
    box-shadow var(--sc-motion-fast) var(--sc-ease);
}

.prompt-library__card-content {
  display: grid;
  gap: var(--sc-space-2);
}

.prompt-library__card-title {
  color: var(--sc-color-text);
}

.prompt-library__card-category {
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: var(--sc-space-1) var(--sc-space-2);
  border-radius: var(--sc-radius-pill);
  background: var(--sc-color-brand-50);
  color: var(--sc-color-brand-800);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

.prompt-library__card:hover,
.prompt-library__card:focus-visible {
  border-color: var(--sc-color-brand-200);
  box-shadow: var(--sc-shadow-md);
}

.prompt-library__card:hover {
  transform: translateY(-2px);
}

.prompt-library__card[disabled] {
  opacity: 0.65;
  cursor: default;
}

.prompt-library__thumbnail {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: calc(var(--sc-radius-xl) - var(--sc-space-1));
  background: var(--sc-color-surface-muted);
  object-fit: cover;
}

.prompt-library__card-media {
  position: relative;
  display: block;
  inline-size: 100%;
  overflow: hidden;
  border-radius: calc(var(--sc-radius-xl) - var(--sc-space-1));
  background: var(--sc-color-surface-muted);
}

.prompt-library__preview-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  background: var(--sc-color-surface-muted);
  object-fit: cover;
  opacity: 0;
}

.prompt-library__card[data-video-ready="true"] .prompt-library__preview-video {
  opacity: 1;
}

.prompt-library__card[data-video-ready="true"] .prompt-library__thumbnail {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .prompt-library__preview-video { display: none; }
}

.prompt-library__image-fallback {
  color: var(--sc-color-muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

dialog[data-prompt-library-dialog] {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  max-inline-size: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: var(--sc-space-4);
  overflow-x: clip;
  overflow-y: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

dialog[data-prompt-library-dialog]::backdrop {
  background: rgba(16, 32, 25, 0.58);
}

dialog[data-prompt-library-dialog][hidden] {
  display: none;
}

.prompt-library-dialog__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "media close"
    "media content";
  inline-size: min(72rem, 100%);
  max-inline-size: 100%;
  max-block-size: calc(100vh - (var(--sc-space-4) * 2));
  max-block-size: calc(100dvh - (var(--sc-space-4) * 2));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(16, 32, 25, 0.08);
  border-radius: var(--sc-radius-xl);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-lg);
}

.prompt-library-dialog__media {
  grid-area: media;
  min-inline-size: 0;
  min-block-size: 0;
  padding: clamp(var(--sc-space-4), 2vw, var(--sc-space-6));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-self: stretch;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sc-color-brand-50) 0%, var(--sc-color-surface-muted) 100%);
}

.prompt-library-dialog__media img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.prompt-library-dialog__content {
  grid-area: content;
  min-inline-size: 0;
  min-block-size: 0;
  max-block-size: calc(100vh - (var(--sc-space-4) * 2) - var(--sc-control-height) - var(--sc-space-4));
  max-block-size: calc(100dvh - (var(--sc-space-4) * 2) - var(--sc-control-height) - var(--sc-space-4));
  padding: 0 clamp(var(--sc-space-5), 3vw, var(--sc-space-8)) clamp(var(--sc-space-5), 3vw, var(--sc-space-8));
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.prompt-library-dialog__close {
  grid-area: close;
  position: sticky;
  top: 0;
  justify-self: end;
  align-self: start;
  margin: var(--sc-space-4) var(--sc-space-4) var(--sc-space-2);
  min-width: var(--sc-control-height);
  min-height: var(--sc-control-height);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-pill);
  background: var(--sc-color-surface);
  color: var(--sc-color-text);
  font: 700 1.125rem/1 var(--sc-font-sans);
  cursor: pointer;
  z-index: 2;
}

.prompt-library-dialog__meta {
  display: grid;
  gap: var(--sc-space-3);
  color: var(--sc-color-muted);
}

.prompt-library-dialog__meta div {
  display: grid;
  gap: var(--sc-space-1);
}

.prompt-library-dialog__meta dt {
  color: var(--sc-color-subtle);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prompt-library-dialog__meta dd {
  margin: 0;
  color: var(--sc-color-text);
}

.prompt-library-dialog__prompt-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
}

.prompt-library-dialog__prompt-heading h3 {
  margin: 0;
}

.prompt-library-dialog__prompt-heading span {
  color: var(--sc-color-subtle);
  font-size: 0.8125rem;
}

.prompt-library-dialog__prompt {
  max-inline-size: 100%;
  overflow: auto;
  padding: var(--sc-space-4);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  background: var(--sc-color-surface-muted);
  color: var(--sc-color-ink);
  font: 500 0.9rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prompt-library-dialog__status {
  color: var(--sc-color-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.prompt-library-dialog__meta a[href] {
  color: var(--sc-color-brand-700);
  font-weight: 700;
  text-decoration: none;
}

.prompt-library-dialog__meta a[href]:hover,
.prompt-library-dialog__meta a[href]:focus-visible {
  color: var(--sc-color-brand-800);
  text-decoration: underline;
}

.prompt-library-notice__copy,
.prompt-library-next__card {
  max-inline-size: 100%;
}

.prompt-library-faq__inner {
  display: grid;
  gap: var(--sc-space-8);
}

@media (min-width: 40rem) {
  .prompt-library__grid {
    column-count: 2;
  }

  .prompt-library__toolbar {
    grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 1fr);
    align-items: end;
  }
}

@media (min-width: 56rem) {
  .prompt-library__grid {
    column-count: 3;
  }

  .prompt-library-notice__grid,
  .prompt-library-next__card {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
    align-items: start;
  }
}

@media (min-width: 72rem) {
  .prompt-library__grid {
    column-count: 4;
  }
}

@media (min-width: 96rem) {
  .prompt-library__grid {
    column-count: 5;
  }
}

@media (max-width: 56rem) {
  dialog[data-prompt-library-dialog] {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    place-items: stretch;
    overflow-y: hidden;
  }

  .prompt-library-dialog__panel {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-block-size: 100vh;
    max-block-size: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(8rem, min(38vh, 22rem)) minmax(0, 1fr);
    grid-template-areas:
      "close"
      "media"
      "content";
    border-radius: 0;
  }

  .prompt-library-dialog__media {
    max-block-size: none;
    padding-block-end: var(--sc-space-3);
  }

  .prompt-library-dialog__content {
    max-block-size: none;
    min-block-size: 0;
    padding-top: 0;
    overflow-y: auto;
  }

  .prompt-library-dialog__prompt {
    min-block-size: 12rem;
    overflow: auto;
  }
}

@media (max-width: 40rem) {
  .prompt-library__grid {
    display: block;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-count: 2;
    column-fill: balance;
    gap: var(--sc-space-2);
    align-items: start;
  }

  .prompt-library__grid[data-masonry-ready="true"] {
    display: grid;
    column-count: initial;
    grid-auto-flow: row;
    grid-auto-rows: 1px;
    row-gap: 0;
  }

  .prompt-library__card {
    min-inline-size: 0;
    margin: 0 0 var(--sc-space-2);
    align-self: start;
  }

  .prompt-library__grid[data-masonry-ready="true"] .prompt-library__card {
    grid-row-end: span var(--prompt-library-card-rows, 1);
    margin-block-end: var(--sc-space-2);
  }

  .prompt-library-hero__actions,
  .prompt-library-next__actions,
  .prompt-library-dialog__actions {
    flex-direction: column;
  }

  .prompt-library__toolbar,
  .prompt-library-notice__copy,
  .prompt-library-next__card,
  .prompt-library-dialog__content {
    padding-inline: var(--sc-space-4);
  }

  .prompt-library__toolbar {
    position: static;
  }

  .prompt-library-dialog__close {
    margin-inline-end: var(--sc-space-3);
    margin-block-start: var(--sc-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prompt-library__card,
  .prompt-library-dialog__close {
    transition: none;
  }

  .prompt-library-page {
    scroll-behavior: auto;
  }
}

/* The title and filters form one compact entry to the example collection. */
.prompt-library-hero { padding-block: var(--sc-space-5) var(--sc-space-3); }
.prompt-library-hero__copy { gap: var(--sc-space-2); }
.prompt-library-hero__copy .sc-title-display { max-width: none; font-size: clamp(1.5rem, 3vw, 2rem); }
.prompt-library-hero__copy .sc-lede { font-size: .875rem; }
.prompt-library-hero__copy > .sc-lede:last-of-type, .prompt-library-hero__actions { display: none; }
.prompt-library { padding-top: var(--sc-space-3); }
.prompt-library__intro { gap: var(--sc-space-2); }
.prompt-library__intro .sc-eyebrow, .prompt-library__intro .sc-lede { display: none; }
.prompt-library__intro .sc-title-section { font-size: 1rem; line-height: 1.4; }
.prompt-library__toolbar { margin-top: var(--sc-space-3); padding: var(--sc-space-3); gap: var(--sc-space-3); }
@media (max-width: 600px) {
  .prompt-library-page .sc-container { padding-inline: var(--sc-space-3); }
  .prompt-library-hero { padding-top: var(--sc-space-4); }
  .prompt-library-hero__copy .sc-eyebrow { font-size: .625rem; }
  .prompt-library__toolbar { gap: var(--sc-space-2); }
}
.prompt-library-page .prompt-library-hero { padding-block: var(--sc-space-5) var(--sc-space-3); }
.prompt-library-page .prompt-library { padding-top: var(--sc-space-3); }

/* Keep media geometry while native images and video frames become available. */
.prompt-library-dialog__media { position: relative; }

.prompt-library__card-media[data-media-state="loading"],
.prompt-library__card-media[data-media-state="error"],
.prompt-library__card[data-image-failed] .prompt-library__card-media,
.prompt-library__card[data-image-unavailable] .prompt-library__card-media {
  aspect-ratio: var(--prompt-media-ratio, 4 / 5);
}

.prompt-library__card-media {
  aspect-ratio: var(--prompt-media-ratio, auto);
}

/* Native image dimensions reserve the first-paint skeleton without script or inline CSS. */
.prompt-library__card[data-static-prompt-id] .prompt-library__card-media {
  aspect-ratio: var(--prompt-media-ratio, auto);
}

.prompt-library__card[data-static-prompt-id] .prompt-library__thumbnail {
  font-size: 0;
  line-height: 0;
}

.prompt-library__media-skeleton {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

[data-media-state="loading"] > .prompt-library__media-skeleton,
[data-media-state="error"] > .prompt-library__media-skeleton { display: block; }

[data-media-state="error"] > .prompt-library__media-skeleton { animation: none; }

.prompt-library__card-media[data-media-state="loading"] > img,
.prompt-library-dialog__media[data-media-state="loading"] > img,
.prompt-library-dialog__media[data-media-state="loading"] > video { opacity: 0; }

.prompt-library__card-media img[hidden],
.prompt-library-dialog__media img[hidden],
.prompt-library-dialog__media video[hidden] { display: none; }