*{box-sizing:border-box}html,body{margin:0;min-height:100%}
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --login-bg:#05070b;
  --login-panel:rgba(12,16,22,.84);
  --login-line:rgba(255,255,255,.16);
  --login-text:#f8fafc;
  --login-muted:#aeb8c8;
}
body{--c1:68,228,255;--c2:178,92,255;--c3:255,138,61;min-height:100vh;background:var(--login-bg);color:var(--login-text);font-family:var(--font-sans);overflow:hidden;position:relative;transition:background .35s ease}
body.type-serif{--c1:255,255,255;--c2:184,216,255;--c3:255,241,194}
body.type-compact{--c1:247,247,242;--c2:68,228,255;--c3:178,92,255}
body.type-craft{--c1:255,138,61;--c2:246,255,120;--c3:68,228,255}
body.type-ink{--c1:255,255,255;--c2:185,185,185;--c3:88,88,88}
#ferroCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.62}
body:before{content:"";position:fixed;inset:0;background:
  linear-gradient(rgba(255,255,255,.042) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.042) 1px,transparent 1px);
  background-size:24vw 30vh;opacity:.22;pointer-events:none;z-index:1}
body:after{content:"";position:fixed;right:-15vw;top:-18vh;width:56vw;height:68vh;border-radius:50%;background:
  radial-gradient(circle at 34% 26%,rgba(var(--c1),.18),transparent 40%),
  radial-gradient(circle at 62% 42%,rgba(var(--c2),.17),transparent 44%),
  radial-gradient(circle at 72% 58%,rgba(var(--c3),.14),transparent 46%);
  filter:blur(12px);pointer-events:none;z-index:1}
.shell{min-height:100vh;width:100%;max-width:1680px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:clamp(44px,5vw,96px);align-items:center;padding:46px clamp(34px,5.4vw,108px);position:relative;z-index:2}
.shell:before{content:"";position:absolute;left:50%;top:16vh;width:1px;height:68vh;background:linear-gradient(transparent,rgba(255,255,255,.12),transparent);opacity:.55;pointer-events:none}
.brand{position:absolute;left:clamp(28px,5.8vw,96px);top:28px;display:flex;align-items:center;gap:14px;color:#fff;font-size:17px;font-weight:950;letter-spacing:.08em;z-index:3}
.brand-logo{width:40px;height:40px;padding:4px;border-radius:9px;background:#fff;object-fit:contain;display:block;filter:drop-shadow(0 0 16px rgba(255,255,255,.14))}
.nav{position:absolute;right:clamp(28px,5.8vw,96px);top:42px;display:flex;gap:28px;font-size:14px;font-weight:800;letter-spacing:.08em;z-index:3}.nav a{color:#aeb7a9;text-decoration:none}.nav a:hover{color:#fff}
.poster{position:relative;min-height:680px;display:flex;align-items:center;padding-bottom:72px;animation:loginRise .58s cubic-bezier(.2,.7,.2,1) both}
.poster>div:first-child{position:relative;z-index:6;width:min(800px,100%)}
.kicker{position:relative;margin:-18px 0 0 4px;color:#fff;font-size:13px;font-weight:950;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 0 22px rgba(255,255,255,.22);z-index:4}
.hero-slogan{display:block;width:max-content;max-width:none;margin:0 0 34px 4px;color:#fff;font-size:clamp(24px,2vw,34px);line-height:1.04;font-weight:950;letter-spacing:-.045em;white-space:nowrap;text-shadow:0 18px 48px rgba(0,0,0,.55),0 0 28px rgba(255,255,255,.14)}
.hero-slogan:before{content:"";display:block;width:72px;height:3px;border-radius:999px;margin:0 0 14px;background:linear-gradient(120deg,rgb(var(--c1)),rgb(var(--c2)),rgb(var(--c3)));box-shadow:0 8px 22px rgba(0,0,0,.28)}
.hero-slogan span{display:block;background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;white-space:nowrap}
.huge{font-size:clamp(92px,13vw,188px);font-weight:950;line-height:.78;letter-spacing:-.085em;color:#f7f7f2;text-transform:uppercase;text-shadow:0 0 44px rgba(255,255,255,.10)}
.huge span{display:block}.huge .offset{padding-left:clamp(58px,8vw,140px)}
.huge.zh{font-size:clamp(118px,12.6vw,218px);line-height:.84;letter-spacing:-.12em;text-transform:none;margin-top:10px}
.huge.zh span:nth-child(2){padding-left:4px;font-size:.6em;letter-spacing:-.06em;margin-top:20px}
.huge.zh span{
  background:linear-gradient(120deg,rgb(var(--c1)) 0%,rgb(var(--c2)) 42%,rgb(var(--c3)) 82%,#f6ff78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.35))
    drop-shadow(0 0 24px rgba(var(--c2),.30))
    drop-shadow(0 22px 48px rgba(0,0,0,.16));
}
.huge.zh span{will-change:contents,filter}.huge.zh.is-shuffling span{filter:drop-shadow(0 0 20px rgba(68,228,255,.24))}
body.type-gradient .huge.zh{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-weight:950;letter-spacing:-.12em}
body.type-serif .huge.zh{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-weight:900;letter-spacing:-.17em}
body.type-serif .huge.zh span{background:linear-gradient(115deg,rgb(var(--c1)) 0%,rgb(var(--c2)) 48%,rgb(var(--c3)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.type-compact .huge.zh{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;font-weight:1000;letter-spacing:-.04em;transform:scaleX(.82);transform-origin:left center}
body.type-compact .huge.zh span{background:linear-gradient(120deg,rgb(var(--c1)) 0%,rgb(var(--c2)) 45%,rgb(var(--c3)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.type-craft .huge.zh{font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;font-weight:900;letter-spacing:-.11em;transform:skewX(-5deg);transform-origin:left center}
body.type-craft .huge.zh span{background:linear-gradient(125deg,rgb(var(--c1)) 0%,rgb(var(--c2)) 42%,rgb(var(--c3)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.type-ink .huge.zh{font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;font-weight:900;letter-spacing:-.16em;transform:rotate(-1.5deg);transform-origin:left center}
body.type-ink .huge.zh span{
  background:
    radial-gradient(circle at 16% 24%,rgba(255,255,255,.95) 0 6%,transparent 16%),
    radial-gradient(circle at 82% 76%,rgba(68,228,255,.34) 0 4%,transparent 14%),
    linear-gradient(120deg,#ffffff 0%,#cfcfcf 42%,#6f6f6f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.95))
    drop-shadow(0 0 18px rgba(255,255,255,.18))
    drop-shadow(10px 8px 0 rgba(255,255,255,.035));
}
body.type-ink .huge.zh span:nth-child(1){transform:translateX(-8px) rotate(-2deg)}
body.type-ink .huge.zh span:nth-child(2){transform:translateX(18px) rotate(2deg)}
.statement{position:absolute;left:min(38vw,620px);top:230px;max-width:420px;font-size:36px;line-height:1.04;font-weight:950;letter-spacing:-.055em;text-transform:uppercase;color:#fff;z-index:4;text-shadow:0 12px 34px rgba(0,0,0,.62)}
.statement .accent{display:block;color:rgb(var(--c2))}
.statement .white{display:block;color:#fff}
.statement .signature{display:block;margin-top:18px;padding-left:16px;border-left:3px solid rgba(255,255,255,.72);color:rgb(var(--c2));font-size:20px;line-height:1.12;letter-spacing:-.025em}
.statement .signature small{display:block;margin-top:6px;color:#fff;font-size:12px;letter-spacing:.02em}
.caption{position:relative;left:auto;bottom:auto;max-width:640px;color:#d7dee8;font-size:15px;line-height:1.85;margin-top:24px;padding:0 0 0 18px;border-left:4px solid rgba(255,255,255,.38);z-index:5;text-shadow:0 10px 28px rgba(0,0,0,.72)}.slogan{background:linear-gradient(100deg,rgb(var(--c1)),rgb(var(--c2)),rgb(var(--c3)));-webkit-background-clip:text;background-clip:text;color:transparent}
.meta{position:absolute;left:min(38vw,560px);bottom:20px;display:grid;grid-template-columns:repeat(2,118px);gap:12px;color:#899284;font-size:12px;letter-spacing:.08em;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(5,7,6,.58);backdrop-filter:blur(12px);z-index:5}.meta strong{display:block;color:#f7f7f2;font-size:14px;margin-top:6px}
.card{position:relative;z-index:3;justify-self:end;width:100%;background:linear-gradient(180deg,rgba(14,18,25,.92),rgba(7,10,15,.86));border:1px solid var(--login-line);border-radius:30px;padding:40px;box-shadow:0 34px 92px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(22px);animation:loginCardIn .62s cubic-bezier(.2,.7,.2,1) .08s both}
.card:after{content:"";position:absolute;inset:1px;border-radius:29px;background:radial-gradient(circle at 72% 0%,rgba(var(--c2),.12),transparent 34%),radial-gradient(circle at 8% 100%,rgba(var(--c1),.10),transparent 36%);pointer-events:none}
.card>*{position:relative;z-index:1}
.card:before{content:"LOGIN";position:absolute;right:30px;top:26px;color:rgba(255,255,255,.10);font-size:52px;font-weight:950;letter-spacing:-.06em}
.logo{font-size:31px;font-weight:950;letter-spacing:-.05em;position:relative}.slogan{margin-top:13px;font-size:16px;font-weight:900}.hint{margin:18px 0 28px;color:var(--login-muted);font-size:15px;line-height:1.72}
label{display:block;margin:17px 0 9px;font-size:14px;color:#cdd6e3;font-weight:800}
input{width:100%;height:54px;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:0 18px;font-size:17px;outline:0;background:rgba(255,255,255,.035);color:#fff}
input::placeholder{color:#768294}input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.10);background:rgba(255,255,255,.055)}
button{width:100%;height:56px;border:1px solid rgba(255,255,255,.42);border-radius:16px;background:linear-gradient(120deg, rgba(255,255,255,.36), rgba(255,255,255,.18) 55%, rgba(255,255,255,.30));color:#fff;font-size:17px;font-weight:950;margin-top:28px;cursor:pointer;letter-spacing:.04em;box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.16), 0 18px 42px rgba(0,0,0,.30);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,background .18s ease}
button:hover{background:linear-gradient(120deg, rgba(255,255,255,.46), rgba(255,255,255,.24) 55%, rgba(255,255,255,.38));filter:brightness(1.02);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.18), 0 22px 52px rgba(0,0,0,.34)}.links{display:flex;justify-content:space-between;margin-top:24px;font-size:15px}.links a{color:#dfe6da;text-decoration:none}.links a:hover{color:#fff}.error{min-height:22px;margin-top:13px;color:#ff5f57;font-size:15px;font-weight:800}
@keyframes loginRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes loginCardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.poster,.card{animation:none}button{transition:none}}
@media(max-width:980px){body{overflow:auto}.shell{grid-template-columns:1fr;padding-top:100px}.shell:before{display:none}.poster{min-height:520px}.statement{position:static;margin-top:28px;font-size:30px}.meta{display:none}.card{max-width:460px;width:100%;margin:auto}.nav{display:none}.huge{font-size:clamp(82px,24vw,142px)}}
@media(max-width:600px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{-webkit-text-size-adjust:100%;overflow:auto}
  #ferroCanvas{opacity:.46}
  body:before{background-size:52vw 18vh;opacity:.14}
  .brand{left:16px;top:16px;gap:8px;font-size:14px;letter-spacing:.04em}
  .brand-logo{width:32px;height:28px}
  .nav{display:flex;left:16px;right:16px;top:52px;justify-content:flex-end;gap:12px;font-size:11px;letter-spacing:.02em;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .shell{display:flex;flex-direction:column;align-items:stretch;gap:22px;width:100%;min-height:100svh;padding:92px 16px 28px}
  .shell:before{display:none}
  .poster{min-height:0;max-width:100%;padding:0;display:block;overflow:hidden;animation:none}
  .poster>div:first-child{width:100%}
  .hero-slogan{width:100%;max-width:100%;margin:0 0 18px;font-size:clamp(17px,4.8vw,21px);line-height:1.18;white-space:normal;overflow-wrap:anywhere}
  .hero-slogan span{white-space:normal}
  .hero-slogan:before{width:52px;height:2px;margin-bottom:10px}
  .huge{font-size:clamp(76px,25vw,132px);line-height:.8}
  .huge.zh{font-size:clamp(64px,18vw,94px);line-height:.84;margin-top:4px}
  .huge.zh span:nth-child(2){padding-left:2px;margin-top:12px}
  .kicker{margin:14px 0 0 2px;font-size:10px;letter-spacing:.14em}
  .caption{max-width:100%;margin-top:12px;padding-left:12px;border-left-width:3px;font-size:12px;line-height:1.65}
  .statement{position:static;margin:0 0 2px;font-size:clamp(19px,5.4vw,24px);line-height:1.06;max-width:100%;overflow-wrap:anywhere}
  .statement .signature{margin-top:12px;padding-left:10px;font-size:15px}
  .statement .signature small{font-size:10px}
  .card{width:100%;max-width:none;margin:0;padding:24px 20px;border-radius:22px;animation:none}
  .card:before{right:18px;top:18px;font-size:36px}
  .logo{font-size:25px;padding-right:76px}
  .slogan{margin-top:10px;font-size:14px}
  .hint{margin:14px 0 20px;font-size:14px;line-height:1.6}
  label{margin:14px 0 7px;font-size:14px}
  input{height:52px;min-height:52px;font-size:16px;border-radius:14px}
  button{height:52px;min-height:52px;margin-top:22px;font-size:16px;border-radius:14px}
  .links{margin-top:18px;gap:8px;flex-wrap:wrap;font-size:13px}
  .links a{min-height:40px;display:inline-flex;align-items:center}
}