@font-face { font-family: WenKai; src: url('/fonts/LXGWWenKai-Regular.ttf') format('truetype'); font-display: block; }
@font-face { font-family: CardKaiti; src: local('STKaiti'); font-display: block; }
@font-face { font-family: CardUKai; src: url('/fonts/ARPLUKaiCN.woff2') format('woff2'); font-display: block; }
@font-face { font-family: CardKaitiM; src: url('/fonts/gkai00mp.ttf') format('truetype'); font-display: block; }
* { box-sizing: border-box; }
body { margin: 0; color: #26342d; font-family: Arial, 'WenKai', sans-serif; letter-spacing: 0; }
.kai { font-family: var(--card-font, CardKaiti), WenKai, serif; font-weight: 400; }
.sheet { width: 297mm; height: 210mm; padding: 8mm; background: white; display: flex; flex-direction: column; break-after: page; page-break-after: always; font-family: Arial, 'Open Sans', var(--card-font, CardKaiti), WenKai, serif; }
.sheet:last-child { break-after: auto; page-break-after: auto; }
.sheet.portrait { width: 210mm; height: 297mm; padding: 12mm; }
.sheet-header { min-height: 14mm; margin-bottom: 3mm; border-bottom: .4mm solid #238777; display: flex; justify-content: space-between; align-items: center; gap: 4mm; }
.sheet-header h1 { font-family: var(--card-font, CardKaiti), WenKai, serif; font-size: 15pt; font-weight: 400; line-height: 1.15; margin: 0 0 1mm; color: #157264; }
.sheet-header p { margin: 0 0 1mm; font-size: 8pt; color: #52675d; }
.student-line { font-size: 7pt; white-space: nowrap; }
.card-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); grid-auto-flow: column; gap: 2mm 6mm; }
.portrait .card-grid { grid-template-columns: 1fr; gap: 4mm; }
.learning-card { min-width: 0; min-height: 0; border: .3mm solid var(--accent); display: flex; flex-direction: column; overflow: hidden; break-inside: avoid; }
.card-labels,.card-meta { display: grid; grid-template-columns: 23% 20% 57%; }
.card-labels { height: 4.3mm; flex-shrink: 0; color: #56655f; background: #f4f8f5; border-bottom: .15mm solid #bbcdc3; font-size: 5.7pt; line-height: 4.2mm; }
.card-labels>span { padding-left: 1mm; white-space: nowrap; border-right: .15mm solid #bbcdc3; }
.card-labels>span:last-child { border: 0; }
.card-meta { height: 12.5mm; grid-template-rows:minmax(0,1fr); flex-shrink: 0; font-size: 6.9pt; border-bottom: .15mm solid #bbcdc3; }
.card-meta>div { min-width: 0; min-height:0; border-right: .15mm solid #bbcdc3; }
.card-meta>div:last-child { border: 0; }
.head-character { display:flex; align-items:center; gap: .8mm; padding: .8mm; }
.big-glyph { flex: 0 0 10mm; width: 10mm; height: 10mm; display: grid; place-items:center; color:var(--accent); }
.big-glyph svg { width: 100%; height: 100%; }
.big-glyph>.kai { font-size: 30pt; line-height:1; }
.head-character>div:last-child { min-width: 0; }
.character-reading { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.3mm; max-height:100%; }
.tone-badge { display:block; width:4.1mm; height:4.1mm; flex-shrink:0; }
.head-character strong { font-size: 7pt; font-weight: 400; display: block; overflow-wrap: anywhere; line-height: 1.12; }
.head-character small { display: block; font-size: 5.8pt; margin-top: .7mm; }
.pinyin { color: var(--accent); }
.components { padding: .5mm .7mm; color: #177969; overflow-wrap: anywhere; line-height: 1.05; display:flex; flex-direction:column; justify-content:center; gap:.2mm; }
.component-item { display:flex; align-items:baseline; gap:.8mm; min-width:0; }
.component-item .kai { font-size:8.5pt; flex-shrink:0; }
.component-item small,.component-note { display:block; font-size:6pt; min-width:0; }
.component-item sup { font:4.7pt Arial,sans-serif; vertical-align:super; }
.portrait .component-item .kai { font-size:12pt; }
.portrait .component-item small { font-size:8pt; }
.words { display: flex; }
.words>div { flex: 1; min-width: 0; padding: .7mm; border-right: .15mm solid #bbcdc3; }
.words>div:last-child { border: 0; }
.words b { font-size: 10pt; display: block; line-height: 1.15; }
.words small { display: block; font-size: 6.2pt; line-height: 1.15; margin-top: .6mm; overflow-wrap: anywhere; }
.visual-row { height: 12.7mm; flex-shrink: 0; display: flex; align-items: stretch; padding: .4mm 1mm; gap: 1mm; }
.stroke-sequence { display: grid; grid-template-columns: repeat(var(--stroke-cols),minmax(0,1fr)); flex: 1; align-items: center; min-width: 0; }
.stroke-sequence figure { margin:0; text-align:center; min-width:0; height: 100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.stroke-sequence svg { display:block; width:100%; max-height:8.9mm; flex: 1; min-height:0; }
.stroke-sequence figcaption { height: 2.6mm; font: 5pt Arial,sans-serif; color:#5d6b63; }
.evolution { flex: 0 0 45%; display:flex; align-items:center; justify-content:space-around; border-left: .15mm solid #bbcdc3; gap: .5mm; padding-left: 1mm; }
.many-strokes { height:12.7mm; }
.many-strokes .evolution { flex-basis: 35%; }
.many-strokes .stroke-sequence svg { max-height:4.5mm; }
.many-strokes .stroke-sequence figcaption { height:1.7mm; font-size:4.5pt; }
.evolution figure { flex:1; text-align:center; min-width:0; margin:0; }
.evolution img,.evolution svg,.evolution .modern-form { width: 8mm; height: 6.8mm; object-fit:contain; display:block; margin:auto; }
.evolution .modern-form { font-size:18pt; line-height:6.8mm; color:#202723; }
.evolution figcaption { font-size:4.9pt; color:#637269; line-height:1.1; }
.evolution small { display:block; font-size:4.6pt; }
.evolution .custom-evolution { width:100%; height:100%; }
.missing-glyph { display:grid; place-items:center; height:7mm; font-size:5pt; color:#929a95; }
.missing-data { font-size:7pt; color:#b65747; }
.practice { margin: 0 auto .5mm; width:calc(100% - 2mm); flex: 1; min-height: 0; display: flex; flex-direction:column; justify-content:center; gap: .5mm; }
.practice-row { display: grid; grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr)); aspect-ratio:var(--grid-cols); width:100%; min-height:0; border:.18mm solid var(--grid-color); flex-shrink: 0; }
.practice-row span { position:relative; min-width:0; min-height:0; border-right:.18mm solid var(--grid-color); display:grid; place-items:center; background:white; container-type:size; }
.practice-row span:last-child { border-right:0; }
.practice-row span:before,.practice-row span:after { content:''; position:absolute; pointer-events:none; }
.practice-row span:before { left:50%; top:0; bottom:0; border-left:.13mm dashed var(--grid-color); opacity:.7; }
.practice-row span:after { top:50%; left:0; right:0; border-top:.13mm dashed var(--grid-color); opacity:.7; }
.practice-row svg { width:100%; height:100%; position:relative; z-index:1; }
.practice-row b { font-size:90cqmin; line-height:1; z-index:1; }
.custom-tracing { flex:1; min-height:0; margin: .5mm 4mm 1mm; }
.custom-tracing img { width:100%; height:100%; object-fit:contain; }
.sheet-footer { height:5mm; flex-shrink:0; display:flex; align-items:flex-end; justify-content:space-between; font-size:5.5pt; color:#718078; }
.sheet { position:relative; }
.page-watermark { flex:1; min-width:0; margin:0 2mm; text-align:center; font-family:'Times New Roman',var(--card-font),WenKai,serif; font-size:7pt; line-height:3mm; color:#999; font-weight:400; pointer-events:none; }
.source-reference { position:absolute; bottom:3.5mm; left:8mm; right:8mm; text-align:center; font-size:5.5pt; line-height:3mm; color:#718078; }
.portrait .card-labels { font-size:8pt; height:6mm; line-height:6mm; }
.portrait .card-meta { height:19mm; font-size:10pt; }
.portrait .big-glyph { width:18mm; height:18mm; flex-basis:18mm; }
.portrait .big-glyph>.kai { font-size:43pt; }
.portrait .head-character strong { font-size:10pt; }
.portrait .head-character small { font-size:8pt; }
.portrait .tone-badge { width:5.5mm; height:5.5mm; }
.portrait .words b { font-size:12pt; }
.portrait .words small { font-size:8pt; }
.portrait .visual-row { height:18mm; }
.portrait .visual-row.many-strokes { height:18mm; }
.portrait .stroke-sequence svg { max-height:13mm; }
.portrait .many-strokes .stroke-sequence svg { max-height:6mm; }
.portrait .evolution img,.portrait .evolution svg,.portrait .evolution .modern-form { height:10mm; width:13mm; }
.portrait .evolution .modern-form { font-size:26pt; line-height:10mm; }
.portrait .evolution figcaption { font-size:7pt; }
.portrait .evolution small { font-size:6pt; }
@media print { * { print-color-adjust:exact; -webkit-print-color-adjust:exact; } body { margin:0; } }