@import url('./play/play.css');
:root{--mono:var(--font-mono)}
/* Shade the image on the same clipped layer, including its rounded edges. */
.hub-scene{position:relative;isolation:isolate;overflow:hidden;border:1px solid #29434b;border-radius:14px;padding:clamp(28px,5vw,64px);min-height:390px;display:flex;align-items:center;margin-bottom:24px;background:linear-gradient(90deg,#061d27ed,#061d27ad 48%,#061d2715),var(--scene) center/cover no-repeat;background-color:#061d27;background-clip:padding-box}
.hub-copy{max-width:490px}.hub-copy h2{font-size:clamp(34px,4vw,54px);margin-bottom:18px}.hub-copy>p:not(.eyebrow){color:#c4d4d2;line-height:1.7}.hub-copy .actions{margin-top:24px}.hub-copy .small{font-size:12px}.hub-links{display:flex;gap:20px;flex-wrap:wrap;padding:25px 0}.hub-links a{min-height:44px;display:inline-flex;align-items:center}.hub-scene .secondary{background:#061d27bd}.hub-back{display:block;font-size:12px;margin-top:20px}
@media(max-width:620px){.hub-scene{min-height:370px;padding:28px 22px;background-position:60% center}.hub-scene{background-image:linear-gradient(90deg,#061d27ed,#061d2790),var(--scene)}.hub-copy .actions{align-items:flex-start;flex-direction:column;gap:8px}.hub-copy>p:not(.eyebrow){font-size:14px}}

/* Match the neighboring cards' image zoom without moving the copy or controls. */
body[data-ui=explore] .hub-scene{background-image:none;transition:border-color .2s,box-shadow .2s}
body[data-ui=explore] .hub-scene::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#061d27ed,#061d27ad 48%,#061d2715),var(--scene) center/cover no-repeat;transition:transform .4s}
body[data-ui=explore] .hub-scene:is(:hover,:focus-within){border-color:#d9c48699;box-shadow:0 8px 30px #00121b40}
body[data-ui=explore] .hub-scene:is(:hover,:focus-within)::before{transform:scale(1.025)}
@media(max-width:620px){body[data-ui=explore] .hub-scene::before{background-position:60% center;background-image:linear-gradient(90deg,#061d27ed,#061d2790),var(--scene)}}
@media(prefers-reduced-motion:reduce){body[data-ui=explore] .hub-scene,body[data-ui=explore] .hub-scene::before{transition:none}body[data-ui=explore] .hub-scene:is(:hover,:focus-within)::before{transform:none}}