studiograph 1.3.48-next.26 → 1.3.48-next.261

package/dist/renderers/slides/public/viewer/viewer.css

@@ -1,2145 +0,0 @@
-/* ══════════════════════════════════════════════════════════════
-   Studiograph Slides — Viewer Stylesheet
-   All sizes in px at 1920×1080 base (scaled via transform)
-   Values from Figma template — DESIGN_SPEC.md is source of truth
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── Reset ──────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-/* ── Gradient truncation ───────────────────────────────────────
-   Applied via JS: elements with overflow: hidden + white-space: nowrap
-   get the .is-overflowing class when scrollWidth > clientWidth.
-   The gradient mask only activates on that class. */
-.fade-truncate {
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.is-overflowing {
-  -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
-  mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
-}
-
-html, body {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: #000000;
-  font-family: var(--slide-font, 'IBM Plex Sans'), -apple-system, 'Helvetica Neue', Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-img { display: block; max-width: 100%; }
-
-a, a.wikilink {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-thickness: 1px;
-}
-
-/* ── Branding Variables ─────────────────────────────────────── */
-:root, .sg-slide-preview {
-  --slide-bg-dark: #111111;
-  --slide-bg-light: #e9e9e9;
-  --slide-text-dark: #e9e9e9;
-  --slide-text-light: #111111;
-  --slide-muted: #696969;
-  --slide-muted-dark: #a9a9a9;
-  --slide-date: #a9a9a9;
-  --slide-accent: #4D12AB;
-  --slide-placeholder: #c9c9c9;
-  --slide-font: 'IBM Plex Sans';
-}
-
-/* ── Deck Container ─────────────────────────────────────────── */
-.deck {
-  width: 1920px;
-  height: 1080px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  background: var(--slide-bg-dark);
-}
-
-/* ── Slide Base ─────────────────────────────────────────────── */
-.slide {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-  opacity: 0;
-  transition: opacity 400ms ease;
-  pointer-events: none;
-  overflow: hidden;
-  border: none;
-  outline: none;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-
-.slide.active {
-  opacity: 1;
-  pointer-events: auto;
-  z-index: 2;
-}
-
-.slide.fade-in {
-  animation: crossfade-in 400ms ease forwards;
-  z-index: 2;
-  pointer-events: auto;
-}
-
-@keyframes crossfade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-/* Outgoing slide stays visible during crossfade, behind the incoming slide */
-.slide.leaving {
-  opacity: 1;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.slide.slide-section {
-  transition-duration: 400ms;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .slide { transition: none !important; }
-}
-
-/* ── Themes ─────────────────────────────────────────────────── */
-.theme-dark {
-  background: var(--slide-bg-dark);
-  color: var(--slide-text-dark);
-}
-
-.theme-light {
-  background: var(--slide-bg-light);
-  color: var(--slide-text-light);
-}
-
-/* ── Slide Inner ────────────────────────────────────────────── */
-.slide-inner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-  padding: 66px 97px;
-  overflow: hidden;
-  border: 0 solid transparent;
-  outline: 0 solid transparent;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-
-/* ── Footer ─────────────────────────────────────────────────── */
-.slide-footer {
-  position: absolute;
-  bottom: 37px;
-  left: 0;
-  width: 1920px;
-  height: 34px;
-  padding: 0 97px;
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 48px;
-  align-items: center;
-  font-size: 20px;
-  font-weight: 500;
-  letter-spacing: -0.6px;
-  line-height: 1.0;
-  color: var(--slide-muted);
-}
-
-.footer-brand,
-.footer-title {
-  overflow: hidden;
-  white-space: nowrap;
-}
-.footer-title {}
-
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Cover
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-cover {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 66px 97px 97px;
-}
-
-.cover-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-}
-
-.cover-cobrand {
-  font-size: 40px;
-  font-weight: 500;
-  color: var(--slide-text-light);
-  letter-spacing: -1.2px;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.cover-date {
-  font-size: 34px;
-  font-weight: 400;
-  color: var(--slide-date);
-  letter-spacing: -1.0px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.cover-body {
-  margin-bottom: 24px;
-}
-
-.cover-title {
-  font-size: 185px;
-  font-weight: 500;
-  line-height: 175.8px;
-  letter-spacing: -9.2px;
-  color: var(--slide-text-light);
-}
-
-.cover-subtitle {
-  font-size: 185px;
-  font-weight: 300;
-  line-height: 175.8px;
-  letter-spacing: -9.2px;
-  color: var(--slide-text-light);
-  margin-top: 0;
-  opacity: 1;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Section
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-section-layout {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding: 66px 97px 100px;
-}
-
-.section-label {
-  font-size: 40px;
-  font-weight: 500;
-  letter-spacing: -1.2px;
-  color: var(--slide-muted);
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  right: 97px;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.section-title {
-  font-size: 185px;
-  font-weight: 500;
-  line-height: 175.8px;
-  letter-spacing: -9.2px;
-  color: var(--slide-text-dark);
-}
-
-.section-title-line {
-  display: block;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Divider
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-divider {
-  /* Empty — dark background + footer */
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Agenda
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-agenda {
-  display: flex;
-  flex-direction: column;
-  padding: 66px 97px 100px;
-}
-
-.agenda-label {
-  font-size: 40px;
-  font-weight: 500;
-  color: var(--slide-text-dark);
-  letter-spacing: -1.2px;
-  margin-bottom: 147px;
-}
-
-.agenda-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.agenda-item {
-  font-size: 84px;
-  font-weight: 500;
-  line-height: 93.2px;
-  color: var(--slide-text-dark);
-  letter-spacing: -4.2px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Statement
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-statement {
-  display: flex;
-  flex-direction: column;
-  padding: 66px 97px 100px;
-}
-
-.statement-label {
-  font-size: 40px;
-  font-weight: 500;
-  color: var(--slide-text-dark);
-  letter-spacing: -1.2px;
-  margin-bottom: 48px;
-}
-
-.statement-top {
-  /* container for label */
-}
-
-.statement-body {
-  max-width: 1500px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.statement-body p {
-  font-size: 64px;
-  font-weight: 500;
-  line-height: 80px;
-  letter-spacing: -1.9px;
-  color: var(--slide-text-dark);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Text Body
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-text-body {
-  padding: 66px 97px 100px;
-  display: flex;
-  flex-direction: column;
-}
-
-.text-body-label {
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 48px;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-}
-
-.text-body-top {
-  /* container for label */
-}
-
-.text-body-content {
-  max-width: 1500px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.text-body-content p {
-  font-size: 64px;
-  font-weight: 500;
-  line-height: 80px;
-  letter-spacing: -1.92px;
-  color: var(--slide-text-dark);
-  margin-bottom: 72px;
-}
-
-.text-body-content p:last-child {
-  margin-bottom: 0;
-}
-
-.text-body-content ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.text-body-content li {
-  font-size: 64px;
-  font-weight: 500;
-  line-height: 80px;
-  letter-spacing: -1.92px;
-  color: var(--slide-text-dark);
-  margin-bottom: 72px;
-}
-
-.text-body-content li:last-child {
-  margin-bottom: 0;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Text Body Light
-   Variant of text-body: Light (300) base, Semibold (600) for bold.
-   ══════════════════════════════════════════════════════════════ */
-.slide-text-body-light .text-body-content p,
-.slide-text-body-light .text-body-content li {
-  font-weight: 300;
-}
-
-.slide-text-body-light .text-body-content strong {
-  font-weight: 600;
-}
-
-/* ── Statement Light variant ── */
-.slide-statement-light .statement-body p {
-  font-weight: 300;
-}
-
-.slide-statement-light .statement-body strong {
-  font-weight: 600;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Stats
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-stats {
-  padding: 66px 97px;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.stats-title {
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  margin-bottom: 48px;
-  color: var(--slide-text-dark);
-}
-
-.stats-grid {
-  display: grid;
-  gap: 96px 72px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.stats-grid.stats-grid-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.stats-grid.stats-grid-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.stats-grid.stats-grid-2x2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.stats-grid.stats-grid-3x2 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.stat-block {
-  display: flex;
-  flex-direction: column;
-}
-
-.stat-number {
-  font-size: 144px;
-  font-weight: 600;
-  line-height: 144px;
-  letter-spacing: -4.32px;
-  color: var(--slide-text-dark);
-  margin-bottom: 16px;
-}
-
-.stat-description {
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 23.76px;
-  letter-spacing: -0.36px;
-  color: var(--slide-text-dark);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Full
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-full {
-  padding: 0;
-}
-
-.image-full-img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-  object-fit: contain;
-  background: var(--slide-bg-dark);
-}
-
-/* Video Full */
-.image-full-video {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-  object-fit: contain;
-  background: var(--slide-bg-dark);
-}
-
-.image-full-caption {
-  position: absolute;
-  bottom: 57px;
-  left: 87px;
-  background: var(--slide-bg-dark);
-  color: var(--slide-text-dark);
-  font-size: 24px;
-  font-weight: 600;
-  letter-spacing: -0.5px;
-  padding: 10px;
-  line-height: 1.3;
-  z-index: 2;
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Browser (single)
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-browser {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 72px 97px 0;
-}
-
-.image-browser-container {
-  width: 75%;
-  max-width: 1400px;
-}
-
-.image-browser-caption {
-  position: absolute;
-  bottom: 57px;
-  left: 87px;
-  background: var(--slide-bg-dark);
-  color: var(--slide-text-dark);
-  font-size: 24px;
-  font-weight: 600;
-  letter-spacing: -0.5px;
-  padding: 10px;
-  line-height: 1.3;
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Browser 2-Up
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-browser-2up {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 72px 97px;
-}
-
-.browser-2up-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 60px;
-  align-items: start;
-}
-
-.browser-2up-item-caption,
-.browser-2up-caption {
-  font-size: 18px;
-  font-weight: 400;
-  letter-spacing: -0.4px;
-  color: var(--slide-text-dark);
-  margin-top: 12px;
-}
-
-/* No-chrome variant: raw images without browser frame */
-.slide-image-browser-2up.no-chrome .browser-2up-img {
-  width: 100%;
-  height: auto;
-  object-fit: contain;
-  border-radius: 4px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Browser 6-Up
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-browser-6up {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: 100px 97px 0;
-}
-
-.browser-6up-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 522px);
-  gap: 110px 80px;
-}
-
-.browser-6up-item .browser-frame {
-  border-radius: 6px 6px 2px 2px;
-}
-
-.browser-6up-item .browser-titlebar {
-  height: 14px;
-  padding: 0 6px;
-  gap: 2px;
-}
-
-.browser-6up-item .browser-dot {
-  width: 4px;
-  height: 4px;
-}
-
-.browser-6up-caption,
-.browser-6up-item-caption {
-  font-size: 18px;
-  font-weight: 400;
-  letter-spacing: -0.4px;
-  color: var(--slide-text-dark);
-  margin-top: 8px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Mobile (single)
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-mobile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 72px 97px;
-}
-
-.image-mobile-container {
-  width: 368px;
-}
-
-.image-mobile-caption {
-  font-size: 18px;
-  font-weight: 400;
-  letter-spacing: -0.4px;
-  color: var(--slide-text-dark);
-  margin-top: 16px;
-  text-align: center;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Mobile 3-Up
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-mobile-3up {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 97px;
-}
-
-.mobile-3up-row {
-  display: flex;
-  gap: 48px;
-  justify-content: center;
-  align-items: center;
-}
-
-.mobile-3up-item {
-  width: 368px;
-}
-
-.mobile-3up-caption {
-  font-size: 18px;
-  font-weight: 400;
-  letter-spacing: -0.4px;
-  color: var(--slide-text-dark);
-  margin-top: 16px;
-  text-align: center;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Split
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  padding: 0;
-}
-
-.image-split-left {
-  width: 100%;
-  height: 1080px;
-  overflow: hidden;
-}
-
-.image-split-left img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.image-split-right {
-  padding: 66px 100px;
-  display: flex;
-  flex-direction: column;
-}
-
-.image-split-title {
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-  margin-bottom: 0;
-}
-
-.image-split-body {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.image-split-body p {
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 31.2px;
-  letter-spacing: -0.1px;
-  color: var(--slide-text-dark);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Split Right (text left, image right)
-   Figma Frame 25 / 1:497
-   ══════════════════════════════════════════════════════════════ */
-
-.slide-inner.slide-image-split-right {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  padding: 0;
-}
-
-.image-split-right-text {
-  padding: 66px 100px;
-  display: flex;
-  flex-direction: column;
-}
-
-.image-split-right-text .image-split-title {
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-}
-
-.image-split-right-text .image-split-body {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.image-split-right-text .image-split-body p {
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 31.2px;
-  letter-spacing: -0.1px;
-  color: var(--slide-text-dark);
-}
-
-.image-split-right-image {
-  width: 100%;
-  height: 1080px;
-  overflow: hidden;
-}
-
-.image-split-right-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Bullets
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-bullets {
-  display: grid;
-  grid-template-columns: 1275px 1fr;
-  padding: 72px 97px 140px 97px !important;
-  gap: 80px;
-  align-items: end;
-}
-
-.image-bullets-left {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  max-height: 832px;
-  overflow: hidden;
-}
-
-.image-bullets-left .browser-frame {
-  max-height: 832px;
-  height: 832px;
-}
-
-.image-bullets-left .browser-content img {
-  width: 100%;
-  height: auto;
-}
-
-.image-bullets-right {
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
-}
-
-.image-bullet-label {
-  display: block;
-  font-size: 18px;
-  font-weight: 600;
-  letter-spacing: -0.4px;
-  color: var(--slide-text-dark);
-  line-height: 23.76px;
-}
-
-.image-bullet-desc {
-  display: block;
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 23.76px;
-  letter-spacing: -0.4px;
-  color: var(--slide-muted);
-}
-
-.image-bullets-caption {
-  font-size: 18px;
-  font-weight: 400;
-  letter-spacing: -0.4px;
-  color: var(--slide-text-dark);
-  margin-top: 12px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Keywords
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-keywords {
-  display: grid;
-  grid-template-columns: 70% 30%;
-  padding: 72px 97px;
-  gap: 48px;
-  align-items: center;
-}
-
-.image-keywords-left {
-  /* holds browser frame */
-}
-
-.image-keywords-right,
-.image-keywords-bullets {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.image-keyword-label {
-  font-size: 18px;
-  font-weight: 500;
-  letter-spacing: -0.4px;
-  color: var(--slide-text-dark);
-  margin-bottom: 4px;
-}
-
-.image-keyword-desc {
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 23.4px;
-  letter-spacing: -0.4px;
-  color: var(--slide-muted);
-}
-
-.image-keywords-caption {
-  font-size: 18px;
-  font-weight: 400;
-  letter-spacing: -0.4px;
-  color: var(--slide-text-dark);
-  margin-top: 12px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Device Pair
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-device-pair {
-  position: relative;
-}
-
-.device-pair-container {
-  position: absolute;
-  top: 140px;
-  left: 128px;
-}
-
-.device-pair-container .device-pair-mobile {
-  position: absolute;
-  left: 1345px;
-  top: 58px;
-}
-
-.desktop-frame {
-  background: var(--slide-placeholder);
-  overflow: hidden;
-  width: 1280px;
-  height: 800px;
-}
-
-.desktop-frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.device-pair-container .mobile-frame {
-  width: 320px;
-  aspect-ratio: 320 / 691;
-}
-
-/* device-pair-caption: use .image-browser-caption instead */
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Diagram
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-diagram {
-  padding: 66px 97px;
-  display: flex;
-  flex-direction: column;
-}
-
-.diagram-title {
-  padding-bottom: 4px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  margin-bottom: 48px;
-  padding-bottom: 4px;
-  color: var(--slide-text-dark);
-}
-
-.diagram-svg {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.diagram-svg svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.diagram-svg img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.diagram-placeholder {
-  color: var(--slide-muted);
-  font-size: 18px;
-  font-style: italic;
-  text-align: center;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Diagram — Concentric Circles
-   ══════════════════════════════════════════════════════════════ */
-/* Figma Frames 41–43 / 1:824–1:854 */
-
-/* All positioning is inline from renderer using absolute px coordinates */
-.slide-inner.slide-diagram-concentric {
-  padding: 0;
-  position: relative;
-}
-
-.diagram-concentric-title {
-  padding-bottom: 4px;
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-  margin: 0;
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.concentric-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-}
-
-.concentric-ring {
-  position: absolute;
-  border: 1px solid var(--slide-muted);
-  border-radius: 50%;
-}
-
-.concentric-positioned-label {
-  position: absolute;
-  font-size: 30px;
-  font-weight: 500;
-  color: var(--slide-text-dark);
-  white-space: nowrap;
-  z-index: 1;
-  transform: translate(-50%, -50%);
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Diagram — Pyramid
-   ══════════════════════════════════════════════════════════════ */
-/* Figma Frames 44–45 / 1:869–1:884 */
-
-.slide-inner.slide-diagram-pyramid {
-  padding: 0;
-  position: relative;
-}
-
-.diagram-pyramid-title {
-  padding-bottom: 4px;
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-  margin: 0;
-  z-index: 1;
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.pyramid-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Diagram — Sitemap
-   ══════════════════════════════════════════════════════════════ */
-
-.slide-inner.slide-diagram-sitemap {
-  padding: 0;
-  position: relative;
-}
-
-.diagram-sitemap-title {
-  padding-bottom: 4px;
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-  margin: 0;
-  z-index: 1;
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.sitemap-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Diagram — Matrix (2×2)
-   ══════════════════════════════════════════════════════════════ */
-
-.slide-inner.slide-diagram-matrix {
-  padding: 0;
-  position: relative;
-}
-
-.diagram-matrix-title {
-  padding-bottom: 4px;
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-  margin: 0;
-  z-index: 1;
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.matrix-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Diagram — Venn
-   ══════════════════════════════════════════════════════════════ */
-
-.slide-inner.slide-diagram-venn {
-  padding: 0;
-  position: relative;
-}
-
-.diagram-venn-title {
-  padding-bottom: 4px;
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-  margin: 0;
-  z-index: 1;
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.venn-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Framework
-   ══════════════════════════════════════════════════════════════ */
-/* Figma Frame 56 / 1:1304 */
-.slide-inner.slide-framework {
-  padding: 0;
-  position: relative;
-}
-
-.fw-title {
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.fw-rule {
-  position: absolute;
-  top: 189px;
-  left: 97px;
-  width: 1727px;
-  border: none;
-  border-top: 1px solid #444;
-  margin: 0;
-}
-
-.fw-objective-area {
-  position: absolute;
-  top: 209px;
-  left: 97px;
-  width: 1002px;
-}
-
-.fw-objective-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 1.1px;
-  color: var(--slide-muted);
-  margin-bottom: 7px;
-}
-
-.fw-objective {
-  font-size: 30px;
-  font-weight: 500;
-  letter-spacing: -0.1px;
-  color: var(--slide-text-dark);
-  line-height: 1.2;
-  margin: 0;
-}
-
-.fw-pillars {
-  position: absolute;
-  top: 356px;
-  left: 97px;
-  right: 97px;
-  display: flex;
-  gap: 81px;
-}
-
-.fw-pillar {
-  width: 280px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.fw-pillar-header {
-  border-top: 1px solid #444;
-  padding-top: 17px;
-}
-
-.fw-pillar-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 1.1px;
-  color: var(--slide-muted);
-  margin-bottom: 8px;
-}
-
-.fw-pillar-name {
-  display: block;
-  font-size: 30px;
-  font-weight: 500;
-  letter-spacing: -0.1px;
-  color: var(--slide-text-dark);
-  line-height: 1.2;
-}
-
-.fw-pillar-body {
-  border-top: 1px solid #444;
-  margin-top: 150px;
-  padding-top: 20px;
-}
-
-.fw-principles-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 1.1px;
-  color: var(--slide-muted);
-  margin-bottom: 34px;
-}
-
-.fw-principles-list {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.fw-principle {
-  margin: 0;
-}
-
-.fw-principle-name {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: -0.1px;
-  color: var(--slide-text-dark);
-}
-
-.fw-principle-desc {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.4;
-  letter-spacing: -0.1px;
-  color: var(--slide-muted);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Schedule
-   ══════════════════════════════════════════════════════════════ */
-.slide-schedule { background: var(--slide-bg-light); color: var(--slide-bg-dark); }
-
-.slide-inner.slide-schedule {
-  padding: 0;
-  position: relative;
-}
-
-.schedule-title {
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-}
-
-.schedule-cascade {
-  position: absolute;
-  top: 0;
-  left: 97px;
-  right: 97px;
-  bottom: 140px;
-}
-
-.schedule-phase {
-  position: absolute;
-}
-
-.schedule-phase-bar {
-  height: 12px;
-  background: var(--slide-bg-dark);
-  margin-bottom: 8px;
-}
-
-.theme-light .schedule-phase-bar,
-.slide-schedule .schedule-phase-bar {
-  background: var(--slide-bg-dark);
-}
-
-.theme-dark .schedule-phase-bar {
-  background: var(--slide-bg-light);
-}
-
-.schedule-phase-name {
-  font-size: 34px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -0.7px;
-  margin-bottom: 2px;
-}
-
-.schedule-phase-duration {
-  display: block;
-  font-size: 34px;
-  font-weight: 400;
-  color: var(--slide-muted);
-  margin-bottom: 50px;
-}
-
-.schedule-phase-items {
-  list-style: none;
-  padding: 0;
-}
-
-.schedule-phase-items li {
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 23.4px;
-  letter-spacing: -0.4px;
-}
-
-.schedule-timeline {
-  position: absolute;
-  left: 97px;
-  right: 97px;
-  top: 883px;
-}
-
-.schedule-timeline-bar {
-  border-top: 1px solid #999;
-  width: 100%;
-  position: relative;
-}
-
-.schedule-timeline-bar::before,
-.schedule-timeline-bar::after {
-  content: '';
-  position: absolute;
-  top: -10px;
-  width: 1px;
-  height: 19px;
-  background: #999;
-}
-
-.schedule-timeline-bar::before { left: 0; }
-.schedule-timeline-bar::after { right: 0; }
-
-.schedule-timeline-dates {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-top: 9px;
-}
-
-.schedule-date-start, .schedule-date-end {
-  font-size: 24px;
-  font-weight: 400;
-  letter-spacing: -0.1px;
-  color: var(--slide-muted);
-}
-
-.schedule-marker {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  bottom: 100%;
-  margin-bottom: 19px;
-}
-
-.schedule-marker-label {
-  font-size: 34px;
-  font-weight: 400;
-  letter-spacing: -1.0px;
-  margin-bottom: 6px;
-  color: var(--slide-text-light);
-}
-
-.schedule-marker-dot {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--slide-bg-dark);
-}
-
-.theme-dark .schedule-marker-dot {
-  background: var(--slide-bg-light);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Next Steps
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-next-steps {
-  padding: 0;
-  position: relative;
-}
-
-.next-steps-title {
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-}
-
-.next-steps-list {
-  list-style: none;
-  padding: 0;
-  position: absolute;
-  top: 50%;
-  left: 97px;
-  width: 1500px;
-  transform: translateY(-50%);
-}
-
-/* Figma Frame 12 / 1:294 */
-.next-steps-item {
-  font-size: 34px;
-  font-weight: 500;
-  line-height: 41px;
-  letter-spacing: -0.7px;
-  color: var(--slide-text-dark);
-  padding: 0;
-  margin-bottom: 48px;
-}
-
-.next-steps-item:last-child {
-  margin-bottom: 0;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Introductions
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-introductions {
-  padding: 0;
-  position: relative;
-}
-
-.introductions-title {
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.introductions-grid {
-  position: absolute;
-  top: 200px;
-  left: 97px;
-  display: flex;
-  gap: 22px;
-}
-
-.introductions-column {
-  width: 340px;
-}
-
-.introductions-section-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--slide-text-dark);
-  margin-bottom: 10px;
-}
-
-.introductions-people {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.intro-person {
-  display: flex;
-  flex-direction: column;
-}
-
-.intro-name {
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 31.2px;
-  color: var(--slide-text-dark);
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.intro-role {
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 31.2px;
-  color: var(--slide-muted);
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: End
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-end {
-  padding: 0;
-  position: relative;
-}
-
-.end-text {
-  position: absolute;
-  top: 442px;
-  left: 97px;
-  font-size: 185px;
-  font-weight: 400;
-  line-height: 196px;
-  letter-spacing: -7.4px;
-  color: var(--slide-text-dark);
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Pullquote (Frame 9 / 1:257)
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-pullquote {
-  display: flex;
-  flex-direction: column;
-  padding: 66px 97px 100px;
-}
-
-.pullquote-label {
-  font-size: 40px;
-  font-weight: 500;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-  margin-bottom: 48px;
-}
-
-.pullquote-content {
-  max-width: 1500px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.pullquote-content p {
-  font-size: 64px;
-  font-weight: 500;
-  line-height: 80px;
-  letter-spacing: -1.92px;
-  color: var(--slide-text-dark);
-  margin: 0;
-}
-
-.pullquote-content p::before {
-  content: "\201C";
-}
-
-.pullquote-content p::after {
-  content: "\201D";
-}
-
-.pullquote-attribution {
-  margin-top: 20px;
-  font-size: 40px;
-  font-weight: 500;
-  letter-spacing: -1.2px;
-  line-height: 48px;
-  color: var(--slide-text-dark);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Columns (Frame 13 / 1:310)
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-columns {
-  padding: 0;
-  position: relative;
-}
-
-.columns-label {
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.columns-grid {
-  position: absolute;
-  top: 200px;
-  left: 97px;
-  right: 97px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  column-gap: 80px;
-  row-gap: 80px;
-}
-
-.columns-grid.columns-2 {
-  grid-template-columns: repeat(2, 1fr);
-  column-gap: 153px;
-}
-
-.columns-column {
-  min-width: 0;
-}
-
-.columns-section-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: var(--slide-text-dark);
-  margin-bottom: 10px;
-}
-
-.columns-body {
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 31.2px;
-  letter-spacing: -0.12px;
-  color: var(--slide-text-dark);
-}
-
-.columns-body p {
-  margin: 0 0 16px;
-}
-
-.columns-body strong {
-  font-weight: 700;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Table (Frame 14 / 1:325)
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-table {
-  padding: 0;
-  position: relative;
-}
-
-.table-label {
-  position: absolute;
-  top: 66px;
-  left: 97px;
-  font-size: 40px;
-  font-weight: 500;
-  letter-spacing: -1.2px;
-  color: var(--slide-text-dark);
-}
-
-.table-grid {
-  position: absolute;
-  top: 200px;
-  left: 97px;
-  width: 1727px;
-  border-collapse: collapse;
-}
-
-.table-grid thead tr {
-  border-bottom: 1px solid var(--slide-muted);
-}
-
-.table-grid tbody tr {
-  border-bottom: 1px solid #333333;
-}
-
-.table-grid tbody tr:last-child {
-  border-bottom: none;
-}
-
-.table-header {
-  font-size: 24px;
-  font-weight: 500;
-  letter-spacing: -0.12px;
-  color: var(--slide-text-dark);
-  text-align: left;
-  padding: 12px 20px 20px 0;
-  vertical-align: top;
-}
-
-.table-row-header {
-  font-size: 24px;
-  font-weight: 500;
-  letter-spacing: -0.12px;
-  color: var(--slide-text-dark);
-  text-align: left;
-  padding: 20px 20px 20px 0;
-  vertical-align: top;
-  width: 280px;
-}
-
-.table-cell {
-  font-size: 18px;
-  font-weight: 400;
-  letter-spacing: -0.09px;
-  line-height: 23px;
-  color: var(--slide-text-dark);
-  padding: 20px 20px 20px 0;
-  vertical-align: top;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Image Grid 2x2 (Frame 35 / 1:719)
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-image-grid-2x2 {
-  padding: 0;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.grid-2x2 {
-  display: grid;
-  grid-template-columns: 630px 630px;
-  grid-template-rows: 394px 394px;
-  gap: 30px;
-}
-
-.grid-2x2-cell {
-  overflow: hidden;
-  border-radius: 0;
-}
-
-.grid-2x2-cell img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Blank (Frame 15)
-   ══════════════════════════════════════════════════════════════ */
-.slide-inner.slide-blank {
-  padding: 0;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   Agenda Active/Muted states
-   ══════════════════════════════════════════════════════════════ */
-.agenda-item-active {
-  color: var(--slide-text-dark);
-}
-
-.agenda-item-muted {
-  color: var(--slide-muted);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   Introductions - proper two-column layout (Frame 4 / 1:209)
-   ══════════════════════════════════════════════════════════════ */
-.introductions-grid {
-  display: flex;
-  gap: 22px;
-}
-
-.introductions-column {
-  width: 340px;
-}
-
-.introductions-section-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: var(--slide-text-light);
-  margin-bottom: 10px;
-}
-
-.intro-person {
-  margin-bottom: 16px;
-}
-
-.intro-name {
-  display: block;
-  font-size: 24px;
-  font-weight: 600;
-  letter-spacing: -0.12px;
-  line-height: 31.2px;
-  color: var(--slide-text-light);
-}
-
-.intro-role {
-  display: block;
-  font-size: 24px;
-  font-weight: 400;
-  letter-spacing: -0.12px;
-  line-height: 31.2px;
-  color: var(--slide-muted);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   THEME: Light overrides
-   ══════════════════════════════════════════════════════════════ */
-.theme-light .statement-label,
-.theme-light .statement-body p,
-.theme-light .pullquote-label,
-.theme-light .pullquote-body p,
-.theme-light .pullquote-attribution,
-.theme-light .columns-label,
-.theme-light .columns-section-label,
-.theme-light .columns-body,
-.theme-light .table-label,
-.theme-light .table-header,
-.theme-light .table-row-header,
-.theme-light .table-cell,
-.theme-light .next-steps-title,
-.theme-light .next-steps-item,
-.theme-light .end-text {
-  color: var(--slide-text-light);
-}
-
-.theme-light .agenda-item-active {
-  color: var(--slide-text-light);
-}
-
-.theme-light .agenda-item-muted {
-  color: var(--slide-muted);
-}
-
-.theme-light .agenda-label,
-.theme-light .agenda-item {
-  color: var(--slide-text-light);
-}
-
-.theme-light .text-body-label,
-.theme-light .text-body-item {
-  color: var(--slide-text-light);
-}
-
-.theme-light .stats-title {
-  color: var(--slide-text-light);
-}
-
-.theme-light .stat-value {
-  color: var(--slide-text-light);
-}
-
-.theme-light .stat-description {
-  color: var(--slide-text-light);
-}
-
-.theme-light .framework-title,
-.theme-light .framework-objective-text,
-.theme-light .framework-pillar-name,
-.theme-light .framework-principle {
-  color: var(--slide-text-light);
-}
-
-.theme-light .framework-objective-label,
-.theme-light .framework-principles-label,
-.theme-light .framework-pillar-label {
-  color: var(--slide-muted);
-}
-
-.theme-light .table-grid thead tr {
-  border-bottom-color: var(--slide-text-light);
-}
-
-.theme-light .table-grid tbody tr {
-  border-bottom-color: #cccccc;
-}
-
-.theme-light .introductions-title,
-.theme-light .introductions-section-label,
-.theme-light .intro-name {
-  color: var(--slide-text-light);
-}
-
-.theme-light .intro-role {
-  color: var(--slide-muted);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   LAYOUT: Moodboard (Figma Frames 62-64)
-   3 variants: 3, 4, or 5 images. Absolute positioning from Figma.
-   Gap: 80px. Margins: 97px L/R, 60px top.
-   ══════════════════════════════════════════════════════════════ */
-
-.slide-inner.slide-moodboard {
-  padding: 0;
-  position: relative;
-  width: 1920px;
-  height: 1080px;
-  overflow: hidden;
-}
-
-.moodboard-grid {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1920px;
-  height: 1080px;
-}
-
-.moodboard-cell {
-  position: absolute;
-  overflow: hidden;
-}
-
-.moodboard-cell img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.moodboard-label {
-  position: absolute;
-  left: 97px;
-  top: 981px;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 31.68px;
-  letter-spacing: -0.48px;
-  color: var(--slide-text-dark);
-
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-/* ── 3 images (Frame 62): Hero left 1124×818 + 2 stacked right 522×369 ── */
-.mb3-hero       { left: 97px;   top: 131px; width: 1124px; height: 818px; }
-.mb3-right-top  { left: 1301px; top: 131px; width: 522px;  height: 369px; }
-.mb3-right-bot  { left: 1301px; top: 580px; width: 522px;  height: 369px; }
-
-/* ── 4 images (Frame 63): Tall left 522×818 + wide top-right 1124×369 + 2 small bot 522×369 ── */
-.mb4-left       { left: 97px;   top: 131px; width: 522px;  height: 818px; }
-.mb4-wide       { left: 699px;  top: 131px; width: 1124px; height: 369px; }
-.mb4-bot-mid    { left: 699px;  top: 580px; width: 522px;  height: 369px; }
-.mb4-bot-right  { left: 1301px; top: 580px; width: 522px;  height: 369px; }
-
-/* ── 5 images (Frame 64): Tall left 522×818 + 4 small 2×2 grid 522×369 ── */
-.mb5-left       { left: 97px;   top: 131px; width: 522px;  height: 818px; }
-.mb5-mid-top    { left: 699px;  top: 131px; width: 522px;  height: 369px; }
-.mb5-mid-bot    { left: 699px;  top: 580px; width: 522px;  height: 369px; }
-.mb5-right-top  { left: 1301px; top: 131px; width: 522px;  height: 369px; }
-.mb5-right-bot  { left: 1301px; top: 580px; width: 522px;  height: 369px; }
-
-/* ── Navigation Controls (appear on mouse move) ──────────────── */
-.nav-controls {
-  position: fixed;
-  bottom: 24px;
-  left: 0;
-  right: 0;
-  height: 36px;
-  z-index: 1000;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 300ms ease;
-}
-.nav-controls .nav-group:first-child {
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  transform: translateX(-50%);
-}
-.nav-controls .nav-group:last-child {
-  position: absolute;
-  right: 24px;
-  bottom: 0;
-}
-.nav-controls.visible { opacity: 1; }
-
-/* Hide cursor after inactivity */
-body.cursor-hidden { cursor: none; }
-body.cursor-hidden .deck { cursor: none; }
-
-.nav-group {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 28px;
-  background: rgba(20, 20, 20, 0.85);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-radius: 6px;
-  padding: 0 4px;
-  pointer-events: auto;
-}
-
-.nav-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.6);
-  cursor: pointer;
-  transition: color 120ms ease, background 120ms ease;
-  padding: 0;
-}
-.nav-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
-
-.nav-counter {
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 12px;
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
-  padding: 0 6px;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.nav-label {
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 12px;
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
-  padding: 0 4px 0 2px;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.nav-kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 3px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.35);
-  font-size: 10px;
-  font-weight: 500;
-  font-family: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
-  margin-left: 3px;
-  user-select: none;
-}