/* r21: a larger desktop crew travels around a shallow, front-facing oval. */
.landing [data-crew-showcase] .crew-art { min-height:508px; }
.landing [data-crew-carousel] .crew-art { display:flex; flex-direction:column; align-items:center; gap:0; margin-top:24px; }
.landing [data-crew-carousel] .crew-window { position:relative; width:100%; min-width:0; height:420px; overflow:hidden; padding:0; isolation:isolate; touch-action:pan-y pinch-zoom; }
.landing [data-crew-carousel] .crew-window::before { content:""; position:absolute; inset:104px 12% 16px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 65%,#AAF26D0A,transparent 66%); }
.landing [data-crew-carousel] .creature-ensemble { display:block; position:relative; width:100%; height:100%; min-width:0; padding:0; overflow:hidden; }
.landing [data-crew-carousel] .creature-ensemble > li { position:absolute; top:70px; left:calc(50% - 100px); width:200px; transform-origin:50% 100%; will-change:transform; }
.landing [data-crew-carousel] .crew-sprite { width:144px; height:234px; }
.landing [data-crew-carousel] .crew-sprite canvas { width:144px; height:270px; }
.landing [data-crew-carousel] .creature-ensemble p { margin-top:12px; font-size:22px; }
.landing [data-crew-carousel] .creature-ensemble p span { font-size:14px; }
.landing [data-crew-carousel] .crew-window:focus-visible { outline:2px solid var(--color-focus); outline-offset:4px; border-radius:12px; }

/* A compact instrument bar gives the poses a home without large tab cards. */
.landing [data-crew-carousel] .crew-toolbar { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:12px; width:max-content; max-width:100%; margin:24px 0 0; padding:6px 10px; border:1px solid #36373C; border-radius:18px; background:#1A1B1E; box-shadow:inset 0 1px #ffffff04; }
html[data-preview-tuning] .landing [data-crew-carousel] .crew-toolbar { margin-top:var(--preview-crew-controls-gap,24px); }
.landing [data-crew-carousel] .crew-toolbar[hidden] { display:none; }
.landing [data-crew-carousel] .crew-pose-options { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:4px; width:366px; max-width:100%; }
.landing [data-crew-carousel] .crew-timer { flex:1 1 0; justify-content:center; gap:8px; padding:10px 12px; border-radius:11px; font-size:13px; }
.landing [data-crew-carousel] .crew-timer::after { inset:auto 26% 3px; width:auto; height:2px; transform:scaleX(0); }
.landing [data-crew-carousel] .crew-timer[aria-pressed="true"]::after { transform:scaleX(1); }
.landing [data-crew-carousel] .crew-timer[aria-pressed="true"] { color:var(--crew-tint); background:#ffffff05; }
.landing [data-crew-carousel] .crew-timer .final-pose-icon { width:16px; height:16px; }
.landing [data-crew-carousel] .crew-navigation { display:flex; align-items:center; gap:2px; margin:0; padding-left:12px; border-left:1px solid #36373C; }
.landing [data-crew-carousel] .crew-navigation button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:11px; color:var(--color-support); background:transparent; cursor:pointer; touch-action:manipulation; transition:color 140ms var(--ease-out),transform 140ms var(--ease-out); }
.landing [data-crew-carousel] .crew-navigation svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.landing [data-crew-carousel] .crew-navigation button:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; }
.landing [data-crew-carousel] .crew-navigation button:disabled { opacity:.4; cursor:default; }
@media(hover:hover) and (pointer:fine) {
 .landing [data-crew-carousel] .crew-navigation button:not(:disabled):hover { color:var(--color-accent); transform:translateY(-1px); }
 .landing [data-crew-carousel] .crew-navigation button:not(:disabled):active { transform:scale(.96); }
}
@media(max-width:700px) {
 .landing [data-crew-showcase] .crew-art { min-height:396px; }
 .landing [data-crew-carousel] .crew-window { height:258px; }
 .landing [data-crew-carousel] .crew-window::before { inset:12px 15% 20px; }
 .landing [data-crew-carousel] .creature-ensemble { mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent); }
 .landing [data-crew-carousel] .creature-ensemble > li { top:24px; left:calc(50% - 80px); width:160px; }
 .landing [data-crew-carousel] .crew-sprite { width:64px; height:104px; }
 .landing [data-crew-carousel] .crew-sprite canvas { width:64px; height:120px; }
 .landing [data-crew-carousel] .creature-ensemble p { margin-top:8px; font-size:18px; }
 .landing [data-crew-carousel] .creature-ensemble p span { font-size:13px; }
 .landing [data-crew-carousel] .crew-toolbar { flex-direction:column; width:100%; gap:4px; padding:5px; border-radius:16px; }
 .landing [data-crew-carousel] .crew-pose-options { width:100%; gap:2px; }
 .landing [data-crew-carousel] .crew-timer { gap:6px; padding:10px 0; font-size:12px; }
 .landing [data-crew-carousel] .crew-navigation { padding:0; border:0; }
}
@media(prefers-reduced-motion:reduce) {
 .landing [data-crew-carousel] .crew-navigation button { transition:none; }
 .landing [data-crew-carousel] .creature-ensemble > li { will-change:auto; }
}
@media(forced-colors:active) {
 .landing [data-crew-carousel] .crew-window::before { display:none; }
 .landing [data-crew-carousel] .creature-ensemble { mask-image:none; }
 .landing [data-crew-carousel] .crew-toolbar { border-color:ButtonText; }
 .landing [data-crew-carousel] .crew-navigation button:disabled { color:GrayText; opacity:1; }
}