/* One complete composition, scaled as a whole. No independent type or artwork resizing. */
.hint-inline{width:100%;max-width:450px;justify-self:center;min-width:0}
.hint-inline>.auri-help{width:var(--hint-display-width,100%);margin-left:auto;margin-right:auto}
.hint-scale-box{position:relative;margin:0 auto;overflow:clip;width:var(--hint-display-width,100%)}
.hint-scale-canvas{position:absolute;left:0;top:0;width:520px;container-type:inline-size;transform-origin:top left}
.be-hint>.hint-scale-box>.hint-scale-canvas{width:780px}
.have-hint>.hint-scale-box>.hint-scale-canvas{width:680px}
.pf-hint>.hint-scale-box>.hint-scale-canvas{width:1000px}
.hint-scale-canvas>.be-paper,.hint-scale-canvas>.grammar-paper{width:100%;box-sizing:border-box}
.hint-scale-canvas .be-grade span,.hint-viewer-canvas .be-grade span{margin-top:0}
.hint-inline>.be-expand,.hint-inline>.have-expand,.hint-inline>.hint-expand{display:block;margin:5px max(0px,calc((100% - var(--hint-display-width,100%))/2)) 0 auto;font-size:14px;min-height:30px}
.material-review-mode .lesson-layout.has-hint{max-width:1080px!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;margin:0 auto}
.material-review-mode .rule-training-counter{display:none}
.lesson-layout.practice-layout.grammar-practice:not(.has-hint){max-width:580px!important;margin-left:auto;margin-right:auto}
.material-review-mode .have-hint .grammar-paper{padding:18px}
.material-review-mode .have-hint .have-columns{gap:14px}
.rule-overview .hint-inline.grammar-hint{padding:0;border:0;background:transparent}
.rule-overview .hint-inline .grammar-paper{padding:18px;border:1px solid #e5ce8c;background:#fff7dc;border-radius:18px}
.rule-overview .hint-inline .grammar-paper h2{font-size:clamp(22px,5.5cqw,29px);line-height:1.2;text-align:center;margin:0 0 16px}
.rule-overview .hint-inline .grammar-intro{padding:14px;font-size:16px;text-align:center;background:#eaf6fc}
.rule-overview .hint-inline .grammar-art{display:block}
.rule-overview .hint-inline .grammar-column{padding:12px 9px}
.rule-overview .hint-inline .grammar-column>h3:has(mark){font-size:32px}
.rule-overview .hint-inline .grammar-example{font-size:clamp(16px,3.5cqw,21px);background:#fffcf7}
.rule-overview .hint-inline .be-grade{margin-top:18px;font-size:14px}
.rule-overview .hint-inline .grammar-sound{min-height:38px;width:38px;height:38px;padding:9px}
.rule-overview .hint-inline.can-hint .grammar-intro{background:#ffedc3}
.rule-overview .hint-inline.have-hint .grammar-paper{background:#fffaf0}
.rule-overview .hint-inline.have-hint .grammar-intro{background:#fff0ce}
@media(max-width:850px){.material-review-mode .lesson-layout.has-hint{grid-template-columns:minmax(0,1fr)}.hint-inline{justify-self:center}}
.grammar-expand.hint-viewer{padding:12px;width:min(830px,96vw);max-height:94vh;max-height:94dvh;overflow:hidden;background:#fffcf7}
.hint-viewer[open]{display:flex;flex-direction:column;gap:8px}
.hint-viewer-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none}
.hint-viewer-tools button{min-height:44px;min-width:44px;padding:6px 12px;font-size:16px;background:#fff8e7;border-color:#e5d9ba}
.hint-viewer-tools .dialog-close{position:static;margin-left:12px;font-size:24px;line-height:1}
.hint-viewer-viewport{overflow:auto;min-height:0;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.hint-viewer-box{position:relative;margin:0 auto}
.hint-viewer-canvas{position:absolute;top:0;left:0;transform-origin:top left;container-type:inline-size}
.hint-viewer-canvas>.rule-card{width:100%;max-width:none}
@media(max-width:850px){.hint-inline>.be-expand,.hint-inline>.have-expand,.hint-inline>.hint-expand{min-height:44px}.review-navigation button{min-height:40px}}
@media(max-width:760px){.review-selectors select{font-size:16px;min-height:44px}}
@media(max-width:380px){.review-navigation>div{gap:4px}.review-navigation button{padding:6px;font-size:13px;white-space:nowrap}.review-navigation span{min-width:44px;font-size:13px}}