:root{
  --bg:#070918;--panel:rgba(255,255,255,.075);--panel2:rgba(255,255,255,.12);--line:rgba(255,255,255,.15);
  --text:#fbfaff;--muted:#bbb8ce;--accent:#cbff65;--accent2:#7ae5ff;--accent3:#aa94ff;--peach:#ffa58e;
  --display:"Space Grotesk",system-ui,sans-serif;--body:"DM Sans",system-ui,sans-serif
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
body{margin:0;overflow-x:hidden;color:var(--text);background:var(--bg);font-family:var(--body)}
body[data-era="alpha"],body[data-era="beta"]{--accent:#85ffb2;--accent2:#7ae5ff;--accent3:#aa94ff}
body[data-era="z"]{--accent:#cbff65;--accent2:#7ae5ff;--accent3:#aa94ff}
body[data-era="millennial"]{--accent:#ffc76b;--accent2:#ff9f87;--accent3:#aa94ff}
body[data-era="x"]{--accent:#72e4ff;--accent2:#a991ff;--accent3:#ff9f87}
body[data-era="boomer"],body[data-era="silent"],body[data-era="greatest"]{--accent:#ffd47a;--accent2:#9ed7ff;--accent3:#ffad9b}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.scene{position:fixed;inset:0;z-index:-5;overflow:hidden;background:
radial-gradient(circle at 10% 9%,rgba(170,148,255,.18),transparent 24rem),
radial-gradient(circle at 88% 25%,rgba(122,229,255,.13),transparent 26rem),
radial-gradient(circle at 45% 78%,rgba(255,165,142,.1),transparent 24rem),
linear-gradient(180deg,#060713,#090b1b 48%,#090a17)}
.bg-layer{position:absolute;will-change:transform}
.grid{inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,#000 20%,transparent 90%)}
.stars{inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.9) 1px,transparent 1.2px),
radial-gradient(circle at 70% 18%,rgba(255,255,255,.7) 1px,transparent 1.2px),
radial-gradient(circle at 80% 70%,rgba(255,255,255,.8) 1px,transparent 1.2px),
radial-gradient(circle at 35% 60%,rgba(255,255,255,.7) 1px,transparent 1.2px),
radial-gradient(circle at 55% 85%,rgba(255,255,255,.65) 1px,transparent 1.2px),
radial-gradient(circle at 8% 70%,rgba(255,255,255,.6) 1px,transparent 1.2px),
radial-gradient(circle at 92% 42%,rgba(255,255,255,.65) 1px,transparent 1.2px)}
.cloud{border-radius:50%;filter:blur(70px);opacity:.33}
.cloud-a{width:420px;height:420px;left:-90px;top:6vh;background:rgba(170,148,255,.28)}
.cloud-b{width:340px;height:340px;right:-90px;top:28vh;background:rgba(122,229,255,.18)}
.cloud-c{width:520px;height:520px;left:28%;bottom:-200px;background:rgba(255,165,142,.12)}
.float-sphere{border-radius:50%;border:1px solid rgba(255,255,255,.15);box-shadow:0 0 36px rgba(255,255,255,.08) inset, 0 18px 22px rgba(0,0,0,.2)}
.sphere-a{width:160px;height:160px;left:5vw;top:60vh;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.04))}
.sphere-b{width:90px;height:90px;right:12vw;top:18vh;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.sphere-c{width:120px;height:120px;right:6vw;bottom:14vh;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.cursor-glow{position:fixed;width:19rem;height:19rem;border-radius:50%;z-index:-1;pointer-events:none;opacity:.13;background:var(--accent3);filter:blur(72px);transform:translate(-50%,-50%)}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:20;background:rgba(255,255,255,.06)}
.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3))}
.site-header,main,footer{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.brand{display:flex;align-items:center;gap:10px;font:700 1.12rem var(--display);letter-spacing:-.05em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#111320;background:var(--accent);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 35%,transparent)}
.back-link{color:var(--muted);font-size:.9rem;transition:.2s}.back-link:hover{color:var(--accent)}
.eyebrow{margin:0 0 12px;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display)}
h1{margin:0;font-size:clamp(4rem,8vw,7.5rem);line-height:.91;letter-spacing:-.1em}
h1 span,h2 span{color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text}
h2{margin:0;font-size:clamp(2.55rem,5vw,4.65rem);line-height:.98;letter-spacing:-.085em}
.snap-section{min-height:100svh;scroll-snap-align:start;display:grid;align-content:center}
.intro{grid-template-columns:1.05fr .95fr;gap:45px;align-items:center;padding:62px 0 80px}
.intro-text{max-width:680px;color:var(--muted);font-size:1.1rem;line-height:1.75}
.swipe-tip{margin-top:14px;color:var(--muted);font-size:.82rem}
.date-card{max-width:680px;margin-top:30px;padding:18px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.075);backdrop-filter:blur(16px)}
.date-card label{display:block;margin-bottom:11px;color:var(--text);font-weight:700}
.form-row{display:flex;gap:10px}.form-row input{min-width:0;flex:1;padding:14px;border:1px solid rgba(255,255,255,.18);border-radius:14px;color:var(--text);background:rgba(4,7,20,.72);font:inherit;color-scheme:dark}
button,.restart-button{border:0;cursor:pointer;font:700 .9rem var(--body)}
.form-row button,.restart-button{display:inline-flex;align-items:center;gap:10px;padding:14px 17px;border-radius:14px;color:#111320;background:var(--accent);transition:.2s}
.form-row button:hover,.restart-button:hover{transform:translateY(-2px);box-shadow:0 14px 28px color-mix(in srgb,var(--accent) 20%,transparent)}
.privacy-note,.form-error,.source-note{margin:11px 0 0;color:var(--muted);font-size:.78rem;line-height:1.55}.form-error{color:#ffad9b}
.hero-art{position:relative;width:min(100%,480px);aspect-ratio:1;margin-inline:auto;animation:float 7s ease-in-out infinite}
.orbit,.mini-planet,.cube,.calendar-planet{position:absolute}
.orbit{border:1px solid rgba(255,255,255,.18);border-radius:50%}.orbit-a{inset:8%}.orbit-b{inset:18%;transform:rotate(61deg) scaleY(.54)}.orbit-c{inset:0;transform:rotate(-30deg) scaleY(.74)}
.calendar-planet{inset:29%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:34%;background:linear-gradient(145deg,#d9d0ff,#836de4 56%,#3f326f);box-shadow:0 28px 45px rgba(0,0,0,.3),0 0 70px rgba(170,148,255,.28);transform:rotate(-8deg)}
.calendar-ridge{position:absolute;top:0;left:0;right:0;height:22%;border-radius:32% 32% 8px 8px;background:rgba(255,255,255,.2)}.calendar-month,.calendar-caption{z-index:1;font-size:.65rem;font-weight:700;letter-spacing:.2em}.calendar-month{margin-top:11px}.calendar-caption{color:rgba(255,255,255,.72)}.calendar-planet strong{z-index:1;margin:-1px 0 -4px;font:700 5rem var(--display)}
.mini-planet{width:22px;height:22px;border-radius:50%;box-shadow:0 0 20px currentColor}.mini-one{top:10%;left:54%;color:var(--accent);background:var(--accent);animation:mini1 8s linear infinite}.mini-two{bottom:17%;left:13%;color:var(--accent2);background:var(--accent2);animation:mini2 9s linear infinite}.mini-three{right:8%;top:50%;color:var(--peach);background:var(--peach);animation:mini3 7s linear infinite}
.cube{display:grid;place-items:center;width:72px;height:72px;border:1px solid rgba(255,255,255,.22);border-radius:18px;color:var(--accent);background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06));font:700 1.18rem var(--display);box-shadow:0 19px 25px rgba(0,0,0,.22)}.cube-one{top:4%;right:2%;transform:rotate(12deg)}.cube-two{bottom:6%;right:8%;transform:rotate(-14deg)}
.results{display:grid}
.section-reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.section-reveal.visible{opacity:1;transform:none}
.reveal-panel,.story-panel,.generation-panel,.birthday-panel,.estimate-panel,.habit-panel,.share-panel,.method-panel{position:relative;padding:32px;border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.07);backdrop-filter:blur(16px);overflow:hidden}
.opening-panel{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(140deg,rgba(170,148,255,.2),rgba(122,229,255,.05))}.opening-panel h2{max-width:880px}.opening-panel>p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:1.08rem;line-height:1.7}
.micro-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.micro-grid div{display:flex;flex-direction:column;min-width:150px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.12)}.micro-grid strong{font:700 1.55rem var(--display);color:var(--accent)}.micro-grid span{color:var(--muted);font-size:.77rem}
.orbital-graphic{position:absolute;right:-30px;bottom:-65px;width:300px;height:300px;opacity:.7}.big-orb,.ring,.satellite{position:absolute}.big-orb{inset:31%;border-radius:50%;background:radial-gradient(circle at 30% 20%,#d9d0ff,#7860d8);box-shadow:0 0 40px rgba(170,148,255,.35)}.ring{border:1px solid rgba(255,255,255,.25);border-radius:50%}.ring-one{inset:16%;transform:rotate(22deg) scaleY(.53)}.ring-two{inset:5%;transform:rotate(-35deg) scaleY(.67)}.satellite{top:16%;right:17%;width:19px;height:19px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}
.story-panel{display:none;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;background:linear-gradient(135deg,rgba(133,255,178,.15),rgba(122,229,255,.07))}.story-panel.show{display:grid}.story-panel p:not(.eyebrow){color:var(--muted);line-height:1.7}.progress-shell{margin-top:26px}.progress-label{display:flex;justify-content:space-between;gap:20px;margin-bottom:9px;color:var(--muted);font-size:.88rem}.progress-label strong{color:var(--accent)}.progress-track{height:12px;border-radius:99px;background:rgba(0,0,0,.22);overflow:hidden}.progress-track span{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1s ease}
.stacked-art{position:relative;width:240px;height:210px;margin-inline:auto}.soft-cube{position:absolute;display:grid;place-items:center;width:112px;height:112px;border:1px solid rgba(255,255,255,.24);border-radius:28px;font-size:2.6rem;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07));box-shadow:0 22px 30px rgba(0,0,0,.2)}.c1{left:10px;top:54px;transform:rotate(-13deg)}.c2{right:5px;top:12px;transform:rotate(14deg)}.c3{right:44px;bottom:-7px;transform:rotate(-4deg)}
.section-heading{max-width:760px;margin-bottom:28px}.section-heading>p:last-child{color:var(--muted);line-height:1.7}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric-card{display:flex;flex-direction:column;min-height:195px;padding:18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.065);transition:.22s}.metric-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 52%,transparent);background:rgba(255,255,255,.1)}.metric-card .tag{align-self:start;padding:6px 8px;border:1px solid rgba(255,255,255,.15);border-radius:99px;color:var(--muted);font-size:.58rem;font-weight:700;letter-spacing:.12em}.metric-card strong{margin-top:auto;color:var(--accent);font:700 clamp(2rem,4vw,3.6rem) var(--display);letter-spacing:-.09em}.metric-card p{margin:5px 0 0;color:var(--muted)}
.generation-panel,.birthday-panel,.habit-panel,.share-panel{display:grid;grid-template-columns:1.14fr .86fr;gap:30px;align-items:center}.generation-panel{background:linear-gradient(145deg,color-mix(in srgb,var(--accent3) 19%,transparent),rgba(255,255,255,.06))}.generation-copy p{color:var(--muted);line-height:1.7}.generation-copy small{display:block;color:var(--muted);line-height:1.5}.era-art{position:relative;width:270px;height:240px;margin-inline:auto}.era-disc{position:absolute;inset:18%;border-radius:50%;background:linear-gradient(145deg,var(--accent2),var(--accent3));box-shadow:0 25px 35px rgba(0,0,0,.25),0 0 45px color-mix(in srgb,var(--accent3) 35%,transparent)}.era-tile{position:absolute;width:70px;height:70px;border:1px solid rgba(255,255,255,.28);border-radius:20px;background:rgba(255,255,255,.13);box-shadow:0 18px 22px rgba(0,0,0,.18);backdrop-filter:blur(12px)}.tile-1{left:4px;top:18px;transform:rotate(-14deg)}.tile-2{right:4px;top:50px;transform:rotate(16deg)}.tile-3{left:54px;bottom:0;transform:rotate(8deg)}.era-label{position:absolute;inset:42% 17%;display:grid;place-items:center;color:#121326;font:700 2rem var(--display);letter-spacing:-.08em}
.birthday-panel{background:linear-gradient(145deg,rgba(255,165,142,.14),rgba(255,255,255,.06))}.birthday-art{position:relative;width:270px;height:245px;margin:auto}.cake-base,.cake-top,.candle,.flame,.sprinkle{position:absolute}.cake-base{left:36px;right:36px;bottom:27px;height:98px;border-radius:22px 22px 28px 28px;background:linear-gradient(145deg,#b09dff,#6650c5);box-shadow:0 25px 30px rgba(0,0,0,.23)}.cake-top{left:27px;right:27px;bottom:105px;height:38px;border-radius:50%;background:#d8ceff}.candle{left:calc(50% - 8px);top:37px;width:16px;height:74px;border-radius:8px;background:repeating-linear-gradient(45deg,#fff 0 8px,var(--peach) 8px 16px)}.flame{left:calc(50% - 12px);top:2px;width:24px;height:36px;border-radius:70% 35% 70% 35%;background:linear-gradient(#fff6a8,#ffad52);transform:rotate(45deg);box-shadow:0 0 24px #ffce72}.sprinkle{width:9px;height:4px;border-radius:8px;background:var(--accent)}.s1{left:62px;bottom:74px;transform:rotate(22deg)}.s2{left:111px;bottom:57px;transform:rotate(-30deg)}.s3{right:58px;bottom:83px;transform:rotate(40deg)}.s4{right:92px;bottom:50px;transform:rotate(-15deg)}
.history-card{margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:20px;background:rgba(0,0,0,.14)}.history-card strong{color:var(--accent);font:700 2rem var(--display)}.history-card p{color:var(--muted);line-height:1.65}.history-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.history-actions a{color:var(--accent);font-size:.84rem;font-weight:700}.history-actions button{padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:rgba(255,255,255,.08)}.history-actions button:hover{border-color:var(--accent)}
.estimate-panel{padding:32px}.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.lab-card{padding:18px;border:1px solid var(--line);border-radius:21px;background:rgba(0,0,0,.13)}.lab-card label{display:block;min-height:48px;color:var(--muted);font-size:.92rem;line-height:1.45}.lab-card label strong{display:block;color:var(--text)}
input[type="range"]{width:100%;accent-color:var(--accent)}
.lab-result{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:22px;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03)}
.lab-result strong{color:var(--accent);font:700 clamp(2rem,4vw,3.1rem) var(--display);letter-spacing:-.08em;line-height:1}
.result-copy{display:flex;flex-direction:column;gap:5px}
.result-main{color:var(--text);font-weight:700}
.result-sub,.lab-card small{color:var(--muted);font-size:.78rem;line-height:1.45}
.habit-panel p:not(.eyebrow){color:var(--muted);line-height:1.7}.habit-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}.habit-controls select{padding:11px 12px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:#15182a;font:inherit}.habit-controls input{flex:1;min-width:190px}.habit-sentence strong{color:var(--accent)}.habit-art{position:relative;width:270px;height:230px;margin:auto}.book{position:absolute;left:34px;width:190px;height:43px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:linear-gradient(145deg,var(--accent2),#587ec8);box-shadow:0 18px 22px rgba(0,0,0,.18)}.b1{bottom:20px;transform:rotate(-2deg)}.b2{bottom:61px;left:47px;background:linear-gradient(145deg,var(--peach),#cb6e9f);transform:rotate(3deg)}.b3{bottom:104px;left:30px;background:linear-gradient(145deg,var(--accent),#79b169);transform:rotate(-4deg)}.b4{bottom:145px;left:43px;background:linear-gradient(145deg,var(--accent3),#7157bc);transform:rotate(2deg)}.spark{position:absolute;color:var(--accent);font-size:1.8rem}.sp1{right:5px;top:15px}.sp2{left:0;top:70px;font-size:1.1rem}
.share-panel{background:linear-gradient(145deg,rgba(203,255,101,.12),rgba(122,229,255,.06))}.share-panel>div>p:not(.eyebrow){color:var(--muted);line-height:1.7}.share-card{padding:20px;border:1px solid rgba(255,255,255,.2);border-radius:23px;background:rgba(6,8,20,.6);box-shadow:0 25px 34px rgba(0,0,0,.2)}.share-brand{display:flex;align-items:center;gap:9px;font-family:var(--display)}.share-card h3{margin:23px 0 12px;color:var(--accent);font-size:.78rem;letter-spacing:.18em}.share-card p{display:grid;grid-template-columns:1fr auto;gap:14px;margin:8px 0;color:var(--muted);font-size:.88rem}.share-card p strong{color:var(--text)}.share-card button{width:100%;margin-top:16px;padding:12px;border-radius:12px;color:#111320;background:var(--accent)}.copy-status{display:block;min-height:19px;margin-top:8px;color:var(--accent);font-size:.78rem}
.method-panel details{padding:2px}.method-panel summary{cursor:pointer;color:var(--text);font:700 1.1rem var(--display)}.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}.method-grid p{margin:0;padding:14px;border:1px solid var(--line);border-radius:15px;color:var(--muted);font-size:.88rem;line-height:1.6}.method-grid strong{color:var(--text)}
.restart-panel{padding:40px 0 60px}.restart-inner{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;min-height:70svh}.restart-inner h2{margin:0;max-width:760px}
footer{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;padding:26px 0 32px;border-top:1px solid var(--line);color:var(--muted);font-size:.83rem}footer p{margin:0}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-15px) rotate(1deg)}}
@keyframes mini1{0%,100%{transform:translate(-30px,0)}50%{transform:translate(-180px,170px) scale(.72)}}
@keyframes mini2{0%,100%{transform:translate(0,0)}50%{transform:translate(278px,-70px) scale(1.35)}}
@keyframes mini3{0%,100%{transform:translate(0,0)}50%{transform:translate(-210px,-145px) scale(.72)}}
@media(max-width:900px){
  .intro{grid-template-columns:1fr;gap:32px;padding-top:95px}
  .hero-art{width:min(84vw,460px)}
  .generation-panel,.birthday-panel,.habit-panel,.share-panel{grid-template-columns:1fr}
  .lab-grid,.metric-grid{grid-template-columns:repeat(2,1fr)}
  footer{grid-template-columns:1fr}
  .orbital-graphic{opacity:.35}
}
@media(max-width:560px){
  html{scroll-snap-type:y proximity}
  .site-header,main,footer{width:min(100% - 26px,1160px)}
  .back-link{font-size:.77rem}.intro{padding-top:76px;padding-bottom:86px}
  h1{font-size:clamp(4rem,18vw,5.9rem)}.intro-text{font-size:1rem}
  .form-row{flex-direction:column}.hero-art{width:98vw;margin-left:-8vw}
  .reveal-panel,.story-panel,.generation-panel,.birthday-panel,.estimate-panel,.habit-panel,.share-panel,.method-panel{padding:21px}
  .micro-grid div{min-width:calc(50% - 8px)}
  .metric-grid,.lab-grid,.method-grid{grid-template-columns:1fr}
  .story-panel.show{grid-template-columns:1fr}
  .stacked-art{transform:scale(.85)}
  .lab-result{grid-template-columns:1fr}
  .restart-inner{min-height:55svh}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* -------------------------------------------------
   V4 refinements: richer 3D background and stable UI
-------------------------------------------------- */
.scene{perspective:1000px}
.orbit-ribbon{
  width:720px;height:240px;border:1px solid rgba(255,255,255,.13);border-radius:50%;
  filter:drop-shadow(0 0 18px rgba(122,229,255,.08));opacity:.65
}
.ribbon-a{left:-180px;top:26vh;transform:rotate(26deg) rotateX(62deg);animation:ribbonDriftA 18s ease-in-out infinite}
.ribbon-b{right:-230px;bottom:11vh;transform:rotate(-22deg) rotateX(66deg);animation:ribbonDriftB 22s ease-in-out infinite}
.bg-cube{width:92px;height:92px;transform-style:preserve-3d;opacity:.48;animation:cubeFloat 15s ease-in-out infinite}
.bg-cube i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.17);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025))}
.bg-cube i:nth-child(1){transform:translateZ(24px)}
.bg-cube i:nth-child(2){transform:rotateY(90deg) translateZ(24px)}
.bg-cube i:nth-child(3){transform:rotateX(90deg) translateZ(24px)}
.bg-cube-a{left:14vw;top:28vh;transform:rotateX(58deg) rotateY(22deg) rotateZ(-12deg)}
.bg-cube-b{right:17vw;top:56vh;transform:rotateX(42deg) rotateY(-31deg) rotateZ(16deg);animation-delay:-5s}
.bg-cube-c{left:46vw;bottom:8vh;width:64px;height:64px;transform:rotateX(35deg) rotateY(45deg) rotateZ(8deg);animation-delay:-9s}
.constellation{opacity:.55}
.constellation span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 14px var(--accent2);animation:twinkle 3.2s ease-in-out infinite}
.constellation span::after{content:"";position:absolute;left:4px;top:3px;width:80px;height:1px;background:linear-gradient(90deg,rgba(122,229,255,.42),transparent);transform-origin:left center}
.constellation-a{right:19vw;top:14vh}.constellation-b{left:11vw;bottom:20vh}
.constellation span:nth-child(2){transform:translate(82px,42px);animation-delay:-.9s}
.constellation span:nth-child(3){transform:translate(166px,-8px);animation-delay:-1.7s}
.constellation span:nth-child(4){transform:translate(230px,52px);animation-delay:-2.4s}

.section-reveal{
  opacity:0;
  transform:translateY(70px) rotateX(5deg) scale(.975);
  filter:blur(7px);
  transition:opacity .82s ease,transform .82s cubic-bezier(.2,.82,.2,1),filter .82s ease,box-shadow .82s ease
}
.section-reveal.visible{
  opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0);
  box-shadow:0 28px 50px rgba(0,0,0,.15)
}
.section-reveal.visible .eyebrow{animation:labelPop .6s .18s both}
.section-reveal.visible h2{animation:titleLift .72s .12s both}

.lab-grid{align-items:stretch}
.lab-card{
  min-width:0;
  overflow:hidden;
  contain:layout paint;
  transform:translateZ(0)
}
.lab-card label{min-height:54px}
.lab-card label strong,.lab-result strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.lab-card input[type="range"]{
  display:block;
  width:100%;
  height:26px;
  margin:7px 0 0;
  flex:none;
  transform:translateZ(0);
  touch-action:pan-y
}
.lab-result{
  display:block;
  min-height:154px;
  margin-top:18px;
  overflow:hidden;
  contain:layout paint;
}
.lab-result strong{
  display:block;
  min-height:58px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:clamp(1.9rem,3.1vw,2.75rem)
}
.result-copy{min-height:58px}
.result-main{font-size:.9rem}
.result-sub{display:block;max-width:32ch}

.story-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}
.story-modal-backdrop{position:absolute;inset:0;background:rgba(2,4,14,.8);backdrop-filter:blur(12px)}
.story-modal-panel{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,340px);
  gap:26px;align-items:center;width:min(940px,100%);max-height:92svh;overflow:auto;padding:24px;
  border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,#14172e,#090b1c);
  box-shadow:0 34px 70px rgba(0,0,0,.48)
}
.story-modal-panel h2{font-size:clamp(2.3rem,5vw,4rem)}
.modal-copy,.modal-status{color:var(--muted);line-height:1.65}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.modal-actions button{padding:12px 15px;border-radius:12px;color:#101323;background:var(--accent)}
.modal-actions .secondary-action{color:var(--text);background:rgba(255,255,255,.09);border:1px solid var(--line)}
.modal-close{position:absolute;right:15px;top:12px;width:38px;height:38px;border-radius:50%;color:var(--text);background:rgba(255,255,255,.08);font-size:1.5rem}
.story-preview-shell{display:grid;place-items:center;padding:10px;border:1px solid var(--line);border-radius:22px;background:rgba(0,0,0,.22)}
.story-preview-shell img{display:block;width:100%;max-height:76svh;object-fit:contain;border-radius:14px}

@keyframes ribbonDriftA{0%,100%{transform:translate3d(0,0,0) rotate(26deg) rotateX(62deg)}50%{transform:translate3d(70px,-45px,0) rotate(35deg) rotateX(58deg)}}
@keyframes ribbonDriftB{0%,100%{transform:translate3d(0,0,0) rotate(-22deg) rotateX(66deg)}50%{transform:translate3d(-65px,48px,0) rotate(-31deg) rotateX(61deg)}}
@keyframes cubeFloat{0%,100%{margin-top:0}50%{margin-top:-42px}}
@keyframes twinkle{0%,100%{opacity:.26;transform:scale(.72)}50%{opacity:1;transform:scale(1.25)}}
@keyframes labelPop{from{opacity:0;transform:translateY(10px);letter-spacing:.28em}to{opacity:1;transform:none}}
@keyframes titleLift{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

@media(max-width:720px){
  .story-modal-panel{grid-template-columns:1fr}
  .story-preview-shell{max-width:300px;margin-inline:auto}
  .constellation{opacity:.3}
  .orbit-ribbon{opacity:.35}
}


/* -------------------------------------------------
   V5: birthday rabbit holes, persistent share button,
   and a stable share experience throughout the journey
-------------------------------------------------- */
.journey-share{
  position:fixed;right:22px;bottom:22px;z-index:45;display:flex;align-items:center;gap:9px;
  padding:13px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  color:#101323;background:var(--accent);box-shadow:0 18px 34px rgba(0,0,0,.3),0 0 22px color-mix(in srgb,var(--accent) 24%,transparent);
  transition:transform .2s ease,box-shadow .2s ease
}
.journey-share:hover{transform:translateY(-4px);box-shadow:0 24px 38px rgba(0,0,0,.38),0 0 30px color-mix(in srgb,var(--accent) 35%,transparent)}
.journey-share-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:var(--accent);background:#101323;font-size:.84rem}
.birthday-quirks{margin-top:18px;padding:15px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.035)}
.quirks-title{margin:0 0 11px;color:var(--text)!important;font-size:.77rem!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.quirks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.quirks-grid div{min-width:0;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(0,0,0,.1)}
.quirks-grid strong{display:block;overflow:hidden;color:var(--accent2);font:700 1rem var(--display);white-space:nowrap;text-overflow:ellipsis}
.quirks-grid span{display:block;margin-top:3px;color:var(--muted);font-size:.68rem;line-height:1.35}
.modal-actions{align-items:center}
.modal-actions button{white-space:nowrap}
@media(max-width:560px){
  .journey-share{right:13px;bottom:13px;padding:11px 13px;font-size:.78rem}
  .journey-share-icon{width:22px;height:22px}
  .quirks-grid{grid-template-columns:1fr}
}