/* Layered hero: original composition rebuilt as independently animated cutouts. */
#trl-app .trl-editorial-hero{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:12px}
#trl-app .trl-hero-art{max-width:780px;width:100%}
#trl-app .trl-hero-emblem{padding:12px 0 20px;perspective:1100px}
#trl-app .trl-layered-scene{position:relative;width:100%;height:clamp(330px,36vw,500px);isolation:isolate;filter:drop-shadow(0 18px 22px #0007);transform-style:preserve-3d}
#trl-app .trl-atlas-cutout{position:absolute;display:block;background-image:url('level-avatar-atlas.png');background-size:200% 200%;background-repeat:no-repeat;pointer-events:none;--float:13px;animation:trl-cutout-float 5.4s ease-in-out infinite;will-change:transform}
#trl-app .trl-scene-word{background-position:0 0;width:105%;aspect-ratio:1;left:-2.5%;top:-15%;z-index:2;--float:5px;animation-duration:7s}
#trl-app .trl-scene-red{background-position:100% 0;width:45%;aspect-ratio:1;right:2%;top:-3%;z-index:1;animation-delay:-2.2s;--float:17px}
#trl-app .trl-scene-blue{background-position:0 100%;width:43%;aspect-ratio:1;left:0;top:0;z-index:1;animation-delay:-.8s;--float:15px}
#trl-app .trl-scene-friends{background-position:100% 100%;width:49%;aspect-ratio:1;left:25.5%;bottom:-8%;z-index:3;animation-delay:-3.1s;--float:9px}
@keyframes trl-cutout-float{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,calc(-1 * var(--float)),12px) rotate(1.5deg)}}
#trl-app .trl-hero-sparks i{background:#fff;box-shadow:0 0 10px #ff405b,0 0 20px #ef3848}
#trl-app .trl-hero-sparks i:nth-child(3n){background:#ff4356;box-shadow:0 0 10px #f32a48}
#trl-app .trl-hero-emblem>span{margin-top:4px;letter-spacing:4px}
/* A detailed cutout replaces the old geometric robot. */
#trl-app .trl-avatar-render{position:absolute;inset:0 0 20px;display:block;background:url('level-avatar-atlas.png') 100% 0/200% 200% no-repeat;animation:trl-avatar-bob 5s ease-in-out infinite;filter:drop-shadow(0 8px 9px #0008);pointer-events:none}
@keyframes trl-avatar-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
#trl-app .trl-guide-launch{width:122px;height:155px}
#trl-app .trl-guide-name{left:12px;right:12px;background:#101015f5;border-color:#e1444e88;box-shadow:0 0 18px #ee334422;letter-spacing:2px;color:#fff}
#trl-app .trl-guide-name i{color:#ff4557}
#trl-app .trl-guide-panel{background:linear-gradient(145deg,#211216,#0b0c11);border-color:#ee3b4f66;box-shadow:0 15px 55px #000b,0 0 25px #ec24331a;bottom:162px}
#trl-app .trl-guide-panel>header{background:#141014;border-color:#f04a5a25}
#trl-app .trl-guide-panel>header b{color:#fff}
#trl-app .trl-guide-panel>header small{color:#c3b6bb}
#trl-app .trl-guide-speaker{color:#ff7180}
#trl-app .trl-guide-answer p{color:#e1d7dc}
#trl-app .trl-guide-options button{background:linear-gradient(145deg,#2b1a21,#14141b);border-color:#b044513d;color:#fff}
#trl-app .trl-guide-options button:hover,#trl-app .trl-guide-options button[aria-pressed=true]{background:#712231;border-color:#ff6172;box-shadow:0 3px 14px #ef334422}
#trl-app #trl-guide-close{background:#29151c;border-color:#be4b58}
#trl-app #trl-guide-close:hover{background:#681d2d}
#trl-app .trl-guide-panel footer{background:#08090dbb}
#trl-app .trl-guide-panel footer button{color:#ffc2c8}
#trl-app .trl-guide-nudge,#trl-app .trl-guide-restore{background:#211115;border-color:#dc4d5d77;color:#fff}
@media(max-width:1050px){#trl-app .trl-editorial-hero{grid-template-columns:1fr 1fr}#trl-app .trl-layered-scene{height:370px}}
@media(max-width:700px){#trl-app .trl-editorial-hero{grid-template-columns:1fr}#trl-app .trl-hero-art{max-width:580px}#trl-app .trl-layered-scene{height:clamp(260px,75vw,410px)}#trl-app .trl-scene-word{top:-10%}#trl-app .trl-scene-friends{bottom:-6%}}
@media(max-width:650px){#trl-app .trl-guide-launch{width:103px;height:135px}#trl-app .trl-guide-panel{bottom:142px;max-height:min(370px,calc(100dvh - var(--trl-admin-offset,0px) - var(--trl-nav-height,130px) - 167px))}}
/* Keep a small slow drift when the visitor has requested reduced motion. */
@media(prefers-reduced-motion:reduce){#trl-app .trl-atlas-cutout{--float:3px;animation-duration:12s}#trl-app .trl-avatar-render{animation-duration:12s}#trl-app .trl-hero-sparks{display:none}}

#trl-app .trl-avatar-render{inset:0 auto auto 0;width:100%;height:auto;aspect-ratio:1}

#trl-app .trl-hero-emblem>span{margin-top:48px}
#trl-app .trl-scene-word{mask-image:linear-gradient(to bottom,transparent 0 35%,#000 38% 76%,transparent 79%)}
@media(prefers-reduced-motion:reduce){#trl-app .trl-atlas-cutout{animation:trl-cutout-float 12s ease-in-out infinite!important;--float:3px}#trl-app .trl-scene-blue{animation-delay:-2s!important}#trl-app .trl-scene-red{animation-delay:-5s!important}#trl-app .trl-scene-friends{animation-delay:-8s!important}#trl-app .trl-avatar-render{animation:trl-avatar-bob 12s ease-in-out infinite!important}}

#trl-app .trl-hero-emblem .trl-hero-level-art{width:100%!important;max-width:none!important;height:auto!important;display:block;object-fit:contain}#trl-app .trl-hero-emblem>span{margin-top:18px}#trl-app .trl-hero-emblem{padding:30px 0}
