/* hand-drawn margin doodles (doodles.js places them) */
.dl-layer{position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none}
.dl{position:absolute;pointer-events:none;overflow:visible;color:var(--ink)}
.dl *{transform-box:view-box}
.dl-s{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset 1.3s cubic-bezier(.55,.1,.3,1) calc(var(--o,0)*.16s),opacity 0s linear calc(var(--o,0)*.16s)}
.dl-s.thin{stroke-width:1.5}
.dl-s.w{stroke-width:1.8;transition-duration:1.5s,0s}
.dl-f{stroke:none;opacity:0;transition:opacity 1s ease calc(var(--n,4)*.16s + .5s)}
.dl.is-drawn .dl-s{stroke-dashoffset:0;opacity:1}
.dl.is-drawn .dl-f{opacity:.92}

/* idle motion: only while on screen (.is-on), after the draw-on */
.dl.is-drawn .dl-flap-l{transform-origin:49px 50px;animation:dl-flap 2.4s ease-in-out 2s infinite}
.dl.is-drawn .dl-flap-r{transform-origin:51px 50px;animation:dl-flap 2.4s ease-in-out 2s infinite}
.dl.is-drawn .dl-drift{transform-origin:50px 50px;animation:dl-drift 14s ease-in-out 2s infinite}
.dl.is-drawn .dl-sway{transform-origin:50px 94px;animation:dl-sway 5.5s ease-in-out 1.6s infinite alternate}
.dl.is-drawn .dl-sway.b{animation-duration:6.8s;animation-delay:2.1s}
.dl.is-drawn .dl-bob{transform-origin:50px 50px;animation:dl-bob 4.6s ease-in-out 1.8s infinite alternate}
.dl.is-drawn .dl-tw{transform-origin:50px 49px;animation:dl-tw 3.6s ease-in-out 1.6s infinite}
.dl.is-drawn .dl-tw2{transform-origin:80px 20px;animation:dl-tw 2.8s ease-in-out 2.4s infinite}
/* one-shot: pen writes its line, a drop falls once; blot spreads once */
.dl.is-drawn .dl-pen{animation:dl-write 1.5s cubic-bezier(.55,.1,.3,1) 1.6s both}
.dl-drop{opacity:0;transform-origin:52px 76px}
.dl.is-drawn .dl-drop{animation:dl-fall 1.4s ease-in 3.1s both}
.dl.is-drawn .dl-pool{transition-delay:4.2s}
.dl.is-drawn .dl-spread{transform-origin:48px 54px;animation:dl-spread 1.6s var(--ease,ease) .4s both}

@keyframes dl-flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.62)}}
@keyframes dl-drift{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(6px,-5px) rotate(4deg)}60%{transform:translate(-3px,-8px) rotate(-3deg)}80%{transform:translate(-5px,-2px) rotate(2deg)}}
@keyframes dl-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes dl-bob{from{transform:translate(0,0) rotate(0)}to{transform:translate(3px,-4px) rotate(-3deg)}}
@keyframes dl-tw{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.82) rotate(8deg);opacity:.75}}
@keyframes dl-write{from{transform:translate(0,0)}to{transform:translate(38px,-2px)}}
@keyframes dl-fall{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:1;transform:translate(0,0) scale(1)}90%{opacity:1;transform:translate(0,17px) scale(.9,1.1)}100%{opacity:0;transform:translate(0,19px) scale(1.4,.4)}}
@keyframes dl-spread{from{transform:scale(.55)}to{transform:scale(1)}}

/* already drawn before a re-layout, or reduced motion: final state, no replay */
.dl.is-static .dl-s{transition:none}
.dl.is-static .dl-f{transition:none}
.dl.is-static .dl-pen{animation:none;transform:translate(38px,-2px)}
.dl.is-static .dl-drop,.dl.is-static .dl-spread{animation:none}
@media (prefers-reduced-motion:reduce) and (max-width:0px){
  .dl .dl-s{stroke-dashoffset:0;opacity:1;transition:none}
  .dl .dl-f{opacity:.92;transition:none}
  .dl *{animation:none!important}
  .dl .dl-pen{transform:translate(38px,-2px)}
  .dl .dl-drop{opacity:0;transform-origin:52px 76px}
}
@media print{.dl-layer{display:none}}
/* the off-screen pause sits after the animation shorthands above, which would otherwise reset it to running */
.dl:not(.is-on) :is(.dl-flap-l,.dl-flap-r,.dl-drift,.dl-sway,.dl-bob,.dl-tw,.dl-tw2){animation-play-state:paused}