:root {
  color-scheme: light;
  --paper: #fffdf9;
  --ink: #202a32;
  --muted: #69736e;
  --soft: #f4f1eb;
  --line: #e7e5df;
  --orange: #e85d04;
  --orange-soft: #fff0d8;
  --orange-line: #eec496;
  --phone: #fafaf8;
  --phone-frame: #252e2a;
  --green: #24643e;
  --green-soft: #edf7ef;
  --green-line: #bcd9c5;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  background: var(--paper);
  color: var(--ink);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #202524;
  --ink: #f2f3f3;
  --muted: #b2bbb5;
  --soft: #292e2d;
  --line: #424946;
  --orange: #f58a48;
  --orange-soft: #413221;
  --orange-line: #85613b;
  --phone: #28302c;
  --phone-frame: #4b554e;
  --green: #b6e6c5;
  --green-soft: #243d2e;
  --green-line: #486d55;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; line-height: 1.6; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button, a { touch-action: manipulation; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
.skip-link { position: absolute; top: -100px; left: 18px; z-index: 10; background: var(--paper); padding: 12px; }
.skip-link:focus { top: 8px; }
.site-shell { max-width: 1280px; margin: auto; padding: 0 64px; min-height: 100svh; display: flex; flex-direction: column; }
.site-header { min-height: 100px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { object-fit: contain; }
.brand strong { display: block; font-size: 22px; letter-spacing: 2px; line-height: 1.3; }
.brand small { display: block; font-size: 10px; letter-spacing: 2px; margin-top: 5px; color: var(--muted); }
.header-right { display: flex; align-items: center; gap: 25px; }
.brand-note { color: var(--muted); font-size: 12px; }
.web-link { font-size: 13px; white-space: nowrap; }
.theme-switch { display: flex; background: var(--soft); padding: 4px; gap: 3px; border: 1px solid var(--line); border-radius: 28px; }
.theme-switch button { border: 0; border-radius: 22px; padding: 8px 13px; min-height: 38px; background: transparent; color: var(--muted); font-size: 12px; }
.theme-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 7px #00000012; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; padding: 60px 0 48px; align-items: center; }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--orange); font-size: 13px; letter-spacing: 1px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; flex-shrink: 0; }
h1 { font-size: clamp(40px, 4.8vw, 60px); font-weight: 750; line-height: 1.24; letter-spacing: -2px; margin: 24px 0; }
h1 span { color: var(--orange); }
.intro { color: var(--muted); font-size: 15px; line-height: 1.9; }
.access-area { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 34px; }
.platforms { display: grid; gap: 10px; min-width: 225px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 54px; border-radius: 10px; padding: 14px 20px; border: 1px solid transparent; font-size: 15px; font-weight: 600; text-align: center; }
.button:hover { text-decoration: none; }
.button-primary { background: #dc5705; color: #fff; }
.button-primary:not(:disabled):hover { background: #c64c00; }
.button-primary:disabled { background: var(--soft); color: var(--muted); border-color: var(--line); font-weight: 500; }
.button-disabled { background: var(--soft); color: var(--muted); border-color: var(--line); font-weight: 400; }
.button-wechat { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.caption { color: var(--muted); font-size: 11px; line-height: 1.8; max-width: 280px; overflow-wrap: anywhere; }
.mini-program { display: flex; gap: 15px; align-items: center; }
.mini-program h2 { font-size: 14px; margin-bottom: 8px; }
.mini-program p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.qr-area { flex-shrink: 0; width: 112px; height: 112px; }
.qr-area img { display: block; width: 112px; height: 112px; object-fit: contain; padding: 7px; border-radius: 10px; background: #fff; border: 1px solid #e9ece7; }
.qr-pending { width: 112px; height: 112px; display: grid; place-content: center; position: relative; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.9; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.scan-frame { position: absolute; inset: 10px; background: linear-gradient(var(--muted),var(--muted)) left top/13px 1px,linear-gradient(var(--muted),var(--muted)) left top/1px 13px,linear-gradient(var(--muted),var(--muted)) right top/13px 1px,linear-gradient(var(--muted),var(--muted)) right top/1px 13px,linear-gradient(var(--muted),var(--muted)) left bottom/13px 1px,linear-gradient(var(--muted),var(--muted)) left bottom/1px 13px,linear-gradient(var(--muted),var(--muted)) right bottom/13px 1px,linear-gradient(var(--muted),var(--muted)) right bottom/1px 13px; background-repeat: no-repeat; opacity: .5; }
.mobile-access { display: none; }
.browser-guide { margin-top: 20px; padding: 14px 16px; background: var(--orange-soft); border-radius: 10px; font-size: 12px; }
.browser-guide strong { color: var(--ink); display: block; margin-bottom: 5px; font-size: 13px; }
.browser-guide p { color: var(--muted); }
.notice { font-size: 13px; margin-top: 18px; }
.product-visual { position: relative; min-width: 0; display: flex; justify-content: center; align-items: center; padding: 10px 20px 28px; }
.orbit { position: absolute; width: min(100%, 350px); aspect-ratio: 1; border-radius: 50%; background: var(--orange-soft); }
.orbit::after { content: ""; position: absolute; inset: 22px; border: 1px dashed var(--orange-line); border-radius: 50%; }
.role-stamp { position: absolute; right: -6px; top: 27px; transform: rotate(5deg); z-index: 2; padding: 15px 19px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 30px #00000008; border-radius: 14px; font-size: 12px; }
.role-stamp strong { display: block; font-size: 18px; color: var(--orange); margin-bottom: 5px; }
.phone { position: relative; width: 236px; border: 6px solid var(--phone-frame); border-radius: 34px; padding: 14px 13px 18px; background: var(--phone); box-shadow: 13px 23px 40px #00000016; transform: rotate(-5deg); }
.phone-status { display: flex; justify-content: space-between; padding: 0 5px 16px; font-size: 9px; }
.phone-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; font-size: 16px; }
.phone-heading span { font-size: 9px; color: var(--muted); }
.phone-banner { background: #ef6a21; color: #fff; padding: 20px 12px; border-radius: 11px; }
.phone-banner strong { font-size: 20px; }
.phone-banner p { font-size: 10px; margin-top: 5px; }
.phone-tools { display: flex; justify-content: space-around; gap: 10px; padding: 17px 0; text-align: center; font-size: 10px; }
.phone-tools i { font-style: normal; display: block; padding: 9px; border-radius: 11px; margin-bottom: 5px; color: var(--orange); background: var(--orange-soft); }
.phone-order { padding: 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); margin-bottom: 10px; }
.phone-order strong { display: block; font-size: 13px; }
.phone-order p { font-size: 9px; color: var(--muted); margin-top: 9px; }
.phone-order > span { font-size: 11px; color: var(--orange); display: block; margin-top: 10px; }
.phone-tabs { display: flex; justify-content: space-between; padding: 8px 3px 0; color: var(--muted); font-size: 9px; }
.phone-tabs span:first-child { color: var(--orange); }
.visual-note { position: absolute; bottom: 0; color: var(--muted); font-size: 11px; }
.features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; border-top: 1px solid var(--line); padding: 30px 0 40px; }
.feature-icon { display: block; font-size: 23px; color: var(--orange); margin-bottom: 8px; line-height: 1; }
.features h2 { font-size: 16px; margin-bottom: 10px; }
.features p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.site-footer { margin-top: auto; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 23px 0; color: var(--muted); font-size: 11px; }
.site-footer > div { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 1000px) {
  .site-shell { padding: 0 38px; }
  .brand-note { display: none; }
  .hero { gap: 18px; }
  .access-area { align-items: flex-start; flex-direction: column; }
  .role-stamp { right: -10px; top: 10px; }
}
@media (max-width: 600px) {
  .site-shell { padding: 0 22px; }
  .site-header { min-height: 82px; gap: 12px; }
  .brand { gap: 8px; }
  .brand img { width: 40px; height: 40px; }
  .brand strong { font-size: 19px; }
  .brand small { font-size: 8px; letter-spacing: 1px; }
  .header-right { gap: 0; }
  .web-link { display: none; }
  .theme-switch { padding: 3px; }
  .theme-switch button { padding: 7px 10px; min-height: 40px; }
  .hero { display: block; padding: 30px 0 22px; }
  .eyebrow { font-size: 12px; letter-spacing: 0; gap: 8px; }
  h1 { font-size: clamp(36px, 10vw, 46px); margin: 19px 0; }
  .intro { font-size: 14px; }
  .access-area { display: grid; gap: 18px; margin-top: 27px; }
  .platforms { width: 100%; min-width: 0; gap: 10px; }
  .button { width: 100%; min-height: 54px; }
  .caption { max-width: none; font-size: 12px; }
  .mobile-access { display: grid; gap: 12px; }
  .mobile-web { display: block; text-align: center; color: var(--green); font-size: 14px; padding: 9px; min-height: 44px; }
  .mini-program { border-top: 1px solid var(--line); padding-top: 20px; gap: 18px; }
  .product-visual { display: none; }
  .features { gap: 18px; padding: 26px 0; }
  .features h2 { font-size: 13px; }
  .features p { font-size: 12px; }
  .site-footer { flex-direction: column; padding: 22px 0; }
  .site-footer > div { gap: 16px; }
}
@media (max-width: 360px) {
  .site-shell { padding: 0 16px; }
  .features { grid-template-columns: 1fr; gap: 22px; }
  .features article { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; }
  .features h2 { margin-bottom: 4px; }
  .features p { grid-column: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .theme-switch button { transition: background-color 150ms ease, color 150ms ease; }
}

/* 教程入口沿用官网主题，不依赖下载配置接口。 */
.tutorial-link { color: var(--orange); font-size: 13px; white-space: nowrap; }
.tutorial-card { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 19px; background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: 12px; }
.tutorial-card:hover { text-decoration: none; border-color: var(--orange); }
.tutorial-play { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #dc5705; color: white; }
.tutorial-card small { display: block; color: var(--muted); font-size: 11px; }
.tutorial-card strong { display: block; font-size: 16px; margin: 4px 0; }
.tutorial-description { display: block; font-size: 11px; color: var(--muted); }
.tutorial-card b { font-size: 12px; color: var(--orange); margin-left: auto; white-space: nowrap; }
@media (max-width: 600px) {
  .header-right { gap: 8px; }
  .tutorial-link { font-size: 12px; }
  .tutorial-card { flex-wrap: wrap; gap: 10px; padding: 15px; margin-top: 20px; }
  .tutorial-play { width: 36px; height: 36px; font-size: 12px; }
  .tutorial-card strong { font-size: 14px; }
  .tutorial-card b { display: block; width: 100%; text-align: center; color: white; background: #dc5705; padding: 12px; min-height: 44px; border-radius: 7px; margin-top: 3px; }
}