#spelling-practice[data-lesson-device] #typing-virtual-keyboard,
#spelling-practice[data-lesson-device] [data-spelling-translation],
#spelling-practice[data-lesson-device] [data-compact-spelling-english] { transition-property: color, opacity !important; }
#spelling-practice[data-compact-keyboard] #typing-virtual-keyboard {
  transform: translateY(var(--compact-key-down)) scale(var(--compact-key-zoom));
  transform-origin: center var(--compact-key-origin);
}
#spelling-practice[data-compact-keyboard] #typing-virtual-keyboard > div:last-child > div { column-gap: var(--compact-key-gap-x) !important; }
#spelling-practice[data-compact-keyboard] #typing-virtual-keyboard > div:last-child > div { margin-block: 0 !important; }
#spelling-practice[data-compact-keyboard] #typing-virtual-keyboard > div:last-child > div:not(:last-child) { margin-bottom: var(--compact-key-gap-y) !important; }
#spelling-practice[data-compact-keyboard][data-lesson-device="tablet"] [data-spelling-translation] { position: relative; top: var(--compact-chinese-down); }
#spelling-practice[data-compact-keyboard][data-lesson-device="tablet"] [data-compact-spelling-english] { position: relative; top: var(--compact-english-down); }

/* Stable tablet anchors: annotations grow downward, never recenter the sentence. */
#sentence-game[data-tablet-sort] { display: block !important; height: 100% !important; min-height: 0 !important; max-width: none !important; padding: 0 24px !important; overflow-y: auto !important; scrollbar-gutter: stable; transition: none !important; }
#sentence-game[data-tablet-sort] > .flex-grow { display: none !important; }
#sentence-game[data-tablet-sort] > [data-sort-translation] { position: sticky !important; top: max(12px, calc(40% - var(--sort-key-height) - var(--sort-key-height) - var(--sort-key-height))) !important; left: 0 !important; width: 100% !important; margin: 0 !important; }
#sentence-game[data-tablet-sort] > [data-sort-translation] h3 { font-size: var(--sort-chinese-size) !important; white-space: normal !important; overflow: visible !important; font-family: Inter,ui-sans-serif,system-ui,sans-serif !important; letter-spacing: .1em !important; line-height: 1.5 !important; }
#sentence-game[data-tablet-sort] > [data-sort-body] { position: absolute !important; top: calc(48% + var(--sort-key-height)) !important; left: 24px !important; width: calc(100% - 48px) !important; padding-bottom: 20px !important; }
#sentence-game[data-tablet-sort] [data-sort-board] { min-height: 0 !important; margin: 0 !important; padding: 0 !important; align-items: flex-start !important; transition: none !important; }
#sentence-game[data-tablet-sort] [data-sort-board][data-sort-empty="true"] { display: none !important; }
#sentence-game[data-tablet-sort] [data-sort-pool] { margin-top: 16px !important; }
#sentence-game[data-tablet-sort] [data-sort-board][data-sort-empty="true"] ~ [data-sort-pool] { margin-top: 0 !important; }

/* Preserve configured tablet sentence size against installed-shell short-screen rules. */
html:root .learning-main-canvas #sentence-game[data-tablet-sort] :is(button[data-sentence-token],button[data-sentence-slot]:not([data-slot-state="empty"])) { font-size:var(--sort-english-size)!important; }

/* Inline content: empty space remains part of the existing page-turn surface. */
.word-extension-open{position:relative;z-index:11;flex:1 1 0;min-height:0;min-width:0;width:100%;display:flex;flex-direction:column;gap:10px;padding:6px 12px;background:transparent!important;border:0;box-shadow:none;color:var(--lesson-color-canvas-ink,#fff);font-family:"Segoe UI","Microsoft YaHei",sans-serif;text-shadow:none;container-type:inline-size}
.word-extension-open .word-extension-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;flex:none;padding:0 4px 8px;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);background:transparent}
.word-extension-heading h2{margin:0;font-size:30px!important;line-height:1.3;overflow-wrap:anywhere;font-weight:750;color:inherit}
.word-extension-heading>span{font-size:14px;opacity:.75}
.word-extension-scroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;padding:4px 10px 30px 4px;scrollbar-width:thin;scrollbar-gutter:stable}
.word-extension-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,68px);align-items:start}
.word-extension-columns[data-columns=one]{grid-template-columns:minmax(0,1fr)}
.word-extension-columns>section{min-width:0;background:transparent!important;border:0;box-shadow:none}
.word-extension-columns h3{font-size:14px;line-height:1.5;letter-spacing:.04em;margin:0 0 5px;color:inherit;opacity:.75;font-weight:650}
.word-extension-columns ul{list-style:none;padding:0;margin:0}
.word-extension-item{min-width:0;padding:9px 0 11px;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.word-extension-wordline{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;row-gap:2px}
.word-extension-open .word-extension-pronounce{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:3px 5px;margin-left:-5px;background:transparent!important;border:0!important;border-radius:7px;box-shadow:none!important;color:inherit!important;font:inherit;font-size:39.4667px!important;font-weight:700;line-height:1.35;cursor:pointer;text-align:left;touch-action:manipulation}
.word-extension-pronounce>span{font-size:inherit!important;min-width:0;overflow-wrap:anywhere;color:inherit!important}.word-extension-pronounce svg{width:16px;height:16px;flex-shrink:0;opacity:.6}
.word-extension-pronounce:hover,.word-extension-pronounce:focus-visible{outline:2px solid currentColor;outline-offset:2px}.word-extension-pronounce:active{opacity:.72}
.word-extension-ipa{font-family:"Charis SIL","Doulos SIL","Times New Roman",serif;font-size:18px!important;line-height:1.5;opacity:.85;overflow-wrap:anywhere}
.word-extension-meaning{font-size:18px!important;line-height:1.65;margin:0!important;overflow-wrap:anywhere;color:inherit!important}.word-extension-pos{font-size:.9em;opacity:.8}
.word-extension-empty{font-size:16px;opacity:.75;text-align:center;padding:24px}
@container (max-width:540px){.word-extension-columns{grid-template-columns:minmax(0,1fr);gap:22px}}
@media(max-height:650px){.word-extension-open{gap:5px;padding-top:0}.word-extension-heading h2{font-size:30px!important}.word-extension-item{padding:4px 0 7px}.word-extension-open .word-extension-heading{padding-bottom:4px}}