/* Handwriting demo class (/handwriting-demo). Shares the class frame (clock, sections, badge, quiz) with y1demo.css. */
/* tracing pad (public/site/trace-pad.js) */
.hw-pad-wrap{max-width:320px}
.hw-pad-wrap.wide{max-width:640px}
.hw-pad{position:relative;width:100%;border:4px solid #1b1340;border-radius:20px;background:#fff;box-shadow:6px 6px 0 #1b1340;overflow:hidden;touch-action:none}
.hw-pad svg,.hw-pad canvas{position:absolute;inset:0;width:100%;height:100%}
.hw-pad canvas{cursor:crosshair;touch-action:none}
.tp-line{stroke:#9fb3dd;stroke-width:.9}
.tp-line-mid{stroke-dasharray:3 3;stroke:#b8c6e6}
.tp-line-base{stroke:#ff5d8f;stroke-width:1.4}
.tp-line-desc{stroke:#d6def0}
.tp-ghost{fill:none;stroke:#b0a8d8;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 5.2}
.tp-ghost.off{display:none}
.tp-ink{fill:none;stroke:#ff5d8f;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.tp-start{fill:#12a37d;stroke:#fff;stroke-width:1.5}
.tp-arrow{fill:#12a37d}
.tp-n{font-size:9px;font-weight:900;fill:#12a37d}
.tp-pencil{font-size:13px}
.tp-green{color:#12a37d;font-weight:900}
.hw-fb{min-height:2.8em;font-size:1.2rem;font-weight:800}
.hw-ghost{display:inline-flex;align-items:center;gap:6px;font-weight:700}

.hw-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.hw-tabs button{padding:8px 14px;border:3px solid #1b1340;border-radius:999px;background:#fff;font:inherit;font-weight:800;cursor:pointer}
.hw-tabs button[aria-selected="true"]{background:#ffd23f;box-shadow:3px 3px 0 #1b1340}
.hw-say{font-size:clamp(18px,2vw,23px);font-weight:700;line-height:1.4;margin:.3rem 0 .8rem}

/* finger gym */
.hw-gym{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.hw-gym-card{position:relative;padding:14px 16px 18px;border:3px solid #1b1340;border-radius:20px;background:#fff;box-shadow:5px 5px 0 #1b1340;overflow:hidden}
.hw-gym-card h3{margin:.2rem 0}
.hw-gym-card p{margin:0 0 .7rem}
.hw-gym-ic{font-size:40px}
.hw-gym-card.now{background:#fff8dc}
.hw-gym-card.done{background:#e2fbf3}
.hw-gym-bar{position:absolute;left:0;bottom:0;height:7px;width:0;background:#6c4de6;transition:width 1s linear}

/* ready to write */
.hw-ready{display:grid;gap:10px;max-width:820px}
.hw-ready-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border:3px solid #1b1340;border-radius:16px;background:#fff;font-size:1.2rem;font-weight:700;cursor:pointer}
.hw-ready-item input{position:absolute;opacity:0}
.hw-tick{flex:none;width:30px;height:30px;border:3px solid #1b1340;border-radius:8px;background:#fff}
.hw-ready-item input:checked~.hw-tick{background:#38d9a9}
.hw-ready-item input:checked~.hw-tick::after{content:"✓";display:grid;place-items:center;height:100%;font-weight:900}
.hw-ready-item input:focus-visible~.hw-tick{outline:3px solid #6c4de6;outline-offset:2px}
.hw-ready-ic{font-size:28px}
.hw-ready-done{font-size:1.4rem;font-weight:900;color:#12a37d}
.hw-grip{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:16px;max-width:820px}
.hw-grip svg{width:260px;max-width:100%}
.hw-grip p{flex:1 1 260px;font-size:1.1rem}

/* letters */
.hw-letter-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.hw-letter-btns button{width:58px;height:58px;border:3px solid #1b1340;border-radius:14px;background:#fff;font:inherit;font-size:2rem;font-weight:800;cursor:pointer}
.hw-letter-btns button.on{background:#ffd23f;box-shadow:3px 3px 0 #1b1340}
.hw-letter-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:start}
.hw-big-letter{margin:0;font:700 clamp(90px,12vw,150px)/1 "Fredoka",system-ui,sans-serif;color:#6c4de6}
.hw-tips{padding-left:0;list-style:none;font-size:1.1rem}
.hw-tips li{margin:.45rem 0}

/* my name */
.hw-name-pad{position:relative;width:100%;max-width:860px;aspect-ratio:600/170;border:4px solid #1b1340;border-radius:20px;background:#fff;box-shadow:6px 6px 0 #1b1340;overflow:hidden;touch-action:none}
.hw-name-pad svg,.hw-name-pad canvas{position:absolute;inset:0;width:100%;height:100%}
.hw-name-pad canvas{cursor:crosshair;touch-action:none}
.hw-name-guide line{stroke:#9fb3dd;stroke-width:1}
.hw-name-guide line.m{stroke-dasharray:4 4;stroke:#b8c6e6}
.hw-name-guide line.b{stroke:#ff5d8f;stroke-width:1.6}
.hw-name-guide text{font-family:"Fredoka",system-ui,sans-serif;font-weight:500;fill:none;stroke:#b0a8d8;stroke-width:3;stroke-dasharray:1 6;stroke-linecap:round}
.hw-sentence{margin-top:18px}
.hw-sent{display:inline-block;padding:10px 20px;border:3px solid #1b1340;border-radius:16px;background:#fffdf7;font:600 clamp(28px,4vw,46px)/1.3 "Fredoka",system-ui,sans-serif;word-spacing:.35em}
.hw-sent.spaces{word-spacing:1.4em;background:#fffdf7 linear-gradient(transparent,transparent)}

/* b or d detective */
.hw-target{display:inline-block;min-width:1.4em;padding:0 .3em;border:3px solid #1b1340;border-radius:10px;background:#ffd23f;text-align:center;font-size:1.5rem}
.hw-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-width:720px}
.hw-cell{aspect-ratio:1;border:3px solid #1b1340;border-radius:14px;background:#fff;font:600 clamp(28px,4vw,44px)/1 "Fredoka",system-ui,sans-serif;cursor:pointer}
.hw-cell.ok{background:#38d9a9}
.hw-cell.no{background:#ffd6e2;animation:y1shake .35s}

@media(max-width:760px){.hw-letter-grid{grid-template-columns:1fr}.hw-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* printing: the practice sheet */
.hw-sheet-row{display:block;width:100%;max-width:700px;height:auto;margin:6pt 0}
@media print{
  .hw-sheet-row line{stroke:#888;stroke-width:1}
  .hw-sheet-row line.m{stroke-dasharray:4 4}
  .hw-sheet-row line.b{stroke:#000;stroke-width:1.6}
  .hw-sheet-row path{fill:none;stroke:#999;stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 6}
}