*{box-sizing:border-box}body{margin:0;background:#f4f5ef;color:#294b3d;font-family:system-ui,-apple-system,"Malgun Gothic",sans-serif;line-height:1.5}header,main,footer{max-width:1180px;margin:auto}header{padding:20px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center}.brand{font-size:17px;font-weight:850;letter-spacing:1px}.brand span{display:block;font-size:11px;font-weight:500;letter-spacing:.2px;color:#778a7a}.pill{font-size:11px;letter-spacing:1px;background:#e7eddf;border-radius:30px;padding:8px 12px;white-space:nowrap}main{padding:0 24px}.heading{display:flex;align-items:center;justify-content:space-between;margin:18px 0;gap:12px}.eyebrow{font-size:10px;letter-spacing:2px;color:#80917d}h1{font-size:29px;line-height:1.2;margin:8px 0 0;letter-spacing:-.7px}#progress{display:flex;gap:5px}#progress span{width:8px;height:8px;background:#d8dfd1;border-radius:50%}#progress .active{background:#4c8567}#stage{position:relative;overflow:hidden;border-radius:24px;border:1px solid #dae3d1;background:#def0ef;box-shadow:0 10px 35px #284b3d0c;padding-top:174px}#world{width:100%;display:block;height:auto}#speechBubble{position:absolute;top:18px;left:8%;width:84%;height:144px;border-radius:18px;background:#fffef5;border:2px solid #aec9b4;padding:15px 22px;z-index:1;box-shadow:0 5px 14px #48634410;overflow:auto}#speechBubble>div{display:flex;justify-content:space-between;gap:12px;font-size:12px}#speaker{color:#497553}#languageLabel{font-size:10px;letter-spacing:.7px;color:#819072}#caption{font-size:23px;line-height:1.32;margin:10px 0 0;overflow-wrap:anywhere}#subcaption{font-size:13px;color:#71826b;margin:6px 0 0}#turnLabel{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);background:#fffef1eb;border:1px solid #d7ddc7;border-radius:20px;padding:6px 16px;font-size:12px;white-space:nowrap}button,select{font:inherit;font-size:14px;border:1px solid #c9d6c5;border-radius:10px;background:white;color:#2e5741;padding:10px 15px;min-height:44px;cursor:pointer}button:hover{background:#eaf1e3}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #deae55;outline-offset:3px}#next{background:#376b4e;color:white;border-color:#376b4e;min-width:170px}.playbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:17px 0}.playbar>div{margin-left:auto;text-align:right;font-size:13px}#status{display:block;font-size:12px;color:#7b8c74}.settings{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px 0;border-block:1px solid #dee5d8}.settings label{display:flex;gap:8px;align-items:center;font-size:13px}input[type=range]{width:90px;accent-color:#497553}details{background:#fffdf5;border:1px solid #e1e5d7;border-radius:12px;padding:15px 18px;margin:20px 0;color:#5e745f;font-size:13px}summary{font-weight:700;cursor:pointer}details a{margin-left:14px;color:#416748}footer{padding:10px 24px 25px;color:#899780;font-size:11px}.paused #stage{filter:saturate(.85)}.actor-ring{fill:none;stroke:#d9b861;stroke-width:4;opacity:0}.speaking .actor-ring{opacity:.7}.target-dot{fill:#e8bd62;stroke:#fff9df;stroke-width:3}.actor-label{font-family:system-ui,sans-serif;font-size:17px;font-weight:700;fill:#35593d}.social-note{font-size:35px;fill:#f5c365;font-weight:bold}#caption[data-lang=ko]{font-size:21px}@media(max-width:650px){header{padding:15px 16px}.brand{font-size:14px}.pill{font-size:9px;padding:6px 8px}main{padding:0 12px}.heading{margin:10px 4px 14px;align-items:end}h1{font-size:23px}.eyebrow{font-size:9px;letter-spacing:1px}#stage{padding-top:191px;border-radius:18px}#speechBubble{top:12px;left:4%;width:92%;height:170px;padding:12px 14px}#caption,#caption[data-lang=ko]{font-size:19px;line-height:1.38}#subcaption{font-size:11px}#world{width:135%;max-width:none;margin-left:-17.5%}#turnLabel{font-size:10px;bottom:5px;padding:4px 10px}.playbar{gap:7px}.playbar button{padding:9px 11px;font-size:12px}#next{min-width:140px;flex:1}.playbar>div{flex:0 0 100%;text-align:left}.settings{gap:10px}.settings label{font-size:12px;gap:5px}.settings select{font-size:12px;padding:8px}details{padding:12px}footer{font-size:10px;padding-inline:16px}}

#speechBubble{visibility:hidden}#speechBubble.active{visibility:visible}.paused #speechBubble{visibility:hidden}#turnLabel{position:static;transform:none;display:table;margin:8px auto 0;padding:2px 12px;background:none;border:0;min-height:24px}#lessonSelect{max-width:300px}#speechBubble[data-actor=jamie]{border-left:7px solid #d69e63}#speechBubble[data-actor=mansu]{border-right:7px solid #6b9b8c}.detail-note{font:14px system-ui;fill:#426a52}.footprint{fill:#94b9a8;opacity:.4}.breathing{animation:breathe 1s ease-in-out infinite}.paused .breathing{animation-play-state:paused}@keyframes breathe{50%{transform:translateY(-2px)}}@media(max-width:650px){#lessonSelect{max-width:245px}.settings label{flex-wrap:wrap}#turnLabel{font-size:11px}}

#channelLink{position:absolute;right:16px;bottom:14px;z-index:2;display:flex;align-items:center;flex-direction:column;gap:3px;text-decoration:none;color:#35593d;border-radius:50%;-webkit-tap-highlight-color:transparent}#channelLink img{display:block;width:72px;height:72px;border-radius:50%;border:2px solid #fffaf0;box-shadow:0 2px 8px #294b3d24}#channelLink span{font-size:10px;line-height:1.3;background:#fffaf0ed;padding:2px 7px;border-radius:12px}#channelLink:hover img{box-shadow:0 2px 12px #294b3d50}#channelLink:focus-visible{outline:3px solid #deae55;outline-offset:5px}@media(max-width:650px){#channelLink{right:9px;bottom:9px}#channelLink img{width:54px;height:54px}#channelLink span{font-size:9px}}@media(max-width:650px) and (orientation:portrait){#stage{padding-bottom:82px}#channelLink{right:12px;bottom:8px}}

/* Continue prompt occupies the reserved speech area only while awaiting a tap. */
#tapPrompt{position:absolute;top:18px;left:8%;width:84%;height:144px;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}
#tapPrompt[hidden]{display:none}
#tapNext{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:14px;max-width:100%;min-height:86px;padding:12px 24px;border:2px solid #e1b85d;border-radius:20px;background:#fffaf0;color:#294b3d;box-shadow:0 4px 16px #294b3d26;touch-action:manipulation}
#tapNext:hover{background:#fff2cf}#tapNext strong{display:block;font-size:22px;line-height:1.3}#tapNext small{display:block;font-size:13px;margin-top:4px}#tapAction{display:block;font-size:12px;color:#59745e;margin-top:3px}.tapFinger{font-size:38px;line-height:1;animation:tapNudge 1.6s ease-in-out infinite}
@keyframes tapNudge{50%{transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){.tapFinger{animation:none}}
@media(max-width:650px){#tapPrompt{top:12px;left:4%;width:92%;height:170px}#tapNext{gap:10px;padding:12px 16px;min-height:88px}#tapNext strong{font-size:20px}.tapFinger{font-size:34px}}

.voice-name{display:inline-flex;align-items:center;gap:9px;min-width:0}.voice-meter{display:inline-flex;align-items:center;gap:3px;height:20px;width:29px;color:#558e78;flex:none}.voice-meter i{display:block;width:3px;height:3px;border-radius:3px;background:currentColor;transition:height 65ms linear}.voice-meter[data-talking="true"]{color:#367c5b}#speechBubble[data-actor="jamie"] .voice-meter{color:#c18b4e}.paused .voice-meter i{height:3px!important}@media(prefers-reduced-motion:reduce){.voice-meter i{transition:none;height:3px!important}.voice-meter[data-talking="true"] i{height:10px!important}}

/* Mouth follows the same audible speech samples as the equalizer. */
.mouth-patch{display:none;pointer-events:none}
body.voice-talking:not(.paused) .speaking .mouth-patch{display:inline}

/* Keep the lesson, continue cue and settings together on landscape computers. */
@media (min-width:760px) and (min-height:600px) and (orientation:landscape){
  header{height:44px;padding:5px 24px}
  .brand{font-size:14px}.brand span{font-size:10px}.pill{padding:4px 10px}
  main{height:calc(100vh - 44px);height:calc(100dvh - 44px);display:grid;grid-template-rows:46px minmax(0,1fr) 20px 48px auto 32px;gap:4px;padding-bottom:6px}
  .heading{margin:0;align-items:center}.eyebrow{font-size:9px}h1{font-size:23px;margin:2px 0 0}
  #stage{min-height:0;padding-top:112px;display:grid;grid-template-rows:minmax(0,1fr);border-radius:18px}
  #world{height:100%;width:100%;min-height:0;margin:0;max-width:100%}
  #speechBubble,#tapPrompt{top:8px;left:5%;width:90%;height:98px}
  #speechBubble{padding:8px 16px}
  #caption,#caption[data-lang=ko]{font-size:20px;line-height:1.25;margin-top:4px}
  #subcaption{font-size:12px;margin-top:3px}
  #tapNext{min-height:76px;padding:6px 20px}#tapNext strong{font-size:20px}
  #turnLabel{margin:0 auto;min-height:0;padding:0;font-size:11px}
  .playbar{margin:0;gap:8px;flex-wrap:nowrap}.playbar>div{font-size:12px}#status{font-size:11px}
  .settings{padding:5px 0;gap:5px 12px}.settings label{font-size:12px;gap:5px}
  button,select{font-size:13px;padding:7px 10px;min-height:40px}
  #lessonSelect{max-width:240px}#next{min-width:150px}
  #channelLink{right:10px;bottom:8px}#channelLink img{width:48px;height:48px}#channelLink span{font-size:9px}
  details{margin:0;padding:4px 12px;align-self:start;font-size:12px}
  details[open]{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);width:min(900px,95vw);max-height:65vh;overflow:auto;z-index:10;box-shadow:0 4px 24px #294b3d44;padding:12px 16px}
  footer{display:none}
}