.design-lab-shell {
   --dl-page: #f5f8fb;
   --dl-panel: #ffffff;
   --dl-panel-soft: #eff8fb;
   --dl-text: #172433;
   --dl-muted: #607080;
   --dl-accent: #39b8e8;
   --dl-accent-2: #116a8c;
   --dl-border: #dbe5ec;
   --dl-shadow: 0 18px 44px rgba(23, 36, 51, 0.1);
   --dl-radius: 10px;
   background:
      linear-gradient(135deg, rgba(57, 184, 232, 0.14) 0%, rgba(255, 255, 255, 0) 34%),
      var(--dl-page);
   color: var(--dl-text);
   min-height: 100vh;
   margin: -1rem calc(50% - 50vw) 0;
   padding: 2rem max(1.25rem, calc((100vw - 1180px) / 2));
}

.design-lab-shell * {
   box-sizing: border-box;
}

.design-lab-toolbar {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
   gap: 1.5rem;
   align-items: end;
   margin-bottom: 1.25rem;
}

.design-lab-kicker,
.design-lab-eyebrow,
.sample-question-label,
.design-card-head span {
   color: var(--dl-accent-2);
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0;
   margin: 0 0 0.35rem;
   text-transform: uppercase;
}

.design-lab-toolbar h1 {
   color: var(--dl-text);
   font-size: 2.8rem;
   font-weight: 800;
   line-height: 1.02;
   margin: 0 0 0.5rem;
}

.design-lab-intro {
   color: var(--dl-muted);
   font-size: 1.02rem;
   line-height: 1.6;
   margin: 0;
   max-width: 46rem;
}

.design-lab-picker label {
   color: var(--dl-text);
   display: block;
   font-weight: 700;
   margin-bottom: 0.45rem;
}

.design-lab-select-wrap {
   position: relative;
}

.design-lab-select-wrap::after {
   border-bottom: 2px solid var(--dl-select-text, var(--dl-text));
   border-right: 2px solid var(--dl-select-text, var(--dl-text));
   content: "";
   height: 0.55rem;
   pointer-events: none;
   position: absolute;
   right: 1rem;
   top: 50%;
   transform: translateY(-65%) rotate(45deg);
   width: 0.55rem;
}

.design-lab-picker select {
   appearance: none;
   background-color: var(--dl-select-bg, var(--dl-panel));
   background-image: none;
   border: 1px solid var(--dl-border);
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(23, 36, 51, 0.06);
   color: var(--dl-select-text, var(--dl-text));
   min-height: 2.8rem;
   padding-right: 2.5rem;
   width: 100%;
}

.design-lab-picker select option {
   background-color: #ffffff;
   color: #172433;
}

.design-lab-hero {
   align-items: center;
   background: var(--dl-panel);
   border: 1px solid var(--dl-border);
   border-radius: var(--dl-radius);
   box-shadow: var(--dl-shadow);
   display: grid;
   gap: 1.25rem;
   grid-template-columns: minmax(0, 1fr) auto;
   margin-bottom: 1.25rem;
   padding: 1.4rem;
}

.design-lab-brand {
   align-items: center;
   display: grid;
   gap: 1.25rem;
   grid-template-columns: 10rem minmax(0, 1fr);
}

.design-lab-logo {
   display: block;
   max-width: 100%;
   width: 10rem;
}

.design-lab-brand h2 {
   color: var(--dl-text);
   font-size: 1.45rem;
   font-weight: 760;
   line-height: 1.18;
   margin: 0;
}

.design-lab-eyebrow {
   margin-bottom: 0.35rem;
}

.design-lab-badges {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   justify-content: flex-end;
}

.design-lab-badges span,
.sample-reactions span {
   background: var(--dl-panel-soft);
   border: 1px solid var(--dl-border);
   border-radius: 999px;
   color: var(--dl-accent-2);
   font-size: 0.86rem;
   font-weight: 700;
   padding: 0.45rem 0.75rem;
   white-space: nowrap;
}

.design-lab-grid {
   display: grid;
   gap: 1.1rem;
   grid-template-columns: repeat(12, minmax(0, 1fr));
}

.design-card {
   background: var(--dl-panel);
   border: 1px solid var(--dl-border);
   border-radius: var(--dl-radius);
   box-shadow: var(--dl-shadow);
   grid-column: span 4;
   min-width: 0;
   padding: 1.15rem;
}

.design-card-post {
   grid-column: span 8;
}

.design-card-comments,
.design-card-gallery {
   grid-column: span 6;
}

.design-card-head {
   align-items: baseline;
   display: flex;
   gap: 0.75rem;
   justify-content: space-between;
   margin-bottom: 1rem;
}

.design-card-head h3,
.profile-chip h4,
.sample-question h4 {
   color: var(--dl-text);
   font-weight: 760;
   line-height: 1.2;
   margin: 0;
}

.profile-chip,
.sample-post-meta,
.sample-comment {
   display: flex;
   gap: 0.85rem;
   min-width: 0;
}

.profile-chip img,
.sample-post-meta img,
.sample-comment img {
   border-radius: 999px;
   flex: 0 0 auto;
   height: 3.25rem;
   object-fit: cover;
   width: 3.25rem;
}

.profile-chip p,
.sample-post-meta p,
.sample-post-text,
.sample-comment p,
.sample-question blockquote {
   color: var(--dl-muted);
   line-height: 1.55;
   margin: 0;
}

.profile-stats {
   border-top: 1px solid var(--dl-border);
   display: grid;
   gap: 0.7rem;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   list-style: none;
   margin: 1rem 0 0;
   padding: 1rem 0 0;
}

.profile-stats li {
   color: var(--dl-muted);
   font-size: 0.92rem;
}

.profile-stats strong {
   color: var(--dl-text);
   display: block;
   font-size: 1.2rem;
}

.sample-post-text {
   font-size: 1.04rem;
   margin-top: 1rem;
}

.sample-post-photo {
   aspect-ratio: 16 / 9;
   border-radius: calc(var(--dl-radius) + 2px);
   display: block;
   margin: 1rem 0;
   object-fit: cover;
   width: 100%;
}

.sample-reactions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.55rem;
}

.sample-thread {
   display: grid;
   gap: 0.75rem;
}

.sample-comment {
   background: var(--dl-panel-soft);
   border: 1px solid var(--dl-border);
   border-radius: calc(var(--dl-radius) + 2px);
   padding: 0.85rem;
}

.sample-comment strong {
   color: var(--dl-text);
}

.sample-comment-reply {
   margin-left: 2rem;
}

.sample-question blockquote {
   background: var(--dl-panel-soft);
   border-left: 4px solid var(--dl-accent);
   border-radius: 0 var(--dl-radius) var(--dl-radius) 0;
   margin-top: 1rem;
   padding: 1rem;
}

.sample-gallery {
   display: grid;
   gap: 0.7rem;
   grid-template-columns: 1.35fr 1fr 1fr;
}

.sample-gallery img {
   aspect-ratio: 1 / 1;
   border-radius: calc(var(--dl-radius) + 2px);
   display: block;
   object-fit: cover;
   width: 100%;
}

.sample-gallery img:first-child {
   aspect-ratio: 1 / 1.45;
   grid-row: span 2;
}

/* Option 1: A polished Memayo-native dashboard. */
.design-lab-shell[data-theme="memayo"] {
   --dl-page: #f3f9fc;
   --dl-panel: #ffffff;
   --dl-panel-soft: #e8f7fb;
   --dl-text: #173045;
   --dl-muted: #617487;
   --dl-accent: #46c1ee;
   --dl-accent-2: #087da8;
   --dl-border: #d7e8ef;
   --dl-shadow: 0 18px 48px rgba(14, 90, 126, 0.13);
}

.design-lab-shell[data-theme="memayo"] .design-card-post {
   background: linear-gradient(180deg, #ffffff 0%, #f9fdff 100%);
}

/* Option 2: LinkedIn-style professional social feed. */
.design-lab-shell[data-theme="linkedin"] {
   --dl-page: #f3f2ef;
   --dl-panel: #ffffff;
   --dl-panel-soft: #eef3f8;
   --dl-text: #191919;
   --dl-muted: #666666;
   --dl-accent: #0a66c2;
   --dl-accent-2: #0a66c2;
   --dl-border: #d7d2cb;
   --dl-shadow: none;
   --dl-radius: 8px;
   background: var(--dl-page);
}

.design-lab-shell[data-theme="linkedin"] .design-lab-toolbar {
   grid-template-columns: minmax(0, 1fr) 18rem;
   margin-bottom: 0.9rem;
}

.design-lab-shell[data-theme="linkedin"] .design-lab-toolbar h1 {
   font-size: 2.15rem;
   font-weight: 650;
}

.design-lab-shell[data-theme="linkedin"] .design-lab-hero {
   border-top: 4px solid var(--dl-accent);
   grid-template-columns: minmax(0, 1fr);
}

.design-lab-shell[data-theme="linkedin"] .design-lab-grid {
   grid-template-columns: 17rem minmax(0, 1fr) 20rem;
}

.design-lab-shell[data-theme="linkedin"] .design-card {
   grid-column: auto;
}

.design-lab-shell[data-theme="linkedin"] .design-card-profile {
   grid-column: 1;
   grid-row: 1 / span 2;
}

.design-lab-shell[data-theme="linkedin"] .design-card-post {
   grid-column: 2;
   grid-row: 1 / span 2;
}

.design-lab-shell[data-theme="linkedin"] .design-card-comments {
   grid-column: 3;
   grid-row: 1;
}

.design-lab-shell[data-theme="linkedin"] .design-card-qa {
   grid-column: 3;
   grid-row: 2;
}

.design-lab-shell[data-theme="linkedin"] .design-card-gallery {
   grid-column: 1 / -1;
}

.design-lab-shell[data-theme="linkedin"] .profile-chip {
   display: block;
   text-align: center;
}

.design-lab-shell[data-theme="linkedin"] .profile-chip img {
   height: 5.25rem;
   margin-bottom: 0.85rem;
   width: 5.25rem;
}

.design-lab-shell[data-theme="linkedin"] .profile-stats {
   grid-template-columns: 1fr;
}

.design-lab-shell[data-theme="linkedin"] .sample-post-photo,
.design-lab-shell[data-theme="linkedin"] .sample-gallery img,
.design-lab-shell[data-theme="linkedin"] .sample-comment {
   border-radius: 8px;
}

/* Option 3: A visual-first gallery board. */
.design-lab-shell[data-theme="gallery"] {
   --dl-page: #101114;
   --dl-panel: #f6f2ea;
   --dl-panel-soft: #1c2027;
   --dl-text: #f6f2ea;
   --dl-muted: #b8b0a3;
   --dl-accent: #ff5c35;
   --dl-accent-2: #ffb49e;
   --dl-border: rgba(246, 242, 234, 0.18);
   --dl-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
   --dl-radius: 6px;
   background:
      linear-gradient(180deg, rgba(255, 92, 53, 0.08), rgba(16, 17, 20, 0) 38%),
      #101114;
   --dl-select-bg: #f6f2ea;
   --dl-select-text: #101114;
}

.design-lab-shell[data-theme="gallery"] .design-lab-toolbar h1,
.design-lab-shell[data-theme="gallery"] .design-lab-brand h2,
.design-lab-shell[data-theme="gallery"] .design-card-head h3,
.design-lab-shell[data-theme="gallery"] .profile-chip h4,
.design-lab-shell[data-theme="gallery"] .sample-question h4,
.design-lab-shell[data-theme="gallery"] .sample-comment strong,
.design-lab-shell[data-theme="gallery"] .profile-stats strong {
   color: var(--dl-text);
}

.design-lab-shell[data-theme="gallery"] .design-lab-hero,
.design-lab-shell[data-theme="gallery"] .design-card {
   background: #181b21;
}

.design-lab-shell[data-theme="gallery"] .design-lab-grid {
   grid-auto-flow: dense;
}

.design-lab-shell[data-theme="gallery"] .design-card-post {
   grid-column: span 7;
   grid-row: span 2;
}

.design-lab-shell[data-theme="gallery"] .design-card-gallery {
   grid-column: span 5;
   grid-row: span 2;
}

.design-lab-shell[data-theme="gallery"] .design-card-profile,
.design-lab-shell[data-theme="gallery"] .design-card-comments,
.design-lab-shell[data-theme="gallery"] .design-card-qa {
   grid-column: span 4;
}

.design-lab-shell[data-theme="gallery"] .sample-post-photo {
   aspect-ratio: 4 / 5;
}

.design-lab-shell[data-theme="gallery"] .sample-gallery {
   grid-template-columns: 1fr;
}

.design-lab-shell[data-theme="gallery"] .sample-gallery img,
.design-lab-shell[data-theme="gallery"] .sample-gallery img:first-child {
   aspect-ratio: 16 / 10;
   grid-row: auto;
}

/* Option 4: Editorial magazine layout with stronger typography. */
.design-lab-shell[data-theme="magazine"] {
   --dl-page: #fbfaf7;
   --dl-panel: #fffdfa;
   --dl-panel-soft: #f0f4ee;
   --dl-text: #182018;
   --dl-muted: #65705f;
   --dl-accent: #1f7a5c;
   --dl-accent-2: #176047;
   --dl-border: #d8ded2;
   --dl-shadow: 0 18px 34px rgba(36, 48, 36, 0.09);
   --dl-radius: 4px;
   background: var(--dl-page);
}

.design-lab-shell[data-theme="magazine"] .design-lab-toolbar {
   border-bottom: 2px solid var(--dl-text);
   padding-bottom: 1.2rem;
}

.design-lab-shell[data-theme="magazine"] .design-lab-toolbar h1,
.design-lab-shell[data-theme="magazine"] .design-lab-brand h2 {
   font-family: Georgia, "Times New Roman", serif;
   font-weight: 700;
}

.design-lab-shell[data-theme="magazine"] .design-lab-toolbar h1 {
   font-size: 3rem;
}

.design-lab-shell[data-theme="magazine"] .design-lab-hero {
   box-shadow: none;
}

.design-lab-shell[data-theme="magazine"] .design-lab-grid {
   grid-template-columns: 1.2fr 1fr 1fr;
}

.design-lab-shell[data-theme="magazine"] .design-card {
   box-shadow: none;
   grid-column: auto;
}

.design-lab-shell[data-theme="magazine"] .design-card-post {
   grid-column: 1 / span 2;
   grid-row: 1 / span 2;
}

.design-lab-shell[data-theme="magazine"] .design-card-gallery {
   grid-column: 1 / -1;
}

.design-lab-shell[data-theme="magazine"] .sample-post-text {
   color: var(--dl-text);
   font-family: Georgia, "Times New Roman", serif;
   font-size: 1.25rem;
}

.design-lab-shell[data-theme="magazine"] .sample-gallery {
   grid-template-columns: repeat(3, 1fr);
}

.design-lab-shell[data-theme="magazine"] .sample-gallery img,
.design-lab-shell[data-theme="magazine"] .sample-gallery img:first-child {
   aspect-ratio: 4 / 3;
   grid-row: auto;
}

/* Option 5: Quiet modern workspace. */
.design-lab-shell[data-theme="minimal"] {
   --dl-page: #f7f7f4;
   --dl-panel: #ffffff;
   --dl-panel-soft: #f3f5f6;
   --dl-text: #1f2933;
   --dl-muted: #6c7580;
   --dl-accent: #14a38b;
   --dl-accent-2: #087a69;
   --dl-border: #e4e7ea;
   --dl-shadow: none;
   --dl-radius: 8px;
   background: var(--dl-page);
}

.design-lab-shell[data-theme="minimal"] .design-lab-toolbar {
   align-items: start;
}

.design-lab-shell[data-theme="minimal"] .design-lab-toolbar h1 {
   font-size: 2.35rem;
}

.design-lab-shell[data-theme="minimal"] .design-lab-hero {
   border-left: 5px solid var(--dl-accent);
   box-shadow: none;
}

.design-lab-shell[data-theme="minimal"] .design-lab-grid {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.design-lab-shell[data-theme="minimal"] .design-card {
   grid-column: auto;
}

.design-lab-shell[data-theme="minimal"] .design-card-post {
   grid-column: 1 / -1;
}

.design-lab-shell[data-theme="minimal"] .design-card-gallery {
   grid-column: 1 / -1;
}

.design-lab-shell[data-theme="minimal"] .sample-post-photo {
   aspect-ratio: 21 / 9;
}

@media (max-width: 1199.98px) {
   .design-lab-shell[data-theme="linkedin"] .design-lab-grid,
   .design-lab-shell[data-theme="magazine"] .design-lab-grid,
   .design-lab-shell[data-theme="minimal"] .design-lab-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }

   .design-lab-shell[data-theme="linkedin"] .design-card,
   .design-lab-shell[data-theme="magazine"] .design-card,
   .design-lab-shell[data-theme="minimal"] .design-card {
      grid-column: span 6;
      grid-row: auto;
   }

   .design-lab-shell[data-theme="linkedin"] .design-card-post,
   .design-lab-shell[data-theme="magazine"] .design-card-post,
   .design-lab-shell[data-theme="minimal"] .design-card-post,
   .design-lab-shell[data-theme="linkedin"] .design-card-gallery,
   .design-lab-shell[data-theme="magazine"] .design-card-gallery,
   .design-lab-shell[data-theme="minimal"] .design-card-gallery {
      grid-column: 1 / -1;
      grid-row: auto;
   }
}

@media (max-width: 991.98px) {
   .design-lab-toolbar,
   .design-lab-hero,
   .design-lab-brand {
      grid-template-columns: 1fr;
   }

   .design-lab-badges {
      justify-content: flex-start;
   }

   .design-card,
   .design-card-post,
   .design-card-comments,
   .design-card-gallery,
   .design-lab-shell[data-theme="gallery"] .design-card,
   .design-lab-shell[data-theme="linkedin"] .design-card,
   .design-lab-shell[data-theme="magazine"] .design-card,
   .design-lab-shell[data-theme="minimal"] .design-card {
      grid-column: 1 / -1;
      grid-row: auto;
   }
}

@media (max-width: 767.98px) {
   .design-lab-shell {
      margin-top: -1rem;
      padding: 1.1rem;
   }

   .design-lab-toolbar h1 {
      font-size: 2rem;
   }

   .design-lab-brand {
      gap: 0.85rem;
   }

   .design-lab-logo {
      width: 8.5rem;
   }

   .design-lab-brand h2 {
      font-size: 1.18rem;
   }

   .design-card-head {
      display: block;
   }

   .design-card-head span {
      display: block;
      margin-top: 0.25rem;
   }

   .sample-comment-reply {
      margin-left: 0.75rem;
   }

   .profile-stats,
   .sample-gallery,
   .design-lab-shell[data-theme="magazine"] .sample-gallery {
      grid-template-columns: 1fr;
   }

   .sample-gallery img,
   .sample-gallery img:first-child,
   .design-lab-shell[data-theme="magazine"] .sample-gallery img,
   .design-lab-shell[data-theme="magazine"] .sample-gallery img:first-child {
      aspect-ratio: 16 / 10;
      grid-row: auto;
   }
}