@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap');
:root{--green:#356a57;--ink:#263b33;--muted:#8a948e;--line:#e5e9e3}*{box-sizing:border-box}body{margin:0;background:#f7f8f3;color:var(--ink);font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{transition:background .15s,transform .15s}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #94bc9c;outline-offset:3px}input:focus,textarea:focus,select:focus{outline:2px solid #b8cdbd;outline-offset:1px}a{color:inherit;text-decoration:none}.topbar{height:81px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;background:#fffefa}.brand{display:flex;align-items:center;gap:12px;font-size:20px;letter-spacing:2px;font-weight:650}.brand-icon{background:#356a57;color:white;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}.brand-sep{height:19px;width:1px;background:#dee4dc;margin:0 6px}.brand-sub{font-size:11px;font-weight:400;letter-spacing:1px;color:#939b92}.top-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:#7e8d80}.status-dot{display:inline-block;background:#71a184;width:6px;height:6px;border-radius:50%;margin-right:2px}.version{border:1px solid #e3e8dd;padding:5px 9px;border-radius:5px;margin-left:15px}main{max-width:1440px;margin:auto;padding:0 4.5%}.intro{display:flex;align-items:center;justify-content:space-between;padding:43px 4px 35px}.eyebrow{font-size:11px;letter-spacing:2px;color:#7f927f;display:flex;align-items:center;gap:8px}.eyebrow>span{width:17px;height:1px;background:#91a58b}h1{font-family:'Noto Serif SC',serif;letter-spacing:3px;font-size:38px;font-weight:600;line-height:1.55;margin:11px 0 10px}h1 span{color:#52836b}.intro p{font-size:12px;color:#91988d;letter-spacing:.5px;margin:0}.intro-art{position:relative;width:180px;height:130px;margin-right:45px;color:#5e8264;transform:rotate(-7deg)}.mini-grid{height:83px;width:83px;border:1px solid #9cae94;position:absolute;top:34px;left:34px;font-family:serif;font-size:56px;text-align:center;color:#617f62;background:linear-gradient(90deg,transparent 49%,#c2cdb855 49%,#c2cdb855 51%,transparent 51%),linear-gradient(transparent 49%,#c2cdb855 49%,#c2cdb855 51%,transparent 51%);box-shadow:7px 7px 0 #e9eedf}.art-pinyin{position:absolute;left:64px;top:1px;font-family:serif;font-style:italic;font-size:22px}.intro-art>svg{position:absolute;right:10px;top:53px;transform:rotate(10deg);stroke-width:1.2}.art-spark{position:absolute;right:0;top:0;color:#b1bb85;font-size:36px}.art-dots{position:absolute;bottom:0;left:0;letter-spacing:4px}.workspace{display:grid;grid-template-columns:345px minmax(0,1fr);gap:26px;align-items:start}.control-card{padding:25px;background:#fffefa;border:1px solid #e2e7dc;border-radius:13px;box-shadow:0 4px 15px #293e2a03}.card-heading{display:flex;align-items:center;gap:9px}.step{font-size:10px;letter-spacing:.4px;border-radius:5px;background:#eaf0e6;color:#5f8065;padding:4px 6px;font-weight:600}.card-heading h2,.preview-toolbar h2{font-size:14px;margin:0;font-weight:600;letter-spacing:.3px}.small-muted{font-size:10px;color:#a2a69c;margin-left:auto}.field-label{display:flex;align-items:center;justify-content:space-between;margin:26px 0 9px;font-size:12px}.field-label>span{color:#a8aca2;font-size:10px}.control-card input,.control-card textarea,.control-card select{border:1px solid #e2e6dc;background:#fffefa;color:#414f42;border-radius:6px}.control-card input{width:100%;height:39px;padding:0 12px;font-size:12px}.control-card textarea{resize:vertical;min-height:192px;width:100%;padding:13px 14px;font-size:13px;line-height:2.15}.words-label{margin-top:20px}.text-button{border:0;background:none;color:#9a9f94;font-size:10px;padding:0}.input-caption{display:flex;justify-content:space-between;color:#9fa697;font-size:9px;margin-top:8px;gap:4px}.input-caption b{color:#6e876d;white-space:nowrap;font-weight:500}.input-caption b span{color:#a2a99c;font-weight:400}.presets{display:flex;gap:6px;align-items:center;margin-top:17px;font-size:10px;color:#969f91}.presets>span{margin-right:3px}.presets button{border:1px solid #e7eadf;background:#fafbf6;color:#8e9987;border-radius:4px;padding:4px 8px;font-size:10px}.presets button.selected{background:#eef3e7;color:#658357;border-color:#dce6ce}.section-rule{height:1px;background:#ebeee4;margin:26px 0 21px}.layout-heading{gap:8px}.layout-heading>svg{color:#789076}.paper-badge{font-size:9px;color:#8f9c86;background:#f1f4ea;padding:4px 7px;border-radius:4px;margin-left:auto}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:19px}.two-fields label{font-size:11px;display:block;margin-bottom:9px;color:#6c776a}.segmented{display:flex;border:1px solid #e3e7dc;border-radius:5px;overflow:hidden;height:34px;padding:3px;background:#f7f8f3;gap:2px}.segmented button{border:0;border-radius:3px;background:transparent;color:#9aa391;flex:1;font-size:10px}.segmented .selected{background:#fff;color:#4d7555;box-shadow:0 1px 4px #30442c13}.select-wrap{position:relative}.select-wrap select{appearance:none;width:100%;height:34px;padding:0 10px;font-size:11px}.select-wrap svg{position:absolute;right:9px;top:10px;pointer-events:none;color:#97a08e}.options-row{margin-top:15px;align-items:end}.switch-field{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;font-size:11px;color:#6c776a}.switch{background:#d7dfd2;border:0;border-radius:20px;width:29px;height:17px;padding:2px;display:flex;align-items:center}.switch i{width:13px;height:13px;background:white;border-radius:50%}.switch.on{background:#6a8b66;justify-content:flex-end}.generate{height:44px;display:flex;align-items:center;gap:9px;justify-content:center;color:#fff;background:#376952;border:1px solid #376952;border-radius:6px;width:100%;margin-top:25px;font-size:12px;letter-spacing:1px}.generate>svg:last-child{margin-left:auto}.generate>svg:first-child{margin-left:auto}.privacy{font-size:9px;color:#a1aa98;display:flex;align-items:center;gap:5px;justify-content:center;margin:12px 0 0}.preview-area{min-width:0}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;height:39px;margin-bottom:14px}.preview-toolbar>div{display:flex;align-items:center;gap:9px}.preview-tag{font-size:9px;color:#92a087;letter-spacing:.4px;margin-left:3px}.preview-actions{gap:14px!important}.preview-actions button{border:0;padding:5px 0;display:flex;gap:5px;align-items:center;background:transparent;font-size:10px;color:#7c8a74}.toolbar-sep{background:#dce2d4;height:15px;width:1px}.preview-actions .print{background:#356a57;color:white;border-radius:5px;padding:9px 12px}.paper-stage{border:1px solid #e0e5d9;border-radius:10px;background:#edf0e8;padding:16px 24px 12px;background-image:radial-gradient(#c8d1bd77 .7px,transparent .7px);background-size:7px 7px}.paper-topline{display:flex;justify-content:space-between;align-items:center;color:#929d88;font-size:9px;margin-bottom:17px}.paper-topline>span{display:flex;gap:5px;align-items:center}.paper-topline label{display:flex;align-items:center;gap:5px;cursor:pointer}.paper-topline input{accent-color:#48795a;width:11px;height:11px}.sheets{display:flex;flex-direction:column;gap:20px}.paper{width:100%;max-width:760px;min-height:795px;aspect-ratio:210/297;background:#fffefb;box-shadow:0 3px 12px #2a3a2410;position:relative;padding:34px 33px 65px;margin:0 auto;color:#374233;border:1px solid #e8e8dd}.sheet-kicker{font-size:8px;letter-spacing:2px;text-align:center;color:#a6ac9d}.paper>h2{font-family:'Noto Serif SC',serif;text-align:center;font-weight:600;font-size:23px;letter-spacing:3px;margin:18px 0 21px;overflow-wrap:anywhere}.student-info{display:flex;justify-content:center;gap:22px;font-size:9px;color:#8c9484;margin-bottom:20px}.student-info span{display:flex;align-items:end;white-space:nowrap}.student-info i{border-bottom:1px solid #c4cabb;width:62px;height:10px}.sheet-instruction{border-top:1px solid #c5cebd;border-bottom:1px solid #e3e8dc;padding:10px 0;display:flex;justify-content:space-between;color:#9da58f;font-size:8px;gap:5px}.exercise-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:8px;row-gap:16px;margin-top:18px}.exercise{position:relative;min-width:0;padding-left:13px;display:flex;align-items:start}.exercise-number{font-family:Arial,sans-serif;font-size:9px;color:#a3ad98;position:absolute;left:0;top:7px}.word-cells{display:flex;flex-wrap:wrap;row-gap:6px;max-width:100%}.character{display:flex;flex-direction:column;align-items:center;width:var(--cell);max-width:100%}.pinyin{height:20px;line-height:18px;font-family:Arial,sans-serif;font-size:12px;color:#495542;white-space:nowrap}.cell{height:var(--cell);width:100%;border:1px solid #b3c2a7;position:relative;display:grid;place-items:center;color:#737e69;font-family:'Noto Serif SC',serif;font-size:25px}.character+.character .cell{border-left:0}.cell.tian:before,.cell.mi:before{content:'';position:absolute;left:50%;height:100%;border-left:1px dashed #d1d9c8}.cell.tian:after,.cell.mi:after{content:'';position:absolute;top:50%;width:100%;border-top:1px dashed #d1d9c8}.cell.mi{background:linear-gradient(45deg,transparent 49%,#dce3d3 49.5%,#dce3d3 50.5%,transparent 51%),linear-gradient(-45deg,transparent 49%,#dce3d3 49.5%,#dce3d3 50.5%,transparent 51%)}.cell.line{border:0;border-bottom:1px solid #b3c2a7!important}.cell span{z-index:1}.sheet-footer{position:absolute;bottom:24px;left:33px;right:33px;padding-top:10px;border-top:1px solid #e5e9dc;display:flex;justify-content:space-between;font-size:8px;color:#acb3a3;letter-spacing:.6px}.preview-bottom{margin-top:14px;display:flex;justify-content:space-between;font-size:9px;color:#929d86}.preview-bottom .status-dot{height:4px;width:4px;vertical-align:middle}.bottom-note{display:flex;gap:8px;align-items:center;color:#95a28b;font-size:10px;margin:25px 0 37px}.bottom-note>svg{color:#8da17d}.bottom-right{margin-left:auto;color:#a4ac9c}footer{border-top:1px solid #e8ebdf;display:flex;justify-content:space-between;padding:20px 4.5%;font-size:10px;color:#9da694}footer>span:first-child{letter-spacing:2px}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:50;background:#294d3e;color:white;border-radius:7px;padding:13px 20px;box-shadow:0 6px 25px #0002;display:flex;align-items:center;gap:10px;font-size:12px}.modal-backdrop{position:fixed;inset:0;z-index:20;background:#1b332d66;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}.modal{background:#fffefa;padding:25px;border-radius:12px;max-width:550px;width:100%;box-shadow:0 20px 80px #0002}.modal-title{display:flex;align-items:center;justify-content:space-between}.modal-title h2{font-size:19px;margin:0}.modal-title button{background:none;border:0;color:#6c7c67}.modal p{font-size:11px;color:#8a9582;line-height:1.8}.correction-list{max-height:55vh;overflow:auto;margin-top:20px}.correction-list label{display:flex;align-items:center;gap:15px;padding:8px;border-bottom:1px solid #edf0e6}.correction-list b{min-width:70px;font-weight:500;overflow-wrap:anywhere}.correction-list input{border:1px solid #dfe5d8;border-radius:4px;padding:9px;width:100%;min-width:0;background:#fff;font-family:Arial,sans-serif}.valid{color:#6f9770}.invalid{font-size:9px;color:#b66b4d;min-width:60px}.empty-state{min-height:600px;background:#fffefa;display:grid;place-items:center;color:#9ba58f}
@media(min-width:1500px){.paper{min-height:900px}.exercise-grid{row-gap:16px}.workspace{grid-template-columns:370px 1fr}.control-card{padding:28px}}@media(max-width:1150px){.workspace{grid-template-columns:300px minmax(0,1fr);gap:18px}main{padding:0 3%}.control-card{padding:20px}.preview-toolbar h2{font-size:12px}.preview-tag{display:none}.preview-actions{gap:8px!important}.paper-stage{padding:15px}.paper{padding:28px 21px 60px;--cell:27px!important;min-height:740px}.exercise-grid{gap:16px 5px}.pinyin{font-size:10px}.sheet-instruction{font-size:7px}.intro-art{margin-right:15px}.student-info{gap:12px}.student-info i{width:45px}}@media(max-width:850px){.brand-sub,.brand-sep,.version,.top-meta{display:none}.topbar{height:68px}.intro{padding:28px 3px}.intro-art{transform:scale(.75) rotate(-7deg);margin-right:-20px;width:150px}.intro p{font-size:11px;max-width:330px;line-height:1.9}h1{font-size:30px}.workspace{grid-template-columns:1fr}.control-card{display:block}.control-card textarea{min-height:140px}.preview-toolbar{margin-top:10px}.preview-toolbar h2{font-size:14px}.paper{max-width:700px;min-height:800px;--cell:32px!important}.preview-actions button{font-size:10px}.bottom-right{display:none}.topbar{padding:0 5%}.sheet-instruction{font-size:8px}}@media(max-width:480px){.intro-art{display:none}.intro{padding-bottom:27px}.paper-stage{padding:10px 7px}.paper{padding:25px 15px 55px;min-height:665px;--cell:25px!important}.paper>h2{font-size:20px}.student-info{gap:10px;font-size:8px}.student-info i{width:35px}.sheet-instruction{font-size:6px}.pinyin{font-size:9px;height:20px}.exercise-grid{gap:14px 3px}.exercise{padding-left:10px}.exercise-number{font-size:7px}.preview-actions{gap:8px!important}.preview-actions button span{display:none}.preview-bottom{font-size:8px}.sheet-footer{left:15px;right:15px}.paper-topline{font-size:8px}.cell span{font-size:20px}.brand{font-size:18px}}
@page{size:A4 portrait;margin:0}@media print{*{-webkit-print-color-adjust:exact;print-color-adjust:exact}body{background:white}.topbar,.intro,.control-card,.preview-toolbar,.paper-topline,.preview-bottom,.bottom-note,footer,.modal-backdrop,.toast{display:none!important}main{padding:0;max-width:none}.workspace{display:block}.paper-stage{border:0;padding:0;background:none}.sheets{display:block}.paper{width:210mm!important;height:297mm!important;min-height:0!important;max-width:none!important;aspect-ratio:auto;box-shadow:none;border:0;margin:0!important;padding:15mm 14mm 20mm!important;page-break-after:always;break-after:page;--cell:11mm!important}.paper:last-child{page-break-after:auto;break-after:auto}.sheet-kicker{font-size:9px}.paper>h2{font-size:25px;margin:7mm 0}.student-info{font-size:11px;gap:12mm;margin-bottom:7mm}.student-info i{width:24mm}.sheet-instruction{font-size:10px;padding:3mm 0}.exercise-grid{row-gap:5mm;column-gap:2.5mm;margin-top:6mm}.pinyin{font-size:13px;height:6mm;line-height:5mm}.exercise{padding-left:3mm}.exercise-number{font-size:10px;top:2mm}.sheet-footer{left:14mm;right:14mm;bottom:9mm;font-size:9px}.cell span{font-size:30px}}
.import-line{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:9px;color:#a1aa98}.import-line label{color:#6f8e70;cursor:pointer;border-bottom:1px dotted #9caf91}.import-line input{display:none}.more-options{margin-top:19px;color:#8a9780;font-size:10px}.more-options summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;list-style:none}.more-options>label{display:block;margin:14px 0 8px}.label-inputs{display:flex;gap:7px}.label-inputs input{min-width:0;height:30px}.colors{display:flex;gap:10px}.colors button{border:0;width:22px;height:20px;border-radius:50%;color:white;display:grid;place-items:center}.cell{border-color:var(--grid-color,#b3c2a7)}.cell.line{border-bottom-color:var(--grid-color,#b3c2a7)!important}@media print{.paper{--cell:var(--printcell)!important}}

/* Keep the worksheet proportions consistent between scaled preview and A4 print. */
.paper{container-type:inline-size;background:#fff;color:#000;--cell:calc(var(--cell-scale)*1cqw)!important}
.paper>h2,.student-info,.pinyin,.cell,.exercise-number{color:#000}
.student-info i{border-color:#000}
.exercise-grid{column-gap:1.374cqw;row-gap:2.198cqw}
.exercise{padding-left:1.648cqw}
.pinyin{font-size:calc(var(--cell)*.29);height:calc(var(--cell)*.4);line-height:calc(var(--cell)*.36)}
.cell{border-color:var(--grid-color,#000)}
.cell.tian:before,.cell.mi:before,.cell.tian:after,.cell.mi:after{border-color:color-mix(in srgb,var(--grid-color,#000) 55%,white)}
.cell.mi{background:linear-gradient(45deg,transparent 49.5%,color-mix(in srgb,var(--grid-color,#000) 35%,white) 49.5%,color-mix(in srgb,var(--grid-color,#000) 35%,white) 50.5%,transparent 50.5%),linear-gradient(-45deg,transparent 49.5%,color-mix(in srgb,var(--grid-color,#000) 35%,white) 49.5%,color-mix(in srgb,var(--grid-color,#000) 35%,white) 50.5%,transparent 50.5%)}
.cell span{font-size:calc(var(--cell)*.75);line-height:1;display:block;text-align:center}
@media print{
 .paper{--cell:var(--printcell)!important}
 .exercise-grid{column-gap:2.5mm;row-gap:4mm}
 .exercise{padding-left:3mm}
 .pinyin{font-size:calc(var(--cell)*.29);height:6mm;line-height:5.4mm}
 .sheet-kicker,.sheet-instruction,.sheet-footer{color:#000;border-color:#000}
}