.demo-course-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 15px;font-size:.85rem}.demo-position{color:var(--muted)}.demo-course-top .card-link{min-height:44px;font-size:.84rem;color:var(--teal)}
.demo-step-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.demo-step-nav a{display:flex;align-items:center;gap:7px;min-height:45px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:.78rem;font-weight:750}.demo-step-nav a>span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--raised);color:var(--teal)}.demo-step-nav a[aria-current]{border-color:var(--teal);background:var(--raised)}.demo-step-nav a[aria-current]>span{background:var(--mint);color:#0c4338}
.demo-step h2{scroll-margin-top:120px;outline:none}.demo-step-footer{display:flex;justify-content:space-between;gap:14px;margin:0 0 25px}.demo-step-footer .button{min-width:130px}.demo-statistics>summary{display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer;font-weight:800;list-style:none}.demo-statistics>summary::after{content:'+';margin-left:auto;color:var(--teal);font-size:1.6rem}.demo-statistics[open]>summary::after{content:'−'}.demo-statistics>summary::-webkit-details-marker{display:none}.demo-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}.demo-stat-grid>div{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--raised)}.demo-stat-grid strong{display:block;font-size:1.1rem;color:var(--teal);overflow-wrap:anywhere}.demo-stat-grid span{display:block;font-size:.78rem;color:var(--muted);margin-top:5px}.demo-overall{width:100%;height:12px;accent-color:#63c8ac;border:0;border-radius:9px;overflow:hidden;background:var(--raised)}.demo-overall::-webkit-progress-bar{background:var(--raised)}.demo-overall::-webkit-progress-value{background:#63c8ac}.demo-overall-label{font-size:.87rem;margin:20px 0 10px}.demo-persistence{font-size:.88rem;color:var(--muted)}.demo-import-label{position:relative;cursor:pointer}.demo-import{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.demo-import-label:focus-within{outline:3px solid var(--teal);outline-offset:3px}.demo-reset-confirm{margin-top:20px}.demo-reset-confirm summary{min-height:44px;cursor:pointer;color:var(--muted);font-size:.85rem}.demo-reset-confirm p{font-size:.85rem}
.reading-card{padding:20px 0;border-bottom:1px solid var(--line)}.reading-card:first-of-type{padding-top:0}.reading-card:last-child{border-bottom:0}.translation{border:1px solid var(--line);border-radius:13px;margin:16px 0;padding:0 15px;background:var(--wash)}.translation>summary{padding:13px 0;min-height:48px;cursor:pointer;font-weight:750;font-size:.9rem}.translation>p{margin:10px 0 18px;color:var(--muted)}.letter-forms{display:flex;gap:15px;margin:30px 0}.letter-forms>div{flex:1;display:flex;align-items:center;flex-direction:column;padding:20px;background:var(--raised);border-radius:18px}.letter-forms bdi{font:70px/1.5 Tahoma,Arial,sans-serif}.letter-forms span{font-size:.8rem;color:var(--muted)}
.builder-model{font-size:2.2rem}.builder-answer,.builder-bank,.recognition-row{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.builder-answer{min-height:86px;padding:15px;border:2px dashed var(--line);border-radius:15px;background:var(--wash)}.builder-answer:empty::before{content:'…';color:var(--muted)}.builder-answer button,.builder-bank button,.recognition-row button{min-width:50px;min-height:55px;border:1px solid var(--line);border-bottom:3px solid var(--line);border-radius:13px;padding:7px 13px;background:var(--raised);color:var(--ink);font:28px/1.6 Tahoma,Arial,sans-serif;cursor:pointer}.builder-answer button{background:var(--mint);color:#164738}.recognition-row button.is-correct,.listening-options button.is-correct{background:#c6efd8;color:#155236;border-color:#397b55}.recognition-row button.is-wrong,.listening-options button.is-wrong{background:#fbe0de;color:#812a27;border-color:#a94a45}.listening-exercise{border-top:1px solid var(--line);padding-top:25px;margin-top:30px}.demo-step .demo-options{margin-top:20px}
.pad-top{display:flex;align-items:flex-end;gap:12px;margin:22px 0 10px}.pad-top label{flex:1;min-width:0;font-size:.82rem}.demo-pad select,.practice-target,.writing-fields select,.wg-input,.homework-text{display:block;width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--raised);color:var(--ink);font:inherit;margin-top:6px}.demo-pad .pad-add{font-size:.83rem}.demo-pad{padding:0 0 14px}.demo-writing-controls{margin-top:12px}.pad-status{min-width:0}.practice-target-label{display:block;font-size:.88rem;margin-top:20px}.practice-target{font:25px Tahoma,Arial,sans-serif}.demo-check{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:.93rem;cursor:pointer}.demo-check input{appearance:auto;width:23px;height:23px;flex:none;accent-color:#1a8b74;margin:2px 0}.homework-text-label{display:block;font-size:.88rem;margin-top:22px}.homework-text{resize:vertical;max-height:450px;font:24px/1.7 Tahoma,Arial,sans-serif}.homework-status{margin:18px 0 0}.book-page{margin:12px 0;border:1px solid var(--line);border-radius:16px;padding:16px}.book-page>summary{cursor:pointer;min-height:44px;font-weight:750}.book-page img{max-width:100%;height:auto;border-radius:10px;margin-bottom:15px}.book-page .button{font-size:.88rem}
demo-writing-guide{display:block;min-width:0}.writing-help{border:1px solid var(--line);border-radius:18px;background:var(--wash);margin:15px 0 25px;overflow:hidden}.writing-help>summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:56px;padding:14px 18px;font-weight:850;cursor:pointer;list-style:none}.writing-help>summary::before{content:'▾';color:var(--teal)}.writing-help:not([open])>summary::before{content:'▸'}.writing-help>summary span{font-size:.78rem;font-weight:500;color:var(--muted)}.writing-help-body{padding:0 18px 18px}.writing-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.writing-fields label{font-size:.8rem;min-width:0}.writing-fields select{font-size:.85rem;padding-inline:10px}.wg-reference{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin:20px 0 12px}.wg-reference bdi{font:clamp(25px,5vw,40px)/1.8 Tahoma,Arial,sans-serif;overflow-wrap:anywhere;max-width:100%}.wg-caption{font-size:.8rem;color:var(--muted)}.wg-paper{border:1px solid #617e89;border-radius:16px;background:#13242d;touch-action:none;overflow:hidden}.wg-svg{display:block;width:100%;height:auto;min-height:190px;max-height:270px;stroke:none;fill:none}.wg-guide{fill:none;stroke:#526b74;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}.wg-ink{fill:none;stroke:#43c6f4;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.wg-trail{fill:none;stroke:#43c6f4;stroke-width:2.5;stroke-dasharray:4 5;stroke-linecap:round}.wg-hand{fill:none;stroke:#a4e65c;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.wg-status{font-size:.87rem;min-height:3em;margin:13px 0;color:var(--ink)}.wg-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.wg-controls .button{font-size:.85rem;padding-inline:9px}.wg-words{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.wg-words button{font:23px/1.6 Tahoma,Arial,sans-serif;padding:6px 12px;min-height:44px;border:1px solid var(--line);border-radius:11px;background:var(--raised);color:var(--ink)}.wg-words button[aria-pressed=true]{background:var(--mint);color:#154c3d}.wg-own{border-top:1px solid var(--line);padding-top:14px;margin-top:20px}.wg-own summary{min-height:44px;cursor:pointer;font-size:.87rem;font-weight:750}.wg-own label{display:block;font-size:.85rem}.wg-input{font:24px/1.6 Tahoma,Arial,sans-serif;margin-bottom:15px}.wg-input-status{font-size:.84rem}.wg-input[aria-invalid=true]{border-color:#e8a397}
@media(min-width:1000px){.demo-page{max-width:1050px}.demo-step{padding:36px}.writing-help-body{padding-inline:24px}.wg-svg{max-height:290px}}
@media(max-width:760px){.demo-page .page-intro{padding-bottom:24px}.demo-course-top{align-items:flex-start;gap:8px}.demo-course-top .card-link{font-size:.75rem}.demo-position{font-size:.75rem;padding-top:12px}.demo-step-nav{gap:6px}.demo-step-nav a{font-size:.72rem;padding:7px 9px;flex:1 0 calc(33% - 6px)}.demo-step-nav a>span{width:20px;height:22px;flex:none}.demo-stat-grid{grid-template-columns:1fr 1fr}.demo-stat-grid>div{padding:14px}.demo-stat-grid strong{font-size:1rem}.writing-fields{grid-template-columns:1fr}.writing-help-body{padding-inline:12px}.writing-help>summary{padding-inline:12px}.wg-paper{border-radius:13px}.wg-svg{max-height:240px}.demo-writing-controls{grid-template-columns:1fr 1fr;gap:9px}.demo-writing-controls .button{font-size:.8rem}.demo-step .demo-canvas{height:220px}.demo-step-footer .button{min-width:0;flex:1}.demo-statistics .actions{display:grid}.demo-check{font-size:.85rem}.pad-top{gap:8px}.pad-top .button{font-size:.75rem;padding-inline:10px}.demo-pad select{font-size:.8rem}.demo-lesson[data-band="1"] .reading-card .demo-fa{font-size:4rem}.letter-forms>div{padding:16px 10px}.letter-forms span{text-align:center}.wg-status{font-size:.8rem}.demo-step h2{font-size:1.65rem}}
@media(max-width:380px){.demo-step-nav a{flex-basis:calc(50% - 6px)}.demo-step{padding:17px}.wg-controls .button{font-size:.75rem;min-height:47px}.wg-reference{gap:7px}.wg-svg{max-height:220px}.writing-help-body{padding-inline:9px}.demo-stat-grid{gap:8px}.demo-stat-grid>div{padding:11px}.demo-writing-controls{grid-template-columns:1fr 1fr}.builder-answer button,.builder-bank button{font-size:23px;padding:6px 10px}.recognition-row{gap:8px}.recognition-row button{min-width:45px}}
@media print{.demo-step[hidden]{display:block!important}.demo-step-nav,.demo-course-top,.demo-step-footer,.demo-statistics,.wg-controls,.wg-own,.demo-pad,.builder-bank,.builder-answer,.recognition-row{display:none!important}}