:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--app-bg:#efe7d7;--app-ink:#18352d;--app-muted:#61756e;--panel-surface:#fffbf4d1;--panel-border:#18352d1f;--accent:#b64028;--accent-strong:#94331f;--shadow:0 26px 60px #1c292326;--worksheet-grid:#ef6659;--worksheet-guide:#4242421a}*{box-sizing:border-box}html{font-size:16px}body{min-height:100vh;color:var(--app-ink);background:radial-gradient(circle at top left, #f7d07f73, transparent 28%), radial-gradient(circle at right 10%, #385e4f33, transparent 26%), linear-gradient(180deg, #f8f1e4 0%, var(--app-bg) 100%);margin:0;font-family:Avenir Next,Helvetica Neue,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}#app{min-height:100vh}.app-shell{grid-template-columns:minmax(320px,380px) minmax(0,1fr);min-height:100vh;display:grid}.controls-panel{background:var(--panel-surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-right:1px solid var(--panel-border);align-self:start;height:100vh;padding:28px 24px 36px;position:sticky;top:0;overflow-y:auto}.panel-hero{margin-bottom:28px}.panel-kicker,.toolbar-kicker{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;font-size:.82rem;font-weight:700}.panel-hero h1,.empty-state h2{margin:0;font-family:Iowan Old Style,Palatino,serif;font-size:clamp(2rem,3vw,2.6rem);line-height:1}.panel-copy,.section-heading p,.empty-state p,.selection-summary{color:var(--app-muted);margin:0;line-height:1.5}.panel-contact{background:#ffffffa3;border:1px solid #b6402824;border-radius:16px;gap:4px;margin-top:18px;padding:14px 16px;display:grid}.panel-contact__label,.panel-contact__name,.panel-contact__link{margin:0}.panel-contact__label{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:700}.panel-contact__name{color:var(--app-ink);font-weight:600}.panel-contact__links{align-items:center;gap:12px;display:flex}.panel-contact__link{border-radius:999px;justify-content:center;align-items:center;width:2.1rem;height:2.1rem;text-decoration:none;transition:transform .16s,box-shadow .16s;display:inline-flex}.panel-contact__link svg{width:100%;height:100%;display:block}.panel-contact__link:hover{transform:translateY(-1px)}.panel-contact__link:focus-visible{outline-offset:3px;outline:2px solid #18352d73}.panel-section{margin-top:24px}.panel-section--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.field-group{gap:8px;display:grid}.field-label{color:var(--app-muted);margin-bottom:8px;font-size:.9rem;display:block}.checkbox-field{background:#ffffffa6;border:1px solid #18352d1a;border-radius:16px;align-self:end;align-items:center;gap:10px;padding:14px 16px;display:inline-flex}.text-input,.words-input{width:100%;color:var(--app-ink);background:#ffffffe0;border:1px solid #18352d1f;border-radius:16px;transition:border-color .16s,box-shadow .16s,transform .16s}.text-input{min-height:48px;padding:0 14px}.words-input{resize:vertical;min-height:220px;padding:14px;font-family:SF Mono,Menlo,monospace;line-height:1.5}.text-input:focus,.words-input:focus{border-color:#b6402861;outline:none;box-shadow:0 0 0 4px #b640281a}.section-heading{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px;display:flex}.section-heading h2{margin:0 0 4px;font-size:1.05rem}.button-row{flex-wrap:wrap;gap:10px;display:flex}.button-row--tight{justify-content:flex-end}.primary-button,.secondary-button,.word-chip{border:0;border-radius:999px;transition:transform .16s,box-shadow .16s,background-color .16s}.primary-button,.secondary-button{min-height:46px;padding:0 18px;font-weight:700}.primary-button:disabled,.secondary-button:disabled{cursor:default;opacity:.72;box-shadow:none;transform:none}.primary-button{color:#fff7f2;background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);box-shadow:0 14px 26px #94331f47}.secondary-button{color:var(--app-ink);background:#fffdf9;box-shadow:0 10px 18px #18352d14}.primary-button:hover,.secondary-button:hover,.word-chip:hover{transform:translateY(-1px)}.word-bank{flex-wrap:wrap;gap:10px;max-height:280px;margin-top:12px;padding-right:4px;display:flex;overflow-y:auto}.word-chip{color:var(--app-ink);background:#ffffffeb;padding:9px 14px;font-family:Songti SC,STSong,Noto Serif CJK SC,serif;font-size:1.1rem;box-shadow:0 8px 18px #18352d0f}.word-chip.is-selected{color:#fffefb;background:var(--app-ink)}.empty-word-bank{color:var(--app-muted);margin:8px 0 0}.workspace{padding:26px 28px 40px}.workspace-toolbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.export-error{color:var(--accent-strong);margin-top:8px;font-size:.92rem}.animation-modal-backdrop{z-index:39;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#18352d47;position:fixed;inset:0}.word-animation-panel{width:min(100%,760px);box-shadow:var(--shadow);background:#ffffffe0;border-radius:18px;gap:12px;margin:0 auto 16px;padding:14px 16px;display:grid}.word-animation-panel--modal{z-index:40;overscroll-behavior:contain;width:min(100vw - 24px,760px);max-height:calc(100vh - 24px);margin:0;position:fixed;top:12px;left:50%;overflow:auto;transform:translate(-50%);box-shadow:0 32px 90px #1c29233d}.word-animation-panel__header{justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.word-animation-panel__meta{gap:4px;display:grid}.word-animation-panel__copy,.word-animation-panel__pinyin,.word-animation-panel__empty,.word-animation-card__count{color:var(--app-muted);margin:0;font-size:.92rem;line-height:1.4}.word-animation-panel__controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.word-animation-panel__status{color:var(--app-muted);margin:0;font-size:.86rem;line-height:1.4}.word-animation-panel__status--error{color:var(--accent-strong)}.word-animation-panel__input{width:min(100%,240px);min-height:42px}.word-animation-panel__preview{background:radial-gradient(circle at 100% 0,#b6402814,#0000 28%),linear-gradient(#f8f1e4db 0%,#fffffff0 100%);border:1px solid #18352d14;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.word-animation-panel__preview.is-empty{justify-content:center;place-items:center;min-height:96px}.word-animation-panel__summary{flex-wrap:wrap;flex:none;align-items:baseline;gap:8px;display:flex}.word-animation-panel__word,.word-animation-card__character{margin:0;font-family:Songti SC,STSong,Noto Serif CJK SC,serif}.word-animation-panel__word{font-size:clamp(1.15rem,1.8vw,1.5rem)}.word-animation-panel__body{flex:auto;gap:10px;padding-bottom:2px;display:flex;overflow:auto hidden}.word-animation-panel__body--export{padding-bottom:0;overflow:visible}.word-animation-panel__body--export .word-animation-card{width:auto;box-shadow:none;background:0 0;gap:0;padding:0}.word-animation-panel__body--export .word-animation-card__header{display:none}.word-animation-card{background:#fffffff0;border-radius:14px;flex:none;gap:8px;width:118px;padding:10px;display:grid;box-shadow:inset 0 0 0 1px #18352d14}.word-animation-card__header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.word-animation-card__character{font-size:1.15rem}.word-animation-card__canvas{aspect-ratio:1;background:linear-gradient(#ef66592e 0 0) 50%/1px 100% no-repeat,linear-gradient(90deg,#ef66592e 0 0) 50%/100% 1px no-repeat,#fffdfa;border-radius:12px;place-items:center;display:grid;position:relative;box-shadow:inset 0 0 0 1px #ef665973}.word-animation-card__svg{width:72%;height:72%;overflow:visible}.word-animation-card__svg path{fill:#111}.word-animation-card__fallback{color:#1f1f1f;font-family:Songti SC,STSong,Noto Serif CJK SC,serif;font-size:2.75rem;line-height:1;position:absolute}.preview{gap:24px;display:grid}.preview--exporting{gap:0}.worksheet-page,.empty-state{width:min(100%,860px);margin:0 auto}.worksheet-page{box-shadow:var(--shadow);background:#fff;border-radius:20px;padding:30px 28px 18px}.page-header{border-bottom:1px solid #37373799;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;padding-bottom:8px;font-family:Songti SC,STSong,Noto Serif CJK SC,serif;display:grid}.page-header__name,.page-header__page,.worksheet-row__meta{margin:0}.page-header__name,.page-header__page{font-size:1rem}.page-header__page{text-align:right}.page-header__title{text-align:center;letter-spacing:.08em;margin:0;font-family:Courier New,monospace;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:400}.page-rows{gap:10px;margin-top:10px;display:grid}.worksheet-row{gap:4px;display:grid}.worksheet-row__meta{align-items:flex-end;gap:12px;min-width:0;min-height:0;font-family:Avenir Next,Helvetica Neue,sans-serif;display:flex}.worksheet-row__pinyin{color:#3d3d3d;white-space:nowrap;flex:none;margin:0;font-size:.95rem;line-height:1}.worksheet-row__stroke-guide{white-space:nowrap;flex-wrap:nowrap;flex:auto;align-items:flex-end;gap:8px 12px;min-width:0;min-height:1.35rem;display:flex;overflow:auto hidden}.stroke-guide__character{flex-wrap:nowrap;flex:none;align-items:flex-end;gap:4px;max-width:100%;display:flex}.stroke-guide__animation,.stroke-guide__step,.stroke-guide__fallback{place-items:center;width:22px;height:22px;display:grid}.stroke-guide__animation{background:#c15f3414;border-radius:8px;width:28px;height:28px;padding:2px;box-shadow:inset 0 0 0 1px #c15f342e}.stroke-guide__svg{width:100%;height:100%;overflow:visible}.stroke-guide__svg--animation{filter:drop-shadow(0 1px #00000014)}.stroke-guide__svg path{fill:#111}.stroke-guide__fallback{color:#1f1f1f;font-family:Songti SC,STSong,Noto Serif CJK SC,serif;font-size:1.15rem;line-height:1}.practice-strip{grid-template-columns:repeat(var(--box-count), minmax(0, 1fr));border-top:1px solid var(--worksheet-grid);border-left:1px solid var(--worksheet-grid);display:grid}.practice-cell{aspect-ratio:1;border-right:1px solid var(--worksheet-grid);border-bottom:1px solid var(--worksheet-grid);color:#0000;place-items:center;font-family:Songti SC,STSong,Noto Serif CJK SC,serif;font-size:54px;line-height:1;display:grid;position:relative;overflow:hidden}.practice-cell__guides{pointer-events:none;display:block;position:absolute;inset:0}.practice-cell__guide{background:#4242421f;position:absolute}.practice-cell__guide--vertical{width:1px;top:0;bottom:0;left:50%;transform:translate(-.5px)}.practice-cell__guide--horizontal{height:1px;top:50%;left:0;right:0;transform:translateY(-.5px)}.practice-cell__guide--diagonal{transform-origin:50%;width:141.6%;height:1px;top:50%;left:-20.8%;transform:translateY(-.5px)rotate(45deg)}.practice-cell__text{z-index:1;white-space:nowrap;text-align:center;max-width:calc(100% - 6px);line-height:1;display:inline-block;position:relative}.practice-cell--model{color:#111}.practice-cell--trace{color:#00000024}.page-footer{text-align:center;color:#716b64;margin:8px 0 0;font-size:.82rem}.empty-state{box-shadow:var(--shadow);background:#ffffffd1;border-radius:20px;padding:32px}@media (width<=1180px){.app-shell{grid-template-columns:1fr}.controls-panel{border-right:0;border-bottom:1px solid var(--panel-border);height:auto;position:static}.workspace{padding-top:20px}.word-animation-panel__header{flex-direction:column}.word-animation-panel__controls{justify-content:stretch;width:100%}.word-animation-panel__input{width:100%}}@media (width<=720px){.controls-panel,.workspace{padding-left:16px;padding-right:16px}.panel-section--grid{grid-template-columns:1fr}.section-heading,.workspace-toolbar{flex-direction:column;align-items:stretch}.word-animation-panel{padding:14px 12px}.word-animation-panel--modal{width:min(100vw - 20px,760px);max-height:calc(100vh - 20px);top:10px}.word-animation-panel__header,.word-animation-panel__preview{flex-direction:column;align-items:stretch}.word-animation-panel__preview{padding:12px}.word-animation-panel__body{gap:8px}.worksheet-page{padding:18px 14px 14px}.page-header{grid-template-columns:1fr;gap:6px}.page-header__title,.page-header__page{text-align:left}.worksheet-row__meta{gap:10px}.worksheet-row__stroke-guide{gap:6px 10px}.stroke-guide__animation,.stroke-guide__step,.stroke-guide__fallback{width:18px;height:18px}.stroke-guide__animation{border-radius:6px;width:22px;height:22px}}@media print{@page{size:A4 portrait;margin:0}body{background:#fff}.controls-panel,.workspace-toolbar,.word-animation-panel{display:none}.workspace{padding:0}.preview{gap:0}.worksheet-page{width:210mm;min-height:297mm;box-shadow:none;page-break-after:always;break-after:page;border-radius:0;margin:0;padding:12mm 10mm 8mm}.worksheet-page:last-child{page-break-after:auto;break-after:auto}.practice-cell,.practice-strip{-webkit-print-color-adjust:exact;print-color-adjust:exact}.stroke-guide__animation{display:none}}.preview--exporting .worksheet-page{width:210mm;min-height:297mm;box-shadow:none;page-break-after:always;break-after:page;border-radius:0;margin:0;padding:12mm 10mm 8mm}.preview--exporting .worksheet-page:last-child{page-break-after:auto;break-after:auto}.preview--exporting .practice-cell__guide{background:#4242422e}.preview--exporting .practice-cell__guide--vertical{width:1.4px}.preview--exporting .practice-cell__guide--horizontal,.preview--exporting .practice-cell__guide--diagonal{height:1.4px}.preview--exporting .stroke-guide__animation{display:none}