@font-face{font-family:Inter;src:url("/login-ui/assets/fonts/inter-latin.woff2") format('woff2');font-style:normal;font-weight:100 900;font-display:swap} @font-face{font-family:Geist Mono;src:url("/login-ui/assets/fonts/geist-mono-regular.ttf") format('truetype');font-weight:400;font-display:swap} :root{--space-black:#08090b;--moon-white:#f2f2ee;--lunar-gray:#a4a3a0;--signal-orange:#d98859;--signal-orange-rgb:217 136 89;--font-mono-cjk:"Geist Mono","PingFang SC","Microsoft YaHei",sans-serif;--line:rgba(242,242,238,.19);--font-sans:Inter,"PingFang SC","Microsoft YaHei",sans-serif;--font-mono:"Geist Mono",monospace;color-scheme:dark} *{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--space-black);color:var(--moon-white);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}a,button{transition:color .2s,background .2s,border-color .2s,opacity .2s,transform .2s}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--signal-orange);outline-offset:5px}button{border:0;background:none}button:disabled{cursor:default}::selection{background:#8b4735;color:#fff}.mono{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;font-weight:400}.space-page{--page-gutter:3.4vw;--login-column:400px;position:relative;isolation:isolate;min-height:100vh;min-height:100svh;padding:0 3.4vw;display:grid;grid-template-columns:1fr 400px;--header-row:clamp(56px,9svh,92px);grid-template-rows:var(--header-row) 1fr auto;column-gap:6vw}.scene,.scene-shade{position:fixed;inset:0;width:100vw;height:100vh;height:100svh;z-index:-2;pointer-events:none}.scene{--scene-image:url("/login-ui/assets/images/scene-flat.webp");--scene-position:42% center}.scene-shade{z-index:-1;background:linear-gradient(90deg,rgba(8,9,11,.1) 0%,transparent 40%,rgba(8,9,11,.2) 60%,rgba(8,9,11,.69) 100%),linear-gradient(0deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.27) 16%,transparent 40%,rgba(8,9,11,.08) 83%,rgba(8,9,11,.55) 100%)}.site-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:25px}.wordmark{display:flex;align-items:center;flex-shrink:0}.brand-logo{display:block;width:112px;height:auto;filter:invert(1);}.header-center{display:flex;align-items:center;gap:11px;font-size:9px;color:#c1bdb6;letter-spacing:.18em}.signal-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--signal-orange);flex-shrink:0}.language-switch{display:flex;align-items:center;gap:11px;font-family:var(--font-mono);font-size:11px}.language-switch>svg{margin-right:5px;color:#b2afa7}.language-switch>span{color:#726e65}.language-switch button{padding:10px 0;color:#999890;font-size:11px}.language-switch button[aria-pressed=true]{color:var(--moon-white)}.language-switch button:hover{color:var(--signal-orange)}.scene-story{grid-column:1;grid-row:2;align-self:start;padding-top:70px}.eyebrow{margin:0;display:flex;align-items:center;gap:10px;color:#c8c2b9;font-size:9px;letter-spacing:.18em}.tiny-line{width:20px;height:1px;background:var(--signal-orange)}h1{font-size:clamp(28px,2.5vw,42px);font-weight:400;line-height:1.25;letter-spacing:.065em;margin:21px 0 13px;text-shadow:0 2px 25px #08090b44}.story-caption{font-size:11px;letter-spacing:.18em;color:#bcb4a8;margin:0}.login-panel{grid-column:2;grid-row:2;width:100%;max-width:376px;margin:clamp(16px,3svh,48px) 1.5vw clamp(20px,4svh,78px) 0;align-self:center;justify-self:start;position:relative}.panel-topline{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(242,242,238,.38);padding-top:13px;color:#b5b1a9}.panel-topline .mono{font-size:9px;letter-spacing:.16em}.welcome-eyebrow{margin-top:36px;font-size:9px;color:#cac2b6;letter-spacing:.19em}.welcome-eyebrow .signal-dot{width:4px;height:4px}h2{margin:17px 0 0;font-weight:400}h2>span{display:block;font-size:20px;letter-spacing:.04em;font-weight:350;line-height:1.5}h2 strong{display:flex;align-items:flex-start;gap:5px;font-size:39px;line-height:1.2;font-weight:650;letter-spacing:-1.9px;margin-top:3px;white-space:nowrap}.registered-mark{font-size:.36em;line-height:1;font-weight:400;letter-spacing:0;margin-top:.3em}.login-description{color:#b9b6ae;font-size:11px;letter-spacing:.065em;margin:16px 0 29px}.login-methods{display:flex;gap:30px;border-bottom:1px solid var(--line)}.login-methods button{padding:0 0 13px;font-size:12px;letter-spacing:.05em;color:#a4a099;position:relative}.login-methods button[aria-pressed=true]{color:var(--moon-white)}.login-methods button[aria-pressed=true]::after{content:"";position:absolute;height:2px;bottom:-1px;left:0;right:0;background:var(--signal-orange)}.login-methods button:hover{color:var(--moon-white)}.fields{margin-top:22px}.field{display:block;border-bottom:1px solid rgba(242,242,238,.3);transition:border-color .2s}.field:focus-within{border-color:var(--signal-orange)}.field-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#d5d0c7;letter-spacing:.08em}.field-label .mono{color:#928d83;font-size:8px}.input-row{display:flex;align-items:center;min-height:46px;gap:14px}.input-row input{width:100%;min-width:0;border:0;background:transparent;color:var(--moon-white);padding:12px 0;font-size:13px;outline:none;box-shadow:none;border-radius:0}.input-row input::placeholder{color:#a29b90;font-size:12px;letter-spacing:.025em}.input-row input:focus-visible{outline:none}.input-row input:-webkit-autofill{-webkit-box-shadow:none!important;box-shadow:none!important;-webkit-background-clip:text!important;background-clip:text!important;caret-color:#f2f2ee;-webkit-text-fill-color:var(--moon-white)}.country-code{display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:0;color:#e2dcd1;white-space:nowrap;padding-right:13px;border-right:1px solid var(--line)}.country-code>span{color:#aaa195;font-size:13px}.password-field{margin-top:23px}.reveal-password{padding:10px 0 10px 12px;color:#b3ab9f;display:flex;min-width:34px;justify-content:center}.reveal-password:hover{color:var(--moon-white)}.form-options{display:flex;justify-content:flex-end;margin:13px 0 23px;font-size:10px;letter-spacing:.035em;color:#c4bbad}.form-options a:hover,.consent a:hover,.legal-footer a:hover{color:var(--moon-white)}.enter-button{width:100%;padding:0 20px;min-height:50px;display:flex;align-items:center;justify-content:space-between;background:var(--moon-white);color:#171613;font-size:11px;font-weight:600;letter-spacing:.07em;border:1px solid var(--moon-white)}.enter-button:hover{background:#fff4da;border-color:#fff4da}.enter-button:hover svg{transform:translateX(4px)}.enter-button svg{transition:transform .2s}.enter-button:active{transform:translateY(1px)}.consent{margin:14px 0 0;font-size:9px;line-height:1.9;color:#b3aaa0;text-align:center;letter-spacing:.015em}.consent a{color:#ddd5c9}.apply-row{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:11px}.apply-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px}.apply-content>span{color:#b6ada1;font-size:10px}.apply-row a{display:flex;gap:12px;align-items:center}.apply-row a:hover{color:var(--signal-orange)}.scene-credit{position:absolute;top:50%;transform:translateY(-50%);left:calc(2 * var(--page-gutter) + var(--login-column) - 100vw);width:max-content;display:flex;gap:13px;align-items:center}.credit-marker{display:flex;color:#d5c3aa}.scene-credit p{font-size:9px;margin:0;letter-spacing:.16em;color:#e4d7c5}.site-footer{grid-column:1/-1;grid-row:3}.footer-line{min-height:53px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);border-top:1px solid var(--line);color:#d0c9bc}.location{display:flex;gap:10px;align-items:center}.coordinates{margin-left:16px;color:#b2ab9f;font-size:9px;letter-spacing:.06em}.footer-dash{color:#a89985}.footer-mission{font-size:8px;color:#a69f94;letter-spacing:.18em}.legal-footer{padding:17px 0 19px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:8px;color:#a09b93;line-height:1.6}.legal-footer>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px}.preview-notice{font-size:11px;line-height:1.8;padding:13px 0 0;color:#f2d1bc}.preview-notice a{display:flex;align-items:center;gap:5px;text-decoration:underline;text-underline-offset:3px}.skip-link{position:fixed;top:8px;left:8px;z-index:20;background:#f2f2ee;color:#08090b;padding:12px;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)} @media(min-width:1600px){.space-page{--page-gutter:4vw;--login-column:420px;grid-template-columns:1fr 420px;column-gap:9vw;padding:0 4vw}.login-panel{max-width:390px;margin-right:1vw}.scene-story{padding-top:85px}.space-page{--header-row:clamp(56px,9svh,100px)}} @media(max-width:1100px){.space-page{--page-gutter:4vw;--login-column:350px;grid-template-columns:1fr 350px;column-gap:5vw;padding:0 4vw}.login-panel{max-width:350px;margin-right:0}.header-center{font-size:8px;letter-spacing:.09em}h1{font-size:29px}.scene-story{padding-top:50px}.scene{--scene-position:38% center}.footer-mission{display:none}.legal-footer{align-items:flex-start}.legal-footer>div{gap:8px 12px;max-width:62%}.coordinates{margin-left:5px;font-size:8px}} @media(max-width:760px){.scene,.scene-shade{height:100svh}.space-page{display:flex;flex-direction:column;padding:0 24px;min-height:100svh}.scene{--scene-image:url("/login-ui/assets/images/scene-flat-mobile.webp");--scene-position:28% top;--scene-size:auto 800px}.scene-shade{background:linear-gradient(180deg,rgba(8,9,11,.18) 0%,rgba(8,9,11,.14) 13%,rgba(8,9,11,.71) 31%,rgba(8,9,11,.87) 66%,#08090b 93%)}.site-header{min-height:74px;gap:14px}.brand-logo{width:96px}.header-center{display:none}.language-switch{gap:10px}.scene-story{padding:36px 0 34px}.scene-story .eyebrow{font-size:8px}h1{font-size:27px;line-height:1.25;margin:13px 0 0}.story-caption{display:none}.login-panel{width:100%;max-width:400px;margin:0 auto 36px;align-self:initial}.panel-topline{padding-top:11px}.welcome-eyebrow{margin-top:26px}h2>span{font-size:18px}h2 strong{font-size:35px}.login-description{margin-bottom:25px}.input-row input{font-size:16px}.input-row{min-height:49px}.enter-button{min-height:52px}.consent{font-size:10px}.apply-row{margin-top:24px}.scene-credit{display:none}.site-footer{margin-top:auto}.footer-line{min-height:48px}.footer-line>.mono,.location{font-size:8px}.location{gap:7px}.coordinates{display:none}.legal-footer{flex-direction:column;font-size:8px;gap:10px;padding:15px 0 20px}.legal-footer>div{max-width:100%;justify-content:flex-start;gap:8px 12px}.reveal-password{min-width:42px;min-height:44px}} /* A quiet audio control beside the wordmark, with the same HUD typography. */ .header-brand{display:flex;align-items:center;gap:22px;flex-shrink:0} .sound-control{position:relative} .music-switch{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 0 0 20px;position:relative;color:#bcb6ad;font-size:10px;letter-spacing:.08em;white-space:nowrap} .music-switch::before{content:"";position:absolute;left:0;top:14px;height:16px;width:1px;background:var(--line)} .music-switch:hover{color:var(--moon-white)} .music-switch[data-state=on]{color:var(--moon-white)} .sound-label{display:block;min-width:58px;text-align:left} .sound-wave{display:flex;align-items:center;justify-content:center;gap:2px;width:18px;height:18px;flex-shrink:0} .sound-wave i{display:block;width:2px;height:3px;background:currentColor;transform-origin:center;transition:height .3s,color .3s} .sound-wave i:nth-child(2),.sound-wave i:nth-child(4){height:6px} .sound-wave i:nth-child(3){height:9px} .music-switch[data-state=on] .sound-wave{color:var(--signal-orange)} .music-switch[data-state=on] .sound-wave i{height:15px;animation:sound-wave 1.15s ease-in-out infinite alternate} .music-switch[data-state=on] .sound-wave i:nth-child(2){animation-delay:-.65s} .music-switch[data-state=on] .sound-wave i:nth-child(3){animation-delay:-.3s} .music-switch[data-state=on] .sound-wave i:nth-child(4){animation-delay:-.9s} .music-switch[data-state=on] .sound-wave i:nth-child(5){animation-delay:-.45s} .music-switch[data-state=loading] .sound-wave{opacity:.55} .music-switch[data-state=error]{color:#e9a488} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} @keyframes sound-wave{0%{transform:scaleY(.2)}45%{transform:scaleY(.72)}100%{transform:scaleY(1)}} @media(max-width:1000px){.header-center{display:none}} @media(max-width:760px){.header-brand{gap:16px}.music-switch{padding-left:16px;gap:8px}} @media(max-width:420px){.header-brand{gap:10px}.music-switch{padding-left:12px;gap:7px}.sound-word{display:none}.sound-label{min-width:30px}.site-header{gap:10px}.language-switch{gap:8px}.language-switch>svg{margin-right:0}} @media(max-width:350px){.header-brand .brand-logo{width:88px}.space-page{padding-left:18px;padding-right:18px}} /* Shared cover/crop coordinates keep all eight source canvases aligned. */ .scene{overflow:hidden;background:#08090b} .scene-surface{position:absolute;inset:0;background-image:var(--scene-image);background-size:var(--scene-size,cover);background-position:var(--scene-position);background-repeat:no-repeat;background-color:#08090b} .scene-layers{position:absolute;inset:0;visibility:hidden} .scene-canvas{display:block;width:100%;height:100%;pointer-events:none;user-select:none} .scene[data-ready=true] .scene-layers{visibility:visible} @media(min-width:761px) and (prefers-reduced-motion:no-preference) and (any-pointer:fine){.scene-surface{background-size:max(106vw,189.359224svh) auto}} .space-page[data-spatial-ready=true]{cursor:grab} .space-page[data-spatial-ready=true] :is(.site-header,.scene-story,.login-panel,.site-footer){cursor:auto} .space-page[data-spatial-dragging=true],.space-page[data-spatial-dragging=true] *{cursor:grabbing!important;user-select:none} @media(max-width:760px),(prefers-reduced-motion:reduce){.scene-layers{display:none}} /* Tighten vertical whitespace on laptop screens without scaling or clipping the UI. Keep the background tied to the viewport, independent of translated content. */ @media(max-height:850px){ .space-page{--compact-space:clamp(0px,calc(10svh - 60px),25px)} .scene-story{padding-top:clamp(24px,6svh,50px)} .login-panel{margin-top:1.5svh;margin-bottom:1.5svh} .panel-topline{padding-top:8px} .welcome-eyebrow{margin-top:calc(8px + var(--compact-space));line-height:1.4} h2{margin-top:clamp(6px,1.5svh,12px)} h2>span{font-size:18px;line-height:1.4} h2 strong{font-size:35px;line-height:1.15} .login-description{line-height:1.4;margin:8px 0 calc(10px + var(--compact-space) * .3)} .login-methods button{padding-bottom:8px;line-height:1.3} .fields{margin-top:calc(10px + var(--compact-space) * .3)} .field-label{line-height:14px} .input-row{min-height:44px} .password-field{margin-top:calc(8px + var(--compact-space) * .4)} .form-options{margin:8px 0 12px;line-height:14px} .enter-button{min-height:46px} .consent{margin-top:10px;line-height:1.6} .apply-row{margin-top:12px;padding-top:12px} .apply-content{line-height:16px} .footer-line{min-height:38px} .legal-footer{padding:10px 0;gap:8px} } @media(min-width:761px) and (max-height:640px){ .space-page{--header-row:52px} .login-panel{margin-top:6px;margin-bottom:6px} .welcome-eyebrow{margin-top:6px} h2{margin-top:6px} .login-description{margin:6px 0 8px} .form-options{margin:6px 0 8px} .apply-row{margin-top:10px;padding-top:10px} .footer-line{min-height:32px} .legal-footer{padding:8px 0} } @media(max-width:760px) and (max-height:850px){ .site-header{min-height:60px;flex-shrink:0} .scene-story{padding:18px 0 20px} .login-panel{margin:0 auto 16px} .welcome-eyebrow{margin-top:12px} .legal-footer{gap:6px} } @media(max-width:760px) and (max-height:740px){ .site-header{min-height:54px} .scene-story{padding:12px 0 14px} h1{font-size:23px;margin-top:8px} .login-panel{margin-bottom:10px} .welcome-eyebrow{margin-top:6px} h2{margin-top:6px} .login-description{margin:6px 0 8px} .fields{margin-top:8px} .password-field{margin-top:8px} .apply-row{margin-top:10px;padding-top:10px} .legal-footer{padding:8px 0} } @media(prefers-reduced-motion:no-preference){.login-panel{animation:arrive .7s ease-out both}.scene-story{animation:arrive .9s ease-out both}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}} /* Requested spacing between wordmark and login methods. */ .login-panel h2{margin-bottom:28px} /* User-requested welcome row and relocated orange dot. */ .login-panel h2{margin-top:36px} .login-panel h2>.welcome-row{display:flex;align-items:center;gap:10px} /* Raise only the user-marked content; preserve submit and footer positions. */ .login-panel #login-title,.login-panel .login-methods,.login-panel .fields,.login-panel .form-options{position:relative;top:-36px} .panel-topline>svg{margin-left:auto} .login-panel .enter-button{position:relative;top:-16px} /* ── owner 2026-09-22 登录页验收改点(④⑤⑥⑦)──────────────────────────────── ④⑥ 字段标签(手机号码 / 验证码 / 邮箱地址 / 密码)对客不再显示——占位符已经 承载了字段身份。🔴 用**视觉隐藏**而不是删 DOM: