:root{color-scheme:dark}body{background:#15151e;color:#ede8f4}header{border-color:#393042;color:#b8aac9}.eyebrow{color:#b695d6}.story>p{color:#a99bb8}.chapter{border-color:#403548;color:#8e809c}.chapter.active{background:#2b2438;border-left-color:#c4a1ec;color:#dec9f4}.note{color:#877993}.source{color:#b4dbc7;border-color:#5a7e69}.stage-caption{color:#b0a2bc}.stage-bottom p{color:#93839f}.stage-bottom button{background:#c2a1e6;color:#282030}.telegram{box-shadow:0 25px 60px #0003}
 .demo-guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
}
.demo-guide img {
  display: block;
  width: min(94%, 440px);
  align-self: flex-end;
  height: auto;
  flex: none;
  mask-image: linear-gradient(#000 89%, transparent);
}
.demo-guide span {
  max-width: 20ch;
  color: #bfdbc9;
  font-size: 12px;
  line-height: 1.5;
}
.story > .source { margin-top: 12px; }
@media (max-width: 850px) {
  .demo-guide { gap: 8px; }
  .demo-guide img { width: min(85%, 300px); }
  .story > .source { margin-bottom: 20px; }
}

body[data-demo="crypto"] { --hint-color: #bdebd6; }
body[data-demo="arbitrage"] { --hint-color: #d6b7fb; }
.demo-guide span { color: var(--hint-color, #bfdbc9); }
.interaction-hint {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  max-width: 420px;
  margin: 9px 0 0;
  color: var(--hint-color, #bdebd6);
  pointer-events: none;
}
.interaction-hint span {
  font: italic 700 clamp(12px, 1.2vw, 14px)/1.2 Georgia, serif;
  transform: rotate(-3deg);
}
.interaction-hint svg {
  width: 38px;
  height: 19px;
  order: -1;
  transform: scaleY(-1);
  flex: none;
}