:root{--ink:#203e35;--green:#285847;--paper:#f6f5ef;--line:#dedfd5;--muted:#737e74;--orange:#c67c4b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 system-ui,sans-serif}header{max-width:1120px;margin:auto;padding:28px 32px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-size:19px;font-weight:650}.brand b{font:32px serif;background:var(--green);color:white;border-radius:13px;padding:0 12px}.brand small{display:block;font-size:11px;color:var(--muted);font-weight:400}.badge{border:1px solid var(--line);border-radius:30px;padding:7px 15px;font-size:12px}main{max-width:1056px;margin:auto;padding:0 28px}.intro{padding:25px 0 30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:var(--muted)}h1{font:52px/1.15 Georgia,serif;letter-spacing:-1.5px;margin:12px 0}h1 em{font-weight:400;color:var(--green)}.intro p{color:var(--muted)}nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:26px}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);padding:10px 15px}button:hover{border-color:var(--green);background:#eff3ec}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #d29b60;outline-offset:2px}nav button{background:none;border:0;border-radius:0;padding:13px 20px;color:var(--muted);border-bottom:3px solid transparent}nav button.active{border-bottom-color:var(--green);color:var(--green);font-weight:650}nav span{font-size:11px;background:#e4e8dc;border-radius:20px;padding:2px 7px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}.drawlayout{display:grid;grid-template-columns:1fr 1fr;gap:40px}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:10px}h2{font:24px/1.3 Georgia,serif;margin:0}.sectionhead>span{font-size:12px;color:var(--muted)}.muted{color:var(--muted);font-size:13px}.board{position:relative;max-width:400px;margin:20px auto 14px;aspect-ratio:1;background:#fafaf5;border:1px solid #d9dfd1;border-radius:12px;overflow:hidden;background-image:linear-gradient(90deg,transparent 49.8%,#e0e4d8 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.8%,#e0e4d8 50%,transparent 50.3%)}.board:before,.board:after{content:'';position:absolute;left:0;top:50%;width:142%;border-top:1px dashed #e6e8df;transform:rotate(45deg);transform-origin:35% 50%}.board:after{transform:rotate(-45deg)}canvas{width:100%;height:100%;position:absolute;z-index:2;touch-action:none}#placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#c1caba;font:32px serif;pointer-events:none}#placeholder small{font:12px system-ui;margin-top:12px;letter-spacing:1px}.tools{display:flex;gap:8px;justify-content:flex-end}.tools button{font-size:12px}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#173f30;color:white}.hint{font-size:11px;color:var(--muted);line-height:1.7}.dot{color:#a1b58c!important}#candidates{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:220px;align-content:start}.candidate{text-align:left;display:grid;grid-template-columns:45px 1fr;gap:7px;padding:12px;align-items:center}.glyph{font:38px serif}.candidate small{display:block;color:var(--muted);font-size:10px}.candidate .translation{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.manual{border-top:1px solid var(--line);padding-top:22px;margin-top:20px}label{display:block;font-size:12px;margin-bottom:8px}.searchrow{display:flex;gap:8px}input{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:11px;background:#fafbf7;color:var(--ink)}.searchrow button{white-space:nowrap;font-size:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.card{border:1px solid var(--line);border-radius:12px;padding:20px}.card .glyph{font-size:54px}.card p{margin:6px 0}.card button{font-size:11px;padding:5px 9px}.empty{grid-column:1/-1;padding:40px 10px;text-align:center;color:var(--muted)}footer{padding:25px 0 36px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}footer button{border:0;background:none;font-size:11px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.modes button{text-align:left;padding:25px;display:flex;flex-direction:column;gap:10px;background:#fafbf7}.modes span:last-child{font-size:12px;color:var(--muted)}.modeglyph{font:30px Georgia,serif}#prompt{text-align:center;font:80px serif;margin:25px 0 35px;overflow-wrap:anywhere}#prompt.word{font:30px Georgia,serif}#promptlabel{text-align:center;margin-top:30px}#options{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:650px;margin:auto}#options button{min-height:75px}#options.zh button{font-size:45px}#options .correct{background:#e3efdf;border:2px solid #527b49;opacity:1}#options .wrong{background:#fae4df;border:2px solid #b5624e;opacity:1}#feedback{text-align:center}#next{display:block;margin:20px auto}#next[hidden]{display:none}dialog{border:1px solid var(--line);border-radius:18px;padding:28px;width:min(92vw,520px);color:var(--ink)}dialog::backdrop{background:#15291d66}#editchar{text-align:center;font:90px serif}#editpinyin{text-align:center}#definitions{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0;max-height:180px;overflow:auto}#definitions button{font-size:11px;text-align:left}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:10px 20px;border-radius:25px;display:none;z-index:9}a{color:var(--green)}[hidden]{display:none!important}@media(max-width:650px){header{padding:20px}.badge{font-size:10px;padding:5px 9px}main{padding:0 16px}.intro{padding:12px 2px 20px}h1{font-size:42px}.intro p{font-size:13px}nav{gap:0;margin-bottom:18px;justify-content:space-between}nav button{font-size:11px;padding:12px 7px}.panel{padding:20px 16px}.drawlayout{grid-template-columns:1fr;gap:25px}.board{max-width:350px}.results{border-top:1px solid var(--line);padding-top:20px}.cards{grid-template-columns:1fr 1fr}.card{padding:14px}.modes{grid-template-columns:1fr;gap:12px}.modes button{padding:20px}h2{font-size:21px}footer{font-size:10px;gap:10px}#options{gap:8px}#options button{font-size:13px}.sectionhead button{font-size:11px}#status{min-height:22px}}

#quizplaceholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b4bfac;pointer-events:none}#writingquiz{max-width:440px;margin:auto}#writingquiz .board{max-width:330px}#writingquiz .hint{text-align:center}.usertabs{display:flex;gap:8px;margin:18px 0}#userform label{margin-top:14px}.usertools{margin-top:20px;flex-wrap:wrap;justify-content:flex-start}#usererror{color:#a94938;font-size:13px}#userbutton{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modes{grid-template-columns:repeat(3,1fr)}@media(max-width:650px){.modes{grid-template-columns:1fr}}

.brand b{font:20px/1.2 Georgia,"Noto Serif CJK SC",serif;display:flex;align-items:center;justify-content:center;min-width:54px;height:48px;padding:0 7px;letter-spacing:1px}.intro{padding:18px 0 28px}.intro h1{font:68px/1.2 Georgia,"Noto Serif CJK SC",serif;letter-spacing:5px;margin:0;color:var(--green)}@media(max-width:650px){.intro{padding:10px 2px 22px}.intro h1{font-size:54px}}

#statistics{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.statgrid>div{background:#f4f6ef;border-radius:12px;padding:16px}.statgrid strong{display:block;font:30px Georgia,serif}.statgrid span{font-size:11px;color:var(--muted)}#quizhistory{margin-top:14px}#quizhistory p{display:flex;justify-content:space-between;gap:12px;font-size:12px;border-bottom:1px solid var(--line);padding:8px 0}#quizresult{text-align:center;padding:30px 0}#resultpoints{font:60px Georgia,serif;color:var(--green);margin:25px 0}#quizresult .tools{justify-content:center}#strokehelp{padding:16px;background:#f7f8f3;border:1px solid var(--line);border-radius:12px;margin:14px 0}#strokecanvas{position:static;display:block;width:100%;max-width:280px;height:auto;aspect-ratio:1;margin:auto;background:white;border:1px solid var(--line);border-radius:10px}#strokelabel{text-align:center;font-size:13px}#showstrokes{display:block;margin:10px auto}#strokehelp .tools{justify-content:center;flex-wrap:wrap}summary{cursor:pointer;font-size:13px}@media(max-width:650px){.statgrid{gap:7px}.statgrid>div{padding:12px 8px}.statgrid strong{font-size:26px}}

header{justify-content:center}.intro{display:flex;align-items:center;justify-content:space-between;gap:18px}#addcharacter{white-space:nowrap;padding:12px 18px}@media(max-width:650px){#addcharacter{font-size:12px;padding:11px 12px}.intro{gap:12px}}

nav{justify-content:center}

/* Prevent recognition results from enlarging their parent grid tracks. */
.drawlayout{grid-template-columns:repeat(2,minmax(0,1fr))}.drawlayout>*,.results,#candidates,.candidate,.candidate>span{min-width:0}#candidates{grid-template-columns:repeat(2,minmax(0,1fr))}.candidate{width:100%;max-width:100%;grid-template-columns:44px minmax(0,1fr);overflow:hidden}.candidate .translation{overflow-wrap:anywhere;word-break:normal}.tools{flex-wrap:wrap}.searchrow{flex-wrap:wrap}.searchrow input{flex:1 1 130px;width:auto}.card{min-width:0;overflow-wrap:anywhere}.card .tools{justify-content:flex-start}#primaryaction{white-space:nowrap;padding:12px 18px}.wordcompose{margin:16px 0}.checklabel{display:flex;align-items:center;gap:8px;line-height:1.4}.checklabel input{width:auto;flex:0 0 auto}#wordbuilder{background:#f3f6ed;border:1px solid var(--line);border-radius:10px;padding:12px}#worddraft{font:34px serif;letter-spacing:8px}#wordreset{float:right;font-size:11px;padding:6px 9px}#wordbuilder .hint{clear:both;margin-bottom:0}@media(max-width:650px){.drawlayout{grid-template-columns:minmax(0,1fr)}#primaryaction{font-size:12px;padding:11px 12px}.tools button{max-width:100%}#options{grid-template-columns:repeat(2,minmax(0,1fr))}#options button{overflow-wrap:anywhere}}

.candidate.wordcandidate{grid-template-columns:58px minmax(0,1fr)}.wordcandidate .glyph{font-size:27px}@media(max-width:650px){.card .glyph{font-size:clamp(30px,7vw,54px)}}