.listen-group{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}.slow-button{background:none;border:0;padding:3px 6px;color:var(--accent);font-size:12px;text-decoration:underline;text-underline-offset:3px}.stroke-frame{display:block;object-fit:contain;width:84%;height:82%;image-rendering:auto;mix-blend-mode:multiply;z-index:1}.frame-counter{position:absolute;right:12px;bottom:10px;font-size:12px;color:var(--muted);background:#ffffffe0;padding:3px 6px;border-radius:4px}.shape-study-label{position:absolute;bottom:14px;font-size:12px;color:var(--muted)}.practised-mark{position:absolute;right:4px;top:1px;font-size:11px;color:var(--blue)}.word-list{display:flex;flex-direction:column;gap:5px}.word-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:white;border:1px solid transparent;border-radius:7px;padding:9px 8px}.word-tile:hover{background:var(--bg)}.word-tile.selected{background:var(--accent-light);border-color:#e4b6a8}.word-tile [lang=ne]{font-size:22px}.word-tile>span:last-child{font-size:12px;color:var(--muted);text-align:right;max-width:100px}.word-tile.selected [lang=ne]{color:var(--accent)}.banner-glyph.is-word{font-size:38px;max-width:230px}.word-trace{font-size:85px;padding-top:18px;white-space:nowrap;width:100%;text-align:center;letter-spacing:0}.trace-guide.compare{color:#c4482570}.word-model{width:100%;text-align:center;z-index:1}.word-model>div:first-child{font-size:73px;line-height:1.7}.word-model>small{font-size:15px;color:var(--muted)}.syllables{display:flex;gap:10px;align-items:center;justify-content:center;margin:5px 0 15px}.syllables>span{font-size:24px;border:1px solid var(--line);background:white;border-radius:8px;padding:8px 12px 3px}.syllables>span.active{color:var(--accent);background:var(--accent-light);border-color:var(--accent)}.word-parts{word-spacing:6px}.component-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.component-button{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:5px 9px;font-size:12px}.component-button [lang=ne]{font-size:20px;vertical-align:middle;margin-right:3px}.word-example>div{min-width:0}.word-example p{max-width:70ch}.card-caption{line-height:1.6;min-height:40px}.diagram-area:after{z-index:0}.drawing-area:after{top:26%}.guide-toggle,.guide-toggle span{font-size:14px}.speed-label select{font-size:13px;max-width:94px}.pill{font-size:12px}.brand-sub{font-size:11px}.library-note{font-size:14px}.word-tile>span:last-child{font-size:13px}.card-heading{flex-wrap:wrap;row-gap:8px}.learning-notes summary{min-height:28px}.trace-guide.word-trace{font-size:clamp(45px,6vw,85px)}
@media(max-width:1100px) and (min-width:801px){.practice-columns{grid-template-columns:1fr 1fr}.card-heading h2{font-size:15px}.card-heading .pill,.guide-toggle{font-size:12px}.guide-toggle span{font-size:12px}.pad-controls .dark-button{font-size:12px}.icon-text-button{padding:7px 5px;font-size:13px}.banner-glyph.is-word{font-size:32px}.word-model>div:first-child{font-size:60px}}
@media(max-width:800px){.library{max-height:280px;overflow-y:auto}.letter-grid{scrollbar-width:thin}.word-list{flex-direction:row;overflow-x:auto}.word-tile{flex-direction:column;gap:2px;flex-shrink:0;border-color:var(--line);min-width:80px}.word-tile>span:last-child{text-align:center}.word-model>div:first-child{font-size:60px}.trace-guide.word-trace{font-size:70px}}
/* Source frames have different canvas sizes. Their measured viewBox preserves
   proportions and puts visible ink in a stable area throughout the animation. */
#diagram-area .stroke-frame{position:absolute;inset:9% 10% 13%;width:80%;height:78%;max-width:none;max-height:none;overflow:hidden}
#diagram-area .shape-study-canvas{display:block;width:88%;height:86%;object-fit:contain;z-index:1}
.watch-controls[hidden]{display:none}
#stroke-caption .component-button{margin:6px 5px 0 0;min-height:44px}
.word-model{max-height:100%;overflow:auto;padding:12px}
.word-model>div:first-child{overflow-wrap:anywhere}
.syllables{flex-wrap:wrap;gap:7px}
@media(max-width:580px){.library{max-height:260px}.library-group{margin-right:0}.letter-grid{gap:6px}.brand-sub{font-size:9px;letter-spacing:1.5px}.banner-glyph.is-word{font-size:29px;max-width:130px}.lesson-banner:has(.is-word){flex-wrap:wrap}.lesson-banner:has(.is-word) .letter-identity{flex-wrap:wrap}.listen-group{margin-left:auto}.lesson-banner:has(.is-word) .letter-identity{max-width:calc(100% - 88px);gap:7px}.word-model>div:first-child{font-size:65px}.trace-guide.word-trace{font-size:75px}.guide-toggle,.guide-toggle span{font-size:13px}.card-heading .pill{font-size:12px}.word-example:has(.word-parts){display:block}.slow-button{font-size:12px;padding:5px}.syllables>span{font-size:22px;padding:8px 10px 3px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}