* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0d0d1a;
  color: #e0ddf5;
  font-family: 'Vazirmatn', 'Traditional Arabic', system-ui, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  direction: rtl;
}

/* ---- slideshow ---- */
.deck { flex: 1; position: relative; overflow: hidden; }
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 64px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: translateY(12px);
}
.slide.active { opacity: 1; pointer-events: all; transform: translateY(0); }

/* ---- headings ---- */
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #7c6ee0;
  background: #7c6ee022; padding: 3px 14px; border-radius: 99px;
  margin-bottom: 12px;
}
h1 { font-size: 1.85rem; font-weight: 700; color: #fff; margin-bottom: 14px; text-align: center; }
.sub {
  color: #9090b8; font-size: .93rem; text-align: center;
  max-width: 640px; line-height: 1.8; margin-bottom: 26px;
}
code { color: #a48cff; font-family: 'Courier New', monospace; font-size: .9em; direction: ltr; display: inline-block; }

/* ---- box ---- */
.box {
  background: #161628; border: 1px solid #282848;
  border-radius: 14px; padding: 22px 28px; max-width: 740px; width: 100%;
}

/* ---- highlights ---- */
.h1 { background: #ff6b2b; color: #fff; }
.h2 { background: #2bcc6b; color: #000; }
.h3 { background: #2b9dff; color: #fff; }
.h4 { background: #e040fb; color: #fff; }
.h5 { background: #f0c040; color: #000; }
span.hi { border-radius: 3px; padding: 0 2px; }

/* ---- vocab grid ---- */
.vgrid {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-width: 700px; justify-content: center;
}
.vc {
  background: #1e1e38; border: 1px solid #323260;
  border-radius: 7px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #b0add8; cursor: default;
  transition: transform .15s;
}
.vc:hover { transform: scale(1.25); background: #2a2a50; z-index: 1; }
.vc.sp { border-color: #5a4ec0; color: #8878e0; background: #1a1830; }

/* ---- mapping table ---- */
.mt { border-collapse: collapse; font-size: .88rem; }
.mt th { color: #7c6ee0; padding: 5px 18px; border-bottom: 1px solid #28284a; font-weight: 600; }
.mt td { padding: 4px 18px; border-bottom: 1px solid #1a1a30; text-align: center; }
.mt td.c { font-size: 1.15rem; }
.mt td.n { font-family: 'Courier New', monospace; color: #7c6ee0; font-size: .82rem; direction: ltr; }

/* ---- encode boxes ---- */
.cbox {
  background: #1e1e38; border: 2px solid #44448a;
  border-radius: 9px; width: 52px; text-align: center;
  padding: 8px 4px 5px;
}
.cbox .ch { font-size: 1.4rem; color: #fff; display: block; }
.cbox .nm { font-family: 'Courier New', monospace; font-size: .65rem; color: #7c6ee0; display: block; margin-top: 3px; direction: ltr; }
.arr { color: #44448a; font-size: 1.4rem; padding: 0 4px; margin-bottom: 8px; direction: ltr; }

/* ---- context window ---- */
.cwrap { display: flex; align-items: center; gap: 4px; direction: rtl; flex-wrap: wrap; justify-content: center; }
.cw {
  width: 46px; height: 46px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  border: 2px solid #282848; background: #1a1a30; color: #606080;
  transition: all .3s;
}
.cw.win { background: #22204a; border-color: #7c6ee0; color: #c8c0ff; }
.cw.tgt { background: #182a20; border-color: #2bcc6b; color: #60ff90; }

/* ---- training examples ---- */
.tex { display: flex; align-items: center; gap: 10px; margin: 5px 0; direction: rtl; }
.ctx-s {
  font-size: .95rem;
  background: #1a1a30; padding: 3px 10px; border-radius: 6px;
  color: #8888b8; min-width: 130px; text-align: right; direction: rtl;
}
.tgt-s {
  font-size: .95rem;
  background: #182a20; padding: 3px 12px; border-radius: 6px;
  color: #2bcc6b; border: 1px solid #2bcc6b33;
}
.sm-arr { color: #3a3a60; font-size: .8rem; direction: ltr; }

/* ---- batch rows ---- */
.brow { display: flex; align-items: center; gap: 14px; margin: 7px 0; direction: rtl; }
.brow-label { font-size: .75rem; font-weight: 700; width: 60px; text-align: right; flex-shrink: 0; }
.bchunk { display: flex; gap: 3px; direction: rtl; }
.bc {
  width: 38px; height: 38px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  border: 1px solid; flex-shrink: 0;
}

/* ---- 32-pairs grid ---- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 860px; width: 100%; }
.pcol { display: flex; flex-direction: column; gap: 3px; }
.pcol-h { font-size: .72rem; font-weight: 700; text-align: center; margin-bottom: 6px; }
.pair {
  display: flex; align-items: center; gap: 5px;
  font-size: .78rem; direction: rtl;
}
.pair .ctx { font-size: .82rem; padding: 2px 7px; border-radius: 4px; direction: rtl; text-align: right; }
.pair .tg  { font-size: .86rem; color: #2bcc6b; min-width: 20px; text-align: center; }
.pair .sm  { color: #303058; font-size: .7rem; direction: ltr; }

/* ---- nav ---- */
.nav {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; padding: 13px; border-top: 1px solid #181830;
  direction: ltr;
}
.nav button {
  background: #1e1e38; color: #b0add8; border: 1px solid #323260;
  padding: 7px 22px; border-radius: 8px; cursor: pointer;
  font-family: 'Vazirmatn', sans-serif; font-size: .88rem; transition: background .2s;
}
.nav button:hover:not(:disabled) { background: #2e2e58; color: #fff; }
.nav button:disabled { opacity: .3; cursor: default; }
.dots { display: flex; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #2e2e50; cursor: pointer; transition: background .2s; }
.dot.on { background: #7c6ee0; }
.cnt { font-size: .82rem; color: #44446a; min-width: 64px; text-align: center; font-family: 'Courier New', monospace; }

/* ---- interactive toggle / step buttons (forward + train slides) ---- */
.fwtoggle {
  background: #1a1a30; color: #8888b8; border: 1px solid #323260;
  padding: 5px 15px; border-radius: 8px; cursor: pointer;
  font-family: 'Vazirmatn', sans-serif; font-size: .78rem; transition: all .2s;
}
.fwtoggle:hover { background: #24244a; color: #b0add8; }
.fwtoggle.on { background: #7c6ee022; color: #c8c0ff; border-color: #7c6ee0; }

/* ---- 3D tensor ---- */
.t3d-scene { perspective: 1000px; touch-action: none; cursor: grab; }
.t3d-scene:active { cursor: grabbing; }
.t3d {
  position: relative;
  width: 325px; height: 161px;
  transform-style: preserve-3d;
  animation: t3dspin 7s ease-in-out infinite alternate;
}
@keyframes t3dspin {
  from { transform: rotateX(6deg) rotateY(-6deg); }
  to   { transform: rotateX(26deg) rotateY(-54deg); }
}
.fcard {
  position: absolute; top: 2px; right: -9px;
  width: 56px; height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 6px; border: 1px solid;
  font-family: 'Courier New', monospace; font-size: .68rem;
  direction: ltr;
}

/* ---- neural network (intro slide) ---- */
.nn-wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.nn-svg  { width: 190px; height: auto; display: block; }
.nn-edge { stroke: #26264a; stroke-width: 1; }
.nn-pulse {
  stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 5 340; opacity: 0;
}
.nn-pulse.g1 { stroke: #9a8cf5; animation: nnflow 2.6s linear infinite 0s; }
.nn-pulse.g2 { stroke: #9a8cf5; animation: nnflow 2.6s linear infinite .5s; }
.nn-pulse.g3 { stroke: #5be08c; animation: nnflow 2.6s linear infinite 1s; }
@keyframes nnflow {
  0%       { stroke-dashoffset: 3;   opacity: 0; }
  6%       { opacity: 1; }
  30%      { stroke-dashoffset: -92; opacity: 1; }
  40%,100% { stroke-dashoffset: -92; opacity: 0; }
}
.nn-node { fill: #12122a; stroke-width: 2; }
.nn-in   { stroke: #2bcc6b; }
.nn-hid  { stroke: #7c6ee0; }
.nn-out  { stroke: #2bcc6b; }
.nn-halo { opacity: 0; }
.nn-halo.i, .nn-halo.o { fill: #2bcc6b; }
.nn-halo.h { fill: #7c6ee0; }
.nn-halo.l0 { animation: nnhalo 2.6s ease-out infinite 0s; }
.nn-halo.l1 { animation: nnhalo 2.6s ease-out infinite .5s; }
.nn-halo.l2 { animation: nnhalo 2.6s ease-out infinite 1s; }
.nn-halo.l3 { animation: nnhalo 2.6s ease-out infinite 1.35s; }
@keyframes nnhalo { 0%,100% { opacity: 0; } 12% { opacity: .45; } 45% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nn-pulse, .nn-halo { animation: none; }
}