:root{color-scheme:light;--ink: #18232b;--muted: #66737d;--line: #d8e0e5;--soft-line: #e9eef1;--surface: #eef2f5;--panel: #ffffff;--paper: #ffffff;--accent: #176b87;--accent-dark: #10566d;--accent-soft: #e7f2f5;--warm: #d9480f;--stroke-active: #202b33;--stroke-done: #b7c0c7;--trace-color: #d8dde1;--preview-scale: .7;--kai-font: "Kaiti SC", STKaiti, KaiTi, "AR PL UKai CN", "Noto Serif CJK SC", serif}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;overflow:hidden;background:var(--surface);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}button,input,select,textarea{font:inherit}button,select,input[type=checkbox],input[type=radio],input[type=range]{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(23,107,135,.2);outline-offset:1px}.app-bar{position:sticky;z-index:50;top:0;display:grid;grid-template-columns:380px minmax(0,1fr) auto;align-items:center;min-height:58px;padding:0 18px;border-bottom:1px solid var(--line);background:#fffffff7}.app-title,.app-actions,.zoom-control,.summary-group{display:flex;align-items:center}.app-title{gap:10px;font-size:18px}.app-mark{display:block;width:32px;height:32px;border-radius:7px;flex:0 0 auto;object-fit:cover}.app-status{overflow:hidden;padding-left:22px;color:var(--muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.app-actions{gap:8px}.button,.icon-button{min-height:38px;border:1px solid transparent;border-radius:7px;padding:8px 13px;font-weight:650}.button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.button.primary:hover{background:var(--accent-dark)}.button.secondary{border-color:#b9c9d0;background:#fff;color:#23404d}.button.quiet,.icon-button{border-color:transparent;background:transparent;color:#4a5963}.button.quiet:hover,.icon-button:hover{background:#f0f4f6}.mobile-settings,.drawer-head{display:none}.app-shell{display:grid;grid-template-columns:380px minmax(0,1fr);height:calc(100vh - 58px)}.controls{height:100%;overflow:auto;overscroll-behavior:contain;border-right:1px solid var(--line);background:var(--panel)}.control-section{padding:20px 22px;border-bottom:1px solid var(--soft-line)}.control-section h2{margin:0;font-size:14px;letter-spacing:0}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.section-heading span,.drawer-head span,.summary-group span{color:var(--muted);font-size:12px}.field{margin:0;color:#41515c;font-size:13px;font-weight:600}.field input[type=text],.field input:not([type]),.field input[type=date],.field input[type=number],.field select,.field textarea,.inline-action select{width:100%;min-width:0;min-height:40px;border:1px solid var(--line);border-radius:7px;padding:8px 10px;background:#fff;color:var(--ink)}.field select,.inline-action select{padding:8px 32px 8px 10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.field input[type=date]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:8px 32px 8px 10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='1' y='2.5' width='12' height='10.5' rx='1.5' fill='none' stroke='%23888' stroke-width='1'/%3E%3Cline x1='1' y1='5.5' x2='13' y2='5.5' stroke='%23888' stroke-width='1'/%3E%3Cline x1='4' y1='1' x2='4' y2='3.5' stroke='%23888' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='10' y1='1' x2='10' y2='3.5' stroke='%23888' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center}.field input[type=date]::-webkit-calendar-picker-indicator{position:absolute;right:0;width:32px;opacity:0;cursor:pointer}.field textarea{min-height:108px;resize:vertical;line-height:1.65}.field input[type=range]{width:100%;accent-color:var(--accent)}.stepper{display:grid;width:100%;min-width:0;min-height:40px;grid-template-columns:40px minmax(0,1fr) 40px;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:#fff}.stepper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #176b871f}.stepper-button{min-width:0;min-height:38px;border:0;padding:0;background:#f6f9fa;color:#344650;font-size:20px;font-weight:500;line-height:1}.stepper-button:first-child{border-right:1px solid var(--line)}.stepper-button:last-child{border-left:1px solid var(--line)}.stepper-button:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-dark)}.stepper-button:disabled{cursor:not-allowed;color:#aeb7bd;background:#fafbfc}.field .stepper-input{width:100%;min-width:0;min-height:38px;appearance:textfield;border:0;border-radius:0;padding:7px 4px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums;text-align:center}.field .stepper-input:focus-visible{outline:0}.stepper-input::-webkit-inner-spin-button,.stepper-input::-webkit-outer-spin-button{margin:0;appearance:none}.color-field input[type=color]{width:100%;height:40px;border:1px solid var(--line);border-radius:7px;padding:4px;background:#fff}.range-label{display:flex;justify-content:space-between}.range-label output{color:var(--accent);font-variant-numeric:tabular-nums}.field-grid,.check-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}.inline-action{margin:0}.inline-action select{flex:1}.inline-action .button{flex:0 0 auto;min-height:40px;padding-inline:10px}.check{display:flex;min-height:36px;align-items:center;gap:8px;color:#41515c;font-size:13px}.check input{width:17px;height:17px;accent-color:var(--accent)}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:6px}.template-segmented{grid-template-columns:repeat(2,minmax(0,1fr))}.paper-size-segmented{grid-template-columns:repeat(4,minmax(0,1fr))}.rows-segmented{grid-template-columns:repeat(6,minmax(0,1fr))}.header-preset-segmented{grid-template-columns:repeat(5,minmax(0,1fr))}.footer-preset-segmented,.trace-mode-segmented{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.segmented label{position:relative}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented label>span{display:grid;min-height:40px;place-items:center;border:1px solid var(--line);border-radius:7px;color:#44535d;font-size:13px;font-weight:650}.segmented label:hover>span{border-color:#aebdc5;background:#f7fafb}.segmented input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}.segmented input:focus-visible+span{outline:3px solid rgba(23,107,135,.2);outline-offset:1px}.orientation-segmented label>span{grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;padding-inline:4px}.orientation-icon{display:inline-block;border:1.5px solid currentColor;border-radius:1px;margin:1px 2px 1px 0}.zoom-reset{min-width:32px;min-height:32px;padding:0;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}.portrait-icon{width:12px;height:17px}.landscape-icon{width:19px;height:13px}.content-action-btn{min-height:40px;padding:6px 12px;font-size:13px;white-space:nowrap}.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.blank-only,.stroke-only{display:none}body[data-template=blank] .blank-only{display:grid}body[data-template=blank] .practice-settings,body[data-template=blank] .standard-only,body[data-template=blank] .stroke-options,body[data-template=blank] .trace-style,body[data-template=stroke] .standard-only,body[data-template=stroke] .trace-style,body[data-template=copy] .practice-settings,body[data-template=copy] .content-options{display:none}body[data-template=stroke] .stroke-only{display:grid}.stroke-only-color{display:none}body[data-template=stroke] .stroke-only-color{display:flex}.guide-only-color{display:none}body[data-template=trace] .guide-only-color{display:flex}.preview-wrap{min-width:0;height:100%;overflow:auto;overscroll-behavior:contain;padding:18px 20px 48px}.preview-toolbar{position:sticky;z-index:20;top:0;display:flex;max-width:1180px;min-height:42px;align-items:center;justify-content:space-between;gap:16px;margin:0 auto 18px;padding:6px 10px;border:1px solid rgba(216,224,229,.9);border-radius:7px;background:#ffffffeb;backdrop-filter:blur(10px)}.summary-group{min-width:0;gap:10px}.summary-group strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.summary-group strong[data-state=loading]{color:var(--accent-dark)}#dataStatus{display:inline-flex;align-items:center;gap:6px}#dataStatus[data-state=loading]{color:var(--accent-dark);font-weight:650}#dataStatus[data-state=loading]:before{width:11px;height:11px;border:2px solid #b8d2db;border-top-color:var(--accent);border-radius:50%;content:"";animation:loading-spin .8s linear infinite}#dataStatus[data-state=error]{color:#9a3518;font-weight:650}.zoom-control{flex:0 0 auto;gap:8px;color:var(--muted);font-size:12px}.zoom-control input{width:100px;accent-color:var(--accent)}.zoom-control output{width:34px;color:var(--ink);font-variant-numeric:tabular-nums}.pages{display:grid;width:max-content;min-width:100%;justify-items:center;gap:22px}.page-shell{position:relative;flex:0 0 auto}.page{position:absolute;top:0;left:0;width:var(--paper-width);height:var(--paper-height);overflow:hidden;padding:var(--page-margin);transform:scale(var(--preview-scale));transform-origin:top left;background:var(--paper);box-shadow:0 15px 38px #1e2d372b,0 1px 2px #1e2d3729;color:#20282e;font-family:var(--kai-font)}.page-header{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:14mm;align-items:center;gap:8mm;margin-bottom:4mm;border-bottom:.3mm solid #cfd7dc}.page-header.expanded-header{grid-template-columns:minmax(0,1fr);min-height:24mm;align-content:start;gap:2mm;padding:1mm 0 3mm}.page-header h2{overflow:hidden;margin:0;font-size:17px;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.page-meta{display:flex;align-items:end;gap:4mm;color:#58656d;font-size:11px}.meta-field{display:grid;flex:1 1 0;min-width:24mm;gap:.5mm;white-space:nowrap}.meta-write{display:block;min-height:5mm;overflow:hidden;border-bottom:.3mm solid #8d989f;padding:0 1mm .8mm;color:#303b42;text-overflow:ellipsis}.page-footer{position:absolute;right:var(--page-margin);bottom:3.5mm;left:var(--page-margin);color:#8a949b;font-size:9px;pointer-events:none}.page-footer.footer-right{text-align:right}.page-footer.footer-center{text-align:center}.practice-list,.stroke-list{display:grid;gap:var(--row-gap-mm, 4.5mm)}.char-row{display:grid;grid-template-columns:15mm minmax(0,1fr);align-items:center;gap:2.5mm;min-width:0}.char-row.no-row-guide{grid-template-columns:minmax(0,1fr);gap:0}.char-info{display:grid;height:var(--cell-mm);align-content:center;min-width:0;justify-items:center;gap:0;overflow:hidden}.char-info strong{font-size:var(--guide-char-px, 20px);line-height:1}.pinyin{min-height:var(--guide-pinyin-px, 10px);color:#64727b;font-size:var(--guide-pinyin-px, 10px);line-height:1}.hanzi-cell{display:block;width:var(--cell-mm, 21mm);height:var(--cell-mm, 21mm)}body[data-template=stroke] svg.hanzi-cell{cursor:pointer}body[data-template=stroke] svg.hanzi-cell:hover{outline:2px solid var(--accent);outline-offset:2px}.exercise-strip{display:grid;grid-auto-flow:column;grid-auto-columns:var(--cell-mm);justify-content:start;gap:var(--cell-gap-mm, 2mm);min-width:0;overflow:hidden}.stroke-card{display:grid;grid-template-columns:32mm minmax(0,1fr);min-height:48mm;align-items:center;gap:6mm;padding-bottom:4mm;border-bottom:.25mm solid #dfe5e9}.stroke-main{display:grid;justify-items:center;gap:1.5mm}.stroke-main .hanzi-cell{width:30mm;height:30mm}.stroke-main strong{font-size:11px}.step-grid{display:grid;grid-template-columns:repeat(var(--step-columns, 1),16mm);align-content:center;justify-content:start;gap:2.5mm}.step-item{display:grid;grid-template-rows:16mm 3mm;justify-items:center;gap:1mm;color:#6a767e;font-size:8px}.step-item .hanzi-cell{width:16mm;height:16mm}.step-item span{line-height:3mm}.loading-card{min-height:36mm;align-content:center;justify-items:center;border:.3mm dashed #cbd4da;color:#68757d}.loading-card strong{font-size:30px}.blank-grid{display:grid;grid-template-columns:repeat(var(--blank-columns),var(--cell-mm));column-gap:var(--cell-gap-mm, 0mm);row-gap:var(--row-gap-mm, 0mm);justify-content:center;align-content:start}.blank-grid .hanzi-cell{width:var(--cell-mm);height:var(--cell-mm)}.empty-page-message{display:grid;min-height:80mm;place-items:center;border:.35mm dashed #c9d2d8;color:#7a858c;font-size:13px}svg .grid-frame-line,svg .grid-cross-line,svg .grid-diagonal-line{fill:none;stroke-linecap:square;stroke-linejoin:miter}svg .grid-frame-line{stroke:var(--grid-frame-color, #aebac2);stroke-width:9}svg .grid-cross-line,svg .grid-diagonal-line{stroke-width:6;stroke-dasharray:25 22}svg .grid-cross-line{stroke:var(--grid-cross-color, #c9d2d8)}svg .grid-diagonal-line{stroke:var(--grid-diagonal-color, #d8c6c6)}svg .stroke{fill:var(--stroke-active)}svg .guide{fill:var(--guide-color)}svg .trace{fill:var(--trace-color, #d8dde1)}svg .done{fill:var(--stroke-done)}svg .start-dot{fill:var(--warm)}svg .median-arrow{fill:none;stroke:var(--warm);stroke-linecap:round;stroke-width:18}svg marker path{fill:var(--warm)}svg .order-label{fill:#fff;stroke:#17242c;stroke-width:8;paint-order:stroke;font-size:84px;font-weight:800;dominant-baseline:central;text-anchor:middle}svg .fallback-glyph,svg .copy-glyph{fill:var(--stroke-active);font-family:var(--kai-font);font-size:850px;font-weight:400;dominant-baseline:central;text-anchor:middle}svg .trace-glyph{fill:var(--trace-color, #d8dde1)}.pending-cell{opacity:1}.preview-data-state{display:grid;min-height:86mm;place-content:center;justify-items:center;gap:2.5mm;border:.3mm dashed #cbd6dc;color:#66757e;text-align:center}.preview-data-state strong{color:#273943;font-size:15px}.preview-data-state span:last-child{font-size:10px}.preview-error-mark{display:grid;width:8mm;height:8mm;place-items:center;border-radius:50%}.preview-error-mark{border:.5mm solid #d7a292;color:#9a3518;font-size:16px;font-weight:750}@keyframes loading-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){#dataStatus[data-state=loading]:before{animation:none}}.drawer-backdrop{display:none}.print-note,.export-status{position:fixed;z-index:100;right:18px;bottom:18px;max-width:420px;border:1px solid #b9c9d0;border-radius:7px;padding:12px 14px;background:#fff;box-shadow:0 8px 24px #1f2c3429;color:#33434d;font-size:13px;line-height:1.55}.export-status.error{border-color:#d9a192;color:#8f2f12}.app-actions .button[aria-busy=true]{cursor:wait;opacity:.78}[hidden]{display:none!important}@media(max-width:860px){body{overflow:hidden}.app-bar{grid-template-columns:auto minmax(0,1fr) auto;min-height:56px;padding:env(safe-area-inset-top) 10px 0}.app-title{gap:7px;font-size:16px}.app-mark{width:28px;height:28px;font-size:18px}.app-status{padding:0 8px;text-align:center}.app-actions{gap:2px}.app-actions .button{min-height:42px;padding:8px 10px}.install-button{display:none}.mobile-settings{display:inline-flex}.app-shell{display:block;height:calc(100dvh - 56px - env(safe-area-inset-top))}.controls{position:fixed;z-index:80;right:0;bottom:0;left:0;height:min(78dvh,720px);padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);border-right:0;border-radius:8px 8px 0 0;box-shadow:0 -14px 40px #1c283033;transform:translateY(105%);transition:transform .18s ease}.settings-open .controls{transform:translateY(0)}.drawer-head{position:sticky;z-index:2;top:0;display:flex;min-height:58px;align-items:center;justify-content:space-between;padding:9px 14px 9px 20px;border-bottom:1px solid var(--line);background:#fff}.drawer-head>div{display:grid;gap:3px}.icon-button{width:44px;height:44px;padding:0;font-size:26px}.drawer-backdrop{position:fixed;z-index:70;inset:0;display:block;border:0;background:#101c235c;opacity:0;pointer-events:none;transition:opacity .18s ease}.settings-open .drawer-backdrop{opacity:1;pointer-events:auto}.control-section{padding:18px 20px}.field input[type=text],.field input:not([type]),.field input[type=date],.field input[type=number],.field input[type=color],.field select,.field textarea,.inline-action select,.button,.segmented label>span{min-height:44px}.stepper,.stepper-button,.field .stepper-input{min-height:44px}.preview-wrap{height:100%;padding:10px 10px 44px}.preview-toolbar{min-height:40px;margin-bottom:12px;padding:5px 8px}.summary-group span,.zoom-control span,.zoom-control input{display:none}.zoom-control output{width:auto}.pages{gap:14px}}@media(max-width:430px){.app-status{display:none}.app-bar{grid-template-columns:minmax(0,1fr) auto}.app-actions .button{padding-inline:8px}.field-grid{grid-template-columns:1fr 1fr}.inline-action{display:grid;grid-template-columns:1fr 1fr}.inline-action select{grid-column:1 / -1}}@media print{html,body{width:auto;height:auto;overflow:visible;background:#fff}.app-bar,.controls,.drawer-backdrop,.preview-toolbar,.print-note,.export-status{display:none!important}.app-shell,.preview-wrap,.pages{display:block;width:auto;height:auto;overflow:visible;padding:0}.page-shell{width:var(--paper-width)!important;height:var(--paper-height)!important;break-after:page}.page-shell:last-child{break-after:auto}.page{position:relative;width:var(--paper-width);height:var(--paper-height);transform:none;box-shadow:none}}