:root { --ink:#111613; --night:#0d1210; --paper:#f3f5ef; --muted:#65706a; --lime:#b9f23d; --coral:#ff775f; --teal:#c8efea; --line:rgba(17,22,19,.16); --ease-out:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { height:100svh; margin:0; min-width:320px; overflow:hidden; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
::selection { background:var(--lime); color:var(--ink); }
:focus-visible { outline:3px solid var(--lime); outline-offset:4px; }
.site-header { position:fixed; z-index:20; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:18px max(22px,calc((100vw - 1180px) / 2)); color:#fff; background:linear-gradient(180deg,rgba(13,18,16,.88),rgba(13,18,16,.36)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:800; }
.brand-icon { width:30px; height:30px; border-radius:9px; object-fit:cover; }
.nav-links { display:flex; align-items:center; gap:26px; color:rgba(255,255,255,.8); font-size:13px; font-weight:700; }
.nav-links a { transition:color .18s ease; }
.nav-links a:hover { color:var(--lime); }
.lang-toggle { min-width:42px; min-height:34px; border:1px solid rgba(255,255,255,.32); border-radius:3px; background:rgba(255,255,255,.05); color:#fff; cursor:pointer; font-size:12px; font-weight:800; transition:border-color .18s ease,color .18s ease; }
.lang-toggle:hover { border-color:var(--lime); color:var(--lime); }
.section-rail { position:fixed; z-index:15; top:50%; right:24px; display:grid; gap:11px; transform:translateY(-50%); }
.rail-dot { width:9px; height:9px; padding:0; border:1px solid rgba(17,22,19,.38); border-radius:50%; background:transparent; cursor:pointer; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.rail-dot.is-active { border-color:var(--lime); background:var(--lime); transform:scale(1.35); }
.snap-page { overflow-y:hidden; height:100svh; overscroll-behavior:contain; scrollbar-width:none; touch-action:pan-x; }
.snap-page::-webkit-scrollbar { display:none; }
.screen { position:relative; min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; }
.screen-inner { position:relative; width:min(1180px,calc(100% - 80px)); min-height:100svh; margin:0 auto; padding:110px 0 42px; }
.screen-label { color:var(--muted); font-size:11px; font-weight:850; letter-spacing:.12em; }
.screen-foot { position:absolute; right:0; bottom:26px; left:0; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.05em; }
.foot-arrow { color:var(--coral); font-size:20px; animation:cue 1.8s var(--ease-out) infinite; }
.screen-hero { background:var(--night); color:#fff; isolation:isolate; }
.hero-media { position:absolute; z-index:-3; top:0; right:max(30px,calc((100vw - 1180px) / 2)); bottom:0; display:flex; align-items:center; width:min(380px,30vw); overflow:visible; }
.hero-media::before { position:absolute; z-index:-1; top:8%; right:-30%; width:150%; height:84%; content:""; background:url("assets/optimized/home.webp") center/cover; filter:blur(34px) saturate(.72); opacity:.46; transform:scale(1.08); }
.hero-media img { width:100%; max-height:82svh; object-fit:contain; border:8px solid rgba(255,255,255,.08); border-radius:34px; box-shadow:28px 30px 0 rgba(0,0,0,.22),0 24px 80px rgba(0,0,0,.3); filter:saturate(.88) contrast(1.05); }
.hero-shade { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,var(--night) 0%,rgba(13,18,16,.96) 34%,rgba(13,18,16,.58) 61%,rgba(13,18,16,.12) 100%); pointer-events:none; }
.hero-inner { display:flex; align-items:center; }
.hero-copy { max-width:660px; padding-top:36px; }
.hero h1,.screen h2 { margin:0; letter-spacing:0; font-weight:820; line-height:1.12; }
.hero h1 { max-width:660px; font-size:96px; }
.hero h1 strong,.screen h2 strong { color:var(--lime); }
.hero-lede { max-width:500px; margin:28px 0 0; color:rgba(255,255,255,.74); font-size:17px; line-height:1.72; }
.hero-actions,.download-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 21px; border:1px solid transparent; border-radius:3px; font-size:13px; font-weight:850; transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease; }
.button-primary { background:var(--lime); color:var(--ink); box-shadow:0 10px 28px rgba(185,242,61,.22); }
.button-primary:hover { background:#d5ff70; }
.button-ghost { border-color:rgba(255,255,255,.45); color:#fff; }
.button-ghost:hover { border-color:#fff; background:rgba(255,255,255,.09); }
.button-outline { border-color:var(--ink); color:var(--ink); }
.button-outline:hover { background:var(--ink); color:#fff; }
.button.disabled { pointer-events:none; opacity:.42; }
.hero-meta { display:flex; flex-wrap:wrap; gap:11px; margin-top:24px; color:rgba(255,255,255,.56); font-size:12px; font-weight:700; }
.screen-flow { background:var(--paper); }
.split-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,360px); gap:80px; align-items:end; margin-top:42px; }
.screen h2 { font-size:82px; }
.screen-flow h2 strong,.screen-download h2 strong { color:var(--coral); }
.split-heading p,.platform-copy > p,.download-grid > div > p { margin:0; color:var(--muted); font-size:16px; line-height:1.75; }
.flow-list { margin-top:58px; border-top:1px solid var(--line); }
.flow-step { display:grid; grid-template-columns:72px minmax(0,1fr) 30px; gap:26px; align-items:center; min-height:132px; border-bottom:1px solid var(--line); }
.flow-step > span { color:var(--coral); font-size:14px; font-weight:850; }
.flow-step h3 { margin:0; font-size:25px; font-weight:800; }
.flow-step p { max-width:590px; margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.flow-step b { justify-self:end; color:var(--coral); font-size:23px; transition:transform .18s ease; }
.flow-step:hover b { transform:translate(4px,-4px); }
.screen-platform { color:var(--ink); }
.screen-douyin { background:var(--teal); }
.screen-bilibili { background:var(--night); color:#fff; }
.platform-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:90px; align-items:center; }
.screen-bilibili .platform-inner { grid-template-columns:minmax(300px,.8fr) minmax(0,1fr); }
.screen-bilibili .platform-copy > p { color:rgba(255,255,255,.68); }
.platform-copy h2 { margin-top:24px; }
.platform-copy > p { max-width:480px; margin-top:28px; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.tag-row span { padding:8px 11px; border:1px solid rgba(17,22,19,.34); color:rgba(17,22,19,.76); font-size:11px; font-weight:800; }
.screen-bilibili .tag-row span { border-color:rgba(255,255,255,.36); color:rgba(255,255,255,.82); }
.phone-stage { margin:0; text-align:center; }
.phone-frame { width:min(330px,72vw); max-height:calc(100svh - 180px); margin:0 auto; overflow:hidden; border:8px solid var(--night); border-radius:34px; box-shadow:24px 28px 0 rgba(17,22,19,.16); transform:rotate(2deg); transition:transform .35s var(--ease-out); }
.screen-bilibili .phone-frame { border-color:#dce7dc; box-shadow:24px 28px 0 rgba(185,242,61,.17); transform:rotate(-2deg); }
.phone-stage:hover .phone-frame { transform:rotate(0) translateY(-8px); }
.phone-frame picture,.phone-frame img { display:block; width:100%; height:auto; }
.phone-stage figcaption { margin-top:18px; color:rgba(17,22,19,.57); font-size:12px; }
.screen-bilibili .phone-stage figcaption { color:rgba(255,255,255,.55); }
.screen-download { background:var(--paper); }
.download-inner { display:flex; flex-direction:column; justify-content:center; }
.download-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.76fr); gap:90px; align-items:center; margin-top:44px; }
.download-grid > div > p { max-width:440px; margin-top:28px; }
.download-panel { padding:30px; border:1px solid var(--ink); background:#fff; box-shadow:14px 14px 0 var(--lime); }
.release-line { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:750; }
.release-line strong { margin-left:auto; color:var(--ink); font-size:24px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px rgba(255,119,95,.16); }
.release-status { min-height:20px; margin:18px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.release-fallback { display:inline-block; margin-top:18px; color:var(--ink); font-size:12px; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.site-footer { display:none; padding:22px max(22px,calc((100vw - 1180px) / 2)); background:var(--paper); border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.site-footer div { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; }
.site-footer a { color:var(--ink); font-weight:800; }
.screen:not(.screen-hero) .screen-inner > * { opacity:0; transform:translateY(22px); }
.screen.is-visible .screen-inner > * { animation:reveal .7s var(--ease-out) both; }
.screen.is-visible .screen-inner > *:nth-child(2) { animation-delay:80ms; }
.screen.is-visible .screen-inner > *:nth-child(3) { animation-delay:150ms; }
@keyframes reveal { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes cue { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }
@media (hover:hover) and (pointer:fine) { .button:hover { transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .screen:not(.screen-hero) .screen-inner > *, .screen.is-visible .screen-inner > * { opacity:1; transform:none; animation:none; } .foot-arrow { animation:none; } .button,.phone-frame,.flow-step b { transition:none; } }
@media (max-width:760px) {
  .site-header { padding:14px 16px; }
  .brand { font-size:16px; }
  .nav-links { display:none; }
  .section-rail { right:12px; gap:10px; }
  .screen-inner { width:min(100% - 40px,560px); padding:90px 0 36px; }
  .hero-inner { align-items:flex-end; }
  .hero-media { top:72px; right:0; bottom:auto; align-items:flex-start; justify-content:center; width:100%; height:48%; padding:0; }
  .hero-media::before { top:0; right:14%; width:72%; height:100%; filter:blur(28px) saturate(.7); }
  .hero-media img { width:min(190px,46vw); max-height:100%; border-width:5px; border-radius:25px; box-shadow:16px 18px 0 rgba(0,0,0,.22),0 18px 48px rgba(0,0,0,.26); }
  .hero-shade { background:linear-gradient(180deg,rgba(13,18,16,.02) 0%,rgba(13,18,16,.56) 52%,var(--night) 90%); }
  .hero-copy { padding-top:130px; }
  .hero h1 { font-size:52px; line-height:1.15; }
  .hero-lede { margin-top:20px; font-size:15px; }
  .hero-actions { margin-top:26px; }
  .button { width:100%; }
  .hero-meta { margin-top:18px; }
  .screen-foot { bottom:18px; }
  .split-heading,.platform-inner,.screen-bilibili .platform-inner,.download-grid { grid-template-columns:1fr; gap:28px; }
  .screen h2 { font-size:48px; line-height:1.16; }
  .split-heading { margin-top:28px; }
  .split-heading p,.platform-copy > p,.download-grid > div > p { font-size:15px; }
  .flow-list { margin-top:32px; }
  .screen-flow .screen-inner { padding-top:86px; padding-bottom:24px; }
  .screen-flow h2 { font-size:42px; }
  .screen-flow .split-heading { gap:18px; }
  .screen-flow .split-heading p { font-size:14px; line-height:1.5; }
  .flow-step { grid-template-columns:40px minmax(0,1fr); gap:15px; min-height:95px; padding:8px 0; }
  .flow-step b { display:none; }
  .flow-step h3 { font-size:21px; }
  .flow-step p { font-size:13px; }
  .platform-inner { align-content:center; }
  .screen-bilibili .phone-stage { order:1; }
  .screen-bilibili .platform-copy { order:2; }
  .phone-frame { width:min(190px,54vw); height:43svh; border-width:6px; border-radius:28px; }
  .phone-frame img { height:100%; object-fit:cover; object-position:top; }
  .phone-stage figcaption { margin-top:13px; }
  .download-grid { margin-top:30px; }
  .download-panel { padding:22px; box-shadow:8px 8px 0 var(--lime); }
  .release-line { flex-wrap:wrap; }
  .release-line strong { width:100%; margin-left:0; }
  .download-actions { margin-top:22px; }
}