:root{color-scheme:dark;--gold:#ffd76c;--deep:#07152f;--violet:#6625a8}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#020713;font-family:"Songti SC","Noto Serif SC",Georgia,serif}.scene{position:relative;min-height:100svh;max-width:520px;margin:auto;overflow:hidden;background:#061632;color:#fff;isolation:isolate}.backdrop{position:absolute;inset:-2%;z-index:-4;background:url(hero-marina-zodiac.png) 50% 50%/cover no-repeat;animation:cinema 12s ease-in-out infinite alternate;transform-origin:center}.backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(#030b1bb8 0%,transparent 25%,transparent 62%,#01071699 100%),radial-gradient(circle at 50% 58%,transparent 0 25%,#04102766 76%)}.water-shimmer{position:absolute;z-index:-3;inset:42% -20% -10%;background:repeating-linear-gradient(102deg,transparent 0 28px,#69d9ff12 30px 33px,transparent 36px 64px);mix-blend-mode:screen;animation:water 5s linear infinite;pointer-events:none}.sparkles{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:radial-gradient(circle,#ffe89a 0 1px,transparent 2px),radial-gradient(circle,#87e8ff 0 1px,transparent 2px);background-size:91px 109px,137px 151px;background-position:12px 0,50px 40px;animation:spark 4s ease-in-out infinite}.topbar{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:max(18px,env(safe-area-inset-top)) 15px 10px;background:linear-gradient(#020714dd,transparent)}button,a{font:inherit}.zodiac-logo{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;filter:drop-shadow(0 2px 8px #000)}.logo-orbit{position:relative;width:49px;height:49px;border:1.5px solid var(--gold);border-radius:50%;box-shadow:0 0 16px #62caffaa,inset 0 0 12px #7732b9}.logo-orbit:before{content:"十二";position:absolute;inset:9px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#6131a7,#08162d 72%);font-weight:900;color:#ffe89b;font-size:14px}.logo-orbit i{position:absolute;font-size:7px;color:#8eeaff;font-style:normal}.logo-orbit i:nth-child(1){top:-2px;left:21px}.logo-orbit i:nth-child(2){bottom:0;left:3px}.logo-orbit i:nth-child(3){bottom:0;right:3px}.logo-copy{display:grid}.logo-copy b{font-size:19px;letter-spacing:3px;color:#fff3ba;text-shadow:0 0 9px #ffc94c}.logo-copy small,.account small{font-family:Arial,sans-serif;font-size:7px;letter-spacing:1.5px;color:#81dcff}.account{display:flex;gap:7px;align-items:center;border:1px solid #e9bd56;border-radius:25px;padding:7px 10px;color:#fff3ba;background:linear-gradient(145deg,#153c68bb,#39175ebb);box-shadow:0 0 18px #45bdff44}.account span:not(.account-icon){display:grid;font-size:12px}.account-icon{display:grid;place-items:center;width:25px;height:25px;border:1px solid #ffe48a;border-radius:50%;font-family:Arial}.hero-copy{position:relative;z-index:3;text-align:center;padding:2svh 18px 0;text-shadow:0 3px 10px #000}.eyebrow{font-family:Arial,sans-serif;letter-spacing:3px;color:#8fe7ff;font-size:10px}.hero-copy h1{margin:2px 0 8px;font-size:clamp(38px,10vw,56px);line-height:1.05;letter-spacing:8px;color:#fff1c2}.hero-copy h1 span{background:linear-gradient(#fffbd5,#ffd15c 45%,#b66b12 85%);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 8px #f4b22d);font-size:.68em;letter-spacing:10px}.subtitle{font-size:13px;line-height:1.7;color:#fff0ba}.subtitle small{font:8px Arial,sans-serif;letter-spacing:2px;color:#a9eaff}.stage-copy{position:absolute;z-index:4;left:0;right:0;bottom:max(25px,env(safe-area-inset-bottom));text-align:center;padding:0 32px}.stage-copy>p{margin:0 0 8px;color:#fff1b0;font-size:13px;letter-spacing:4px;text-shadow:0 0 10px #ffb936}.stage-light{position:absolute;left:50%;bottom:38px;width:310px;height:165px;transform:translateX(-50%);background:radial-gradient(ellipse,#ffe27c55,transparent 65%);filter:blur(4px);animation:pulse 2.3s ease-in-out infinite;pointer-events:none}.enter{position:relative;width:min(330px,88vw);height:70px;border:1px solid #fff3a8;border-radius:20px;background:linear-gradient(180deg,#7b2ccb 0%,#351266 47%,#0a2d69 100%);box-shadow:0 0 0 3px #d99c31,0 10px 26px #000b,inset 0 2px #ffffff88,0 0 28px #5fd5ff66;color:#fff4c4;overflow:hidden}.enter:before{content:"";position:absolute;inset:-100% auto -100% -35%;width:35%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:rotate(18deg);animation:sweep 2.8s infinite}.enter span{display:block;font-size:22px;font-weight:900;letter-spacing:6px}.enter small{font:9px Arial,sans-serif;letter-spacing:4px;color:#9ce8ff}.swipe{margin-top:12px;font:8px Arial,sans-serif;letter-spacing:1.5px;color:#c5dfff}.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:end center;background:#010716aa;backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.35s}.modal.show{opacity:1;visibility:visible}.modal-card{position:relative;width:min(520px,100%);padding:30px 24px max(30px,env(safe-area-inset-bottom));border:1px solid #f6cb62;border-radius:28px 28px 0 0;background:linear-gradient(160deg,#102c55f2,#210c3af5 55%,#080c20f8);box-shadow:0 -18px 60px #51bfff33,inset 0 1px #fff8;transform:translateY(40px);transition:.35s}.modal.show .modal-card{transform:none}.close{position:absolute;right:16px;top:14px;border:0;background:none;color:#fff;font-size:30px}.modal-mark{text-align:center;color:#ffe7a0;font-size:20px;letter-spacing:5px}.modal-mark small,.modal h2 small{display:block;font:8px Arial,sans-serif;letter-spacing:3px;color:#8ee4ff;margin-top:5px}.modal h2{text-align:center;font-size:18px;margin:24px 0 15px}.modal label{display:block;margin:12px 0;color:#ffe5a0;font-size:12px}.modal label span{float:right;font:9px Arial;color:#7bdcff}.modal input{display:block;width:100%;margin-top:6px;padding:14px;border:1px solid #b78a38;border-radius:11px;background:#030a18cc;color:#fff;font:14px Arial}.login,.signup{width:100%;padding:14px;margin-top:10px;border-radius:12px;border:1px solid #ffe28b;color:#fff;background:linear-gradient(#7032bd,#241061);font-weight:800}.signup{background:transparent;color:#b9eaff}.demo-note{text-align:center;font-size:10px;color:#a8c5db}.account,.enter,.login,.signup{cursor:pointer}@keyframes cinema{to{transform:scale(1.045) translateY(-.7%)}}@keyframes water{to{background-position:190px 0}}@keyframes spark{50%{opacity:.32;transform:translateY(-5px)}}@keyframes pulse{50%{opacity:.42;transform:translateX(-50%) scale(1.08)}}@keyframes sweep{0%,35%{left:-45%}70%,100%{left:125%}}@media(min-width:521px){body{background:radial-gradient(circle,#13274a,#02040a 70%)}.scene{box-shadow:0 0 70px #000}}