:root {
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  color:#eee3d0;
  background:#0b1423;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { min-width:280px; min-height:100%; }
body { margin:0; min-height:100svh; min-height:100dvh; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.access-sky { position:fixed; inset:0; overflow:hidden; pointer-events:none; user-select:none; background:radial-gradient(ellipse at 50% 43%,#29384b80,transparent 65%),#0b1423; }
.orbit { position:absolute; left:50%; top:45%; width:min(87vw,730px); aspect-ratio:1; border:1px solid #d7bd8b12; border-radius:50%; animation:orbit-drift 60s linear infinite; }
.orbit-one { transform:translate(-50%,-50%) rotate(-25deg) scaleY(.57); }
.orbit-two { width:min(95vw,800px); border-color:#a9c4e014; animation-name:orbit-return; animation-duration:80s; transform:translate(-50%,-50%) rotate(37deg) scaleY(.72); }
.orbit::after { content:""; position:absolute; left:21%; top:8.5%; width:4px; height:4px; background:#d7bd8b7a; border-radius:50%; box-shadow:0 0 12px #d7bd8b40; }
.sky-star { position:absolute; width:3px; height:3px; border-radius:50%; background:#d7bd8b6e; }
.sky-star-one { top:20%; left:17%; }
.sky-star-two { top:72%; right:17%; width:2px; height:2px; }
.sky-star-three { bottom:18%; left:29%; width:2px; height:2px; opacity:.5; }
.access-page { position:relative; display:grid; place-items:center; min-height:100svh; min-height:100dvh; padding:max(32px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
.access-card { width:min(370px,100%); animation:arrival .9s ease both; }
.access-envelope { width:154px; margin:0 auto 22px; user-select:none; pointer-events:none; }
.access-envelope svg { display:block; width:100%; height:auto; overflow:visible; }
.envelope-glow { fill:#d7bd8b08; }
.envelope-paper { fill:#e3d1ac09; stroke:#d7bd8b6b; stroke-width:1; }
.envelope-edge { fill:#172333; stroke:#d7bd8bbd; stroke-width:1.2; }
.envelope-fold { stroke:#d7bd8b8c; stroke-width:1; }
.envelope-seal { fill:#273242; stroke:#d7bd8be0; stroke-width:1; }
.envelope-spark { fill:#d7bd8b; }
.envelope-far-star { stroke:#d7bd8b8c; stroke-width:1; }
h1 { margin:0; text-align:center; color:#eee3d0; font-family:"Songti SC","Noto Serif SC","SimSun",serif; font-size:clamp(23px,5.8vw,29px); font-weight:400; line-height:1.7; letter-spacing:.06em; text-wrap:balance; }
.access-description { margin:14px 0 0; color:#a7adb5; text-align:center; font-size:13px; line-height:1.9; }
.access-form { margin-top:31px; }
.access-form label { display:block; margin-bottom:11px; color:#cbb999; font-size:12px; line-height:1.5; letter-spacing:.16em; }
.access-field { display:flex; align-items:center; height:52px; border:1px solid #bca3755c; border-radius:3px; background:#0a122047; transition:border-color .2s,box-shadow .2s; }
.access-field:focus-within { border-color:#d7bd8b; box-shadow:0 0 0 3px #d7bd8b15; }
.access-field:has(input[aria-invalid="true"]) { border-color:#db9e8b; }
.access-field>svg { flex:0 0 20px; width:20px; height:20px; margin-left:16px; stroke:#c5ae88; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.access-field input { flex:1; width:0; min-width:0; height:100%; border:0; outline:0; padding:0 15px 0 12px; border-radius:3px; color:#eee3d0; background:transparent; font-size:16px; line-height:1.4; letter-spacing:.05em; }
.access-field input::placeholder { color:#8c96a4; opacity:1; font-size:13px; letter-spacing:.08em; }
.access-error { min-height:39px; margin:0; padding-top:9px; color:#e9b6a4; font-size:12px; line-height:1.6; }
.access-submit { position:relative; display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:48px; border:1px solid #d2b98d; border-radius:3px 13px 3px 3px; padding:10px 22px; color:#152031; background:linear-gradient(115deg,#e3d1ac,#cdb284); box-shadow:0 5px 24px #0002; font-size:14px; line-height:1.6; letter-spacing:.13em; cursor:pointer; transition:filter .2s,transform .2s,box-shadow .2s; }
.access-submit svg { position:absolute; right:20px; width:21px; height:21px; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.access-submit:focus-visible { outline:2px solid #eee3d0; outline-offset:5px; }
.access-submit:active:not(:disabled) { transform:translateY(1px); }
.access-submit:disabled { cursor:wait; opacity:.8; }
@media(hover:hover) { .access-submit:hover:not(:disabled) { filter:brightness(1.06); box-shadow:0 7px 28px #d7bd8b12; } .access-submit:hover:not(:disabled) svg { transform:translateX(3px); } }
@media(max-height:560px) { .access-page { padding-top:max(22px,env(safe-area-inset-top)); padding-bottom:max(22px,env(safe-area-inset-bottom)); } .access-envelope { width:108px; margin-bottom:12px; } .access-form { margin-top:20px; } }
@media(max-height:460px) and (min-width:520px) {
  .access-card { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:32px; width:min(560px,100%); }
  .access-envelope { width:120px; margin:0; }
  h1 { text-align:left; font-size:24px; line-height:1.5; letter-spacing:.04em; }
  .access-description { text-align:left; margin-top:9px; }
  .access-form { margin-top:21px; }
}
@media(max-height:290px) { .access-page { padding-top:max(15px,env(safe-area-inset-top)); padding-bottom:max(15px,env(safe-area-inset-bottom)); } .access-form { margin-top:12px; } .access-form label { margin-bottom:7px; } .access-field { height:46px; } .access-error { min-height:31px; padding-top:5px; } .access-submit { min-height:44px; padding-top:8px; padding-bottom:8px; } }
@media(max-width:340px) { .access-page { padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); } h1 { font-size:22px; } }
@keyframes arrival { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes orbit-drift { from { transform:translate(-50%,-50%) rotate(-25deg) scaleY(.57); } to { transform:translate(-50%,-50%) rotate(335deg) scaleY(.57); } }
@keyframes orbit-return { from { transform:translate(-50%,-50%) rotate(37deg) scaleY(.72); } to { transform:translate(-50%,-50%) rotate(-323deg) scaleY(.72); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }