:root {
  --bg: #f6f7f8;
  --paper: #fbfbfc;
  --ink: #1d2229;
  --muted: #7a808a;
  --line: rgba(31, 37, 45, .12);
  --silver: #d9dde2;
  --night: #0d121a;
  --night-2: #18202c;
  --accent: #cfc8b8;
  --ease: cubic-bezier(.22,.61,.36,1);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; }
.story { overflow: clip; }
.scene {
  position: relative; min-height: 100svh; display: grid; place-items: center; isolation: isolate;
  overflow: hidden;
}
.scene-content, .intro-copy, .confession-wrap, .result-card { width: min(100% - 40px, 920px); margin-inline: auto; position: relative; z-index: 3; }
.eyebrow { margin: 0 0 18px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
h1,h2 { margin: 0; font-weight: 400; letter-spacing: -.035em; }
h1 { font-family: var(--serif); font-size: clamp(42px, 8vw, 88px); line-height: .98; }
h2 { font-family: var(--serif); font-size: clamp(40px, 7vw, 80px); line-height: .98; max-width: 850px; }
.lede,.detail-copy { color: var(--muted); line-height: 1.8; font-size: 14px; max-width: 520px; }

.scene--intro { background: #fbfbfc; }
.intro-copy { align-self: center; opacity: 0; transform: translateY(24px); animation: introIn 2.4s var(--ease) .5s forwards; }
.intro-copy h1 { max-width: 780px; }
.continue { margin-top: 42px; border: 0; background: none; padding: 0; color: var(--ink); display: inline-flex; gap: 16px; align-items: center; cursor: pointer; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.continue i { font-style: normal; transition: transform .35s var(--ease); }
.continue:hover i { transform: translateY(4px); }
.ambient-mark { position: absolute; width: 1px; height: 1px; border-radius: 50%; background: #fff; box-shadow: 0 0 70px 34px rgba(255,255,255,.9); opacity: .85; }
.ambient-mark--one { left: 22%; top: 27%; }
.ambient-mark--two { right: 11%; bottom: 22%; }

.scene--moon { background: radial-gradient(circle at 72% 18%, rgba(197, 208, 222, .12), transparent 34%), linear-gradient(180deg, var(--night-2), var(--night)); color: #f4f6f8; }
.sky { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.stars { position:absolute; inset:0; opacity:.52; background-image: radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0 1px, transparent 1.5px), radial-gradient(circle at 33% 68%, rgba(255,255,255,.62) 0 1px, transparent 1.5px), radial-gradient(circle at 67% 34%, rgba(255,255,255,.75) 0 1.1px, transparent 1.7px), radial-gradient(circle at 81% 72%, rgba(255,255,255,.55) 0 1px, transparent 1.6px); animation: drift 18s linear infinite alternate; }
.moon-halo { position:absolute; width:min(62vw, 610px); aspect-ratio:1; right:-4vw; top:6vh; border-radius:50%; background:rgba(240,244,247,.08); filter:blur(25px); animation: halo 8s ease-in-out infinite alternate; }
.moon { position:absolute; width:min(50vw, 490px); aspect-ratio:1; right:3vw; top:12vh; border-radius:50%; background: radial-gradient(circle at 34% 28%, #fff 0 13%, #f3f4f4 28%, #e3e4e3 66%, #c9cbcb 100%); box-shadow: 0 0 70px 14px rgba(231,235,236,.16), inset -28px -32px 46px rgba(80,87,89,.12); animation: moonRise 2.3s var(--ease) .25s both; }
.moon::after { content:""; position:absolute; inset:0; border-radius:50%; opacity:.2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.crater { position:absolute; border-radius:50%; background:rgba(109,115,116,.11); box-shadow: inset 5px 4px 8px rgba(100,106,106,.09); }
.crater--1{width:11%;height:11%;left:22%;top:20%}.crater--2{width:16%;height:16%;left:57%;top:27%}.crater--3{width:9%;height:9%;left:70%;top:51%}.crater--4{width:13%;height:13%;left:37%;top:58%}.crater--5{width:7%;height:7%;left:22%;top:62%}.crater--6{width:8%;height:8%;left:52%;top:43%}.crater--7{width:5%;height:5%;left:78%;top:34%}.crater--8{width:6%;height:6%;left:45%;top:18%}.crater--9{width:5%;height:5%;left:33%;top:73%}
.cloud { position:absolute; height:18vh; width:52vw; min-width:360px; filter:blur(18px); background:linear-gradient(90deg, transparent, rgba(234,239,243,.10), transparent); border-radius:50%; }
.cloud--1 { left:-15vw; top:22%; transform:rotate(-8deg); animation: cloud1 22s ease-in-out infinite alternate; }
.cloud--2 { right:-22vw; bottom:17%; transform:rotate(10deg); animation: cloud2 27s ease-in-out infinite alternate; opacity:.5; }
.scene-content--moon { align-self:end; padding-bottom: max(54px, 8vh); }
.scene--moon .eyebrow { color:#9ba6b2; }
.scene--moon h2 { max-width:700px; }
.scene--moon .lede { color:#a7afb8; }
.time-grid { margin-top:28px; display:grid; grid-template-columns:repeat(2,minmax(0,150px)); gap:10px; }
.time-card { border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.04); backdrop-filter: blur(12px); padding:14px; border-radius:18px; }
.time-card span,.time-card small { display:block; color:#9ba6b2; font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.time-card strong { display:block; margin:6px 0 2px; font-size:22px; font-weight:500; }
.moon-note { display:flex; align-items:center; gap:9px; margin-top:16px; max-width:500px; color:#89939d; font-size:11px; line-height:1.5; }
.dot { width:6px; height:6px; border-radius:50%; background:#ddd6c7; box-shadow:0 0 10px #ddd6c7; flex:0 0 auto; }
.ghost-button { margin-top:30px; border:0; background:none; color:inherit; opacity:.84; padding:0; cursor:pointer; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.ghost-button i { font-style:normal; margin-left:10px; transition:transform .3s var(--ease); display:inline-block; }.ghost-button:hover i { transform:translateX(5px); }

.scene--distance { background:#f1f2f3; }
.scene-content--distance { align-self:center; }
.distance-backdrop { position:absolute; inset:0; pointer-events:none; background:linear-gradient(130deg, transparent 0 49%, rgba(255,255,255,.8) 49% 50%, transparent 50%); opacity:.55; }
.distance-backdrop span { position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(40,45,51,.14),transparent); width:110%; left:-5%; transform-origin:center; }
.distance-backdrop span:nth-child(1){top:28%;transform:rotate(17deg)}.distance-backdrop span:nth-child(2){top:53%;transform:rotate(-8deg)}.distance-backdrop span:nth-child(3){top:79%;transform:rotate(6deg)}
.route { margin:46px 0 20px; display:flex; align-items:center; gap:14px; max-width:860px; }
.route-point { display:grid; justify-items:center; gap:8px; min-width:95px; text-align:center; }.route-point strong{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.route-point small{font-size:9px;color:#8b9198}
.pin{width:12px;height:12px;border:1px solid #747a81;border-radius:50%;position:relative}.pin::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#747a81;left:3px;top:3px}.pin--side{border-color:#b6a98d}.pin--side::after{background:#b6a98d}
.route-line{height:1px;background:#b8bdc2;flex:1;position:relative;min-width:35px}.route-line span{display:block;width:5px;height:5px;background:#90969d;border-radius:50%;position:absolute;top:-2px;left:50%}.route-line em{position:absolute;left:50%;top:9px;transform:translateX(-50%);font-style:normal;font-size:9px;color:#9a9fa5;white-space:nowrap}.route-line--short{flex:.45}
.detail-copy { max-width:640px; }

.scene--lilies { background:radial-gradient(circle at 50% 55%, rgba(228,218,199,.12), transparent 38%), #121615; color:#f4f2ec; }
.lily-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}.lily-glow{position:absolute;width:55vw;aspect-ratio:1;border-radius:50%;left:50%;top:56%;transform:translate(-50%,-50%);background:rgba(235,226,204,.07);filter:blur(40px);animation:glowBreath 7s ease-in-out infinite alternate}.stem{position:absolute;width:2px;background:linear-gradient(#57665b,#27362e);height:46vh;bottom:-8vh;border-radius:999px;transform-origin:bottom}.s1{left:20%;transform:rotate(18deg)}.s2{left:41%;height:54vh;transform:rotate(2deg)}.s3{left:63%;height:50vh;transform:rotate(-8deg)}.s4{left:79%;height:42vh;transform:rotate(-20deg)}
.lily{position:absolute;width:100px;height:100px;border-radius:50%;left:20%;bottom:36%;transform:translate(-50%,50%) scale(.25);opacity:0;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));}.lily::before,.lily::after{content:"";position:absolute;inset:8% 26%;border-radius:100% 100% 22% 22%/90% 90% 20% 20%;background:linear-gradient(155deg,#fffdf7,#d9ddd7);transform-origin:50% 88%;}.lily::before{transform:rotate(36deg)}.lily::after{transform:rotate(-36deg)}.lily span{position:absolute;inset:17% 33%;border-radius:100% 100% 22% 22%/88% 88% 20% 20%;background:linear-gradient(145deg,#fefdf8,#c5cbc5);transform-origin:50% 88%;z-index:2}.lily span::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#d9c99b;left:43%;top:50%;box-shadow:-34px -22px 0 0 rgba(190,171,116,.62),32px -15px 0 0 rgba(190,171,116,.5)}.l2{left:42%;bottom:27%;transform:translate(-50%,50%) scale(.3);}.l3{left:65%;bottom:34%;transform:translate(-50%,50%) scale(.26);}.l4{left:80%;bottom:25%;transform:translate(-50%,50%) scale(.22)}
.scene-content--lilies{align-self:end;padding-bottom:max(52px,8vh)}.scene--lilies .eyebrow{color:#8d958f}.scene--lilies .lede{color:#a5aba5}.lily-controls{display:flex;gap:9px;align-items:center;margin-top:28px;color:#7f8880;font-size:10px;text-transform:uppercase;letter-spacing:.14em}.progress-dot{width:5px;height:5px;border-radius:50%;background:#d7ccb0;box-shadow:0 0 12px rgba(214,203,176,.65)}
.scene--lilies.is-active .l1{animation:lilyBloom 15s var(--ease) .5s infinite alternate}.scene--lilies.is-active .l2{animation:lilyBloom 18s var(--ease) 3.1s infinite alternate}.scene--lilies.is-active .l3{animation:lilyBloom 17s var(--ease) 5.4s infinite alternate}.scene--lilies.is-active .l4{animation:lilyBloom 14s var(--ease) 7.5s infinite alternate}

.scene--confession{background:#f7f7f6;min-height:100svh}.confession-wrap{align-self:center}.confession-wrap h2{font-size:clamp(48px,10vw,100px);margin-bottom:30px}.confession{max-width:710px}.confession p{margin:0 0 18px;color:#535962;font-size:clamp(16px,2.2vw,20px);line-height:1.8;opacity:0;transform:translateY(12px)}.scene--confession.is-active .confession p:nth-child(1){animation:lineIn .9s var(--ease) .3s forwards}.scene--confession.is-active .confession p:nth-child(2){animation:lineIn .9s var(--ease) .9s forwards}.scene--confession.is-active .confession p:nth-child(3){animation:lineIn .9s var(--ease) 1.5s forwards}.scene--confession.is-active .confession p:nth-child(4){animation:lineIn .9s var(--ease) 2.1s forwards}.scene--confession.is-active .confession p:nth-child(5){animation:lineIn .9s var(--ease) 2.7s forwards}.scene--confession.is-active .final-line{animation:lineIn 1.1s var(--ease) 3.8s forwards;color:#20252b;font-family:var(--serif);font-size:clamp(38px,6vw,68px);line-height:1.25;margin-top:32px}.answer-zone{display:flex;gap:12px;margin-top:34px;opacity:0;transform:translateY(12px)}.scene--confession.is-active .answer-zone{animation:lineIn .9s var(--ease) 5s forwards}.answer{position:relative;min-width:110px;padding:13px 22px;border-radius:999px;border:1px solid rgba(28,34,40,.18);background:rgba(255,255,255,.6);cursor:pointer;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;overflow:hidden}.answer:hover{background:#fff;border-color:rgba(28,34,40,.35);box-shadow:0 10px 30px rgba(0,0,0,.06)}.answer i{position:absolute;pointer-events:none}.sun-mark{width:7px;height:7px;border-radius:50%;background:#e6c978;box-shadow:0 0 14px 4px rgba(230,201,120,.45);right:12px;top:10px;opacity:0;transition:opacity .4s ease}.answer--yes:hover .sun-mark{opacity:1}.rain-mark{width:5px;height:5px;border-radius:50%;background:#9eaec1;right:15px;top:12px;opacity:0;box-shadow:4px 10px 0 rgba(158,174,193,.6),-3px 20px 0 rgba(158,174,193,.5);transition:opacity .4s ease}.answer--no:hover .rain-mark{opacity:1}
.weather-layer{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at 50% 0%,rgba(184,198,214,.15),transparent 33%);opacity:0;transition:opacity .7s ease}.scene--confession:hover .weather-layer{opacity:.34}.scene--confession.has-answer .weather-layer{opacity:.14}

.scene--result{background:#eef0f1;padding:32px}.result-card{width:min(100%,560px);padding:44px 36px;border:1px solid rgba(26,32,38,.12);background:rgba(255,255,255,.52);box-shadow:0 25px 70px rgba(35,42,49,.08);border-radius:28px}.status-led{display:block;width:8px;height:8px;border-radius:50%;background:#9da7af;margin:0 0 28px;box-shadow:0 0 14px rgba(157,167,175,.38)}.result-card h2{font-size:clamp(46px,8vw,78px);}.result-rule{height:1px;background:var(--line);margin:28px 0}.result-card p{font-family:var(--serif);font-size:24px;margin:0 0 12px}.result-card small{display:block;color:#8a9096;line-height:1.7;font-size:11px}.result-card footer{margin-top:50px;padding-top:18px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9a9fa4}

@keyframes introIn{to{opacity:1;transform:none}}@keyframes moonRise{from{opacity:0;transform:translate(35px,-10px) scale(.88)}to{opacity:1;transform:none}}@keyframes halo{from{transform:scale(.94);opacity:.65}to{transform:scale(1.06);opacity:1}}@keyframes drift{from{transform:translate3d(-7px,0,0)}to{transform:translate3d(8px,10px,0)}}@keyframes cloud1{from{transform:translateX(-4vw) rotate(-8deg)}to{transform:translateX(14vw) rotate(-5deg)}}@keyframes cloud2{from{transform:translateX(8vw) rotate(10deg)}to{transform:translateX(-8vw) rotate(7deg)}}@keyframes glowBreath{from{transform:translate(-50%,-50%) scale(.88);opacity:.65}to{transform:translate(-50%,-50%) scale(1.08);opacity:1}}@keyframes lilyBloom{0%{opacity:0;transform:translate(-50%,50%) scale(.28) rotate(-5deg)}45%{opacity:.9;transform:translate(-50%,50%) scale(.74) rotate(0)}100%{opacity:1;transform:translate(-50%,50%) scale(1) rotate(4deg)}}@keyframes lineIn{to{opacity:1;transform:none}}

@media (max-width: 700px){
  .scene-content,.intro-copy,.confession-wrap,.result-card{width:min(100% - 28px, 920px)}
  h1{font-size:clamp(40px,11vw,60px)} h2{font-size:clamp(36px,10vw,57px)}
  .moon{width:68vw;right:-5vw;top:8vh}.moon-halo{width:82vw;right:-12vw;top:5vh}
  .scene-content--moon{padding-bottom:44px}.time-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:320px}.time-card{padding:12px}.moon-note{max-width:325px}
  .route{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"a line b" ". line2 ." "c . .";gap:10px;max-width:340px}.route-point:nth-of-type(1){grid-area:a}.route-line:nth-of-type(1){grid-area:line}.route-point:nth-of-type(2){grid-area:b}.route-line--short{grid-area:line2;justify-self:center;width:1px;height:26px;min-width:1px;background:#b8bdc2}.route-line--short span{left:-2px;top:50%}.route-line--short em{left:13px;top:50%;transform:translateY(-50%)}.route-point:nth-of-type(3){grid-area:c;justify-self:start;margin-left:42px}.route-line:not(.route-line--short){margin-top:0}
  .detail-copy{font-size:12px;line-height:1.75}.lily{width:84px;height:84px}.s1{left:10%}.s4{left:87%}
  .confession p{font-size:15px;line-height:1.75;margin-bottom:15px}.answer{flex:1;min-width:0}.result-card{padding:34px 24px}.result-card footer{margin-top:38px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .intro-copy,.moon{opacity:1!important;transform:none!important}.scene--confession .confession p,.answer-zone{opacity:1!important;transform:none!important}.lily{opacity:.75!important;transform:translate(-50%,50%) scale(.92)!important}
}