:root { color-scheme: dark; --bg:#08090d; --panel:#111319; --text:#f5f3ef; --muted:#a6a6ad; --line:rgba(255,255,255,.12); --accent:#806cff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
body.modal-open { overflow:hidden; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.site-header { position:fixed; z-index:50; inset:0 0 auto; height:74px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 4vw; background:linear-gradient(180deg,rgba(7,8,12,.88),transparent); }
.home-brand { display:flex; align-items:center; gap:11px; color:white; text-decoration:none; justify-self:start; }
.home-brand span { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(145deg,#917aff,#6258ec); font-weight:900; box-shadow:0 8px 24px rgba(112,102,255,.3); }
.home-brand strong { font-size:15px; letter-spacing:.04em; }
.site-header nav { display:flex; gap:32px; }
.site-header nav a { color:#dddde2; font-size:14px; text-decoration:none; }
.site-header nav a:hover { color:white; }
.header-create { justify-self:end; border:1px solid rgba(255,255,255,.28); background:rgba(16,17,23,.36); backdrop-filter:blur(12px); color:white; border-radius:999px; height:39px; padding:0 20px; cursor:pointer; }
.header-create:hover { background:white; color:#0a0b0f; }
.hero { min-height:100svh; position:relative; display:flex; align-items:flex-end; padding:0 7vw 8vh; overflow:hidden; background:url("assets/cover-rain.webp") center/cover no-repeat; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,5,9,.92) 0%,rgba(4,5,9,.55) 42%,rgba(4,5,9,.08) 72%),linear-gradient(0deg,rgba(8,9,13,.9),transparent 38%); }
.hero-content { position:relative; z-index:2; width:min(690px,70vw); padding-bottom:8vh; }
.hero-kicker,.section-no,.login-kicker { font-size:12px; letter-spacing:.22em; font-weight:750; color:#bbb8cf; }
.hero-kicker { display:flex; align-items:center; gap:10px; }
.hero-kicker span { width:34px; height:1px; background:#9f91ff; }
.hero h1 { margin:22px 0; font-size:clamp(48px,6.7vw,104px); line-height:1.03; letter-spacing:-.065em; font-weight:670; }
.hero-copy { color:#c7c7cf; font-size:17px; line-height:1.8; max-width:590px; }
.hero-link { display:inline-flex; align-items:center; gap:12px; margin-top:24px; color:white; font-size:15px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:8px; }
.hero-link span { color:#9d8cff; }
.hero-caption { position:absolute; z-index:2; right:5vw; bottom:8vh; width:250px; padding-left:20px; border-left:1px solid rgba(255,255,255,.35); }
.hero-caption div { display:flex; flex-direction:column; gap:7px; }.hero-caption span { font-size:11px; color:#aaaab2; letter-spacing:.12em; }.hero-caption strong { font-size:18px; }.hero-caption p { margin:8px 0 0; color:#9d9da5; font-size:13px; }
.works-section,.workflow-section { padding:130px 7vw; }
.section-intro,.workflow-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:80px; margin-bottom:64px; }
.section-intro h2,.workflow-heading h2 { font-size:clamp(34px,4.5vw,70px); line-height:1.13; letter-spacing:-.045em; margin:14px 0 0; font-weight:620; }
.section-intro>p,.workflow-heading>p { width:380px; color:var(--muted); font-size:15px; line-height:1.9; margin:0 0 8px; }
.works-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:34px; }
.work-card { min-width:0; }.work-large { grid-row:span 2; }
.work-image { overflow:hidden; border-radius:4px; background:#15161b; aspect-ratio:16/9; }
.work-large .work-image { height:calc(100% - 74px); min-height:520px; aspect-ratio:auto; }
.work-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s; }
.work-card:hover img { transform:scale(1.025); filter:brightness(1.08); }
.work-info { display:flex; justify-content:space-between; align-items:flex-start; padding-top:16px; }
.work-info span { color:#858590; font-size:12px; }.work-info h3 { font-size:21px; margin:6px 0 0; font-weight:570; }.work-info p { color:#858590; font-size:13px; margin:3px 0 0; }
.workflow-section { background:#f2f0eb; color:#111218; }
.workflow-section .section-no { color:#66636f; }
.workflow-heading>p { color:#5e5d64; }
.workflow-steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #c8c5be; }
.workflow-steps article { min-height:260px; padding:28px 28px 0 0; border-right:1px solid #c8c5be; }
.workflow-steps article+article { padding-left:28px; }.workflow-steps article:last-child { border-right:0; }
.workflow-steps span { color:#7666e9; font-size:13px; }.workflow-steps strong { display:block; margin-top:85px; font-size:24px; }.workflow-steps p { color:#626169; font-size:14px; line-height:1.7; }
.create-section { position:relative; min-height:82vh; padding:120px 7vw; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; overflow:hidden; }
.create-glow { position:absolute; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,rgba(102,77,255,.25),transparent 67%); pointer-events:none; }
.create-section>*:not(.create-glow) { position:relative; }
.create-section h2 { margin:22px 0 40px; font-size:clamp(42px,6vw,88px); line-height:1.08; letter-spacing:-.055em; font-weight:630; }
.main-create { height:60px; border:0; border-radius:999px; padding:0 30px; background:#f6f4f0; color:#111218; font-size:16px; font-weight:700; cursor:pointer; }
.main-create span { margin-left:25px; color:#6756dd; }.main-create:hover { transform:translateY(-2px); box-shadow:0 18px 45px rgba(0,0,0,.3); }
.create-note { color:#777984; font-size:13px; margin-top:18px; }
footer { min-height:110px; border-top:1px solid var(--line); padding:0 5vw; display:flex; align-items:center; justify-content:space-between; color:#777984; font-size:12px; }
footer .home-brand strong { display:none; } footer p { margin:0; }
.login-layer { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; }
.login-layer[hidden] { display:none; }
.login-backdrop { position:absolute; inset:0; border:0; background:rgba(3,4,7,.78); backdrop-filter:blur(14px); cursor:default; }
.login-card { position:relative; width:min(440px,100%); padding:42px; border:1px solid rgba(255,255,255,.15); background:rgba(19,20,27,.98); box-shadow:0 30px 100px rgba(0,0,0,.6); border-radius:20px; }
.login-close { position:absolute; right:15px; top:14px; width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:#9696a0; font-size:25px; cursor:pointer; }
.login-close:hover { background:#292a33; color:white; }
.login-mark { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,#917aff,#6258ec); font-weight:900; font-size:18px; }
.login-kicker { margin:28px 0 10px; color:#8f83d7; }.login-card h2 { font-size:30px; margin:0; }.login-description { color:#a6a6af; font-size:14px; line-height:1.7; }
.login-card form { display:grid; gap:18px; margin-top:26px; }.login-card label { display:grid; gap:8px; color:#d4d4da; font-size:14px; }
.login-card input { width:100%; height:48px; border:1px solid #383a46; background:#111218; color:white; border-radius:10px; outline:0; padding:0 14px; font-size:15px; }
.login-card input:focus { border-color:#8174e8; box-shadow:0 0 0 3px rgba(128,108,255,.12); }
.login-card form button { height:50px; border:0; border-radius:10px; background:linear-gradient(135deg,#8472ff,#6858e9); color:white; cursor:pointer; font-weight:700; display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.login-card form button:disabled { opacity:.55; cursor:wait; }
.auth-switch { display:grid; grid-template-columns:1fr 1fr; margin-top:25px; padding:4px; background:#101116; border:1px solid #30323b; border-radius:11px; }
.auth-switch button { height:38px; border:0; border-radius:8px; color:#898b96; background:transparent; cursor:pointer; font-size:14px; }
.auth-switch button.active { color:white; background:#282a34; }
.verify-target { margin:0; color:#9395a1; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.verify-target strong { color:white; font-weight:600; }
.login-card .text-button { height:auto; padding:4px; justify-content:center; background:transparent; color:#9d91ee; }
.auth-status { min-height:22px; margin:15px 0 0; color:#efb36f; font-size:13px; line-height:1.6; }
.auth-status.success { color:#67d99c; }
.auth-switch[hidden],#resetPanel [hidden] { display:none !important; }
.login-card .forgot-password { justify-content:flex-end; margin-top:-7px; font-size:13px; }
.reset-steps { color:#a69ae9; font-size:12px; margin:22px 0 -8px; }
.reset-actions { display:flex; justify-content:space-between; gap:12px; }
.reset-actions .text-button { font-size:12px; }
.reset-back { display:block; width:100%; margin-top:20px; padding:10px; background:transparent; color:#b4a8ff; border:1px solid #3c374e; border-radius:10px; cursor:pointer; }
.reset-back:disabled { opacity:.5; cursor:wait; }
.reset-success-mark { font-size:36px; color:#67d99c; margin:22px 0 12px; }
.login-card { max-height:calc(100dvh - 32px); overflow-y:auto; }
.login-footnote { color:#737580; font-size:12px; line-height:1.6; margin:18px 0 0; }
@media(max-width:800px){.site-header{grid-template-columns:1fr auto}.site-header nav{display:none}.hero{padding:0 6vw 7vh}.hero-content{width:92vw}.hero-caption{display:none}.works-section,.workflow-section{padding:90px 6vw}.section-intro,.workflow-heading{display:block}.section-intro>p,.workflow-heading>p{width:auto;margin-top:25px}.works-grid{grid-template-columns:1fr}.work-large{grid-row:auto}.work-large .work-image{height:auto;min-height:0;aspect-ratio:16/9}.workflow-steps{grid-template-columns:1fr}.workflow-steps article{min-height:180px;border-right:0;border-bottom:1px solid #c8c5be;padding:25px 0!important}.workflow-steps strong{margin-top:45px}footer{gap:16px;flex-wrap:wrap;padding:25px 6vw}.login-card{padding:32px 24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work-image img,.main-create{transition:none}}