/* An app-sized canvas; the shared WonderLab shell stays in place. */
html:has(.earth-experience){height:100%;overflow:hidden;overscroll-behavior:none}
body.experience-page:has(.earth-experience){height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}
.experience-page:has(.earth-experience)>.site-header{flex:0 0 54px;margin:0 auto}
.experience-main:has(.earth-experience){flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 24px;overflow:hidden}
.experience-main:has(.earth-experience) .experience-breadcrumb{position:static;flex:0 0 34px;min-height:34px;padding:3px 0;margin:0 0 6px}
.experience-main:has(.earth-experience) .experience-heading{flex:0 0 auto;margin:0 0 9px}
.experience-main:has(.earth-experience) .experience-heading h1{font-size:21px;line-height:1.3;margin:0}
.experience-main:has(.earth-experience) .experience-heading p{display:none}
.experience-page:has(.earth-experience)>.site-footer{flex:0 0 27px;min-height:27px;max-height:27px;padding:0 24px;margin:0 auto;gap:14px;overflow:hidden;flex-wrap:nowrap;font-size:8px}
.experience-page:has(.earth-experience)>.site-footer .brand{display:none}
.experience-page:has(.earth-experience)>.site-footer>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.earth-experience{flex:1;min-height:0;display:flex;flex-direction:column;color:#233e35}
.earth-experience *{box-sizing:border-box}
.earth-experience button{font:inherit;cursor:pointer;min-height:44px;touch-action:none;user-select:none;-webkit-user-select:none}
.earth-experience button:focus-visible,.earth-experience input:focus-visible,.earth-stage:focus-visible{outline:2px solid #d9b574;outline-offset:-3px}
.earth-theatre{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#0b171d;border:1px solid #263b3c;color:#e5e9dc}
.earth-stage{position:relative;flex:1;min-height:0;touch-action:none;cursor:grab;overflow:hidden}
.earth-stage:active{cursor:grabbing}
.earth-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.earth-view-buttons{position:absolute;right:14px;top:12px;display:flex;flex-direction:column;gap:5px}
.earth-view-buttons button{width:44px;min-height:44px;border:1px solid #9bb7a53d;color:#d1e2d2;background:#0b171de8;border-radius:6px;font-size:19px;line-height:1}
.earth-view-buttons button:active{background:#27413b}
.earth-chapters{flex:0 0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid #99baa322;border-bottom:1px solid #99baa322;padding:0 15px}
.earth-chapters button{background:none;border:0;color:#90a99e;font-size:11px;position:relative;padding:8px 6px;display:flex;justify-content:center;align-items:center;gap:12px}
.earth-chapters button span{font:9px ui-monospace,monospace;opacity:.6}
.earth-chapters button[aria-pressed=true]{color:#d2e5c9}
.earth-chapters button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:#b0c89b}
.earth-transport{flex:0 0 auto;display:flex;align-items:center;gap:18px;padding:10px 20px}
.earth-transport button{flex-shrink:0;width:44px;height:44px;border:1px solid #9bbb9f66;color:#dbdfb3;border-radius:50%;background:#adc39f0b;font-size:14px}
.earth-transport label{flex:1;font-size:10px;color:#b1c4b4}
.earth-transport input{display:block;width:100%;height:20px;margin:5px 0 0;accent-color:#bdca99;cursor:ew-resize}
.earth-gesture{font-size:9px;color:#8ca69b}
.earth-info{width:min(700px,calc(100vw - 28px));max-height:80dvh;padding:0;border:1px solid #aab7a7;border-radius:12px;background:#f2f4ed;color:#304b3d;box-shadow:0 20px 90px #0006}
.earth-info::backdrop{background:#07151ab5}
.earth-info-heading{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #cfd9ca}
.earth-info h2{font-size:18px;margin:0}
.earth-info-heading button{width:44px;border:0;background:transparent;color:#405a46;font-size:25px}
.earth-info-content{padding:10px 20px 22px;max-height:calc(80dvh - 73px);overflow:auto;overscroll-behavior:contain}
.earth-info p{font-size:12px;line-height:1.9}
.earth-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;font-size:11px}
.earth-sources a{color:#426b52;text-decoration:underline}
@media(max-width:700px){
 .experience-main:has(.earth-experience){padding:5px 12px 7px}
 .experience-main:has(.earth-experience) .experience-breadcrumb{font-size:10px;margin-bottom:5px;flex-basis:31px;min-height:31px}
 .experience-main:has(.earth-experience) .experience-heading{margin-bottom:7px}
 .experience-main:has(.earth-experience) .experience-heading h1{font-size:19px}
 .experience-page:has(.earth-experience)>.site-footer{padding:0 13px;flex-basis:24px;min-height:24px;max-height:24px;font-size:7px}
 .earth-view-buttons{right:9px;top:9px;flex-direction:row;gap:4px}
 .earth-view-buttons button{font-size:17px}
 .earth-chapters{padding:0 4px}
 .earth-chapters button{font-size:9px;gap:5px;padding:8px 2px}
 .earth-chapters button span{font-size:7px}
 .earth-transport{padding:8px 12px;gap:11px}
 .earth-gesture{display:none}
 .earth-sources{grid-template-columns:1fr}
}
@media(max-height:500px){
 .experience-main:has(.earth-experience) .experience-heading{display:none}
 .experience-main:has(.earth-experience) .experience-breadcrumb{flex-basis:28px;min-height:28px;margin-bottom:4px}
 .earth-view-buttons{flex-direction:row}
 .earth-transport{padding-top:5px;padding-bottom:5px}
}