/* Handwritten notes continue the rehearsal sketch through the whole page. */
:root{--hand-font:'Caveat',cursive;--hand-pen:#3e7d56}
.hand-note{font-family:var(--hand-font);font-size:28px;font-weight:500;line-height:1.15;color:var(--hand-pen)}
.hand-stroke{display:block;overflow:visible;flex:none;fill:none;color:var(--hand-pen)}
.hand-stroke path{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:url(#tryly-drawn-pen);vector-effect:non-scaling-stroke}
.step-no{position:relative;width:38px;height:38px;border:0;font-family:var(--hand-font);font-size:25px;color:var(--hand-pen)}
.step-no .step-ring{position:absolute;inset:-3px;width:44px;height:44px}
.step-line:nth-child(2) .step-ring{transform:rotate(19deg)}
.step-line:nth-child(3) .step-ring{transform:rotate(-13deg)}
.hand-steps .step-line h3{font-family:var(--hand-font);font-size:32px;line-height:1.05;letter-spacing:0;font-weight:700;color:var(--hand-pen);max-width:280px;margin-bottom:18px}
.practice-return{display:flex;align-items:center;justify-content:flex-end;gap:25px;margin:32px 0 0 34%}
.practice-return .hand-stroke{width:min(310px,42%);height:70px}
.practice-return p{margin:0;max-width:275px;transform:rotate(-2deg)}
.example-label{font-family:var(--hand-font);font-size:25px;font-weight:500;color:var(--hand-pen);line-height:1.15}
.example-label:before{display:none}
.example-label .hand-stroke{width:27px;height:27px}
.example-top{margin-bottom:32px}
.rehearsal{padding-top:52px}
.attempt-guide{position:absolute;top:-53px;left:30px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;transform:rotate(-1deg)}
.attempt-guide .hand-stroke{width:105px;height:53px}
.attempt-label{font-family:var(--hand-font);font-size:25px;line-height:1.1;font-weight:500}
.attempt .note>span{color:var(--hand-pen)}
.attempt.after .note>span{color:#bfe4cd}
.ink-highlight{display:inline-block;position:relative;max-width:100%;margin-bottom:7px}
.ink-highlight .hand-stroke{position:absolute;left:0;bottom:-8px;width:100%;height:13px;color:#bfe4cd}
.situation-guide{margin-top:32px;max-width:310px;transform:rotate(-2deg)}
.situation-guide p{margin:0;max-width:230px}
.situation-guide .guide-side{width:235px;height:85px;margin:8px 0 0 18px}
.situation-guide .guide-down{display:none}
.voice-oval{position:relative;display:inline-block;margin-top:5px}
.philosophy-title .voice-oval>.hand-stroke{position:absolute;inset:-10px -21px;width:calc(100% + 42px);height:calc(100% + 21px);margin:0;pointer-events:none}
.philosophy-title .philosophy-note{display:flex;align-items:center;gap:15px;margin:33px 0 0;max-width:330px;transform:rotate(-2deg)}
.philosophy-title .philosophy-note>.hand-stroke{display:block;width:65px;height:60px;margin:0}
.principles h3{font-family:var(--hand-font);font-size:29px;font-weight:700;line-height:1.08;letter-spacing:0;color:var(--hand-pen);margin-bottom:10px}
.last-action{position:relative;display:inline-flex;padding-top:28px;margin-top:8px}
.last .final-guide{position:absolute;left:calc(100% + 22px);top:-5px;width:190px;text-align:left;font-family:var(--hand-font);font-size:29px;font-weight:500;line-height:1.15;color:var(--hand-pen);margin:0;transform:rotate(3deg)}
.final-guide .guide-side{width:160px;height:70px;margin-top:4px}
.final-guide .guide-down{display:none}
.footer-hand{display:inline-block;font-family:var(--hand-font);font-size:24px;font-weight:500;color:var(--hand-pen);line-height:1.2;margin-bottom:5px}
.context-label{font-family:var(--hand-font);font-size:25px;line-height:1.15;color:var(--hand-pen)}
.demo-excerpt.feedback h3{font-family:var(--hand-font);font-size:23px;line-height:1.1;color:var(--hand-pen)}
@media(max-width:1100px){
  .hand-steps .step-line h3{font-size:29px}
  .practice-return{margin-left:27%;gap:20px}
  .attempt-guide{left:20px;right:15px;font-size:26px}
  .attempt-guide .hand-stroke{width:76px}
  .last .final-guide{left:calc(100% + 15px);width:155px;font-size:26px}
  .final-guide .guide-side{width:130px}
}
@media(max-width:780px){
  .hand-note{font-size:26px}
  .hand-steps .step-line h3{font-size:28px}
  .practice-return{margin-left:12%;gap:18px}
  .situation-guide{display:flex;align-items:center;gap:20px;margin-top:25px;max-width:400px}
  .situation-guide p{max-width:250px}
  .situation-guide .guide-side{display:none}
  .situation-guide .guide-down{display:block;width:55px;height:70px}
  .scenarios{gap:22px}
  .philosophy-title .voice-oval>.hand-stroke{display:block;inset:-8px -17px;width:calc(100% + 34px);height:calc(100% + 17px)}
  .philosophy-title .philosophy-note{margin-top:23px}
  .philosophy-title .philosophy-note>.hand-stroke{width:52px;height:48px}
  .principles h3{font-size:27px}
  .last-action{display:flex;flex-direction:column;align-items:center;padding-top:0;margin-top:0}
  .last .final-guide{position:static;display:flex;align-items:center;gap:14px;width:auto;font-size:27px;margin:0 0 17px;transform:rotate(-2deg)}
  .final-guide .guide-side{display:none}
  .final-guide .guide-down{display:block;width:45px;height:55px}
}
@media(max-width:520px){
  .hand-note{font-size:25px}
  .step-line{grid-template-columns:40px minmax(0,1fr);column-gap:15px}
  .step-top{width:40px}
  .step-top .step-no .step-ring{display:block}
  .hand-steps .step-line h3{font-size:29px;margin:3px 0 2px;max-width:none}
  .practice-return{justify-content:flex-start;margin:27px 0 0;gap:17px}
  .practice-return .hand-stroke{width:85px;height:55px;transform:rotate(-8deg)}
  .practice-return p{max-width:205px}
  .example-label{font-size:23px}
  .rehearsal{padding-top:0;gap:70px}
  .attempt-guide{top:-55px;left:17px;right:10px;font-size:26px}
  .attempt-guide .hand-stroke{width:83px}
  .attempt-label{font-size:23px}
  .situation-guide{gap:14px;margin-top:23px}
  .situation-guide p{max-width:220px}
  .situation-guide .guide-down{width:47px;height:65px}
  .philosophy-title .voice-oval>.hand-stroke{inset:-7px -14px;width:calc(100% + 28px);height:calc(100% + 15px)}
  .philosophy-title .philosophy-note{gap:10px;margin-top:21px}
  .principles h3{font-size:27px}
  .last .final-guide{font-size:26px;margin-bottom:14px}
  .last-action>.button{max-width:100%}
  .footer-hand{font-size:23px}
  .context-label{font-size:24px}
}