/* Storybook: composición y componentes propios del modo, basados en duo.md. */
html[data-cs-appearance="storybook"] {
  --sb-green: #58cc02;
  --sb-wash: #d7ffb8;
  --sb-blue: #1cb0f6;
  --sb-charcoal: #4b4b4b;
  --sb-pencil: #777;
  --sb-gray: #afafaf;
  --sb-paper: #fff;
  --sb-display: Nunito, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --sb-sans: "Nunito Sans", "Trebuchet MS", sans-serif;
  --body-bg-color: var(--sb-paper);
  --body-color: var(--sb-charcoal);
  --body-font-family: var(--sb-sans);
  --link-color: var(--sb-blue);
  --bs-body-bg: var(--sb-paper);
  --bs-body-color: var(--sb-charcoal);
  --bs-primary: var(--sb-green);
  --bs-primary-rgb: 88, 204, 2;
  --bs-link-color: var(--sb-blue);
  --bs-link-hover-color: #087eb7;
  --bs-border-color: var(--sb-gray);
  color-scheme: light;
  background: var(--sb-paper);
}

html[data-cs-appearance="storybook"] body {
  font-family: var(--sb-sans) !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sb-charcoal) !important;
  background: var(--sb-paper) !important;
}
html[data-cs-appearance="storybook"] body :is(input, select, textarea, button) { font-family: var(--sb-sans) !important; }
html[data-cs-appearance="storybook"] body :is(h1, h2, .display-1, .display-2, .display-3, .display-4) {
  font-family: var(--sb-display) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  color: var(--sb-green) !important;
}
html[data-cs-appearance="storybook"] body :is(h1, .display-1, .display-2) { font-size: clamp(48px, 5vw, 64px) !important; }
html[data-cs-appearance="storybook"] body :is(h2, .display-3, .display-4) { font-size: clamp(32px, 4vw, 48px) !important; }
html[data-cs-appearance="storybook"] body :is(h3, .card-title, .section-title) {
  font: 700 32px/1.2 var(--sb-sans) !important;
  letter-spacing: 0 !important;
  color: var(--sb-charcoal) !important;
}
html[data-cs-appearance="storybook"] body :is(h4, h5, h6, .subheading) { font: 700 19px/1.4 var(--sb-sans) !important; color: var(--sb-charcoal) !important; }
html[data-cs-appearance="storybook"] body :is(p, .text-muted, .text-secondary, .post-time, .data-content .text) { color: var(--sb-pencil) !important; }
html[data-cs-appearance="storybook"] body :is(a:not(.btn), .data-content .name a) { color: var(--sb-blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html[data-cs-appearance="storybook"] body :is(.main-wrapper, .sg-offcanvas, .sg-offcanvas-mainbar) { background: var(--sb-paper) !important; }

/* Header como barra de aplicación limpia y centrada. */
html[data-cs-appearance="storybook"] body .main-header {
  height: 72px;
  border-bottom: 2px solid var(--sb-gray);
  background: var(--sb-paper) !important;
  box-shadow: none !important;
}
html[data-cs-appearance="storybook"] body .main-header > :is(.container, .container-fluid) { max-width: 1200px; }
html[data-cs-appearance="storybook"] body .main-header .logo img { max-height: 42px; }
html[data-cs-appearance="storybook"] body .main-header .search-wrapper,
html[data-cs-appearance="storybook"] body .main-header .search-wrapper .form-control { border-radius: 12px !important; }
html[data-cs-appearance="storybook"] body .navbar-wrapper > ul { gap: 8px; }
html[data-cs-appearance="storybook"] body .navbar-wrapper > ul > li > a,
html[data-cs-appearance="storybook"] body .navbar-wrapper .header-icon { border-radius: 12px; }

/* La navegación lateral funciona como mapa del curso; el feed ocupa un único escenario. */
html[data-cs-appearance="storybook"] body .container.sg-offcanvas {
  display: grid;
  grid-template-columns: 210px minmax(0, 760px);
  justify-content: center;
  align-items: start;
  gap: 32px;
  width: min(1200px, calc(100% - 48px));
  max-width: 1200px;
  margin: 96px auto 64px !important;
  padding: 0;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas > .row { display: contents; }
html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar { grid-column: 1; width: auto; padding: 0; }
html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .main-side-nav-card {
  position: sticky;
  top: 96px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--sb-paper) !important;
  box-shadow: none !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .main-side-nav-card:before {
  display: block;
  margin-bottom: 12px;
  padding: 0 12px 12px;
  border-bottom: 2px solid var(--sb-gray);
  color: var(--sb-pencil);
  content: "TU ESPACIO";
  font: 700 15px/1.33 var(--sb-sans);
  letter-spacing: .053em;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .main-side-nav > li:has(> a[href="#mine"]),
html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .main-side-nav > li:has(> a[href="#explore"]),
html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .main-side-nav > li:has(> a[href="#more"]) {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 2px solid var(--sb-wash);
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .card-body { padding: 0; }
html[data-cs-appearance="storybook"] body .main-side-nav > li { margin: 4px 0; }
html[data-cs-appearance="storybook"] body .main-side-nav a,
html[data-cs-appearance="storybook"] body .main-side-nav .static {
  display: block;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 12px;
  color: var(--sb-pencil) !important;
  font: 700 15px/1.33 var(--sb-sans);
  letter-spacing: .053em;
  text-transform: uppercase;
}
html[data-cs-appearance="storybook"] body .main-side-nav a:hover,
html[data-cs-appearance="storybook"] body .main-side-nav > li.active > a,
html[data-cs-appearance="storybook"] body .main-side-nav ul > li.active > a {
  border-color: var(--sb-gray);
  background: var(--sb-wash) !important;
  color: var(--sb-charcoal) !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar { grid-column: 2; width: auto; min-width: 0; padding: 0; }
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  margin: 0;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar > .row > .col-lg-8,
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar > .row > .col-lg-4 { width: auto; max-width: none; padding: 0; }
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar > .row > .col-lg-4 {
  grid-row: 2;
  display: block;
  border-top: 2px solid var(--sb-wash);
  padding-top: 32px;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar > .row > .col-lg-4 > .d-none.d-lg-block { display: block !important; }

/* Cabecera editorial ilustrada: el personaje aporta la capa de fantasía del MD. */
html[data-cs-appearance="storybook"] body .cs-storybook-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  gap: 24px;
  min-height: 250px;
  margin: 0 0 24px;
  padding: 20px 24px 28px;
  border: 0;
  border-bottom: 3px solid var(--sb-wash);
  border-radius: 0;
  background: var(--sb-paper);
}
html[data-cs-appearance="storybook"] body .cs-storybook-hero-copy { max-width: 480px; }
html[data-cs-appearance="storybook"] body .cs-storybook-eyebrow {
  margin: 0 0 12px;
  color: var(--sb-pencil);
  font: 700 13px/1.23 var(--sb-sans);
  letter-spacing: .053em;
}
html[data-cs-appearance="storybook"] body .cs-storybook-hero h1 {
  margin: 0 0 12px;
  font: 900 clamp(42px, 5vw, 56px)/1.08 var(--sb-display) !important;
  letter-spacing: -.02em !important;
  color: var(--sb-green) !important;
}
html[data-cs-appearance="storybook"] body .cs-storybook-hero-copy > p:last-child {
  max-width: 360px;
  margin: 0;
  color: var(--sb-pencil) !important;
  font: 500 17px/1.4 var(--sb-sans);
}
html[data-cs-appearance="storybook"] body .cs-storybook-mascot {
  display: block;
  width: min(100%, 230px);
  height: auto;
  justify-self: center;
  overflow: visible;
}

/* Historias pasan a selector visual de personas, con el botón de crear intacto. */
html[data-cs-appearance="storybook"] body .cs-stories-rail,
html[data-cs-appearance="storybook"] body .cs-story-empty {
  position: relative;
  min-height: 116px;
  margin: 0 0 20px;
  padding: 16px 20px;
  border: 0 !important;
  border-bottom: 2px solid var(--sb-wash) !important;
  border-radius: 0 !important;
  background: var(--sb-paper) !important;
}
html[data-cs-appearance="storybook"] body .cs-stories-scroller { min-height: 80px; }
html[data-cs-appearance="storybook"] body :is(.cs-story-add, .cs-story-empty-add) {
  min-width: 80px;
  border: 2px solid var(--sb-gray) !important;
  border-radius: 12px !important;
  background: var(--sb-paper) !important;
  color: var(--sb-pencil) !important;
  font: 700 13px/1.23 var(--sb-sans) !important;
}
html[data-cs-appearance="storybook"] body :is(.cs-story-add, .cs-story-empty-add):hover { border-color: var(--sb-green) !important; background: var(--sb-wash) !important; }
html[data-cs-appearance="storybook"] body .cs-story-avatar { border: 3px solid var(--sb-green); }

/* El compositor es una invitación a participar; el módulo editorial acompaña sin marco de tarjeta. */
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .publisher {
  margin: 0 0 28px;
  padding: 20px 24px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sb-wash) !important;
  box-shadow: none !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .publisher textarea {
  min-height: 64px;
  border: 2px solid var(--sb-gray) !important;
  border-radius: 12px !important;
  background: var(--sb-paper) !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .publisher :is(.publisher-meta, .publisher-tools-tabs) { border: 0 !important; background: transparent !important; }

/* Publicaciones quedan como capítulos: imagen protagonista, sin caja alrededor de cada post. */
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item,
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .cs-storybook-post {
  overflow: visible;
  margin: 0 0 40px;
  padding: 0 0 28px;
  border: 0 !important;
  border-bottom: 2px solid var(--sb-wash) !important;
  border-radius: 0 !important;
  background: var(--sb-paper) !important;
  box-shadow: none !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item .post-header { padding: 16px 16px 12px; }
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item .post-body { padding: 8px 16px 12px; }
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item .post-body > :is(.card, .post-content, .post-text, .post-media-container),
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item :is(.post-text, .post-caption, .post-description) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item .post-media {
  margin: 4px 0 0;
  overflow: hidden;
  border-radius: 18px !important;
  background: var(--sb-wash);
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item .post-footer {
  padding: 12px 16px;
  border: 0 !important;
  background: transparent !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item :is(.post-avatar, .data-avatar img) { border: 3px solid var(--sb-wash); }
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item :is(.post-actions button, .post-action, .js_react) {
  min-height: 40px;
  border-radius: 12px !important;
  color: var(--sb-blue) !important;
  font: 700 14px/1.33 var(--sb-sans) !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item :is(.post-media, .post-media img, .post-media video) { border-radius: 12px; }

/* Destacados y bloques laterales se presentan como módulos de contenido, no como paneles oscuros. */
html[data-cs-appearance="storybook"] body :is(.card, .list-group-item, .auth-access, .auth-worlds > div) {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sb-paper) !important;
  box-shadow: 0 4px 0 rgba(75, 75, 75, .10) !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item :is(.card, .card-body, .card-header, .card-footer, .post-body, .post-footer, .post-text, .data-container) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item .post-media,
html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item .post-media * {
  background-color: transparent;
  box-shadow: none !important;
}
html[data-cs-appearance="storybook"] body :is(.bg-indigo, .bg-teal, .bg-primary, .bg-info, .bg-success) { background: var(--sb-wash) !important; color: var(--sb-charcoal) !important; }
html[data-cs-appearance="storybook"] body .cs-creator-spotlight {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  overflow: visible;
  margin: 0 0 24px;
  padding: 24px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sb-wash) !important;
  color: var(--sb-charcoal) !important;
  box-shadow: none !important;
}
html[data-cs-appearance="storybook"] body .cs-spotlight-head { grid-column: 1; grid-row: 1; padding: 0; }
html[data-cs-appearance="storybook"] body .cs-spotlight-head h3 { margin: 0; font: 900 32px/1.2 var(--sb-display) !important; color: var(--sb-charcoal) !important; }
html[data-cs-appearance="storybook"] body .cs-spotlight-head h3 em { color: var(--sb-green) !important; font-style: normal; }
html[data-cs-appearance="storybook"] body .cs-spotlight-eyebrow { color: var(--sb-pencil) !important; font: 700 13px/1.23 var(--sb-sans) !important; }
html[data-cs-appearance="storybook"] body .cs-spotlight-track { grid-column: 2; grid-row: 1; gap: 12px; padding: 0; }
html[data-cs-appearance="storybook"] body .cs-spotlight-card { height: auto; overflow: hidden; border-radius: 12px; background: var(--sb-paper); box-shadow: 0 4px 0 rgba(75,75,75,.15); }
html[data-cs-appearance="storybook"] body .cs-spotlight-card > a { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; min-height: 112px; gap: 16px; color: var(--sb-charcoal); }
html[data-cs-appearance="storybook"] body .cs-spotlight-photo { grid-column: 1; width: 112px; height: 112px; border-radius: 12px; }
html[data-cs-appearance="storybook"] body .cs-spotlight-shade,
html[data-cs-appearance="storybook"] body :is(.cs-spotlight-rank, .cs-spotlight-count) { display: none; }
html[data-cs-appearance="storybook"] body .cs-spotlight-caption { position: static; display: flex; grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px 10px 0; background: var(--sb-paper); color: var(--sb-charcoal); }
html[data-cs-appearance="storybook"] body .cs-spotlight-caption small { color: var(--sb-pencil); font: 700 13px/1.23 var(--sb-sans); }
html[data-cs-appearance="storybook"] body .cs-spotlight-caption strong { margin: 0; color: var(--sb-charcoal); font: 700 19px/1.4 var(--sb-sans); }
html[data-cs-appearance="storybook"] body .cs-spotlight-cta { min-height: 40px; padding: 8px 12px; border: 2px solid var(--sb-gray); border-radius: 12px; color: var(--sb-blue); font: 700 14px/1.3 var(--sb-sans); }
html[data-cs-appearance="storybook"] body :is(.cs-spotlight-thumbs, .cs-spotlight-footer) { display: none; }

/* Banda verde de cierre y enlaces apilados, como define duo.md. */
html[data-cs-appearance="storybook"] body .footer {
  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  margin: 64px 0 24px -50vw !important;
  padding: 48px max(24px, calc((100vw - 1200px) / 2));
  border: 0 !important;
  background: var(--sb-green) !important;
  color: var(--sb-paper) !important;
  font: 500 15px/1.4 var(--sb-sans);
}
html[data-cs-appearance="storybook"] body .footer :is(a, .language-dropdown) { color: var(--sb-paper) !important; text-decoration: none; }
html[data-cs-appearance="storybook"] body .footer :is(a:hover, .language-dropdown:hover) { color: var(--sb-wash) !important; }
html[data-cs-appearance="storybook"] body .footer .language-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 12px;
  font: 700 15px/1.33 var(--sb-sans);
  letter-spacing: .053em;
  text-transform: uppercase;
}
html[data-cs-appearance="storybook"] body .footer .language-dropdown img { width: 20px; height: 20px; margin: 0; border-radius: 50%; object-fit: cover; }
html[data-cs-appearance="storybook"] body .footer .links { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
html[data-cs-appearance="storybook"] body .footer .links a { margin: 0; padding: 0; color: var(--sb-wash) !important; font-size: 14px; }
html[data-cs-appearance="storybook"] body .footer .links a:hover { color: var(--sb-paper) !important; }
html[data-cs-appearance="storybook"] body .footer-bottom-bar { border-top: 2px solid var(--sb-wash); background: var(--sb-paper); }
html[data-cs-appearance="storybook"] body .footer-bottom-bar-links > .link > a { color: var(--sb-pencil); }
html[data-cs-appearance="storybook"] body .footer-bottom-bar-links > .link > a:hover,
html[data-cs-appearance="storybook"] body .footer-bottom-bar-links > .link.active > a { background: var(--sb-wash); color: var(--sb-charcoal); }
html[data-cs-appearance="storybook"] body .footer-bottom-bar .header-icon.active { color: var(--sb-green) !important; }

/* Controles: relleno verde en acciones principales y borde gris en alternativas. */
html[data-cs-appearance="storybook"] body :is(.btn, button:not(.cs-logo-egg):not(.cs-appearance-close):not(.cs-unlock-close), .auth-register-cta, .cs-unlock-primary, .cs-unlock-secondary) {
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--sb-gray) !important;
  border-radius: 12px !important;
  background: var(--sb-paper);
  color: var(--sb-charcoal);
  font: 700 15px/1.33 var(--sb-sans);
  letter-spacing: .053em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(75,75,75,.16) !important;
}
html[data-cs-appearance="storybook"] body :is(.btn-primary, .auth-register-cta, .publisher button[type="submit"], .cs-unlock-primary) {
  border: 0 !important;
  background: var(--sb-green) !important;
  color: var(--sb-paper) !important;
  box-shadow: 0 4px 0 #46a900 !important;
}
html[data-cs-appearance="storybook"] body :is(.btn-primary, .auth-register-cta, .publisher button[type="submit"], .cs-unlock-primary):active { transform: translateY(3px); box-shadow: 0 1px 0 #46a900 !important; }
html[data-cs-appearance="storybook"] body :is(.btn-light, .btn-default, .btn-secondary, .btn-outline-primary, .cs-unlock-secondary) { background: var(--sb-paper) !important; color: var(--sb-blue) !important; }
html[data-cs-appearance="storybook"] body :is(.form-control, .form-select, .input-group-text, textarea) {
  min-height: 44px;
  border: 2px solid var(--sb-gray) !important;
  border-radius: 12px !important;
  background: var(--sb-paper) !important;
  color: var(--sb-charcoal) !important;
  font: 500 17px/1.18 var(--sb-sans);
}
html[data-cs-appearance="storybook"] body :is(.form-control:focus, .form-select:focus, textarea:focus) { border-color: var(--sb-green) !important; outline: 0; box-shadow: 0 0 0 2px var(--sb-green) !important; }
html[data-cs-appearance="storybook"] body :is(.dropdown-menu, .modal-content, .popover, .cs-mobile-search-panel) { border: 2px solid var(--sb-gray) !important; border-radius: 12px !important; background: var(--sb-paper) !important; color: var(--sb-charcoal) !important; box-shadow: 0 4px 0 rgba(75,75,75,.12) !important; }
html[data-cs-appearance="storybook"] body .dropdown-item:hover { background: var(--sb-wash) !important; color: var(--sb-charcoal) !important; }
html[data-cs-appearance="storybook"] body :is(.text-primary, .header-icon.active, .header-icon.active *) { color: var(--sb-green) !important; }
html[data-cs-appearance="storybook"] body :is(.progress, .progress-bar) { border-radius: 12px !important; }
html[data-cs-appearance="storybook"] body .progress-bar { background: var(--sb-green) !important; }

@media (max-width: 991.98px) {
  html[data-cs-appearance="storybook"] body .container.sg-offcanvas { grid-template-columns: 1fr; width: min(760px, calc(100% - 32px)); gap: 20px; margin-top: 92px !important; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar { grid-column: 1; grid-row: 1; display: block; width: 100%; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .main-side-nav-card { position: static; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .main-side-nav-card:before { display: none; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar .card-body { overflow: hidden; }
  html[data-cs-appearance="storybook"] body .main-side-nav { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
  html[data-cs-appearance="storybook"] body .main-side-nav > li { flex: 0 0 auto; margin: 0; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar { grid-column: 1; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar > .row > .col-lg-4 { grid-row: 2; }
}
@media (max-width: 767px) {
  html[data-cs-appearance="storybook"] body .container.sg-offcanvas { position: relative; overflow: hidden; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-sidebar { width: 100%; padding: 0; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar { position: relative; }
}
@media (max-width: 575.98px) {
  html[data-cs-appearance="storybook"] body .container.sg-offcanvas { width: calc(100% - 24px); margin-top: 78px !important; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar > .row { gap: 28px; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .publisher { padding: 12px; }
  html[data-cs-appearance="storybook"] body .cs-storybook-hero { grid-template-columns: minmax(0, 1fr) 112px; min-height: 180px; gap: 8px; padding: 16px 8px 22px; }
  html[data-cs-appearance="storybook"] body .cs-storybook-hero h1 { font-size: 36px !important; }
  html[data-cs-appearance="storybook"] body .cs-storybook-eyebrow { font-size: 11px; }
  html[data-cs-appearance="storybook"] body .cs-storybook-hero-copy > p:last-child { font-size: 15px; }
  html[data-cs-appearance="storybook"] body .cs-storybook-mascot { width: 116px; }
  html[data-cs-appearance="storybook"] body .sg-offcanvas-mainbar .feeds-item { margin-bottom: 28px; padding-bottom: 20px; }
  html[data-cs-appearance="storybook"] body .cs-creator-spotlight { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  html[data-cs-appearance="storybook"] body .cs-spotlight-head,
  html[data-cs-appearance="storybook"] body .cs-spotlight-track { grid-column: 1; grid-row: auto; }
  html[data-cs-appearance="storybook"] body .cs-spotlight-head h3 { font-size: 26px !important; }
  html[data-cs-appearance="storybook"] body .cs-spotlight-card > a { grid-template-columns: 88px minmax(0,1fr); min-height: 88px; gap: 12px; }
  html[data-cs-appearance="storybook"] body .cs-spotlight-photo { width: 88px; height: 88px; }
  html[data-cs-appearance="storybook"] body .cs-spotlight-footer { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-cs-appearance="storybook"] body :is(.btn, button, .card, a) { transition: none !important; }
}