:root{--ink:#164d44;--muted:#6d7e72;--paper:#fffef8;--line:#dce2d7;--accent:#176b58;--sand:#f3f1e8;--gold:#e6ba68}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font-family:'Microsoft YaHei','Segoe UI',sans-serif}button,input,select{font:inherit}button{border:1px solid var(--line);border-radius:9px;padding:12px 20px;background:#fffef8;color:var(--ink);font-size:19px;cursor:pointer;transition:background .16s,transform .16s,box-shadow .16s}button:hover{background:#eaf1e5;box-shadow:0 4px 14px #1a433b12}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.65}button:focus-visible,summary:focus-visible{outline:3px solid #e6ba68;outline-offset:3px}.primary,button.chosen{background:var(--accent);border-color:var(--accent);color:white}.primary:hover,button.chosen:hover{background:#115846}[hidden]{display:none!important}header{height:68px;padding:0 30px;display:flex;gap:22px;align-items:center;background:#fffef8;border-bottom:1px solid var(--line)}header strong{font-size:23px;white-space:nowrap;cursor:pointer}header #roleLabel{font-size:14px;color:var(--muted)}header #mute{margin-left:auto}header button{padding:9px 15px;font-size:16px}#portalNav{display:flex;gap:8px}#portalNav button{font-size:16px;background:transparent;border:0}#portalNav button.chosen{background:#e5eee1;color:var(--ink)}
#welcome{max-width:1450px;min-height:calc(100dvh - 68px);margin:auto;padding:7vh 5vw;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,1fr);gap:50px;align-items:center}.welcome-hero{min-height:540px;position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:url('generated/transport.png') 66% center/cover;padding:50px}.welcome-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f9f2dbee 0%,#f8f2df90 48%,transparent 85%);z-index:-1}.welcome-hero p{font-size:20px;letter-spacing:.13em}.welcome-hero h1{font-size:clamp(45px,5.2vw,76px);line-height:1.22;margin:36px 0;font-weight:700;letter-spacing:.04em}.welcome-hero span{position:absolute;bottom:46px;left:50px;font-size:21px;letter-spacing:.22em}.join-panel{padding:35px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px #17382c08}.join-panel h2{font-size:28px;margin:0 0 28px}.join-panel label{display:block;font-size:17px;margin:17px 0}.join-panel input,.join-panel select{width:100%;margin-top:8px;padding:13px 10px;color:var(--ink);background:white;border:1px solid #cbd5c4;border-radius:6px;font-size:18px}.join-panel button{display:block;width:100%;min-height:52px;margin:13px 0;background:var(--accent);color:white;border:0}.join-panel .subtle{background:#e8efe2;color:var(--ink)}.join-panel hr{border:0;border-top:1px solid var(--line);margin:25px 0}#welcomeHint{font-size:15px;line-height:1.7;color:var(--muted)}
#hub{max-width:1450px;min-height:calc(100dvh - 68px);margin:auto;padding:35px 5vw}.hub-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.hub-heading h1{font-size:34px;margin:10px 0}.hub-heading p{font-size:16px;letter-spacing:.09em;color:var(--muted)}#hubTopActions{display:flex;gap:15px;align-items:center}.home-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:18px 0}.scene-entry{height:54vh;min-height:370px;max-height:560px;border:0;position:relative;overflow:hidden;isolation:isolate;text-align:left;padding:30px;border-radius:18px;background:#183d30;box-shadow:0 14px 28px #133c2515}.scene-entry:hover{transform:translateY(-4px)}.scene-entry>img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;z-index:-2}.scene-entry:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0b3028f5,transparent 80%)}.scene-entry .entry-number{position:absolute;top:26px;left:28px;font-size:27px;color:#f7edc8}.scene-entry>div{position:absolute;bottom:30px;left:28px;right:20px}.scene-entry h2{font-size:34px;color:#fff4d5;margin:10px 0}.scene-entry p{font-size:20px;line-height:1.6;color:#e6eace}.management-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px}.paper{padding:28px;border:1px solid var(--line);background:var(--paper);border-radius:14px;margin-bottom:23px}.paper h2{font-size:25px;margin:0 0 18px}.paper h3{font-size:20px}.paper p{font-size:17px;line-height:1.8;color:var(--muted)}.recipient-title{font-size:17px;margin-top:22px}.target-buttons{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 23px}.target-buttons button{padding:11px 17px;font-size:19px}.push-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.push-cards button{min-height:100px;text-align:left;font-size:23px;line-height:1.4;background:#edf2e7;border:0}.row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}#workActions{display:flex;flex-wrap:wrap;gap:7px}#workActions button{font-size:16px;padding:10px 13px}.room-code{font-size:31px;letter-spacing:.1em;font-weight:600}#works{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.work-tile{border:1px solid var(--line);background:#f8f9f0;border-radius:9px;padding:18px}.work-tile h3{margin:0}.work-tile canvas{display:block;max-width:100%;width:100%;height:115px;object-fit:contain;margin:12px 0}.work-tile button{font-size:16px;margin:5px 5px 0 0;padding:10px}.side-guide h3{margin:26px 0 8px}.side-guide hr{border:0;border-top:1px solid var(--line);margin:26px 0}.settings-paper{max-width:950px;margin:auto}.settings-paper h2:not(:first-child){margin-top:32px}#screenButtons{display:flex;gap:12px;flex-wrap:wrap}
#classroom{height:calc(100dvh - 68px);max-width:1800px;margin:auto;padding:0 24px 8px;display:grid;grid-template-rows:88px minmax(0,1fr) 64px 28px;gap:0}.heading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:8px 4px}.heading h1{font-size:30px;margin:0 0 7px;line-height:1.2}.heading p{font-size:20px;margin:0;color:var(--muted);line-height:1.4}#eyebrow{display:none}#teacherMenu{position:relative;z-index:20}#teacherMenu>summary{list-style:none;cursor:pointer;padding:12px 18px;background:#fffef8;border:1px solid var(--line);border-radius:8px;font-size:17px;white-space:nowrap}#teacherPanel{position:absolute;right:0;top:55px;width:min(620px,90vw);padding:23px;max-height:70vh;overflow:auto;background:#fffef8;box-shadow:0 15px 55px #0c31222b;border:1px solid var(--line);border-radius:12px}#stageList,#teacherActions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}#stageList button,#teacherActions button{font-size:16px;padding:10px 13px}#roomInfo{font-size:17px}#mediaInput{max-width:100%;font-size:15px}.small{font-size:14px;line-height:1.7;color:var(--muted)}#workspace{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;min-height:0}#scene{position:relative;overflow:hidden;min-width:0;min-height:0;border-radius:16px;background:#143b2c}#map{width:100%;height:100%;display:block;touch-action:none}#lessonView{position:absolute;inset:0;overflow:hidden;color:#fff5df}#tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center;overflow:auto;min-height:0;padding:8px 0}.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 8px;font-size:22px;min-height:62px;background:#fffdf5;border:1px solid #d7ddcd;box-shadow:0 3px 8px #183a2310}.tool img{width:100%;height:65px;object-fit:contain}.tool.active{background:#e2ecdc;border:2px solid var(--accent);padding:11px 7px}.tool.utility{min-height:60px}.wide,.submission{grid-column:1/-1}.submission{font-size:21px;text-align:left;padding:14px}.submission small{display:block;font-size:15px;margin-top:7px}.submission.active{background:#e5efde;border-color:#63946d}#tools .note{grid-column:1/-1;font-size:16px;line-height:1.7;color:var(--muted);padding:5px 10px}#waiting{position:absolute;inset:0;background:#f5f4e9f5;display:flex;justify-content:center;align-items:center;text-align:center;padding:30px;font-size:28px}footer{display:flex;justify-content:space-between;align-items:center;gap:12px}#lessonNav,#actions{display:flex;gap:7px;align-items:center}footer button{font-size:19px;padding:11px 16px;min-height:46px}#pageSelect{max-width:210px;height:44px;font-size:16px;color:var(--ink);border:1px solid var(--line);background:#fffef8;border-radius:6px;padding:7px}#notice{margin:0;align-self:center;text-align:center;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6e6444}#classroom.coop-active{grid-template-rows:80px 58px minmax(0,1fr) 64px 28px}#crewStrip{display:flex;gap:10px;align-items:center;justify-content:center;overflow:auto}#crewStrip button{font-size:19px;padding:9px 18px;white-space:nowrap}.crew-choice.mine{opacity:1;background:#dfeeda;border-color:#376e50}#classroom.coop-overview #workspace{grid-template-columns:1fr}#classroom.coop-overview #tools{display:none}#classroom.coop-overview #scene{background:#fbfbf3;border:1px solid var(--line)}#cooperation{height:100%;padding:24px;display:flex;flex-direction:column;gap:20px;overflow:auto}.coop-steps{display:flex;justify-content:center;align-items:center;gap:35px;font-size:18px;color:#5c7665}.coop-steps span{display:flex;align-items:center;gap:9px}.coop-steps b{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;background:#e5edde;color:#295c47;font-size:17px}.crew-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;flex:1;min-height:0}.crew-card{position:relative;padding:24px 18px 18px;background:#f1f4e8;border:1px solid #d7e2cf;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.crew-card:nth-child(2){background:#e9f1ef}.crew-card:nth-child(3){background:#f3efdf}.crew-card:nth-child(4){background:#edece2}.crew-number{font-size:26px;font-weight:600;color:#567a61;position:absolute;top:18px;left:20px}.crew-city h2{font-size:29px;margin:15px 0 5px}.crew-city p{font-size:20px;margin:0;color:#6f816f}.crew-art{height:130px;width:100%;margin:12px 0}.crew-art img{width:100%;height:100%;object-fit:contain}.crew-brief{font-size:16px;line-height:1.6;min-height:48px;margin:5px 0;color:#627365}.crew-status{font-size:17px;color:#557a58;margin:4px 0 16px}.crew-card>button{font-size:19px;padding:12px;width:100%;max-width:230px;margin-top:auto;background:#fffef7}.student .heading h1{font-size:31px}.student #actions button{font-size:23px}.student #tools{gap:11px}.student #tools .tool{font-size:25px}.student #tools .tool img{height:75px}
/* The lesson visuals remain generated image layers; controls stay separate from them. */
.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.scene-shade{position:absolute;inset:0;background:linear-gradient(0deg,#071f16b0,transparent 60%)}.scene-title{position:absolute;left:7%;right:7%;bottom:10%;font-size:clamp(28px,3.5vw,50px);line-height:1.5;text-shadow:0 3px 16px #001b12;font-weight:600}.scene-tag{position:absolute;top:22px;left:24px;font-size:17px;padding:8px 16px;background:#10291fc9;border-radius:8px;color:#d9e8cf}.scene-rail{position:absolute;left:12%;right:12%;top:45%;height:90px;display:flex}.scene-rail img{width:20%;height:100%;object-fit:cover}.scene-train{position:absolute;left:7%;top:45%;width:140px;transform:translateY(10px);animation:ride 9s linear infinite}.rule-pair{height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding:6%}.rule-pair article{text-align:center;min-width:0}.rule-pair img{width:100%;height:190px;object-fit:contain}.rule-pair h2{font-size:32px;font-weight:600}.rule-pair p{font-size:23px;line-height:1.6;color:#d2e0c5}.layer-labels{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-around;padding:9% 9% 12%;pointer-events:none}.layer-labels span{font-size:clamp(25px,3vw,40px);text-shadow:0 2px 12px #000;opacity:0;transform:translateY(15px)}.layers-playing .layer-labels span:nth-child(1){animation:appear 1s .2s forwards}.layers-playing .layer-labels span:nth-child(2){animation:appear 1s 2s forwards}.layers-playing .layer-labels span:nth-child(3){animation:appear 1s 4s forwards}.layers-playing .scene-bg{animation:dig 6s ease-in-out forwards}.lake-cover{position:absolute;inset:0;background:#286f75;opacity:0}.layers-playing .lake-cover{animation:uncover 6s forwards}.figure{position:absolute;bottom:0;right:5%;height:70%;max-width:48%;object-fit:contain}.rhythm-copy{position:absolute;left:6%;top:13%;width:52%;font-size:clamp(25px,3vw,40px);line-height:1.6}.rhythm-copy p{opacity:.38;margin:10px 0;transition:opacity .2s,transform .2s}.rhythm-copy p.active{opacity:1;color:#ffe59c;transform:translateX(8px)}.rhythm-playing .figure{animation:sway 1.2s ease-in-out infinite}.mountain-art{position:absolute;left:30%;top:15%;width:45%;height:65%;object-fit:contain}.mountain-train{position:absolute;left:10%;top:53%;width:120px}.mountain-playing .mountain-train{animation:through 5s ease-in-out infinite}.mountain-around .mountain-train{animation:around 6s ease-in-out infinite}video.lesson-video{width:100%;height:100%;object-fit:contain;background:#06150f}.source-links{display:flex;flex-direction:column;gap:14px;line-height:1.6}.source-links a{color:#d5eec9;font-size:20px}.custom-media{position:absolute;inset:0;background:#081910;z-index:3}.custom-media video{width:100%;height:100%;object-fit:contain}dialog{border:1px solid #4d6b52;border-radius:18px;background:#153629;color:#f7f0d8;width:min(820px,90vw);max-height:85vh;padding:24px}dialog::backdrop{background:#04130dd9}dialog>button{float:right;font-size:20px}#dialogBody{clear:both;font-size:23px;line-height:1.7}#dialogBody img{max-height:280px;max-width:100%;object-fit:contain}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap}.review-info{font-size:19px;color:#c4d6bf}

@keyframes ride{from{left:7%}to{left:85%}}@keyframes appear{to{opacity:1;transform:none}}@keyframes dig{from{transform:scale(1.12) translateY(3%)}to{transform:scale(1)}}@keyframes uncover{0%,15%{opacity:.75}100%{opacity:0}}@keyframes sway{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-5px)}}@keyframes through{0%{left:8%;opacity:1}38%{opacity:1}45%,62%{opacity:0}72%{opacity:1}100%{left:82%}}@keyframes around{0%{left:8%;top:53%}30%{left:25%;top:78%}65%{left:65%;top:78%}100%{left:82%;top:53%}}
dialog{background:#fffef8;color:var(--ink);border:1px solid #d5decf;border-radius:16px;width:min(850px,92vw);max-height:90vh;padding:25px}dialog::backdrop{background:#0e2c24b8}dialog>button{float:right}#dialogBody{clear:both;font-size:21px;line-height:1.7}#dialogBody img{max-height:280px;max-width:100%;object-fit:contain}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px}.dialog-actions button{font-size:17px}#libraryPlayer{display:block;width:100%;height:min(49vh,460px);background:#000;object-fit:contain}#videoChoices{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}#videoChoices button{font-size:16px;padding:10px}.invite-code{font-size:40px;text-align:center;letter-spacing:.15em}#qrImage{width:250px;background:white;margin:auto;padding:10px}#inviteURL{width:100%;padding:12px;font-size:16px;border:1px solid var(--line);margin-top:15px}#lessonView.paused *{animation-play-state:paused!important}body.cross-screen header,body.cross-screen .heading,body.cross-screen #crewStrip,body.cross-screen aside,body.cross-screen footer,body.cross-screen #notice{display:none!important}body.cross-screen #classroom{height:100dvh;padding:0;display:block;max-width:none}body.cross-screen #workspace{height:100%;display:block}body.cross-screen #scene{height:100%;border-radius:0}body.cross-screen #map{width:100%;height:100%}
@media(max-width:1100px){header{padding:0 18px;gap:12px}header strong{font-size:20px}header #roleLabel{display:none}#portalNav button{font-size:14px;padding:9px 12px}#welcome{gap:25px;padding:5vh 4vw}.welcome-hero{padding:35px;min-height:480px}.welcome-hero h1{font-size:52px}.welcome-hero span{left:35px}.management-grid{grid-template-columns:1fr}.side-guide{display:none}.home-scenes{gap:16px}.scene-entry h2{font-size:29px}#workspace{grid-template-columns:minmax(0,1fr) 185px;gap:12px}#classroom{padding:0 15px 6px}.tool{font-size:21px}.tool img{height:57px}footer button{font-size:17px;padding:10px 12px}#pageSelect{max-width:160px;font-size:14px}.crew-cards{gap:12px}.crew-card{padding:18px 12px 12px}.crew-art{height:100px}.crew-city h2{font-size:25px}.crew-city p{font-size:19px}.crew-card>button{font-size:17px}.coop-steps{gap:20px;font-size:16px}.push-cards button{font-size:21px}#crewStrip{gap:7px}#crewStrip button{font-size:17px;padding:9px 14px}}
@media(max-width:800px){#welcome{grid-template-columns:1fr;padding:25px}.welcome-hero{min-height:320px}.welcome-hero h1{font-size:45px}.welcome-hero span{font-size:18px;bottom:28px}.join-panel{padding:26px}header{height:60px;padding:0 12px;gap:7px}header strong{font-size:16px}header button{padding:8px 10px;font-size:14px}#portalNav button{font-size:13px;padding:8px 9px}.home-scenes{grid-template-columns:1fr}.scene-entry{height:200px;min-height:200px}.scene-entry>div{left:105px;bottom:25px}.hub-heading{align-items:flex-start;flex-direction:column}.hub-heading h1{font-size:28px}#hub{padding:26px 18px}.push-cards{grid-template-columns:1fr}.push-cards button{min-height:65px}.paper{padding:20px}.target-buttons{gap:7px}.target-buttons button{font-size:17px;padding:10px 12px}#classroom{height:calc(100dvh - 60px);grid-template-rows:92px minmax(0,1fr) 68px 28px}.heading h1{font-size:25px}.heading p{font-size:18px}#workspace{grid-template-columns:minmax(0,1fr) 145px;gap:9px}#tools{gap:7px;grid-template-columns:1fr}.tool{min-height:46px;flex-direction:row;font-size:20px;padding:8px}.tool img{height:42px;width:55px}#actions button{font-size:17px;padding:10px}#lessonNav{gap:4px;flex-wrap:wrap}#lessonNav button{font-size:15px;padding:8px 9px;min-height:39px}#pageSelect{max-width:130px;font-size:13px}#homeReturn{display:none}#notice{font-size:15px}#classroom.coop-active{grid-template-rows:86px 55px minmax(0,1fr) 68px 28px}#cooperation{padding:14px;gap:15px}.coop-steps{gap:10px;font-size:13px}.coop-steps span{gap:5px}.crew-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.crew-card{padding:13px;min-height:230px}.crew-number{top:13px;left:15px;font-size:23px}.crew-city h2{font-size:22px;margin:5px 0}.crew-city p{font-size:17px}.crew-art{height:65px;margin:5px 0}.crew-brief{font-size:14px;min-height:0;margin:0}.crew-status{font-size:14px;margin:6px 0}.crew-card>button{font-size:16px;padding:8px}#crewStrip button{font-size:15px;padding:9px 10px}.student #tools .tool{font-size:20px}.student #tools .tool img{height:47px}.student #actions button{font-size:20px}.student #tools{gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}