/* Space direction: luminous type, deep black, restrained gold accents. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hero{cursor:grab;touch-action:pan-y}.hero.is-dragging{cursor:grabbing}.hero:focus-visible{outline:2px solid #b8b8d3;outline-offset:-4px}
body{background:#06070d;color:#f4f3fb}
header{background:#06070d;border-bottom-color:#ffffff18}
.brand{color:#fff;line-height:.85;letter-spacing:-2px}
.brand span{margin:0 0 7px 2px;font-size:12px;letter-spacing:2px;font-weight:600}
.brand i{color:var(--yellow);top:12px}
.sound{color:#deddeb;border-color:#ffffff35}.sound span{color:var(--yellow)}
.hero{background:#06070d;isolation:isolate}
#galaxy{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#06070d80,transparent 38%,transparent 72%,#06070d70),linear-gradient(0deg,#06070d 0%,transparent 19%,transparent 85%,#06070d70)}
.edition,.hero-title p,.hero-bottom{color:#b4b6cd}.edition{z-index:1}
.hero-title h1{color:#f4f3fc;text-shadow:0 3px 35px #b0a0ff12}
.hero-title h1>span{color:#b8b8d3}
.hero-copy .eyebrow,.ziggy-label span{color:var(--yellow)}
.hero-copy p,.ziggy-label small{color:#c5c5d5}
.hero-copy h2 strong,.ziggy-label b{color:#fff}
.primary{background:var(--yellow);color:#11131a;box-shadow:0 5px 30px #f6cd2815}
.orbit{border-color:#b9b7ef20}.spark{color:#c5b9ff}.spark-two{color:var(--yellow)}
.stage-shadow{background:#aba2ff36;filter:blur(22px)}
.sticker{background:#171925;color:#eae9f5;border:1px solid #ffffff28;box-shadow:4px 5px 0 #000}.sticker strong{color:var(--yellow)}
.ticker{background:#0e101b;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18}
.crew{background:#0b0d15;color:#f4f3fb}.crew-heading em{color:#a5a6bf}.crew-heading p{color:#bcbdd0}
.character-button{color:#f2f0fa;background:#171a27;border:1px solid #ffffff18}.character-button .portrait{background-color:#eeeade;mix-blend-mode:normal}.character-button[aria-pressed=true]{color:#171a27}.character-button .number{color:#191c17}
.character-detail{background:#171a27}.detail-art{background:#dedacc}.detail-copy .eyebrow{color:#d7bc58}.detail-copy p{color:#c7c7d7}#detail-traits span{border-color:#ffffff30}.detail-controls button{border-color:#ffffff40;color:#f4f3fb}.detail-controls button:hover{color:#191c17}
footer{border-color:#ffffff20}footer p{color:#bcbdd0}footer .brand{color:white}
.skip{color:#191c17}.fallback-ziggy{mix-blend-mode:normal;border-radius:80px;clip-path:inset(0 0 12% 0)}
@media(max-width:600px){.brand span{font-size:10px;margin-bottom:5px}.hero:after{background:linear-gradient(0deg,#06070d 0%,transparent 40%,transparent 85%,#06070d70)}}

.ticker{background:var(--yellow);color:#11131a;border-top-color:var(--yellow);border-bottom-color:var(--yellow)}

.hero-title h1>span{color:var(--yellow)}

/* Supplied individual portraits retain their original colors and composition. */
.character-button.has-portrait .portrait{background-size:cover!important;background-position:center 20%!important;background-color:#334d68}
.character-button.has-portrait .number{color:#fff;text-shadow:0 1px 5px #000;background:#080d1870;padding:3px 5px;border-radius:4px}
.detail-art.has-portrait{background:#334d68}
.detail-art.has-portrait .detail-portrait{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;clip-path:none;mix-blend-mode:normal;background-size:cover!important;background-position:center top!important}
.detail-art.has-portrait .detail-number{color:#ffffff60;text-shadow:0 2px 15px #17283870;pointer-events:none}
.character-detail.changing .detail-art.has-portrait .detail-portrait{animation:photo-enter .45s both}
@keyframes photo-enter{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* Transform is independent from the translate/rotate used by scroll.css. */
@media(prefers-reduced-motion:no-preference){
 .character-button{animation:card-float var(--float-duration,4.5s) ease-in-out var(--float-delay,0s) infinite;animation-play-state:paused;transition:transform .25s,box-shadow .3s,border-color .3s,background .25s}
 .roster.motion-visible:not(.motion-paused) .character-button{animation-play-state:running}
 .character-button[aria-pressed=true]{box-shadow:0 5px 24px #f4d43b24;border-color:var(--yellow)}
 .roster .character-button:is(:hover,:focus-visible){animation:none;transform:perspective(700px) translateY(-8px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 16px 32px #0006;border-color:var(--yellow);z-index:2}
 .character-button:is(:hover,:focus-visible) .portrait{transform:scale(1.07)}
 .roster .character-button:active{transform:perspective(700px) translateY(-2px) scale(.97)}
 @keyframes card-float{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-5px) rotate(.5deg)}}
}
@media(prefers-reduced-motion:reduce){.character-button,.character-button .portrait{animation:none!important;transition:none!important;transform:none!important}}