:root{color-scheme:dark;--ink:#edf6fa;--muted:#a9bdce;--cyan:#71e5f6;--navy:#06111d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--ink);font-family:'Avenir Next','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}a{color:inherit;text-decoration:none}button,summary{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:8px}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;left:20px;top:-80px;z-index:20;padding:12px 20px;background:#123749}.skip-link:focus{top:20px}
.lab-backdrop,.scene-shade,#molecule-canvas{position:fixed;inset:0;pointer-events:none}.lab-backdrop{background:url('lab/assets/shared/ui/adventures-lab.webp') center 58%/cover no-repeat;z-index:-3}.scene-shade{z-index:-2;background:linear-gradient(180deg,rgba(3,12,23,.18),rgba(3,12,23,.12) 25%,transparent 45%,transparent 87%,rgba(3,12,23,.24))}#molecule-canvas{width:100%;height:100%;z-index:-1;opacity:.22;mask-image:linear-gradient(90deg,#000,transparent 32%,transparent 68%,#000)}
.site-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:23px 4.5%;gap:24px;border-bottom:1px solid #9bd2e312;background:#05121b30;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:13px}.brand svg{width:40px;height:40px;color:var(--cyan)}.brand>span{font-size:10px;font-weight:600;line-height:1.55;letter-spacing:3px}.brand strong{display:block;font-size:12px;letter-spacing:2.5px}nav{display:flex;gap:30px;align-items:center;font-size:12px;font-weight:500;color:#cfdee6}.path-nav:hover{color:var(--cyan)}.training-menu{position:relative}.training-menu summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center}.training-menu summary::-webkit-details-marker{display:none}.training-menu summary svg{width:12px;fill:none;stroke:currentColor;stroke-width:1.5}.training-links{position:absolute;top:35px;right:0;width:240px;padding:20px;background:#091b2bf5;border:1px solid #314e62;border-radius:12px;box-shadow:0 15px 45px #0008;backdrop-filter:blur(20px)}.training-links>span{font-size:8px;letter-spacing:1.7px;color:#7fa9bd;display:block;margin-bottom:13px}.training-links a{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid #7ac0d51a}.training-links a:hover{color:var(--cyan)}.training-links a span{color:var(--cyan)}.motion-toggle{width:32px;height:32px;display:grid;place-items:center;background:#a9d9e909;border:1px solid #a9d9e92b;border-radius:50%;color:#c0d5e0}.motion-toggle svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.6}.play-symbol{display:none}.motion-paused .pause-symbol{display:none}.motion-paused .play-symbol{display:block}
main{width:100%;flex:1;display:flex;flex-direction:column;justify-content:center}.intro{text-align:center;padding:38px 20px 16px}.eyebrow{font:500 9px 'Avenir Next','Segoe UI',sans-serif;letter-spacing:3.3px;color:#99d6de;display:flex;align-items:center;justify-content:center;gap:15px;margin:0 0 17px}.eyebrow span{width:25px;height:1px;background:#6ce0ee60}h1{font-size:clamp(42px,5.5vw,80px);font-weight:600;letter-spacing:-3.5px;line-height:1.08;margin:0;text-shadow:0 3px 35px #0007}h1 em{font-style:normal;font-weight:500;background:linear-gradient(105deg,#a9faf2,#64cde9 55%,#a5b9fc);color:transparent;background-clip:text;-webkit-background-clip:text}.tagline{font-size:20px;font-weight:400;letter-spacing:.2px;margin:18px 0 11px;color:#e2edf4}.intro-copy{font-size:13px;color:#b7c9d5;line-height:1.8;margin:0}
.portal-stage{width:min(1100px,92%);margin:7px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:70px;scroll-margin-top:30px}.destination{--portal-color:#70e9ff;--portal-rgb:61,209,247;position:relative;width:100%;height:445px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;color:var(--ink);isolation:isolate}.ap{--portal-color:#c2a2ff;--portal-rgb:157,113,247}.portal-visual{position:absolute;top:0;width:370px;max-width:100%;aspect-ratio:1;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s}.portal-halo{position:absolute;inset:6%;border-radius:50%;box-shadow:0 0 50px rgba(var(--portal-rgb),.2),inset 0 0 50px rgba(var(--portal-rgb),.25);background:radial-gradient(ellipse,transparent 48%,rgba(var(--portal-rgb),.2) 70%,transparent 73%);animation:breathe 5s ease-in-out infinite}.portal-window{position:absolute;inset:10%;border-radius:50%;overflow:hidden;background:#061526;box-shadow:inset 0 0 60px #000}.destination-world{position:absolute;inset:-5%;background:linear-gradient(#061a3390,#030d1fd9),url('lab/assets/bridge-realistic.jpg') center/cover;opacity:.9;transition:transform 1.2s}.ap .destination-world{background:linear-gradient(#1c103a9c,#0b1021db),url('lab/assets/galaxy-map.jpg') 70% center/cover;opacity:.7}.vortex{position:absolute;inset:-35%;background:conic-gradient(from 10deg,transparent 20%,rgba(var(--portal-rgb),.18) 24%,transparent 29%,transparent 48%,rgba(var(--portal-rgb),.1) 52%,transparent 59%,transparent 80%,rgba(var(--portal-rgb),.14) 86%,transparent 92%);animation:orbit 35s linear infinite;filter:blur(10px)}.portal-hardware{position:absolute;inset:0;width:100%;height:100%;color:var(--portal-color);filter:drop-shadow(0 0 5px rgba(var(--portal-rgb),.4));overflow:visible}.portal-hardware circle{fill:none}.metal-ring{stroke:url('#metal');stroke-width:17}.rim-light{stroke:var(--portal-color);stroke-width:1;opacity:.6}.ring-ticks{stroke:#b4ccda;stroke-width:5;stroke-dasharray:1 9;opacity:.65}.inner-rim{stroke:var(--portal-color);stroke-width:2;opacity:.7}.ring-segments{stroke:var(--portal-color);stroke-width:1;stroke-dasharray:55 150 18 90;opacity:.55;transform-origin:center;animation:orbit 70s linear infinite reverse}.energy-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.portal-content{height:370px;width:310px;max-width:84%;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;pointer-events:none;padding-top:5px;text-shadow:0 2px 18px #000}.course-label{font-size:8px;letter-spacing:2.6px;font-weight:600;color:var(--portal-color);margin-bottom:10px}.destination-symbol{font-size:20px;line-height:1;color:var(--portal-color);margin-bottom:9px}h2{font-size:41px;font-weight:600;letter-spacing:-1.2px;line-height:1.03;margin:0}.portal-content p{font-size:11px;line-height:1.7;color:#c2d2e1;margin:12px 0 17px}.enter-button{padding:11px 17px;background:linear-gradient(110deg,#adefe9,#79d9f1);color:#082737;font-weight:650;font-size:10px;letter-spacing:.1px;border:1px solid #c1fcff70;border-radius:5px;box-shadow:0 0 20px #3edde629;text-shadow:none;display:flex;gap:14px;align-items:center;transition:box-shadow .4s,background .4s}.enter-button span{font-size:16px;line-height:10px;transition:transform .4s}.coming-soon{font-size:8px;font-weight:600;letter-spacing:2px;border:1px solid #bba1ef5c;background:#231c4280;color:#ceb4f9;border-radius:100px;padding:7px 13px;margin-top:2px}.ap .portal-halo{animation-delay:-2.5s;opacity:.8}.ap .energy-canvas{opacity:.6}.honors:hover .portal-visual,.honors:focus-visible .portal-visual{transform:translateY(-5px) scale(1.035);filter:brightness(1.2)}.honors:hover .destination-world{transform:scale(1.06)}.honors:hover .enter-button{box-shadow:0 0 28px #55def070;background:#c0fffb}.honors:hover .enter-button span{transform:translateX(3px)}.honors:focus-visible{outline-offset:4px;border-radius:24px}
.path-prompt{display:flex;gap:20px;align-items:center;justify-content:center;margin:4px 20px 30px}.path-prompt>span{height:1px;width:90px;background:linear-gradient(90deg,transparent,#7fbecc40)}.path-prompt>span:last-child{transform:rotate(180deg)}.path-prompt p{font-size:8px;font-weight:400;letter-spacing:2px;color:#aac0cd;margin:0}.path-prompt strong{font-weight:500;color:#d0e3e8}.site-footer{margin:0 4.5%;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #a1d5e31f;color:#9db3c3;font-size:10px;letter-spacing:.15px}.site-footer p{margin:0}.site-footer p span{color:#d3e0e9}.footer-coordinate{font:9px 'SFMono-Regular',Consolas,monospace;color:#81afbe;letter-spacing:2px}.footer-coordinate i{font-style:normal;color:#58717f;margin:0 5px}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.65;transform:scale(1.025)}}.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.motion-paused .portal-visual,.motion-paused .destination-world,.motion-paused .enter-button span{transition:none}
@media(min-width:1600px){.intro{padding-top:46px}.portal-stage{gap:120px;width:1200px;margin-top:20px}.destination{height:490px}.portal-visual{width:410px}.portal-content{height:410px}h2{font-size:46px}.portal-content p{font-size:12px}.course-label{font-size:9px}.enter-button{font-size:12px}.path-prompt{margin-top:14px;margin-bottom:40px}}
@media(max-width:900px){.portal-stage{gap:14px;width:96%}.portal-visual{width:330px}.portal-content{height:330px;width:270px}h2{font-size:36px}.destination{height:410px}.intro{padding-top:32px}.tagline{font-size:18px}.path-prompt{margin-top:12px}.footer-coordinate{display:none}}
@media(max-width:640px){.site-header{padding:18px 6%;gap:12px}.brand{gap:9px}.brand svg{width:31px;height:31px}.brand>span{font-size:8px;letter-spacing:2px}.brand strong{font-size:10px;letter-spacing:1.7px}nav{gap:16px;font-size:10px}.path-nav{display:none}.training-menu summary{gap:5px}.motion-toggle{width:28px;height:28px}.intro{padding:36px 16px 18px}.eyebrow{font-size:7px;letter-spacing:2px;gap:9px}.eyebrow span{width:16px}h1{font-size:clamp(42px,11vw,62px);letter-spacing:-2px;max-width:500px;margin:auto}h1 em{display:block}.tagline{font-size:15px;margin-top:18px}.intro-copy{font-size:11px;line-height:1.9}.portal-stage{grid-template-columns:1fr;gap:8px;margin-top:6px;width:100%}.destination{height:408px}.portal-visual{width:340px;max-width:95%}.portal-content{height:340px}h2{font-size:39px}.course-label{font-size:8px}.enter-button{font-size:11px}.ap .portal-content p{font-size:12px}.path-prompt{margin:28px 12px 30px;gap:9px}.path-prompt>span{width:20px}.path-prompt p{font-size:6px;letter-spacing:1.5px}.site-footer{margin:0 6%;font-size:8px;padding:20px 0}.site-footer p:first-child span{display:block;line-height:1.8}.lab-backdrop{background-position:center;background-size:auto 100svh}.scene-shade{background:linear-gradient(#04112026,transparent 40%,#0411201a 75%,#04112040)}#molecule-canvas{opacity:.14;mask-image:none}}
@media(max-width:360px){.portal-visual{width:300px}.portal-content{height:300px;width:260px}h2{font-size:34px}.portal-content p{margin:10px 0 12px;font-size:10px}.course-label{font-size:7px;margin-bottom:8px}.destination-symbol{font-size:17px}.destination{height:370px}}
.intro-copy{color:#e2eef7;font-weight:500;text-shadow:0 1px 2px #000,0 0 5px #000,0 0 14px #000}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Portal feet follow the activation circles in the actual lab artwork. */
.mobile-pad-scene{display:none}




.path-prompt p{font-size:11px;color:#e0ebf3;letter-spacing:1.5px;line-height:1.6;background:#051321db;padding:8px 15px;border-radius:6px}
.path-prompt strong{color:#fff}
.site-footer{font-size:13px;color:#e1ecf3;background:#04101de8;border-top-color:#b3d9e54d;padding:20px 4.5%;margin:0;min-height:66px}
.site-footer p span{color:#f5faff}
.footer-coordinate{font-size:12px;color:#b6d6e3;letter-spacing:1px}
.footer-coordinate i{color:#a2becb}
@media(min-width:1000px) and (min-aspect-ratio:4/3){
    body{min-height:max(860px,100svh);position:relative}
    .lab-backdrop,.scene-shade{position:absolute}
    main{position:static;display:block}
    .intro{position:relative;z-index:2;padding-top:38px;pointer-events:none}
    .portal-stage{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;pointer-events:none}
    .destination{position:absolute;left:var(--pad-x);top:calc(var(--pad-y) - var(--portal-size));width:var(--portal-size);height:var(--portal-size);transform:translateX(-50%);pointer-events:auto}
    .portal-visual{width:100%;max-width:none}
    .portal-content{height:100%;width:84%;max-width:none}
    
    .path-prompt{position:absolute;bottom:70px;left:0;right:0;margin:0 20px;pointer-events:none}
    .site-footer{position:absolute;bottom:0;left:0;right:0}
    .honors:hover .portal-visual,.honors:focus-visible .portal-visual{transform:scale(1.035);transform-origin:center bottom}
}
@media not all and (min-width:1000px) and (min-aspect-ratio:4/3){
    .portal-stage{display:grid;grid-template-columns:1fr;gap:16px;width:100%;margin:12px auto 0}
    .destination{height:470px;width:100%}
    .portal-visual{width:340px;max-width:95%}
    .portal-content{height:340px;width:285px;max-width:85%}
    .mobile-pad-scene{display:block;position:absolute;inset:0;z-index:-1;background-image:url('lab/assets/shared/ui/adventures-lab.webp');background-repeat:no-repeat;mask-image:linear-gradient(transparent,#000 30%,#000 82%,transparent)}
    
    
    .lab-backdrop{background-position:center top;background-size:auto 900px;position:absolute}
    .scene-shade{position:absolute}
    .path-prompt{margin:10px 16px 30px;gap:8px}
    .path-prompt>span{width:20px}
    .path-prompt p{font-size:10px;letter-spacing:.9px;text-align:center}
    .site-footer{font-size:11px;flex-wrap:wrap;justify-content:space-between;padding:18px 6%}
    .footer-coordinate{display:none}
    .site-footer p:first-child span{display:block;line-height:1.8}
}
@media(max-width:360px){
    .portal-visual{width:300px}
    .portal-content{height:300px;width:260px}
    .destination{height:425px}
    
    
    .path-prompt p{font-size:9px;letter-spacing:.4px}
}

/* Fluorescent status lettering is projected onto each pad's curved front rim. */
.portal-stage{overflow:hidden}
.pad-ticker{position:absolute;top:var(--ticker-top);left:50%;width:var(--ticker-width);height:var(--ticker-height);max-width:none;transform:translateX(-50%);pointer-events:none;z-index:3;overflow:hidden}
.pad-ticker text{fill:#9affef;font-family:'SFMono-Regular',Consolas,monospace;font-weight:650;font-size:16px;letter-spacing:1.6px;filter:drop-shadow(0 0 2px #31ffdf) drop-shadow(0 0 7px #25dfdb);paint-order:stroke fill;stroke:#053e3b;stroke-width:.45px}
.ap .pad-ticker text{fill:#eac1ff;stroke:#3c164e;filter:drop-shadow(0 0 2px #c46cff) drop-shadow(0 0 7px #af4dff)}
@media not all and (min-width:1000px) and (min-aspect-ratio:4/3){
    .pad-ticker text{font-size:22px;letter-spacing:1px}
    .destination{height:430px}
}
@media(max-width:360px){.destination{height:390px}}
