/* Two gentle worlds, connected by a scroll through the clouds. */
:root { --ink: #55486b; --soft-ink: #847591; --lavender: #a38ac9; }
/* Native snapping keeps the cloud journey on the document's normal scroll path.
   Oversized sections remain freely scrollable between their own edges. */
html { scroll-padding-top: 0; scroll-snap-type: y mandatory; }
.hero, .explore-section { scroll-snap-align: start; scroll-snap-stop: always; }
.footer { scroll-snap-align: end; }
body { background: #f7f4fc; }
/* One background spans both sections; no panel edge crosses the cloud field. */
main {
  max-width: none;
  padding: 0;
  background:
    radial-gradient(ellipse 65vw 65svh at 76% 39svh, #e7dcf888, transparent),
    radial-gradient(ellipse 57vw 65svh at 13% 76svh, #fff1cd77, transparent),
    radial-gradient(ellipse 55vw 85svh at 96% 155svh, #d7eafb88, transparent),
    radial-gradient(ellipse 52vw 90svh at 3% 170svh, #e9ddfc66, transparent),
    linear-gradient(180deg, #faf7ff, #f5f1fc 90svh, #f7f5fc 170svh);
}
.page-decoration { display: none; }
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 4; max-width: 1400px; padding: 26px 56px; }
.header nav { margin-left: 0; gap: 7px; }
.header-note { color: #95859f; }
.nav-link { font-size: 12px; }
.hero { min-height: max(800px, 100svh); position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: center;  }
.hero-inner { width: min(1288px, 100%); margin: 0 auto; padding: 100px 64px 150px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; z-index: 2; gap: 24px; }
.hero-copy { padding-top: 20px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 27px; padding: 9px 15px; background: #ffffff80; border: 1px solid #fff; border-radius: 25px; color: #9680ad; letter-spacing: 2px; font-size: 11px; box-shadow: 0 4px 14px #a38ac908; }
.hero-eyebrow > span { color: #c1a4de; font-size: 13px; }
.hero h1 { font-size: clamp(34px, 3.35vw, 49px); line-height: 1.65; letter-spacing: 1px; color: var(--ink); white-space: nowrap; font-weight: 750; }
.hero h1 em { color: #9c80c3; }
.hero h1 em::after { bottom: -9px; height: 11px; border-top: 4px solid #d8c9ed; opacity: .7; transform: rotate(-3deg); }
.title-spark { position: absolute; font-style: normal; color: #e2c27e; top: -14px; right: -27px; font-size: 26px; text-shadow: 1px 2px #fff4cb; transform: rotate(12deg); }
.hero-description { font-size: 13px; line-height: 2.15; color: #8e809b; margin: 30px 0 27px; letter-spacing: .55px; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.explore-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(135deg, #b99bdc, #9675be); color: #fff; padding: 16px 23px; border-radius: 20px; font-size: 12px; letter-spacing: 1px; border: 1px solid #c7abe4; box-shadow: inset 0 2px 3px #e4d4f699, inset 0 -3px 5px #7e5d9e33, 0 9px 20px #9c7dbb29; transition: transform .2s, box-shadow .2s; }
.explore-button svg { width: 17px; height: 17px; }
.explore-button:hover { transform: translateY(-3px); box-shadow: inset 0 2px 3px #e4d4f699, 0 13px 24px #9c7dbb3d; }
.hero-about { padding: 10px 0; font-size: 12px; background: transparent; color: #93819f; }
.hero-about > span { margin-left: 9px; color: #b39cc6; }
.hero-about:hover { color: #70538f; }
.hero-values { display: flex; gap: 19px; margin-top: 31px; }
.hero-values > span { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: #9b8ba8; white-space: nowrap; }
.value-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 1px 1px 2px #fff9, 0 2px 3px #9d7caf20; }
.value-dot.lilac { background: #c4aedc; }.value-dot.cream { background: #e7cf91; }.value-dot.blue { background: #acc8dd; }
.hero-orbit { mask-image: linear-gradient(#000 65%, transparent); position: absolute; z-index: -1; border: 1px solid #c8b5e02e; border-radius: 50%; pointer-events: none; width: 1300px; height: 650px; left: 33%; top: 8%; transform: rotate(-32deg); }
.orbit-b { width: 1430px; height: 790px; top: 0; left: 29%; border-color: #c8b5e01c; }
.hero-art { height: 495px; position: relative; margin: 0 -15px 0 0; }
.art-caption { position: absolute; top: 17px; left: 92px; color: #b0a0c0; font-size: 7px; letter-spacing: 2.5px; transform: rotate(-7deg); }
.art-orbit { position: absolute; width: 480px; height: 370px; left: 9px; top: 78px; border: 1px dashed #c7b7dd7d; border-radius: 50%; transform: rotate(-24deg); }
.planet-scene { position: absolute; width: 480px; height: 435px; top: 40px; left: calc(50% - 240px); animation: world-float 7s ease-in-out infinite; }
.home-planet { position: absolute; height: 305px; width: 330px; left: 77px; top: 143px; border-radius: 48% 48% 49% 49%; background: radial-gradient(ellipse at 28% 22%, #e8ddf9, #cbb5e8 48%, #b399d2 77%, #a48bc7); box-shadow: inset 8px 8px 18px #f6eeffbb, inset -14px -16px 26px #8d6eb333, 9px 30px 39px #9d82b52a; transform: rotate(-12deg); overflow: hidden; }
.home-planet::before { content: ''; position: absolute; width: 130px; height: 45px; top: 42px; left: 37px; border-radius: 50%; background: #f4edfc3d; transform: rotate(-22deg); filter: blur(9px); }
.planet-spot { position: absolute; border-radius: 50%; background: #ad91cf40; box-shadow: inset 3px 4px 8px #8f72b027, 2px 3px 4px #f2e7fc55; }
.spot-a { width: 69px; height: 36px; top: 151px; left: 49px; transform: rotate(20deg); }
.spot-b { width: 36px; height: 20px; top: 199px; right: 65px; transform: rotate(-28deg); }
.spot-c { width: 25px; height: 16px; top: 117px; right: 52px; }
.planet-mark { position: absolute; top: 209px; left: 49px; font-size: 9px; letter-spacing: 4px; color: #f7effdcc; transform: rotate(12deg); }
.planet-ring { position: absolute; width: 470px; height: 155px; left: 5px; top: 221px; transform: rotate(-24deg); border: 17px solid #f8e6b3; border-radius: 50%; box-shadow: inset 1px 3px 4px #d2b77c47, 0 5px 0 #d6b8805e, 0 10px 14px #ad8eb71a; }
.ring-back { z-index: -1; }
.ring-front { clip-path: polygon(0 48%, 100% 48%, 100% 112%, 0 112%); z-index: 4; border-bottom-color: #fcecc6; }
.hero-bunny, .hero-bear { position: absolute; z-index: 3; width: 144px; height: 174px; top: 37px; left: 119px; transform: rotate(-8deg) scale(1.23); transform-origin: 50% 100%; }
.hero-bear { top: 62px; left: 263px; transform: rotate(9deg) scale(1.16); }
.hero-art .character { top: 0; bottom: auto; animation: none; }
.hero-bunny .arm-right { transform: rotate(-64deg); bottom: 57px; }
.hero-bear .arm-left { transform: rotate(55deg); bottom: 47px; }
.planet-cloud { position: absolute; width: 240px; height: auto; z-index: 5; filter: drop-shadow(0 8px 8px #b59cc116); }
.cloud-left { left: -56px; top: 281px; transform: rotate(-7deg); }
.cloud-right { width: 245px; right: -48px; top: 310px; transform: rotate(5deg); }
.toy-ball { position: absolute; border-radius: 50%; box-shadow: inset 3px 4px 7px #fff9, inset -4px -4px 7px #8d78ad21, 2px 10px 16px #a38ac923; animation: world-float 6s ease-in-out infinite; }
.toy-ball-blue { width: 39px; height: 39px; left: 17px; top: 179px; background: radial-gradient(circle at 28% 22%, #eaf5ff, #a6c8e3 80%); }
.toy-ball-cream { width: 20px; height: 20px; right: 30px; top: 307px; background: radial-gradient(circle at 28% 22%, #fff8d5, #e5c787); animation-delay: -3s; }
.art-star { position: absolute; color: #e9c776; text-shadow: 1px 2px #fff5cc, 3px 7px 12px #b9945c26; font-size: 51px; }
.star-a { left: 41px; top: 83px; transform: rotate(-16deg); }.star-b { right: 0; top: 214px; font-size: 34px; color: #bba0da; transform: rotate(12deg); }.star-c { left: 53px; bottom: 29px; font-size: 22px; color: #b69fcf; }
.mini-planet { position: absolute; right: 27px; top: 12px; transform: rotate(14deg); filter: drop-shadow(0 10px 9px #a98cb52a); }
.mini-planet svg { width: 82px; height: 82px; }
.art-note { position: absolute; z-index: 6; padding: 12px 17px; border: 1px solid #fff; border-radius: 18px; background: #ffffffc7; box-shadow: inset 0 2px 4px #fff, 0 10px 23px #a18bb218; color: #a08bb3; font-size: 10px; white-space: nowrap; letter-spacing: .5px; }
.art-note > span { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 5px; border-radius: 9px; background: #f1eafa; color: #b19acb; font-size: 16px; }
.note-hello { top: 94px; right: -17px; transform: rotate(7deg); }
.note-grow { bottom: 4px; left: 111px; transform: rotate(-5deg); color: #9c9f96; }
.note-grow > span { background: #fff5db; color: #ceb677; }
.scroll-invite { position: absolute; z-index: 3; left: 50%; bottom: 35px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 9px; letter-spacing: 2px; color: #a18ab6; white-space: nowrap; }
.scroll-mouse { width: 18px; height: 27px; border: 1px solid #c1a8d7; border-radius: 10px; display: flex; justify-content: center; padding-top: 5px; }
.scroll-mouse i { width: 3px; height: 6px; border-radius: 3px; background: #b196c7; animation: scroll-dot 2s ease-in-out infinite; }
.scroll-arrow { font-size: 16px; line-height: 1; }
.hero-coordinate { position: absolute; left: max(56px, calc((100% - 1280px)/2)); bottom: 44px; font-size: 8px; letter-spacing: 2px; color: #b4a3c3; z-index: 2; }
.cloud-flight { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; visibility: hidden; }
.explore-section { position: relative; isolation: isolate; padding: 65px 40px 14px;  scroll-margin-top: 0; }
.explore-section::before { content: ''; position: absolute; pointer-events: none; z-index: -1; width: 95%; height: 60%; top: 29%; left: 2%; border: 1px solid #d9d0ec50; border-radius: 50%; transform: rotate(-13deg); }
.explore-section:focus { outline: none; }
.explore-intro { text-align: center; position: relative; margin: 0 auto 47px; max-width: 1160px; }
.explore-intro .eyebrow { font-size: 8px; letter-spacing: 2.5px; }
.explore-intro h2 { margin: 0; font-size: clamp(27px, 2.6vw, 37px); color: #625072; letter-spacing: 2px; line-height: 1.6; }
.explore-intro h2 em { color: #a48ac7; font-style: normal; }
.explore-intro > p:last-of-type { font-size: 11px; line-height: 2; color: #9e8eac; letter-spacing: 1px; margin: 13px 0 0; }
.section-number { position: absolute; left: 0; top: 5px; font-size: 8px; letter-spacing: 1.5px; color: #b4a5c1; }
.mobile-break { display: none; }
.constellation { max-width: 1100px; }
.footer { padding: 23px 40px; max-width: none; background: #f7f5fc; margin: 0; }
@keyframes world-float { 50% { translate: 0 -9px; } }
@keyframes scroll-dot { 50% { transform: translateY(5px); opacity: .45; } }
@media (min-width: 1600px) { .hero-inner { gap: 70px; } .hero-art { transform: scale(1.08); } }
@media (max-width: 1150px) {
  .header { padding: 24px 34px; }.hero-inner { padding: 115px 45px 145px; gap: 8px; }.hero h1 { font-size: 37px; }.hero-art { transform: scale(.87); transform-origin: center; margin: 0 -25px; }.hero-values { gap: 13px; }.hero-actions { gap: 18px; }.hero-description { font-size: 12px; }.hero-values > span { font-size: 8px; }.hero-coordinate { left: 36px; }
}
@media (max-width: 900px) {
  .hero { min-height: max(1040px, 100svh); }.hero-inner { grid-template-columns: 1fr; text-align: center; padding: 126px 35px 144px; gap: 3px; }.hero-copy { padding: 0; }.hero h1 { font-size: 42px; line-height: 1.5; }.hero-eyebrow { margin-bottom: 21px; }.hero-description { margin: 25px 0 20px; }.hero-actions, .hero-values { justify-content: center; }.hero-values { margin-top: 24px; gap: 22px; }.hero-art { width: 520px; height: 440px; margin: -13px auto -20px; transform: scale(.87); transform-origin: center; }.hero-coordinate { bottom: 38px; }.section-number { position: static; display: block; margin-top: 18px; }.explore-section { padding-top: 48px; }
}
@media (max-width: 650px) {
  .header { padding: 20px 21px; }.header nav { gap: 0; }.nav-link { font-size: 10px; padding: 8px 10px; }.header .nav-link:first-child { display: none; }.hero { min-height: max(880px, 100svh); }.hero-inner { padding: 111px 22px 135px; gap: 0; }.hero-eyebrow { font-size: 9px; letter-spacing: 1.3px; padding: 8px 13px; margin-bottom: 20px; }.hero h1 { font-size: clamp(28px, 7.5vw, 40px); letter-spacing: .3px; line-height: 1.6; }.title-spark { font-size: 19px; right: -20px; top: -10px; }.hero h1 em::after { bottom: -7px; border-top-width: 3px; }.hero-description { font-size: 10px; line-height: 2.1; margin: 23px 0 22px; letter-spacing: .25px; }.hero-actions { gap: 20px; }.explore-button { font-size: 10px; padding: 14px 17px; gap: 12px; border-radius: 17px; }.hero-about { font-size: 10px; }.hero-values { margin-top: 22px; gap: 13px; }.hero-values > span { font-size: 7px; gap: 4px; }.value-dot { width: 6px; height: 6px; }.hero-art { width: 480px; height: 400px; left: 50%; margin: -11px 0 -60px -240px; transform: scale(.7); transform-origin: center 45%; }.art-caption { top: 13px; }.note-hello { right: -6px; }.note-grow { bottom: -42px; }.scroll-invite { bottom: 24px; font-size: 8px; letter-spacing: 1.5px; gap: 8px; }.scroll-mouse { width: 16px; height: 24px; }.hero-coordinate { display: none; }.explore-section { padding: 41px 22px 10px; }.explore-intro { margin-bottom: 32px; }.explore-intro h2 { font-size: clamp(23px, 6vw, 30px); letter-spacing: .5px; }.explore-intro > p:last-of-type { font-size: 10px; letter-spacing: .5px; }.mobile-break { display: block; }.explore-intro .eyebrow { font-size: 7px; }.section-number { font-size: 7px; }.footer { padding: 20px 23px; }.hero-orbit { width: 900px; height: 620px; left: -70%; top: 35%; }.orbit-b { top: 29%; }
  .constellation { gap: 35px; }.parents-column { order: 1; }.library-column { order: 2; }
}
@media (max-width: 360px) {
  .header { padding: 18px 16px; }.nav-link { padding: 8px; font-size: 9px; }.hero-inner { padding-left: 16px; padding-right: 16px; }.hero h1 { font-size: 27px; }.hero-art { transform: scale(.61); margin-top: -31px; margin-bottom: -69px; }.hero-values { gap: 9px; }.hero-values > span { font-size: 6.5px; }.hero { min-height: max(820px, 100svh); }.explore-section { padding-left: 18px; padding-right: 18px; }.title-spark { right: -17px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .planet-scene, .toy-ball, .scroll-mouse i { animation: none; }.cloud-flight { display: none; }}
/* Keep decorative orbits inside their own section. */
body { overflow-x: clip; }
.explore-section { overflow: clip; }
.note-hello { top: 59px; }
@media (max-width: 650px) {
  .hero { min-height: max(800px, 100svh); }
  .hero-art { transform: scale(.65); transform-origin: center top; margin-top: -3px; margin-bottom: -130px; }
}
@media (max-width: 360px) {
  .hero { min-height: max(780px, 100svh); }
  .hero-art { transform: scale(.58); margin-top: -20px; margin-bottom: -160px; }
}
@media (min-width: 651px) and (max-width: 900px) {
  .hero-inner { padding-bottom: 110px; }
}
@media (max-width: 650px) {
  .hero-art .art-caption { display: none; }
}
/* Volumetric textures keep the small scene and the scroll flight consistent. */
html { scroll-padding-top: 0; }
.planet-cloud { width: 270px; filter: none; }
.cloud-left { top: 261px; left: -64px; }
.cloud-right { width: 280px; top: 287px; right: -67px; }