.flip-character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;align-items:start;margin:20px 0}.flip-character-card{height:205px;perspective:1200px;transition:height .25s ease}.flip-character-card.flipped{height:450px}.flip-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s ease}.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #c5d8f0;border-radius:18px;background:#f3f8ff;overflow:hidden}.flip-card-front{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;color:#254e9b;font:inherit;gap:6px}.flip-char-cn{font-size:66px;line-height:1.15;font-weight:800}.flip-char-py{font-size:17px;color:#285aa4;font-weight:750}.flip-char-en{font-size:15px;color:#27665f}.flip-hint{font-size:14px;color:#607795;margin-top:7px}.flip-card-back{transform:rotateY(180deg);background:white;padding:12px;display:flex;flex-direction:column;align-items:center;cursor:pointer}.flip-back-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;margin-bottom:8px}.flip-back-heading b{font-size:26px;color:#254e9b}.flip-back-button{border:0;background:#edf3ff;color:#285498;border-radius:8px;padding:8px 12px;font-size:14px;min-height:44px}.card-stroke-surface{width:100%;max-width:220px;aspect-ratio:1;border:1px solid #c6d9ed;background:linear-gradient(45deg,transparent 49.7%,#e0e9f4 50%,transparent 50.3%),linear-gradient(-45deg,transparent 49.7%,#e0e9f4 50%,transparent 50.3%),linear-gradient(90deg,transparent 49.7%,#e0e9f4 50%,transparent 50.3%),linear-gradient(transparent 49.7%,#e0e9f4 50%,transparent 50.3%);touch-action:none;cursor:crosshair;flex-shrink:0}.card-stroke-controls{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center}.card-stroke-controls button{padding:8px 13px;min-height:44px;font-size:14px}.card-stroke-controls button:disabled{opacity:.55;cursor:wait}.card-stroke-status{font-size:14px;line-height:1.5;color:#526c91;margin:8px 0 4px;text-align:center;min-height:22px}.paper-practice-link{font-size:14px;color:#254e9b;line-height:1.5;text-underline-offset:3px;margin-top:auto;padding:5px;min-height:44px;display:flex;align-items:center}.hide-pinyin .flip-char-py,.hide-english .flip-char-en{display:none!important}
.practice-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:15px 0}.practice-toolbar a{display:inline-flex;text-decoration:none;align-items:center;min-height:44px}.practice-character-links{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.practice-character-links button{min-height:44px;font-size:22px;padding:8px 15px}.printable-practice{max-width:760px;margin:20px auto;display:grid;gap:24px}.practice-paper-page{position:relative;box-shadow:0 4px 18px #24427217;border:1px solid #dae3ed;background:white;margin:0}.practice-paper-page img{display:block;width:100%;height:auto}.practice-character-anchor{position:absolute;left:6%;right:6%;pointer-events:none;scroll-margin-top:20px;outline:none}.practice-character-anchor:focus{outline:none}
@media(max-width:560px){.flip-character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.flip-character-card{height:190px}.flip-character-card.flipped{grid-column:1/-1;height:450px;max-width:350px;width:100%;justify-self:center}.flip-char-cn{font-size:55px}.flip-char-en{font-size:14px}.flip-hint{font-size:14px;line-height:1.4}.practice-toolbar button,.practice-toolbar a{font-size:14px;padding:11px 13px}}
@media(prefers-reduced-motion:reduce){.flip-character-card,.flip-card-inner{transition:none}}
@media print{
 @page{size:A4;margin:0}
 body.printing-practice{margin:0!important;padding:0!important;background:white!important}
 body.printing-practice header,body.printing-practice .sidebar,body.printing-practice .intro,body.printing-practice .footer-note,body.printing-practice .site-credits,body.printing-practice .audio-player{display:none!important}
 body.printing-practice main{display:block!important;margin:0!important;padding:0!important;max-width:none!important}
 body.printing-practice .stage{display:block!important}
 body.printing-practice .workspace{margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:0!important}
 body.printing-practice .workspace>*:not(#printable-practice){display:none!important}
 body.printing-practice #printable-practice{display:block!important;margin:0!important;padding:0!important;max-width:none!important}
 body.printing-practice .practice-paper-page{width:210mm;height:297mm;margin:0!important;border:0!important;box-shadow:none!important;break-after:page;page-break-after:always;break-inside:avoid}
 body.printing-practice .practice-paper-page:last-child{break-after:auto;page-break-after:auto}
 body.printing-practice .practice-paper-page img{width:210mm;height:297mm;object-fit:contain}
 body.printing-practice .practice-character-anchor{display:none!important}
}