/* A a: content starts below the compact lesson header. Motion is Timeline-owned. */
.vi-illustration{left:4%;right:4%;top:13%;bottom:14%}
.vi-context .vi-illustration{left:5%;right:5%;top:12%;bottom:29%}
.vi-letter-forms{padding:14vh 4vw 14vh}
.vi-pronunciation{padding:14vh 4vw 14vh;gap:8vw}
.vi-mouth-card{height:62vh}
.vi-match{padding-top:13vh;padding-bottom:35vh}
.vi-match:has(.vi-demo-row){padding-top:13vh;padding-bottom:14vh}
.vi-independent{padding:14vh 4vw 34vh}
.vi-word-touch{min-height:1.45em}
.vi-word-touch:focus-visible{outline:4px solid #efb310;outline-offset:4px}
.vi-selected{background:#fff0b7;outline:4px solid #efb310;outline-offset:3px}
#lesson:has(.turn-chip) .vi-illustration{left:22%;right:3%;top:13%;bottom:15%}
#lesson:has(.turn-chip) .vi-pronunciation{padding-left:23vw;gap:3vw}
#lesson[data-unit="v-writing"] .vi-print-reference{top:30%;left:3%;width:17%}
.vi-summary.vi-review{flex-direction:column;justify-content:center;gap:2vh;padding:12vh 5vw 14vh}
.vi-summary .vi-forms-row{gap:3vw}
.vi-summary .vi-letter-card{min-width:20vw;padding:1vh 3vw}
.vi-summary .vi-letter-card>.vi-glyph{font-size:clamp(74px,25vh,300px)}
.vi-summary .vi-card-label{font-size:clamp(15px,3vh,32px)}
.vi-memory-row{display:flex;justify-content:center;gap:2vw;width:66vw}
.vi-memory{margin:0;width:21vw;max-width:360px;padding:.6vh;border:2px solid #fff;border-radius:2vh;background:#fffaf0;box-shadow:0 3px 0 #0788b821;overflow:hidden}
.vi-memory img{display:block;width:100%;height:13vh;object-fit:contain;border-radius:1.4vh}
.vi-memory svg{display:block;width:100%;height:13vh;background:#f1fbff;border-radius:1.4vh}
.vi-memory figcaption{font-size:clamp(13px,2.7vh,28px);line-height:1.25;text-align:center;margin:.4vh 0 0}
#lesson:has(.turn-chip) .vi-summary{padding-left:23vw}
.vi-summary .turn-chip{flex-shrink:0}

/* Paired forms and letters inside familiar words remain learning activities. */
.vi-pair-scene,.vi-word-task{padding:14vh 5vw 35vh}
.vi-pair-row{display:flex;align-items:center;justify-content:center;gap:3vw}
.vi-pair-row .vi-letter-card{min-width:21vw;padding:1vh 3vw}
.vi-pair-row .vi-letter-card>.vi-glyph{font-size:25vh}
.vi-pair-row .vi-card-label{font-size:3.3vh}
.vi-pair-arrow{font-size:8vh;color:#328da3}
.vi-pair-space{width:25vw;height:35vh;display:flex;align-items:center;justify-content:center;border:3px dashed #66c7d3;border-radius:4vh;font-size:20vh;color:#5f95a5;background:#ffffff65}
.vi-pair-space.is-matched{border-color:transparent;background:transparent}
.vi-word-display{display:flex;justify-content:center;align-items:center;padding:2vh 4vw;border:3px solid #fff;border-radius:4vh;background:#fffdf1;box-shadow:0 6px 0 #17899b24;gap:.06em;font-size:clamp(86px,27vh,310px);line-height:1}
.vi-word-display .vi-word-part{font-size:inherit;min-width:.5em;text-align:center}
.vi-word-display .vi-target-letter{color:#c52270;background:#fff0a9;border-radius:.14em}
#lesson:has(.vi-pair-scene) #answers .answer .vi-glyph,#lesson:has(.vi-word-task) #answers .answer .vi-glyph,#lesson:has(.vi-game) #answers .answer .vi-glyph{font-size:clamp(45px,12vh,130px)}

/* A separate nine-turn garden game, with no time limit or score. */
.vi-game{inset:13% 4% 34%;flex-direction:column;gap:1vh;border:3px solid #fff;border-radius:4vh;background:linear-gradient(180deg,#f8fff2 0%,#e4f7d6 86%,#b9e2a4 100%);box-shadow:0 7px 0 #168ba421;padding:1.5vh 2vw;overflow:visible}
.vi-game-heading{display:flex;align-items:center;justify-content:space-between;gap:2vw;width:100%;flex:none}
.vi-game-heading h2{font-size:clamp(18px,3.7vh,38px);line-height:1.15;margin:0;color:#256d59}
.vi-game-phase{font-size:clamp(13px,2.7vh,27px);padding:.2em .8em;background:#ffffffc9;border-radius:999px;color:#376951;white-space:nowrap}
.vi-game-stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:3vw}
.vi-game-stage>.vi-letter-card{min-width:14vw;padding:1vh 3vw;gap:.5vh;border-radius:3vh}
.vi-game-stage>.vi-letter-card>.vi-glyph{font-size:18vh}
.vi-game-stage .vi-card-label{font-size:2.7vh}
.vi-game-stage.is-review{gap:1.5vw}
.vi-game-stage.is-review .vi-letter-card{min-width:12vw;padding:1vh 2vw}
.vi-game-stage.is-review .vi-word-display{font-size:16vh;padding:1vh 2vw}
.vi-game-sign{display:flex;align-items:center;justify-content:center;gap:2vw;font-size:16vh;padding:1vh 4vw;background:#ffffffb8;border:3px solid #fff;border-radius:3vh}
.vi-game-sign .vi-glyph{font-size:inherit;color:#7d9d91}
.vi-game .vi-word-display{font-size:21vh;padding:1vh 4vw;border-radius:3vh}
.vi-game .vi-game-listen{height:22vh;width:22vh;background:#fff7b8;border-width:3px;box-shadow:none}
.vi-game-garden{display:flex;align-items:flex-end;justify-content:center;gap:.8vw;width:100%;height:8vh;flex:none;padding-top:.5vh}
.vi-game-flower{position:relative;flex:1;min-width:0;max-width:7vw;height:100%;display:flex;align-items:flex-end;justify-content:center}
.vi-game-flower:before{content:'';position:absolute;width:60%;height:18%;bottom:0;background:#71a971;border-radius:50%}
.vi-game-flower img{height:100%;width:100%;object-fit:contain;opacity:0}
.vi-game-flower.is-bloomed img{opacity:1}
.vi-game-flower.is-bloomed:before{opacity:0}
@media(max-height:450px) and (orientation:landscape){
  .vi-game{inset:17% 4% 34%;border-width:2px;padding:1vh 2vw}
  .vi-game-heading h2{font-size:3.6vh}.vi-game-phase{font-size:2.6vh}
  .vi-game-garden{height:7vh}.vi-game-sign{font-size:14vh}
  .vi-game-stage>.vi-letter-card>.vi-glyph{font-size:15vh}
  .vi-pair-scene,.vi-word-task{padding-top:18vh}
}