#creator-samples {
  --sample-ink: #fbf7f2;
  --sample-muted: #c9c8cb;
  --sample-line: #45464d;
  --sample-accent: #ffc4ad;
  margin-block-start: clamp(36px, 6vw, 64px);
  padding-block: clamp(36px, 6vw, 72px);
  background: #171819;
  color: var(--sample-ink);
}

#creator-samples [hidden] { display: none !important; }

#creator-samples h2 {
  margin-block: 12px 0;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

#creator-samples .creator-sample-intro {
  max-inline-size: 65ch;
  margin-block: 12px 0;
  color: var(--sample-muted);
  line-height: 1.6;
}

.sample-catalogue-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-block: 26px 8px;
  padding-block: 14px;
  border-block: 1px solid var(--sample-line);
}

.sample-catalogue-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 12rem;
  max-inline-size: 17rem;
  gap: 5px;
  min-inline-size: 0;
  font-size: .83rem;
  font-weight: 650;
}

.sample-catalogue-field select,
.sample-catalogue-reset {
  min-block-size: 44px;
  padding: 7px 11px;
  border: 1px solid #62646b;
  border-radius: 6px;
  background: #222428;
  color: var(--sample-ink);
  color-scheme: dark;
  font: inherit;
}

.sample-catalogue-field select {
  appearance: auto !important;
  inline-size: 100%;
  min-inline-size: 0;
  padding: 7px 11px !important;
  background-image: none !important;
}

.sample-catalogue-reset { cursor: pointer; font-size: .88rem; }
.sample-catalogue-reset:hover { border-color: var(--sample-accent); }
.sample-catalogue-status { margin: 0; padding-block: 7px; color: var(--sample-muted); font-size: .85rem; }

.sample-catalogue-group { margin-block-start: clamp(26px, 4vw, 42px); }
.sample-catalogue-group + .sample-catalogue-group { padding-block-start: 28px; border-block-start: 1px solid var(--sample-line); }

.sample-section-heading h3 {
  margin: 0;
  font-size: clamp(1.22rem, 2.5vw, 1.6rem);
  line-height: 1.2;
}

.sample-section-heading p { margin-block: 6px 0; max-inline-size: 66ch; color: var(--sample-muted); line-height: 1.55; }

.creator-sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 16px;
  margin-block-start: 16px;
}

.creator-sample-card {
  min-inline-size: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  border: 1px solid var(--sample-line);
  border-radius: 6px;
  background: #222324;
}

.creator-sample-media {
  display: grid;
  place-items: center;
  block-size: clamp(182px, 24vw, 240px);
  overflow: hidden;
  border-block-end: 1px solid var(--sample-line);
  background: #101113;
}

.creator-sample-media video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  object-fit: contain;
}

.creator-sample-copy { display: grid; gap: 8px; }
.creator-sample-format { color: var(--sample-accent); font-size: .77rem; font-weight: 650; }
.creator-sample-copy :is(h3, h4) { margin: 0; font-size: 1.13rem; line-height: 1.25; text-wrap: balance; }
.creator-sample-copy p { margin: 0; color: var(--sample-muted); font-size: .92rem; line-height: 1.55; }
.creator-sample-copy .sample-credit { margin-block-start: 3px; padding-block-start: 8px; border-block-start: 1px solid var(--sample-line); font-size: .8rem; }

.sample-source { margin-block-start: auto; padding-block-start: 6px; }
.sample-source, .sample-credit a, .creator-sample-note a { color: var(--sample-accent); text-decoration: underline; text-underline-offset: .2em; }

.creator-sample-note { margin-block: 18px 0; color: var(--sample-muted); font-size: .9rem; line-height: 1.6; }
.sample-catalogue-empty { margin-block: 18px 0; padding: 14px; border: 1px solid var(--sample-line); border-radius: 6px; }
#creator-samples :is(button, select, a, video):focus-visible { outline: 2px solid var(--sample-accent); outline-offset: 2px; }
#creator-samples select:focus-visible { outline: 2px solid var(--sample-accent) !important; border-color: var(--sample-accent) !important; }
#creator-samples video:focus-visible { outline-offset: -3px; }

@media (max-width: 599px) {
  .sample-catalogue-field { flex-basis: 8rem; }
  .sample-catalogue-controls { gap: 10px; }
  .sample-catalogue-status { flex-basis: 100%; }
  .creator-sample-media { block-size: auto; aspect-ratio: 16 / 9; }
  .creator-sample-card[data-catalogue-format="portrait"] .creator-sample-media { aspect-ratio: 5 / 4; }
}

@media (max-width: 380px) {
  .sample-catalogue-field { flex-basis: 100%; max-inline-size: none; }
}