:root{--navy:#17324d;--navy-deep:#10283e;--blue:#2d6388;--ink:#1c2c3b;--muted:#6b7a89;--line:#dce4eb;--paper:#fff;--wash:#f4f7fa;--pale:#eaf0f5;--accent:#bd9251;--radius:16px;--shadow:0 12px 34px rgba(20,43,63,.08);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:#fff;font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}.skip-link{position:absolute;left:-999px;top:8px;background:#fff;padding:10px;z-index:10}.skip-link:focus{left:8px}.site-header{height:76px;background:rgba(255,255,255,.97);border-bottom:1px solid #e8edf1;display:flex;align-items:center;position:sticky;top:0;z-index:5}.header-inner{width:min(1200px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand-mark{width:38px;height:38px;border-radius:10px;background:var(--navy);display:grid;place-items:center;color:#fff;font-family:serif;font-size:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.brand-name{font-weight:750;letter-spacing:-.55px;font-size:17px;color:var(--navy);white-space:nowrap}.brand-name span{font-weight:500;color:#617181}.header-nav{display:flex;align-items:center;gap:26px;font-size:13px;color:#536273}.header-nav>a:hover{color:var(--blue)}.language-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:9px;gap:2px}.language-switch a{padding:4px 8px;border-radius:6px;font-size:12px}.language-switch a.active{background:var(--navy);color:#fff}.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px;padding-top:66px;padding-bottom:72px;min-height:430px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.7px;color:#8a6a3c;margin:0 0 15px}.hero h1{font-size:clamp(34px,4vw,48px);line-height:1.25;letter-spacing:-1.6px;color:var(--navy);margin:0 0 19px;font-weight:760}.hero-description{max-width:510px;color:#617181;font-size:16px;line-height:1.9;margin:0 0 27px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:47px;border:0;border-radius:9px;padding:12px 18px;font-weight:650;font-size:13px;transition:transform .15s,background .15s}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--navy);color:#fff}.button-primary:hover{background:#214969}.button-dark{background:#263d50;color:#fff}.button-dark:hover{background:#172f43}.hero-button{min-width:190px}.trust-note{display:flex;align-items:center;gap:8px;font-size:11px;color:#748291;margin-top:18px}.check-icon{display:grid;place-items:center;width:17px;height:17px;background:#e6f0eb;color:#2c7858;border-radius:50%;font-size:10px;font-weight:800}.hero-art{min-height:300px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,#f2f5f7 0,rgba(247,249,250,.3) 65%,transparent 66%)}.sample-sheet{background:#fff;width:min(300px,78%);padding:23px 22px 20px;border:1px solid #e5e9ed;box-shadow:0 20px 50px rgba(25,48,67,.13);transform:rotate(2deg);position:relative}.sample-heading{display:flex;justify-content:space-between;align-items:center;color:#617181;font-size:9px;border-bottom:1px solid #e5e9ed;padding-bottom:12px;margin-bottom:14px}.sample-heading span:first-child{font-weight:750;color:var(--navy);letter-spacing:.6px}.sample-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:8px}.sample-grid span{aspect-ratio:1;display:grid;place-items:center;border:1px solid #a9b3bc;font-family:serif;font-size:29px;color:#344b5c;position:relative}.sample-grid span:not(:last-child){border-right:0}.sample-grid span:before,.sample-grid span:after{content:"";position:absolute;background:#c4ccd3;pointer-events:none}.sample-grid span:before{width:1px;height:100%;left:50%;top:0;border-left:1px dashed #9eabb6;background:transparent}.sample-grid span:after{height:1px;width:100%;top:50%;left:0;border-top:1px dashed #9eabb6;background:transparent}.sample-grid.faded span:nth-child(1){opacity:.75}.sample-grid.faded span:nth-child(2){opacity:.5}.sample-grid.faded span:nth-child(3){opacity:.28}.sample-grid.faded span:nth-child(4){opacity:.12}.sample-caption{text-align:center;color:#85919b;font-size:9px;margin-top:14px;letter-spacing:.3px}.hero-stamp{position:absolute;right:3%;bottom:19%;width:67px;height:67px;background:#fff;border:1px solid #d8e0e6;box-shadow:0 8px 24px rgba(20,43,63,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);color:var(--navy)}.hero-stamp span{font-family:serif;font-size:30px;line-height:1}.hero-stamp small{font-size:9px;letter-spacing:2px}.tools-section{background:var(--wash);padding:62px 0 72px;border-top:1px solid #eef1f4;border-bottom:1px solid #e8edf1}.section-heading{text-align:center;margin-bottom:30px}.section-heading h2{margin:0;color:var(--navy);font-size:clamp(25px,3vw,32px);letter-spacing:-.7px;line-height:1.35}.section-heading>p:last-child{color:var(--muted);font-size:13px;margin:10px 0 0}.section-heading .eyebrow{margin-bottom:9px}.tool-tabs{display:flex;gap:8px;border-bottom:1px solid #dce4eb;margin-bottom:0}.tool-tab{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#71808d;padding:14px 20px;border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:650;font-size:13px}.tool-tab.active{color:var(--navy);border-bottom-color:var(--accent)}.tab-number{font-size:10px;letter-spacing:1px;color:#9aa7b2}.tool-tab.active .tab-number{color:#9b743e}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);background:#fff;border:1px solid #dfe6ec;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;box-shadow:var(--shadow)}.settings-panel{padding:26px 24px 23px;border-right:1px solid #e7edf1}.tool-panel[hidden]{display:none}.panel-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}.panel-icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;background:#edf2f6;color:var(--navy);border-radius:10px;font-size:21px;font-family:serif}.panel-icon-trace{font-size:19px}.panel-heading h3{font-size:17px;line-height:1.4;margin:0 0 4px;color:var(--navy)}.panel-heading p{margin:0;font-size:11px;line-height:1.6;color:#7a8793}.field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#425465;font-weight:650;margin-bottom:18px}.field select,.field textarea{width:100%;min-width:0;border:1px solid #d8e1e8;border-radius:8px;background:#fff;color:#263c4d;padding:10px 11px;outline:none;font-weight:450;font-size:13px}.field select:focus,.field textarea:focus{border-color:#6386a1;box-shadow:0 0 0 3px rgba(45,99,136,.1)}.field textarea{resize:vertical;min-height:83px;line-height:1.7}.field-hint{font-size:10px;color:#87939e;font-weight:400}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.info-strip{display:flex;gap:9px;align-items:flex-start;padding:11px;background:#f5f8fa;border:1px solid #edf1f4;border-radius:8px;margin:4px 0 19px}.info-dot{display:grid;place-items:center;flex:0 0 15px;width:15px;height:15px;border-radius:50%;border:1px solid #8ca2b3;color:#6d879b;font-size:10px;font-family:serif}.info-strip p{margin:0;color:#748390;font-size:10px;line-height:1.7;font-weight:400}.button-full{width:100%}.counter-row{display:flex;justify-content:space-between;color:#87939e;font-size:11px;margin:-9px 0 17px}.counter-row strong{color:#334b5d;font-size:11px}.print-actions{border-top:1px solid #e9eef2;margin-top:24px;padding-top:19px}.print-note{text-align:center;color:#8a96a0;font-size:10px;line-height:1.7;margin:10px 0 0}.preview-panel{min-width:0;background:#f6f8fa;display:flex;flex-direction:column}.preview-toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 21px;background:#fff;border-bottom:1px solid #e8edf1}.preview-toolbar>div{display:flex;align-items:center;gap:8px;font-size:12px;color:#33495b}.live-dot{width:7px;height:7px;border-radius:50%;background:#4b9879;box-shadow:0 0 0 3px #e8f3ee}.paper-tag{font-size:9px;color:#85929e;letter-spacing:.7px}.paper-stage{padding:24px 20px;display:flex;justify-content:center;align-items:flex-start;min-height:600px;overflow:auto}.paper{width:100%;max-width:470px;min-height:620px;background:#fff;box-shadow:0 3px 15px rgba(24,47,66,.11);padding:22px 22px 18px;color:#182c3d}.worksheet-content{width:100%;min-height:100%;display:flex;flex-direction:column}.worksheet-header{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #dce3e9;padding-bottom:10px;margin-bottom:16px}.worksheet-brand{font-size:8px;letter-spacing:.3px;font-weight:750;color:#536779}.worksheet-title{font-size:10px;font-weight:650;color:#263f53}.worksheet-grid{display:grid;grid-template-columns:repeat(var(--grid-cols,8),minmax(0,1fr));width:100%;border-top:1px solid #667785;border-left:1px solid #667785}.tian-cell{aspect-ratio:1;position:relative;border:0;border-right:1px solid #667785;border-bottom:1px solid #667785;margin:0;min-width:0;display:grid;place-items:center;overflow:hidden}.tian-cell:before,.tian-cell:after{content:"";position:absolute;pointer-events:none;z-index:1}.tian-cell:before{left:50%;top:0;height:100%;border-left:1px dashed #aab5be}.tian-cell:after{left:0;top:50%;width:100%;border-top:1px dashed #aab5be}.tian-cell.solid-centre:before{border-left:1px solid #aab5be}.tian-cell.solid-centre:after{border-top:1px solid #aab5be}.mi-dashed-cell .diagonal-lines{position:absolute;inset:0;pointer-events:none;z-index:1}.mi-dashed-cell .diagonal-lines:before,.mi-dashed-cell .diagonal-lines:after{content:"";position:absolute;left:-21%;top:50%;width:142%;border-top:1px dashed #aab5be;transform-origin:center}.mi-dashed-cell .diagonal-lines:before{transform:rotate(45deg)}.mi-dashed-cell .diagonal-lines:after{transform:rotate(-45deg)}.cell-glyph{font-family:"GCW Chinese",serif;font-size:clamp(14px,2vw,24px);line-height:1;color:#111;z-index:2;white-space:nowrap}.blank-grid{grid-template-rows:repeat(var(--grid-rows,10),auto)}.blank-grid .tian-cell{aspect-ratio:1}.trace-list{display:flex;flex-direction:column;gap:10px}.trace-row{display:block}.trace-grid .tian-cell{aspect-ratio:1;container-type:inline-size}.trace-grid .cell-glyph{font-size:80cqi;max-width:90%;line-height:1}.worksheet-print-footer{margin-top:auto;padding-top:15px;text-align:right;font-size:7px;color:#a0aab2;letter-spacing:.3px}.worksheet-empty{min-height:200px;display:grid;place-items:center;color:#99a4ae;font-size:12px;text-align:center}.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 20px 17px;font-size:9px;color:#8b97a1}.privacy-label{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#60816f}.privacy-label>span:first-child{font-size:7px}.how-section{padding-top:68px;padding-bottom:60px}.align-left{text-align:left;margin-bottom:24px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.step-card{padding:22px 22px 20px;border:1px solid #e2e8ed;border-radius:12px;background:#fff}.step-index{font-size:11px;letter-spacing:1px;color:#a57d47;font-weight:750}.step-card h3{font-size:15px;color:var(--navy);margin:13px 0 6px}.step-card p{font-size:12px;color:#72808c;line-height:1.8;margin:0}.seo-intro{border-top:1px solid #e9eef2;padding-top:25px;padding-bottom:44px}.seo-intro h2{font-size:16px;color:#3a5062;margin:0 0 8px}.seo-intro p{font-size:12px;line-height:1.9;color:#7a8792;max-width:900px;margin:0}.site-footer{background:#142d42;color:#dce4eb}.footer-inner{min-height:90px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}.footer-brand{font-size:13px;font-weight:750;color:#fff}.footer-inner p{font-size:11px;color:#aebdca;margin:0;flex:1}.footer-inner>span{font-size:10px;color:#93a6b6}
@media(max-width:800px){.wrap{width:min(100% - 28px,600px)}.site-header{height:66px}.header-inner{width:calc(100% - 28px)}.brand-mark{width:34px;height:34px;font-size:21px}.brand-name{font-size:14px;letter-spacing:-.4px}.header-nav{gap:13px}.header-nav>a{display:none}.hero{grid-template-columns:1fr;gap:8px;padding-top:43px;padding-bottom:40px;min-height:0}.hero h1{font-size:36px}.hero-description{font-size:14px;line-height:1.8}.hero-art{min-height:265px;margin-top:5px}.sample-sheet{width:250px}.hero-stamp{right:9%;bottom:13%;width:57px;height:57px}.hero-stamp span{font-size:25px}.tools-section{padding:43px 0 48px}.section-heading{margin-bottom:23px}.tool-tab{flex:1;justify-content:center;padding:13px 7px;font-size:12px;gap:7px}.workspace{grid-template-columns:1fr;border-radius:0 0 13px 13px}.settings-panel{padding:22px 18px;border-right:0;border-bottom:1px solid #e7edf1}.panel-heading{margin-bottom:18px}.field-grid{gap:10px}.preview-panel{order:2}.paper-stage{padding:17px 12px;min-height:0}.paper{max-width:430px;min-height:550px;padding:18px 17px 15px}.preview-toolbar{height:48px;padding:0 14px}.preview-footer{padding:0 13px 14px;font-size:8px}.how-section{padding-top:45px;padding-bottom:42px}.steps-grid{grid-template-columns:1fr;gap:10px}.step-card{padding:17px 18px}.step-card h3{margin-top:8px}.seo-intro{padding-bottom:30px}.footer-inner{padding-top:18px;padding-bottom:18px;gap:8px}.footer-inner p{flex-basis:100%;order:3}.footer-inner>span{margin-left:auto}.worksheet-title{font-size:9px}.trace-list{gap:8px}}
@media(max-width:380px){.brand-name{font-size:12px}.brand{gap:7px}.language-switch a{padding:4px 6px}.hero h1{font-size:32px}.tab-number{display:none}.tool-tab{font-size:11px}.paper{padding:14px 10px;min-height:500px}.trace-list{gap:6px}.trace-row{display:block}}
/* v1.0.13: Shared grid borders are drawn once; A4 preview and print retained */
#worksheet-paper.paper{width:100%;max-width:none;min-height:0;height:auto;padding:0;background:transparent;box-shadow:none;display:block;overflow:visible}
#worksheet-content{width:100%;min-height:0;display:flex;flex-direction:column;align-items:center;gap:22px}
.worksheet-page{width:100%;max-width:470px;aspect-ratio:210 / 297;height:auto;flex:none;background:#fff;box-shadow:0 3px 15px rgba(24,47,66,.11);padding:22px;color:#182c3d;overflow:hidden}
.worksheet-page .worksheet-content{width:100%;height:100%;min-height:0;display:flex;flex-direction:column}
.worksheet-page .worksheet-header{flex:none}
.worksheet-page .worksheet-print-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;flex:none}
.worksheet-page .worksheet-page-number{white-space:nowrap}
.worksheet-page .blank-grid,.worksheet-page .trace-list{flex:none}
.worksheet-page .trace-list{gap:2mm}
.worksheet-page .trace-row{break-inside:avoid;page-break-inside:avoid}
@media(max-width:800px){#worksheet-content{gap:16px}.worksheet-page{max-width:430px;padding:18px 17px 15px}}
@media(max-width:380px){.worksheet-page{padding:14px 10px}}




/* Pinyin composer (screen only) */
.pinyin-widget{margin:0 0 18px;padding:14px;border:1px solid #d8e3df;border-radius:12px;background:#f6faf8}.pinyin-widget input{width:100%;box-sizing:border-box;min-height:43px;padding:10px 12px;border:1px solid #b9cac5;border-radius:8px;background:#fff;font:inherit}.pinyin-candidates{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.pinyin-candidates:empty{display:none}.pinyin-choice{font:inherit;background:#fff;border:1px solid #a7beb5;border-radius:8px;padding:7px 11px;cursor:pointer;color:#233b34}.pinyin-choice:hover,.pinyin-choice:focus-visible,.pinyin-choice.active{background:#e0f1e9;border-color:#4d9475}.pinyin-choice small{font-size:.7em;color:#63766e;margin-right:6px}.pinyin-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}.pinyin-clear{padding:6px 12px;font-size:.85rem}.pinyin-candidates .pinyin-empty{font-size:.85rem;color:#65756e}

/* Pinyin candidate pagination: both controls remain visible on every page. */
.pinyin-pagination{display:flex;flex-basis:100%;align-items:center;justify-content:center;gap:12px;margin-top:5px;flex-wrap:wrap}
.pinyin-page-button{font:inherit;font-size:.86rem;padding:7px 12px;border:1px solid #a7beb5;border-radius:8px;background:#fff;color:#233b34;cursor:pointer}
.pinyin-page-button:hover:not(:disabled),.pinyin-page-button:focus-visible{background:#e0f1e9;border-color:#4d9475}
.pinyin-page-button:disabled{opacity:.4;cursor:not-allowed}
.pinyin-page-counter{min-width:52px;text-align:center;font-size:.86rem;color:#50645b;font-variant-numeric:tabular-nums}

/* Bundled font: same glyph outlines on mobile and desktop, including print. */

.worksheet-page .cell-glyph,.sample-grid span,.hero-stamp span{font-family:"GCW Chinese",serif!important}
/* Print geometry: A4, physical 12mm inset on all four sides.
   186mm wide x 273mm high content box, with 0.5mm pagination tolerance. */





/* v1.0.24: intrinsic-height print pages; no full-page boxes or trailing breaks. */
@font-face{font-family:"GCW WenKai";src:url("../fonts/LXGWWenKai-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.worksheet-page .cell-glyph,.sample-grid span,.hero-stamp span{font-family:"GCW WenKai",serif!important;font-weight:400!important;font-synthesis:none!important}
.worksheet-page .trace-grid .tian-cell{container-type:inline-size}
.worksheet-page .trace-grid .cell-glyph{position:absolute!important;left:50%!important;top:50%!important;width:1em!important;height:1em!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;font-size:80cqi!important;max-width:none!important;margin:0!important;padding:0!important;transform:translate(-50%,-50%)!important}
#gcw-print-root{display:none}
@page{size:A4 portrait;margin:12mm}
@media print{
 html,body{margin:0!important;padding:0!important;width:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 body>*:not(#gcw-print-root){display:none!important}
 #gcw-print-root{display:block!important;position:static!important;width:186mm!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important}
 #gcw-print-root #worksheet-content{display:block!important;width:186mm!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
 #gcw-print-root .worksheet-page{display:block!important;box-sizing:border-box!important;position:relative!important;width:186mm!important;max-width:186mm!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;overflow:visible!important;break-inside:avoid!important;page-break-inside:avoid!important;break-before:auto!important;break-after:auto!important;page-break-before:auto!important;page-break-after:auto!important}
 #gcw-print-root .worksheet-page:not(:last-child){break-after:page!important;page-break-after:always!important}
 #gcw-print-root .worksheet-page .worksheet-content{display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important}
 #gcw-print-root .worksheet-page .worksheet-header{display:flex!important;margin:0 0 5mm!important;padding:0 0 3mm!important;min-height:0!important}
 #gcw-print-root .worksheet-page .worksheet-brand{font-size:8pt!important}
 #gcw-print-root .worksheet-page .worksheet-title{font-size:10pt!important}
 #gcw-print-root .worksheet-page .blank-grid{display:grid!important;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr))!important;grid-template-rows:repeat(var(--grid-rows),auto)!important;width:100%!important}
 #gcw-print-root .worksheet-page .trace-list{display:flex!important;flex-direction:column!important;gap:2mm!important}
 #gcw-print-root .worksheet-page .trace-row{display:block!important;break-inside:avoid!important;page-break-inside:avoid!important}
 #gcw-print-root .worksheet-page .trace-grid{display:grid!important;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr))!important;width:100%!important}
 #gcw-print-root .worksheet-page .tian-cell{aspect-ratio:1!important}
 #gcw-print-root .worksheet-page .cell-glyph{font-family:"GCW WenKai",serif!important;font-weight:400!important;font-synthesis:none!important}
 #gcw-print-root .worksheet-page .trace-grid .cell-glyph{font-size:80cqi!important}
 #gcw-print-root .worksheet-page .worksheet-print-footer{display:flex!important;margin:4mm 0 0!important;padding:0!important;font-size:7pt!important;min-height:0!important}
 #gcw-print-root .worksheet-page .worksheet-empty{display:none!important}
}

/* v1.0.25: pin the footer within the A4 printable area without enlarging
   the page's normal-flow box (which caused a trailing blank mobile page).
   A4 297mm - 12mm top/bottom margins = 273mm printable height.
   Footer baseline box starts at 260mm, leaving 13mm to page bottom. */
@media print {
  #gcw-print-root .worksheet-page { position:relative!important; }
  #gcw-print-root .worksheet-page .worksheet-print-footer {
    position:absolute!important; top:260mm!important; left:0!important; right:0!important;
    height:7mm!important; margin:0!important; padding:0!important;
    display:flex!important; align-items:center!important; justify-content:space-between!important;
    break-inside:avoid!important; page-break-inside:avoid!important;
  }
}

/* v1.0.28: One bundled typeface for worksheet preview headers and footers.
   Match the font explicitly selected by the Canvas PDF exporter. */
.worksheet-page .worksheet-header,
.worksheet-page .worksheet-header *,
.worksheet-page .worksheet-print-footer,
.worksheet-page .worksheet-print-footer * {
  font-family: "GCW WenKai", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* Independent character-form switch, scoped to the Pinyin IME. */
.pinyin-script-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:.88rem;color:#385449}
.pinyin-script-toggle{display:inline-flex;border:1px solid #a7beb5;border-radius:9px;overflow:hidden;background:#fff}
.pinyin-script-button{font:inherit;padding:7px 13px;border:0;background:transparent;color:#385449;cursor:pointer}
.pinyin-script-button+.pinyin-script-button{border-left:1px solid #a7beb5}
.pinyin-script-button.active{background:#d6eee1;color:#153d2d;font-weight:650}
.pinyin-script-button:focus-visible{outline:2px solid #357b60;outline-offset:-2px}

/* v1.0.37: blank worksheet layout; shared borders within each row/column. */
.worksheet-page .blank-layout{display:flex;width:100%;flex:none;align-items:flex-start;container-type:inline-size}
.worksheet-page .blank-horizontal{flex-direction:column;gap:calc(var(--blank-gap-unit) * 1cqw)}
.worksheet-page .blank-vertical{flex-direction:row;gap:calc(var(--blank-gap-unit) * 1cqw)}
.worksheet-page .blank-layout .blank-group{flex:none;margin:0}
.worksheet-page .blank-horizontal .blank-group{width:100%}
.worksheet-page .blank-vertical .blank-group{width:calc(var(--blank-cell-unit) * 1cqw)}
.worksheet-page .blank-layout .blank-group .tian-cell{aspect-ratio:1}


/* v1.0.39 — A4-safe blank worksheet preview.
   All positions are fractions of the physical A4 page, independent of screen
   width and mobile padding. The grid ends by 258mm; the footer is at 283mm.
   Neither horizontal nor vertical layouts can cover or push out the footer. */
@media screen {
  .worksheet-page:has(.blank-layout) {
    position:relative;
    padding:0 !important;
    overflow:hidden;
  }
  .worksheet-page:has(.blank-layout) > .worksheet-content {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
  .worksheet-page:has(.blank-layout) .worksheet-header {
    position:absolute;
    top:5.05%;
    left:5.7142857%;
    right:5.7142857%;
    height:2.45%;
    margin:0;
    padding:0 0 .7%;
    display:flex;
    align-items:center;
  }
  .worksheet-page:has(.blank-layout) .blank-layout {
    position:absolute;
    top:8.4175084%; /* 25mm from the A4 top */
    left:5.7142857%; /* 12mm from the A4 left */
    width:88.5714286%; /* 186mm of A4 */
    margin:0;
  }
  .worksheet-page:has(.blank-layout) .worksheet-print-footer {
    position:absolute;
    top:94.2760943%; /* 280mm, safely below the reserved grid */
    left:5.7142857%;
    right:5.7142857%;
    height:2.02%;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
}

/* v1.0.40: A4 preview safety. Do not let any blank grid reach the footer.
   The worksheet paginator limits the actual content to 210mm starting at
   28mm. Extra space is intentionally reserved for browser layout variance. */
@media screen {
  .worksheet-page:has(.blank-layout) .blank-layout {
    max-height:none; /* pagination uses measured rendered height; no clipping */
  }
  .worksheet-page:has(.blank-layout) .worksheet-print-footer {
    z-index:2;
    background:#fff;
  }
}

/* v1.0.43: vertical columns start at the RIGHT edge and flow left. */
.worksheet-page .blank-vertical{flex-direction:row-reverse;justify-content:flex-start}

/* v1.0.44: vertical columns use explicit right offsets instead of flex layout.
   Each complete column is within the 186mm printable width; later columns
   are generated on a new A4 page. */
.worksheet-page .blank-layout.blank-vertical {
  display:block !important;
  position:absolute;
  overflow:visible;
  direction:ltr;
}
.worksheet-page .blank-vertical .blank-group {
  display:grid;
  grid-template-columns: minmax(0,1fr);
  box-sizing:border-box;
}

/* v1.0.49: preview matches the PDF's 28–278mm vertical grid and 279mm footer rule. */
@media screen {
  .worksheet-page:has(.blank-layout.blank-vertical) .blank-vertical .blank-group {
    box-sizing: border-box;
    align-content: stretch;
  }
  .worksheet-page:has(.blank-layout.blank-vertical) .blank-vertical .blank-group .tian-cell {
    aspect-ratio: auto !important;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .worksheet-page:has(.blank-layout.blank-vertical) .worksheet-print-footer {
    top: 93.93939394%; /* 279 / 297, matching the PDF's footer rule */
    height: 2.69360269%; /* 8mm: text centred at 283mm */
    border-top: 1px solid #dce3e9;
  }
}

/* v1.0.50: horizontal A4 preview uses PDF millimetre geometry, not
   intrinsic aspect-ratio sizing. 28mm grid start, 278mm content bottom,
   279mm footer rule. Row capacity is calculated from the same 250mm. */
@media screen {
  .worksheet-page:has(.blank-layout.blank-horizontal) .blank-horizontal .blank-group {
    display:grid;
    box-sizing:border-box;
    align-content:stretch;
    min-height:0;
  }
  .worksheet-page:has(.blank-layout.blank-horizontal) .blank-horizontal .blank-group .tian-cell {
    aspect-ratio:auto !important;
    width:100%;
    height:100%;
    min-height:0;
  }
  .worksheet-page:has(.blank-layout.blank-horizontal) .worksheet-print-footer {
    top:93.93939394%; /* 279 / 297 */
    height:2.69360269%;
    border-top:1px solid #dce3e9;
  }
}

/* v1.0.51: both orientations share the same A4 coordinate system. */
@media screen {
  .worksheet-page:has(.blank-layout) .blank-layout { top:calc(100% * 25 / 297); left:calc(100% * 12 / 210); width:calc(100% * 186 / 210); }
  .worksheet-page:has(.blank-layout) .worksheet-print-footer { top:calc(100% * 279 / 297); height:calc(100% * 8 / 297); box-sizing:border-box; border-top:1px solid #dce3e9; }
  .worksheet-page:has(.blank-layout) .blank-group { box-sizing:border-box; }
  .worksheet-page:has(.blank-layout) .blank-group .tian-cell { box-sizing:border-box; aspect-ratio:auto !important; min-height:0; }
}

/* v1.0.52: absolute physical-page geometry for BOTH directions.
   The grid occupies A4 y=28..278mm; row/column boxes are positioned
   in percentages of this fixed rectangle, matching the PDF millimetres. */
@media screen {
 .worksheet-page:has(.blank-layout) .blank-layout {
   display:block !important;
   position:absolute !important;
   top:calc(100% * 25 / 297) !important;
   left:calc(100% * 12 / 210) !important;
   width:calc(100% * 186 / 210) !important;
   height:calc(100% * 253 / 297) !important;
   max-height:none !important;
   min-height:0 !important;
   gap:0 !important;
   aspect-ratio:auto !important;
   container-type:normal !important;
   box-sizing:border-box !important;
 }
 .worksheet-page:has(.blank-layout) .blank-layout .blank-group {
   position:absolute !important;
   box-sizing:border-box !important;
   min-height:0 !important;
   gap:0 !important;
 }
 .worksheet-page:has(.blank-layout) .blank-layout .blank-group .tian-cell {
   min-height:0 !important;
   height:100% !important;
   width:100% !important;
   aspect-ratio:auto !important;
 }
}

/* v1.0.56: tracing pages share the exact physical A4 page geometry
   with blank pages (12mm left/right, y=25..278mm). */
@media screen {
 .worksheet-page:has(.trace-list) {position:relative!important;padding:0!important;overflow:hidden!important}
 .worksheet-page:has(.trace-list) > .worksheet-content {position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important}
 .worksheet-page:has(.trace-list) .worksheet-header {position:absolute!important;top:calc(100% * 15 / 297)!important;left:calc(100% * 12 / 210)!important;right:calc(100% * 12 / 210)!important;height:calc(100% * 7 / 297)!important;margin:0!important;padding:0!important;align-items:center!important}
 .worksheet-page:has(.trace-list) .trace-list {position:absolute!important;display:block!important;top:calc(100% * 25 / 297)!important;left:calc(100% * 12 / 210)!important;width:calc(100% * 186 / 210)!important;height:calc(100% * 253 / 297)!important;margin:0!important;padding:0!important;gap:0!important;container-type:inline-size}
 .worksheet-page:has(.trace-list) .trace-row {display:block!important;width:100%!important;height:calc(var(--trace-row-mm) / 186 * 100cqw)!important;margin:0 0 calc(var(--trace-gap-mm) / 186 * 100cqw)!important;padding:0!important}
 .worksheet-page:has(.trace-list) .trace-grid {display:grid!important;width:100%!important;height:100%!important;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr)!important}
 .worksheet-page:has(.trace-list) .trace-grid .tian-cell {height:100%!important;width:100%!important;aspect-ratio:auto!important;min-height:0!important}
 .worksheet-page:has(.trace-list) .worksheet-print-footer {position:absolute!important;top:calc(100% * 279 / 297)!important;left:calc(100% * 12 / 210)!important;right:calc(100% * 12 / 210)!important;height:calc(100% * 8 / 297)!important;box-sizing:border-box!important;border-top:1px solid #dce3e9!important;margin:0!important;padding:0!important;align-items:center!important}
}

/* v1.0.57 — Shared physical typography for BOTH worksheet types.
   PDF text uses points; 1pt = 25.4/72mm. Since the A4 preview is
   210mm wide, 1pt is 0.1679894cqw of the page width. Container query
   units scale the preview labels exactly with the displayed paper. */
@media screen {
  .worksheet-page { container-type:inline-size; }
  .worksheet-page .worksheet-brand {
    font-size:1.34391534cqw !important; /* 8pt */
    letter-spacing:0 !important;
    line-height:1 !important;
  }
  .worksheet-page .worksheet-title {
    font-size:1.67989418cqw !important; /* 10pt */
    letter-spacing:0 !important;
    line-height:1 !important;
  }
  .worksheet-page .worksheet-print-footer,
  .worksheet-page .worksheet-print-footer * {
    font-size:1.17592593cqw !important; /* 7pt */
    letter-spacing:0 !important;
    line-height:1 !important;
  }
  .worksheet-page .worksheet-header,
  .worksheet-page .worksheet-print-footer {
    font-family:"GCW WenKai",serif !important;
    font-weight:400 !important;
  }
}

/* v1.0.58 — one shared A4 header geometry for horizontal, vertical and tracing.
   A4 y=15..22mm, x=12..198mm. Overrides legacy page-specific rules. */
@media screen {
  .worksheet-page:has(.blank-layout) .worksheet-header,
  .worksheet-page:has(.trace-list) .worksheet-header {
    position:absolute !important;
    box-sizing:border-box !important;
    top:calc(100% * 15 / 297) !important;
    left:calc(100% * 12 / 210) !important;
    right:calc(100% * 12 / 210) !important;
    width:auto !important;
    height:calc(100% * 7 / 297) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important;
    border-bottom:1px solid #dce3e9 !important;
  }
  .worksheet-page .worksheet-header .worksheet-brand,
  .worksheet-page .worksheet-header .worksheet-title {
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap;
  }
}

/* v1.0.64: brand symbol represents printable worksheets, not only Tian Zi Ge. */
.brand-mark svg{display:block;width:30px;height:30px;color:#fff;flex:none}
@media(max-width:800px){.brand-mark svg{width:27px;height:27px}}

/* v1.0.68 — About page. Uses the existing site typography, palette and header. */
.footer-about-link{color:inherit;text-decoration:none;font-size:.9rem;opacity:.82}
.footer-about-link:hover,.header-nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.about-main{overflow:hidden}
.about-hero{background:linear-gradient(115deg,#f0f6f4 0%,#f7f9fc 58%,#f2f5fa 100%);border-bottom:1px solid #e3e9ec}
.about-hero-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:clamp(30px,6vw,100px);align-items:center;padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(68px,8vw,112px)}
.about-hero h1{font-size:clamp(2.8rem,6vw,5.3rem);line-height:1.08;letter-spacing:-.045em;color:#17324d;margin:14px 0 24px}
.about-lead{font-size:clamp(1.4rem,2.6vw,2.15rem);line-height:1.35;font-weight:650;color:#17324d;margin:0 0 20px}
.about-summary{font-size:1.04rem;line-height:1.95;color:#516172;max-width:660px;margin:0}
.about-illustration{height:310px;position:relative;max-width:350px;width:100%;margin:auto}
.about-sheet{position:absolute;width:225px;height:284px;border-radius:10px;background:#fff;box-shadow:0 20px 55px rgba(23,50,77,.13);border:1px solid #dce6e8}
.about-sheet-back{transform:rotate(-11deg);top:6px;left:23px;background:#e2ece9;padding:38px 22px}
.about-sheet-back span{display:block;height:12px;border-radius:3px;background:#c1d4ce;margin-bottom:22px}
.about-sheet-front{transform:rotate(6deg);top:15px;right:12px;padding:24px}
.about-sheet-top{display:flex;justify-content:space-between;margin-bottom:26px}
.about-sheet-top span{height:8px;width:70px;border-radius:4px;background:#d7e4e7}
.about-sheet-top span:last-child{width:34px}
.about-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #c3d5d7;border-left:1px solid #c3d5d7}
.about-mini-grid i{font-style:normal;aspect-ratio:1;display:grid;place-items:center;border-right:1px solid #c3d5d7;border-bottom:1px solid #c3d5d7;color:#2c6067;font-size:2rem;background:linear-gradient(to right,transparent calc(50% - .5px),#e6eded 50%,transparent calc(50% + .5px))}
.about-sheet-lines{margin-top:23px}
.about-sheet-lines span{display:block;height:7px;border-radius:4px;background:#e4ecec;margin-bottom:12px}
.about-sheet-lines span:last-child{width:70%}
.about-section{padding-top:90px;padding-bottom:84px}
.about-intro{max-width:760px;margin-bottom:38px}
.about-intro h2,.about-vision-section h2{font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.22;color:#17324d;letter-spacing:-.025em;margin:12px 0 20px}
.about-intro p:not(.eyebrow),.about-vision-section p:not(.eyebrow){color:#526477;line-height:1.9;font-size:1rem}
.about-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.about-feature{padding:32px;border:1px solid #e1e8eb;background:#fff;border-radius:16px;box-shadow:0 6px 26px rgba(23,50,77,.035)}
.about-feature-number{font-size:.8rem;font-weight:750;letter-spacing:.12em;color:#44847b}
.about-feature h3{font-size:1.18rem;color:#17324d;margin:16px 0 12px}
.about-feature p{color:#526477;line-height:1.8;margin:0}
.about-vision-section{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding-bottom:110px}
.about-vision,.about-contact{border-radius:18px;padding:clamp(26px,4vw,48px);background:#f3f7f6}
.about-contact{background:#17324d}
.about-contact .eyebrow{color:#b9dcd3}
.about-contact h2,.about-contact p:not(.eyebrow){color:#fff}
.about-contact p:not(.eyebrow){opacity:.86}
.about-email{display:inline-flex;gap:12px;align-items:center;overflow-wrap:anywhere;color:#c6e6d7;font-weight:650;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:5px;margin-top:18px}
.about-email:hover{color:#fff}
@media(max-width:760px){.about-hero-inner{grid-template-columns:1fr;padding-top:55px;padding-bottom:55px}.about-illustration{height:225px;max-width:270px}.about-sheet{width:170px;height:210px}.about-sheet-back{padding:24px 18px}.about-sheet-front{padding:17px}.about-sheet-top{margin-bottom:12px}.about-mini-grid i{font-size:1.45rem}.about-sheet-lines{margin-top:12px}.about-section{padding-top:55px;padding-bottom:50px}.about-feature-grid,.about-vision-section{grid-template-columns:1fr}.about-feature{padding:24px}.about-vision-section{padding-bottom:65px}}

/* v1.0.69 — Privacy policy, bilingual */
.policy-hero{background:linear-gradient(115deg,#f0f6f4,#f7f9fc);border-bottom:1px solid #e3e9ec;padding:70px 0 65px}
.policy-hero h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.15;color:#17324d;letter-spacing:-.035em;margin:12px 0 24px}
.policy-hero p:not(.eyebrow){max-width:780px;color:#526477;line-height:1.85;margin:0 0 12px}
.policy-content{max-width:960px;padding-top:56px;padding-bottom:95px}
.policy-section{padding:26px 0 30px;border-bottom:1px solid #e2e9eb}
.policy-section:last-child{border-bottom:0}
.policy-section h2{font-size:clamp(1.2rem,2vw,1.48rem);line-height:1.35;color:#17324d;margin:0 0 18px}
.policy-section p,.policy-section li{font-size:1rem;line-height:1.9;color:#526477}
.policy-section p{margin:0 0 14px}.policy-section p:last-child{margin-bottom:0}
.policy-section ul{margin:8px 0 18px;padding-left:24px}
.policy-section a{color:#226d76;overflow-wrap:anywhere}
@media(max-width:760px){.policy-hero{padding:50px 0 44px}.policy-content{padding-top:28px;padding-bottom:55px}.policy-section{padding:23px 0}}