/* Pass 35: wide, calm, no-cyclops public layout override. */

:root { --shell: none !important; }

body {
  background: #050506 !important;
  font-size: clamp(17px, 0.82vw, 22px) !important;
}

.page-backdrop { opacity: 0.06 !important; }
.grid-overlay { opacity: 0.05 !important; }
.noise-overlay, .scanlines { opacity: 0.018 !important; }

.shell {
  width: calc(100vw - clamp(18px, 2vw, 44px)) !important;
  max-width: none !important;
}

.topbar {
  min-height: 72px !important;
  padding: 8px 0 !important;
}

.topbar::before {
  inset-inline: -22px !important;
  background: rgba(5, 5, 7, 0.97) !important;
}

.nav a { font-size: clamp(0.98rem, .72vw, 1.2rem) !important; }

.main-shell {
  display: grid !important;
  gap: clamp(14px, 1.2vw, 26px) !important;
  padding-bottom: 40px !important;
}

/* Stop the intro from consuming the page. */
.hero.panel {
  display: grid !important;
  grid-template-columns: minmax(360px, .55fr) minmax(520px, 1fr) !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

.hero-visual {
  min-height: clamp(180px, 14vw, 320px) !important;
  max-height: 320px !important;
}

.hero-header-art {
  min-height: clamp(180px, 14vw, 320px) !important;
  height: 100% !important;
  filter: brightness(.42) saturate(.72) contrast(1.02) !important;
}

.hero-copy {
  margin: 0 !important;
  padding: clamp(24px, 2vw, 44px) !important;
  align-content: center !important;
}

.hero h1 {
  max-width: none !important;
  font-size: clamp(3.2rem, 3.25vw, 6.8rem) !important;
  line-height: .94 !important;
}

.lead {
  max-width: 95ch !important;
  font-size: clamp(1.06rem, .76vw, 1.32rem) !important;
  line-height: 1.58 !important;
}

.stats-grid { display: none !important; }

/* The demo should be a wide dashboard, not a narrow single-eye column. */
.single-holoverse-section.demo-featured-top,
.single-holoverse-section {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(18px, 1.2vw, 30px) !important;
  min-height: calc(100vh - 110px) !important;
  border-color: rgba(0, 220, 255, .24) !important;
  background: linear-gradient(180deg, rgba(4, 11, 14, .98), rgba(4, 6, 8, .98)) !important;
}

.demo-head {
  margin-bottom: 10px !important;
}

.demo-head h2,
#demoSectionTitle {
  font-size: clamp(2.3rem, 2.2vw, 4.4rem) !important;
  line-height: 1 !important;
  margin: 0 0 8px !important;
}

.demo-section-intro {
  max-width: 1500px !important;
  font-size: clamp(1rem, .7vw, 1.22rem) !important;
  line-height: 1.45 !important;
}

.site-readability-strip,
#holoverseGoalAlignmentPanel,
.holo-goal-panel,
.demo-note { display: none !important; }

.single-holoverse-section.demo-featured-top .demo-player-layout,
.demo-player-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 24vw) !important;
  grid-template-rows: auto 1fr !important;
  grid-template-areas:
    "canvas left"
    "canvas right" !important;
  gap: clamp(12px, 1vw, 20px) !important;
  align-items: stretch !important;
  height: calc(100vh - 250px) !important;
  min-height: 520px !important;
}

.demo-info-left { grid-area: left !important; }
.demo-info-right { grid-area: right !important; }

.single-holoverse-section.demo-featured-top .demo-canvas-shell,
.demo-canvas-shell {
  grid-area: canvas !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 10px !important;
  overflow: hidden !important;
  background: #010608 !important;
}

.single-holoverse-section.demo-featured-top .demo-canvas,
.demo-canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: saturate(.72) brightness(.82) contrast(.92) !important;
  box-shadow: inset 0 0 60px rgba(0,0,0,.72) !important;
}

.demo-info-panel {
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding: clamp(16px, 1vw, 24px) !important;
  background: rgba(0, 14, 18, .72) !important;
  border-color: rgba(0, 220, 255, .18) !important;
}

.demo-info-panel h3,
.holo-title {
  font-size: clamp(1.28rem, .92vw, 1.65rem) !important;
  line-height: 1.2 !important;
}

.demo-info-panel p,
.demo-help-list dd,
.holo-card p,
.holo-region-row {
  font-size: clamp(1rem, .68vw, 1.16rem) !important;
  line-height: 1.48 !important;
  color: #d9e4ea !important;
}

.holo-card {
  padding: 14px !important;
  background: rgba(0, 12, 16, .62) !important;
}

.holo-meter { font-size: clamp(.95rem, .62vw, 1.06rem) !important; }

.main-grid,
.content-flow { gap: clamp(14px, 1.2vw, 26px) !important; }
.updates-panel { position: static !important; max-height: none !important; }

@media (max-width: 1280px) {
  .hero.panel { grid-template-columns: 1fr !important; }
  .hero-visual { display: none !important; }
  .single-holoverse-section.demo-featured-top .demo-player-layout,
  .demo-player-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: "left" "canvas" "right" !important;
    height: auto !important;
  }
  .demo-canvas-shell { height: min(64vh, 560px) !important; }
}