/* Product introduction and interactive artwork have separate, explicit bounds. */
.hero{display:flex;flex-direction:column;align-items:stretch;position:relative;isolation:isolate;min-height:0;height:auto;max-height:none;padding:48px var(--gutter) 70px;overflow:clip}
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;row-gap:18px;position:relative;z-index:3;width:100%;max-width:none;text-align:left;pointer-events:none}
.hero h1{grid-column:1;margin:0;font-size:clamp(38px,4.2vw,66px);font-weight:500;line-height:1.07;letter-spacing:-.055em}
.hero h1 em{font-family:var(--display);font-size:1em;font-style:normal;font-weight:400;line-height:inherit;letter-spacing:inherit;color:#bac4ce}
.hero-description{grid-column:1;max-width:560px;margin:0;font-size:15px;line-height:1.7;color:#b9c0c7}
.hero-actions{grid-column:2;grid-row:1/3;align-self:center;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
.hero-actions .button{min-height:50px;padding:14px 22px;font-size:14px;gap:24px;border-radius:14px;pointer-events:auto}
.hero-actions .text-link{font-size:13px;pointer-events:auto}
.hero-copy>.fine{grid-column:1/-1;max-width:none;margin:0;font-size:11px;color:#99a2ad}
.hero-visual{position:relative;order:initial;top:auto;bottom:auto;left:auto;right:auto;z-index:1;width:calc(100% + 2 * var(--gutter));height:clamp(580px,57vw,900px);min-height:580px;max-height:none;margin:4px calc(-1 * var(--gutter)) 0;opacity:1;overflow:hidden;mask-image:none;background:none}
#roulette-scene{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-bottom{position:absolute;z-index:4;bottom:22px;left:var(--gutter);right:var(--gutter);font-size:10px;letter-spacing:1px}
.hero .scene-label,.hero .scene-orbit{display:none}
@media(max-width:800px){
 .hero{padding-top:32px;padding-bottom:64px}
 .hero-copy{display:flex;flex-direction:column;gap:18px;width:100%;max-width:none}
 .hero h1{font-size:clamp(34px,6.4vw,50px);margin:0}
 .hero-description{font-size:14px;max-width:540px;margin:0}
 .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center;align-self:flex-start;gap:14px;margin:0}
 .hero-visual{height:420px;min-height:420px;margin-top:24px}
}
@media(max-width:480px){
 .hero-copy>h1,.hero-description,.hero-actions,.hero-copy>.fine{order:initial}
 .hero h1{font-size:34px;line-height:1.1}
 .hero-actions .button{font-size:13px;padding:13px 17px;min-height:48px}
 .hero-actions .text-link{font-size:12px}
 .hero-visual{height:340px;min-height:340px;margin-top:20px}
 .hero-bottom{bottom:17px;font-size:9px;letter-spacing:.7px}
 .scroll-line{height:24px}
}
/* The moving stellar field lives behind readable content, never over controls. */
body{background:#080d12}
#main{position:relative;z-index:2}
.site-footer{position:relative;z-index:2}
.stellar-reassembly{height:420px;position:relative;pointer-events:none;margin:0 auto;max-width:1100px}
@media(max-width:700px){.stellar-reassembly{height:300px}}

.hero-visual,.stellar-reassembly{pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none}
.hero-visual:active,.stellar-reassembly:active{cursor:grabbing}
.hero-visual:focus-visible,.stellar-reassembly:focus-visible{outline:1px solid #a6c4d677;outline-offset:-8px}
.scene-drag-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-size:12px;color:#a4aebc;pointer-events:none;letter-spacing:.3px}
#scene-reset{order:2;margin-left:auto;width:40px;height:40px;flex:0 0 40px;border:1px solid #a6c4d633;border-radius:50%;background:#101a22;color:#dbe5eb;font-size:24px;line-height:1;cursor:pointer}
.hero-bottom .motion-control{order:3;margin-left:0}
@media(max-width:480px){.scene-drag-hint{bottom:20px;font-size:11px}.hero-bottom{gap:8px}#scene-reset{width:36px;height:36px;flex-basis:36px}.hero-bottom .motion-control{font-size:10px;padding:8px 10px}.hero-bottom .scroll-cue{font-size:8px;gap:8px}}


/* Tighter reading rhythm without a full empty screen between tools and library. */
.section-shell{padding-top:90px;padding-bottom:90px}.experience-step{min-height:210px;padding:30px 0}.stellar-reassembly{height:280px}.oracle{padding-top:64px;padding-bottom:64px}.section-description{max-width:340px}.tool p{color:#adb6c1}@media(max-width:800px){.section-shell{padding-top:60px;padding-bottom:60px}.stellar-reassembly{height:220px}.experience-step{min-height:0}}

/* More room for the opening roulette; scoped to the hero only. */
@media(min-width:801px){
 .hero{padding-top:34px}
 .hero-copy{grid-template-columns:minmax(0,1fr);row-gap:20px;align-items:start}
 .hero-description{grid-column:1;grid-row:2;max-width:560px;justify-self:start;margin:0}
 .hero-visual{height:clamp(700px,70vw,1120px);min-height:700px;margin-top:-60px}
}
@media(max-width:480px){.hero-visual{height:390px;min-height:390px;margin-top:8px}}

/* Fit the entire opening artwork to the available viewport, including its tails. */
.galaxy-view-controls{position:fixed;left:20px;bottom:75px;z-index:30;width:230px;color:#dce6ef;font:12px/1.5 Arial,sans-serif;background:#101a23ed;border:1px solid #728da455;border-radius:12px;backdrop-filter:blur(14px)}
.galaxy-view-controls summary{padding:11px 14px;cursor:pointer;list-style-position:inside}
.galaxy-view-panel{padding:0 14px 14px;display:grid;gap:9px}
.galaxy-view-panel p{margin:0;color:#aebecd}
.galaxy-view-panel label{display:block}.galaxy-view-panel input{display:block;width:100%;accent-color:#d9b575}.galaxy-view-panel output{float:right}
.galaxy-view-panel button{padding:8px;background:#d5b576;color:#101820;border:0;border-radius:6px;cursor:pointer}.galaxy-view-panel button+button{background:#263747;color:#e2e8ef}
.galaxy-view-panel textarea{width:100%;min-height:54px;background:#080f16;color:#c7d6e4;border:1px solid #5c758d66;font-size:10px;resize:vertical}.galaxy-view-panel [role=status]{color:#b5cfbc;font-size:11px}
@media(max-width:700px){.galaxy-view-controls{left:10px;bottom:12px;width:210px;max-height:70svh;overflow:auto}.galaxy-view-controls summary{padding:8px 12px}}
@media(min-width:801px){
 .hero{height:calc(100svh - 102px);min-height:520px;padding-bottom:60px}
 .hero-copy{max-width:590px}
 .hero-visual{position:absolute;left:0;top:40px;width:100%;height:calc(100% - 90px);min-height:0;margin:0;overflow:visible}
 .hero .scene-drag-hint{bottom:0}
}
@media(min-width:801px) and (max-height:800px){
 .hero{padding-top:20px;min-height:450px}
 .hero h1{font-size:clamp(34px,3.4vw,52px)}
 .hero-copy{row-gap:12px;max-width:510px}
 .hero-description{font-size:13px;max-width:460px}
 .hero-visual{top:30px;height:calc(100% - 85px)}
}

/* Opening copy respects the user's fixed roulette framing. */
.site-header{padding-left:clamp(22px,2.4vw,46px);padding-right:clamp(22px,2.4vw,46px)}
.hero{padding-left:clamp(22px,2.4vw,46px);padding-right:clamp(22px,2.4vw,46px)}
.hero-bottom{left:clamp(22px,2.4vw,46px);right:clamp(22px,2.4vw,46px)}
@media(min-width:801px){
 .hero{padding-top:20px}
 .hero-copy{max-width:540px;row-gap:12px}
 .hero h1{font-size:clamp(36px,3.6vw,64px)}
 .hero-description{max-width:290px;font-size:13px;line-height:1.6}
}
@media(max-width:800px){.hero-visual{width:calc(100% + 2 * clamp(22px,2.4vw,46px));margin-left:calc(-1 * clamp(22px,2.4vw,46px));margin-right:calc(-1 * clamp(22px,2.4vw,46px))}}

/* Let the opening sky continue through the header. */
.site-header{border-bottom:0;box-shadow:none}

.galaxy-view-controls{max-height:calc(100svh - 100px);overflow:auto}

/* Dark central space framed by a restrained, uneven atmospheric glow. */
body{
 background-image:
  radial-gradient(ellipse at 50% 57%,rgba(2,5,8,.97) 0%,rgba(3,6,10,.90) 19%,rgba(4,8,13,.57) 33%,transparent 55%),
  radial-gradient(ellipse at 57% 55%,transparent 15%,rgba(36,60,80,.30) 43%,rgba(22,39,56,.12) 61%,transparent 79%),
  radial-gradient(ellipse at 78% 34%,rgba(108,78,49,.12) 0%,transparent 48%),
  radial-gradient(ellipse at 24% 68%,rgba(55,47,80,.20) 0%,transparent 55%);
 background-size:100% 100svh;
 background-repeat:no-repeat;
}