/* Public learning pages only; never apply this theme to the signed-in dashboard. */
.creator-hub {
  --ys-paper: var(--ys-plum);
  --ys-ink: var(--ys-white);
  --ys-muted: var(--ys-white);
  --ys-link: var(--ys-soft-pink);
  --ys-rule: var(--ys-bright-pink);
  --ys-blush: var(--ys-violet);
  background: var(--ys-hot-pink);
  color: var(--ys-white);
}
.creator-hub > section, .creator-hub > main > section {
  max-width: 1240px; margin: 2rem auto; padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--ys-plum); border: 3px solid var(--ys-line-ink);
  border-radius: 5px 11px 6px 9px / 10px 5px 11px 6px;
}
.creator-hub > section:nth-of-type(even), .creator-hub > main > section:nth-of-type(even) { background: var(--ys-berry); }
.creator-hub > section:first-of-type, .creator-hub > main > section:first-of-type {
  max-width: none; margin-top: 0; background: var(--ys-deep-pink); border: 0; border-bottom: 3px solid var(--ys-soft-pink); border-radius: 0;
}
.creator-hub > section > div, .creator-hub > main > section > div { min-height: 0; padding-inline: 0; }
.creator-hub .grid > *, .creator-hub .flex > div { min-width: 0; }
.creator-hub h1 { color: var(--ys-white); font-size: clamp(2.5rem, 5.2vw, 4.8rem); font-weight: 800; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.creator-hub h2 { font-size: clamp(1.875rem, 3.8vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.creator-hub h1 em, .creator-hub h2 em { color: var(--ys-soft-pink); font-style: normal; }
.creator-hub p.uppercase:not(.hub-demo p), .creator-hub .hub-kicker { font-family: 'Bangers', var(--ys-font); font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: .02em; color: var(--ys-soft-pink); }
.creator-hub .hub-card {
  background: var(--ys-blue); color: var(--ys-white); border: 3px solid var(--ys-line-ink);
  border-radius: 4px 9px 3px 8px / 8px 4px 9px 3px; box-shadow: none;
}
.creator-hub .hub-card:nth-child(3n+2) { background: var(--ys-green); }
.creator-hub .hub-card:nth-child(3n) { background: var(--ys-violet); }
.creator-hub .hub-card:hover { transform: none; box-shadow: none; }
.creator-hub .hub-card p, .creator-hub .hub-card li { font-size: 16px; line-height: 1.65; }
.creator-hub .hub-card h2 { font-size: 26px; }
.creator-hub .hub-card span.rounded-full { background: var(--ys-plum); color: var(--ys-white); }
.creator-hub .ys-cta { background: var(--ys-plum); color: var(--ys-white); border: 2px solid var(--ys-soft-pink); }
.creator-hub .ys-cta:hover { background: var(--ys-violet); }
.creator-hub .ys-cta-secondary { background: transparent; }
.creator-hub .ys-cta-secondary:hover { background: var(--ys-plum); }
.creator-hub .ys-header .ys-cta { background: var(--ys-action-bg); border-color: var(--ys-white); }
.creator-hub .hub-proof-stack { background: transparent; border: 0; }
.creator-hub .hub-proof-stack > div:nth-of-type(2) { color: var(--ys-white); }
.creator-hub .hub-application :is(input,textarea,[role='combobox']) { min-width: 0; font-size: 16px; border: 2px solid var(--ys-violet); background: var(--ys-white); }
.creator-hub .hub-application :is(input,textarea,[role='combobox']):focus-visible { outline: 3px solid var(--ys-blue); outline-offset: 2px; }
.creator-hub :is(a,button):focus-visible { outline: 3px solid var(--ys-yellow); outline-offset: 4px; }
.creator-hub .hub-filter { min-height: 44px; border: 2px solid var(--ys-soft-pink); border-radius: 6px; background: var(--ys-plum); color: var(--ys-white); }
.creator-hub .hub-filter[aria-pressed='true'] { background: var(--ys-soft-pink); color: var(--ys-plum); }
.creator-hub .hub-demo, .hub-framework-dialog {
  --ys-paper: var(--ys-white); --ys-ink: var(--ys-plum); --ys-muted: #6e5976; --ys-link: #a51e59; --ys-rule: #dfd1dc; --ys-blush: #fff0f6;
  color: var(--ys-plum); background: var(--ys-white); border: 3px solid var(--ys-soft-pink); border-radius: 6px 10px 4px 8px; box-shadow: none;
}
.creator-hub .hub-demo h2 { font-size: 26px; }
.creator-hub .hub-demo p { overflow-wrap: anywhere; }
.creator-hub .hub-demo .hub-sample-note { font-size: 13px; color: var(--ys-muted); margin: 1rem 0 0; text-align: center; }
.creator-hub .hub-demo-label { color: var(--ys-muted); }
.hub-framework-dialog { font-family: var(--ys-font); width: calc(100% - 32px); max-width: 42rem; max-height: 85dvh; overflow-y: auto; padding: 1.5rem; }
.hub-framework-dialog > button { min-width: 44px; min-height: 44px; top: .25rem; right: .25rem; display: grid; place-items: center; }
.hub-framework-dialog h2 { padding-right: 2rem; }
.hub-framework-dialog :is(a,button):focus-visible { outline: 3px solid var(--ys-violet); outline-offset: 3px; }
@media (max-width: 1279px) {
  .creator-hub > section:not(:first-of-type), .creator-hub > main > section:not(:first-of-type) { margin-inline: 1.25rem; }
}
@media (max-width: 639px) {
  .creator-hub > section, .creator-hub > main > section { padding: 1.5rem .875rem; }
  .creator-hub > section:not(:first-of-type), .creator-hub > main > section:not(:first-of-type) { margin: 1rem .75rem; }
  .creator-hub .hub-card { padding: 1rem; }
  .creator-hub .hub-demo { padding: .625rem; }
  .creator-hub .hub-card p { overflow-wrap: anywhere; }
  .creator-hub .hub-proof-stack { min-height: 0; display: grid; gap: 1rem; }
  .creator-hub .hub-proof-stack > div { position: static; width: 100%; animation: none !important; margin: 0; padding: 1rem; }
  .creator-hub .hub-report-preview > .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .creator-hub .hub-proof-stack > div { animation: none !important; } }