:root {
  --motion-enter: 480ms;
  --motion-art: 720ms;
  --motion-step: 55ms;
  --motion-chart: 850ms;
  --motion-chart-step: 75ms;
  --motion-drift: 6400ms;
  --motion-sketch-light: 10500ms;
  --motion-feedback: 150ms;
  --motion-ease: cubic-bezier(.16,1,.3,1);
  --art-opacity: .88;
}

/* Ink sits in the weave; the transparent artwork has no rectangular backing. */
.slide img {
  opacity: var(--art-opacity);
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
}
.history-art {--art-opacity:.9}
.slide img.sketch-illustration {
  --art-opacity:.94;
  mix-blend-mode:luminosity;
  filter:drop-shadow(0 0 2px rgb(175 230 184 / .08));
}
/* Light is clipped to the drawing's alpha: the canvas stays visible between strokes. */
.sketch-light {
  display:block;
  position:absolute;
  pointer-events:none;
  overflow:hidden;
  contain:paint;
  opacity:var(--art-opacity);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%);
}
.sketch-light-ink {
  position:absolute;
  inset:0;
  opacity:.32;
  -webkit-mask-image:var(--sketch-mask);
  mask-image:var(--sketch-mask);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-mode:alpha;
}
.sketch-light-fleck {
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(ellipse 9% 6% at 50% 50%,#f7ffe4 0%,rgb(231 255 218 / .8) 28%,rgb(196 255 210 / .35) 58%,transparent 100%);
}
[data-motion-pending] {opacity:0!important}

#motion-toggle {display:flex;align-items:center;justify-content:center;gap:8px}
#motion-toggle svg {width:16px;height:16px;fill:currentColor}
#motion-toggle .play-icon {display:none}
#motion-toggle[aria-pressed=true] .pause-icon {display:none}
#motion-toggle[aria-pressed=true] .play-icon {display:block}
.tools button,.arrows button,#slide-nav button,.join {
  transition:transform var(--motion-feedback) var(--motion-ease),opacity var(--motion-feedback) var(--motion-ease);
}
.tools button:active,.arrows button:active,#slide-nav button:active {transform:scale(.95)}
.join {transition:transform var(--motion-feedback) var(--motion-ease)}
.join:hover {transform:translateX(3px)}
[data-motion-paused] :is(.tools button,.arrows button,#slide-nav button,.join) {transition:none}

@media screen and (max-width:900px),screen and (max-width:960px) and (max-height:500px) {
  .site-bar {gap:12px}
  .edition {flex:1;min-width:0;font-size:9px;line-height:1.5}
  .tools {display:flex;margin-left:0;gap:0}
  .tools button:not(#motion-toggle) {display:none}
  #motion-toggle {width:44px;padding:0}
  .motion-label {display:none}
}
@media (prefers-reduced-motion:reduce) {
  [data-motion-pending] {opacity:1!important}
  .slide img {opacity:var(--art-opacity)!important}
  .sketch-light {display:none}
  .tools button,.arrows button,#slide-nav button,.join {transition:none}
  .join:hover {transform:none}
}
@media print {
  [data-motion] {opacity:1!important;transform:none!important}
  .slide img {mix-blend-mode:normal}
  .slide img.sketch-illustration {filter:none;mix-blend-mode:normal}
  .sketch-light {display:none}
}