:root{font-family:DM Sans,system-ui,sans-serif;color:#283e39;background:#f7f6f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #e8ae51;outline-offset:4px}button{color:inherit}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid #e4e6df;background:#fcfbf8}.brand{display:flex;gap:12px;align-items:center}.brand-icon{background:#dfe9d9;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;font-size:25px}.brand strong{font-family:Manrope,sans-serif;font-size:23px;letter-spacing:-1px}.brand small{display:block;font-size:10px;letter-spacing:2px;color:#7b8a7d;margin-top:3px}.header-right{display:flex;align-items:center;gap:25px;font-size:12px;color:#79867c}.badge{background:#eef1e8;padding:7px 12px;border-radius:20px;color:#536951}.outline{background:transparent;border:1px solid #d9ded4;padding:10px 15px;border-radius:10px;font-size:12px}main{max-width:1500px;margin:auto;padding:30px 42px 22px}.intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:2px;color:#8b977e;font-weight:700}.intro h1{font-family:Manrope,sans-serif;font-size:29px;letter-spacing:-1px;margin:7px 0}.intro p{color:#8a9287;font-size:12px;margin:0}.step{font-size:11px;color:#7e8a7b}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px}.stage-wrap{position:relative;border:1px solid #e0e5d9;border-radius:22px;overflow:hidden;background:#eaf0e2;height:590px}.stage{width:100%;height:100%;touch-action:none}.stage canvas{display:block;width:100%;height:100%}.stage-top{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none}.stage-title{font-size:10px;letter-spacing:2px;color:#708268}.live{font-size:10px;color:#6a8061;background:#ffffff80;padding:6px 10px;border-radius:20px}.live:before{content:"●";color:#7b9f6d;margin-right:6px}.stage-bottom{position:absolute;bottom:21px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between}.stage-hint{font-size:11px;color:#84907a}.stage-actions{display:flex;gap:7px}.round{border:1px solid #fff;background:#ffffffb8;border-radius:10px;padding:10px 13px;font-size:12px}.name-tag{position:absolute;left:26px;top:67px;border:1px solid #ffffffb0;background:#ffffff80;border-radius:12px;padding:10px 13px;font-size:12px}.name-tag small{display:block;font-size:10px;color:#84917c;margin-top:3px}.panel{background:#fffefa;border:1px solid #e5e6dd;border-radius:22px;padding:22px;display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel-heading h2{font-size:16px;margin:0}.panel-heading span{font-size:10px;color:#92998a}.tabs{display:flex;background:#f0f2eb;border-radius:11px;padding:4px;gap:3px;margin-bottom:19px}.tab{flex:1;border:0;background:transparent;border-radius:8px;padding:10px 0;font-size:12px;color:#8a9585}.tab.active{background:#fff;color:#38573f;box-shadow:0 2px 5px #2030270c}.section-caption{font-size:11px;color:#92998b;margin:0 0 20px}.control{margin-bottom:22px}.control-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.control-label label{font-size:13px;font-weight:600}.cn{font-size:10px;color:#9a9f93;margin-left:6px;font-weight:400}.value{font-size:10px;color:#7d8d6d;background:#eff3e9;padding:4px 7px;border-radius:5px;font-variant-numeric:tabular-nums}.range-row{display:flex;align-items:center;gap:10px}.endpoint{border:0;background:transparent;padding:4px 0;font-size:10px;color:#88917d;min-width:30px}input[type=range]{width:100%;accent-color:#638558;height:4px;cursor:pointer}.divider{height:1px;background:#ebede4;margin:1px 0 18px}.swatches{display:flex;gap:10px;margin-top:12px}.swatch{width:27px;height:27px;border:3px solid #fff;border-radius:50%;outline:1px solid #e5e5dd}.swatch.selected{outline:2px solid #6b865a;outline-offset:2px}.panel-footer{margin-top:auto;padding-top:13px;display:flex;gap:9px}.panel-footer button{flex:1;border:1px solid #dde3d5;border-radius:10px;padding:12px 5px;background:transparent;font-size:11px}.panel-footer .primary{background:#486a49;border-color:#486a49;color:#fff}.sentence{margin-top:18px;background:#fffefa;border:1px solid #e4e6dd;border-radius:16px;padding:19px 24px;display:flex;align-items:center;gap:16px;min-height:92px}.quote{font-family:Georgia,serif;font-size:40px;color:#93a37a;line-height:1}.sentence small{font-size:9px;letter-spacing:1.8px;color:#959c89}.sentence p{font-size:19px;margin:6px 0 0;font-weight:500}.sentence em{font-style:normal;color:#6c8a4d}.vocab{margin-top:23px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}.vocab-title{font-size:10px;letter-spacing:1px;color:#8f9987;margin-right:8px}.word{border:1px solid #e1e5d8;background:transparent;padding:8px 13px;border-radius:8px;font-size:11px}.word.active{background:#e7eddc;border-color:#c9d4b7;color:#557144}.footer{display:flex;justify-content:space-between;color:#9ca390;font-size:10px;margin-top:25px}.segmented{display:flex;gap:7px;margin:10px 0 23px}.segmented button{flex:1;border:1px solid #dfe5d6;background:transparent;border-radius:8px;padding:9px;font-size:11px}.segmented button.selected{background:#e8efdf;border-color:#9cb48a}.notice{font-size:11px;color:#8b9681;line-height:1.8}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%);background:#36503e;color:#fff;padding:12px 22px;border-radius:12px;font-size:12px;z-index:5}.hidden{display:none!important}body.fullscreen header,body.fullscreen .intro,body.fullscreen .footer{display:none}body.fullscreen main{max-width:none;padding-top:18px}body.fullscreen .stage-wrap{height:calc(100vh - 205px);min-height:400px}@media(min-width:1500px){.stage-wrap{height:650px}}@media(max-width:1000px){main{padding:24px}.workspace{grid-template-columns:minmax(0,1fr) 310px}.panel{padding:18px}.stage-wrap{height:570px}header{padding:0 24px}.header-right>span{display:none}}@media(max-width:720px){header{height:70px;padding:0 18px}.brand strong{font-size:20px}.header-right{gap:5px}.badge{display:none}main{padding:22px 15px}.intro h1{font-size:24px}.step{display:none}.workspace{grid-template-columns:1fr}.stage-wrap{height:440px}.panel{min-height:475px}.sentence p{font-size:16px}.footer{gap:20px;line-height:1.6}.stage-hint{font-size:9px}.stage-bottom{left:15px;right:15px}.vocab{gap:6px}.word{padding:8px 10px}body.fullscreen .stage-wrap{height:65vh}}:root .stage-wrap{background:#6e91a2;border-color:#72909e}:root .stage-title,:root .stage-hint{color:#f2f6f8}:root .name-tag{background:#f8fbf2ed;border-color:#fff}:root .live{background:#f8fbf2e8;color:#3e624b}.character-picker{display:flex;gap:8px;margin:0 0 16px}.character-picker button{flex:1;padding:11px;border:1px solid #dce4d5;border-radius:10px;background:#f7f8f2;font-weight:600;font-size:14px}.character-picker button span{font-size:11px;font-weight:400;margin-left:8px}.character-picker button[aria-pressed=true]{background:#486a49;color:#fff;border-color:#486a49}.play-mode .workspace{display:block}.play-mode .panel{display:none}.play-mode.teacher-open .workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px}.play-mode.teacher-open .panel{display:flex}.play-mode .vocab,.play-mode .footer{display:none}.play-mode main{max-width:1250px;padding-top:15px}.play-mode main>.character-picker{width:250px;margin:0 auto 12px}.play-mode .stage-wrap{height:53vh;min-height:380px}.play-mode .sentence{margin-top:10px;min-height:65px;padding:10px 20px}.play-mode .name-tag{display:none}.part-pop{position:absolute;transform:translate(-50%,-50%);background:#fffdf5;border-radius:16px;padding:16px;box-shadow:0 8px 30px #20354338;z-index:3;min-width:175px;text-align:center}.part-pop b{display:block;margin-bottom:10px}.part-pop button{background:#e5eedb;border:1px solid #bfceb3;border-radius:8px;padding:10px;margin:2px;min-width:62px}.part-pop #close-part{position:absolute;right:-10px;top:-12px;border-radius:50%;min-width:25px;padding:3px;background:#fff}.part-pop.guided{outline:3px solid #f3ce68}.part-pop .target-choice{background:#f5ce62;outline:3px solid #fff2bb}.hint-sign{position:absolute;color:#fff;background:#35546c;border:3px solid #f5d372;padding:10px 15px;border-radius:50px;transform:translate(-50%);pointer-events:none;font-size:19px;box-shadow:0 0 0 10px #f5d37235;z-index:2}.buddy{display:flex;gap:15px;background:#fffdf5;border:1px solid #dce4d5;padding:19px;border-radius:18px;margin-top:12px}.buddy-avatar{display:grid;place-items:center;border-radius:16px;background:#d9e7c7;font-size:30px;width:55px;height:55px;flex-shrink:0}.buddy-content{flex:1}.buddy small{letter-spacing:1px;color:#65805b;font-size:10px}.buddy small span{margin-left:15px;color:#929c82}.buddy p{font-size:20px;margin:9px 0 14px;min-height:26px}.buddy-buttons,.actions{display:flex;flex-wrap:wrap;gap:8px}.buddy button,.actions button,.actions select{border:1px solid #d5decb;border-radius:9px;background:#edf2e4;padding:10px 14px;font-size:12px}.buddy #check{background:#486a49;color:#fff}.actions{margin:12px 0;align-items:center}.actions label{font-size:12px}.actions #play-reset{margin-left:auto}.play-mode .header-right>span{display:none}@media(max-width:720px){.play-mode.teacher-open .workspace{display:block}.play-mode .stage-wrap{min-height:360px;height:48vh}.buddy{padding:13px;gap:10px}.buddy p{font-size:17px}.buddy-avatar{width:38px;height:38px}.play-mode header{padding:0 12px}.play-mode .brand small{display:none}.play-mode .outline{padding:8px;font-size:10px}.play-mode.teacher-open .panel{margin-top:12px}}.part-halo{position:absolute;border:3px solid #ffe194;border-radius:50%;box-shadow:0 0 0 4px #ffe19433;transform:translate(-50%,-50%);pointer-events:none;z-index:1}.challenge-reward{position:absolute;top:62px;left:50%;transform:translate(-50%);padding:13px 22px;border:2px solid #f2cc6a;border-radius:18px;background:#fff7d8;color:#52643d;font-weight:700;text-align:center;pointer-events:none;z-index:4;box-shadow:0 8px 24px #20354325;animation:reward-in .35s ease-out}.buddy.celebrating{border-color:#dfbd5c;background:#fff8dc}.buddy.celebrating .buddy-avatar{background:#f5dc8c}@keyframes reward-in{0%{opacity:0;translate:0 -10px;scale:.9}to{opacity:1;translate:0 0;scale:1}}@media(prefers-reduced-motion:reduce){.challenge-reward{animation:none}}