/* First-flight notes (coach.js): handwriting and ink arrows over a light paper wash, like notes pencilled into the
   margin of a field notebook, with clean vector rings, softly distorted, around what they point at. */
.coach{--coach-ink:#1c3449;--coach-ink-soft:#244c66;--coach-paper:#fbfaf6;--coach-hand:"Noteworthy","Marker Felt","Bradley Hand","Segoe Print",cursive;
  position:fixed;inset:0;z-index:80;cursor:pointer;color:var(--coach-ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.coach-ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.coach-scrim{fill:var(--bg,#f5f4f0);fill-opacity:.58;fill-rule:evenodd}
.coach-marks path{fill:none;stroke:var(--coach-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.coach-ring{stroke:var(--coach-ink-soft);stroke-width:1.8;opacity:.9}
.coach-ring-echo{stroke:var(--coach-ink-soft);stroke-width:1.6;stroke-dasharray:.1 5.5;opacity:.45}

.coach-note{position:absolute;box-sizing:border-box;padding:14px 18px 12px;background:var(--coach-paper);border:1.5px solid var(--coach-ink);
  border-radius:15px 11px 17px 10px/11px 16px 12px 15px;box-shadow:2px 3px 0 #1c34491a,0 12px 28px -8px #1c344929;transform:rotate(-.7deg);cursor:default}
.coach-note[data-step="2"]{transform:rotate(.5deg)}
.coach-note[data-step="3"]{transform:rotate(-.4deg)}
/* A strip of masking tape holding the note down. */
.coach-note::before{content:"";position:absolute;top:-9px;left:50%;width:58px;height:17px;margin-left:-29px;background:#e7dcc2b8;border-left:1px dashed #cdbf9e;border-right:1px dashed #cdbf9e;transform:rotate(-3deg)}
.coach-text{margin:0;font:700 20px/25px var(--coach-hand);letter-spacing:.1px;color:var(--coach-ink);text-wrap:pretty}
.coach-underline{display:block;width:62%;height:12px;margin:0 0 6px -2px;overflow:visible}
.coach-underline path{fill:none;stroke:var(--coach-ink-soft);stroke-width:1.8;stroke-linecap:round;opacity:.75}

.coach-controls{display:flex;align-items:center;gap:10px;min-height:40px}
.coach-controls button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.coach-skip{border:0;background:none;padding:8px 6px 8px 0;margin-right:auto;font-family:var(--sans,system-ui,sans-serif);font-size:13px;color:var(--muted,#657582);text-decoration:underline dotted 1px;text-underline-offset:3px}
.coach-dots{display:flex;gap:6px}
.coach-dots i{width:7px;height:7px;border-radius:50%;border:1.4px solid var(--coach-ink);box-sizing:border-box;transition:background .2s}
.coach-dots i.is-on{background:var(--coach-ink)}
.coach-next{margin-left:auto;min-height:36px;padding:7px 15px;border:1.5px solid var(--coach-ink);border-radius:999px 999px 999px 999px/860px 999px 900px 999px;background:var(--coach-ink);color:#fff;
  font-family:var(--sans,system-ui,sans-serif);font-size:13px;font-weight:650;white-space:nowrap}
.coach-next span{display:inline-block;margin-left:2px}
.coach-controls button:focus-visible{outline:2px solid var(--coach-ink-soft);outline-offset:3px}
.coach-count{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .coach{animation:coach-fade .25s ease-out both}
  .coach.is-drawing :is(.coach-arrow,.coach-head){stroke-dasharray:1 2;animation:coach-draw .5s cubic-bezier(.35,.6,.35,1) var(--delay,0ms) both}
  /* Rings are not drawn: they settle in from slightly larger, the echo from further out. */
  .coach.is-drawing :is(.coach-ring,.coach-ring-echo){transform-box:fill-box;transform-origin:center;animation:coach-ring-in .7s cubic-bezier(.2,.85,.25,1.12) var(--delay,0ms) both}
  .coach.is-drawing .coach-ring-echo{animation-name:coach-echo-in;animation-duration:.9s}
  .coach.is-drawing .coach-marks .coach-head{animation-duration:.18s}
  .coach.is-drawing .coach-underline path{stroke-dasharray:1 2;animation:coach-draw .45s ease-out .3s both}
  .coach.is-drawing .coach-note{animation:coach-note-in .3s ease-out both}
}
@keyframes coach-ring-in{from{opacity:0;scale:1.16}}
@keyframes coach-echo-in{from{opacity:0;scale:1.32}}
@keyframes coach-draw{from{stroke-dashoffset:1;opacity:0}1%{opacity:1}to{stroke-dashoffset:0}}
@keyframes coach-note-in{from{opacity:0;translate:0 6px;scale:.97}}
@keyframes coach-fade{from{opacity:0}}