:root { --ink:#252a2b; --muted:#66706f; --paper:#fbfaf7; --soft:#eef4f2; --line:#d9e1de; --teal:#167f75; --teal-dark:#0f5d56; --sand:#e8dfd1; --white:#fff; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
button { font:inherit; }
.topbar { position:sticky; top:0; z-index:20; background:rgba(251,250,247,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.topbar-row { width:min(1200px,calc(100% - 40px)); height:74px; margin:auto; display:flex; align-items:center; gap:32px; }
.wordmark { display:flex; align-items:center; gap:10px; font-weight:800; }
.wordmark img { width:40px; height:40px; border-radius:6px; }
.desktop-nav { margin-left:auto; display:flex; gap:24px; }
.desktop-nav a { padding:23px 0 19px; color:#4f5a58; border-bottom:3px solid transparent; font-size:15px; }
.desktop-nav a.current,.desktop-nav a:hover { color:var(--teal-dark); border-bottom-color:var(--teal); }
.top-actions { display:flex; align-items:center; gap:9px; }
.ios-link,.download-link { min-height:40px; padding:8px 15px; border:1px solid var(--line); border-radius:5px; font-weight:700; font-size:14px; }
.download-link { color:#fff; background:var(--teal); border-color:var(--teal); }
.nav-toggle { display:none; width:42px; height:42px; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:5px; }
.mobile-nav { display:none; }
.intro { background:var(--paper); border-bottom:1px solid var(--line); }
.intro-grid { width:min(1200px,calc(100% - 40px)); min-height:650px; margin:auto; padding:48px 0 42px; display:grid; grid-template-columns:minmax(0,1fr) minmax(470px,.92fr); gap:72px; align-items:center; }
.kicker,.module-title span,.page-intro>div>span { color:var(--teal-dark); font-size:12px; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
.intro h1 { max-width:680px; margin:14px 0 18px; font-size:clamp(40px,4.3vw,60px); line-height:1.13; }
.intro-copy>p { max-width:650px; color:#56615f; font-size:16px; }
.intro-buttons { display:flex; gap:10px; margin:25px 0; }
.intro-buttons a,.page-actions a,.route-download a,.support-close>div:last-child a { min-width:124px; padding:11px 20px; border:1px solid var(--teal); border-radius:5px; text-align:center; font-weight:800; }
.intro-buttons a:first-child,.page-actions a:first-child,.route-download a:first-child,.support-close>div:last-child a:first-child { color:#fff; background:var(--teal); }
.intro-meta { display:flex; flex-wrap:wrap; gap:20px; margin:28px 0 0; padding:0; list-style:none; }
.intro-meta li { display:flex; gap:8px; color:#53605d; font-size:13px; }
.intro-meta b { color:var(--teal); }
.explorer { border:1px solid #ccd7d3; background:#fff; border-radius:7px; box-shadow:0 24px 50px rgba(37,51,49,.11); overflow:hidden; }
.explorer-head { height:54px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-weight:800; }
.explorer-head i { color:var(--muted); font-size:12px; font-style:normal; }
.explorer-body { min-height:492px; display:grid; grid-template-columns:118px 1fr; }
.explorer-tabs { padding:16px 10px; background:#f1f5f3; border-right:1px solid var(--line); }
.explorer-tabs button { width:100%; margin-bottom:8px; padding:11px 8px; color:#52605d; background:transparent; border:0; border-radius:4px; text-align:left; cursor:pointer; }
.explorer-tabs button.selected { color:#fff; background:var(--teal); }
.explorer-detail { padding:17px 20px; display:grid; grid-template-rows:auto 1fr auto; gap:12px; }
.panel-title { display:flex; gap:12px; align-items:center; }
.panel-title>span { padding:5px 8px; color:#fff; background:var(--ink); border-radius:3px; font-size:11px; }
.panel-title strong,.panel-title small { display:block; }
.panel-title small { color:var(--muted); }
.explorer-detail img { width:auto; height:345px; max-width:400px; margin:auto; object-fit:contain; }
.status-line { display:flex; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); font-size:12px; }
.status-line span { color:var(--muted); }
.module { padding:82px 0; }
.module-inner { width:min(1200px,calc(100% - 40px)); margin:auto; }
.module-title { margin-bottom:30px; }
.module-title h2 { margin:5px 0 0; font-size:34px; line-height:1.25; }
.function-map { background:#fff; }
.map-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.map-grid article { min-height:230px; padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.map-grid article>span { color:var(--teal); font-size:12px; font-weight:800; }
.map-grid h3 { margin:38px 0 9px; font-size:20px; }
.map-grid p { margin:0; color:var(--muted); font-size:14px; }
.state-module { background:var(--soft); }
.state-grid { display:grid; grid-template-columns:.9fr .7fr .75fr; gap:46px; align-items:center; }
.state-copy h3 { font-size:27px; }
.state-copy p { color:var(--muted); }
.state-copy a { color:var(--teal-dark); font-weight:800; }
.state-photo { margin:0; padding:14px; background:#fff; border:1px solid var(--line); border-radius:7px; }
.state-photo img { width:auto; height:360px; max-width:400px; margin:auto; }
.state-photo figcaption { padding:13px 3px 1px; }
.state-photo strong,.state-photo span { display:block; }
.state-photo span { color:var(--muted); font-size:12px; }
.state-checklist>div { display:grid; grid-template-columns:34px 1fr; gap:12px; padding:20px 0; border-top:1px solid #cbd7d3; }
.state-checklist b { color:var(--teal); }
.state-checklist strong,.state-checklist small { display:block; }
.state-checklist small { color:var(--muted); }
.preview-module { background:var(--paper); }
.preview-board { display:grid; grid-template-columns:160px minmax(340px,.85fr) 1fr; gap:38px; align-items:stretch; }
.preview-index { display:flex; flex-direction:column; border-top:3px solid var(--teal); }
.preview-index span { padding:16px 0; border-bottom:1px solid var(--line); font-size:13px; }
.mock-screen { min-height:430px; padding:22px; color:#e9f1ef; background:#27312f; border-radius:7px; display:flex; flex-direction:column; }
.mock-header { display:flex; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.15); }
.mock-header i { color:#aebdb9; font-size:12px; font-style:normal; }
.mock-filter { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:18px 0; }
.mock-filter span { padding:8px; border:1px solid rgba(255,255,255,.16); text-align:center; font-size:12px; }
.mock-filter .active { background:var(--teal); border-color:var(--teal); }
.mock-row { display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mock-row em { width:34px; height:34px; border-radius:4px; }
.tone-a { background:#c3a985; }.tone-b { background:#4f7e78; }
.mock-row strong,.mock-row small { display:block; }
.mock-row small,.mock-screen>p { color:#aebdb9; }
.mock-row>b { color:#87c7be; font-size:12px; }
.mock-screen>p { margin:auto 0 0; font-size:12px; }
.preview-notes { padding:10px 0; }
.preview-notes h3 { margin:0 0 10px; font-size:22px; }
.preview-notes p { color:var(--muted); }
.android-module { background:#fff; }
.android-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.android-grid>div>p { color:var(--muted); }
.android-grid ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.android-grid li { padding:15px 0; border-bottom:1px solid var(--line); }
.android-grid li span { display:inline-block; width:50px; color:var(--teal); font-weight:800; }
.faq-links { background:var(--soft); }
.faq-link-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.faq-link-grid a { min-height:140px; padding:21px; background:#fff; border:1px solid var(--line); border-radius:6px; display:grid; grid-template-columns:1fr auto; }
.faq-link-grid b { grid-column:1/-1; color:var(--teal-dark); font-size:12px; }
.faq-link-grid span { align-self:end; font-weight:700; }
.faq-link-grid i { align-self:end; color:var(--teal); font-style:normal; }
.closing { padding:48px 0; color:#fff; background:var(--teal-dark); }
.closing-inner { width:min(1200px,calc(100% - 40px)); margin:auto; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.closing h2 { margin:4px 0 0; font-size:28px; }
.closing-inner>div:last-child { display:flex; gap:10px; }
.closing a { min-width:120px; padding:11px 18px; border:1px solid rgba(255,255,255,.55); border-radius:5px; text-align:center; font-weight:800; }
.closing a:first-child { color:var(--teal-dark); background:#fff; }
.footer { border-top:1px solid var(--line); background:#f3f2ee; }
.footer>div { width:min(1200px,calc(100% - 40px)); margin:auto; padding:26px 0; color:#66706f; text-align:center; font-size:13px; }
.footer p { margin:3px 0; }
.page-intro { width:min(1200px,calc(100% - 40px)); min-height:350px; margin:auto; padding:58px 0; display:grid; grid-template-columns:1fr 280px; gap:80px; align-items:center; }
.page-intro h1 { max-width:780px; margin:8px 0 14px; font-size:clamp(36px,4vw,52px); line-height:1.2; }
.page-intro>div>p { max-width:760px; color:var(--muted); }
.page-actions { display:flex; gap:10px; margin-top:24px; }
.page-intro aside { padding:18px 20px; background:var(--soft); border-left:4px solid var(--teal); display:grid; }
.page-intro aside b { margin-bottom:8px; }
.page-intro aside span { padding:7px 0; color:var(--muted); border-top:1px solid var(--line); }
.route-layout { width:min(1100px,calc(100% - 40px)); margin:auto; padding:65px 0 90px; display:grid; grid-template-columns:180px 1fr; gap:70px; }
.route-nav { position:sticky; top:105px; align-self:start; display:grid; border-top:3px solid var(--teal); }
.route-nav a { padding:12px 0; border-bottom:1px solid var(--line); color:#52605d; }
.route-content section { padding:0 0 46px; }
.route-label { display:flex; align-items:center; gap:10px; color:var(--teal); font-size:12px; }
.route-label span { width:32px; height:32px; display:grid; place-items:center; color:#fff; background:var(--teal); border-radius:50%; }
.route-content h2 { margin:12px 0; font-size:28px; }
.route-content p { color:#505b59; }
.route-content a,.support-close a { color:var(--teal-dark); font-weight:800; }
.route-download { padding:24px; background:var(--soft); border:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:20px; }
.route-download span { color:var(--muted); }
.route-download>div { display:flex; gap:8px; }
.support-layout { width:min(980px,calc(100% - 40px)); margin:auto; padding:60px 0 90px; }
.support-filter { display:flex; gap:8px; margin-bottom:20px; }
.support-filter button { padding:9px 18px; color:#4f5a58; background:#fff; border:1px solid var(--line); border-radius:4px; cursor:pointer; }
.support-filter button.active { color:#fff; background:var(--teal); border-color:var(--teal); }
.support-item { border-top:1px solid var(--line); }
.support-item.hidden { display:none; }
.support-item>button { width:100%; min-height:74px; padding:14px 4px; display:grid; grid-template-columns:70px 1fr 28px; gap:12px; align-items:center; color:var(--ink); background:transparent; border:0; text-align:left; cursor:pointer; }
.support-item>button span { color:var(--teal); font-size:12px; font-weight:800; }
.support-item>button i { font-size:22px; font-style:normal; transition:transform .2s; }
.support-item>div { display:none; padding:0 40px 20px 82px; color:var(--muted); }
.support-item>div p { margin:0; }
.support-item.open>div { display:block; }
.support-item.open>button i { transform:rotate(45deg); }
.support-close { margin-top:35px; padding:24px; background:var(--soft); border-left:4px solid var(--teal); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.support-close p { margin:4px 0 0; color:var(--muted); }
.support-close>div:last-child { display:flex; gap:8px; }
@media(max-width:920px){
  .topbar-row { width:min(100% - 28px,760px); }
  .desktop-nav,.top-actions>.ios-link,.top-actions>.download-link { display:none; }
  .top-actions { margin-left:auto; }
  .nav-toggle { display:block; }
  .mobile-nav { position:absolute; top:74px; left:14px; right:14px; padding:10px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px rgba(30,45,42,.12); }
  .mobile-nav.open { display:grid; }
  .mobile-nav a { padding:11px; border-bottom:1px solid var(--line); }
  .intro-grid { width:min(100% - 32px,760px); min-height:auto; grid-template-columns:1fr; gap:32px; padding:42px 0 34px; }
  .intro-copy { order:1; }.explorer { order:2; }
  .module { padding:62px 0; }
  .module-inner,.page-intro,.route-layout,.support-layout,.footer>div { width:min(100% - 32px,760px); }
  .map-grid { grid-template-columns:1fr 1fr; }
  .state-grid { grid-template-columns:1fr 1fr; }
  .state-checklist { grid-column:1/-1; }
  .preview-board { grid-template-columns:120px 1fr; }
  .preview-notes { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .android-grid { gap:40px; }
  .closing-inner { width:min(100% - 32px,760px); }
  .page-intro { grid-template-columns:1fr; gap:24px; }
  .page-intro aside { display:none; }
  .route-layout { grid-template-columns:1fr; gap:28px; }
  .route-nav { position:static; grid-template-columns:repeat(3,1fr); }
  .route-download { grid-template-columns:1fr; }
}
@media(max-width:560px){
  .topbar-row { height:66px; }
  .wordmark img { width:38px; height:38px; }.wordmark span { font-size:14px; }
  .mobile-nav { top:66px; }
  .intro-grid { padding:25px 0 20px; gap:16px; }
  .intro h1 { margin:9px 0 12px; font-size:31px; line-height:1.17; }
  .intro-copy>p { font-size:14px; line-height:1.58; }
  .intro-buttons { margin:17px 0; }.intro-buttons a { flex:1; }
  .intro-meta { display:none; }
  .explorer-head { height:45px; }.explorer-body { min-height:230px; grid-template-columns:82px 1fr; }
  .explorer-tabs { padding:10px 7px; }.explorer-tabs button { padding:7px 5px; font-size:12px; }
  .explorer-detail { padding:9px 12px; grid-template-columns:1fr 105px; grid-template-rows:auto 1fr; }
  .panel-title { grid-column:1/-1; }.panel-title small { display:none; }
  .explorer-detail img { width:auto; height:150px; }.status-line { display:block; border:0; padding:12px 0 0; }.status-line b { display:block; }
  .module { padding:50px 0; }.module-title h2 { font-size:29px; }
  .map-grid { grid-template-columns:1fr; }.map-grid article { min-height:auto; }.map-grid h3 { margin-top:16px; }
  .state-grid,.android-grid { grid-template-columns:1fr; gap:30px; }.state-photo img { height:330px; }
  .preview-board { grid-template-columns:1fr; }.preview-index { display:grid; grid-template-columns:1fr 1fr; }
  .preview-notes { grid-column:auto; grid-template-columns:1fr; }.faq-link-grid { grid-template-columns:1fr; }
  .closing-inner,.support-close { align-items:flex-start; flex-direction:column; }.closing-inner>div:last-child,.support-close>div:last-child { width:100%; }.closing a,.support-close>div:last-child a { flex:1; }
  .page-intro { min-height:auto; padding:40px 0; }.page-intro h1 { font-size:32px; }.page-actions a { flex:1; min-width:0; }
  .route-nav { grid-template-columns:1fr 1fr; }.route-download>div { width:100%; }.route-download a { flex:1; min-width:0; }
  .support-filter { overflow-x:auto; }.support-filter button { white-space:nowrap; }
  .support-item>button { grid-template-columns:48px 1fr 22px; }.support-item>div { padding-left:62px; padding-right:10px; }
}