body{margin:0}#root{min-height:100vh}:root{--ink:#1c1917;--ink-soft:#44403c;--paper:#eef2f0;--panel:#f7faf8;--line:#c5d0c8;--accent:#9f1239;--accent-soft:#fff1f2;--good:#166534;--ok:#a16207;--try:#9f1239;--shadow:0 18px 40px #1c191714;--radius:18px;--font-display:"Noto Serif SC", "Songti SC", "STSong", serif;--font-body:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%, #9f123914, transparent 55%), radial-gradient(900px 500px at 100% 0%, #16653412, transparent 50%), linear-gradient(180deg, #e7ece9 0%, var(--paper) 40%, #e4ebe7 100%);-webkit-font-smoothing:antialiased}button,input{font:inherit}.app{width:min(720px,100%);margin:0 auto;padding:28px 18px 48px}.hero{padding:28px 8px 12px;animation:.7s both rise}.brand{font-family:var(--font-display);letter-spacing:.18em;color:var(--accent);margin:0 0 10px;font-size:2rem}.hero h1{font-family:var(--font-display);letter-spacing:.04em;margin:0;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:700}.lede{color:var(--ink-soft);max-width:28em;margin:12px 0 0;line-height:1.6}.panel{background:color-mix(in srgb, var(--panel) 92%, white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:22px;padding:18px;animation:.7s 80ms both rise}.panel h2,.history h3{letter-spacing:.12em;color:var(--ink-soft);margin:0 0 14px;font-size:.95rem;font-weight:600}.option-grid{gap:10px;display:grid}.option-card{text-align:left;border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:14px;padding:14px 16px;transition:border-color .2s,transform .2s,background .2s}.option-card strong{font-family:var(--font-display);margin-bottom:4px;font-size:1.15rem;display:block}.option-card span{color:var(--ink-soft);font-size:.9rem}.option-card:hover,.chip:hover,.grade-btn:hover{transform:translateY(-1px)}.option-card.active,.chip.active,.grade-btn.active{border-color:var(--accent);background:var(--accent-soft)}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:999px;padding:8px 14px}.grade-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:14px;display:grid}.grade-btn{text-align:left;border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;padding:10px 12px}.grade-btn strong{font-size:.95rem;display:block}.grade-btn span{color:var(--ink-soft);margin-top:4px;font-size:.75rem;line-height:1.35;display:block}.field{gap:8px;margin-top:14px;display:grid}.field span{color:var(--ink-soft);font-size:.9rem}.field input{border:1px solid var(--line);letter-spacing:.12em;background:#fff;border-radius:12px;padding:12px 14px;font-size:1.2rem}.btn{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;padding:10px 16px}.btn.primary{background:var(--ink);color:#fafaf9;border-color:var(--ink)}.btn.primary.start{letter-spacing:.2em;width:100%;margin-top:22px;padding:16px;font-size:1.05rem;animation:.7s .16s both rise}.btn.ghost{background:0 0}.foot{color:#78716c;margin-top:28px;font-size:.78rem;line-height:1.5}.practice{padding-top:12px}.practice-bar{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:18px;display:grid}.practice-title{text-align:center;font-family:var(--font-display);font-size:1.35rem}.practice-title small{font-family:var(--font-body);color:var(--ink-soft);letter-spacing:.08em;margin-top:2px;font-size:.78rem;display:block}.spacer{width:64px}.practice-main{justify-items:center;gap:16px;display:grid}.writer-wrap,.stroke-panel{justify-items:center;gap:12px;width:100%;display:grid}.writer-stage{box-shadow:var(--shadow);touch-action:none;border-radius:16px;position:relative;overflow:hidden}.practice-grid{display:block}.writer-target,.stroke-canvas{touch-action:none;position:absolute;inset:0}.writer-meta{width:min(340px,100%);color:var(--ink-soft);justify-content:space-between;font-size:.9rem;display:flex}.writer-actions{gap:8px;display:flex}.stroke-list{gap:8px;width:100%;padding-bottom:4px;display:flex;overflow-x:auto}.stroke-chip{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;flex:none;gap:2px;min-width:72px;padding:10px 12px;display:grid}.stroke-chip span{color:var(--ink-soft);font-size:.75rem}.stroke-chip.active{border-color:var(--accent);background:var(--accent-soft)}.stroke-hint{text-align:center;max-width:340px;color:var(--ink-soft);margin:0;font-size:.92rem;line-height:1.5}.score-card{border:1px solid var(--line);background:#fff;border-radius:16px;align-items:center;gap:14px;width:min(340px,100%);padding:14px 16px;animation:.35s both pop;display:flex}.score-num{font-family:var(--font-display);min-width:72px;font-size:2.4rem;line-height:1}.score-card p{color:var(--ink-soft);margin:4px 0 0;font-size:.88rem}.score-card.good .score-num{color:var(--good)}.score-card.ok .score-num{color:var(--ok)}.score-card.try .score-num{color:var(--try)}.history{width:min(340px,100%)}.history ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.history li{border:1px solid var(--line);background:#ffffffb3;border-radius:10px;justify-content:space-between;padding:8px 12px;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@media (width>=720px){.option-grid{grid-template-columns:repeat(3,1fr)}.option-grid.two{grid-template-columns:repeat(2,1fr)}}.option-grid.two,.option-grid.three{grid-template-columns:1fr}@media (width>=720px){.option-grid.two{grid-template-columns:repeat(2,1fr)}.option-grid.three{grid-template-columns:repeat(3,1fr)}}.four-line{aspect-ratio:100/55;width:100%;position:relative}.four-line-svg{width:100%;height:100%;display:block}.four-line-content{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.pinyin-panel{justify-items:center;gap:12px;width:100%;display:grid}.chip-row.wrap{flex-wrap:wrap;justify-content:center}.py-opacity{width:min(340px,100%)}.pinyin-stage{position:relative}.pinyin-guide{color:#2563eb;letter-spacing:.04em;pointer-events:none;z-index:1;place-items:center;padding-bottom:2%;font-family:Segoe UI,Arial,PingFang SC,sans-serif;font-size:42%;font-weight:600;display:grid;position:absolute;inset:0}.py-chip-text{letter-spacing:.02em;font-family:Segoe UI,Arial,sans-serif;font-size:1.05rem;font-weight:600}.pinyin-pick-grid{grid-template-columns:repeat(4,1fr);max-height:220px}.pinyin-row{margin-bottom:1.5mm}.sheet-four{width:100%}.py-glyph{letter-spacing:.03em;padding-bottom:4%;font-family:Segoe UI,Arial,PingFang SC,sans-serif;font-size:clamp(14px,4.2vw,22px);font-weight:600;line-height:1}.py-glyph.solid{color:#1c1917}.pinyin-block .char-block-label strong{letter-spacing:.06em;font-family:Segoe UI,Arial,sans-serif}.option-card.feature strong{font-size:1.25rem}.home-history-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.home-history-list li{border:1px solid var(--line);background:#fff;border-radius:10px;justify-content:space-between;padding:8px 12px;display:flex}.btn:disabled{opacity:.45;cursor:not-allowed}.print-app{background:#e7ece9;grid-template-columns:minmax(280px,340px) 1fr;min-height:100vh;display:grid}.print-controls{background:color-mix(in srgb, var(--panel) 94%, white);border-right:1px solid var(--line);align-self:start;max-height:100vh;padding:16px;position:sticky;top:0;overflow:auto}.print-controls-head{align-items:flex-start;gap:10px;margin-bottom:14px;display:flex}.print-controls-head strong{font-family:var(--font-display);font-size:1.2rem;display:block}.print-controls-head p{color:var(--ink-soft);margin:4px 0 0;font-size:.82rem;line-height:1.45}.ctrl-block{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}.ctrl-block h3,.ctrl-label{letter-spacing:.1em;color:var(--ink-soft);margin:0 0 8px;font-size:.82rem}.ctrl-label{margin-top:12px}.option-grid.stack{grid-template-columns:1fr}.grade-grid.compact{grid-template-columns:repeat(2,1fr)}.field.inline{grid-template-columns:64px 1fr auto;align-items:center;margin-top:10px}.field.inline em{text-align:right;min-width:1.5em;font-style:normal}.field textarea{border:1px solid var(--line);resize:vertical;letter-spacing:.12em;font-size:1.15rem;font-family:var(--font-display);border-radius:12px;padding:10px 12px}.check-row{color:var(--ink-soft);align-items:center;gap:8px;margin-top:10px;font-size:.9rem;display:flex}.chip.swatch:before{content:"";background:var(--swatch);vertical-align:-.05em;border-radius:50%;width:.7em;height:.7em;margin-right:6px;display:inline-block}.print-actions{margin-top:18px;padding-bottom:24px}.print-actions .btn.primary{letter-spacing:.12em;width:100%;padding:14px}.print-actions .hint{color:#78716c;margin:10px 0 0;font-size:.78rem;line-height:1.5}.print-preview{padding:20px;overflow:auto}.preview-toolbar{color:var(--ink-soft);justify-content:space-between;align-items:center;margin-bottom:14px;font-size:.9rem;display:flex}.a4-stack{flex-direction:column;align-items:center;gap:16px;display:flex}.sheet-loading{color:var(--ink-soft);font-size:.9rem}.a4-page{color:#1c1917;width:210mm;min-height:297mm;box-shadow:var(--shadow);box-sizing:border-box;background:#fff;padding:12mm 12mm 10mm}.a4-page.empty{color:#78716c;place-items:center;display:grid}.a4-header h1{text-align:center;font-family:var(--font-display);letter-spacing:.2em;margin:0;font-size:16pt;font-weight:700}.a4-info{color:#44403c;justify-content:space-between;margin-top:8px;font-size:10pt;display:flex}.a4-body{margin-top:8mm}.char-block{break-inside:avoid;page-break-inside:avoid;margin-bottom:5mm}.char-block-label{justify-content:space-between;align-items:baseline;margin-bottom:2mm;font-size:9pt;display:flex}.char-block-label strong{font-family:var(--font-display);letter-spacing:.15em;font-size:12pt}.char-block-label .muted,.char-block-label span{color:#78716c}.sheet-row{gap:0;margin-bottom:0;display:grid}.sheet-cell{aspect-ratio:1;width:100%;position:relative}.sheet-cell-grid{width:100%;height:100%;display:block}.sheet-cell-content{pointer-events:none;place-items:center;display:grid;position:absolute;inset:6%}.stroke-glyph,.font-glyph{width:100%;height:100%}.font-glyph{place-items:center;font-family:KaiTi,STKaiti,Noto Serif SC,serif;font-size:78%;line-height:1;display:grid}.a4-footer{text-align:center;color:#a8a29e;margin-top:6mm;font-size:8pt}.kind-tabs{margin-bottom:4px}.pen-select-actions{flex-wrap:wrap;gap:6px;margin:8px 0;display:flex}.pen-pattern-grid{grid-template-columns:repeat(3,1fr);gap:8px;max-height:280px;padding:2px;display:grid;overflow:auto}.pen-pick{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;justify-items:center;gap:4px;padding:8px 6px;display:grid}.pen-pick.active{border-color:var(--accent);background:var(--accent-soft)}.pen-pick-preview{width:48px;height:48px;display:block}.pen-pick-preview .pen-guide{width:100%;height:100%}.pen-pick strong{font-size:.82rem}.hint.tight{color:#78716c;margin:8px 0 0;font-size:.75rem}.pen-cat{color:#78716c;letter-spacing:0;font-weight:400}.pen-guide-layer{pointer-events:none;z-index:1;position:absolute;inset:0}.pen-guide-layer .pen-guide{width:100%;height:100%}.stroke-canvas{z-index:2}.pen-guide{width:100%;height:100%;display:block}@media (width<=960px){.print-app{grid-template-columns:1fr}.print-controls{border-right:none;border-bottom:1px solid var(--line);max-height:none;position:relative}.a4-page{width:100%;min-height:auto;padding:16px}}@page{size:A4 portrait;margin:0}@media print{body{background:#fff!important}.no-print{display:none!important}.print-app{background:#fff;display:block}.print-preview{padding:0}.a4-stack{gap:0}.a4-page{width:210mm;min-height:297mm;box-shadow:none;page-break-after:always;margin:0;padding:12mm}.a4-page:last-child{page-break-after:auto}}