*{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}}