.lesson-demo{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:start;padding-block:90px 110px}
.demo-controls [hidden]{display:none}
.demo-matching button[data-pair]{position:relative;padding-top:29px}.demo-matching button[data-pair]::before{content:attr(data-pair);position:absolute;top:6px;left:8px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#627448;color:white;font-size:10px}
.demo-intro{position:sticky;top:70px}.demo-intro h2 em{color:var(--red);font-style:normal}.demo-intro>p{color:var(--muted);font-size:15px}.demo-hand{display:block;font:28px/1.2 var(--hand);color:var(--red);margin-top:24px;transform:rotate(-3deg)}
.demo-notebook{background:#fffdf7;border:1px solid #d8dacd;border-radius:12px;box-shadow:8px 8px 0 #e4e9d9,0 20px 50px #2b302b08;padding:28px;min-width:0;position:relative}.demo-top{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1px}.demo-top>span:last-child{letter-spacing:0;color:var(--red);white-space:nowrap}.demo-meter{height:3px;background:var(--green);margin:16px 0 22px;border-radius:3px;overflow:hidden}.demo-meter>span{display:block;width:0;height:100%;background:var(--red);transition:width .5s ease}
.demo-tabs{display:flex;gap:6px;margin-bottom:25px}.demo-tabs button{flex:1;padding:10px 5px;border:1px solid var(--line);border-radius:6px;background:transparent;font-size:11px;cursor:pointer}.demo-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.demo-panel[hidden],.demo-complete[hidden]{display:none}.demo-panel{animation:demo-page .4s ease both}.demo-panel h3,.demo-complete h3{font:25px/1.4 var(--serif);letter-spacing:-.7px;margin:0 0 8px}.demo-instruction{font-size:13px;color:var(--muted);margin:0 0 20px}.demo-reading{background:#eef0e2;border-radius:6px;border-left:3px solid #a8b18a;margin:0 0 23px;padding:17px 20px;font-size:15px;line-height:1.7}.demo-question{border:0;padding:0;margin:0 0 20px;min-width:0}.demo-question legend{font-size:13px;font-weight:700;margin-bottom:10px}.demo-choices{display:flex;flex-wrap:wrap;gap:7px}.demo-choices label{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:5px;padding:9px 11px;font-size:12px;cursor:pointer;transition:background .2s,border-color .2s}.demo-choices label:has(input:checked){background:#e4e9d9;border-color:#91a273}.demo-choices input{margin:0;accent-color:#5b6d43}.demo-feedback{font-size:12px;line-height:1.5;margin:7px 0 0;color:var(--red)}.demo-question[data-correct=true] .demo-feedback{color:#536841}.demo-question[data-correct=true]{animation:demo-success .4s ease}
.demo-fill{padding:18px;background:#f5f2e9;border-radius:7px;line-height:2.3;font-size:16px}.demo-fill input{display:inline-block;width:108px;max-width:100%;border:0;border-bottom:2px solid #a3ac91;border-radius:3px;background:white;color:var(--ink);padding:8px 7px;font:16px var(--sans);text-align:center}.demo-fill input:focus{outline:2px solid var(--red);outline-offset:3px}.demo-fill small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:7px}.demo-pencil{font:23px/1.3 var(--hand);color:var(--red);margin:20px 0 25px}
.demo-matching{display:grid;grid-template-columns:.7fr 1.3fr;gap:12px}.demo-matching>div{display:grid;grid-template-rows:1fr 1fr;gap:12px}.demo-matching button{border:1px solid #d6daca;border-radius:8px;background:#f8f6ee;padding:17px 12px;min-height:85px;font-size:14px;line-height:1.5;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}.demo-matching button[aria-pressed=true]{border:2px solid var(--red);background:#f5e4d9;transform:rotate(-2deg)}.demo-matching button:disabled{opacity:1;background:#e4e9d9;border-color:#97a67b;color:#405532;cursor:default}.demo-match-feedback{font-size:13px;min-height:40px;color:var(--muted);margin-top:17px}
.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:25px}.demo-controls .button{font-size:13px;min-height:48px;padding:12px 16px;gap:12px;cursor:pointer}.demo-next,.demo-reset{border:0;background:none;cursor:pointer;font-size:12px;padding:10px 0}.demo-next{white-space:nowrap;color:var(--red)}.demo-status{font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0 0}.demo-status:empty{display:none}.demo-reset{color:var(--muted);text-decoration:underline;text-underline-offset:4px;margin-top:14px}.demo-complete{background:var(--green);padding:22px;border-radius:8px;margin-top:22px;animation:demo-page .5s ease}.demo-complete .demo-hand{margin:0 0 15px}.demo-complete p{font-size:13px}.demo-complete .button{font-size:12px;min-height:46px;padding:12px 16px;gap:10px}
@keyframes demo-page{from{opacity:0;transform:translateY(10px) rotate(.4deg)}to{opacity:1;transform:none}}@keyframes demo-success{50%{transform:translateY(-3px)}}
@media(max-width:760px){.lesson-demo{grid-template-columns:1fr;gap:30px;padding-block:60px 70px}.demo-intro{position:static}.demo-intro h2{margin-top:16px}.demo-intro>p{font-size:14px}.demo-hand{font-size:25px;margin-top:18px}.demo-notebook{padding:20px 16px;box-shadow:5px 5px 0 #e4e9d9}.demo-top{font-size:9px;letter-spacing:.4px}.demo-panel h3{font-size:23px}.demo-tabs{gap:5px}.demo-tabs button{font-size:10px;padding:10px 3px}.demo-reading{font-size:14px;padding:14px}.demo-choices{gap:5px}.demo-choices label{padding:8px;font-size:11px}.demo-fill{font-size:14px;padding:14px}.demo-fill input{width:95px}.demo-matching{gap:8px}.demo-matching button{padding:12px 9px;font-size:12px}.demo-controls .button{font-size:12px;padding:10px 12px}.demo-next{font-size:11px}}
@media(prefers-reduced-motion:reduce){.demo-panel,.demo-complete,.demo-question[data-correct=true]{animation:none}.demo-meter>span,.demo-matching button,.demo-choices label{transition:none}}

.demo-course-link{display:inline-flex;align-items:center;gap:12px;margin-top:8px;font-size:13px;font-weight:600;color:var(--red);border-bottom:1px solid #cdb1a0;padding-bottom:5px}.course-sample-link{display:inline-block;font-size:11px;color:var(--red);text-decoration:underline;text-underline-offset:3px;margin-top:5px}#course{scroll-margin-top:30px}