:root { --ink:#27222a; --muted:#665e68; --plum:#76506f; --plum-dark:#563850; --cyan:#348a8b; --paper:#fcfbfc; --panel:#f2eff3; --line:#ddd7df; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.container { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.topbar { position:sticky; top:0; z-index:20; background:rgba(252,251,252,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.topbar-inner { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; font-size:20px; }
.brand img { width:42px; height:42px; border-radius:5px; }
.topbar nav { display:flex; align-items:center; gap:28px; font-size:14px; }
.topbar nav .active { color:var(--plum); font-weight:800; }
.download { padding:9px 18px; color:var(--white); background:var(--plum); border-radius:4px; }
.nav-toggle { display:none; border:0; background:transparent; font-size:25px; }
.hero { padding:34px 0 28px; overflow:hidden; background:linear-gradient(180deg,#f7f4f7,#fcfbfc); }
.hero-grid { min-height:615px; display:grid; grid-template-columns:minmax(0,1fr) minmax(460px,.9fr); gap:68px; align-items:center; }
.eyebrow { display:flex; gap:8px; }
.eyebrow span { padding:4px 8px; color:var(--plum); background:#eee8ee; border:1px solid var(--line); font-size:11px; font-weight:800; }
.hero h1 { margin:15px 0 20px; line-height:1.08; letter-spacing:0; }
.hero h1 b { display:block; color:var(--plum); font-size:22px; }
.hero h1 strong { display:block; font-size:clamp(42px,5vw,62px); }
.hero-copy > p { max-width:590px; color:var(--muted); font-size:17px; }
.hero-actions { display:flex; gap:12px; margin:26px 0; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:10px 23px; border-radius:4px; font-weight:800; }
.button.primary { color:var(--white); background:var(--plum); }
.button.outline { border:1px solid #b8afb9; }
.status-row { display:flex; gap:22px; color:var(--muted); font-size:13px; }
.status-row i { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#a9a2aa; }
.status-row i.ready { background:var(--cyan); }
.hero-panel { min-height:535px; position:relative; background:var(--white); border:1px solid var(--line); box-shadow:0 17px 40px rgba(64,43,61,.11); }
.panel-head { height:54px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:13px; }
.panel-head span { color:var(--muted); }
.panel-body { height:420px; display:grid; grid-template-columns:115px 1fr; }
.panel-body aside { display:flex; flex-direction:column; padding:16px 10px; border-right:1px solid var(--line); background:#f7f5f7; }
.panel-body aside span { padding:9px 10px; font-size:13px; }
.panel-body aside .selected { color:var(--white); background:var(--plum); border-radius:3px; }
.panel-preview { overflow:hidden; display:flex; justify-content:center; background:#fafafa; }
.panel-preview img { width:182px; max-width:400px; object-fit:cover; object-position:top; }
.queue { height:60px; display:grid; grid-template-columns:1.2fr repeat(3,1fr); align-items:center; border-top:1px solid var(--line); }
.queue > * { padding:9px; text-align:center; border-right:1px solid var(--line); font-size:12px; }
.queue span:last-child { border-right:0; }
.task-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); }
.task-strip .container { display:grid; grid-template-columns:repeat(3,1fr); }
.task-strip .container > div { padding:18px 24px; border-right:1px solid var(--line); }
.task-strip .container > div:last-child { border-right:0; }
.task-strip small,.task-strip b,.task-strip span { display:block; }
.task-strip small { color:var(--cyan); font-weight:800; }
.task-strip span { color:var(--muted); font-size:13px; }
.section { padding:78px 0; }
.heading { margin-bottom:31px; }
.heading > span,.trouble-grid article > span,.trouble-grid > div > span,.inner-hero span { color:var(--cyan); font-size:12px; font-weight:800; letter-spacing:.13em; }
.heading h2 { margin:5px 0 0; font-size:35px; }
.feature-layout { display:grid; grid-template-columns:220px 1fr; border:1px solid var(--line); }
.feature-nav { display:flex; flex-direction:column; padding:14px; background:var(--panel); border-right:1px solid var(--line); }
.feature-nav button { padding:13px; border:0; background:transparent; text-align:left; font:inherit; cursor:pointer; }
.feature-nav button.active { color:var(--white); background:var(--plum); }
.feature-table { display:grid; grid-template-columns:1fr 1fr; }
.feature-table article { min-height:135px; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-table article:nth-child(even) { border-right:0; }
.feature-table article:nth-last-child(-n+2) { border-bottom:0; }
.feature-table b,.feature-table span { display:block; }
.feature-table b { margin-bottom:9px; }
.feature-table span { color:var(--muted); font-size:14px; }
.screens { background:#f0edef; }
.screen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.screen-grid figure { margin:0; padding:20px; background:var(--white); border:1px solid var(--line); }
.screen-grid img { max-width:400px; max-height:420px; width:auto; margin:0 auto; object-fit:contain; }
.screen-grid figcaption { display:flex; justify-content:space-between; gap:15px; padding-top:15px; border-top:1px solid var(--line); }
.screen-grid figcaption span { color:var(--muted); font-size:13px; text-align:right; }
.trouble-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.trouble-grid > div { padding:34px; border:1px solid var(--line); }
.trouble-grid h2 { margin:6px 0 10px; }
.trouble-grid > div > div { color:var(--muted); }
.trouble-grid a { display:inline-block; margin-top:20px; color:var(--plum); font-weight:800; }
.final-cta { padding:40px 0; color:var(--white); background:var(--plum-dark); }
.final-cta .container { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.final-cta h2 { margin:3px 0 0; font-size:30px; }
.button.light { color:var(--plum-dark); background:var(--white); }
footer { padding:29px 0; text-align:center; color:#6b626c; background:#ebe7eb; font-size:13px; }
footer p { margin:0 0 6px; }
.inner-hero { padding:70px 0 52px; background:#f0ecf0; border-bottom:1px solid var(--line); }
.inner-hero h1 { margin:8px 0 12px; font-size:44px; line-height:1.2; }
.inner-hero .container > div { max-width:760px; color:var(--muted); font-size:17px; }
.guide-area,.faq-area { padding:64px 0 84px; }
.guide-grid { display:grid; grid-template-columns:200px minmax(0,780px); gap:68px; justify-content:center; align-items:start; }
.guide-grid aside { position:sticky; top:96px; display:flex; flex-direction:column; border-top:2px solid var(--plum); }
.guide-grid aside b,.guide-grid aside a { padding:10px 4px; border-bottom:1px solid var(--line); }
.guide-grid aside a { color:var(--muted); }
.prose > section { padding-bottom:31px; margin-bottom:33px; border-bottom:1px solid var(--line); }
.prose section > span { color:var(--cyan); font-size:12px; font-weight:800; }
.prose h2 { margin:5px 0 14px; font-size:27px; }
.prose p { color:#4e4650; }
.prose a { color:var(--plum); text-decoration:underline; }
.guide-cta,.faq-cta { padding:30px; background:#f0ebf0; border-left:4px solid var(--plum); }
.guide-cta h2,.faq-cta h2 { margin-bottom:7px; }
.guide-cta .button,.faq-cta .button { margin-top:18px; color:var(--white); text-decoration:none; }
.faq-hero { background:#eaf3f3; }
.faq-toolbar { max-width:900px; margin:0 auto 14px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); }
.faq-toolbar button { padding:9px 14px; border:1px solid var(--line); background:var(--white); cursor:pointer; }
.faq-list { max-width:900px; margin:0 auto; border-top:2px solid var(--plum); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { position:relative; padding:19px 45px 19px 4px; list-style:none; cursor:pointer; font-weight:800; }
.faq-list summary::after { content:"+"; position:absolute; right:10px; top:12px; color:var(--cyan); font-size:26px; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { margin:0; padding:0 45px 20px 4px; color:var(--muted); }
.faq-cta { max-width:900px; margin:36px auto 0; }
@media (max-width:900px) {
  .nav-toggle { display:block; }
  .topbar nav { display:none; position:absolute; top:70px; left:0; right:0; padding:16px 20px; flex-direction:column; align-items:stretch; gap:4px; background:var(--paper); border-bottom:1px solid var(--line); }
  .topbar nav.open { display:flex; }
  .topbar nav a { padding:10px; }
  .hero-grid { grid-template-columns:1fr; gap:18px; min-height:0; }
  .hero-panel { order:2; }
  .guide-grid { grid-template-columns:1fr; gap:24px; }
  .guide-grid aside { position:static; }
}
@media (max-width:560px) {
  .container { width:min(100% - 28px,1180px); }
  .topbar-inner { min-height:64px; }
  .topbar nav { top:64px; }
  .hero { padding:24px 0 20px; }
  .eyebrow span:nth-child(n+2) { display:none; }
  .hero h1 b { font-size:20px; }
  .hero h1 strong { font-size:33px; }
  .hero-copy>p { font-size:15px; }
  .hero-actions { margin:18px 0; }
  .status-row { display:none; }
  .hero-panel { height:230px; min-height:0; margin:82px 12px -58px; transform:scale(.55); transform-origin:center top; }
  .task-strip .container { grid-template-columns:1fr; }
  .task-strip .container>div { padding:11px 18px; border-right:0; border-bottom:1px solid var(--line); }
  .section { padding:52px 0; }
  .heading h2 { font-size:29px; }
  .feature-layout { grid-template-columns:1fr; }
  .feature-nav { flex-direction:row; overflow:auto; border-right:0; border-bottom:1px solid var(--line); }
  .feature-nav button { white-space:nowrap; }
  .feature-table,.screen-grid,.trouble-grid { grid-template-columns:1fr; }
  .feature-table article { border-right:0; border-bottom:1px solid var(--line)!important; }
  .feature-table article:last-child { border-bottom:0!important; }
  .final-cta .container { align-items:flex-start; flex-direction:column; }
  .inner-hero { padding:48px 0 38px; }
  .inner-hero h1 { font-size:33px; }
  .guide-area,.faq-area { padding:42px 0 58px; }
}