/*
 * Teemo Travels — mobile & tablet layer.
 *
 * Injected LAST by scripts/build-mobile-release.py. The scene is a stack of
 * !important patches, so rules here start with `html body:not(#tt)`: the
 * :not(#tt) adds id-level specificity, which beats every class-based patch
 * without having to mirror each selector. Only inline !important styles can
 * win against it (those are removed in teemo-mobile.js).
 *
 *   compact  = phones in landscape, small tablets  (height <= 600 or width <= 1000)
 *   large    = iPads, laptops, desktops             (width > 1000 and height > 600)
 */

/* ================================================================== */
/* Everywhere: touch hygiene                                          */
/* ================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
/* A game, not a document: a stray double tap or drag must not select the
   page (it washed the whole scene blue). Typing stays possible where it's meant. */
html body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html body :is(input,textarea,[contenteditable="true"]){-webkit-user-select:text;user-select:text}
html body #canvas{touch-action:none}
html body #canvas>img:not(.canvas-image),
html body #canvas>.scene-text-item{touch-action:none;-webkit-touch-callout:none;-webkit-user-drag:none}
html body #assetGrid .asset,
html body #assetGrid .asset img,
html body [data-tt-role="task-panel"] img,
html body [data-tt-role="lesson-modal"] img{-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
/* Sideways-scrolling item strip: large screens only. On phones the list is a vertical
   column (see COMPACT), and these rules would stop it scrolling. */
@media (min-height:601px) and (min-width:1001px){
  html body:not(#tt) .workspace>.assets:not(.expanded)>.asset-grid{touch-action:pan-x}
  html body:not(#tt) .workspace>.assets.expanded>.asset-grid{touch-action:pan-y}
}

@media (pointer:coarse) and (min-height:601px) and (min-width:1001px){
  html body:not(#tt) .workspace>.assets:not(.expanded)>.asset-grid{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html body:not(#tt) .workspace>.assets:not(.expanded)>.asset-grid::-webkit-scrollbar{display:none}
  html body:not(#tt) .workspace>.assets:not(.expanded)>.asset-grid>.asset{scroll-snap-align:start}
}

/* While a finger drag is active, stop the item list scrolling under the finger. */
html.tt-dragging body:not(#tt) #assetGrid{overflow:hidden!important;scroll-snap-type:none!important}

/* Finger-drag ghost (lives on <html>, outside the game's body observers). */
html>.tt-drag-ghost{position:fixed;left:0;top:0;z-index:2147483600;width:78px;height:78px;object-fit:contain;pointer-events:none;opacity:.94;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));will-change:transform}
html>.tt-drag-ghost.tt-drag-ghost-text{display:grid;place-items:center;border:3px solid #4775e7;border-radius:12px;background:#fff;color:#4775e7;font:900 34px/1 Arial,sans-serif}

/* ================================================================== */
/* Rotate-to-landscape prompt                                         */
/* ================================================================== */
html>.tt-rotate{display:none}
@media (orientation:portrait) and (pointer:coarse) and (max-width:1100px){
  html>.tt-rotate{position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;background:#102b53;color:#fff;font:800 24px/1.25 Arial,sans-serif;text-align:center}
  html>.tt-rotate p{margin:0}
  html>.tt-rotate small{display:block;margin-top:8px;font-size:16px;font-weight:600;opacity:.85}
  html>.tt-rotate .tt-rotate-phone{width:58px;height:96px;box-sizing:border-box;border:5px solid #fff;border-radius:14px;box-shadow:inset 0 -10px 0 -6px #fff;animation:tt-turn 2.4s ease-in-out infinite}
}
@keyframes tt-turn{0%,22%{transform:rotate(0)}50%,78%{transform:rotate(-90deg)}100%{transform:rotate(0)}}

/* ================================================================== */
/* Menu                                                               */
/* ================================================================== */
html body:not(#tt) .tt-menu-btn{display:none}
html>.tt-menu{position:fixed;z-index:2147483500;min-width:230px;max-height:calc(100dvh - 20px);overflow:auto;display:flex;flex-direction:column;gap:4px;padding:8px;box-sizing:border-box;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(20,30,60,.3);font:800 16px/1.1 "Nunito","Segoe UI",Arial,sans-serif;color:#1c2b5a}
html>.tt-menu[hidden]{display:none}
html>.tt-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;color:#1c2b5a;cursor:pointer}
html>.tt-menu button:active{background:#eef3fb}
html>.tt-menu button[hidden]{display:none}
html>.tt-menu button:disabled{opacity:.4}
html>.tt-menu .tt-ic{width:21px;height:21px;flex:0 0 21px;color:#2166e8}
html>.tt-menu hr{border:0;border-top:1px solid #e6ebf3;margin:2px 4px}
html>.tt-menu .tt-menu-volume{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px}
html>.tt-menu .tt-menu-volume input{flex:1;min-width:0;height:28px;accent-color:#2166e8}
html>.tt-menu .tt-menu-voice{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px 0 12px}
html>.tt-menu .tt-menu-voice[hidden]{display:none}
html>.tt-menu .tt-menu-voices{display:flex;margin-left:auto;padding:3px;border-radius:12px;background:#eef3fb}
html>.tt-menu .tt-menu-voices button{min-height:38px;padding:0 12px;border-radius:9px;font-size:15px;color:#5a6a93}
html>.tt-menu .tt-menu-voices button[aria-pressed="true"]{background:#2166e8;color:#fff}

/* ================================================================== */
/* Full screen: what to do where the browser will not do it           */
/* ================================================================== */
html>.tt-fs-tip{position:fixed;z-index:2147483520;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;max-width:min(360px,72vw);padding:9px 14px;border:0;border-radius:999px;background:rgba(16,43,83,.92);color:#fff;font:800 14px/1.2 "Nunito","Segoe UI",Arial,sans-serif;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer}
html>.tt-fs-tip .tt-ic{width:18px;height:18px;flex:0 0 18px}
html>.tt-howto{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:16px;background:rgba(12,24,48,.62)}
html>.tt-howto[hidden]{display:none}
html>.tt-howto .tt-howto-card{width:min(460px,92vw);max-height:92dvh;overflow:auto;box-sizing:border-box;padding:18px 20px;border-radius:18px;background:#fff;color:#1c2b5a;font:700 15px/1.4 "Nunito","Segoe UI",Arial,sans-serif;box-shadow:0 18px 44px rgba(10,20,50,.4)}
html>.tt-howto h2{margin:0 0 8px;font-size:20px;color:#102b53}
html>.tt-howto p{margin:0 0 10px}
html>.tt-howto ol{margin:0 0 14px;padding-left:20px}
html>.tt-howto li{margin-bottom:5px}
html>.tt-howto .tt-howto-close{display:block;width:100%;min-height:44px;border:0;border-radius:12px;background:#2166e8;color:#fff;font:900 16px/1 "Nunito",Arial,sans-serif;cursor:pointer}

/* ================================================================== */
/* Task: minimise instead of losing it                                */
/* ================================================================== */
html body:not(#tt) .tt-task-pill{display:none}
html.tt-task-min body:not(#tt) [data-tt-role="task-panel"]{display:none!important}
html.tt-task-min body:not(#tt) .scene-head .tt-task-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 6px;border:0;border-radius:999px;background:#ffe7a3;color:#3b2a00;font:900 14px/1 "Nunito",Arial,sans-serif;cursor:pointer;box-shadow:0 2px 6px rgba(20,30,70,.18);flex:0 0 auto}
html body:not(#tt) .tt-task-pill img{width:26px;height:26px;object-fit:contain}

/* ================================================================== */
/* Hints: pointing hand                                               */
/* ================================================================== */
html>.tt-hand{position:fixed;left:0;top:0;z-index:2147483550;pointer-events:none;will-change:transform}
html>.tt-hand[hidden]{display:none}
html>.tt-hand .tt-hand-pointer{display:block;width:calc(46px * var(--tt-hand-size,1));height:calc(46px * var(--tt-hand-size,1));transform:translate(-34%,-6%) rotate(var(--tt-hand-turn,0deg));filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));transition:transform .14s ease-out;transform-origin:34% 6%}
html>.tt-hand .tt-hand-svg{display:block;width:100%;height:100%}
html>.tt-hand.tapping .tt-hand-pointer{transform:translate(-34%,-6%) rotate(var(--tt-hand-turn,0deg)) scale(.82)}
html>.tt-hand .tt-hand-tip{position:absolute;left:26px;top:-38px;white-space:nowrap;background:#1c2b5a;color:#fff;font:800 15px/1 "Nunito",Arial,sans-serif;padding:8px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
html>.tt-hand.tip-left .tt-hand-tip{left:auto;right:10px}
html>.tt-hand .tt-hand-tip:empty{display:none}
/* hold-to-talk, shown in a bubble beside the microphone (teemo-mobile.js showHold):
   a small microphone and a finger that presses, holds - the microphone sinks
   and its bars bob, the same "live" look as the real one - and lets go. */
html>.tt-hold-tip{position:fixed;z-index:2147483550;width:104px;height:92px;box-sizing:border-box;border-radius:20px;background:#fff;box-shadow:0 6px 20px rgba(20,30,70,.28);pointer-events:none}
html>.tt-hold-tip[hidden]{display:none}
html>.tt-hold-tip::after{content:"";position:absolute;width:18px;height:18px;background:#fff;transform:rotate(45deg);border-radius:3px}
html>.tt-hold-tip[data-side="right"]::after{left:-8px;top:calc(var(--tail-y,46px) - 9px)}
html>.tt-hold-tip[data-side="left"]::after{right:-8px;top:calc(var(--tail-y,46px) - 9px)}
html>.tt-hold-tip[data-side="above"]::after{bottom:-8px;left:calc(var(--tail-x,52px) - 9px)}
html>.tt-hold-tip[data-side="below"]::after{top:-8px;left:calc(var(--tail-x,52px) - 9px)}
html>.tt-hold-tip .tt-hold-mic{position:absolute;left:29px;top:16px;width:46px;height:46px;border-radius:50%;background:var(--tt-w-mic) center/46% no-repeat,#367bf0;box-shadow:0 2px 6px rgba(20,30,70,.18)}
html>.tt-hold-tip .tt-live{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;opacity:0}
html>.tt-hold-tip .tt-live i{display:block;width:4px;height:15px;border-radius:2px;background:#fff;animation:tt-bob .8s ease-in-out infinite}
html>.tt-hold-tip .tt-live i:nth-child(2){animation-delay:-.3s;height:20px}
html>.tt-hold-tip .tt-live i:nth-child(3){animation-delay:-.55s}
html>.tt-hold-tip .tt-hold-finger{position:absolute;left:38px;top:37px;width:40px;height:40px;transform-origin:34% 6%;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
html>.tt-hold-tip .tt-hold-finger svg{display:block;width:100%;height:100%}
html>.tt-hold-tip.play .tt-hold-finger{animation:tt-tip-finger 2.2s ease-in-out 2}
html>.tt-hold-tip.play .tt-hold-mic{animation:tt-tip-mic 2.2s ease-in-out 2}
html>.tt-hold-tip.play .tt-live{animation:tt-tip-bars 2.2s linear 2}
@keyframes tt-tip-finger{0%{opacity:0;transform:translate(22px,24px)}16%{opacity:1;transform:translate(0,0)}24%,76%{opacity:1;transform:translate(0,0) scale(.84)}84%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(22px,24px)}}
@keyframes tt-tip-mic{0%,23%,79%,100%{background:var(--tt-w-mic) center/46% no-repeat,#367bf0;box-shadow:0 2px 6px rgba(20,30,70,.18);transform:none}25%,77%{background:#2c88f0;box-shadow:none;transform:scale(.96)}}
@keyframes tt-tip-bars{0%,24%,78%,100%{opacity:0}26%,76%{opacity:1}}
/* the same bubble teaching "let go": pressed and listening, then the finger lifts
   and goes back down the way every hand comes and goes, never up over the bubble */
html>.tt-hold-tip[data-lesson="letgo"].play .tt-hold-finger{animation:tt-tip-letgo-finger 1.8s ease-in-out 2}
html>.tt-hold-tip[data-lesson="letgo"].play .tt-hold-mic{animation:tt-tip-letgo-mic 1.8s ease-in-out 2}
html>.tt-hold-tip[data-lesson="letgo"].play .tt-live{animation:tt-tip-letgo-bars 1.8s linear 2}
@keyframes tt-tip-letgo-finger{0%,40%{opacity:1;transform:translate(0,0) scale(.84)}55%{opacity:1;transform:translate(0,0) scale(1)}85%,100%{opacity:0;transform:translate(22px,24px)}}
@keyframes tt-tip-letgo-mic{0%,42%{background:#2c88f0;box-shadow:none;transform:scale(.96)}50%,100%{background:var(--tt-w-mic) center/46% no-repeat,#367bf0;box-shadow:0 2px 6px rgba(20,30,70,.18);transform:none}}
@keyframes tt-tip-letgo-bars{0%,40%{opacity:1}48%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){html>.tt-hold-tip.play *{animation-iteration-count:1!important}}
html>.tt-hint-ghost{position:fixed;left:0;top:0;width:72px;height:72px;object-fit:contain;z-index:2147483540;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
html body:not(#tt) .tt-hint-ring{outline:4px solid #ffc93c!important;outline-offset:-3px!important;animation:tt-glow 1s ease-in-out infinite!important}
@keyframes tt-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,201,60,.0)}50%{box-shadow:0 0 0 8px rgba(255,201,60,.55)}}

/* ================================================================== */
/* Selected-item toolbar (compact screens replace the right panel)    */
/* ================================================================== */
html>.tt-itembar{position:fixed;z-index:2147483400;left:calc(var(--tt-stage-l,0px) + var(--tt-stage-w,0px) / 2);top:calc(var(--tt-stage-t,0px) + var(--tt-stage-h,0px) - 8px);transform:translate(-50%,-100%);display:flex;flex-direction:row;align-items:center;gap:5px;padding:5px 6px;background:rgba(255,255,255,.96);border-radius:18px;box-shadow:0 6px 22px rgba(20,30,70,.28)}
html>.tt-itembar[hidden],html.tt-cards-on>.tt-itembar{display:none}
html>.tt-itembar button{all:unset;box-sizing:border-box;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#1c2b5a;background:#eef3fb;cursor:pointer}
html>.tt-itembar .tt-ic{width:21px;height:21px}
html>.tt-itembar button:active{transform:scale(.92)}
html>.tt-itembar button[data-a=delete]{background:#fde7e8;color:#b52a2f}
html>.tt-itembar button[data-a=done]{background:#2166e8;color:#fff}
html>.tt-itembar .tt-size{min-width:36px;text-align:center;font:900 12px/1 "Nunito",Arial,sans-serif;color:#6a7898}

/* ================================================================== */
/* Speaking: one big microphone button                                */
/* ================================================================== */
html body:not(#tt) [data-tt-role="speak-button"],
html body:not(#tt) [data-tt-role="speak-button"]{position:relative!important;display:inline-flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;flex:0 0 auto!important;width:auto!important;min-width:110px!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:2px 0 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#1c2b5a!important;font-size:0!important;line-height:0!important;opacity:1!important;filter:none!important;cursor:pointer!important;white-space:normal!important;overflow:visible!important}
html body:not(#tt) [data-tt-role="speak-button"]::before,
html body:not(#tt) [data-tt-role="speak-button"]::before{content:"";display:block;width:var(--tt-mic-size,66px);height:var(--tt-mic-size,66px);border-radius:50%;background:var(--tt-w-mic) center/46% no-repeat,#367bf0;box-shadow:0 2px 6px rgba(20,30,70,.18)}
html body:not(#tt) [data-tt-role="speak-button"]::after,
html body:not(#tt) [data-tt-role="speak-button"]::after{content:"Hold & talk";font:900 14px/1.1 "Nunito","Segoe UI",Arial,sans-serif;color:#1c2b5a;white-space:nowrap}
html body:not(#tt) [data-tt-role="speak-button"]:disabled::before,
html body:not(#tt) [data-tt-role="speak-button"]:disabled::before{background:var(--tt-w-mic) center/46% no-repeat,#c3ccdb;box-shadow:0 2px 6px rgba(20,30,70,.18);animation:none}
html body:not(#tt) [data-tt-role="speak-button"]:disabled::after,
html body:not(#tt) [data-tt-role="speak-button"]:disabled::after{content:"Listen first";color:#6a7898}
/* LIVE - listening. It starts the instant a finger is down (.tt-held), not when
   the recogniser is ready or the first word arrives, so a press never looks
   ignored: the button shrinks a little, the microphone turns into bars that bob even in
   silence and grow with the voice, and rings go out. Blue, not red - red read
   as "something is wrong". */
html body:not(#tt) .tt-held::before,
html.tt-listening body:not(#tt) .tt-say-active::before{background:#2c88f0!important;box-shadow:none!important;transform:scale(.96)!important;opacity:1!important;animation:tt-live-ring 2.4s ease-out infinite!important}
html.tt-listening body:not(#tt) .tt-say-active::after{content:"Talk, then let go";color:#1f6fe0}
/* hold to talk (teemo-lesson-core.js): a long press must not scroll, select
   text or open the phone's callout menu */
html body:not(#tt) [data-tt-role="speak-button"]{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* The bars are the child's voice (Blake, 2026-10-03: "a visual representation
   of the voice... on the actual button"): one band each, low to high
   (--tt-b1..5 from teemo-mobile.js), filling most of the button. They used to
   bob on a fast timer whatever was said - "a little aggressive". */
html body:not(#tt) .tt-live{display:none;position:absolute;left:50%;top:calc(2px + var(--tt-mic-size,66px) / 2 + 4px);transform:translate(-50%,-50%);height:calc(var(--tt-mic-size,66px) * .64);align-items:center;gap:calc(var(--tt-mic-size,66px) * .05);pointer-events:none}
html body:not(#tt) .tt-held .tt-live,
html.tt-listening body:not(#tt) .tt-say-active .tt-live{display:flex}
html body:not(#tt) .tt-live i{display:block;width:calc(var(--tt-mic-size,66px) * .08);border-radius:99px;background:#fff;height:calc(var(--tt-mic-size,66px) * (.1 + var(--tt-b1,0) * .5));transition:height .06s linear;animation:tt-bob 2.4s ease-in-out infinite}
html body:not(#tt) .tt-live i:nth-child(2){height:calc(var(--tt-mic-size,66px) * (.12 + var(--tt-b2,0) * .52));animation-delay:-.5s}
html body:not(#tt) .tt-live i:nth-child(3){height:calc(var(--tt-mic-size,66px) * (.14 + var(--tt-b3,0) * .5));animation-delay:-1s}
html body:not(#tt) .tt-live i:nth-child(4){height:calc(var(--tt-mic-size,66px) * (.12 + var(--tt-b4,0) * .5));animation-delay:-1.5s}
html body:not(#tt) .tt-live i:nth-child(5){height:calc(var(--tt-mic-size,66px) * (.1 + var(--tt-b5,0) * .46));animation-delay:-2s}
@keyframes tt-bob{0%,100%{transform:scaleY(.85)}50%{transform:scaleY(1.15)}}
/* the rings go well past a thumb's edge (they were 22px - all under the finger);
   one every 2.4 s (was 1.2: "really fast pulsing... a little aggressive") */
@keyframes tt-live-ring{0%{box-shadow:inset 0 3px 7px rgba(8,30,90,.35),0 0 0 0 rgba(58,160,255,.6)}100%{box-shadow:inset 0 3px 7px rgba(8,30,90,.35),0 0 0 48px rgba(58,160,255,0)}}
/* While a finger is down, what a thumb can't hide shows it (Blake, 2026-10-03):
   the whole speaking panel lights up blue, and the round badge beside the
   sentence turns blue and breathes with the child's voice (--tt-level). Plus
   a sound and, on Android, a buzz (teemo-lesson-core.js blip). */
html.tt-holding body:not(#tt) :is([data-tt-role="practice"],[data-tt-role="inline-card"]:has(.tt-say)){box-shadow:0 0 0 4px rgba(47,140,255,.55),0 0 30px 6px rgba(47,140,255,.4)!important;background-color:#eef6ff!important;transition:box-shadow .15s,background-color .15s}
/* sound waves ripple out from the microphone across the whole panel, stronger
   as the child speaks (Blake: "the whole portion that lights up experiences
   some kind of animation") - teemo-lesson-core.js adds .tt-ripples on press */
html body:not(#tt) :is([data-tt-role="practice"],[data-tt-role="inline-card"]):has(>.tt-ripples,.tt-ripples){isolation:isolate}
html body:not(#tt) [data-tt-role="practice"]:has(>.tt-ripples){position:relative}
html body:not(#tt) .tt-ripples{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s}
html.tt-holding body:not(#tt) .tt-ripples{opacity:1}
html body:not(#tt) .tt-ripples i{position:absolute;left:var(--tt-mx,80%);top:var(--tt-my,50%);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:5px solid rgba(47,140,255,calc(.28 + var(--tt-level,0) * .5));box-sizing:border-box;animation:tt-ripple 3.3s cubic-bezier(.2,.6,.35,1) infinite;opacity:0}
html body:not(#tt) .tt-ripples i:nth-child(3){animation-delay:1.1s}
html body:not(#tt) .tt-ripples i:nth-child(4){animation-delay:2.2s}
/* the voice itself, around the button: a soft blue halo that swells as they
   speak and settles when they stop (--tt-level), past where a thumb covers */
html body:not(#tt) .tt-ripples b{position:absolute;left:var(--tt-mx,80%);top:var(--tt-my,50%);width:var(--tt-ms,62px);height:var(--tt-ms,62px);margin:calc(var(--tt-ms,62px) / -2) 0 0 calc(var(--tt-ms,62px) / -2);border-radius:50%;background:radial-gradient(circle,rgba(47,140,255,.5) 45%,rgba(47,140,255,.22) 68%,rgba(47,140,255,0) 72%);transform:scale(calc(1.15 + var(--tt-level,0) * 1.5));transition:transform .09s linear}
@keyframes tt-ripple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(16);opacity:0}}
@media (prefers-reduced-motion:reduce){html body:not(#tt) .tt-ripples i{animation:none}}
/* The waves (Blake, 2026-10-05: "an ambient wave pattern on the card, and then
   when they talk, it kind of shows the vibrations... instead of this pulsing
   little radar-looking ping thing"): three soft waves drift across the
   panel's lower part while the microphone is held - low when they're quiet,
   rising and falling with the voice (--tt-level). Replaces the rings. */
html body:not(#tt) .tt-ripples>.tt-wave{position:absolute;left:0;bottom:0;width:200%;height:70%;transform-origin:50% 100%;scale:1 calc(.22 + var(--tt-level,0) * 1.1);transition:scale .09s linear;animation:tt-wave-drift 5s linear infinite}
html body:not(#tt) .tt-ripples>.tt-wave path{fill:rgba(47,140,255,.16)}
html body:not(#tt) .tt-ripples>.tt-wave-2{animation-duration:3.6s;animation-direction:reverse;height:55%}
html body:not(#tt) .tt-ripples>.tt-wave-2 path{fill:rgba(47,140,255,.13)}
html body:not(#tt) .tt-ripples>.tt-wave-3{animation-duration:7s;height:85%;scale:1 calc(.15 + var(--tt-level,0) * .8)}
html body:not(#tt) .tt-ripples>.tt-wave-3 path{fill:rgba(120,180,255,.12)}
@keyframes tt-wave-drift{from{translate:0 0}to{translate:-50% 0}}
@media (prefers-reduced-motion:reduce){html body:not(#tt) .tt-ripples>.tt-wave{animation:none}}
html.tt-holding body:not(#tt) .tt-say-turn{background-color:#2f8cff!important;box-shadow:0 0 0 3px #fff,0 0 0 calc(6px + var(--tt-level,0) * 16px) rgba(47,140,255,.4)!important;transform:scale(calc(1 + var(--tt-level,0) * .18));transition:transform .08s linear,box-shadow .08s linear}
html body:not(#tt) [data-tt-role="speak-button"].correct::before,
html body:not(#tt) [data-tt-role="practice"].is-correct [data-tt-role="speak-button"]::before{background:var(--tt-w-check) center/48% no-repeat,#22a45d;box-shadow:0 2px 6px rgba(20,30,70,.18);animation:none}
html body:not(#tt) [data-tt-role="speak-button"].correct::after,
html body:not(#tt) [data-tt-role="practice"].is-correct [data-tt-role="speak-button"]::after{content:"Great!";color:#157a43}
html body:not(#tt) [data-tt-role="practice"].is-incorrect [data-tt-role="speak-button"]:not(:disabled)::after{content:"Hold & try again";color:#b52a2f}
html body:not(#tt) .tt-voicebars{display:none!important}

/* Every button a child taps is at least 44px across, here and in each size
   below (DESIGN.md). The sizes a lesson borrows all come from these rules, so
   one change reaches Lesson 1, Lesson 2, its nights and Lesson 3 at once. */
html body:not(#tt) [data-tt-role="hear-button"],
html body:not(#tt) [data-tt-role="hear-button"]{display:inline-flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important;min-height:44px!important;height:auto!important;margin:0!important;padding:8px 14px!important;border:0!important;border-radius:999px!important;background:#e8f0ff!important;color:#1d55c2!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important;font:800 15px/1.1 "Nunito",Arial,sans-serif!important;white-space:nowrap!important;cursor:pointer!important}
html body:not(#tt) [data-tt-role="step-nav"]{display:inline-flex!important;align-items:center!important;min-height:44px!important;margin:0!important;padding:8px 16px!important;border:0!important;border-radius:999px!important;background:#fac745!important;color:#3b2a00!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important;font:900 15px/1.1 "Nunito",Arial,sans-serif!important;cursor:pointer!important}
html body:not(#tt) [data-tt-role="step-nav"]:disabled{opacity:.35!important;box-shadow:none!important;cursor:default!important}
html body:not(#tt) [data-tt-role="practice"]{border:0!important;border-radius:18px!important;background:#f3f7ff!important;box-shadow:none!important}
html body:not(#tt) [data-tt-role="practice"].is-correct{background:#e8f8ee!important;box-shadow:none!important}
html body:not(#tt) [data-tt-role="practice"].is-incorrect{background:#fff4f4!important;box-shadow:none!important}
/* The microphone is the one thing a child is meant to press, and the only
   round thing on the card, so it belongs on the card's centre line. A centred
   flex row does not put it there: "Hear sentence" is ~160px wide and "Next"
   ~65px, so the row balances around the gap between them and leaves the mic
   some 50px right of centre - which is what reads as "not quite centred".
   Three columns with the mic pinned to the middle one fixes it, and holds
   however many of the three buttons a step actually shows. */
html body:not(#tt) [data-tt-role="practice-actions"]{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;justify-items:center!important;column-gap:18px!important;width:100%!important}
html body:not(#tt) [data-tt-role="practice-actions"]>[data-tt-role="hear-button"]{grid-column:1!important;justify-self:end!important}
html body:not(#tt) [data-tt-role="practice-actions"]>[data-tt-role="speak-button"],
html body:not(#tt) [data-tt-role="practice-actions"]>[data-tt-role="speak-button"]{grid-column:2!important;justify-self:center!important}
html body:not(#tt) [data-tt-role="practice-actions"]>[data-tt-role="step-nav"]{grid-column:3!important;justify-self:start!important}
html body:not(#tt) [data-tt-role="practice-status"]{white-space:normal!important}

/* ================================================================== */
/* Meet Teemo lesson: softer, rounder                                 */
/* ================================================================== */
html body:not(#tt) [data-tt-role="lesson-modal"]{background:rgba(16,32,70,.55)!important}
html body:not(#tt) [data-tt-role="lesson-card"]{border:0!important;border-radius:22px!important;background:#fffdf7!important;box-shadow:0 24px 60px rgba(10,20,50,.35)!important}
html body:not(#tt) [data-tt-role="teemo"]>img{border-radius:16px}
html body:not(#tt) [data-tt-role="close-button"]{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;padding:0!important;border-radius:50%!important;background:#f1ece2!important;color:#24356f!important;font-size:24px!important;line-height:1!important;z-index:5}
/* Story player: play/pause, then replay - round icon buttons (the labels stay as
   accessible names) - then the next step. Scene 2's story reuses both buttons. */
/* room between the words (their underlines sit below them) and the buttons -
   Blake, 2026-10-05: "the buttons are kind of encroaching a little bit on the words" */
html body:not(#tt) .scene1-story-controls{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:10px!important;margin:clamp(10px,calc(var(--su,6px) * 2.6),18px) 0 0!important}
html body:not(#tt) :is(.scene1-story-toggle,.scene1-replay){display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:0!important;flex:0 0 auto!important;width:46px!important;height:46px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:#e8f0ff!important;color:#1d55c2!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important;cursor:pointer}
html body:not(#tt) :is(.scene1-story-toggle,.scene1-replay)[data-tt-icon-only]::before{width:22px;height:22px}
/* the label is still in there at font-size 0: as a grid it took a row of its own
   and pushed the icon up. The play path (teemo-mobile.js ICONS) is already drawn
   with its weight centred; an extra 2px nudge here put it visibly right. */
/* Meet Teemo opens on its title and one big Start (scene1-lesson.js): the
   story and its controls appear with the tap that starts them */
html body:not(#tt) .scene1-start{display:none}
html body:not(#tt) [data-tt-role="lesson-card"].is-start{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;padding:26px 40px 30px!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"].is-start>h2{margin:0!important;font-size:clamp(22px,6.5vh,32px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"].is-start{width:auto!important;min-width:min(40%,360px)!important;bottom:auto!important;top:50%!important;transform:translateY(-50%)!important}
html body:not(#tt) [data-tt-role="lesson-card"].is-start>:not(h2,.scene1-start){display:none!important}
html body:not(#tt) [data-tt-role="lesson-card"].is-start>.scene1-start{all:unset;display:inline-flex;align-items:center;gap:12px;padding:16px 38px 16px 30px;border-radius:999px;background:#fac745;color:#3b2a00;box-shadow:0 2px 6px rgba(20,30,70,.18);font:900 26px/1 "Nunito",Arial,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body:not(#tt) [data-tt-role="lesson-card"].is-start>.scene1-start::before{width:30px;height:30px}
html body:not(#tt) [data-tt-role="lesson-card"].is-start>.scene1-start:active{transform:scale(.96);box-shadow:0 2px 6px rgba(20,30,70,.18)}
html body:not(#tt) [data-tt-role="lesson-card"].is-start>.scene1-start:focus-visible{outline:3px solid #2166e8;outline-offset:3px}
/* Next waits for the story to finish (scene1-lesson.js revealNext), then pops in */
html body:not(#tt) .scene1-story-controls>.scene1-next[hidden]{display:none!important}
html body:not(#tt) .scene1-story-controls>.scene1-next.tt-arrive{animation:tt-next-arrive .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes tt-next-arrive{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
/* the story is waiting for a first tap (audio locked): Play asks for it, with
   a still ring (nothing moves on its own: DESIGN.md) */
html body:not(#tt) .scene1-story-toggle.tt-attention{outline:3px solid #2166e8;outline-offset:3px}
@media (prefers-reduced-motion:reduce){html body:not(#tt) .scene1-story-controls>.scene1-next.tt-arrive{animation:none}}
html body:not(#tt) .scene1-story-controls>[data-tt-role="step-nav"]{margin:0 0 0 6px!important}
html body:not(#tt) [data-tt-role="step-nav"],
html body:not(#tt) [data-tt-role="step-nav"],
html body:not(#tt) [data-tt-role="answer"]{border:0!important;border-radius:999px!important;background:#fac745!important;color:#3b2a00!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important;font-weight:900!important}
html body:not(#tt) [data-tt-role="answer"]:disabled{opacity:.4!important;box-shadow:none!important}
html body:not(#tt) [data-tt-role="options"] button{border:2px solid #dfe7f3!important;border-radius:999px!important;background:#fff!important;color:#1c2b5a!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important;font-weight:800!important}
html body:not(#tt) [data-tt-role="options"] button.chosen{border-color:#2166e8!important;background:#eaf1ff!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important}
html body:not(#tt) [data-tt-role="options"] button.correct{border-color:#22a45d!important;background:#e3f6ea!important;color:#157a43!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important}

/* ================================================================== */
/* In-scene task bar: softer, rounder                                 */
/* ================================================================== */
html body:not(#tt) [data-tt-role="task-panel"]{border:0!important;border-radius:14px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 4px 16px rgba(20,30,70,.18)!important}
html body:not(#tt) .scene1-inline-text{color:#1c2b5a!important;text-shadow:none!important}
html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"],
html body:not(#tt) .scene1-inline-skip,
html body:not(#tt) [data-tt-role="collapse-button"]{flex:0 0 38px!important;width:38px!important;height:38px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;box-shadow:none!important;line-height:1!important;cursor:pointer!important}
html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"]{background:#e8f0ff!important;font-size:17px!important}
html body:not(#tt) .scene1-inline-skip{background:#ffe7a3!important;color:#3b2a00!important;font-size:20px!important}
html body:not(#tt) [data-tt-role="collapse-button"]{background:#eef1f6!important;color:#6a7898!important;font-size:0!important}
html body:not(#tt) [data-tt-role="task-panel"] [hidden]{display:none!important}
html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]:empty{display:none!important}
html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{color:#157a43!important}

/* ================================================================== */
/* LARGE (iPad, laptop, desktop)                                      */
/* ================================================================== */
@media (min-height:601px) and (min-width:1001px){
  html body:not(#tt) .app{height:100vh!important;height:100dvh!important;min-height:0!important}
  html body:not(#tt) .top{height:58px!important;min-height:58px!important;padding:6px 14px!important}
  html body:not(#tt) .top .owl,html body:not(#tt) .top .owl img{max-height:46px!important}
  html body:not(#tt) .header-title h1{font-size:20px!important}
  html body:not(#tt) .actions .btn{height:36px!important}
  html body:not(#tt) .app>.body{grid-template-columns:clamp(150px,15vw,200px) minmax(0,1fr) clamp(190px,17vw,230px)!important;gap:8px!important;padding:8px!important}
  html body:not(#tt) .panel.left>.navitem{flex:0 0 76px!important;height:76px!important;min-height:76px!important;font-size:13px!important}
  html body:not(#tt) .panel.right{overflow-x:hidden!important;overflow-y:auto!important;padding-bottom:10px!important}
  html body:not(#tt) .workspace>.scene-head,html body:not(#tt) .workspace>.assets{width:100%!important}
  html body:not(#tt) .scene-scene-nav{position:static!important;transform:none!important;margin-left:auto!important;order:8}
  html body:not(#tt) .scene-head .scene1-activity-launch{order:1}
  html body:not(#tt) .scene-head .tt-task-pill{order:2}
  html body:not(#tt) .scene-head .scene1-inline-open{order:3}
  /* The task bar is ONE row: what to do on the left, the step's own content
     (the sentence to say) in the middle, praise and the speaker on the right.
     It used to push that content onto a second, full-width row. */
  html body:not(#tt) [data-tt-role="task-panel"]{height:auto!important;min-height:64px!important;max-height:45%!important;padding:8px 16px!important;gap:10px 18px!important;flex-wrap:nowrap!important;align-items:center!important}
  html body:not(#tt) .scene1-inline-text{order:1;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;align-items:center!important;gap:12px!important;font:900 23px/1.2 "Nunito",Arial,sans-serif!important;white-space:normal!important}
  html body:not(#tt) .scene1-inline-target-icon{width:44px!important;height:40px!important}
  html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{order:3;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:12em!important;font-size:16px!important;margin-left:auto!important;white-space:normal!important;text-align:right!important}
  html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"]{order:4}
  html body:not(#tt) [data-tt-role="inline-card"]{order:2;flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:10px 16px!important;overflow:visible!important}
  html body:not(#tt) [data-tt-role="inline-card"]:empty{display:none!important}
}

/* ================================================================== */
/* COMPACT (phones in landscape)                                      */
/* ================================================================== */
@media (max-height:600px), (max-width:1000px){

  /* ---- Opening screen ---- */
  html body:not(#tt) #openingScreen #startExploring{min-width:0!important;width:min(500px,31vw,70vh)!important;height:auto!important;aspect-ratio:500/183;bottom:max(10px,3vh)!important}
  html body:not(#tt) #openingScreen .opening-music-toggle{top:max(8px,env(safe-area-inset-top))!important;left:max(10px,env(safe-area-inset-left))!important;padding:7px 12px!important;font:800 14px/1.1 Arial,sans-serif!important}

  /* ---- Adventure chooser ---- */
  html body:not(#tt) .adventure-chooser .create-character-step,
  html body:not(#tt) .adventure-chooser .create-character-step:hover{width:24%!important;height:auto!important;aspect-ratio:380/126;top:74.5%!important;transform:translateX(-50%)!important}
  html body:not(#tt) .adventure-chooser .create-character-step:active{transform:translateX(-50%) translateY(2px)!important}

  /* ---- Frame: no header, no right panel; the scene gets the space ---- */
  html:has(body .app),html body:not(#tt):has(.app){height:100%;overflow:hidden!important;overscroll-behavior:none}
  html body:not(#tt) .app{height:100vh!important;height:100dvh!important;min-height:0!important;box-sizing:border-box!important;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;background:#eef3fa}
  html body:not(#tt) .app>.top{display:none!important}
  html body:not(#tt) .app>.body{grid-template-columns:clamp(60px,8vw,78px) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:6px!important;padding:6px!important;min-height:0!important}
  html body:not(#tt) .app>.body>.panel{border:0!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(30,50,100,.08)!important;min-height:0!important}
  html body:not(#tt) .app>.body>.panel.right{display:none!important}

  /* ---- Left rail: category icons ---- */
  html body:not(#tt) .panel.left{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:4px!important;padding:5px 4px!important;overflow-x:hidden!important;overflow-y:auto!important}
  html body:not(#tt) .panel.left>.item-categories-heading,
  html body:not(#tt) .panel.left>.tip,
  html body:not(#tt) .panel.left>.scene-volume-control,
  html body:not(#tt) .panel.left>.navitem.category-disabled{display:none!important}
  html body:not(#tt) .panel.left>.navitem{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:6px 2px!important;gap:3px!important;border-radius:12px!important;font-size:11px!important;font-weight:800!important;line-height:1.05!important;text-align:center!important;white-space:normal!important}
  html body:not(#tt) .panel.left .navitem .category-visual-thumb{width:44px!important;height:36px!important}
  html body:not(#tt) .panel.left>.navitem.category-thumbnail-render-lock::before{width:44px!important;height:36px!important}
  html body:not(#tt) .panel.left .navitem span{font-size:24px!important}

  /* ---- Centre: [top bar] over [scene | item list] ---- */
  html body:not(#tt) .workspace{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(86px,12.5vw,112px)!important;grid-template-rows:44px minmax(0,1fr)!important;gap:6px!important;min-height:0!important}
  html body:not(#tt) .workspace>.scene-head{grid-column:1 / -1!important;grid-row:1!important;width:100%!important;max-width:none!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0 5px!important;gap:6px!important;font-size:0!important;overflow:hidden!important;border:0!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(30,50,100,.08)!important}
  html body:not(#tt) .workspace>.scene-stage-wrap{grid-column:1!important;grid-row:2!important}
  html body:not(#tt) .workspace>.assets{grid-column:2!important;grid-row:2!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;padding:5px!important;overflow:hidden!important;border:0!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(30,50,100,.08)!important;flex:none!important}
  html body:not(#tt) .scene-footer{display:none!important}

  /* top bar contents (visible when no task is showing) */
  html body:not(#tt) .workspace>.scene-head>span:first-child{display:none!important}
  html body:not(#tt) .scene-head .scene1-activity-launch,
  html body:not(#tt) .scene-head .scene1-inline-open{order:1;flex:0 0 auto;height:34px!important;min-height:34px!important;max-height:34px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:999px!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important;font:800 14px/1 "Nunito",Arial,sans-serif!important}
  html body:not(#tt) .scene-head .tt-task-pill{order:2}
  html body:not(#tt) .scene-head .scene1-inline-open{order:3}
  html body:not(#tt) .scene-head [hidden]{display:none!important}
  html body:not(#tt) .scene-scene-nav{order:8;position:static!important;transform:none!important;margin-left:auto!important;gap:5px!important}
  html body:not(#tt) .scene-scene-nav button{width:44px!important;height:34px!important;min-height:34px!important;padding:0!important;border:0!important;border-radius:999px!important;background:#fff4bd!important;box-shadow:0 2px 6px rgba(20,30,70,.18)!important;font-size:0!important;line-height:1!important}
  html body:not(#tt) .workspace>.scene-head>.tt-menu-btn{order:9;flex:0 0 auto;display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:38px;height:34px;padding:0;box-sizing:border-box;border:0;border-radius:10px;background:#eef3fb;cursor:pointer}
  html body:not(#tt) .workspace>.scene-head>.tt-menu-btn span{display:block;width:17px;height:2.5px;border-radius:2px;background:#1c2b5a}

  /* scene art */
  html body:not(#tt) #canvas{border:0!important;border-radius:12px!important}
  html body:not(#tt) #canvas>.story-build-lock button{width:min(496px,56%)!important;height:auto!important;aspect-ratio:496/124}
  html body:not(#tt) .scene-text-item{font-size:16px!important;padding:4px 8px!important}
  html body:not(#tt) .scene-text-item textarea{width:140px!important;min-height:44px!important}
  html body:not(#tt) .scene1-wrong-drop{width:78px!important;height:78px!important;border-width:9px!important;font:900 78px/56px Arial,sans-serif!important}

  /* ---- Task bar: sits in the top bar, never over the picture ---- */
  html body:not(#tt) [data-tt-role="task-panel"]{background:#fff!important;position:fixed!important;inset:auto!important;left:var(--tt-head-l,0px)!important;top:var(--tt-head-t,0px)!important;right:auto!important;bottom:auto!important;width:calc(var(--tt-head-w,300px) - 48px)!important;height:var(--tt-head-h,44px)!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0 5px 0 8px!important;box-sizing:border-box!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;align-content:center!important;justify-content:flex-start!important;gap:6px!important;z-index:60!important;overflow:visible!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(30,50,100,.12)!important;pointer-events:auto!important}
  html body:not(#tt) .scene1-inline-text{flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;gap:8px!important;justify-content:flex-start!important;text-align:left!important;font:900 16px/1.12 "Nunito","Segoe UI",Arial,sans-serif!important;overflow:hidden!important;max-height:40px!important}
  html body:not(#tt) .scene1-inline-target-icon{flex:0 0 auto!important;width:34px!important;height:32px!important}
  html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"],
  html body:not(#tt) .scene1-inline-skip,
  html body:not(#tt) [data-tt-role="collapse-button"]{flex:0 0 34px!important;width:34px!important;height:34px!important}
  html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{flex:0 0 auto!important;order:3;width:auto!important;min-width:0!important;max-width:9em!important;height:auto!important;min-height:0!important;margin:0!important;font:900 14px/1.1 "Nunito",Arial,sans-serif!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"]{order:2}

  html body:not(#tt) .scene1-inline-skip{order:4}
  html body:not(#tt) [data-tt-role="collapse-button"]{order:5}

  /* the "say it" card and short messages float at the bottom of the picture */
  html body:not(#tt) [data-tt-role="inline-card"]{position:fixed!important;order:9;left:calc(var(--tt-stage-l,0px) + var(--tt-stage-w,0px) / 2)!important;top:calc(var(--tt-stage-t,0px) + var(--tt-stage-h,0px) - 10px)!important;transform:translate(-50%,-100%)!important;width:max-content!important;max-width:calc(var(--tt-stage-w,300px) - 24px)!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:14px!important;padding:8px 16px!important;box-sizing:border-box!important;background:rgba(255,255,255,.97)!important;border-radius:20px!important;box-shadow:0 8px 24px rgba(20,30,70,.28)!important;overflow:visible!important;z-index:61!important}
  html body:not(#tt) [data-tt-role="inline-card"]:empty{display:none!important}
  html body:not(#tt) .scene1-inline-complete{padding:4px 6px!important;font:900 17px/1.2 "Nunito",Arial,sans-serif!important}

  /* ---- Item list: vertical, beside the scene ---- */
  html body:not(#tt) .workspace>.assets>.asset-head,
  html body:not(#tt) .workspace>.assets>.carousel-arrow,
  html body:not(#tt) .workspace>.assets>.carousel-arrow-next{display:none!important}
  html body:not(#tt) .workspace>.assets>.asset-grid{position:static!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;gap:6px!important;overflow-x:hidden!important;overflow-y:auto!important;touch-action:pan-y!important;scroll-snap-type:y proximity;scrollbar-width:none;overscroll-behavior:contain;background:transparent!important;border:0!important;box-shadow:none!important}
  html body:not(#tt) .workspace>.assets>.asset-grid::-webkit-scrollbar{display:none}
  html body:not(#tt) .workspace>.assets>.asset-grid>.asset{flex:0 0 auto!important;width:100%!important;min-width:0!important;height:clamp(64px,18vh,86px)!important;min-height:0!important;margin:0!important;padding:4px!important;border-radius:12px!important;scroll-snap-align:start;display:flex!important;align-items:center!important;justify-content:center!important}
  html body:not(#tt) .workspace>.assets>.asset-grid>.asset>.pic{width:100%!important;height:100%!important;max-height:none!important;font-size:40px!important}
  html body:not(#tt) .workspace>.assets>.asset-grid>.asset>.pic img{max-width:100%!important;max-height:100%!important}
  html body:not(#tt) .workspace>.assets>.asset-grid.category-prompt::before{content:"Pick a category";margin:auto;padding:6px;text-align:center;color:#6079a6;font:800 14px/1.25 "Nunito",Arial,sans-serif}

  /* ---- Meet Teemo lesson ---- */
  html body:not(#tt) [data-tt-role="lesson-modal"]{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important}
  html body:not(#tt) [data-tt-role="lesson-card"]{width:100%!important;height:100%!important;max-height:none!important;padding:8px 14px!important}
  html body:not(#tt) [data-tt-role="lesson-card"] h2{margin:0 0 4px!important;font-size:21px!important}
  html body:not(#tt) [data-tt-role="close-button"]{top:6px!important;right:8px!important}
  html body:not(#tt) .scene1-lesson-main{flex-direction:row!important;gap:14px!important}
  html body:not(#tt) [data-tt-role="teemo"]{flex:0 0 28%!important;width:auto!important;height:100%!important}
  html body:not(#tt) .scene1-story{width:auto!important;height:100%!important;flex:1 1 auto!important}
  html body:not(#tt) .scene1-story-text{font-size:clamp(16px,5.6vh,23px)!important;line-height:1.4!important}
  html body:not(#tt) .scene1-help{margin:4px 0 8px!important;font-size:14px!important}
  html body:not(#tt) [data-tt-role="step-nav"]{padding:10px 18px!important;font-size:16px!important}

  html body:not(#tt) [data-tt-role="lesson-card"].is-question{display:grid!important;grid-template-columns:24% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:14px}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question>h2{grid-column:1/-1}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question .scene1-lesson-main{grid-column:1;grid-row:2;flex:none!important;height:auto!important;min-height:0!important;flex-direction:column!important;gap:0!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="teemo"]{flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question .scene1-story{display:none!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question>.scene1-question{grid-column:2;grid-row:2;justify-content:flex-start!important;min-height:0!important;margin:0!important;padding:2px 0 8px 14px!important;border-top:0!important;border-left:2px solid #f0e6d2!important;overflow-x:hidden!important;overflow-y:auto!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question .scene1-question h3{margin:2px 0 8px!important;font-size:20px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="options"]{gap:8px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="options"] button{min-width:84px!important;min-height:44px;padding:7px 16px!important;font-size:17px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="answer"]{margin:8px auto 0!important;padding:9px 26px!important;font-size:17px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question .scene1-feedback{min-height:18px!important;margin-top:4px!important;font-size:15px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question>.scene1-question [data-tt-role="practice"]{width:100%!important;max-height:none!important;margin:8px 0 0!important;padding:10px 12px!important;flex:0 0 auto}
  html body:not(#tt) [data-tt-role="practice-grid"]{grid-template-columns:minmax(0,1fr)!important;gap:4px!important}
  html body:not(#tt) [data-tt-role="practice-main"]{min-width:0!important}
  html body:not(#tt) [data-tt-role="practice-grid"] [data-tt-role="speech-review"]{border-left:0!important;border-top:1px dashed #c9d8f5!important;text-align:center!important;padding:6px 0 0!important}
  html body:not(#tt) [data-tt-role="practice-grid"] [data-tt-role="speech-review"][hidden]{display:none!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-actions"]{flex-wrap:nowrap!important;gap:10px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-actions"] [data-tt-role="hear-button"]{padding:8px 11px!important;font-size:14px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-actions"] [data-tt-role="step-nav"]{padding:8px 12px!important;font-size:14px!important}
  /* once the answer is right, only the question and the speaking card are needed, so the result fits on screen */
  html body:not(#tt) .scene1-question:has([data-tt-role="practice"]) [data-tt-role="answer"],
  html body:not(#tt) .scene1-question:has([data-tt-role="practice"]) [data-tt-role="options"],
  html body:not(#tt) .scene1-question:has([data-tt-role="practice"]) .scene1-feedback{display:none!important}
  html body:not(#tt) [data-tt-role="practice"].is-incorrect [data-tt-role="practice-status"]{display:none!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice"]{--tt-mic-size:58px}
  html body:not(#tt) [data-tt-role="inline-card"]{--tt-mic-size:56px}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] [data-tt-role="practice-prompt"]{font-size:15px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] [data-tt-role="target-sentence"]{font-size:23px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-actions"]{gap:14px!important;margin-top:8px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-status"]{min-height:20px!important;margin-top:6px!important;font-size:15px!important}
  html body:not(#tt) [data-tt-role="practice-grid"] [data-tt-role="speech-review"]{min-height:0!important;max-height:none!important;padding:4px 0 4px 10px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] [data-tt-role="speech-review"],
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] .scene1-speech-heard,
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] .scene1-review-label,
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] .scene1-heard-word{font-size:14px!important}
  html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] .scene1-speech-detail{font-size:12.5px!important}
  html body:not(#tt) .scene1-complete{margin:10px 0!important;font-size:20px!important}
  html body:not(#tt) [data-tt-role="step-nav"]{padding:11px 20px!important;font-size:16px!important}

  /* ---- Story View player ---- */
  html body:not(#tt) .story-player{padding:4px!important;padding-bottom:max(4px,env(safe-area-inset-bottom))!important}
  html body:not(#tt) .story-player-stage{width:min(96vw,calc((100dvh - 60px) * 1.7768))!important;border-width:3px!important}
  html body:not(#tt) .story-player-controls{gap:8px!important;margin-top:6px!important}
  html body:not(#tt) .story-player button{padding:8px 12px!important;font-size:14px!important}
}

/* ================================================================== */
/* Icons (teemo-mobile.js strips the emoji and sets data-tt-icon)      */
/* ================================================================== */
html body:not(#tt) [data-tt-icon]::before{content:"";display:inline-block;flex:0 0 auto;width:1.15em;height:1.15em;margin-right:.45em;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--tt-icon) center/contain no-repeat;mask:var(--tt-icon) center/contain no-repeat}
html body:not(#tt) [data-tt-icon-only]{font-size:0!important}
html body:not(#tt) [data-tt-icon-only]::before{width:20px;height:20px;margin:0}
html body:not(#tt) [data-tt-role="hear-button"][data-tt-icon]{color:#1d55c2!important}
html body:not(#tt) [data-tt-role="collapse-button"][data-tt-icon]{color:#6a7898!important}
html body:not(#tt) [data-tt-role="close-button"][data-tt-icon]::before{width:22px;height:22px}
html body:not(#tt) .scene-scene-nav button[data-tt-icon]::before{color:#173b83}
html body:not(#tt) #openingScreen .opening-music-toggle[data-tt-icon]::before{width:17px;height:17px;margin-right:6px;vertical-align:-3px}
html body:not(#tt) .scene-head .scene1-activity-launch[data-tt-icon],
html body:not(#tt) .scene-head .scene1-inline-open[data-tt-icon]{gap:0!important}
@media (max-height:600px), (max-width:1000px){
  html body:not(#tt) .scene-scene-nav button[data-tt-icon]::before{width:18px;height:18px;margin:0}
}


/* ================================================================== */
/* Meet Teemo, played ON the scene                                     */
/* ================================================================== */
/* Not a pop-up over the app. scene1-lesson.js pins this layer to #canvas's box
   (--scene-*). Teemo is already standing in the picture, on the left, so the
   card takes the right and leaves him in view - for the questions and the
   speaking too, which are about him. */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene{position:fixed!important;inset:auto!important;left:var(--scene-l,0px)!important;top:var(--scene-t,0px)!important;width:var(--scene-w,100vw)!important;height:var(--scene-h,100vh)!important;padding:0!important;background:none!important;display:block!important;pointer-events:none}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]{position:absolute!important;top:3%!important;right:2%!important;bottom:3%!important;left:auto!important;width:min(60%,720px)!important;height:auto!important;max-height:none!important;margin:0!important;padding:14px 22px!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;pointer-events:auto;background:rgba(255,253,247,.93)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(10,20,50,.28)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]>h2{margin:0 0 6px!important;font-size:24px!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-lesson-main{flex:1 1 auto!important;min-height:0!important;height:auto!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story{width:100%!important;height:100%!important;justify-content:center!important;gap:0!important}
/* the round buttons' bottom edge (their shadow) sat exactly on the story box's
   edge and was clipped: room below, and nothing clipped */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene :is(.scene1-story,.scene1-lesson-main){overflow:visible!important;padding-bottom:6px!important;box-sizing:border-box!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-help{margin:10px 0 14px!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>.is-question .scene1-lesson-main{display:none!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>.is-question>.scene1-question{flex:1 1 auto!important;justify-content:safe center!important;min-height:0!important;margin:0!important;padding:0 0 4px!important;border:0!important;overflow-x:hidden!important;overflow-y:auto!important}
/* The speaking step: once the answer is right, the options and Answer button
   have done their job and go. One centred column - the drop's two-column grid
   kept an empty "What I heard" column, which is what pushed everything left.
   Hear and Next are round icons the size of each other, so the microphone
   sits dead centre between them. */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-question:has(.scene1-practice,[data-tt-role="practice"]) :is([data-tt-role="options"],[data-tt-role="answer"],.scene1-options,.scene1-answer-row,.scene1-feedback){display:none!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-question>h3{margin:0 0 8px!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"]{width:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:12px 14px!important;box-sizing:border-box!important;overflow:visible!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-grid"]{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-main"]{align-items:center!important;text-align:center!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-grid"] [data-tt-role="speech-review"]{display:block!important;visibility:visible!important;min-height:0!important;max-height:none!important;margin:0!important;padding:6px 0 0!important;border:0!important;border-top:1px dashed #c9d8f5!important;text-align:center!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-grid"] [data-tt-role="speech-review"][hidden]{display:none!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]{display:flex!important;justify-content:center!important;align-items:flex-start!important;gap:20px!important;margin:8px 0 0!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]>:is([data-tt-role="hear-button"],[data-tt-role="step-nav"]){flex:0 0 auto!important;width:48px!important;height:48px!important;min-height:0!important;margin-top:calc((var(--tt-mic-size,66px) - 48px) / 2)!important;padding:0!important;border-radius:50%!important;justify-content:center!important;font-size:0!important;gap:0!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]>:is([data-tt-role="hear-button"],[data-tt-role="step-nav"])[data-tt-icon]::before{width:24px;height:24px;margin:0}
@media (max-height:600px), (max-width:1000px){
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"]{padding:8px 10px!important;--tt-mic-size:54px}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-question>h3{margin:0 0 4px!important;font-size:17px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]{gap:14px!important;margin-top:4px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]>:is([data-tt-role="hear-button"],[data-tt-role="step-nav"]){width:44px!important;height:44px!important;margin-top:calc((var(--tt-mic-size,54px) - 44px) / 2)!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-status"]{margin-top:4px!important;font-size:13px!important}
}
@media (max-height:600px), (max-width:1000px){
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]{top:2.5%!important;bottom:2.5%!important;right:1.5%!important;width:63%!important;padding:6px 12px 8px!important;border-radius:16px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]>h2{margin:0 0 8px!important;font-size:17px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="close-button"]{top:4px!important;right:6px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story-text{font-size:clamp(14px,4.6vh,19px)!important;line-height:1.6!important}
  /* the ball hops just above each word; at 30px it covered the line above and,
     on the first line, the title (phone sweep, 2026-10-01) */
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-help{margin:4px 0 6px!important;font-size:12px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene :is(.scene1-story-toggle,.scene1-replay){width:44px!important;height:44px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story-controls>[data-tt-role="step-nav"]{padding:9px 14px!important;font-size:14px!important}
}
/* ================================================================== */
/* Show only what the current step uses                               */
/* ================================================================== */
/* The players are 7-11 and do not read English yet, so every button on screen
   is one more thing to puzzle over, and on a phone it costs room the scene
   needs. teemo-mobile.js sets html[data-tt-phase]:
     lesson  a story/question card is up      -> the scene and the card, nothing else
     find    "find the X and drag it"         -> + the item categories and tray
     say     "What can you see?" - speaking   -> the items are already in the scene
     pack    dragging onto the backpack       -> the items are already in the scene
     done    the scene's work is finished     -> + the way on: a big Next arrow
     (none)  title card, a scene not started  -> the scene, its start button, Next
   The drop's scene-builder tools (Selected Item, Story View, Reset, the title)
   are used by no lesson and are hidden at every step. The menu keeps Story View,
   Clear, music, scene navigation and full screen for when they are wanted.
   Add ?dev to the URL to get the whole builder back. */
html:not(.tt-dev) body:not(#tt) .app>.top,
html:not(.tt-dev) body:not(#tt) .app>.body>.panel.right,
html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>span:first-child,
html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>.blank-slot,
html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>.fullscreen,
html:not(.tt-dev) body:not(#tt) .panel.left>.item-categories-heading,
html:not(.tt-dev) body:not(#tt) .panel.left>.tip,
html:not(.tt-dev) body:not(#tt) .panel.left>.scene-volume-control,
html:not(.tt-dev) body:not(#tt) .panel.left>.navitem.category-disabled,
html:not(.tt-dev) body:not(#tt) #canvas>.scene-footer,   /* "Drop assets here to build your English story" */
html:not(.tt-dev) body:not(#tt) .scene-scene-nav button:first-child{display:none!important}
html.tt-dev body:not(#tt) .workspace>.scene-head>.tt-menu-btn{order:9;flex:0 0 auto;display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;height:34px;margin-left:auto;padding:0;box-sizing:border-box;border:0;border-radius:10px;background:#eef3fb;cursor:pointer}
html.tt-dev body:not(#tt) .workspace>.scene-head>.tt-menu-btn span{display:block;width:17px;height:2.5px;border-radius:2px;background:#1c2b5a}

/* No menu for players, and no top bar unless something is in it. On a phone
   the task bar lives in that row while a task is running (or cheering its end); at
   every other step, and always on a big screen, the scene has the room.
   The task bar's own skip (a testing shortcut) and minimise buttons go too:
   the instruction is the step. */
html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>.tt-menu-btn,
html:not(.tt-dev) body:not(#tt) .scene1-inline-skip,
html:not(.tt-dev) body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="collapse-button"]{display:none!important}
/* Collapsed, not display:none - Next and a scene's start button live in it and
   float out onto the scene (below), and a hidden parent would hide them too. */
html:not(.tt-dev) body:not(#tt) .workspace>.scene-head{height:0!important;min-height:0!important;max-height:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>*:not(.scene-scene-nav):not(.scene1-activity-launch){display:none!important}
@media (max-height:600px), (max-width:1000px){
  html:is([data-tt-phase="find"],[data-tt-phase="say"],[data-tt-phase="pack"],[data-tt-phase="done"]):not(.tt-dev) body:not(#tt) .workspace>.scene-head{height:44px!important;min-height:44px!important;max-height:44px!important}
  html:not(.tt-dev) body:not(#tt) [data-tt-role="task-panel"]{width:var(--tt-head-w,300px)!important}
  html:not([data-tt-phase="find"]):not([data-tt-phase="say"]):not([data-tt-phase="pack"]):not([data-tt-phase="done"]):not(.tt-dev) body:not(#tt) .workspace{grid-template-rows:minmax(0,1fr)!important}
  html:not([data-tt-phase="find"]):not([data-tt-phase="say"]):not([data-tt-phase="pack"]):not([data-tt-phase="done"]):not(.tt-dev) body:not(#tt) .workspace>.scene-stage-wrap{grid-row:1 / -1!important}
}

/* The logo, on the scene's top-left corner (teemo-mobile.js places it). */
/* The scene's wide picture behind the scene on phones (teemo-mobile.js
   syncWide). It sits above the page's background and below the scene, the
   item panels and the top bar, which are lifted one layer while it shows. */
html>.tt-scene-wide{position:fixed;z-index:0;display:none;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
html.tt-wide-on>.tt-scene-wide{display:block}
/* Safari (unlike the Home Screen app) never lets a page draw beside the notch
   or under its bars: it paints those strips itself, in the page's flat
   background colour (tested in the iOS 26 simulator, 2026-10-03). Black while
   the room shows, so they merge with the notch and the phone's bezel instead
   of reading as white bars (Blake: "ugly white bars"). */
html.tt-wide-on,html.tt-wide-on body{background-color:#000!important}
/* the page's own colours would show over it: they go while it's up */
html.tt-wide-on body:not(#tt) :is(.app,.workspace,.scene-stage-wrap){background:transparent!important}
/* not .scene-head: lifting it traps the big Next arrow (fixed, inside it)
   below the scene; it doesn't overlap the wide picture anyway */
html.tt-wide-on body:not(#tt) :is(.panel.canvas,.panel.left,.panel.right,.people-carousel){z-index:1}
/* the room carries on past the scene's edge, so no rounded frame around it */
html.tt-wide-on body:not(#tt) #canvas{border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
html>.tt-logo{position:fixed;z-index:40;left:calc(var(--tt-stage-l,0px) + 10px);top:calc(var(--tt-stage-t,0px) + 8px);width:clamp(64px,calc(var(--tt-stage-w,600px) * .11),150px);height:auto;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(20,30,70,.3))}
html:not(.tt-show-logo)>.tt-logo,html.tt-dev>.tt-logo{display:none}
/* when the room fills the screen, the logo belongs in the screen's corner, not
   the scene's (it landed mid-screen, on Teemo's head - Blake, 2026-10-03) */
html.tt-wide-on>.tt-logo{left:max(12px,calc(env(safe-area-inset-left) + 6px));top:max(10px,calc(env(safe-area-inset-top) + 4px))}
@media (max-height:600px), (max-width:1000px){html.tt-wide-on.tt-task-on>.tt-logo{display:none!important}}

/* the top bar's buttons hide themselves with [hidden]; only the phone layout honoured it */
html body:not(#tt) .scene-head [hidden]{display:none!important}
/* once a lesson has started, its start button is not the step (the menu keeps
   it), and neither is changing scene until the scene is done */
html[data-tt-phase]:not([data-tt-phase=""]):not(.tt-dev) body:not(#tt) .scene1-activity-launch,
html[data-tt-phase]:not([data-tt-phase=""]):not([data-tt-phase="done"]):not(.tt-dev) body:not(#tt) .scene-scene-nav{display:none!important}
/* Next, whenever it is on offer (a finished scene), is a big arrow in the
   middle of the scene: the scene is over, and this is the only thing to do.
   Tucked in a corner, it went unnoticed. */
html:not(.tt-dev) body:not(#tt) .scene-scene-nav{position:fixed!important;inset:auto!important;left:calc(var(--tt-stage-l,0px) + var(--tt-stage-w,0px) / 2)!important;top:calc(var(--tt-stage-t,0px) + var(--tt-stage-h,0px) / 2)!important;translate:-50% -50%;z-index:60!important;margin:0!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
html:not(.tt-dev) body:not(#tt) .scene-scene-nav button:last-child{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:clamp(84px,24vh,140px)!important;height:clamp(84px,24vh,140px)!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:#fac745!important;box-shadow:0 8px 20px rgba(20,30,70,.3)!important;color:#3b2a00!important;font-size:0!important}
html:not(.tt-dev) body:not(#tt) .scene-scene-nav button:last-child::before{width:48%!important;height:48%!important;margin:0!important;color:#3b2a00}
/* a scene's start button (scene 2's "Cusco Activities"), before it starts */
html:not(.tt-dev) body:not(#tt) .scene-head>.scene1-activity-launch{position:fixed!important;z-index:60!important;left:calc(var(--tt-stage-l,0px) + 14px)!important;top:calc(var(--tt-stage-t,0px) + var(--tt-stage-h,0px) - 62px)!important;height:48px!important;max-height:none!important;padding:0 20px!important;font-size:17px!important;box-shadow:0 8px 20px rgba(20,30,70,.3)!important}

/* The item tray is only for finding an item; no other step - the title card,
   a lesson, packing, a finished scene, scene 2's own activities - uses it.
   The category column (Animals, Objects & Props, Speech Bubbles) is never
   shown: the find step only asks for objects and opens that category itself
   (Blake, 2026-10-03: "can we just remove this whole additional inventory
   selector? ... just show the bottom row"). ?dev brings it back. */
html:not(.tt-dev) body:not(#tt) .app>.body>.panel.left,
html:not([data-tt-phase="find"]):not(.tt-dev) body:not(#tt) .workspace>.assets,
html:not(.tt-dev) body:not(#tt) .scene1-activity-launch:disabled{display:none!important}
html:not(.tt-dev) body:not(#tt) .app>.body{grid-template-columns:minmax(0,1fr)!important}
@media (min-height:601px) and (min-width:1001px){
  html[data-tt-phase="find"]:not(.tt-dev) body:not(#tt) .workspace{grid-template-rows:auto minmax(0,1fr) auto!important}
  /* the task bar sits on the scene here, so it starts right of the logo.
     Not Scene 2's activity card, which shares the role but sits under the
     picture at the picture's width: shifted right with an auto width it ran
     off the right edge of the window, and its close X with it. */
  html.tt-show-logo:not(.tt-dev) body:not(#tt) [data-tt-role="task-panel"]:not(.scene2-task){left:calc(clamp(64px,11%,150px) + 22px)!important;right:24px!important;width:auto!important;margin:0!important;transform:none!important}
  html:not([data-tt-phase="find"]):not(.tt-dev) body:not(#tt) .workspace{grid-template-rows:auto minmax(0,1fr)!important}
}
@media (max-height:600px), (max-width:1000px){
  html:not([data-tt-phase="find"]):not(.tt-dev) body:not(#tt) .workspace{grid-template-columns:minmax(0,1fr)!important}
  /* finding: the item column is on the right and the category column is gone,
     so the same room on the left keeps the scene in the middle of the screen
     and the room picture reaching both edges (852x334 came up 36px short) */
  html[data-tt-phase="find"]:not(.tt-dev) body:not(#tt) .workspace>.scene-stage-wrap{padding-left:calc(clamp(86px,12.5vw,112px) + 6px)!important;box-sizing:border-box!important}
}


/* No music (teemo-mobile.js keeps it off), so no music switch either. */
html body:not(#tt) #openingScreen .opening-music-toggle,
html body:not(#tt) .scene-music-toggle{display:none!important}
html>.tt-menu button[data-act="music"]{display:none!important}

/* the item ribbon can be grabbed and swiped with a mouse */
html body:not(#tt) #assetGrid .asset{cursor:grab;-webkit-user-select:none;user-select:none}
html body:not(#tt) #assetGrid img{-webkit-user-drag:none;user-drag:none}
html.tt-ribbon-grab,html.tt-ribbon-grab *{cursor:grabbing!important}


/* ================================================================== */
/* Saying it - "What can you see?" (scene1-lesson.js, .tt-say)        */
/* ================================================================== */
/* One row, and no instructions in words: whose turn it is, the sentence, a
   speaker to hear it again, the microphone. The turn badge is Teemo's face
   while he says the sentence and a talking child when it is theirs, and the
   microphone calls for a press only then. Right and wrong show on the
   sentence itself - no "I heard" text, no status line. How to hold the
   microphone is shown by the hand (teemo-mobile.js), not written. */
html{--tt-kid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M17 41v-6.5C11.8 32.4 9 27.6 9 22.2 9 14.4 15 9 22.6 9c6.5 0 11.3 4.2 12.3 10l2.6 6.1c.3.8-.3 1.6-1.1 1.6H33v4.6c0 1.9-1.5 3.4-3.4 3.4H26V41' fill='%23ffffff' stroke='%231c2b5a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M38.5 17.5q3.3 4.5 0 9M42.5 14q6 8 0 16' fill='none' stroke='%232166e8' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")}
html body:not(#tt) [data-tt-role="inline-card"]:has(.tt-say){display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;height:auto!important;max-height:none!important;overflow:visible!important}
html body:not(#tt) .tt-say{display:flex;align-items:center;gap:14px;--tt-mic-size:62px}
html body:not(#tt) .tt-say-turn{flex:0 0 auto;width:54px;height:54px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(20,30,70,.28);background:#ffd75b url("../assets/journey/teemo-pin.webp") 50% 34%/165% no-repeat}
html body:not(#tt) .tt-say:is([data-state="turn"],[data-state="talk"],[data-state="good"]) .tt-say-turn,
html body:not(#tt) [data-tt-role="practice"]:is([data-state="turn"],[data-state="talk"],[data-state="good"]) .tt-say-turn{background:#e8f0ff var(--tt-kid) 46% 50%/72% no-repeat;animation:tt-turn-pop .35s ease-out}
html body:not(#tt) .tt-say .scene1-say-sentence{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;display:block!important;background:none!important;border:0!important;box-shadow:none!important;white-space:nowrap!important;text-shadow:none!important}
html body:not(#tt) .tt-say .scene1-say-words{font:900 30px/1.15 "Nunito",Arial,sans-serif;color:#24356f;transition:color .2s}
html body:not(#tt) .tt-say[data-state="listen"] .scene1-say-words{color:#52668e}
/* the words are spans so a wrong one can be marked - but they read as a plain sentence */
html body:not(#tt) .tt-say .scene1-speech-word{display:inline!important;margin:0!important;padding:0 .08em!important;border:0!important;border-radius:6px!important;background:none!important;font:inherit!important;color:inherit!important}
html body:not(#tt) .tt-say .scene1-speech-word:is(.speech-missing,.speech-incorrect){color:#b32626!important;background:#ffe0e0!important;text-decoration:underline wavy #d84f4f!important}
html body:not(#tt) .tt-say .scene1-speech-word.speech-good{color:#1c8a4c!important}
html body:not(#tt) .tt-say[data-state="retry"] .scene1-say-words{animation:tt-shake .45s ease-in-out}
html body:not(#tt) .tt-say [data-tt-role="hear-button"]{flex:0 0 auto!important;width:46px!important;height:46px!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:50%!important;justify-content:center!important;font-size:0!important;gap:0!important}
html body:not(#tt) .tt-say [data-tt-role="hear-button"][data-tt-icon]::before{width:24px;height:24px;margin:0}
/* the microphone: no label under it; dimmed while Teemo talks, a still blue ring on their turn */
html body:not(#tt) .tt-say [data-tt-role="speak-button"]{min-width:0!important;padding:0!important}
html body:not(#tt) .tt-say [data-tt-role="speak-button"]::after{display:none!important}
html body:not(#tt) .tt-say[data-state="listen"] [data-tt-role="speak-button"]:not(.tt-say-active)::before,
html body:not(#tt) .tt-say[data-state="retry"] [data-tt-role="speak-button"]::before{opacity:.5;animation:none}
html body:not(#tt) .tt-say[data-state="turn"] [data-tt-role="speak-button"]::before{outline:5px solid rgba(33,102,232,.3);outline-offset:3px}
html body:not(#tt) .tt-sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
@keyframes tt-turn-pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes tt-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (max-height:600px), (max-width:1000px){
  /* bigger, with room at both ends (Blake, 2026-10-03: "a little small"; the
     microphone was "butting up against the edge") */
  html body:not(#tt) .tt-say{gap:14px;--tt-mic-size:60px}
  html body:not(#tt) .tt-say-turn{width:48px;height:48px}
  html body:not(#tt) .tt-say .scene1-say-words{font-size:27px}
  html body:not(#tt) .tt-say [data-tt-role="hear-button"]{width:46px!important;height:46px!important}
  html body:not(#tt) [data-tt-role="inline-card"]:has(.tt-say){padding:12px 22px 12px 14px!important}
  /* it was capped at the scene's width, and the row spilled out of both sides;
     with the room filling the screen it can be as wide as it needs */
  html.tt-wide-on body:not(#tt) [data-tt-role="inline-card"]:has(.tt-say){width:max-content!important;max-width:calc(100vw - 24px)!important}
  /* on a phone the card sits at the TOP of the picture: the items being
     talked about are on the floor, and the card must not cover them */
  html body:not(#tt) [data-tt-role="inline-card"]:has(.tt-say){top:calc(var(--tt-stage-t,0px) + 8px)!important;transform:translate(-50%,0)!important}
}

/* Meet Teemo's question practice: the same turns as "What can you see?"
   (scene1-lesson.js showPractice, data-state on the practice). The sentence is
   the biggest thing; no "Now say", no status line, no "What I heard" - wrong
   words are marked on the sentence, and Teemo says it again. When it is
   right, the microphone hands its place to the Next button. */
html body:not(#tt) [data-tt-role="practice"] [data-tt-role="practice-prompt"]{display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;font-size:inherit!important}
html body:not(#tt) [data-tt-role="practice"] .tt-say-turn{flex:0 0 auto;width:50px;height:50px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(20,30,70,.28);background:#ffd75b url("../assets/journey/teemo-pin.webp") 50% 34%/165% no-repeat}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"] [data-tt-role="target-sentence"]{font:900 clamp(26px,3.1vw,36px)/1.2 "Nunito",Arial,sans-serif!important;color:#24356f!important}
html body:not(#tt) [data-tt-role="practice"][data-state="listen"] [data-tt-role="target-sentence"]{color:#52668e!important}
html body:not(#tt) [data-tt-role="practice"] [data-tt-role="speak-button"]::after{display:none!important}
html body:not(#tt) [data-tt-role="practice"][data-state="listen"] [data-tt-role="speak-button"]:not(.tt-say-active)::before,
html body:not(#tt) [data-tt-role="practice"][data-state="retry"] [data-tt-role="speak-button"]::before{opacity:.5;animation:none}
html body:not(#tt) [data-tt-role="practice"][data-state="turn"] [data-tt-role="speak-button"]::before{outline:5px solid rgba(33,102,232,.3);outline-offset:3px}
html body:not(#tt) [data-tt-role="practice"][data-state="retry"] [data-tt-role="target-sentence"]{animation:tt-shake .45s ease-in-out}
/* a missed or wrong word: a red ring that keeps pulsing, and it can be tapped */
html body:not(#tt) [data-tt-role="practice"] .scene1-speech-word:is(.speech-missing,.speech-incorrect){color:#b32626!important;background:#ffe3e3!important;border-radius:8px!important;box-shadow:0 0 0 3px #e25b5b!important;animation:tt-miss-pulse 1.1s ease-in-out 3}
@keyframes tt-miss-pulse{50%{box-shadow:0 0 0 6px rgba(226,91,91,.35)}}
/* right: the words go green one after another; a dropped "a/the" shows in amber */
html body:not(#tt) [data-tt-role="practice"][data-state="good"] .scene1-speech-word,
html body:not(#tt) .tt-say[data-state="good"] .scene1-speech-word{color:#1c8a4c!important;animation:tt-word-wave .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0) * 70ms) both}
html body:not(#tt) [data-tt-role="practice"][data-state="good"] .scene1-speech-word.speech-optional{color:#c07a00!important;box-shadow:0 0 0 3px #f0b84a!important;border-radius:8px!important}
@keyframes tt-word-wave{0%{transform:translateY(0)}40%{transform:translateY(-7px) scale(1.06)}100%{transform:none}}
/* the practice panel's own red and green washes go: the words carry it now */
html body:not(#tt) [data-tt-role="practice"]:is(.is-correct,.is-incorrect){background:#f3f7ff!important;border-color:transparent!important}
/* the microphone becomes Next */
html body:not(#tt) [data-tt-role="practice"][data-state="good"] [data-tt-role="speak-button"]{display:none!important}
html body:not(#tt) [data-tt-role="practice"]:not([data-state="good"]) [data-tt-role="practice-actions"]>[data-tt-role="step-nav"]{display:none!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"][data-state="good"] [data-tt-role="practice-actions"]>[data-tt-role="step-nav"]{width:var(--tt-mic-size,66px)!important;height:var(--tt-mic-size,66px)!important;margin-top:0!important;border:0!important;background:#fac745!important;box-shadow:0 8px 18px rgba(200,140,20,.35)!important;animation:tt-next-in .45s cubic-bezier(.3,1.6,.5,1) both;cursor:pointer}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"][data-state="good"] [data-tt-role="practice-actions"]>[data-tt-role="step-nav"][data-tt-icon]::before{width:46%!important;height:46%!important;color:#3b2a00}
@keyframes tt-next-in{0%{transform:scale(.3) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
/* "What can you see?" when right: the microphone's tick pops instead of sitting there */
html body:not(#tt) .tt-say [data-tt-role="speak-button"].correct::before{animation:tt-tick-pop .5s cubic-bezier(.3,1.6,.5,1) both!important}
@keyframes tt-tick-pop{0%{transform:scale(.5)}100%{transform:none}}
/* the burst from a right sentence (teemo-lesson-core.js celebrate) */
html body:not(#tt)>.tt-burst{position:fixed;z-index:2147483400;width:0;height:0;pointer-events:none}
html body:not(#tt)>.tt-burst i{position:absolute;left:0;top:0;display:block}
html body:not(#tt)>.tt-burst .tt-burst-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid #3cc97c;animation:tt-burst-ring .7s ease-out forwards}
html body:not(#tt)>.tt-burst .tt-burst-spark{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#ffd23f;transform:rotate(var(--a)) translateX(0);animation:tt-burst-spark .75s cubic-bezier(.2,.8,.3,1) forwards}
html body:not(#tt)>.tt-burst .tt-burst-spark:nth-child(odd){background:#3cc97c}
@keyframes tt-burst-ring{to{transform:scale(5);opacity:0}}
@keyframes tt-burst-spark{70%{opacity:1}to{transform:rotate(var(--a)) translateX(var(--d));opacity:0}}
@media (max-height:600px), (max-width:1000px){
  html body:not(#tt) [data-tt-role="practice"] .tt-say-turn{width:40px;height:40px}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"] [data-tt-role="target-sentence"]{font-size:clamp(19px,5.6vh,24px)!important}
}

/* Question help (scene1-lesson.js showQ): a light-bulb button beside Answer
   with three dots for the three rungs; a wrong answer greys out for good. */
html body:not(#tt) .scene1-answer-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
html body:not(#tt) .scene1-answer-row [data-tt-role="answer"]{margin:0!important}
html body:not(#tt) .scene1-hint{position:relative;flex:0 0 auto;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:#fff4c2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1.1 2.2h5c.1-1 .5-1.7 1.1-2.2A6 6 0 0 0 12 3z' fill='%23ffd23f'/%3E%3C/svg%3E") center 42%/26px no-repeat;box-shadow:0 2px 6px rgba(20,30,70,.18);cursor:pointer}
html body:not(#tt) .scene1-hint:disabled{opacity:.45;cursor:default}
html body:not(#tt) .scene1-hint-dots{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:3px}
html body:not(#tt) .scene1-hint-dots i{width:5px;height:5px;border-radius:50%;background:#e6cf86}
html body:not(#tt) [data-rung="1"] .scene1-hint-dots i:nth-child(-n+1),
html body:not(#tt) [data-rung="2"] .scene1-hint-dots i:nth-child(-n+2),
html body:not(#tt) [data-rung="3"] .scene1-hint-dots i{background:#7a5200}
html body:not(#tt) [data-tt-role="options"] button.wrong{opacity:.4!important;text-decoration:line-through;animation:tt-shake .4s ease-in-out}
/* rung 2: each answer's meaning, under its words, once Teemo has read it */
html body:not(#tt) [data-tt-role="options"] button:has(.scene1-option-help){display:inline-flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;line-height:1.1!important}
html body:not(#tt) .scene1-option-help{display:inline-flex;align-items:center;gap:6px;font:800 .72em/1.1 "Nunito",Arial,sans-serif;color:#24356f;animation:tt-card-in .2s ease-out}
html body:not(#tt) .scene1-option-help i{display:block;width:1.05em;height:1.05em;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.15)}
html body:not(#tt) [data-tt-role="options"] button.reading{transform:scale(1.07);box-shadow:0 0 0 4px #ffd23f!important;transition:transform .15s}
/* rung 3: the right answer, shown */
html body:not(#tt) .scene1-question [data-tt-role="options"] button.hinted,
html body:not(#tt) .scene1-question .scene1-options button.hinted{animation:tt-reveal .9s ease-in-out 3}
html body:not(#tt) [data-tt-role="options"] button.revealed{animation:tt-reveal 1s ease-in-out 2}
/* the right answer pulses three times and settles - it doesn't stay lit */
@keyframes tt-reveal{0%,100%{transform:none;outline:4px solid rgba(60,201,124,0);outline-offset:0}50%{transform:scale(1.08);outline:4px solid #3cc97c;outline-offset:3px}}
html body:not(#tt) .tt-word-swatch{flex:0 0 auto;width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}

/* The card on the scene fits what it holds, centred top to bottom, instead of
   running the full height with a big empty middle; the type is bigger to match. */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;max-height:94%!important;min-height:min(46%,340px)!important;justify-content:center!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]>.scene1-question,
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>.is-question>.scene1-question{flex:0 1 auto!important}
@media (min-height:601px) and (min-width:1001px){
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story-text{font-size:26px!important;line-height:1.45!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-question>h3{font-size:32px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="options"] button{font-size:22px!important;padding:12px 24px!important}
  html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="answer"]{font-size:21px!important;padding:12px 34px!important}
}

/* ---- A finger's worth of tap area on small controls (2026-10-02) ----
   The bar's speaker (34-38px) and, on touch screens, the item tray's arrows
   and "Show All Items" (28px, made for a mouse) look the same but take a tap
   from up to 8px around them - an invisible area past the button. The
   every-size sweep (tools/sweep) counts it when it checks tap sizes. */
html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"],html body:not(#tt) [data-tt-role="collapse-button"]{position:relative!important}
html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"]::after,html body:not(#tt) [data-tt-role="collapse-button"]::after{content:"";position:absolute;inset:-6px;border-radius:50%}
@media (pointer:coarse){
  html body:not(#tt) :is(.carousel-arrow,.asset-expand-toggle){position:relative}
  html body:not(#tt) :is(.carousel-arrow,.asset-expand-toggle)::after{content:"";position:absolute;inset:-8px}
}

/* ---- The lesson card sizes itself from the scene (2026-10-02) ----
   One rule per size, not a phone design and a desktop design: a share of the
   scene's height (--su = 1% of it, from the --scene-h the lesson sets), never
   below the phone's size and never above the desktop's. The two ends are the
   designs Blake approved - an iPhone (scene 378px tall) and a laptop come out
   exactly as before - and every screen between scales smoothly. Before this,
   a 1000x600 screen and a 1001x601 one had the same scene but 17px and 32px
   questions. Line heights and layout still follow the two buckets above.
   tools/sweep/measure.mjs prints these sizes at every screen. */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene{--su:calc(var(--scene-h,600px) / 100)}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]>h2{font-size:clamp(17px,calc(var(--su) * 4.5),24px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story-text{font-size:clamp(14px,calc(var(--su) * 4.74),26px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene :is(.scene1-story-toggle,.scene1-replay){width:clamp(44px,calc(var(--su) * 10.6),46px)!important;height:clamp(44px,calc(var(--su) * 10.6),46px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story-controls>[data-tt-role="step-nav"]{font-size:clamp(14px,calc(var(--su) * 3.7),15px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-question>h3{font-size:clamp(17px,calc(var(--su) * 4.5),32px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="options"] button{font-size:clamp(17px,calc(var(--su) * 4.5),22px)!important;padding:clamp(7px,calc(var(--su) * 1.85),12px) clamp(16px,calc(var(--su) * 4.23),24px)!important}
/* the Answer button: at least 44px tall, a finger's width (it was 38px on phones) */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="answer"]{font-size:clamp(17px,calc(var(--su) * 4.5),21px)!important;padding:clamp(9px,calc(var(--su) * 2.4),12px) clamp(26px,calc(var(--su) * 6.9),34px)!important;min-height:44px!important}
/* the speaking row in the card: sentence, microphone, hear and next */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"] [data-tt-role="target-sentence"]{font-size:clamp(19px,calc(var(--su) * 5.77),36px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"]{--tt-mic-size:clamp(62px,calc(var(--su) * 16.4),64px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]>:is([data-tt-role="hear-button"],[data-tt-role="step-nav"]){--tt-side-btn:clamp(44px,calc(var(--su) * 11.1),48px);width:var(--tt-side-btn)!important;height:var(--tt-side-btn)!important;margin-top:calc((var(--tt-mic-size,54px) - var(--tt-side-btn)) / 2)!important}
/* "too big!" on the scene (it lives in #canvas, so it uses the stage's size) */
html body:not(#tt) #canvas>.scene1-toast{font-size:clamp(16px,calc(var(--tt-stage-h,600px) / 100 * 5.58),30px)}
/* Not converted, on purpose: the task bar and the "What can you see?" row in
   it. On a phone the bar is a 44px strip above the scene; on a large screen it
   sits inside the scene, 64px tall. Its type follows the slot it is in - a
   layout difference, which is what the two buckets are for. */
/* the story's ball: 18px on a phone, 30px on a laptop (scene1-lesson.js places it from its size) */
html body:not(#tt) .scene1-tennis-ball{width:clamp(18px,calc(var(--tt-ball-su,6px) * 4.76),30px)!important;height:clamp(18px,calc(var(--tt-ball-su,6px) * 4.76),30px)!important}

/* Words a child can tap (teemo-lesson-core.js markKeywords, list in
   mobile/teemo-words.js). Question words and key ideas are marked boldly; every
   other known word gets a dotted underline - enough to say "tap me" without
   turning the sentence yellow. Nothing is drawn inside the word. */
/* ONE underline for every tappable word, in every lesson (Blake, 2026-10-22:
   "For some words, it's bigger, for some words it's smaller, some are faint,
   and some are dark blue... It needs to be uniform always."). Fixed in px, not
   em, so a bigger word doesn't get a thicker or lower line. The kinds of word
   (quiet, strong, learned) no longer change it. */
html body:not(#tt) .tt-key,
html body:not(#tt) .tt-key.tt-key-quiet:not(.tt-key-open),
html body:not(#tt) .tt-key.tt-key-strong:not(.tt-key-open),
html body:not(#tt) .tt-key.tt-learned{cursor:pointer;border-radius:.3em;background:none;box-shadow:none;padding:0;color:inherit;text-decoration:underline dotted #6f9ff0!important;text-decoration-thickness:2px!important;text-underline-offset:5px!important;-webkit-tap-highlight-color:transparent}
@media (hover:hover){html body:not(#tt) .tt-key:hover{background:#e7efff}}
html body:not(#tt) .tt-key-strong{white-space:nowrap}
/* small grammar words (a, the, to, he): underlined like every word - Blake,
   2026-10-05, without it nobody knows they can be tapped - but lighter */
html body:not(#tt) .tt-key.tt-key-open{display:inline-block;padding:0 .16em;background:#1b4fc4;color:#fff;box-shadow:none;text-decoration:none}
html body:not(#tt) .tt-key:focus-visible{outline:3px solid #2166e8;outline-offset:2px}

/* the card a tap opens: the word (said aloud) and its Vietnamese */
html body:not(#tt)>.tt-word-card{position:fixed;z-index:2147483600;display:grid;gap:8px;min-width:120px;max-width:min(280px,calc(100vw - 16px));box-sizing:border-box;padding:10px 14px 12px;border-radius:16px;background:#fff;color:#1c2b5a;box-shadow:0 8px 28px rgba(20,30,70,.3);font-family:"Nunito",Arial,sans-serif;animation:tt-card-in .16s ease-out}
html body:not(#tt)>.tt-word-card::after{content:"";position:absolute;left:calc(var(--tail-x,50%) - 8px);bottom:-7px;width:16px;height:16px;background:#fff;transform:rotate(45deg);border-radius:3px}
html body:not(#tt)>.tt-word-card.below::after{bottom:auto;top:-7px}
html body:not(#tt) .tt-word-en{display:flex;align-items:center;justify-content:space-between;gap:12px;font:900 24px/1.1 "Nunito",Arial,sans-serif}
html body:not(#tt) .tt-word-say{flex:0 0 auto;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#eef3fb var(--tt-m-volume) center/20px no-repeat;cursor:pointer}
html body:not(#tt) .tt-word-vi{display:grid;gap:2px;padding-top:8px;border-top:1px solid #e3e9f5}
html body:not(#tt) .tt-word-lang{font:800 11px/1 "Nunito",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6a7898}
html body:not(#tt) .tt-word-vi [lang="vi"]{font:800 20px/1.2 "Nunito",Arial,sans-serif;color:#24356f}
@keyframes tt-card-in{from{opacity:0;transform:translateY(4px) scale(.96)}}

/* ...and, at the same time, the thing itself lit up in the scene */
html body:not(#tt)>.tt-scene-mark{position:fixed;z-index:2147483500;box-sizing:border-box;pointer-events:none;border:4px solid #ffd23f;border-radius:14px;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 22px 4px rgba(255,210,63,.75);animation:tt-mark-pulse 1.2s ease-in-out infinite}
/* a traced outline (teemo-words.js `shapes`): the line follows the thing itself */
html body:not(#tt)>.tt-scene-shape{position:fixed;z-index:2147483500;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255,200,40,.95));animation:tt-shape-pulse 1.2s ease-in-out infinite}
html body:not(#tt)>.tt-scene-shape polygon{fill:rgba(255,226,90,.22);stroke:#ffd23f;stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@keyframes tt-shape-pulse{50%{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px rgba(255,200,40,1))}}
@keyframes tt-mark-pulse{50%{box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 32px 10px rgba(255,210,63,.95)}}
html body:not(#tt) #canvas .scene1-packing-item.tt-word-spot{z-index:8!important;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #ffd23f) drop-shadow(0 0 22px rgba(255,210,63,.8));animation:tt-spot-bob 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html body:not(#tt)>.tt-scene-mark,html body:not(#tt)>.tt-scene-shape,html body:not(#tt)>.tt-word-card{animation:none}}

/* Find: where a found item may go (scene1-lesson.js .scene1-drop-area). Shown
   only while an item is being carried; everything else dims, so there is one
   obvious place to let go. Items take their own spot inside it, clear of the
   backpack, and stay put until it is time to pack them. */
html body:not(#tt) .scene1-drop-area{position:absolute;z-index:2;box-sizing:border-box;border:4px dashed rgba(255,255,255,.95);border-radius:22px;background:rgba(255,226,120,.25);pointer-events:none;opacity:0;transition:opacity .18s}
html.tt-dragging body:not(#tt) .scene1-drop-area{opacity:1;box-shadow:0 0 0 200vmax rgba(15,25,60,.4);animation:tt-drop-breathe 1.1s ease-in-out infinite}
@keyframes tt-drop-breathe{0%,100%{background-color:rgba(255,226,120,.22)}50%{background-color:rgba(255,226,120,.42)}}
html:not([data-tt-phase="pack"]):not(.tt-dev) body:not(#tt) #canvas .scene1-packing-item{pointer-events:none!important}
/* "I can see a water bottle": the water bottle glows (scene1-lesson.js); it
   stays still - only a tapped word makes its thing bob (.tt-word-spot) */
html body:not(#tt) #canvas .scene1-packing-item.tt-spotlight{z-index:8!important;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #ffd23f) drop-shadow(0 0 22px rgba(255,210,63,.8))}
@keyframes tt-spot-bob{0%,100%{translate:0 0}50%{translate:0 -8%}}


/* Packing: "The map is too big! Make it smaller." pops up in the middle of the
   scene (scene1-lesson.js showToast); the bar's small copy of it is not shown. */
html body:not(#tt) #canvas>.scene1-toast{position:absolute;left:50%;top:42%;z-index:40;transform:translate(-50%,-50%) scale(.9);max-width:min(80%,560px);box-sizing:border-box;padding:14px 22px;border-radius:18px;background:#fff;color:#1c2b5a;box-shadow:0 10px 30px rgba(20,30,70,.3);font:900 clamp(20px,3.2vw,30px)/1.25 "Nunito",Arial,sans-serif;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.3,1.3)}
html body:not(#tt) #canvas>.scene1-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
/* On a phone it sits high, over the wall and the map, right of Teemo: in the
   middle it covered the - / + it tells them to use, and Teemo's backpack
   (phone sweep, 2026-10-01). On a large screen the task bar sits inside the
   top of the scene, and the middle never covered anything, so it stays. */
@media (max-height:600px), (max-width:1000px){
  html body:not(#tt) #canvas>.scene1-toast{left:60%;top:4%;transform:translate(-50%,0) scale(.9);max-width:min(62%,560px);padding:8px 16px;border-radius:14px;font-size:clamp(16px,5.4vh,22px)}
  html body:not(#tt) #canvas>.scene1-toast.show{transform:translate(-50%,0) scale(1)}
}
/* not shown, and takes no room: hidden-but-there pushed the bar's speaker
   button into the middle of the bar */
html[data-tt-phase="pack"] body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{display:none!important}
/* while the hand shows how to drag, the - / + isn't part of it (the hint's
   label landed on top of it) */
html.tt-hint-drag body:not(#tt) .scene1-sizer{visibility:hidden}
/* after the last item the bar says "Great job!" - not next to the key */
html[data-tt-phase="done"] body:not(#tt) .scene1-inline-target-icon{display:none!important}

/* ================================================================== */
/* Packing: make it smaller (scene1-lesson.js places it on the item)   */
/* ================================================================== */
html body:not(#tt) .scene1-sizer{position:absolute;z-index:30;transform:translateX(-50%);display:flex;gap:10px;padding:5px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(20,30,70,.25)}
html body:not(#tt) .scene1-sizer[hidden]{display:none}
html body:not(#tt) .scene1-sizer button{all:unset;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body:not(#tt) .scene1-sizer button::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:var(--tt-icon) center/contain no-repeat;mask:var(--tt-icon) center/contain no-repeat}
html body:not(#tt) .scene1-sizer-smaller{--tt-icon:var(--tt-m-minus);background:#fac745;color:#3b2a00;box-shadow:0 2px 6px rgba(20,30,70,.18)}
html body:not(#tt) .scene1-sizer-bigger{--tt-icon:var(--tt-m-plus);background:#e8f0ff;color:#1d55c2;box-shadow:0 2px 6px rgba(20,30,70,.18)}
html body:not(#tt) .scene1-sizer button:active{transform:scale(.96)}
html body:not(#tt) .scene1-sizer button:focus-visible{outline:3px solid #2166e8;outline-offset:2px}
/* small enough: the - has done its job */
html body:not(#tt) .scene1-sizer.fits .scene1-sizer-smaller{background:#e3f5e8;color:#23743b;box-shadow:0 2px 6px rgba(20,30,70,.18)}
html body:not(#tt) .scene1-sizer.hint .scene1-sizer-smaller{animation:tt-sizer-hint .7s ease-in-out 3}
@keyframes tt-sizer-hint{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,211,79,.8)}50%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(255,211,79,0)}}
@media (prefers-reduced-motion:reduce){html body .scene1-sizer.hint .scene1-sizer-smaller{animation:none}}
/* The builder's item toolbar (rotate, flip, delete...) has no job in a lesson,
   and deleting a lesson item leaves the child stuck. */
html[data-tt-phase]:not([data-tt-phase=""]):not(.tt-dev)>.tt-itembar{display:none!important}
/* "The Passport is too big! Make it smaller" must be readable in the phone's
   task bar: two short lines instead of one cut off. */
@media (max-height:600px), (max-width:1000px){
  html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{white-space:normal!important;max-width:11em!important;font-size:13px!important;line-height:1.1!important;text-align:right!important}
}

/* Microphone help card (teemo-mobile.js showMicHelp) */
html>.tt-mic-help{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;background:rgba(16,32,70,.45);padding:12px}
html>.tt-mic-help[hidden]{display:none}
html>.tt-mic-help .tt-mic-help-card{max-width:min(440px,92vw);max-height:92vh;overflow:auto;box-sizing:border-box;padding:18px 22px 14px;border-radius:22px;background:#fffdf7;box-shadow:0 20px 50px rgba(10,20,50,.35);text-align:center;color:#1c2b5a;font:600 16px/1.35 "Nunito",Arial,sans-serif}
html>.tt-mic-help .tt-mic-help-icon{width:64px;height:64px;margin:0 auto 6px;border-radius:50%;background:var(--tt-w-mic) center/46% no-repeat,#2c88f0;box-shadow:0 2px 6px rgba(20,30,70,.18)}
html>.tt-mic-help h3{margin:4px 0 6px;font:900 21px/1.15 "Nunito",Arial,sans-serif;color:#1c2b5a}
html>.tt-mic-help p{margin:0 0 12px}
html>.tt-mic-help .tt-mic-help-go{all:unset;display:inline-block;min-height:44px;line-height:44px;padding:0 24px;border-radius:999px;background:#fac745;color:#3b2a00;box-shadow:0 2px 6px rgba(20,30,70,.18);font:900 17px/44px "Nunito",Arial,sans-serif;cursor:pointer}
html>.tt-mic-help .tt-mic-help-skip{all:unset;display:block;margin:10px auto 0;padding:8px 10px;color:#6a7898;font:700 14px/1.2 "Nunito",Arial,sans-serif;text-decoration:underline;cursor:pointer}

/* Back into full screen (teemo-mobile.js fsBtn): bottom-left, beside the testing skip button */
html>.tt-fs-corner{position:fixed;z-index:2147483000;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:44px;height:44px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:rgba(28,43,90,.55);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
html>.tt-fs-corner[hidden]{display:none}
html>.tt-fs-corner.beside-skip{left:calc(max(8px,env(safe-area-inset-left)) + 52px)}
html>.tt-fs-corner svg{width:22px;height:22px}

/* After 4 misses at saying something: a Skip, offered beside the microphone,
   never forced (teemo-lesson-core.js offerSkip). Quiet, so trying again is
   still the obvious thing to do. */
html body:not(#tt) .tt-say-skip{all:unset;box-sizing:border-box;flex:0 0 auto;align-self:center;justify-self:center;min-height:44px;padding:8px 16px;margin:0 0 0 4px;border-radius:999px;background:#eef1f7;color:#5a6a8f;font:800 15px/1.2 "Nunito",Arial,sans-serif;cursor:pointer;touch-action:manipulation;animation:tt-next-arrive .45s cubic-bezier(.3,1.5,.5,1) both}
html body:not(#tt) .tt-say-skip:active{transform:scale(.96)}
html body:not(#tt) .tt-say-skip:focus-visible{outline:3px solid #2166e8;outline-offset:2px}