/* One grid column per character and reading, shared by every skin and viewport. */
.flashcard #contentState:has(.word-aligned){width:100%;min-width:0}
.flashcard .glyph:has(.word-aligned){width:100%;height:auto;min-height:0;display:block;container-type:inline-size}
.flashcard .word.word-aligned{--word-gap:8px;--word-cell:min(27cqh,calc((100cqw - (var(--word-columns) - 1) * var(--word-gap) - 4px)/var(--word-columns)),120px);display:grid;grid-template-columns:repeat(var(--word-columns),var(--word-cell));justify-content:safe center;align-items:start;gap:12px var(--word-gap);width:100%;min-width:0;max-width:100%;max-height:58cqh;overflow:auto;padding:2px;letter-spacing:0;line-height:1}
.word-unit{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;width:var(--word-cell)}
.flashcard .word-aligned .word-cell{display:grid;place-items:center;position:relative;width:var(--word-cell);height:var(--word-cell);flex-shrink:0;border:1px solid #d8ccb7;font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:calc(var(--word-cell)*.78);font-weight:500;line-height:1;letter-spacing:0;isolation:isolate}
.word-aligned .word-cell:before,.word-aligned .word-cell:after{content:"";position:absolute;z-index:-1;pointer-events:none}
.word-aligned .word-cell:before{left:0;right:0;top:50%;border-top:1px dashed #e1d6c3}
.word-aligned .word-cell:after{top:0;bottom:0;left:50%;border-left:1px dashed #e1d6c3}
.flashcard .word-aligned .word-syllable{display:block;width:100%;max-width:100%;min-width:0;font-family:"Avenir Next",-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;font-size:clamp(12px,calc(var(--word-cell)*.22),26px);font-weight:650;line-height:1.5;letter-spacing:0;color:var(--skin-accent);text-align:center;overflow-wrap:anywhere}
#subText.word-pinyin[hidden]{display:none!important}
@media(orientation:landscape) and (min-width:620px) and (max-height:600px){.flashcard .word.word-aligned{--word-gap:6px;--word-cell:min(34cqh,calc((100cqw - (var(--word-columns) - 1) * var(--word-gap) - 4px)/var(--word-columns)),94px)}.word-unit{gap:4px}.flashcard .word-aligned .word-syllable{font-size:clamp(12px,calc(var(--word-cell)*.21),20px)}}