/* Milo's classroom: a playable diorama with an accessible station menu. */
body{background:radial-gradient(ellipse at 10% 0%,#e4efe9,transparent 45%),#f8f6ee}
main:has(.classroom-shell){max-width:1360px;margin-top:26px}
.classroom-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 4px 23px}
.classroom-heading .eyebrow{color:#a1784c;font-size:10px;letter-spacing:2px;margin:0 0 9px}
.classroom-heading h1{font-size:clamp(27px,3.2vw,39px);letter-spacing:-1.3px;line-height:1.15;margin:0;color:#345748}
.classroom-heading p{font-size:13px;color:#7c8a78;margin:11px 0 0;line-height:1.65}
.club-tag{flex-shrink:0;display:flex;align-items:center;gap:9px;background:#fffaf0;border:1px solid #e9ddbd;padding:11px 15px;border-radius:16px;color:#9a7b3e;font-size:11px;font-weight:750;box-shadow:0 3px 0 #eae3d0}
.club-tag b{font-size:25px;color:#ddb55a}
.classroom-shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;border:1px solid #dce7dc;border-radius:29px;overflow:hidden;background:#fffdf6;box-shadow:0 7px 0 #e5e9dc,0 16px 40px #43645109}
.room-main{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 45%,#f9fbef 0,#e8f2e9 63%,#dceadf 100%);isolation:isolate}
.room-main:before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#91b39b35 1px,transparent 1px);background-size:20px 20px;mask-image:linear-gradient(#000,transparent)}
.room-topbar{position:absolute;top:22px;left:24px;right:22px;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.room-location{display:flex;align-items:center;gap:8px;color:#527560;background:#fffef4e8;padding:9px 13px;font-size:10px;font-weight:750;border:1px solid #dbe6d5;border-radius:12px;box-shadow:0 3px 0 #d8e5d28c;letter-spacing:.3px}
.room-location i{width:7px;height:7px;background:#80b785;border-radius:50%;box-shadow:0 0 0 3px #80b78520}
.room-live{font-size:9px;color:#78917d;letter-spacing:1px;text-transform:uppercase;margin:10px 0}
.room-stage{position:relative;width:100%;height:610px;overflow:hidden;touch-action:pan-y}
.room-stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.room-loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#718675;font-size:13px;gap:12px;pointer-events:none}
.room-loading b{font-size:36px}.room-stage[data-loaded=true] .room-loading{display:none}
.room-pin{position:absolute;z-index:1;transform:translate(-50%,-100%);padding:4px 9px 4px 4px;display:flex;align-items:center;gap:6px;border-radius:20px;background:#fffef4f5;color:#405d4e;box-shadow:0 3px 0 #52684820,0 3px 12px #47624b12;border:1.5px solid #fff;font-size:10px;white-space:nowrap;transition:box-shadow .18s,background .18s;min-height:33px}
.room-pin:after{content:"";position:absolute;left:calc(50% - 4px);bottom:-5px;width:8px;height:8px;background:#fffef4;transform:rotate(45deg);z-index:-1}
.room-pin b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--station);color:#fff;font-size:12px;flex-shrink:0}
.room-pin:hover,.room-pin.is-hovered{background:#fff;box-shadow:0 0 0 3px var(--station),0 6px 14px #47624b22;filter:none}
.room-pin:active{transform:translate(-50%,-100%)}
.room-bottom{position:absolute;bottom:18px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.room-tip{color:#75917b;font-size:10px;line-height:1.5;max-width:225px;background:#f5faefb8;border-radius:12px;padding:9px 12px}
.room-camera{display:flex;gap:5px;pointer-events:auto;background:#fffdf2dd;border:1px solid #dce6d6;border-radius:13px;padding:4px;box-shadow:0 3px 0 #d6e3d3}
.room-camera button{padding:7px 11px;min-height:34px;background:transparent;color:#637c66;font-size:15px;border-radius:9px}.room-camera button:hover{background:#eaf0df}
.station-menu{padding:24px 18px 17px;background:#fffdf7;border-left:1px solid #e3e8d8;display:flex;flex-direction:column}
.station-menu>.eyebrow{font-size:9px;letter-spacing:1.6px;margin:0 0 8px;color:#a79678}
.station-menu h2{font-size:21px;letter-spacing:-.6px;margin:0 0 6px;color:#405e4c;scroll-margin-top:150px}
.station-menu>p{font-size:10px;color:#8b9784;margin:0 0 18px;line-height:1.6}
.station-choices{display:flex;flex-direction:column;gap:8px}
.station-choice{position:relative;display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border:1px solid #e8e9de;background:#fffef8;border-radius:13px;min-height:56px;box-shadow:0 2px 0 #eeeee3;color:#48604e;width:100%}
.station-choice:hover,.station-choice.is-hovered{background:var(--topic-soft);border-color:var(--topic-color);filter:none;box-shadow:0 2px 0 var(--topic-color)}
.station-choice .station-icon{width:32px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:var(--topic-soft);color:var(--topic-color);font-size:20px;font-weight:800;font-family:Georgia,serif}
.station-choice strong{display:block;font-size:11px;line-height:1.4;letter-spacing:-.1px}.station-choice small{display:block;font-size:9px;font-weight:400;color:#909984;line-height:1.4;margin-top:4px}
.station-choice .station-arrow{margin-left:auto;color:#a9b29e;font-size:15px}
.classroom-note{margin-top:auto;padding-top:17px;font-size:9px;line-height:1.6;color:#96a08a;text-align:center}
.milo-room-note{display:flex;gap:13px;align-items:center;margin:21px 3px 22px}
.milo-room-note .mascot-button{width:62px;height:66px;flex:0 0 62px;background:#f5e9cf!important;border-radius:50%;padding:4px}
.milo-room-note .fox-art{overflow:visible}.milo-room-note strong{font-size:12px;color:#b38550;display:block;margin-bottom:5px}.milo-room-note p{margin:0;font-size:12px;color:#72806b;line-height:1.6}.milo-room-note .dashboard-jump{margin-left:auto;font-size:11px;padding:10px 15px;white-space:nowrap;background:#fffdf6;border:1px solid #e1e5d5}
.classroom-dashboard{scroll-margin-top:140px}.classroom-dashboard>h2{font-size:21px;margin:28px 0 0;letter-spacing:-.5px}.classroom-dashboard .summary{margin-top:16px}
.room-credits a{color:inherit;text-underline-offset:3px}
.station-banner{display:flex;gap:16px;align-items:center;padding:24px;border-radius:23px;background:var(--topic-soft);border:1px solid #e3e5d5;margin-top:20px;margin-bottom:22px}.station-banner .station-emblem{display:grid;place-items:center;width:65px;height:65px;flex-shrink:0;background:#fffef7;color:var(--topic-color);font-size:34px;border-radius:20px;transform:rotate(-6deg);box-shadow:0 4px 0 #00000008}.station-banner h2{margin:0 0 6px;font-size:25px}.station-banner p{font-size:12px;color:#738169;margin:0}.station-banner .eyebrow{color:var(--topic-color);font-size:9px;margin:0 0 8px}.station-banner .primary{margin-left:auto;font-size:12px;white-space:nowrap}
@media(min-width:1500px){.room-stage{height:660px}}
@media(max-width:1100px){.classroom-shell{grid-template-columns:minmax(0,1fr) 225px}.station-menu{padding:21px 13px}.room-stage{height:595px}.room-pin span{display:none}.room-pin{padding:4px;min-width:36px;min-height:36px;justify-content:center}.room-pin b{width:26px;height:26px}.room-topbar{left:17px;right:17px}.room-live{display:none}}
@media(max-width:780px){.classroom-shell{grid-template-columns:1fr}.station-menu{border-left:0;border-top:1px solid #dce6d7;padding:23px}.station-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.station-choice:last-child{grid-column:1/-1}.room-stage{height:510px}.room-pin span{display:block}.room-pin{padding:4px 9px 4px 4px;min-width:0}.station-menu>p{margin-bottom:14px}.classroom-note{padding-top:15px}.club-tag{display:none}.classroom-heading{margin-bottom:20px}.classroom-heading h1{font-size:31px}.milo-room-note{gap:10px}.milo-room-note p{font-size:11px}.milo-room-note .dashboard-jump{font-size:10px;padding:9px 11px}.station-banner{flex-wrap:wrap}.station-banner .primary{margin-left:0}.station-banner h2{font-size:23px}}
@media(max-width:480px){main:has(.classroom-shell){margin-top:22px}.classroom-heading h1{font-size:29px}.classroom-heading p{font-size:12px;max-width:310px}.room-stage{height:390px}.room-pin span{display:none}.room-pin{min-height:36px;min-width:36px;padding:4px}.room-pin b{width:26px;height:26px}.room-topbar{top:14px;left:13px}.room-location{font-size:9px;padding:8px 10px}.room-bottom{bottom:12px;left:13px;right:13px}.room-tip{font-size:8px;max-width:160px;padding:7px 8px}.room-camera{gap:2px}.room-camera button{padding:6px 9px;font-size:13px}.station-menu{padding:19px 14px}.station-menu h2{font-size:20px}.station-choice{padding:9px 8px;gap:7px}.station-choice strong{font-size:10px}.station-choice small{font-size:8px}.station-choice .station-icon{width:28px;height:30px;font-size:18px}.station-arrow{display:none}.milo-room-note{flex-wrap:wrap}.milo-room-note>div{flex:1}.milo-room-note .dashboard-jump{width:100%;margin:0;text-align:center}.classroom-shell{border-radius:23px}.station-banner{padding:19px;gap:13px}.station-banner .station-emblem{width:49px;height:49px;font-size:27px}.station-banner h2{font-size:21px}}

.room-stage,.room-stage canvas{touch-action:none;cursor:grab}.room-stage.is-dragging,.room-stage.is-dragging canvas{cursor:grabbing}.room-stage:focus-visible{outline:3px solid #86ad8c;outline-offset:-4px}.room-tip{max-width:none}.room-bottom{justify-content:center}.room-pin{touch-action:none}
/* The practice library becomes a winding, freely explorable trail. */
.trail-map{border:1px solid #dce6d3;border-radius:26px;overflow:hidden;background:#f4f7e9;box-shadow:0 6px 0 #e0e6d7}
.trail-heading{padding:23px 27px 15px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fffdf5}.trail-heading h3{font-size:25px;color:#49644d;letter-spacing:-.7px;margin:0}.trail-heading .eyebrow{font-size:9px;letter-spacing:1.4px;color:var(--topic-color);margin-bottom:7px}.trail-heading label{font-size:10px;color:#87917b;display:flex;align-items:center;gap:9px}.trail-heading select{border:1px solid #dfe4d4;border-radius:10px;padding:9px;max-width:205px;background:#f9faef;color:#52694e;font-size:13px!important}
.trail-legend{display:flex;align-items:center;gap:19px;padding:0 27px 18px;background:#fffdf5;font-size:10px;color:#839076;flex-wrap:wrap;border-bottom:1px solid #e4ead9}.trail-legend>span{display:flex;align-items:center;gap:6px}.trail-legend i{width:8px;height:8px;border-radius:50%;background:var(--topic-color)}.trail-legend i.pending{background:#d6ae59}.trail-legend i.complete{background:#5b9c7c}.trail-unlocked{margin-left:auto;font-size:9px}
.trail-viewport{height:590px;position:relative;overflow:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 60% 30%,#f6f7e7,#e8efdc);outline-offset:-4px;cursor:grab}.trail-viewport[data-interactive=true]{overflow:hidden;touch-action:none}.trail-viewport.is-dragging{cursor:grabbing}.trail-viewport:focus-visible{outline:3px solid #a2bb8e}.trail-world{position:relative;transform-origin:0 0;will-change:transform}.trail-landscape{position:absolute;inset:0;pointer-events:none}.trail-stop{position:absolute;transform:translate(-50%,-52%);display:flex;flex-direction:column;align-items:center;background:none!important;padding:9px;width:160px;color:#55734e;touch-action:none;user-select:none;filter:none!important;border-radius:20px;transition:none}.trail-stop:active:not(:disabled){transform:translate(-50%,-52%)}
.trail-medal{position:relative;display:grid;place-items:center;background:var(--topic-color);width:73px;height:73px;border:6px solid #fff9e8;border-radius:50%;color:#fff;box-shadow:0 7px 0 #9cab7866,0 13px 16px #53734b20;font-size:29px;font-weight:850;transition:translate .18s,box-shadow .18s}.trail-stop:hover .trail-medal{translate:0 -5px;box-shadow:0 12px 0 #9cab7855,0 18px 20px #53734b18}.trail-state{position:absolute;right:-10px;bottom:-4px;border:3px solid #fff9e8;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#f5cf73;color:#9a7435;font-size:14px}.trail-stop.complete .trail-medal{background:#6aab87}.trail-stop.complete .trail-state{background:#d6edbe;color:#4c845d}.trail-stop.pending .trail-medal{background:#d7b06a}.trail-stop.pending .trail-state{background:#ffe9ae}.trail-stop strong{background:#fffdf0;border-radius:12px;margin:12px 0 5px;padding:5px 13px;font-size:14px;box-shadow:0 2px 0 #c9d6ad40;white-space:nowrap}.trail-stop small{font-size:10px;color:#819471;font-weight:600;white-space:nowrap}.new-stop .trail-medal{background:#f8f5e2;border:3px dashed #a6b993;color:#809b6c;box-shadow:0 5px 0 #a9bb8e30;font-size:35px}.new-stop strong{font-size:12px}.trail-bottom{padding:13px 22px;background:#fffdf5;border-top:1px solid #e4ead9;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#8b987d;line-height:1.5}
@media(max-width:600px){.trail-map{border-radius:22px}.trail-heading{padding:20px 17px 13px;flex-wrap:wrap;gap:15px}.trail-heading h3{font-size:23px}.trail-heading label{width:100%;justify-content:space-between}.trail-heading select{font-size:16px!important;max-width:230px}.trail-legend{padding:0 17px 15px;gap:11px;font-size:9px}.trail-unlocked{width:100%;margin:0}.trail-viewport{height:470px}.trail-bottom{padding:12px 15px;font-size:9px;flex-direction:column;gap:4px}}
.milo-play-pin{position:absolute;z-index:2;transform:translate(-50%,-100%);border:2px solid #fff8e4;border-radius:20px;background:#f8d37f;color:#8b642b;font-size:10px;padding:6px 12px;white-space:nowrap;touch-action:none;cursor:grab;box-shadow:0 3px 0 #c19b5140}.milo-play-pin:active{transform:translate(-50%,-100%);cursor:grabbing}.room-play-hud{position:absolute;left:18px;right:18px;bottom:44px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;z-index:3;pointer-events:none}.room-play-hud button{pointer-events:auto;padding:8px 12px;border:1px solid #dedfc4;border-radius:12px;font-size:10px;background:#fff9e7;color:#7c7954;box-shadow:0 3px 0 #d8debb80}.room-play-hud button[aria-pressed=true]{background:#f6d989;color:#89703d}.room-play-hud>span{width:100%;text-align:center;font-size:9px;color:#739076;line-height:1.5}.room-bottom{bottom:9px}.room-tip{font-size:9px;padding:4px 8px}.room-live{display:none}@media(max-width:480px){.room-play-hud{left:9px;right:9px;bottom:37px;gap:5px}.room-play-hud button{font-size:9px;padding:7px 9px}.room-play-hud>span{font-size:8px}.room-tip{font-size:7px}.milo-play-pin{font-size:9px;padding:7px 11px;min-height:32px}}
@media(max-width:600px){.station-banner{display:grid;grid-template-columns:49px minmax(0,1fr);gap:15px}.station-banner .primary{grid-column:1/-1;justify-self:start}.station-banner>div{min-width:0}.station-banner h2{overflow-wrap:anywhere}}
.room-star-pin{position:absolute;z-index:2;transform:translate(-50%,-100%);background:#fff1b4;color:#d29420;width:32px;height:32px;padding:0;border:2px solid #fff9db;border-radius:50%;font-size:21px;line-height:1;box-shadow:0 3px 0 #be9d4540;touch-action:none}.room-star-pin[hidden]{display:none}.room-star-pin:active{transform:translate(-50%,-100%)}
.milo-play-panel{pointer-events:auto;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:285px;max-width:calc(100vw - 65px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;background:#fffdf4f5;border:2px solid #fff;border-radius:19px;padding:12px;box-shadow:0 8px 25px #4e68402b;backdrop-filter:blur(12px)}.milo-play-panel[hidden]{display:none}.room-play-hud .milo-play-panel button{padding:11px 5px;min-height:43px;font-size:11px;background:#f4eedb;box-shadow:0 2px 0 #ddd4b9}.milo-play-panel button:nth-child(2n){background:#f7e5eb}.milo-play-panel button:nth-child(3n){background:#e6efde}.milo-effect-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}.milo-effect-layer i{position:absolute;display:block;font-style:normal;font-size:20px;font-weight:800;animation:milo-spark 1s ease-out both;text-shadow:0 1px #fff}.milo-reaction-bubble{position:absolute;z-index:4;transform:translate(-50%,-100%);max-width:190px;pointer-events:none;background:#fff9e8;border:2px solid #fff;border-radius:16px 16px 16px 3px;padding:10px 13px;box-shadow:0 4px 0 #bccba34d;font-size:11px;font-weight:700;line-height:1.45;color:#9a7750;text-align:center}.milo-reaction-bubble[hidden]{display:none}.milo-bubble{position:absolute;z-index:4;width:48px;height:48px;border-radius:50%;padding:0;border:2px solid #ffffffeb;background:radial-gradient(circle at 30% 25%,#fff 0,#ffffffaa 8%,transparent 20%),radial-gradient(circle at 50% 55%,#ffffff55,var(--bubble-color));box-shadow:inset -4px -5px 9px #ffffff77,0 4px 13px #4e745026;color:#fff;font-size:23px;text-shadow:0 1px 3px #68887860;animation:milo-bubble-bob 3s var(--bubble-delay) ease-in-out infinite;touch-action:none;cursor:pointer}.milo-bubble:hover{filter:brightness(1.05)!important}.milo-bubble:focus-visible{outline:3px solid #dbad55;outline-offset:4px}@keyframes milo-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--twist)) scale(1.15)}}@keyframes milo-bubble-bob{0%,100%{translate:0 0}50%{translate:0 -11px}}@media(max-width:480px){.milo-play-panel{width:265px}.room-play-hud .milo-play-panel button{font-size:10px}.milo-reaction-bubble{font-size:10px;max-width:170px}.milo-bubble{width:44px;height:44px}}