*{box-sizing:border-box}
:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#3c4541;background:#f9f8f5;font-synthesis:none}
body{margin:0;padding-bottom:48px;min-width:320px;min-height:100svh;display:flex;flex-direction:column;position:relative;isolation:isolate;background:#f9f8f5}
/* Original login background palette and wave geometry. */
.page-backdrop{position:fixed;inset:0;z-index:-1;height:max(100svh,740px);overflow:hidden;pointer-events:none;background:linear-gradient(145deg,#fbfaf8 0%,#f9f8f5 30%,#f6f4ef 60%,#f3f0e9 100%);--r1:max(34.6vw,56svh,414.4px);--r2:calc(var(--r1) + 15.5vw);--r3:calc(var(--r1) + 31vw);--r4:calc(var(--r1) + 48.9vw)}
@supports(background:linear-gradient(in oklab,#fff,#000)){.page-backdrop{background:linear-gradient(145deg in oklab,#fbfaf8 0%,#f9f8f5 30%,#f6f4ef 60%,#f3f0e9 100%)}}
.page-ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 92% 105% at 12% 25%,#ffffff99 0%,#ffffff45 35%,#ffffff10 62%,#ffffff00 85%),radial-gradient(ellipse 85% 100% at 98% 8%,#ffffff80 0%,#ffffff30 40%,#ffffff00 80%),radial-gradient(ellipse 95% 78% at 45% 114%,#e9e5dc38 0%,#eeeae219 46%,#eeeae200 88%)}
/* Sub-pixel static dither softens large flat gradients without visible paper grain. */
.page-ambient::after{content:"";position:absolute;inset:0;opacity:.014;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.page-ripples{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 31%);mask-image:linear-gradient(transparent,#000 15%,#000 87%,#0008)}
.ripple-plane{position:absolute;left:10.15%;top:50%;width:0;height:0}
.ripple{position:absolute;border-radius:50%;left:calc(-1 * var(--radius));top:calc(-1 * var(--radius));width:calc(var(--radius) * 2);height:calc(var(--radius) * 2);box-shadow:inset -6px 0 42px 3px #ffffffa3;border:1px solid #ffffff40}
.ripple-1{--radius:var(--r1)}.ripple-2{--radius:var(--r2)}.ripple-3{--radius:var(--r3)}.ripple-4{--radius:var(--r4)}
@media(max-width:700px){.page-backdrop{height:100svh;--r1:70vw;--r2:97vw;--r3:124vw;--r4:151vw}.page-ripples{height:390px;clip-path:inset(0 0 0 55%);mask-image:linear-gradient(transparent,#000 22%,#000 65%,transparent)}.ripple-plane{top:52%}}
a{color:inherit;text-decoration:none}
button,input{font:inherit}button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid #829b96;outline-offset:5px}
.site-header{height:92px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:relative;z-index:10}
.brand{font-size:19px;font-weight:600;letter-spacing:.04em;display:flex;align-items:center;gap:10px}
.brand-symbol{font-size:30px;font-weight:400;color:#798e82}
.header-right{display:flex;align-items:center;gap:24px}
.preview-label{font-size:11px;color:#979c92;letter-spacing:.12em}
.register{border:1px solid #d9ddd3;border-radius:30px;font-size:13px;padding:12px 21px;background:#ffffff60;transition:background .2s}
.register:hover{background:#ffffffba}.register span{margin-left:14px;color:#9ba499}
main{width:100%;max-width:1510px;margin:auto;display:grid;grid-template-columns:41% 59%;padding:0 5vw;min-height:calc(100svh - 150px);align-items:center;flex:1}
.welcome{--login-inset:24px;position:relative;z-index:3;width:100%;max-width:510px;padding:38px 12px 0;display:flex;flex-direction:column;align-items:center;justify-self:center}
.particle-panel{width:100%;height:clamp(310px,42svh,420px);position:relative;pointer-events:none;margin-bottom:18px;transform:translateX(min(0px,calc(var(--login-inset) + 138px - 50%)))}
#particle-canvas,#particle-points{position:absolute;inset:0;width:100%;height:100%;display:block}
.welcome-copy{width:min(276px,calc(100% - var(--login-inset) * 2));align-self:flex-start;margin-left:var(--login-inset);padding:0;text-align:center}
.welcome-copy p{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:clamp(18px,1.25vw,21px);font-weight:400;line-height:1.7;letter-spacing:.055em;margin:0;color:#58635b;white-space:nowrap}.tagline-brand{font-weight:600}.tagline-dot{display:inline-block;margin:0 .32em;color:#9aa68f;font-weight:400}
.login-wrap{height:158px;width:calc(100% - 48px);max-width:400px;position:relative;align-self:flex-start;margin:30px 0 0 24px}
/* Preserve the original compact button at both form sizes. */
.glass-login{--glass-ease:cubic-bezier(.22,1,.36,1);position:relative;isolation:isolate;width:min(276px,100%);height:64px;border:1px solid #ffffffd1;border-radius:20px;background:linear-gradient(130deg,#ffffff66 0%,#e3ddcf38 65%,#eae5dc52 100%);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #aca79b14,0 8px 28px -13px #49473d28,0 1px 4px #49473d07;transition:width .52s var(--glass-ease),height .52s var(--glass-ease),border-radius .52s var(--glass-ease),box-shadow .3s}
.glass-login[data-expanded=true]{width:min(384px,100%);height:124px;border-radius:24px;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #aca79b14,0 12px 34px -13px #49473d28}
.credentials{position:absolute;top:7px;left:8px;right:106px;height:108px;pointer-events:none}
.field{position:absolute;left:0;right:0;height:48px;border:1px solid transparent;border-radius:12px;transition:background .25s,border-color .25s;pointer-events:auto}
.account-field{top:0}.field:focus-within{background:#ffffff35;border-color:#ffffff8a}
.field input{width:100%;height:46px;min-width:0;outline:none;border:0;padding:0 14px;background:none;color:#424b44;font-size:14px;border-radius:12px}
.field input::placeholder{color:#81877b}.password-field{top:60px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .24s,transform .45s var(--glass-ease)}
.glass-login[data-expanded=true] .password-field{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.12s,.04s}
.password-field input{padding-right:42px}
.reveal{border:0;position:absolute;right:1px;top:2px;display:grid;place-items:center;background:none;width:42px;height:42px;padding:10px;color:#8b9c8d;border-radius:11px}
.reveal:hover{color:#536d5f}.reveal svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.login-button{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:91px;height:48px;border:1px solid #fff;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 12px;background:#fffffff5;color:#3d443e;font-size:14px;letter-spacing:.5px;box-shadow:0 3px 10px #89918306;transition:background .2s,box-shadow .2s}
.login-button:hover{background:#fff;box-shadow:0 4px 14px #5d67521a}.login-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.form-status{position:absolute;top:128px;left:4px;right:0;font-size:10px;line-height:1.5;margin:0;color:#71816f}
.visual{position:relative;width:100%;height:clamp(580px,72svh,690px);perspective:1200px;margin-left:6px;transform:translateX(clamp(0px,calc((100vw - 1100px) * .1),64px));isolation:isolate}
.spatial-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-15deg) rotateX(5deg)}
.spatial-backdrop{position:absolute;inset:40px 48px 18px 40px;border-radius:44px;background:linear-gradient(135deg,#ffffff0a,#e2e2d904);border:1px solid #a7ada016;border-top-color:#ffffffb3;border-left-color:#ffffff8c;box-shadow:-18px -18px 50px #ffffff1f,24px 34px 60px #494c400c,inset 1px 1px 1px #ffffff55;transform:translateZ(-100px);pointer-events:none}
/* Static highlights stay on the glass; only transforms animate. */
.feature-card{position:absolute;width:41%;max-width:275px;aspect-ratio:5/3;border:1px solid #a7aca029;border-top-color:#fff;border-left-color:#ffffffd9;border-radius:20px;padding:13px 16px 8px;background:radial-gradient(ellipse at 4% 0%,#ffffffa6,transparent 72%),linear-gradient(135deg,#fdfdfbb8,#eeeee7a3);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);box-shadow:0 24px 48px -14px #535b4630,0 5px 12px #62725f08,inset 0 1px 0 #fff,inset 0 -1px 0 #cbd0c329;transform:translateZ(var(--tz));will-change:transform;display:flex;flex-direction:column;overflow:hidden}
.feature-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 1px 1px 1px #ffffffba;pointer-events:none}
.mail-card{left:10%;top:10%;--tz:30px}.social-card{right:15%;top:15%;--tz:40px}.ai-card{left:5%;top:60%;--tz:10px}.reply-card{right:10%;top:70%;--tz:20px}
.card-heading{display:flex;gap:9px;align-items:center;position:relative;z-index:1;flex:none}
.card-heading h2{font-size:13px;font-weight:550;letter-spacing:.055em;margin:0;color:#536052}
.module-icon{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#ffffffce,#dce4d44d);box-shadow:inset 0 1px 0 #fff;color:#839780}
.module-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.feature-art{position:relative;align-self:center;width:92%;height:calc(100% - 47px);min-height:0;object-fit:contain;object-position:center;user-select:none;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.mail-card .feature-art{width:85%}.reply-card .feature-art{width:87%}
/* Quiet, theme-specific detail strips, not additional action buttons. */
.card-detail{position:absolute;left:16px;right:16px;bottom:9px;display:flex;align-items:center;justify-content:space-between;height:17px;padding-top:5px;border-top:1px solid #899b8217;color:#788575;font-size:9px;letter-spacing:.13em;line-height:1;pointer-events:none}
.card-detail>span:first-child{display:flex;align-items:center;width:56px;height:10px}
.detail-track{display:flex;align-items:center;justify-content:space-between;width:48px;position:relative}
.detail-track::before{content:"";position:absolute;left:3px;right:3px;top:2px;height:1px;background:#bac6b6}
.detail-track i{z-index:1;width:5px;height:5px;border-radius:50%;border:1px solid #a9b8a3;background:#f1f3ed}
.detail-track i:first-child{background:#8d9f83;box-shadow:0 0 0 3px #93a68715}
.detail-formats{display:flex;gap:5px;align-items:center;height:10px}
.detail-formats i{display:block;border:1px solid #a7b69f;border-radius:2px;width:7px;height:10px;background:#e8ede355}
.detail-formats i:nth-child(2){width:9px;height:9px}.detail-formats i:nth-child(3){width:13px;height:8px}
.detail-create{display:flex;align-items:center;gap:3px;height:9px}
.detail-create i{width:7px;height:3px;background:#a9baa0;border-radius:2px}.detail-create i:nth-child(2){height:6px}.detail-create i:nth-child(3){height:9px;background:#849b7b}.detail-create i:nth-child(4){height:5px}.detail-create i:nth-child(5){opacity:.45}
.detail-dialog{display:flex;gap:4px;align-items:center}
.detail-dialog i{width:16px;height:7px;border:1px solid #bac7b1;border-radius:3px 3px 3px 0;background:#edf0e8}.detail-dialog i:last-child{transform:translateY(2px);background:#dbe5d6;border-radius:3px 3px 0 3px}
@media(hover:hover){.feature-card:hover .feature-art{transform:translateY(-2px) scale(1.025)}}
.feature-card:hover .card-detail{color:#596e50;border-top-color:#899b8230}
.splines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;transform:translateZ(0)}
.spline-glow{stroke:#ffffffa3;stroke-width:5;filter:blur(2px)}
.spline-path{stroke:#8c9b886b;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.5 8;vector-effect:non-scaling-stroke}
.flow-icons{position:absolute;inset:0;transform:translateZ(0);pointer-events:none}
.flow-icon{position:absolute;left:0;top:0;width:32px;height:32px;margin:-16px;display:grid;place-items:center;border-radius:9px;border:1px solid #ffffffeb;background:linear-gradient(135deg,#fffffffa,#f1f1eaeF);box-shadow:0 4px 10px #5e665416,inset 0 1px 0 #fff;will-change:transform,opacity;opacity:0}
.flow-icon img{width:17px;height:17px;object-fit:contain}.flow-icon .linkedin{font-family:Arial,sans-serif;font-size:19px;font-weight:bold;color:#0a66c2;line-height:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:1100px){.site-header{padding:0 4vw}.brand{font-size:17px}main{padding:0 4vw}.welcome{--login-inset:8px;padding:28px 0 0}.welcome-copy p{font-size:18px}.login-wrap{width:calc(100% - 16px);margin-left:8px}.particle-panel{height:320px}.visual{margin-left:0;transform:none}.spatial-backdrop{right:12px;bottom:14px}.feature-card{padding:12px 13px 7px;border-radius:19px}.card-heading{gap:7px}.card-heading h2{font-size:12px}.module-icon{width:23px;height:23px}.module-icon svg{width:15px}.flow-icon{width:28px;height:28px;margin:-14px;border-radius:8px}.flow-icon img{width:16px;height:16px}.flow-icon .linkedin{font-size:17px}}
@media(max-width:760px){.site-header{height:78px;padding:0 22px}.brand{font-size:14px;gap:6px}.brand-symbol{font-size:25px}.preview-label{display:none}.register{padding:10px 13px;font-size:11px}.register span{margin-left:5px}main{display:flex;flex-direction:column;padding:0 22px;overflow:hidden}.welcome{--login-inset:13px;max-width:440px;padding:16px 0 0}.particle-panel{height:300px;margin-bottom:14px}.welcome-copy p{font-size:17px}.login-wrap{margin:28px 0 0 13px;width:calc(100% - 26px);height:155px}.visual{margin-top:32px;max-width:540px;height:420px;flex:none;margin-bottom:20px;perspective:1000px}.spatial-scene{inset:0;transform:rotateY(-12deg) rotateX(5deg)}.feature-card{width:43%;max-width:none;padding:9px 10px 5px;border-radius:15px}.mail-card{left:3%;top:10%}.social-card{right:2%;top:15%}.ai-card{left:0;top:60%}.reply-card{right:0;top:70%}.spatial-backdrop{inset:24px -2px 0 18px;border-radius:30px}.card-heading h2{font-size:10px;letter-spacing:.01em}.module-icon{width:19px;height:19px;border-radius:6px}.module-icon svg{width:12px}.card-heading{gap:5px}.feature-art{width:100%;height:calc(100% - 20px)}.flow-icon{width:24px;height:24px;margin:-12px;border-radius:7px}.flow-icon img{width:14px;height:14px}.flow-icon .linkedin{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.feature-card,.flow-icon{will-change:auto}}

@media(max-width:760px){body{padding-bottom:24px}.card-detail{left:10px;right:10px;bottom:6px;height:12px;padding-top:3px;font-size:7px;letter-spacing:.04em}.card-detail>span:first-child{transform:scale(.8);transform-origin:left center;width:44px}.feature-art{height:calc(100% - 34px)}}