/* Characters share the product's physical display space and its real actions. */
.character-scene{--buddy-turn:0deg;--buddy-lean:0deg;--buddy-x:0px;--buddy-focus-lean:0deg;--buddy-scale:1;--scene-accent:#bf93ff;position:relative}
.buddy{display:block;position:relative;flex:none;aspect-ratio:1;width:320px;max-width:100%;padding:0;border:0;background:none;color:#eee9ff;font:inherit;text-decoration:none;cursor:pointer;user-select:none;isolation:isolate;z-index:3;outline-offset:0!important;border-radius:20px;touch-action:manipulation}
.buddy img{display:block;width:100%;height:auto;object-fit:contain;transform-origin:50% 96%;transition:transform 280ms cubic-bezier(.2,.7,.2,1);transform:translateX(var(--buddy-x)) rotateY(var(--buddy-turn)) rotate(var(--buddy-lean));pointer-events:none}
.buddy::before{content:'';position:absolute;left:28%;right:24%;bottom:1.4%;height:5%;background:radial-gradient(ellipse,#03051a70,transparent 72%);z-index:-1;pointer-events:none}
.buddy-cue{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);display:flex;align-items:center;gap:9px;width:max-content;max-width:110%;font-size:10px;line-height:1.4;color:#d7d5ee;border-bottom:1px solid #ffffff30;padding:5px 0;transition:color 150ms,border-color 150ms;white-space:nowrap}
.buddy-cue::after{content:'↗';font-size:14px;color:var(--scene-accent)}
.buddy:hover .buddy-cue,.buddy:focus-visible .buddy-cue{color:white;border-color:var(--scene-accent)}
body.motion-on .character-scene.is-engaged .buddy img{transform:translateX(var(--buddy-x)) rotateY(var(--buddy-turn)) rotate(calc(var(--buddy-lean) - 1.5deg)) scale(1.025)}
/* Anime.js handles easing once; no competing CSS transform transition. */
body.motion-on .character-scene[data-anime-buddy] .buddy img{transition:none;transform:translateX(var(--buddy-x)) rotateY(var(--buddy-turn)) rotate(calc(var(--buddy-lean) + var(--buddy-focus-lean))) scale(var(--buddy-scale))}
.scene-ledge{position:absolute;left:-8px;right:-8px;bottom:-8px;height:22px;border:1px solid #ffffff2a;border-top-color:#cec5ff80;border-radius:50%;background:linear-gradient(180deg,#a99aff19,#080d202e);transform:perspective(600px) rotateX(52deg);box-shadow:0 14px 24px #03041635;pointer-events:none;z-index:0;transition:border-color 180ms,background 180ms}
.character-scene.is-engaged .scene-ledge,.character-scene.has-answer .scene-ledge{border-top-color:var(--scene-accent);background:linear-gradient(180deg,#b99aff2b,#080d202e)}
.character-scene.is-engaged .app-shot{border-color:var(--scene-accent)}
/* A three-object scene: the host stands beside the original screen pair. */
.hero-stage{height:655px}
.hero-host{position:absolute;width:340px;max-width:none;left:-150px;bottom:78px}
.hero-stage .scene-ledge{left:-95px;right:-16px;bottom:75px;height:34px}
.hero-screen-back{width:205px;left:168px;top:auto;bottom:100px}
.hero-screen-front{width:230px;right:-4px;top:auto;bottom:100px}
.hero-stage .demo-caption{left:170px;right:0;bottom:27px;text-align:center}
/* A laptop / reading companion sits on the same shelf as the product screen. */
.screen-art.character-scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:0;padding:0 0 18px;min-width:0}
.screen-art.character-scene .app-shot{width:min(205px,100%);justify-self:center;z-index:1}
.feature-buddy{--buddy-size:clamp(210px,27vw,330px);width:100%;height:var(--buddy-size);aspect-ratio:auto;justify-self:center;margin:0}
.feature-buddy img{position:absolute;bottom:0;left:50%;margin-left:calc(var(--buddy-size) / -2);width:var(--buddy-size);max-width:none}
.screen-art.character-scene .scene-ledge{bottom:14px;left:-16px;right:-16px;height:25px}
.feature-buddy .buddy-cue{top:calc(100% + 20px)}
.stage-journal{--scene-accent:#7cd5ff}
.stage-materials{--scene-accent:#b8e5c4}
/* The assistant and the question list respond to each other. */
.helper-scene{position:relative;width:340px;max-width:100%;margin-top:28px;margin-left:auto}
.faq-buddy{width:340px;max-width:100%}
.helper-scene .scene-ledge{left:15%;right:12%;bottom:0}
.faq-section{--scene-accent:#ffd0a0;align-items:center}
.faq-section .faq-list details{transition:border-color 180ms,background-color 180ms}
.faq-section.has-answer .faq-list details[open]{border-color:#ffd0a060}
/* The closing host stands above the wordmark on a connected display ledge. */
.closing-section{padding-bottom:190px}
.closing-section>.page-width{display:grid;grid-template-columns:minmax(0,1fr) min(490px,38vw);gap:25px;align-items:center}
.closing-copy{width:100%}
.closing-art{position:relative;inset:auto;overflow:visible;width:100%;aspect-ratio:1;pointer-events:auto;-webkit-mask-image:none;mask-image:none}
.closing-buddy{width:100%;max-width:none}
.closing-art .buddy img{position:static;width:100%;max-width:100%;height:auto;opacity:1;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;animation:none}
.closing-art .scene-ledge{left:20%;right:15%;bottom:0;height:28px}
.closing-art .buddy-cue{top:calc(100% + 16px)}
/* Auxiliary pages use the same scene language. */
.portal-art{height:555px;--scene-accent:#7cd5ff}
.portal-buddy{width:480px;max-width:100%;margin-bottom:45px}
.portal-art .scene-ledge{left:12%;right:7%;bottom:55px;height:36px}
.portal-art-label{bottom:-34px}
.portal-buddy .buddy-cue{top:calc(100% + 18px)}
.portal-ring{opacity:.55}
.document-intro{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:18px;align-items:center;margin-bottom:40px}
.document-intro-copy{min-width:0}
.document-intro-copy h1{overflow-wrap:anywhere;hyphens:auto}
.document-intro-copy p:last-child{margin-bottom:0}
.document-scene{position:relative}
.document-buddy{width:275px}
.document-scene .scene-ledge{left:15%;right:10%;bottom:0}
.document-buddy .buddy-cue{font-size:11px;top:calc(100% + 10px)}
#contact{scroll-margin-top:30px}
@media(max-width:1150px) and (min-width:901px){.hero-host{width:300px;left:-140px;bottom:72px}.hero-stage{height:610px}.hero-screen-back{width:170px;left:118px;bottom:100px}.hero-screen-front{width:195px;right:-8px;bottom:100px}.hero-stage .scene-ledge{left:-85px;bottom:70px}.hero-stage .demo-caption{left:100px}.hero-stage .buddy-cue{font-size:9px}}
@media(max-width:900px){.hero-layout{grid-template-columns:1fr}.hero-stage{height:650px;width:min(650px,100%);margin-top:20px}.hero-host{width:330px;left:-65px;bottom:66px}.hero-screen-back{width:185px;left:230px;bottom:90px}.hero-screen-front{width:210px;right:-10px;bottom:90px}.hero-stage .scene-ledge{left:10px;right:0;bottom:62px}.hero-stage .demo-caption{left:220px;bottom:15px}.closing-section>.page-width{grid-template-columns:1fr;gap:35px}.closing-art{width:390px;max-width:100%;justify-self:center}.closing-section{padding-bottom:175px}.portal-buddy{width:440px}}
@media(max-width:760px){.portal-art{height:440px;margin-top:25px}.portal-buddy{width:370px;margin-bottom:35px}.portal-art .scene-ledge{bottom:53px;left:14%;right:12%}.portal-art-label{bottom:-30px}.document-intro{grid-template-columns:minmax(0,1fr) 230px;gap:8px}.document-buddy{width:230px}}
@media(max-width:640px){
 .hero-stage{height:calc((100vw - 36px)*1.13 + 340px);margin-top:35px;width:100%}
 .hero-screen-back{width:44%;left:0;top:20px;bottom:auto;transform:none}
 .hero-screen-front{width:48%;right:0;top:0;bottom:auto;transform:none}
 .hero-host{width:300px;left:-40px;bottom:60px}
 .hero-stage .scene-ledge{left:10px;right:0;bottom:55px}
 .hero-stage .demo-caption{left:auto;right:0;bottom:85px;width:40%;font-size:9px;line-height:1.6;text-align:right}
 .hero-host .buddy-cue{left:50%;font-size:10px;top:calc(100% + 10px)}
 .screen-art.character-scene{padding-bottom:30px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
 .screen-art.character-scene .app-shot{width:100%}
 .feature-buddy{--buddy-size:clamp(200px,61vw,285px);margin-bottom:-2px}
 .screen-art.character-scene .scene-ledge{left:-6px;right:-6px;bottom:24px;height:24px}
 .feature-buddy .buddy-cue{top:calc(100% + 15px);font-size:9px}
 .feature-stage{gap:40px;padding-bottom:55px}
 .helper-scene{width:285px;margin:20px auto 40px}
 .faq-buddy{width:285px}
 .faq-section{gap:30px}
 .closing-art{width:330px}
 .closing-section{padding-bottom:150px}
 .closing-art .buddy-cue{top:calc(100% + 12px)}
 .portal-art{height:380px;margin-top:25px}
 .portal-buddy{width:330px;margin-bottom:30px}
 .portal-art .scene-ledge{bottom:44px;height:30px}
 .portal-art-label{bottom:-27px}
 .portal-college{margin-top:50px}
 .document-intro{grid-template-columns:1fr;gap:15px;margin-bottom:58px}
 .document-scene{width:250px;max-width:100%;justify-self:center}
 .document-buddy{width:250px;max-width:100%}
}
@media(max-width:360px){.hero-host{width:265px;left:-40px}.hero-stage{height:calc((100vw - 36px)*1.13 + 340px)}.hero-stage .demo-caption{font-size:8px}.closing-art{width:285px}.portal-buddy{width:285px}.portal-art{height:345px}.document-scene{width:230px}}
body:not(.motion-on) .buddy img,body.viewer-open .buddy img,body.mascots-hidden .buddy img{transform:none!important;transition:none}
@media(prefers-reduced-motion:reduce){.buddy img{transform:none!important;transition:none!important}.scene-ledge,.buddy-cue{transition:none!important}}
@media(min-width:1101px) and (max-width:1250px){.hero-screen-back{width:190px;left:148px;bottom:100px}.hero-screen-front{width:215px;right:-4px;bottom:100px}.hero-host{width:320px;left:-148px;bottom:78px}.hero-stage{height:655px}.hero-stage .scene-ledge{bottom:75px}}
@media(min-width:901px) and (max-width:1100px){.hero-layout{grid-template-columns:1fr}.hero-stage{height:650px;width:min(650px,100%);margin:20px auto 0}.hero-host{width:330px;left:-65px;bottom:66px}.hero-screen-back{width:185px;left:230px;bottom:90px}.hero-screen-front{width:210px;right:-10px;bottom:90px}.hero-stage .scene-ledge{left:10px;right:0;bottom:62px}.hero-stage .demo-caption{left:220px;bottom:15px}}
/* Keep the action cue and the portal caption in separate, flowing rows. */
.portal-art{height:auto;min-height:555px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.portal-character{width:480px;max-width:100%;position:relative;margin-bottom:70px}
.portal-buddy{width:100%;margin-bottom:0}
.portal-character .scene-ledge{top:auto;bottom:0;left:16%;right:10%;height:30px}
.portal-art-label{position:static;margin:0}
@media(max-width:900px){.portal-character{width:440px}}
@media(max-width:760px){.portal-art{min-height:0}.portal-character{width:370px;margin-bottom:65px}.portal-college{margin-top:30px}}
@media(max-width:640px){.portal-character{width:330px}.portal-college{margin-top:30px}}
@media(max-width:360px){.portal-character{width:285px}}
@media(min-width:641px) and (max-width:760px){.hero-host{width:300px;left:-65px}.hero-screen-back{width:160px;left:205px}.hero-screen-front{width:180px;right:0}.hero-stage .demo-caption{left:200px}}