/* keln.space — interactive objects, independent of the rest of the page. */
.hero__media.hero-3d { position:relative; width:100%; aspect-ratio:18/11; isolation:isolate; }
.hero-3d__poster,.hero-3d__canvas { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; }
.hero-3d__poster { pointer-events:none; transition:opacity .25s; }
.hero-3d__canvas { opacity:0; touch-action:pan-y; outline:none; transition:opacity .25s; }
.hero-3d.is-ready .hero-3d__canvas { opacity:1; }
.hero-3d.is-ready .hero-3d__poster { opacity:0; }
.hero-3d__canvas:focus-visible { outline:1px solid var(--pink,#ff69ae); outline-offset:4px; border-radius:20px; }
.hero-3d__bar { position:absolute; z-index:2; bottom:-27px; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:12px; color:var(--muted,#aaa); font-size:11px; line-height:1.3; }
.hero-3d__bar button,.hero-3d__bar summary { font:inherit; color:inherit; background:transparent; border:1px solid var(--line,#333); border-radius:24px; cursor:pointer; padding:7px 11px; }
.hero-3d__bar button:hover,.hero-3d__bar summary:hover { color:var(--text,#fff); border-color:var(--pink,#ff69ae); }
.hero-3d__bar button:focus-visible,.hero-3d__bar summary:focus-visible { outline:2px solid var(--pink,#ff69ae); outline-offset:3px; }
.hero-3d__bar details { position:relative; }
.hero-3d__bar summary { list-style:none; }
.hero-3d__bar summary::-webkit-details-marker { display:none; }
.hero-3d__controls { position:absolute; bottom:38px; left:50%; transform:translateX(-50%); width:250px; padding:14px; background:var(--bg,#09090b); border:1px solid var(--line,#333); border-radius:18px; box-shadow:0 8px 30px #0005; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.hero-3d__controls span { grid-column:1/-1; margin:3px 0; }
.hero-3d__controls button { min-height:38px; }
.hero-3d__status { position:absolute; bottom:11px; left:50%; transform:translateX(-50%); padding:5px 12px; border-radius:20px; color:var(--text,#fff); background:#111c; font-size:11px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .2s; }
.hero-3d__status.is-visible { opacity:1; }
.hero-3d__bar[hidden] { display:none; }
@media(max-width:600px) { .hero__media.hero-3d { aspect-ratio:1.22; margin-top:22px; margin-bottom:25px; } .hero-3d__bar { bottom:-23px; gap:8px; } .hero-3d__controls { width:232px; } }
@media(prefers-reduced-motion:reduce) { .hero-3d__poster,.hero-3d__canvas,.hero-3d__status { transition:none; } }

/* The constellation belongs to the first screen, above the fixed navigation. */
.home-page .hero { padding-top:clamp(34px,5svh,70px); padding-bottom:20px; }
.home-page .hero__title { font-size:clamp(2.6rem,8vw,6rem); }
.home-page .hero__lead { margin-top:12px; }
.hero__media.hero-3d { width:100%; height:clamp(270px,calc(100svh - 245px),740px); aspect-ratio:auto; margin-top:4px; margin-bottom:0; }
.hero-3d__canvas:focus-visible { outline:none; }
.hero-3d__status { bottom:1px; }
@media(max-width:600px) { .home-page .hero { padding-top:50px; } .hero__media.hero-3d { height:clamp(270px,43svh,360px); margin-top:0; margin-bottom:0; } }
@media(min-width:601px) { .home-page .hero { padding-top:clamp(22px,3svh,44px); } .home-page .hero__title { font-size:clamp(2.6rem,7vw,5.2rem); } .home-page .hero__lead { margin-top:8px; } .hero__media.hero-3d { height:clamp(270px,calc(100svh - 210px),800px); } }

/* Keep the desktop arrangement; only the camera and canvas respond to width. */
@media(max-width:600px){.hero__media.hero-3d{width:calc(100vw - 8px);height:clamp(230px,72vw,400px);margin-left:calc((100% - 100vw + 8px)/2);margin-right:calc((100% - 100vw + 8px)/2)}}