/* ----------------------------------------------------------------
   Seedentia deck — your CSS overrides live here.
   reveal.js + the chosen theme load first; this file wins.
   Edit freely; the deck is static so changes show on reload.
   ---------------------------------------------------------------- */

:root {
  --brand: #6ee7b7; /* swap for your accent colour */
}

.reveal .brand {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand);
}

.reveal .subtitle {
  opacity: 0.75;
  font-size: 0.9em;
}

/* Embedded "browser window" wrapper for the live-demo iframes.
   Uses reveal's r-stretch to fill the slide's available height. */
.reveal .browser {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #333;
  background: #1e1e1e;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
.reveal .browser-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  background: #2b2b2b;
}
.reveal .browser-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #555;
}
.reveal .browser-frame {
  flex: 1 1 auto;
  min-height: 0; /* allow the iframe to shrink within the flex column */
  width: 100%;
  border: 0;
  background: #fff;
}

.reveal .note {
  opacity: 0.6;
  font-size: 0.6em;
  margin-top: 1rem;
}

/* Give Mermaid diagrams room to breathe */
.reveal .mermaid {
  display: flex;
  justify-content: center;
}
.reveal .mermaid svg {
  max-height: 70vh;
}

/* Rounded, framed embeds */
.reveal iframe,
.reveal video {
  border: 1px solid #333;
  border-radius: 10px;
}