:root{
  --bg0:#070A12;
  --bg1:#0B1022;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.10);
  --text:#ECF2FF;
  --muted: rgba(236,242,255,.72);
  --faint: rgba(236,242,255,.52);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --brand:#7C5CFF;
  --brand2:#22D3EE;
  --ok:#34D399;
  --warn:#FBBF24;
  --danger:#FB7185;
  --radius: 22px;
  --navSafe: clamp(66px, 6.6vw, 92px);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 15% 15%, rgba(124,92,255,.30), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px 700px at 55% 90%, rgba(52,211,153,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

.app{
  width:100vw;
  height:100vh;
  padding: clamp(14px, 2.2vh, 24px);
  display:grid;
  grid-template-rows: auto 1fr;
  gap: clamp(10px, 1.8vh, 16px);
  position:relative;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}

.brand{
  display:flex;
  gap: 12px;
  align-items:center;
  min-width: 260px;
}
.brand__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 6px rgba(124,92,255,.15);
}
.brand__title{
  font-weight: 800;
  letter-spacing: .2px;
}
.brand__subtitle{
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.status{
  display:flex;
  align-items:center;
  gap: 12px;
}
.status__pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  font-weight: 700;
}
.status__sep{ color: var(--faint); font-weight: 600; }
.status__hint{ color: var(--muted); font-size: 13px; }

.stage{
  position:relative;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
}

.deck{
  width:100%;
  height:100%;
  position:relative;
}

.slide{
  position:absolute;
  inset:0;
  /* Keep content centered and away from nav buttons */
  padding: clamp(18px, 3vw, 42px);
  padding-left: calc(clamp(18px, 3vw, 42px) + var(--navSafe));
  padding-right: calc(clamp(18px, 3vw, 42px) + var(--navSafe));
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: clamp(14px, 2.5vw, 34px);
  align-items:center;
  opacity:0;
  transform: translateX(26px) scale(.985);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.slide.is-active{
  opacity:1;
  transform: translateX(0) scale(1);
  pointer-events:auto;
}
.slide.is-prev{
  opacity:0;
  transform: translateX(-26px) scale(.985);
}

.slide__content{
  display:flex;
  flex-direction:column;
  gap: 14px;
  min-width: 0;
}
.slide__visual{
  position: relative;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 650;
  letter-spacing:.22px;
  font-size: 13px;
  text-transform: uppercase;
}
.eyebrow__chip{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}

h1, h2{
  margin:0;
  line-height: 1.08;
  letter-spacing: -0.6px;
}
h1{ font-size: clamp(34px, 4.5vw, 56px); }
h2{ font-size: clamp(28px, 3.4vw, 44px); }

.lead{
  color: var(--muted);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.55;
  max-width: 60ch;
}

.bullets{
  margin: 0;
  padding-left: 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.bullets li{
  color: rgba(236,242,255,.88);
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.45;
}
.bullets strong{ color: var(--text); font-weight: 800; }

.cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 2px;
}
.card{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}
.card__k{
  font-weight: 800;
  letter-spacing: -.3px;
}
.card__v{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.visual{
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  padding: clamp(12px, 1.7vw, 18px);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: clamp(240px, 42vh, 520px);
  position:relative;
  overflow:hidden;
}
.visual__img{
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.22));
}
.visual__caption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  color: rgba(236,242,255,.66);
  font-size: 12.5px;
  text-align:center;
}

.visual__mermaid{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Make Mermaid diagrams visually larger */
.visual--mermaid{
  padding: clamp(6px, 1vw, 12px);
  min-height: clamp(420px, 72vh, 920px);
  /* Don't clip large diagrams (base .visual has overflow:hidden). */
  overflow: visible;
}
.visual--mermaid .visual__mermaid{
  transform: none;
}
.visual--mermaid .mermaid{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.visual--mermaid svg{
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  max-width: none !important;
}

.visual__html{
  width: 100%;
  height: 100%;
  display:flex;
  align-items: stretch;
  justify-content: stretch;
}

/* Simple HTML diagrams (more consistent than SVG text) */
.diagram{
  width: 100%;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.diagram__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.diagram__panel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 14px 14px;
  min-width: 0;
}
.diagram__h{
  font-weight: 950;
  letter-spacing: -.3px;
  font-size: clamp(18px, 1.9vw, 26px);
  margin-bottom: 6px;
}
.diagram__sub{
  color: rgba(236,242,255,.72);
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.45;
  margin-bottom: 10px;
}
.diagram__list{
  margin: 0;
  padding-left: 18px;
  color: rgba(236,242,255,.88);
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.55;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.diagram__mono{
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.6;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px 14px;
  overflow:auto;
}
.diagram__arrow{
  text-align:center;
  color: rgba(236,242,255,.72);
  font-weight: 850;
  letter-spacing: .2px;
  font-size: clamp(14px, 1.35vw, 18px);
}
.diagram__arrow{ display:none; }

@media (max-width: 940px){
  .diagram__row{ grid-template-columns: 1fr; }
}

.code{
  width:100%;
  border-radius: 16px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.14);
  padding: 14px 16px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.6;
  color: rgba(236,242,255,.92);
  white-space: pre;
  overflow:auto;
  max-height: 40vh;
}

/* Comparison visual (C on top, JS bottom) */
.visual--compare{
  padding: clamp(12px, 1.7vw, 18px);
  align-items: stretch;
  justify-content: stretch;
}
.compare{
  width: 100%;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.compare__col{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width: 0;
}
.compare__title{
  padding: 10px 12px;
  font-weight: 850;
  letter-spacing: .2px;
  font-size: clamp(14px, 1.35vw, 18px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: rgba(236,242,255,.95);
}
.compare__code{
  border: none;
  border-radius: 0;
  background: rgba(0,0,0,.28);
  max-height: 26vh;
  flex: 1;
}

@media (max-width: 940px){
  .compare__code{ max-height: 24vh; }
}

.controls{
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 5;
}
.control{
  pointer-events:auto;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(38px, 4.6vw, 54px);
  height: clamp(38px, 4.6vw, 54px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  color: var(--text);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform 140ms ease, background 140ms ease, opacity 140ms ease, border-color 140ms ease;
}
.control:hover{
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(34,211,238,.14));
  border-color: rgba(255,255,255,.24);
  transform: translateY(-50%) scale(1.03);
}
.control:active{ transform: translateY(-50%) scale(.98); }
.control--left{ left: 14px; }
.control--right{ right: 14px; }
.control__icon{
  font-size: clamp(24px, 3.1vw, 36px);
  line-height: 1;
  margin-top: -1px;
}


.progress{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255,255,255,.08);
}
.progress__bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transition: width 280ms ease;
}

/* Responsive: stack on smaller screens */
@media (max-width: 940px){
  .slide{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content:start;
  }
  .visual{ min-height: clamp(220px, 36vh, 420px); }
  .status__hint{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .slide{ transition:none; }
  .control{ transition:none; }
  .progress__bar{ transition:none; }
}