*{box-sizing:border-box}html,body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#08050f;color:#eee}.page-nebula{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0}.page-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}.page-blob.p1{width:46vw;height:46vw;max-width:560px;max-height:560px;background:#ff6fd8;top:-12vw;right:-10vw;animation:drift1 26s ease-in-out infinite}.page-blob.p2{width:40vw;height:40vw;max-width:500px;max-height:500px;background:#6a3fd6;bottom:-12vw;left:-10vw;animation:drift2 30s ease-in-out infinite}.stage{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center}.app-shell{position:relative;overflow:hidden;width:100%;min-height:100vh;background:#1a0b2e}.nebula{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;transition:background 1.2s ease}.blob.b1{width:55vw;height:55vw;max-width:260px;max-height:260px;background:#ff6fd8;top:-12vw;right:-12vw;animation:drift1 20s ease-in-out infinite}.blob.b2{width:48vw;height:48vw;max-width:220px;max-height:220px;background:#7b3fd6;bottom:-10vw;left:-12vw;animation:drift2 24s ease-in-out infinite}.blob.b3{width:30vw;height:30vw;max-width:140px;max-height:140px;background:#ffb84f;bottom:32%;right:6%;animation:drift3 16s ease-in-out infinite}@keyframes drift1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4%,-6%) scale(1.12)}}@keyframes drift2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-4%,5%) scale(1.08)}}@keyframes drift3{0%,to{transform:translate(0) scale(1)}50%{transform:translate(3%,4%) scale(.92)}}@keyframes twinkle{0%,to{opacity:.25}50%{opacity:1}}.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle 3s ease-in-out infinite;box-shadow:0 0 4px 1px #fff9}.content{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column}.screen{position:relative;flex:1;display:none;flex-direction:column;padding:56px 24px 40px;min-height:100vh}.screen.show{display:flex}.back-link{align-self:flex-start;font-size:12px;color:#e0bce8;text-decoration:none;opacity:.85;margin-bottom:6px;cursor:pointer}.name-title{font-size:22px;font-weight:600;text-align:center;margin:0 0 6px;color:#f6f2ff;font-family:Georgia,serif}.name-sub{font-size:13px;text-align:center;color:#e6c9f0;margin:0;opacity:.85}.name-body{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}input.name-input,input.bday-input,input.email-input{width:100%;max-width:240px;background:#ffffff14;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:15px;padding:12px 16px;border-radius:12px;text-align:center;outline:none}input.bday-input{color-scheme:dark;font-size:14px}input.name-input::placeholder,input.email-input::placeholder{color:#fff6}input.email-input:disabled,input.name-input:disabled,input.bday-input:disabled{opacity:.6;cursor:not-allowed}.field-error{font-size:12px;color:#ff8a9a;margin:-6px 0 0;text-align:center;max-width:240px}.send-error-panel{width:100%;max-width:280px;padding:14px 16px;border-radius:14px;background:#ff64781a;border:1px solid rgba(255,120,140,.25);display:flex;flex-direction:column;align-items:center;gap:12px}.send-error-text{font-size:13px;color:#ffc8d0;text-align:center;margin:0;line-height:1.4}.send-error-actions{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.btn-secondary{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);font-weight:500;animation:none;box-shadow:none}.btn-secondary:hover{background:#ffffff26}.field-label{font-size:11px;color:#c9b8e8;text-transform:uppercase;letter-spacing:.08em;margin:0 0 -6px;opacity:.8}.btn{border:none;cursor:pointer;font-size:14px;font-weight:600;padding:12px 28px;border-radius:24px;color:#fff}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5}.continue-btn{background:linear-gradient(135deg,#ff6fd8,#c23fd6);animation:pulseGlow 2.2s ease-in-out infinite;margin-top:4px}@keyframes pulseGlow{0%,to{box-shadow:0 0 12px #ff6fd880}50%{box-shadow:0 0 26px 6px #ff6fd8cc}}.constellation-wrap{width:100%;max-width:340px;margin:8px auto 4px;display:flex;flex-direction:column;align-items:center}.constellation{width:100%;height:100px;overflow:visible}.const-line{stroke:#ffdcfaa6;stroke-width:.35;stroke-linecap:round;opacity:0;transition:opacity .5s ease}.const-star{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ff9fe8) drop-shadow(0 0 10px rgba(255,111,216,.6))}.const-star.on{opacity:1;transform:scale(1);animation:starPulse 2.4s ease-in-out infinite}.const-line.on{opacity:.7}@keyframes starPulse{0%,to{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ff9fe8) drop-shadow(0 0 8px rgba(255,111,216,.5))}50%{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #ff9fe8) drop-shadow(0 0 16px rgba(255,111,216,.8))}}.zodiac-label{font-size:12px;letter-spacing:.12em;color:#f0e0ff;opacity:0;transition:opacity 1s ease;text-transform:uppercase;margin:2px 0 0}.zodiac-label.show{opacity:.85}.greeting{font-size:16px;font-weight:600;text-align:center;color:#f8f0ff;margin:6px 0 4px;font-family:Georgia,serif}.greeting-sub{font-size:11.5px;text-align:center;color:#c9b8e8;margin:0 0 4px;opacity:.8}.fortune-body{display:flex;flex-direction:column;align-items:center;margin:auto 0;width:100%}.ball-wrap{position:relative;width:190px;height:190px;display:flex;align-items:center;justify-content:center}.ball-shadow{position:absolute;bottom:2px;left:50%;width:100px;height:18px;border-radius:50%;background:radial-gradient(ellipse at center,#0009,#0000 72%);transform:translate(-50%);animation:shadowPulse 4s ease-in-out infinite}@keyframes shadowPulse{0%,to{transform:translate(-50%) scale(1);opacity:.6}50%{transform:translate(-50%) scale(.8);opacity:.3}}.eightball{width:156px;height:156px;border-radius:50%;position:relative;animation:floaty 4s ease-in-out infinite;background:radial-gradient(circle at 30% 24%,#fffffff2,#fff0 9%),radial-gradient(circle at 34% 30%,#a888f5,#7451dd,#4a2f9e 44%,#23134f 68%,#0e0726 88%,#060314);box-shadow:0 0 46px 8px #b482ff66,inset -20px -24px 44px #0009,inset 16px 18px 30px #ffffff1f,inset 0 0 0 1px #ffffff0f}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.eightball.shaking{animation:shake .55s ease}@keyframes shake{0%{transform:translate(0) rotate(0)}15%{transform:translate(-11px,-4px) rotate(-11deg)}30%{transform:translate(10px,3px) rotate(9deg)}45%{transform:translate(-9px,4px) rotate(-7deg)}60%{transform:translate(8px,-3px) rotate(7deg)}75%{transform:translate(-5px,2px) rotate(-4deg)}90%{transform:translate(3px,-1px) rotate(2deg)}to{transform:translate(0) rotate(0)}}.rim-light{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;pointer-events:none;box-shadow:inset -3px 4px 0 -1px #be96ff59}.window{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;font-family:Georgia,serif;background:radial-gradient(circle at 35% 28%,#fff,#e8e2f5 30%,#cbc1e6,#a99bd0);box-shadow:inset 0 7px 10px #00000038,inset 0 -5px 9px #ffffffb3,0 0 0 4px #ece7f5,0 0 0 5px #140a2880,0 4px 14px #00000073;color:#241040}.shake-btn{margin-top:16px;background:linear-gradient(135deg,#ff6fd8,#c23fd6)}.answer-box{margin-top:14px;width:100%;max-width:700px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;padding:14px 16px;border-radius:16px;background:#ffffff12;border:1px solid rgba(255,255,255,.15)}.answer-box.revealed{opacity:1;transform:translateY(0)}.skill-tag{align-self:center;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2a0a24;background:linear-gradient(135deg,#ffb0ec,#ff6fd8);padding:4px 14px;border-radius:20px}.example-text{font-size:13px;line-height:1.45;color:#f5edff;text-align:center}@media (min-width: 700px){.stage{padding:48px 24px}.app-shell{width:100%;max-width:480px;min-height:680px;border-radius:28px;box-shadow:0 30px 90px #0000008c;border:1px solid rgba(255,255,255,.08)}.screen{min-height:680px;padding:28px 32px 40px}.name-title{font-size:25px}.greeting{font-size:18px}.constellation-wrap{max-width:380px}.constellation{height:150px}}@media (min-width: 1024px){.app-shell{max-width:540px;min-height:740px}.screen{min-height:740px;padding:32px 40px 48px}.name-title{font-size:28px}.name-sub,.field-label{font-size:14px}input.name-input,input.bday-input,input.email-input{max-width:280px;font-size:16px;padding:14px 18px}.btn{font-size:15px;padding:13px 32px}.greeting{font-size:20px}.greeting-sub{font-size:13px}.constellation-wrap{max-width:420px;margin-top:14px}.constellation{height:170px}.ball-wrap{width:230px;height:230px}.eightball{width:190px;height:190px}.window{width:102px;height:102px;font-size:48px}.ball-shadow{width:120px}.answer-box{max-width:800px;padding:18px 20px}.skill-tag{font-size:11.5px}.example-text{font-size:14.5px}}@media (min-width: 1440px){.app-shell{max-width:800px}}
