/* The original hero scene, PC, notes and breakpoints stay in creative.css. */
.hero-mascot.rpc-mascot{--mascot-height:410px;height:var(--mascot-height);width:calc(var(--mascot-height)*var(--mascot-aspect,.75));max-width:70%;animation:none;filter:none;overflow:visible}
/* Identical bounds for the captured current character and the live canvas. */
.hero-mascot.rpc-mascot{right:-65px;bottom:-15px}
.mascot-fallback,.mascot-canvas{position:absolute;inset:0;pointer-events:none}.mascot-fallback img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}.mascot-canvas canvas{position:absolute;bottom:0;pointer-events:none;background:transparent}.rpc-mascot[data-mascot-ready=true] .mascot-fallback{visibility:hidden}.rpc-mascot:not([data-mascot-ready=true]) .mascot-canvas{visibility:hidden}
.mascot-motion{position:absolute;right:0;bottom:0;z-index:4;border:1px solid #8199bf70;border-radius:12px;background:#f6faffdd;color:#294d87;padding:5px 9px;font:600 10px Montserrat,sans-serif;cursor:pointer;min-height:28px}.mascot-motion[hidden]{display:none}.mascot-motion:focus-visible{outline:3px solid #3869d8;outline-offset:3px}
/* Keep pause available to assistive technology and keyboard users without a
   visible playback control. Keyboard focus reveals it inside the hero. */
.mascot-motion:not(:focus-visible){width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1600px){.hero-mascot.rpc-mascot{--mascot-height:440px}}@media(max-width:1180px){.hero-mascot.rpc-mascot{--mascot-height:350px}.hero-mascot.rpc-mascot{right:-35px;bottom:-11px}}@media(max-width:760px){.hero-mascot.rpc-mascot{--mascot-height:310px}.hero-mascot.rpc-mascot{right:-8px;bottom:-2px}}@media(max-width:380px){.hero-mascot.rpc-mascot{--mascot-height:280px}.mascot-motion:focus-visible{min-height:34px}}

/* Clear the PC caption without moving its graphic or the accepted mascot. */
.tech-scene .repair-note{bottom:-42px}

/* Hero composition38 — approved spacious composition. Character framing stays locked. */
.tech-scene .scene-halo{
 inset:44px -4px 4px 4px;border-radius:46% 44% 38% 46%;
 background:radial-gradient(ellipse at 36% 26%,#ffffffcf,transparent 56%),linear-gradient(145deg,#9ed8f66b,#c0b8fa8c 64%,#95dbeb4d);
 box-shadow:inset 0 0 65px #ffffff80,0 24px 75px #7693c81c;
 filter:none;transform:rotate(-7deg)
}
.tech-scene .scene-orbit.orbit-a{inset:26px -3px 4px 6px;border-color:#6c98c21c;transform:rotate(-7deg)}
.tech-scene .orbit-b,.tech-scene .scene-spark{display:none}
.tech-scene .pc-stage{
 left:0;top:4%;width:78%;height:85%;background:none;border-radius:0;
 box-shadow:none;transform:scale(.88);transform-origin:50% 100%;overflow:visible
}
.tech-scene .pc-stage::before{
 content:"";position:absolute;left:13%;right:9%;height:8%;bottom:-1.5%;
 border-radius:50%;background:radial-gradient(ellipse,#233f602e,transparent 70%);filter:blur(6px)
}
.tech-scene .hero-pc{position:relative;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:none;mix-blend-mode:normal;filter:drop-shadow(0 9px 10px #233f6012)}
.tech-scene .floating-note{border:1px solid #ffffffde;background:linear-gradient(135deg,#fffffffa,#f7fbfffa);box-shadow:0 12px 28px #274a7817,0 1px 2px #ffffffb3}
.tech-scene .repair-note{bottom:-22px}
.hero-mascot.rpc-mascot::before{
 content:"";position:absolute;left:31%;width:39%;height:2.8%;bottom:1.4%;
 border-radius:50%;background:radial-gradient(ellipse,#233f602e,transparent 70%);filter:blur(3px);pointer-events:none
}
@media(max-width:760px){
 .tech-scene .scene-halo{inset:38px 0 8px 3px}
 .tech-scene .pc-stage{left:0;top:8%;width:79%;height:81%}
 .tech-scene .repair-note{bottom:-20px}
}