/* BioTwin presentation palette. TwinMe keeps its own blue theme. */
:root {
  --navy: #142e29;
  --navy-2: #234c41;
  --teal: #397c64;
  --aqua: #b6d6bb;
  --cream: #f6f4eb;
  --ink: #193a35;
  --muted: #52665b;
  --line: rgba(25, 58, 53, .16);
  --shadow: 0 40px 110px rgba(8, 24, 20, .38);
}
body {
  background: radial-gradient(circle at 18% 16%, #739c7620, transparent 30%), #10251f;
}
.dark { background: linear-gradient(135deg, var(--navy), #10251f 82%); }
.photo { background: var(--navy); }
.scrim.left { background: linear-gradient(90deg, #10251ff5 0%, #10251fd6 42%, #10251f21 76%, transparent); }
.scrim.right { background: linear-gradient(270deg, #10251ff5 0%, #10251fc7 40%, #10251f0f 76%, transparent); }
.scrim.bottom { background: linear-gradient(0deg, #10251ff7, #10251f8f 42%, #10251f0a 78%); }
.scrim.all { background: #10251fa3; }
.scrim.light-left { background: linear-gradient(90deg, #f6f4ebfa 0%, #f6f4ebd6 43%, #f6f4eb0f 78%, transparent); }
.site-return, .controls, .notes-panel, .help-panel, .chapters-panel, .research-badge {
  background-color: #142e29ed;
}
.site-return:focus-visible, .controls button:focus-visible,
.chapters-button:focus-visible, .deck-cta:focus-visible {
  outline: 2px solid #ead1a0;
  outline-offset: 3px;
}
.deck-cta-primary { color: #142e29; }
@media (prefers-reduced-motion: reduce) {
  .slide.active, .slide.leaving, .bg.kenburns { animation: none; }
}

/* Understand and Compare, audit of 29/09/2026. The presentations built from
   education-decks.json (body.edu-deck) handle these points themselves. */
@media (min-width: 761px) {
  /* The privacy button sits at the bottom right. Arabic captions start on the
     right, so it hid the first words of every caption: it moves to the left,
     where the Arabic line ends. */
  html[dir="rtl"] body:not(.edu-deck) #bt-consent-manage { right: auto; left: 1rem; }
  /* At rest the arrows and the counter were drawn at 28 % opacity (2.5:1):
     nothing showed a first-time reader how to move on. */
  body:not(.edu-deck):not(.clean) .controls { opacity: .9; }
  body:not(.edu-deck):not(.clean) .controls:hover,
  body:not(.edu-deck):not(.clean) .controls:focus-within { opacity: 1; }
}
@media (max-width: 760px) {
  /* On phones the Arabic title is aligned to the right, over the bright side
     of the photo: a gradient from the bottom keeps it readable. */
  html[dir="rtl"] body:not(.edu-deck) .slide.photo .scrim.left {
    background:
      linear-gradient(0deg, #10251ff5 0%, #10251fcc 42%, #10251f33 74%, transparent),
      linear-gradient(90deg, #10251ff5 0%, #10251fd6 42%, #10251f21 76%, transparent);
  }
}