body.is-booting,body.is-fated-login{background:#03060c}
body.is-booting .site-header,body.is-fated-login .site-header{display:none}
body.is-booting .loading{color:#b8aeb3}
body.is-fated-login{color:#f4ede6;color-scheme:dark;overflow:hidden}
body.is-fated-login #main{min-height:100svh;outline:none}
.fated-login{--baseline:76svh;--character-height:33svh;--side:clamp(12px,2.6vw,44px);--memory-zone:calc(var(--baseline) - var(--character-height)*.5);--cloud-width:min(76vw,1040px);--cloud-height:min(calc(var(--memory-zone) - 6svh),calc(var(--cloud-width)*.5));--caption-offset:24px;--girl-color:#e6b2c6;--boy-color:#b5cfdf;--entry-color:var(--girl-color);--entry-border:#8b6677;--entry-fill:#241b23;--round:"YouYuan","幼圆","Hiragino Maru Gothic ProN","Microsoft YaHei",sans-serif;--hand:"Comic Sans MS","Segoe Print",var(--round);position:relative;isolation:isolate;height:100svh;min-height:480px;overflow:hidden;background:radial-gradient(ellipse at 61% -9%,#1b31513d,transparent 58%),linear-gradient(180deg,#050c1e 0%,#07152c 27%,#030a18 51%,#010307 79%,#000 100%);font-family:var(--round)}
.fated-login[data-selected-identity="007"]{--entry-color:var(--boy-color);--entry-border:#667f90;--entry-fill:#192630}
.fated-login{background:radial-gradient(ellipse at 13% 11%,#142c5966,transparent 40%),radial-gradient(ellipse at 88% 26%,#39264a4d,transparent 36%),linear-gradient(180deg,#03091b 0%,#07132e 29%,#050c1e 50%,#02040d 74%,#000 100%)}
.night-nebula{position:absolute;inset:-8%;background:radial-gradient(ellipse at 12% 42%,#5a66a039,transparent 35%),radial-gradient(ellipse at 84% 18%,#aa779b30,transparent 33%),radial-gradient(ellipse at 46% 33%,#304f7944,transparent 24%);filter:blur(23px);animation:nebula-breath 28s ease-in-out infinite alternate}
.night-nebula::after{content:"";position:absolute;inset:14% -20% 18%;transform:rotate(-23deg);border-radius:50%;background:radial-gradient(ellipse,#899cb31a,transparent 67%);box-shadow:0 0 95px #788ab710}
.night-galaxy{fill:#d6c9e8;opacity:.62}
.night-moon{position:absolute;right:5.8%;top:7%;width:clamp(20px,3vw,42px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 60% 35%,#fbf0db,#d2cde4 65%,#909dc5);opacity:.54;box-shadow:0 0 22px #c0bddb2b,0 0 70px #7b95cb16}
.night-moon::after{content:"";position:absolute;inset:-2px -5px 4px 7px;border-radius:50%;background:#09132b;box-shadow:0 0 7px #09132b}
.fated-ground-glow{position:absolute;pointer-events:none;z-index:0;left:-10%;right:-10%;top:calc(var(--baseline) - 3svh);height:19svh;background:radial-gradient(ellipse at 15% 17%,#e6b2c61c,transparent 28%),radial-gradient(ellipse at 85% 17%,#abcaf222,transparent 28%),radial-gradient(ellipse at 50% 6%,#9387b514,transparent 48%);transform:perspective(420px) rotateX(21deg);transform-origin:center top}
@keyframes nebula-breath{from{opacity:.7;transform:translate(-1%,0) scale(1)}to{opacity:1;transform:translate(1%,-1%) scale(1.035)}}
.fated-night{position:absolute;inset:0 0 auto;height:var(--baseline);overflow:hidden;pointer-events:none;z-index:0;mask-image:linear-gradient(#000 0%,#000 82%,transparent 100%)}
.night-haze{position:absolute;inset:-12% -10%;background:radial-gradient(ellipse at 26% 23%,#51658e1f,transparent 34%),radial-gradient(ellipse at 76% 45%,#544d7b19,transparent 36%);transform:rotate(-20deg);filter:blur(20px)}
.night-haze:before{content:"";position:absolute;left:-8%;top:18%;width:116%;height:23%;border-radius:50%;background:radial-gradient(ellipse,#7e8aad24,transparent 69%);filter:blur(22px)}
.night-haze:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 49% 29%,#00050d8c,transparent 35%)}
.night-stars{position:absolute;inset:0;width:100%;height:100%;fill:#e2eaff}
.night-distant{fill:#8295bf}
.night-twinkle{animation:night-shimmer var(--period) ease-in-out var(--delay) infinite alternate}
.night-glints{fill:none;stroke:#d6e1fa;stroke-width:.7;stroke-linecap:round;opacity:.4;filter:drop-shadow(0 0 2px #bbd2fc)}
.night-meteors{--sky-height:min(36svh,calc(var(--baseline) - var(--character-height) - 3svh));--flight-drop:calc(var(--sky-height)*.3);position:absolute;inset:0 0 auto;height:var(--sky-height);overflow:hidden}
.night-meteor{--tail-length:clamp(100px,13vw,185px);--flight-distance:calc(100vw + var(--tail-length) + 32px);--flight-angle:atan2(calc(var(--flight-drop)*-1),var(--flight-distance));position:absolute;left:calc(100% + 8px);width:var(--tail-length);height:1.5px;opacity:.48;border-radius:50%;background:linear-gradient(90deg,#cfdfef 0%,#bfd7ecb0 9%,#8aafcf59 36%,#749ac51a 72%,transparent 100%);filter:drop-shadow(0 0 2px #9fbfdd80);transform-origin:left center;animation:night-wish 24s linear infinite;will-change:transform}
.night-meteor:before{content:"";position:absolute;left:-1px;top:50%;width:2.5px;height:2.5px;transform:translateY(-50%);border-radius:50%;background:#d9e6f2;box-shadow:0 0 4px #b4d1eb80}
.meteor-one{top:3%;animation-delay:-2s}
.meteor-two{top:26%;animation-delay:-10s}
.meteor-three{top:52%;animation-delay:-18s}
@keyframes night-shimmer{from{opacity:calc(var(--dim)*.4)}to{opacity:var(--dim)}}
/* Keep the entire trail visible until it has crossed the left screen edge. */
@keyframes night-wish{from{transform:translate(0,0) rotate(var(--flight-angle))}to{transform:translate(calc(var(--flight-distance)*-1),var(--flight-drop)) rotate(var(--flight-angle))}}
.fated-memories{position:absolute;top:calc((var(--memory-zone) - var(--cloud-height))*.5);left:50%;width:var(--cloud-width);height:var(--cloud-height);transform:translateX(-50%);clip-path:inset(-12svh -10vw 0);mask-image:linear-gradient(#000 0%,#000 38%,#000c 55%,#0007 72%,#0002 88%,transparent 100%);mask-size:calc(100% + 20vw) calc(100% + 12svh);mask-position:center bottom;mask-repeat:no-repeat;mask-clip:no-clip;z-index:1}
.memory-print{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;aspect-ratio:3/2;transform:rotate(var(--angle));z-index:var(--layer);padding:clamp(3px,.4vw,6px);padding-bottom:clamp(7px,.9vw,12px);border:1px solid #fffbf180;border-radius:1px;background:#f1ede6;box-shadow:2px 5px 4px #0007,0 14px 24px #0008;transition:transform .2s;cursor:zoom-in}
.memory-print img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,var(--photo-focus,50% 50%));filter:none;pointer-events:none}
.memory-print:hover{z-index:20;transform:rotate(var(--angle)) translateY(-2px)}
.memory-print:focus-visible{z-index:21}
.memory-print{border-color:#efdae895;box-shadow:2px 5px 4px #0007,0 16px 32px #0009,0 0 18px #d0b1c20a}
.print-1{--x:4%;--y:3%;--w:31%;--angle:-14deg;--layer:3}
.print-2{--x:23%;--y:-5%;--w:30%;--angle:11deg;--layer:1}
.print-3{--x:47%;--y:6%;--w:31%;--angle:-16deg;--layer:9}
.print-4{--x:68%;--y:-2%;--w:31%;--angle:15deg;--layer:4}
.print-5{--x:4%;--y:49%;--w:30%;--angle:9deg;--layer:5}
.print-6{--x:24%;--y:35%;--w:33%;--angle:-9deg;--layer:7}
.print-7{--x:47%;--y:51%;--w:30%;--angle:12deg;--layer:6}
.print-8{--x:69%;--y:48%;--w:31%;--angle:-14deg;--layer:8;--focus:50% 40%}
.print-9{--x:61%;--y:7%;--w:30%;--angle:-6deg;--layer:8}
.print-10{--x:15%;--y:22%;--w:30%;--angle:16deg;--layer:10}
.print-11{--x:43%;--y:32%;--w:31%;--angle:8deg;--layer:11}
.fated-stage{position:absolute;top:0;left:0;width:100%;height:var(--baseline);pointer-events:none;z-index:2}
.fated-horizon{position:absolute;bottom:0;left:calc(var(--side) + 12px);right:calc(var(--side) + 12px);height:3px;background:linear-gradient(90deg,transparent,#dfbfd880 6%,#b2cbea65 35%,#d6c4de75 66%,#d3e5ff9c 94%,transparent);border-radius:50%;box-shadow:0 -2px 9px #b5cdf529,0 3px 6px #000d}
.fated-horizon:before{content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:clamp(14px,3.6svh,30px);border-radius:50%;background:radial-gradient(ellipse at 50% 100%,#cbdcf52b,transparent 72%);transform:perspective(500px) rotateX(44deg);transform-origin:bottom}
.fated-horizon:after{content:"";position:absolute;left:0;right:0;top:3px;height:10px;border-radius:0 0 50% 50%;background:linear-gradient(#788ba325,#03060d66 55%,transparent)}
.fated-horizon svg{position:absolute;left:50%;top:calc(100% + var(--caption-offset));transform:translate(-50%,-50%) rotate(-8deg);width:23px;height:23px;fill:#e6b2c6;stroke:#e8c8d4;stroke-width:1.3;box-sizing:content-box;z-index:2;filter:drop-shadow(0 0 5px #e6b2c630)}
.fated-horizon svg{animation:heart-lantern 5s ease-in-out infinite alternate}
@keyframes heart-lantern{from{filter:drop-shadow(0 0 4px #e6b2c650)}to{filter:drop-shadow(0 0 9px #e6b2c69c) drop-shadow(0 0 20px #cb8fb94d)}}
.fated-footlight{position:absolute;bottom:-12px;width:clamp(72px,calc(var(--character-height)*.63),180px);height:29px;border-radius:50%;background:radial-gradient(ellipse,#efcae174 0%,#d4adce3d 25%,#b99cc418 47%,transparent 72%);filter:blur(.6px);z-index:1}
.ground-girl{left:calc(var(--side) + var(--character-height)*.2);transform:translateX(-50%)}
.ground-boy{right:calc(var(--side) + var(--character-height)*.22);transform:translateX(50%);background:radial-gradient(ellipse,#d7e9ff82 0%,#b9d3f13d 25%,#93b7e118 47%,transparent 72%)}
.fated-footlight:after{content:"";position:absolute;left:25%;right:25%;top:8px;height:8px;border-radius:50%;background:radial-gradient(ellipse,#000c 20%,#0007 48%,transparent 75%)}
.fated-character{--glow-rgb:230,178,198;position:absolute;bottom:0;width:calc(var(--character-height)*.36);height:var(--character-height);padding:0;border:0;background:transparent;appearance:none;display:block;line-height:0;overflow:visible;isolation:isolate;pointer-events:auto;cursor:pointer;z-index:2;transition:filter .22s}
.fated-character:before{content:"";position:absolute;left:-70%;right:-70%;top:6%;bottom:1%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--glow-rgb),.26),transparent 68%);filter:blur(14px);opacity:0;transition:opacity .22s}
.character-cutout{position:absolute;inset:0;display:block;overflow:hidden}
.fated-character img,.reflection-figure img{position:absolute;width:auto;max-width:none;height:100%;image-rendering:auto;filter:drop-shadow(0 -1px 1px #b3c9eb40) drop-shadow(0 6px 3px #000b)}
.character-girl{left:var(--side)}
.character-girl img{left:0;bottom:-2.8%;clip-path:polygon(0 10%,49% 10%,50% 18%,52% 30%,52% 38%,50% 45%,50% 100%,0 100%)}
.character-boy{right:var(--side);--glow-rgb:181,207,223}
.character-boy img{right:0;bottom:-1.6%;clip-path:polygon(46% 0,100% 0,100% 100%,50% 100%,50% 45%,52% 38%,52% 30%,50% 18%,49% 10%,46% 10%)}
.fated-character:hover,.fated-character:focus-visible,.fated-character[aria-pressed="true"]{filter:drop-shadow(0 0 7px rgba(var(--glow-rgb),.75)) drop-shadow(0 0 18px rgba(var(--glow-rgb),.38))}
.fated-character:hover:before,.fated-character:focus-visible:before,.fated-character[aria-pressed="true"]:before{opacity:.8}
.fated-character:active{filter:drop-shadow(0 0 10px rgba(var(--glow-rgb),.95)) drop-shadow(0 0 25px rgba(var(--glow-rgb),.6))}
.fated-character:disabled{opacity:1;cursor:wait}
.fated-login .fated-character:focus-visible{outline:1px dashed rgba(var(--glow-rgb),.7);outline-offset:7px;border-radius:12px}
.fated-reflection{--reflection-skew:-5deg;position:absolute;top:calc(100% + 2px);width:calc(var(--character-height)*.5);height:calc(var(--character-height)*.285);overflow:hidden;opacity:.64;filter:blur(.22px);mask-image:linear-gradient(#000 0%,#000e 45%,#0009 78%,transparent 100%);pointer-events:none;z-index:0}
.reflection-girl{left:calc(var(--side) - var(--character-height)*.07)}
.reflection-boy{right:calc(var(--side) - var(--character-height)*.07);--reflection-skew:5deg}
.reflection-projection{position:absolute;top:0;left:calc(var(--character-height)*.07);width:calc(var(--character-height)*.36);height:var(--character-height);transform-origin:50% 0;transform:perspective(calc(var(--character-height)*2.8)) rotateX(35deg) skewX(var(--reflection-skew)) scaleY(.85)}
.reflection-figure{position:absolute;top:0;width:100%;height:var(--character-height);transform:scaleY(-1);transform-origin:center}
.reflection-figure.character-girl{left:0}
.reflection-figure.character-boy{right:0}
.reflection-figure img{filter:brightness(1.18) saturate(.85) contrast(1.04)}
.fated-identities{position:absolute;top:calc(var(--baseline) + var(--caption-offset));left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:72px;white-space:nowrap;pointer-events:none;z-index:3}
.identity-caption{display:inline-flex;align-items:baseline;justify-content:center;gap:6px;min-width:96px;font:23px/1.3 var(--hand);letter-spacing:.3px;color:var(--girl-color);text-shadow:0 2px 8px #000;transition:text-shadow .22s,color .22s}
.identity-caption b{font:700 25px/1.2 var(--hand);letter-spacing:1px}
.identity-caption[data-identity-caption="007"]{color:var(--boy-color)}
.fated-login[data-selected-identity="002"] [data-identity-caption="002"],.fated-login:has(.character-girl:hover) [data-identity-caption="002"]{color:#f9d8e7;text-shadow:0 0 13px #e6b2c680}
.fated-login[data-selected-identity="007"] [data-identity-caption="007"],.fated-login:has(.character-boy:hover) [data-identity-caption="007"]{color:#dfedfa;text-shadow:0 0 13px #b5cfdf80}
.fated-question{position:absolute;top:calc(var(--baseline) + 7svh);left:50%;transform:translateX(-50%);width:300px;text-align:center;z-index:3}
.fated-question[hidden]{display:none}
.fated-question label{display:block;font-size:16px;font-weight:600;letter-spacing:1px;color:var(--entry-color);margin-bottom:9px;line-height:1.5}
.fated-answer-row{display:flex;align-items:center;justify-content:center;gap:12px;padding-left:42px}
.fated-digits{position:relative;width:184px;height:44px;border-radius:13px}
.fated-digit-slots{display:flex;gap:8px;height:100%}
.fated-digit-slots span{width:40px;border:1.5px solid var(--entry-border);border-radius:12px;background:var(--entry-fill);box-shadow:0 3px 0 #0007;color:var(--entry-color);font:700 25px/40px var(--hand);transition:border-color .2s,background .2s,box-shadow .2s}
.fated-digits:focus-within .is-current{border-color:var(--entry-color);box-shadow:0 0 0 3px #ffffff0d}
.fated-digits input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:text;font-size:20px;caret-color:transparent}
.fated-digits:focus-within{outline:2px solid var(--entry-border);outline-offset:5px}
.fated-enter{display:grid;place-items:center;background:var(--entry-fill);border:1px solid var(--entry-border);color:var(--entry-color);width:42px;height:42px;padding:8px;border-radius:50%;box-shadow:0 3px 0 #0007}
.fated-enter svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.fated-enter:hover svg{transform:translateX(2px)}
.fated-error{min-height:18px;margin-top:8px;font:12px/1.5 var(--round);color:#f4b7c4;letter-spacing:.3px}
.fated-login button:focus-visible{outline:2px solid var(--entry-color);outline-offset:5px}
.fated-login.has-error .fated-digit-slots span{border-color:#e8a1b8}
.fated-login.is-verifying .fated-digit-slots{opacity:.55}
.fated-login{transition:opacity .42s ease}
.fated-login.is-entering{opacity:0;pointer-events:none}
@media(max-width:600px){
  .fated-login{--baseline:72svh;--character-height:31svh;--side:12px;--cloud-width:78vw;--cloud-height:min(calc(var(--memory-zone) - 6svh),calc(var(--cloud-width)*1.12))}
  .identity-caption{min-width:80px;font-size:18px;gap:4px}.identity-caption b{font-size:22px}.fated-identities{gap:36px}
  .print-1{--x:0%;--y:4%;--w:48%;--angle:-13deg;--layer:3}
  .print-2{--x:43%;--y:0%;--w:47%;--angle:12deg;--layer:1}
  .print-3{--x:8%;--y:25%;--w:49%;--angle:-17deg;--layer:9}
  .print-4{--x:55%;--y:37%;--w:47%;--angle:14deg;--layer:4}
  .print-5{--x:-2%;--y:66%;--w:48%;--angle:8deg;--layer:5}
  .print-6{--x:25%;--y:64%;--w:50%;--angle:-9deg;--layer:7}
  .print-7{--x:24%;--y:9%;--w:46%;--angle:8deg;--layer:2}
  .print-8{--x:62%;--y:73%;--w:48%;--angle:-13deg;--layer:8;--focus:50% 40%}
  .print-9{--x:57%;--y:19%;--w:47%;--angle:-6deg;--layer:6}
  .print-10{--x:-3%;--y:45%;--w:47%;--angle:16deg;--layer:10}
  .print-11{--x:34%;--y:43%;--w:48%;--angle:9deg;--layer:11}
}
@media(max-height:600px){
  .fated-login{--baseline:60svh;--character-height:33svh;--caption-offset:17px;min-height:320px}
  .fated-question{top:calc(var(--baseline) + 45px)}.fated-question label{font-size:14px;margin-bottom:5px}
  .fated-digits{height:38px}.fated-digit-slots span{font-size:23px;line-height:34px}.fated-enter{width:38px;height:38px}
  .fated-error{font-size:11px;margin-top:5px}.identity-caption{font-size:19px}.identity-caption b{font-size:22px}
}
@media(max-height:600px) and (min-width:601px){
  .fated-login{--cloud-width:86vw}
  .print-1{--x:0%;--y:0%;--w:18%;--angle:-13deg}
  .print-2{--x:14%;--y:37%;--w:17%;--angle:10deg}
  .print-3{--x:29%;--y:-9%;--w:18%;--angle:-16deg}
  .print-4{--x:47%;--y:34%;--w:17%;--angle:14deg}
  .print-5{--x:63%;--y:-3%;--w:17%;--angle:8deg}
  .print-6{--x:80%;--y:34%;--w:18%;--angle:-9deg}
  .print-7{--x:60%;--y:48%;--w:17%;--angle:12deg}
  .print-8{--x:82%;--y:-7%;--w:18%;--angle:-13deg}
  .print-9{--x:42%;--y:2%;--w:18%;--angle:-6deg}
  .print-10{--x:13%;--y:-5%;--w:17%;--angle:17deg}
  .print-11{--x:30%;--y:48%;--w:18%;--angle:9deg}
}
@media(max-width:350px){.fated-question{width:290px}.fated-identities{gap:32px}.identity-caption{min-width:76px;font-size:17px}.identity-caption b{font-size:21px}}
.fated-memory-preview{position:fixed;inset:0;margin:auto;width:fit-content;max-width:94vw;max-height:94svh;padding:8px;border:1px solid #f1ede650;border-radius:3px;background:#151416;color:#f4ede6;overflow:visible;box-shadow:0 20px 80px #000b}
.fated-memory-preview::backdrop{background:#050506ed;backdrop-filter:blur(5px)}
.fated-memory-preview>img{width:auto;height:auto;max-width:calc(94vw - 18px);max-height:calc(94svh - 18px);object-fit:contain}
.memory-preview-close{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;padding:10px;border:1px solid #ffffff80;border-radius:50%;background:#09090cbf;color:#fff;z-index:1}
.memory-preview-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){.night-twinkle{animation:none}.night-meteor{display:none}.fated-character,.fated-character:before{transition:none}}
@media(prefers-reduced-motion:reduce){.night-nebula,.fated-horizon svg{animation:none}}