/* ═══════════════════════════════════════════════════════════
   بهتر است زودتر جایگزین شویم — design system
   charcoal · warm off-white · one amber accent · 16:9 stage
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #0b0a09;
  --bg-2: #131110;
  --ink: #ece5d8;
  --ink-dim: #9a938a;
  --ink-faint: #5b554e;
  --accent: #d08c3c;
  --accent-soft: rgba(208, 140, 60, .45);
  --accent-faint: rgba(208, 140, 60, .14);
  --line: rgba(236, 229, 216, .14);
  --line-soft: rgba(236, 229, 216, .07);
  /* 1 unit scales like a 16:9 canvas: fits any desktop viewport */
  --u: min(1vw, 1.7778vh);
  --fa: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --en: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, 'Vazirmatn', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fa);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* cinematic vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

::selection { background: var(--accent-faint); color: var(--ink); }

.en { font-family: var(--en); }
.acc { color: var(--accent); }
.acc-w { color: var(--accent); }

/* ───────────────────────────── deck & slides ───────────── */

#deck { position: fixed; inset: 0; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 5.5) calc(var(--u) * 8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity .55s ease;
}

.stage { width: 100%; max-width: calc(var(--u) * 86); }
.stage.center { text-align: center; }

/* ───────────────────────────── typography ──────────────── */

.kicker {
  font-size: calc(var(--u) * 1.7);
  color: var(--ink-faint);
  margin-bottom: calc(var(--u) * 2.6);
  font-weight: 500;
}

.mega {
  font-size: calc(var(--u) * 7);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
}

.head {
  font-size: calc(var(--u) * 4.2);
  font-weight: 800;
  line-height: 1.5;
}
.head.dim { color: var(--ink-dim); font-weight: 500; }

.huge {
  font-size: calc(var(--u) * 8);
  font-weight: 800;
  line-height: 1.25;
}
.huge.acc { color: var(--accent); }

.sub {
  font-size: calc(var(--u) * 2.3);
  color: var(--ink-dim);
  line-height: 1.9;
  margin-top: calc(var(--u) * 2.4);
  font-weight: 400;
}

.caption {
  font-size: calc(var(--u) * 1.8);
  color: var(--ink-faint);
  margin-top: calc(var(--u) * 3);
}

.foot {
  font-size: calc(var(--u) * 2);
  color: var(--ink-faint);
  margin-top: calc(var(--u) * 4);
}

.src {
  font-size: calc(var(--u) * 1.35);
  color: var(--ink-faint);
  margin-top: calc(var(--u) * 2.4);
}
.src a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.src a:hover { color: var(--accent); border-color: var(--accent-soft); }

/* ───────────────────────────── reveal motion ───────────── */

.rv { opacity: 0; }

.slide.active .rv {
  animation: rise .95s cubic-bezier(.16, .7, .2, 1) both;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(calc(var(--u) * 1.6)); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ═══════════════ slide 1 · title ═══════════════ */

.s-title .mega { color: var(--ink); }
.s-title .sub { margin-top: calc(var(--u) * 3.4); font-size: calc(var(--u) * 2.1); }

/* ═══════════════ slide 2 · bridge ═══════════════ */

.pipes { display: flex; flex-direction: column; gap: calc(var(--u) * 3.4); margin-top: calc(var(--u) * 1); }

.pipe { display: flex; align-items: baseline; gap: calc(var(--u) * 3); }

.pipe .tag {
  font-size: calc(var(--u) * 1.8);
  color: var(--ink-faint);
  min-width: calc(var(--u) * 7);
}

.pipe .en { font-size: calc(var(--u) * 3.4); font-weight: 700; letter-spacing: .02em; }

.pipe.old .en { color: var(--ink-faint); font-size: calc(var(--u) * 2.7); font-weight: 400; }
.pipe.old .tag { color: var(--ink-faint); }

.pipe.new .en { color: var(--ink); position: relative; }
.pipe.new .tag { color: var(--accent); }

.pipe.new .en::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(var(--u) * -.9);
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: right;
}

.slide.active .pipe.new .en::after { animation: draw-x .9s ease both 1.3s; }

@keyframes draw-x { to { transform: scaleX(1); } }

/* ═══════════════ slide 3 · chat window vs org ═══════════════ */

.s-chat .head { margin-bottom: calc(var(--u) * 1); }

.conn {
  position: relative;
  width: calc(var(--u) * 80);
  height: calc(var(--u) * 24);
  margin: calc(var(--u) * 2) auto 0;
}

.conn svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.wire {
  stroke: var(--accent-soft);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 5 9;
  opacity: 0;
}

.slide.active .wire {
  animation: wire-in .8s ease both, wire-drift 14s linear infinite;
  animation-delay: calc(1s + var(--w, 0s)), calc(1.8s + var(--w, 0s));
}

@keyframes wire-in { from { opacity: 0; } to { opacity: .8; } }
@keyframes wire-drift { to { stroke-dashoffset: -140; } }

.chatbox {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 23%;
  height: 34%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .8);
}

.chatbox .cbl { font-size: calc(var(--u) * 1.2); color: var(--ink-faint); font-family: var(--en); }

.dots { display: flex; gap: 5px; }
.dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint);
  animation: blink 1.4s ease infinite;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }

@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.node {
  position: absolute;
  left: 4%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: calc(var(--u) * .5) calc(var(--u) * 1.4);
  background: rgba(236, 229, 216, .03);
}

.node .en { font-size: calc(var(--u) * 1.4); color: var(--ink-dim); }

/* ═══════════════ slide 4 · evolution ═══════════════ */

.evo {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 3);
  height: calc(var(--u) * 22);
  margin-top: calc(var(--u) * 2);
}

.evo-i { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: calc(var(--u) * 1.2); height: 100%; }

.evo-i .bar {
  display: block;
  width: 100%;
  height: var(--h);
  background: linear-gradient(180deg, rgba(236, 229, 216, .22), rgba(236, 229, 216, .03));
  border-top: 2px solid var(--ink-dim);
  transform-origin: bottom;
}

.evo-i .bar.acc {
  background: linear-gradient(180deg, var(--accent-faint), transparent);
  border-top-color: var(--accent);
}

.slide.active .evo-i .bar { animation: grow 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.4s + var(--d, 0s)); }

@keyframes grow { from { transform: scaleY(0); } }

.evo-i .w { font-size: calc(var(--u) * 2.1); color: var(--ink-dim); }
.evo-i .w.acc-w { color: var(--accent); font-weight: 700; }

.s-evo .head { margin-top: calc(var(--u) * 3.4); text-align: center; }
.s-evo .caption { text-align: center; }

/* ═══════════════ slide 5 · fear ═══════════════ */

.s-fear .head { font-size: calc(var(--u) * 4.6); }
.s-fear .head + .head { margin-top: calc(var(--u) * 1.6); }

/* ═══════════════ slide 6 · army ═══════════════ */

.quote {
  font-size: calc(var(--u) * 3.4);
  font-weight: 500;
  line-height: 2;
  color: var(--ink-dim);
  border-right: 3px solid var(--accent-soft);
  padding-right: calc(var(--u) * 3);
  text-align: right;
}

.busy {
  margin-top: calc(var(--u) * 4);
  font-size: calc(var(--u) * 5);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
}

/* ═══════════════ slide 7 · data + environment ═══════════════ */

.s-dataenv .huge { color: var(--ink); }
.s-dataenv .huge + .huge { margin-top: calc(var(--u) * .6); }
.s-dataenv .sub { margin-top: calc(var(--u) * 3.6); }

/* ═══════════════ slide 8 · bottleneck ═══════════════ */

.bn {
  position: relative;
  width: calc(var(--u) * 80);
  height: calc(var(--u) * 21);
  margin: 0 auto;
}

.blk {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--u) * 29);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(236, 229, 216, .025);
}

.blk span { font-size: calc(var(--u) * 2.2); color: var(--ink-dim); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); }
.blk small { font-size: calc(var(--u) * 1.2); color: var(--ink-faint); font-weight: 400; }
.blk.ai { right: 0; }
.blk.org { left: 0; }

.chan {
  position: absolute;
  right: calc(var(--u) * 29);
  left: calc(var(--u) * 29);
  top: 50%;
  height: calc(var(--u) * 3.2);
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  border-radius: 999px;
}

.chan-l {
  position: absolute;
  bottom: calc(100% + var(--u) * 1.2);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: calc(var(--u) * 1.7);
  color: var(--accent);
}

.dot {
  position: absolute;
  top: 50%;
  right: calc(var(--u) * 1.5);
  width: calc(var(--u) * .7);
  height: calc(var(--u) * .7);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: flow 3.4s linear infinite;
  animation-delay: var(--i, 0s);
}

@keyframes flow {
  0%   { transform: translate(0, -50%) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  42%  { transform: translate(calc(var(--u) * -8.4), -50%) scale(.45); }
  58%  { transform: translate(calc(var(--u) * -11.6), -50%) scale(.45); }
  90%  { opacity: 1; }
  100% { transform: translate(calc(var(--u) * -18.5), -50%) scale(1); opacity: 0; }
}

.s-bn .huge { text-align: center; margin-top: calc(var(--u) * 3); }
.s-bn .sub { text-align: center; }

/* ═══════════════ slide 9 · organizational debt ═══════════════ */

.debt {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 17);
  margin: 0 auto calc(var(--u) * 3.4);
}

.slab {
  position: absolute;
  left: 50%;
  bottom: calc(var(--i) * 14.5%);
  width: calc(100% - var(--i) * 3.5%);
  height: 11%;
  transform: translateX(-50%);
  background: rgba(236, 229, 216, .05);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.slab.top { border-color: var(--accent-soft); background: var(--accent-faint); }

.slide.active .slab { animation: settle .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--i) * .18s); }

@keyframes settle {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(var(--u) * -2.4)); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.s-debt .head { text-align: center; font-size: calc(var(--u) * 3.8); }
.s-debt .sub { text-align: center; }

/* ═══════════════ slide 10 · infrastructure ═══════════════ */

.pillars { display: flex; gap: calc(var(--u) * 2.4); margin-bottom: calc(var(--u) * 4.4); }

.pil {
  flex: 1;
  border-top: 2px solid var(--line);
  padding-top: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 2.3);
  color: var(--ink-dim);
  text-align: right;
}

.s-infra .head { font-size: calc(var(--u) * 4.4); }

/* ═══════════════ slide 11 · formula ═══════════════ */

.formula { margin-top: calc(var(--u) * .6); }

.frow {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2.2);
  padding: calc(var(--u) * .95) 0;
  border-bottom: 1px solid var(--line-soft);
}

.frow .op { font-size: calc(var(--u) * 2.6); font-weight: 700; color: var(--ink); min-width: calc(var(--u) * 15); }
.frow .plus { color: var(--accent); font-size: calc(var(--u) * 2.2); }
.frow .gloss { font-size: calc(var(--u) * 1.7); color: var(--ink-faint); }

.feq {
  margin-top: calc(var(--u) * 3);
  text-align: center;
  font-size: calc(var(--u) * 5.4);
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 calc(var(--u) * 6) var(--accent-faint);
}

/* ═══════════════ slide 12 · nervous system ═══════════════ */

.net {
  position: relative;
  width: calc(var(--u) * 78);
  height: calc(var(--u) * 34);
  margin: 0 auto;
}

.net svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.link {
  stroke: var(--line);
  stroke-width: 1.4;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.slide.active .link { animation: link-draw 1s ease both; animation-delay: calc(.8s + var(--w, 0s)); }

@keyframes link-draw { to { stroke-dashoffset: 0; } }

.core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: 50%;
  border: 1.5px solid var(--accent-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .3);
  background: var(--accent-faint);
  box-shadow: 0 0 calc(var(--u) * 7) var(--accent-faint);
}

.core .en { font-size: calc(var(--u) * 3); font-weight: 800; color: var(--accent); }
.core small { font-size: calc(var(--u) * 1.2); color: var(--ink-dim); font-family: var(--en); }

.nnode {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .3);
  text-align: center;
}

.nnode .sys { font-size: calc(var(--u) * 1.9); color: var(--ink); font-weight: 500; }
.nnode .role { font-size: calc(var(--u) * 1.2); color: var(--ink-faint); font-family: var(--en); }

.s-net .caption { text-align: center; }

/* ═══════════════ slide 13 · ticket ═══════════════ */

.tflow { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .9); }

.fstep {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: calc(var(--u) * .8) calc(var(--u) * 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .25);
  background: rgba(236, 229, 216, .02);
}

.fstep span { font-size: calc(var(--u) * 2.1); }
.fstep small { font-size: calc(var(--u) * 1.2); color: var(--ink-faint); font-family: var(--en); }

.fstep.know { border-color: var(--accent-soft); }
.fstep.know span { color: var(--accent); font-weight: 700; }
.fstep.know small { color: var(--ink-dim); font-family: var(--fa); font-size: calc(var(--u) * 1.4); }

.fstep.dont span { color: var(--ink-dim); }
.fstep.dont small { color: var(--ink-faint); font-family: var(--fa); font-size: calc(var(--u) * 1.4); }

.parrow { color: var(--ink-faint); font-size: calc(var(--u) * 1.8); line-height: 1; }

.branch { display: flex; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * .8); }

.s-ticket .caption { text-align: center; }

/* ═══════════════ slide 14 · scale ═══════════════ */

.scale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 7);
  align-items: stretch;
  height: calc(var(--u) * 24);
  margin-top: calc(var(--u) * 1);
}

.s-col { display: flex; flex-direction: column; }

.s-lab { font-size: calc(var(--u) * 1.9); color: var(--ink-dim); margin-bottom: calc(var(--u) * 1.6); }
.s-lab small { color: var(--ink-faint); font-size: calc(var(--u) * 1.3); margin-inline-start: calc(var(--u) * 1); }

.bars { flex: 1; display: flex; align-items: flex-end; gap: calc(var(--u) * 1.8); }

.bars i {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--accent-faint), transparent);
  border-top: 2px solid var(--accent-soft);
  transform-origin: bottom;
}

.slide.active .bars i { animation: grow 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }

.flat { flex: 1; position: relative; }

.flatline {
  position: absolute;
  top: 52%;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--ink-dim);
  transform-origin: right;
}

.slide.active .flatline { animation: draw-x 1.2s ease both .9s; }

.s-scale .caption { text-align: center; }

/* ═══════════════ slide 15 · economics ═══════════════ */

.erow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: calc(var(--u) * 1.7) 0;
  border-bottom: 1px solid var(--line);
}

.erow .ename { font-size: calc(var(--u) * 2.6); font-weight: 700; }
.erow .eprice { font-size: calc(var(--u) * 2); color: var(--ink-dim); }

.erow.old .ename { color: var(--ink-faint); font-weight: 400; }
.erow.old .eprice { color: var(--ink-faint); }
.erow.new .ename { color: var(--accent); }

.multi {
  margin-top: calc(var(--u) * 3.6);
  font-size: calc(var(--u) * 6);
  font-weight: 800;
}
.multi .en { color: var(--accent); }

.note { font-size: calc(var(--u) * 1.6); color: var(--ink-faint); margin-top: calc(var(--u) * 2); }

/* ═══════════════ slide 16 · uber ═══════════════ */

.stats { display: flex; gap: calc(var(--u) * 4); align-items: flex-end; margin-top: calc(var(--u) * 1); }

.stat { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 1); border-top: 1px solid var(--line); padding-top: calc(var(--u) * 2); }

.stat .num { font-size: calc(var(--u) * 5); font-weight: 800; color: var(--ink-dim); line-height: 1.1; }
.stat .lab { font-size: calc(var(--u) * 1.7); color: var(--ink-faint); }

.stat.hero .num { font-size: calc(var(--u) * 7.4); color: var(--accent); }
.stat.hero .lab { color: var(--ink-dim); }
.stat.hero { border-top-color: var(--accent-soft); }

.s-uber .sub { margin-top: calc(var(--u) * 3.2); }
.s-uber .sub strong { color: var(--accent); font-weight: 700; }

/* ═══════════════ slide 17 · cdn ═══════════════ */

.cdn { display: flex; flex-direction: column; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * .6); }

.layer { display: flex; align-items: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 3.6); }

.layer i {
  display: block;
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, rgba(236, 229, 216, .1), rgba(236, 229, 216, .02));
  border-right: 3px solid var(--ink-dim);
  border-radius: 3px;
}

.layer:last-child i { border-right-color: var(--accent); background: linear-gradient(90deg, var(--accent-faint), transparent); }

.layer .en { font-size: calc(var(--u) * 1.8); color: var(--ink-dim); }

.chain {
  margin-top: calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 1.8);
  color: var(--ink-faint);
  text-align: center;
  letter-spacing: .01em;
}
.chain b { color: var(--accent); font-weight: 700; }

.s-cdn .caption { text-align: center; }

/* ═══════════════ slide 18 · discussion ═══════════════ */

.pulse {
  display: block;
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
  border-radius: 50%;
  background: var(--accent);
  margin: 0 auto calc(var(--u) * 4);
  animation: pulse 2.6s ease infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-faint); opacity: .8; }
  50% { box-shadow: 0 0 0 calc(var(--u) * 1.6) transparent; opacity: 1; }
}

.q { font-size: calc(var(--u) * 6.4); font-weight: 800; line-height: 1.5; }

.subq { margin-top: calc(var(--u) * 3.4); font-size: calc(var(--u) * 2.4); color: var(--ink-dim); }

/* ═══════════════ slides 19–21 · closing ═══════════════ */

.q2 { font-size: calc(var(--u) * 5.2); font-weight: 800; line-height: 1.7; }
.q2 .acc { color: var(--accent); }

.fin-1 { font-size: calc(var(--u) * 3.6); color: var(--ink-dim); font-weight: 500; line-height: 1.9; }
.fin-2 { font-size: calc(var(--u) * 4.4); font-weight: 800; line-height: 1.9; margin-top: calc(var(--u) * 2.6); }

/* ───────────────────────────── chrome ──────────────────── */

.hud { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

.progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(236, 229, 216, .06);
}

.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .5s ease;
}

.ctrl {
  position: absolute;
  bottom: calc(var(--u) * 2.4);
  left: calc(var(--u) * 2.6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  pointer-events: auto;
}

.ctrl button {
  font-family: var(--fa);
  font-size: calc(var(--u) * 1.4);
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: calc(var(--u) * .45) calc(var(--u) * 1.5);
  cursor: pointer;
  transition: color .3s, border-color .3s;
}

.ctrl button:hover { color: var(--ink); border-color: var(--accent-soft); }

#counter {
  font-size: calc(var(--u) * 1.5);
  color: var(--ink-faint);
  min-width: calc(var(--u) * 6);
  text-align: center;
}

#notesBtn { font-family: var(--en) !important; }

/* edge click zones */
.edge {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 8vw;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .35s;
}

.edge span { font-size: calc(var(--u) * 4); line-height: 1; transition: color .3s; }
.edge:hover { opacity: 1; }
.edge:hover span { color: var(--accent); }
.edge.next { right: 0; justify-content: flex-end; padding-right: calc(var(--u) * 1.4); }
.edge.prev { left: 0; justify-content: flex-start; padding-left: calc(var(--u) * 1.4); }

/* hint */
.hint {
  position: fixed;
  bottom: calc(var(--u) * 2.6);
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--u) * 1.4);
  color: var(--ink-faint);
  z-index: 40;
  pointer-events: none;
  animation: hint-out 1.2s ease 7s both;
}

.hint .en { font-family: var(--en); }

@keyframes hint-out { to { opacity: 0; } }

/* ───────────────────────────── notes panel ─────────────── */

#notesPanel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(440px, 36vw);
  background: rgba(13, 12, 10, .93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--line);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transform: translateX(-102%);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  visibility: hidden;
}

#notesPanel.open { transform: translateX(0); visibility: visible; }

#notesPanel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
}

#notesTitle { font-size: 15px; font-weight: 700; color: var(--ink); }

#notesClose {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}

#notesClose:hover { color: var(--ink); border-color: var(--accent-soft); }

.notes-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 40px;
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--ink-dim);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
}

.notes-body p { margin-bottom: 14px; }
.notes-body strong { color: var(--ink); font-weight: 700; }
.notes-body em { color: var(--ink-faint); }
.notes-body hr { border: 0; border-top: 1px solid var(--line-soft); margin: 18px 0; }

/* ───────────────────────────── reduced motion ──────────── */

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.active { transition: opacity .2s ease; }
  .rv, .slide.active .rv { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .evo-i .bar, .slide.active .evo-i .bar,
  .bars i, .slide.active .bars i,
  .slab, .slide.active .slab { animation: none !important; transform: none !important; opacity: 1 !important; }
  .wire, .slide.active .wire { animation: wire-in .2s ease both !important; }
  .link, .slide.active .link { animation: none !important; stroke-dashoffset: 0 !important; }
  .dot, .dots i, .pulse { animation: none !important; }
  .dot { opacity: .6; }
  .pipe.new .en::after, .slide.active .pipe.new .en::after,
  .flatline, .slide.active .flatline { animation: none !important; transform: none !important; }
  #notesPanel { transition: none; }
}