:root{
  --night0:#07101a;
  --night1:#0b1724;
  --night2:#0f2232;
  --ink:#293746;
  --paper:#f4eee1;
  --paper2:#e6dcc8;
  --gold:#c9a76c;
  --star:#f8e8b5;
  --moon:#f5efe4;
  --muted:rgba(245,239,228,.72);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;background:#050b12;color:var(--moon)}
body{font-family:Shippori Mincho,serif;display:flex;justify-content:center}
.stage{position:relative;width:100%;max-width:430px;min-height:100dvh;overflow:hidden;background:linear-gradient(180deg,var(--night0),var(--night1) 42%,var(--night2) 72%,#172b38 100%)}
.bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('../assets/bg_star.jpg') center bottom/cover no-repeat}
.bg:before{content:'';position:absolute;inset:0;background:radial-gradient(80% 55% at 50% 20%,rgba(34,55,75,.28),transparent 60%),radial-gradient(80% 70% at 50% 90%,rgba(226,199,146,.18),transparent 45%),linear-gradient(180deg,rgba(0,0,0,.22),transparent 55%,rgba(0,0,0,.25));}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 82% at 50% 26%,transparent 48%,rgba(0,0,0,.52));}
.screen{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:max(20px,env(safe-area-inset-top)) 24px 26px;opacity:0;visibility:hidden;transition:opacity .58s ease,transform .58s ease;transform:translateY(8px);overflow-y:auto}
.screen.on{opacity:1;visibility:visible;transform:translateY(0)}
.brandLogo{display:block;width:132px;height:auto;margin:2px auto 12px;opacity:.92}
.eyebrow{text-align:center;font-size:11px;letter-spacing:.28em;text-indent:.28em;color:rgba(232,217,184,.72);margin-bottom:24px}
h1{text-align:center;font-size:20px;font-weight:500;letter-spacing:.07em;line-height:1.95;text-shadow:0 0 24px rgba(0,0,0,.75)}
.lead{margin-top:11px;text-align:center;font-size:13px;line-height:2.08;letter-spacing:.05em;color:var(--muted);text-shadow:0 0 18px rgba(0,0,0,.7)}
.panel{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.choice{font-family:inherit;text-align:left;color:var(--moon);background:rgba(9,20,32,.57);border:1px solid rgba(232,217,184,.26);border-radius:4px;padding:15px 17px;line-height:1.65;font-size:14px;letter-spacing:.06em;cursor:pointer;backdrop-filter:blur(3px);transition:background .22s,border-color .22s,transform .22s}
.choice:hover,.choice:focus-visible{background:rgba(17,32,48,.72);border-color:rgba(248,232,181,.82);transform:translateY(-1px);outline:none;box-shadow:0 0 0 1px rgba(248,232,181,.18),0 0 22px rgba(248,232,181,.1)}
.choice small{display:block;margin-top:3px;font-size:11px;color:rgba(245,239,228,.56);letter-spacing:.05em}
.back{margin:20px auto 0;background:none;border:none;color:rgba(245,239,228,.66);font-family:inherit;font-size:12px;letter-spacing:.12em;border-bottom:1px solid rgba(245,239,228,.3);padding:0 0 3px;cursor:pointer}
.birthbox{margin-top:30px;background:rgba(9,20,32,.58);border:1px solid rgba(232,217,184,.24);border-radius:5px;padding:18px;backdrop-filter:blur(3px)}
.birthbox label{display:block;font-size:13px;letter-spacing:.08em;color:rgba(245,239,228,.82);margin-bottom:9px}
.dateFields{display:grid;grid-template-columns:1.35fr .8fr .8fr;gap:7px}
.dateFields select,.aspirationBox textarea{width:100%;font-family:Shippori Mincho,serif;color:#f8f2e7;background:rgba(28,48,67,.94);border:1px solid rgba(232,217,184,.42);border-radius:4px;padding:13px 10px;outline:none;font-size:14px}
.dateFields select option{color:#263440;background:#f8f2e7;font-family:Shippori Mincho,serif;font-weight:600}
.dateFields select:focus,.aspirationBox textarea:focus{border-color:rgba(248,232,181,.8);box-shadow:0 0 20px rgba(248,232,181,.1)}
.privacy{margin-top:10px;text-align:center;font-size:10px;letter-spacing:.06em;color:rgba(245,239,228,.54)}
.numerologyCard{margin-top:22px;background:rgba(9,20,32,.58);border:1px solid rgba(232,217,184,.24);border-radius:5px;padding:19px 18px;backdrop-filter:blur(3px)}
.typeName{text-align:center;font-size:19px;letter-spacing:.1em;color:var(--star);margin-bottom:15px}
.trait{padding-top:11px;margin-top:11px;border-top:1px solid rgba(232,217,184,.16)}
.trait b{display:block;font-size:11px;font-weight:500;letter-spacing:.18em;color:rgba(248,232,181,.8);margin-bottom:5px}
.trait p{font-size:12px;line-height:1.95;color:var(--muted)}
.distanceChoices{margin-top:22px}
.distanceChoices p{text-align:center;font-size:13px;letter-spacing:.05em;margin-bottom:10px}
.distanceChoices .choice{padding:12px 14px;font-size:13px}
.aspirationBox{margin-top:25px;background:rgba(9,20,32,.58);border:1px solid rgba(232,217,184,.24);border-radius:5px;padding:18px;backdrop-filter:blur(3px)}
.aspirationBox label{display:block;font-size:14px;line-height:1.8;letter-spacing:.07em;color:rgba(245,239,228,.9);margin-bottom:9px}
.aspirationBox textarea{height:104px;resize:vertical;line-height:1.7;font-size:13px}
.example{margin-top:11px;font-size:11px;line-height:1.95;color:rgba(245,239,228,.57)}
.optional{font-size:10px;color:rgba(245,239,228,.55);margin-left:4px}
.primary{width:100%;font-family:inherit;margin-top:14px;padding:15px;border:none;border-radius:4px;background:linear-gradient(180deg,#394757,#243343);color:var(--paper);letter-spacing:.18em;text-indent:.18em;cursor:pointer}
.skyhint{margin-top:6px}
.skyfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.starBtn{position:absolute;z-index:4;width:46px;height:46px;margin:-23px 0 0 -23px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;outline:none;border-radius:50%;opacity:0;pointer-events:none;transform:scale(.8);transition:opacity .9s ease,transform .9s ease,filter .9s ease}
.starBtn.on{opacity:1;pointer-events:auto;transform:scale(1)}
.starBtn:focus-visible{box-shadow:0 0 0 1px rgba(248,232,181,.35),0 0 28px rgba(248,232,181,.32)}
.starBtn .shape{display:block;width:var(--size);height:var(--size);background:var(--star);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 5px rgba(248,232,181,.95)) drop-shadow(0 0 15px rgba(248,232,181,.45));animation:twinkle var(--tw) ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.52;transform:scale(.82) rotate(0deg)}50%{opacity:1;transform:scale(1.08) rotate(4deg)}}
.decoStar{position:absolute;z-index:1;border-radius:50%;background:rgba(248,232,181,.95);box-shadow:0 0 8px rgba(248,232,181,.6);opacity:.72;animation:softTwinkle var(--tw) ease-in-out infinite;}
.decoStar.diamond{clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);border-radius:0;background:rgba(248,232,181,.9)}
@keyframes softTwinkle{0%,100%{opacity:.28;transform:scale(.74)}50%{opacity:.86;transform:scale(1.1)}}
.stage.locked .starBtn{pointer-events:none}
.starBtn.dim{opacity:0;transform:scale(.45)}
.starBtn.chosen{opacity:1;transform:scale(1.42);filter:drop-shadow(0 0 22px rgba(248,232,181,.9))}
.starBtn.chosen .shape{animation:chosenPulse 1.2s ease forwards}
@keyframes chosenPulse{0%{transform:scale(1)}55%{transform:scale(2.4)}100%{transform:scale(1.55)}}
.particle{position:absolute;z-index:5;width:3px;height:3px;border-radius:50%;background:var(--star);box-shadow:0 0 8px 2px rgba(248,232,181,.72);pointer-events:none}
.flash{position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,35%),rgba(255,245,210,.95) 0,rgba(248,232,181,.55) 22%,transparent 58%);opacity:0}
.flash.go{animation:flash 1.25s ease forwards}
@keyframes flash{0%{opacity:0}34%{opacity:1}100%{opacity:0}}
.loadingVeil{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(5,11,18,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .5s ease}
.loadingVeil.on{opacity:1;visibility:visible}
.loadingVeil span{font-size:13px;letter-spacing:.18em;color:var(--star);animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.resultScreen{padding-bottom:44px}
.card{margin-top:13px;background:linear-gradient(180deg,#f8f2e7,#eee4d2);color:var(--ink);border-radius:5px;padding:26px 22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.55);position:relative;border:1px solid rgba(255,255,255,.58)}
.card:before{content:'';position:absolute;inset:7px;border:1px solid #d8ccb6;border-radius:3px;pointer-events:none}
.card>*{position:relative}
.subtitle{text-align:center;font-family:Cormorant Garamond,serif;font-size:13px;letter-spacing:.25em;color:#9a7a45}
.resultTitle{text-align:center;font-size:22px;line-height:1.7;font-weight:500;letter-spacing:.1em;color:#263440;margin-top:6px}
.comboName{text-align:center;font-size:13px;letter-spacing:.14em;color:#8a6a33;margin-top:4px}
.stonePair{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0 6px}
.stoneItem{display:flex;flex-direction:column;align-items:center;gap:8px}
.stoneItem span{font-size:11px;letter-spacing:.1em;color:#4c4132}
.stoneCross{font-family:Cormorant Garamond,serif;font-size:16px;color:#9a7a45;padding-bottom:20px}
.stoneVisual{width:84px;height:84px;border-radius:46% 54% 52% 48% / 52% 46% 54% 48%;box-shadow:inset -10px -12px 20px rgba(0,0,0,.16),inset 8px 10px 18px rgba(255,255,255,.55),0 9px 20px rgba(44,58,73,.18);position:relative}
.stoneVisual.small{width:66px;height:66px}
.stoneVisual:after{content:'';position:absolute;left:20%;top:17%;width:26%;height:18%;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(3px);transform:rotate(-15deg)}
.rule{width:42px;height:1px;background:var(--gold);margin:16px auto 18px}
.section{margin-top:17px;padding-top:15px;border-top:1px solid rgba(176,141,79,.24)}
.section h2{font-size:12px;color:#8a6a33;letter-spacing:.22em;font-weight:500;margin-bottom:7px}
.section p{font-size:13px;line-height:2.05;letter-spacing:.04em;color:#344352}
.section p.reasonCopy{margin-top:8px}
.quote{margin-top:17px;padding:13px 14px;background:rgba(176,141,79,.09);border-left:2px solid var(--gold);font-size:13px;line-height:2;color:#344352}
.cta{display:block;width:100%;margin-top:22px;border:none;border-radius:4px;background:#293746;color:#f4eee1;font-family:inherit;padding:15px 0;letter-spacing:.16em;text-indent:.16em;cursor:pointer;text-align:center;text-decoration:none;font-size:14px}
.ctaNote{margin-top:20px;text-align:center;font-size:11px;line-height:1.9;letter-spacing:.05em;color:#8a7a5e}
.shareRow{margin-top:18px;padding:14px;border:1px solid rgba(176,141,79,.25);border-radius:4px;background:rgba(255,255,255,.28);text-align:center}
.shareLabel{display:block;font-size:11px;letter-spacing:.2em;color:#8a6a33;margin-bottom:10px}
.shareButtons{display:flex;justify-content:center;gap:10px}
.shareBtn{font-family:Cormorant Garamond,Shippori Mincho,serif;font-size:13px;letter-spacing:.08em;color:#f4eee1;background:#3a4a5c;border:none;border-radius:3px;padding:9px 18px;cursor:pointer;min-width:74px}
.shareBtn:hover{background:#293746}
.aiNote{margin-top:14px;text-align:center;font-size:9px;letter-spacing:.1em;color:#a4977d}
.retry{display:flex;justify-content:center;gap:22px;margin-top:16px}
.retry button{background:none;border:none;color:rgba(245,239,228,.75);font-family:inherit;font-size:12px;letter-spacing:.1em;border-bottom:1px solid rgba(245,239,228,.32);padding-bottom:2px;cursor:pointer}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}