:root{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;color:#725242;background:#f3e2c9;font-synthesis:none;--cream:#fff9e9;--mint:#477e6b;--peach:#d18b60}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}
body{position:relative;isolation:isolate;user-select:none;-webkit-user-select:none}
button,a{font:inherit;touch-action:manipulation}button{cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible{outline:4px solid #6d9a85;outline-offset:4px}[hidden]{display:none!important}
#room{position:absolute;inset:0;z-index:-2;background:#f3e1c5 url('assets/room-v1.webp') center 65%/cover no-repeat}
#room::after{content:'';position:absolute;inset:0;background:linear-gradient(#fff3dd38,transparent 35%,#fff8e615)}
.topbar{height:104px;display:flex;align-items:center;gap:18px;padding:16px max(26px,env(safe-area-inset-right)) 10px max(26px,env(safe-area-inset-left));position:relative;z-index:12}
.round-button{width:55px;height:55px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fffaf0ed;box-shadow:0 4px 0 #ad967a24,0 6px 20px #77573b0c;border:2px solid #fffdf8;text-decoration:none;color:#6a805f;transition:transform .14s,background .14s}
.round-button:active{transform:translateY(3px) scale(.96)}.round-button svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.title{min-width:0}.eyebrow{display:block;font-size:10px;font-weight:bold;letter-spacing:2.2px;opacity:.75;margin:0 0 3px 1px}.title h1{font-size:clamp(22px,3vw,36px);margin:0;font-weight:900;letter-spacing:-1px;text-shadow:0 2px #fffaf1a6}
.sound-controls{display:flex;gap:9px;margin-left:auto;align-items:center}.round-button.small{width:43px;height:43px;background:#fff8eebf}.small svg{width:25px;height:25px}.mute-line{display:none}.muted .mute-line{display:block}.muted{opacity:.64}.speaking #replay{background:#effcd7;box-shadow:0 0 0 5px #fff7,0 4px 16px #91846824}.audio-failed #replay{outline:3px solid #daa164}
#play-area{position:absolute;inset:90px 20px 135px;display:grid;place-items:center}
.teddy{position:relative;width:min(100%,calc(100dvh - 210px),720px);aspect-ratio:1;isolation:isolate;touch-action:none}
.teddy-shadow{position:absolute;left:12%;right:12%;height:9%;bottom:3%;background:radial-gradient(ellipse,#825d354f,transparent 68%);filter:blur(5px);z-index:-1}
.actor{position:absolute;inset:0;transform-origin:50% 86%;will-change:transform;animation:breathe 3.8s ease-in-out infinite}
.actor img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 3px #72583112)}
.pose-art{position:absolute;inset:0;background-repeat:no-repeat;background-size:200% 200%;opacity:0;pointer-events:none}
.actor.posed #idle-art{opacity:0}.actor.posed .pose-art{opacity:1}.actor.posed{animation:none}
.hotspots,.effects{position:absolute;inset:0}.effects{pointer-events:none;z-index:5}.hotspots{z-index:4}
.part-hit{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:max(48px,calc(var(--w)*1%));height:max(48px,calc(var(--h)*1%));transform:translate(-50%,-50%);border-radius:50%;padding:0;background:transparent;box-shadow:none;touch-action:none;outline-offset:0!important}
.part-hit::before{content:'';position:absolute;inset:4%;border:3px solid #fffbe9;border-radius:50%;opacity:0;box-shadow:0 0 0 4px #e4b36b40,0 0 22px #fff6c752;pointer-events:none}
.part-hit.cued::before{opacity:1;animation:cue 1.5s ease-in-out infinite}.part-hit.selected::before{opacity:1;border-color:#fff9cc;background:#fff2b91c;animation:tap-glow .55s ease-out}.part-hit.pending::before{opacity:.8;border-style:dotted;border-color:#fff8c5}
.part-hit:active::before{opacity:1;background:#fff2c621}.part-hit.demo::after{content:'';position:absolute;width:16px;height:16px;left:calc(50% - 8px);top:calc(50% - 8px);background:#fffce9e0;border:2px solid #d5a46b;border-radius:50%;box-shadow:0 0 0 8px #fff7da66;animation:demo-touch .9s ease-in-out infinite}
.prop{position:absolute;object-fit:contain;will-change:transform;filter:drop-shadow(0 4px 2px #68492525)}.hat{width:42%;height:auto;left:28%;top:-15%;transform-origin:50% 83%}.butterfly{width:15%;height:auto;left:43%;top:25%;transform-origin:50% 50%;z-index:2}
.bubble{position:absolute;width:18%;aspect-ratio:1;left:40%;top:25%;border-radius:50%;border:2px solid #ffffffe8;background:radial-gradient(circle at 29% 25%,#fffc 0 4%,#fff2 11%,transparent 17%),radial-gradient(circle at 65% 70%,#9deef454,#e6ccf136 50%,#f9bedb79 80%,#fff9 94%);box-shadow:inset -5px -4px 8px #aeedfc66,inset 4px 5px 8px #fff9,0 0 8px #fff7;transform-origin:50% 80%}.bubble i{position:absolute;width:20%;height:9%;left:21%;top:20%;border-radius:50%;background:#fffc;transform:rotate(-40deg)}
.sparkles{position:absolute;inset:0;overflow:visible}.spark{position:absolute;color:#efb84c;text-shadow:0 2px 2px #fff8;line-height:1;font-size:clamp(20px,4vw,33px);pointer-events:none}
.lesson{position:absolute;left:20px;right:20px;bottom:max(14px,env(safe-area-inset-bottom));text-align:center;z-index:10;pointer-events:none}
.spoken-card{display:inline-flex;gap:14px;align-items:center;justify-content:center;max-width:100%;min-height:60px;background:#fff9ecef;border:2px solid #fffdf7;box-shadow:0 5px 0 #be9d7124;padding:12px 25px;border-radius:25px;font-size:clamp(20px,2.4vw,29px);font-weight:bold;color:#637a58;letter-spacing:-.3px}
.sound-bars{display:flex;gap:3px;align-items:center;height:20px;flex:none}.sound-bars i{display:block;width:4px;height:5px;border-radius:4px;background:#86a47b}.speaking .sound-bars i{animation:sound-bar .6s ease-in-out infinite alternate}.speaking .sound-bars i:nth-child(2){animation-delay:-.3s}.speaking .sound-bars i:nth-child(3){animation-delay:-.15s}
.lesson-bottom{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:14px}.lesson p{font-size:12px;margin:0;color:#76684f;text-shadow:0 1px #fff9}
.play-modes{display:flex;gap:3px;border:1px solid #fff9;background:#fff8e69e;border-radius:18px;padding:3px;pointer-events:auto;box-shadow:0 2px 5px #84552c0d}.play-modes button{display:flex;align-items:center;gap:6px;background:transparent;border-radius:14px;padding:8px 12px;font-size:12px;color:#9b927b;min-height:37px;font-weight:bold}.play-modes button.active{background:#fffdf3;color:#547958;box-shadow:0 2px 4px #b8976e19}.play-modes svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.loading{position:absolute;z-index:30;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:90%;padding:20px 24px;border-radius:24px;background:#fff9eff7;box-shadow:0 8px 25px #8266362b;color:#7c785d;font-weight:bold;text-align:center}.loading button{border-radius:12px;background:#e7bd6c;padding:12px;white-space:nowrap}.spinner{width:20px;height:20px;flex:none;border:3px solid #d5d8b9;border-top-color:#7c9772;border-radius:50%;animation:turn 1s linear infinite}
.sound-note{position:absolute;right:22px;top:108px;z-index:20;background:#fff7e8f0;border:1px solid #e8c9a0;border-radius:14px;padding:9px 12px;font-size:12px;box-shadow:0 3px 12px #775b3220}
body[data-phase="loading"] .teddy{visibility:hidden}body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@keyframes breathe{50%{transform:translateY(-3px) scale(1.005)}}@keyframes cue{50%{transform:scale(1.08);box-shadow:0 0 0 8px #f9deb226,0 0 20px #fff8c45c}}@keyframes tap-glow{0%{transform:scale(.86)}60%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes demo-touch{50%{transform:scale(.68);opacity:.65}}@keyframes sound-bar{to{height:18px}}@keyframes turn{to{transform:rotate(360deg)}}
@media(max-width:760px) and (min-height:541px){
 .topbar{height:89px;padding:12px 13px;gap:10px}.round-button{width:45px;height:45px}.round-button svg{width:26px;height:26px}.title h1{font-size:26px;letter-spacing:-.8px}.eyebrow{font-size:8px;letter-spacing:1.1px}.sound-controls{gap:6px}.round-button.small{width:36px;height:36px}.small svg{width:23px;height:23px}
 #room{background-position:50% 60%}#play-area{inset:98px 7px 147px}.teddy{width:min(100%,calc(100dvh - 255px),650px);margin-bottom:-10px}.part-hit::before{border-width:2px}.lesson{left:14px;right:14px;bottom:max(15px,env(safe-area-inset-bottom))}.spoken-card{font-size:22px;min-height:56px;padding:12px 18px;border-radius:22px;gap:10px}.lesson-bottom{flex-direction:column;gap:10px;margin-top:12px}.play-modes button{min-height:39px;padding:7px 13px}.lesson p{font-size:11px}.sound-note{top:92px;right:12px;font-size:10px}
}
@media(max-height:540px){
 .topbar{height:63px;padding:7px 13px;gap:10px}.round-button{width:40px;height:40px}.round-button svg{width:25px;height:25px}.round-button.small{height:33px;width:33px}.title h1{font-size:25px}.eyebrow{font-size:8px;letter-spacing:.9px}
 #play-area{inset:62px 15px 83px}.teddy{width:min(100%,calc(100dvh - 133px),500px)}.lesson{bottom:6px}.spoken-card{font-size:18px;min-height:39px;padding:7px 18px;border-radius:17px;gap:9px}.lesson-bottom{margin-top:7px;gap:16px}.lesson p{font-size:10px}.play-modes{padding:2px;border-radius:13px}.play-modes button{font-size:10px;min-height:30px;padding:4px 9px;gap:4px}.play-modes svg{width:17px;height:17px}.sound-note{top:65px;font-size:10px;right:10px}.part-hit::before{border-width:2px}
}
@media(max-width:360px) and (min-height:541px){.topbar{gap:7px}.title h1{font-size:21px}.eyebrow{font-size:7px;letter-spacing:.6px}.round-button{width:40px;height:40px}.round-button.small{width:33px;height:33px}.sound-controls{gap:4px}#play-area{inset:91px 4px 132px}.teddy{width:min(100%,calc(100dvh - 225px))}.spoken-card{font-size:20px;min-height:49px;padding:10px 15px}.lesson-bottom{gap:8px;margin-top:9px}.lesson{bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Four picture-based close-ups keep small facial regions reachable on phones. */
#play-area{inset:100px 152px 132px 32px;display:block;overflow:hidden;border-radius:40px;max-width:880px;margin:0 auto;mask-image:linear-gradient(transparent,#000 3%,#000 96%,transparent)}
.teddy{position:absolute;width:640px;height:960px;aspect-ratio:2/3;margin:0;transition:width .25s,height .25s,left .25s,top .25s}
.actor{transform-origin:50% 60%;animation:none}.actor img{object-fit:fill;filter:none}
.part-hit{width:calc(var(--w)*1%);height:calc(var(--h)*1%);min-width:28px;min-height:22px}
.views{position:absolute;right:24px;top:50%;transform:translateY(-47%);display:flex;flex-direction:column;gap:10px;z-index:10}
.view-button{display:flex;align-items:center;gap:10px;width:112px;min-height:66px;background:#fff9e8e8;border:2px solid #fffef5;border-radius:23px;padding:5px;font-size:13px;font-weight:bold;box-shadow:0 3px 0 #b1957433;transition:transform .15s,background .15s}
.view-button.active{background:#e8efd5;border-color:#91af87;color:#50775e}.view-button:active{transform:scale(.95)}
.view-picture{flex:none;width:49px;height:51px;border-radius:17px;background-color:#f4dfb5;background-image:url('assets/teddy-idle-v2.webp');background-repeat:no-repeat;background-size:85px 128px;background-position:center -7px}
.view-picture.smile{background-size:166px 249px;background-position:center -58px}
.view-picture.body{background-size:59px 89px;background-position:center -34px}
.view-picture.legs{background-size:83px 125px;background-position:center -73px}
.hat{width:32%;left:34%;top:-4%}.bubble{width:13%;left:44.5%;top:22%}.butterfly{width:13%;left:45%;top:21%}
@media(max-width:760px) and (min-height:541px){
 #play-area{inset:92px 10px 231px;border-radius:32px}.teddy{margin:0}
 .views{top:auto;bottom:156px;left:10px;right:10px;transform:none;flex-direction:row;justify-content:center;gap:7px}
 .view-button{flex-direction:column;width:78px;min-height:69px;gap:3px;border-radius:19px;padding:4px 5px;font-size:11px}.view-picture{width:49px;height:43px;border-radius:14px}
 .view-picture.legs{background-position:center -77px}
}
@media(max-height:540px){
 #play-area{inset:63px 119px 84px 17px;border-radius:24px}
 .views{right:14px;top:54%;gap:5px}.view-button{min-height:47px;width:91px;border-radius:17px;gap:5px;font-size:11px;padding:3px}.view-picture{height:37px;width:37px;border-radius:11px;background-size:70px 105px;background-position:center -5px}.view-picture.smile{background-size:130px 195px;background-position:center -44px}.view-picture.body{background-size:49px 74px;background-position:center -29px}.view-picture.legs{background-size:66px 99px;background-position:center -60px}
}
@media(max-width:360px) and (min-height:541px){#play-area{inset:90px 7px 211px}.views{bottom:143px;gap:5px}.view-button{min-height:61px;width:69px;font-size:10px}.view-picture{height:35px}.view-picture.face{background-size:73px 109px;background-position:center -6px}}

body[data-phase='reacting'] .part-hit::before{opacity:0!important}body[data-phase='reacting'] .part-hit::after{display:none}
.pose-art[data-sheet='palms'],.pose-art[data-sheet='body']{clip-path:inset(0 4%)}.pose-art[data-sheet='legs']{clip-path:inset(0 8%)}