/* A single, borderless stage fills the opening screen. RGBA character frames preserve transparency. */
.commerce-visual{background:radial-gradient(ellipse at 80% 40%,#442d24,#201510 80%)}.student-visual{background:radial-gradient(ellipse at 80% 40%,#29374f,#121724 80%)}.task-visual{background:radial-gradient(ellipse at 80% 40%,#343b35,#141d17 80%)}.commerce-type,.student-type{font-family:'Space Grotesk';font-size:55px;line-height:1.04;letter-spacing:-2px;position:absolute;left:30px;top:86px;color:#e2c0a9}.commerce-type span{font-size:27px;color:#b99b83}.student-type{font-size:48px;color:#b2c5ea}.student-type span{color:#7c8fae}.task-type{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:absolute;inset:83px 40px 70px}.task-type span{font-family:monospace;font-size:23px;border:1px solid #afcfba35;border-radius:8px;display:grid;place-items:center;color:#b2cdb8;background:#ffffff04}
body{background:#050505}header{position:absolute;top:0;left:0;right:0;z-index:20;border-bottom:1px solid #ffffff0b;background:linear-gradient(#050505bb,transparent);max-width:none}.hero[data-scene=character]{height:100svh;min-height:760px;max-height:1200px;max-width:none;display:block;position:relative;padding:0;isolation:isolate;overflow:hidden}.hero[data-scene=character] .ambient{background:radial-gradient(ellipse at 71% 43%,#adc0ed0b,transparent 45%),radial-gradient(ellipse at 96% 82%,#68162d20,transparent 48%),radial-gradient(ellipse at 4% 74%,#56122515,transparent 40%)}.hero[data-scene=character] .hero-copy{position:absolute;left:6%;top:50%;transform:translateY(-48%);padding:0;z-index:4;width:44%;pointer-events:none}.hero[data-scene=character] .hero-copy a{pointer-events:auto}.hero[data-scene=character] h1{font-size:clamp(58px,5.5vw,93px);letter-spacing:-4.5px}.hero[data-scene=character] .intro{max-width:385px;font-size:15px;text-shadow:0 1px 15px #000}.hero[data-scene=character] .scene-switch{top:112px;right:6%;z-index:6}.hero[data-scene=character] .character-exhibit{position:absolute;inset:0;height:100%;width:100%;z-index:1;isolation:auto}.hero[data-scene=character] .character-top{top:128px;left:6%;width:auto;right:auto;font-size:9px;gap:22px}.hero[data-scene=character] .character-top>span:first-child{display:none}.hero[data-scene=character] .character-stage{inset:0;position:absolute;height:100%;width:100%;border:0;border-radius:0;outline-offset:-15px;overflow:visible;cursor:pointer;isolation:auto;mask-image:linear-gradient(0deg,transparent 5%,#000 19% 94%,transparent 100%)}.hero[data-scene=character] .character-stage:after{display:none}.hero[data-scene=character] .character-stage img{width:104%;height:100%;left:21%;max-width:none;object-fit:contain;object-position:center 56%}.hero[data-scene=character] .character-stage canvas{inset:0;width:100%;height:100%;background:transparent}.hero[data-scene=character] .character-aura{inset:0;background:radial-gradient(ellipse at 72% 70%,#9b20320a,transparent 55%);z-index:-1}.hero[data-scene=character] .character-caption{bottom:122px;left:51%;width:43%;z-index:5;pointer-events:none}.hero[data-scene=character] .character-caption p{font-size:16px;text-shadow:0 2px 10px #000}.hero[data-scene=character] .character-controls{bottom:67px;left:51%;width:43%;z-index:5}.hero[data-scene=character] .hero-footer{position:absolute;left:6%;right:6%;bottom:0;margin:0;z-index:6;height:57px;padding:0;pointer-events:none}.hero[data-scene=character] .hero-footer a{pointer-events:auto}.hero[data-scene=card]{padding-top:92px;max-width:none}.hero[data-scene=card] .scene-switch{top:111px}.hero[data-scene=card] .hero-copy{padding-top:138px}.hero[data-scene=card] .exhibit{margin-top:30px}.hero[data-scene=card] .hero-footer{margin-top:90px}
@media(min-width:1600px){.hero[data-scene=character] .hero-copy{left:8%}.hero[data-scene=character] .character-caption,.hero[data-scene=character] .character-controls{left:52%;width:42%}}
@media(max-width:1100px) and (min-width:761px){.hero[data-scene=character] h1{font-size:58px;letter-spacing:-3.3px}.hero[data-scene=character] .hero-copy{width:46%}.hero[data-scene=character] .intro{font-size:14px}.hero[data-scene=character] .character-caption{bottom:129px;font-size:14px}}
@media(max-width:760px){header{height:76px}.hero[data-scene=character]{height:100svh;min-height:860px;max-height:none}.hero[data-scene=character] .hero-copy{top:108px;left:6%;right:6%;width:auto;transform:none;text-align:left}.hero[data-scene=character] .eyebrow{font-size:9px}.hero[data-scene=character] h1{font-size:clamp(47px,10vw,64px);letter-spacing:-2.7px;line-height:1.02;margin:18px 0}.hero[data-scene=character] h1 br:first-child{display:none}.hero[data-scene=character] h1 br:first-child:after{content:' '}.hero[data-scene=character] .intro{font-size:13px;line-height:1.65;max-width:330px;margin:0}.hero[data-scene=character] .hero-actions{margin-top:20px;gap:25px}.hero[data-scene=character] .hero-actions .primary{padding:12px 16px;font-size:12px}.hero[data-scene=character] .hero-actions .text-link{font-size:12px}.hero[data-scene=character] .location{display:none}.hero[data-scene=character] .scene-switch{position:absolute;top:auto;bottom:84px;right:auto;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}.hero[data-scene=character] .scene-switch button{font-size:11px;padding:9px 16px}.hero[data-scene=character] .character-top{top:81px;left:6%;font-size:7px;opacity:.65}.hero[data-scene=character] .character-stage{inset:0;mask-image:linear-gradient(0deg,transparent 15%,#000 28% 90%,transparent 100%)}.hero[data-scene=character] .character-stage img{left:-6%;top:35%;width:112%;height:47%;object-position:center}.hero[data-scene=character] .character-caption{bottom:183px;left:6%;width:88%}.hero[data-scene=character] .character-caption p{font-size:14px;margin-bottom:8px}.hero[data-scene=character] .character-controls{bottom:138px;left:6%;width:88%}.hero[data-scene=character] .character-controls button{font-size:10px;padding:8px 12px}.hero[data-scene=character] .hero-footer{bottom:0;height:64px;font-size:8px}.hero[data-scene=card]{padding-top:90px}.hero[data-scene=card] .hero-copy{padding-top:30px}.hero[data-scene=card] .scene-switch{top:auto;margin-top:30px}.hero[data-scene=card] .hero-footer{margin-top:35px}.hero[data-scene=card] .exhibit{margin-top:0}}
@media(max-width:380px){.hero[data-scene=character]{min-height:820px}.hero[data-scene=character] h1{font-size:44px}.hero[data-scene=character] .hero-copy{top:105px}.hero[data-scene=character] .intro{font-size:12px}.hero[data-scene=character] .hero-actions{gap:20px}.hero[data-scene=character] .hero-actions .primary{font-size:11px}.hero[data-scene=character] .hero-actions .text-link{font-size:11px}}