:root{--navy:#232931;--muted:#536777;--coral:#E04A36;--paper:#F9F6F0;--line:#dce2df;--green:#14745c}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--navy);font-family:Outfit,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);background:white;border-radius:9px;min-height:46px;padding:10px 17px;font-weight:600;transition:background .15s}button:hover{background:#f4eee3}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #bb4d2d;outline-offset:4px}a{color:inherit}header{max-width:1240px;margin:auto;padding:15px 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9d5c9;gap:20px}.brand{display:block;line-height:0}.brand img{object-fit:contain;max-width:208px;width:100%;height:auto}.back{font-size:14px;font-weight:600;text-underline-offset:5px}main{max-width:1240px;padding:28px 36px 16px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:20px}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:700;margin:0 0 6px;color:var(--muted)}h1{font-size:clamp(32px,4vw,44px);letter-spacing:-.04em;line-height:1.1;margin:0 0 10px}p{margin:0}.intro>div>p:last-child{color:var(--muted);font-size:17px}.collection{font-size:14px;border:1px solid #cfcbc0;border-radius:30px;padding:9px 16px;white-space:nowrap}.workspace{display:grid;grid-template-columns:272px minmax(0,1fr);gap:24px;align-items:start}.library{padding:22px 18px;background:#eeece4;border-radius:16px}.section-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px}.section-label h2{font-size:16px;margin:0}.section-label span{font-size:12px;color:var(--muted);white-space:nowrap}.characters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.characters button{position:relative;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;font-size:27px;height:51px;min-width:0;padding:0;background:transparent;border-color:#d5d8d0}.characters button:hover{background:white}.characters button.active{background:var(--navy);color:white;border-color:var(--navy)}.characters button.completed:after{content:'✓';position:absolute;right:3px;bottom:-1px;font:11px system-ui;color:var(--green)}.characters button.active.completed:after{color:#f7ba7a}.library-note{border-top:1px solid #d5d8d0;margin-top:22px;padding-top:20px;font-size:14px}.library-note p{margin-top:6px;color:var(--muted)}.practice{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 32px #23293105}.character-heading{padding:20px 28px;display:flex;align-items:center;justify-content:space-between}.character-identity{display:flex;align-items:center;gap:17px}.character-identity>span{font-size:45px;line-height:1.2}.character-identity h2{font-size:25px;margin:0;font-weight:600}.character-identity p{color:var(--muted)}.count{font-size:14px;background:var(--paper);padding:6px 11px;border-radius:6px}.modes{display:grid;grid-template-columns:repeat(3,1fr);margin:0 28px;background:#f0f3f3;padding:4px;border-radius:10px;gap:4px}.modes button{border:0;background:transparent;font-size:14px;padding:9px 6px;min-height:42px}.modes button.active{background:var(--navy);color:white;box-shadow:0 2px 4px #23293112}.drawing-layout{display:grid;grid-template-columns:minmax(0,1fr) 195px;gap:26px;padding:24px 28px 22px}.instruction{font-size:14px;color:var(--muted);margin-bottom:13px;text-align:center}.board{position:relative;width:100%;max-width:360px;aspect-ratio:1;background:#fdfcf8;border:1px solid #c9d2d3;border-radius:10px;overflow:hidden;margin:0 auto;touch-action:none}.grid-lines{position:absolute;inset:0;background:linear-gradient(45deg,transparent calc(50% - .5px),#e5e7df 50%,transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),#e5e7df 50%,transparent calc(50% + .5px));pointer-events:none}.grid-lines:before,.grid-lines:after{content:'';position:absolute}.grid-lines:before{left:50%;top:0;bottom:0;border-left:1px dashed #d4dad5}.grid-lines:after{top:50%;left:0;right:0;border-top:1px dashed #d4dad5}#writer{position:absolute;inset:0;touch-action:none}#writer svg{display:block}#marker{position:absolute;width:100%;height:100%;inset:0;pointer-events:none}.board-caption{font-size:12px;text-align:center;color:var(--muted);margin-top:11px;min-height:36px}.practice-tools{padding-top:32px;min-width:0}.progress-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}.progress-heading span{font-size:12px;color:var(--muted)}.progress-track{height:5px;background:#ebeeeb;border-radius:10px;margin:10px 0 18px;overflow:hidden}#progress-fill{height:100%;width:0;background:var(--coral);transition:width .2s}#feedback{font-size:15px;min-height:90px;line-height:1.6}#feedback.success{color:var(--green);font-weight:600}.actions{display:grid;gap:9px}.actions button{font-size:14px}.primary{background:var(--navy);color:white;border-color:var(--navy)}.primary:hover{background:#21485e}.text-button{border-color:transparent;text-decoration:underline;text-underline-offset:3px}.small-tip{border-top:1px solid var(--line);padding-top:17px;margin-top:16px;color:var(--muted);font-size:13px}.small-tip span{font-size:11px;letter-spacing:.12em;font-weight:700}.small-tip p{margin-top:6px}.practice-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:15px 28px;gap:8px}.practice-footer button{font-size:14px;min-height:40px;padding:7px 13px}.practice-footer span{font-size:12px;color:var(--muted);text-align:center}.help{margin:22px 0 0;border-bottom:1px solid #d9d5c9;padding:0 0 18px}.help summary{cursor:pointer;font-size:15px;font-weight:600;padding:7px 0}.help-content{display:grid;grid-template-columns:1fr 1fr;gap:15px 30px;color:var(--muted);font-size:15px;padding:18px 0}.help-content strong{color:var(--navy)}footer{display:flex;justify-content:space-between;gap:15px;max-width:1240px;padding:8px 36px 30px;margin:auto;color:var(--muted);font-size:12px}footer a{text-underline-offset:3px}#character-select,.mobile-select{display:none}.stroke-steps{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.stroke-steps button{min-height:32px;min-width:32px;padding:3px;font-size:13px}.step-label{font-size:12px;color:var(--muted);margin-top:15px}[hidden]{display:none!important}@media(min-width:1150px){.drawing-layout{grid-template-columns:minmax(0,1fr) 220px;gap:32px}}@media(max-width:950px){.workspace{grid-template-columns:215px 1fr;gap:16px}.library{padding:18px 14px}.characters{gap:6px}.drawing-layout{grid-template-columns:1fr}.practice-tools{padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.progress-heading,.progress-track{grid-column:1/-1}.progress-track{margin:0}.small-tip{display:none}#feedback{min-height:0}.board-caption{min-height:0}#stroke-steps-wrap{grid-column:1/-1}.character-heading{padding:18px 20px}.drawing-layout{padding:20px}.modes{margin:0 20px}}@media(max-width:660px){header{padding:10px 20px}.brand img{width:166px}.back{font-size:12px}main{padding:21px 16px 12px}.intro{margin-bottom:20px}.intro>div>p:last-child{font-size:15px}.collection{display:none}.workspace{display:flex;flex-direction:column;gap:12px}.library{width:100%;padding:0;background:transparent}.section-label,.characters,.library-note{display:none}#character-select{display:block;width:100%;height:48px;padding:9px 12px;border:1px solid #c6ceca;background:#fff;border-radius:9px;font-size:17px}.practice{width:100%}.character-heading{padding:13px 18px}.character-identity>span{font-size:34px}.character-identity h2{font-size:22px}.character-identity p{font-size:14px}.modes{margin:0 14px}.modes button{font-size:13px}.drawing-layout{padding:16px 18px 18px;gap:12px}.instruction{margin-bottom:9px;font-size:13px}.board{max-width:310px}.board-caption{font-size:12px;margin-top:8px}.practice-tools{grid-template-columns:1fr;gap:7px}.progress-heading{font-size:14px}#feedback{font-size:14px;min-height:44px;margin-top:3px}.actions{grid-template-columns:1fr 1fr;gap:7px}.actions .text-button{grid-column:1/-1;min-height:35px;padding:4px}.actions button{font-size:14px;padding:8px}.practice-footer{padding:12px 14px}.practice-footer span{font-size:11px;max-width:100px}.help-content{grid-template-columns:1fr}footer{padding:8px 20px 25px;flex-direction:column;font-size:12px;gap:6px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.practice-nav{max-width:1240px;margin:auto;padding:12px 36px 0;display:flex;gap:8px;flex-wrap:wrap}.practice-nav a{font-size:14px;text-decoration:none;padding:8px 14px;border-radius:25px;color:#536777}.practice-nav a[aria-current]{background:#e7f2ee;color:#176b56;font-weight:600}.practice-nav a:hover{background:#eeece4}.primary:hover{background:#37433f}@media(max-width:660px){.practice-nav{padding:12px 16px 0;gap:3px}.practice-nav a{padding:7px 10px;font-size:13px}.intro h1{font-size:29px}}

@media(max-width:660px){.practice-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}.modes button{min-height:44px}.practice-footer button{min-height:44px}}