/* Reference ink stays neutral; drawn annotations use Tryly's calm green. */
.hero-drawing{margin:0;position:relative;min-width:0;width:100%;padding:14px 0 18px;--hand:'Caveat',cursive;--drawing-ink:#1f2340;--drawing-pen:#3e7d56;--drawing-label:#7a7e94;--drawing-replay:#4b5070;--drawing-replay-hover:#e8432e}
.hero-drawing>svg{display:block;width:100%;height:auto;overflow:visible}
.hero-drawing>svg path.ink,.hero-drawing>svg path.pen{fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#tryly-drawn-pen);stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:0}
.hero-drawing .ink{stroke:var(--drawing-ink)}.hero-drawing .pen{stroke:var(--drawing-pen)}
.hero-drawing .label{font-family:var(--hand);font-size:25px;font-weight:500;fill:var(--drawing-label)}
.hero-drawing .note{font-family:var(--hand);font-size:31px;font-weight:700;fill:var(--drawing-pen);border:0;padding:0;margin:0}
.hero-drawing.is-ready>svg path.ink,.hero-drawing.is-ready>svg path.pen{animation:tryly-draw var(--t,1s) ease-in-out var(--d,0s) backwards}
.hero-drawing.is-ready>svg text.note{animation:tryly-appear .5s ease var(--d,0s) backwards}
.hero-drawing:not(.is-ready)>svg path.ink,.hero-drawing:not(.is-ready)>svg path.pen{stroke-dashoffset:1}
.hero-drawing:not(.is-ready)>svg text.note{opacity:0}
.hero-drawing .d1{--d:.3s;--t:1.4s}.hero-drawing .d2{--d:1.9s;--t:.6s}.hero-drawing .d2a{--d:2.5s;--t:.9s}.hero-drawing .d3{--d:3.3s}.hero-drawing .d4{--d:3.7s;--t:.6s}.hero-drawing .d5{--d:4.4s;--t:1.4s}.hero-drawing .d5a{--d:5.9s;--t:.7s}.hero-drawing .d6{--d:6.7s}
@keyframes tryly-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes tryly-appear{from{opacity:0;transform:translateY(4px)}}
.hero-drawing .replay{position:absolute;left:0;bottom:0;border:0;background:none;padding:6px 0;display:inline-flex;align-items:center;gap:8px;font-family:var(--hand);font-size:24px;font-weight:500;line-height:1.2;min-height:40px;color:var(--drawing-replay)}
.hero-drawing .replay svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hero-drawing .replay:hover{color:var(--drawing-replay-hover)}
.hero-hand-note{font-family:'Caveat',cursive;font-weight:500;font-size:24px;line-height:1.2;color:#547560;gap:11px;margin-top:29px}
.hero-hand-note>svg{width:36px;height:38px;flex-shrink:0;fill:none;stroke:#6c967b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hero-hand-note>span{max-width:390px}
.attempt .note>span{font-family:'Caveat',cursive;font-size:25px;line-height:1.25;font-weight:700}
.example-caption{font-family:'Caveat',cursive;font-size:24px;line-height:1.25;font-weight:500;color:#567461}
@media(min-width:1600px){.hero-drawing{max-width:615px;justify-self:end}}
@media(max-width:1100px){.hero-drawing{padding-top:0}.hero-hand-note{font-size:23px}.hero-hand-note>svg{width:30px}}
@media(max-width:780px){.hero-drawing{max-width:570px;justify-self:center;margin-top:5px}.hero-hand-note{font-size:23px}.example-caption{text-align:left}}
@media(max-width:520px){.hero-drawing{padding-bottom:24px;margin-top:0}.hero-drawing .replay{font-size:22px;bottom:-5px}.hero-hand-note{font-size:22px;margin-top:23px;gap:9px}.hero-hand-note>svg{width:27px;height:33px}.attempt .note>span{font-size:24px}.example-caption{font-size:22px;margin-top:23px}}
@media(prefers-reduced-motion:reduce){.hero-drawing>svg path.ink,.hero-drawing>svg path.pen{animation:none!important;stroke-dashoffset:0!important}.hero-drawing>svg text.note{animation:none!important;opacity:1!important;transform:none!important}.hero-drawing .replay{display:none}}

/* The drawn agent: same pen as the advice, so it reads as the one speaking. */
.hero-drawing>svg .agent path.pen{stroke-width:2.5}