/* The launch-screen theme is scoped to the entrance; classroom controls keep their own palette. */
body:has(#landing:not([hidden])){background:#211c38;color:#fff6ef}
body:has(#landing:not([hidden]))>header{position:absolute;z-index:2;left:0;right:0;max-width:none;height:90px;padding:22px 4.5vw;border:0;color:#fff6ef}
body:has(#landing:not([hidden])) .wordmark{font-family:"Arial Rounded MT Bold","Avenir Next",sans-serif;font-weight:900;letter-spacing:-2px;color:#fff6ef}
body:has(#landing:not([hidden])) .wordmark span{letter-spacing:0;font-weight:500;font-size:14px}
body:has(#landing:not([hidden])) #connection{color:#fff6ef;text-shadow:0 1px 8px #211c38}
body:has(#landing:not([hidden]))>main{padding:0;max-width:none}
#landing{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,540px) 1fr;align-content:center;align-items:start;gap:30px;max-width:none;min-height:max(850px,100svh);padding:130px 7vw 65px;overflow:hidden;background:#443454}
.campus-art{position:absolute;inset:-25px;z-index:-2;pointer-events:none;transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(1.035);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.campus-art img{width:100%;height:100%;object-fit:cover;object-position:60% center;display:block}
#landing::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(29,20,49,.92),rgba(39,24,55,.69) 31%,rgba(33,28,56,.08) 66%),linear-gradient(0deg,rgba(33,28,56,.86),transparent 30%,transparent 88%,rgba(33,28,56,.22))}
#landing .intro{grid-column:1;max-width:600px}
#landing .intro h1{font-family:Impact,"Arial Narrow","Avenir Next Condensed",sans-serif;font-weight:900;font-size:clamp(65px,7.2vw,112px);line-height:.98;letter-spacing:-2px;margin:0 0 25px;text-transform:uppercase;text-shadow:0 3px 0 #7e597a,0 6px 0 #493454,0 15px 32px #23142966;transform:rotate(-2deg);transform-origin:left center}
#landing .intro>p{color:#fff1e6;font-size:19px;line-height:1.55;max-width:430px;margin-bottom:0}
#landing .entry{grid-column:1;width:100%;max-width:440px;padding:25px 28px 18px;border:1px solid #ffe6e533;border-radius:18px;background:#241d39d9;box-shadow:0 16px 60px #170c3d35;backdrop-filter:blur(16px)}
#landing .entry h2{font:700 22px/1.25 "Avenir Next",system-ui,sans-serif;letter-spacing:-.5px;margin-bottom:21px;color:#fff6ef}
#landing label{font-size:13px;color:#f4e8f1}
#landing input,#landing select{background:#fff6ef;color:#281e3c;border:1px solid #fff6ef;border-radius:8px;min-height:50px}
#landing #roomCode{text-transform:uppercase;letter-spacing:2px}
#landing #roomCode::placeholder{text-transform:none;letter-spacing:0;color:#76677e}
#landing button{background:#bdf8df;border-color:#bdf8df;color:#242339;font-size:15px;min-height:50px;border-radius:8px;box-shadow:0 3px 0 #76b9a2}
#landing button:hover{background:#ddffef;border-color:#ddffef}
#landing button:active{transform:translateY(2px);box-shadow:0 1px 0 #76b9a2}
#landing :is(button,input,select,summary):focus-visible{outline:3px solid #ffa8be;outline-offset:5px}
#landing #teacherEntry{border-color:#ffe6e530;margin-top:22px;padding-top:6px}
#landing summary{font-size:12px;color:#f5dce8}
#landing .hint{color:#ded0e4}
.campus-caption{position:absolute;right:5vw;bottom:38px;color:#fff6ef;font-weight:600;font-size:16px;line-height:1.45;text-align:right;text-shadow:0 2px 10px #231429}
body:has(#landing:not([hidden]))>footer{margin:0;max-width:none;padding:22px 4.5vw;border-color:#ffffff16;color:#c4b8d3;background:#211c38}
@media(min-width:1700px){#landing{padding-left:10vw}.campus-art img{object-position:center 55%}}
@media(max-width:1000px){#landing{padding-left:5vw;grid-template-columns:minmax(0,440px) 1fr}.campus-art img{object-position:58% center}#landing .intro h1{font-size:76px}}
@media(max-width:650px){
 body:has(#landing:not([hidden]))>header{height:70px;padding:16px 22px}
 body:has(#landing:not([hidden])) #connection{display:none}
 #landing{display:block;min-height:100svh;padding:108px 22px 28px}
 .campus-art{inset:0 0 auto;height:520px;transform:none}
 .campus-art img{object-position:64% center}
 #landing::before{background:linear-gradient(180deg,#211c3826 0%,#211c3820 30%,#211c38 520px),linear-gradient(90deg,#211c3880,transparent 80%)}
 #landing .intro{min-height:350px}
 #landing .intro h1{font-size:clamp(49px,12vw,76px);line-height:1.02;letter-spacing:-1px;margin-bottom:18px;max-width:95%}
 #landing .intro>p{font-size:14px;line-height:1.5;max-width:230px;text-shadow:0 2px 8px #211c38}
 #landing .entry{max-width:none;padding:23px 22px 14px;background:#302642f5;border-color:#ffffff21;box-shadow:0 15px 50px #170c3d22}
 #landing .entry h2{font-size:22px}
 .campus-caption{position:static;text-align:center;font-size:12px;color:#c4b8d3;margin:22px 0 0}
 .campus-caption br{display:none}
 #landing.choosing{padding-top:100px}#landing.choosing .intro{display:none}#landing.choosing .entry{padding:23px 22px 14px}#landing.choosing .entry h2{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.campus-art{transform:none;transition:none}#landing button:active{transform:none}}

.campus-join-link{display:none}
body:has(#landing:not([hidden])) .campus-join-link{display:block;margin-left:auto;color:#fff6ef;font-size:13px;font-weight:700;text-underline-offset:5px}
body:has(#landing:not([hidden])) #connection{margin-left:10px}
.mimi-playground{position:absolute;right:3vw;bottom:110px;width:47vw;height:630px;max-height:72%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.mimi-mood{position:relative;z-index:1;max-width:95%;min-height:42px;margin:0;text-align:center;padding:10px 19px;border-radius:20px;background:#fff6efed;color:#382a44;font-size:14px;font-weight:600;line-height:1.5;box-shadow:0 7px 24px #211c3820}
.mimi-field{position:relative;width:100%;flex:1;min-height:0;perspective:1000px}
.mimi-anchor{position:absolute;left:50%;bottom:15px;width:74%;max-width:470px;transform:translateX(-50%)}
#landing .mimi-character{display:block;width:100%;padding:0;background:transparent;border:0;border-radius:40%;box-shadow:none;min-height:0;transform-origin:50% 85%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:none;cursor:grab}
#landing .mimi-character:hover,#landing .mimi-character:active{background:transparent;box-shadow:none;transform:none}
#landing .mimi-character:active{cursor:grabbing}
.mimi-character img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 12px 16px #281d4833)}
.mimi-shadow{position:absolute;left:29%;right:29%;bottom:20px;height:25px;border-radius:50%;background:#21162d75;filter:blur(10px)}
.mimi-play-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;position:relative;z-index:2}
#landing .mimi-play-controls button{background:#2c2346df;border:1px solid #fff6ef77;color:#fff6ef;border-radius:30px;box-shadow:0 4px 16px #211c3820;font-size:13px;min-height:44px;padding:10px 16px}
#landing .mimi-play-controls button:hover{background:#49385e}
#landing .mimi-play-controls #mimiSound{color:#eee0ee;font-size:11px;padding:10px 12px}
.mimi-ball{position:absolute;bottom:37px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#edffb5,#b7ea4a 50%,#518e43);border:2px solid #edf7b0;box-shadow:0 7px 6px #211c3844;pointer-events:none}
.mimi-ball::after{content:"";position:absolute;inset:1px 7px;border-left:2px solid #faffda;border-right:2px solid #faffda;border-radius:50%;transform:rotate(-30deg)}
.mimi-effects{position:absolute;inset:0;pointer-events:none;overflow:visible}
.mimi-effects span{position:absolute;font-size:25px;color:#ffb3ca;text-shadow:0 2px 8px #3e214a55}
@media(max-width:1000px){
 #landing{display:flex;flex-direction:column;align-items:center;padding:110px 24px 35px;gap:22px;min-height:100svh}
 #landing .intro{width:100%;max-width:650px;min-height:0}
 #landing .intro h1{font-size:clamp(49px,8.5vw,76px)}
 #landing .intro>p{font-size:16px;max-width:430px}
 .campus-art{inset:0 0 auto;height:800px;transform:none}
 .campus-art img{object-position:57% center}
 #landing::before{background:linear-gradient(180deg,#211c3845,#211c3810 30%,#211c38 800px),linear-gradient(90deg,#211c3866,transparent)}
 .mimi-playground{position:relative;right:auto;bottom:auto;width:100%;max-width:650px;height:440px;max-height:none;margin:0}
 .mimi-anchor{width:65%;max-width:340px;bottom:5px}
 #landing .entry{max-width:650px;width:100%}
 .campus-caption{position:static;text-align:center;font-size:12px;margin:0}
 .campus-caption br{display:none}
 #landing.choosing .mimi-playground,#landing.choosing .intro{display:none}
}
@media(max-width:650px){
 #landing{padding:95px 20px 28px;gap:18px}
 #landing .intro h1{font-size:clamp(45px,11.8vw,72px);margin-bottom:16px}
 #landing .intro>p{font-size:14px;max-width:100%}
 .mimi-playground{height:350px}
 .mimi-anchor{width:78%;max-width:260px;bottom:5px}
 .mimi-mood{font-size:12px;padding:8px 14px;min-height:36px}
 .mimi-play-controls{gap:6px}
 #landing .mimi-play-controls button{font-size:12px;padding:9px 11px}
 #landing .mimi-play-controls #mimiSound{font-size:10px;padding:9px 8px}
 .mimi-shadow{bottom:10px}
}