.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.section-space { padding-block: 110px; }
.section-label { margin-bottom: 22px; color: var(--signal-blue); font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.connection-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #82b59a; }
.mobile-break { display: none; }
.landing-hero { padding-top: 78px; text-align: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-400); font-size: 13px; letter-spacing: .04em; }
.landing-hero h1 { margin: 26px 0 24px; font-size: clamp(62px, 6.1vw, 88px); font-weight: 650; line-height: 1.23; letter-spacing: -.045em; }
.landing-hero h1 > span { display: block; }
.hero-period { color: var(--signal-blue); }
.hero-description { color: var(--ink-400); font-size: 17px; line-height: 1.9; }
.hero-actions { justify-content: center; margin-top: 29px; }
.hero-actions .button { min-width: 170px; }
.platform-note { margin-top: 20px; color: var(--ink-500); font-size: 11px; letter-spacing: .025em; }
.platform-note span { padding-inline: 9px; color: var(--ink-600); }
.product-showcase { width: min(1192px, calc(100% - 96px)); margin: 60px auto 0; }
.showcase-stage { position: relative; margin-right: 44px; }
.showcase-main { display: block; overflow: hidden; border: 1px solid #303641; border-radius: 12px; background: var(--ink-850); }
.showcase-main img { width: 100%; height: auto; }
.showcase-companion { position: absolute; right: -44px; bottom: -27px; display: block; width: 21%; overflow: hidden; background: var(--ink-900); border: 5px solid #23262d; border-radius: 26px; box-shadow: -16px 12px 40px rgb(0 0 0 / .28); }
.showcase-companion img { width: 100%; height: auto; border-radius: 20px; }
.product-showcase figcaption { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 54px; color: var(--ink-400); font-size: 12px; }
.demo-label { margin-left: 8px; color: var(--ink-500); font-size: 10px; }
.landing-heading { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.landing-heading h2, .handoff-copy h2, .ownership-heading h2, .start-layout h2, .questions-layout h2 { font-size: clamp(32px, 3.3vw, 46px); font-weight: 600; line-height: 1.35; letter-spacing: -.025em; }
.landing-heading > p:last-child { margin-top: 18px; color: var(--ink-400); font-size: 16px; }
.moments-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.moment { min-width: 0; padding: 0 42px; border-left: 1px solid var(--ink-700); }
.moment:first-child { padding-left: 0; border-left: 0; }
.moment:last-child { padding-right: 0; }
.feature-icon { width: 27px; height: 27px; margin-bottom: 25px; color: var(--signal-blue); stroke-width: 1.3; }
.moment h3 { margin-bottom: 13px; font-size: 21px; font-weight: 550; }
.moment p { max-width: 290px; color: var(--ink-400); font-size: 14px; line-height: 1.9; }
.moment-detail { display: block; margin-top: 23px; color: var(--ink-500); font-size: 12px; }
.handoff-section { background: var(--ink-900); border-block: 1px solid var(--ink-800); }
.handoff-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.handoff-copy > p:not(.section-label) { max-width: 410px; margin-top: 26px; color: var(--ink-400); font-size: 15px; line-height: 1.95; }
.handoff-steps { display: grid; gap: 25px; margin: 32px 0 27px; padding: 0; list-style: none; }
.handoff-steps li { display: flex; gap: 19px; }
.handoff-steps li > span { padding-top: 2px; color: var(--signal-blue); font-family: Consolas, monospace; font-size: 12px; }
.handoff-steps h3 { font-size: 15px; font-weight: 550; line-height: 1.5; }
.handoff-steps p { margin-top: 5px; color: var(--ink-500); font-size: 13px; }
.handoff-media { justify-self: center; width: min(292px, 100%); margin: 0; }
.handoff-media picture { display: block; overflow: hidden; border: 5px solid #252830; border-radius: 30px; }
.handoff-media img { width: 100%; height: auto; }
.handoff-media figcaption { margin-top: 18px; color: var(--ink-500); font-size: 11px; text-align: center; }
.handoff-media figcaption span { margin-inline: 8px; }
.ownership-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 46px; }
.ownership-heading > p { padding-bottom: 6px; color: var(--ink-400); font-size: 14px; line-height: 1.9; }
.connection-map { display: flex; align-items: center; gap: 28px; padding: 42px 36px; background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: 12px; }
.connection-node { display: flex; align-items: center; gap: 16px; flex: none; }
.connection-node > .icon { width: 29px; height: 29px; color: var(--ink-400); stroke-width: 1.25; }
.connection-node > img { border-radius: 7px; }
.connection-node div { display: grid; gap: 5px; }
.connection-node strong { font-size: 15px; font-weight: 550; }
.connection-node span { color: var(--ink-500); font-size: 11px; }
.connection-line { position: relative; flex: 1; min-width: 20px; height: 1px; background: var(--ink-700); }
.connection-line::after { position: absolute; top: -2px; right: 0; width: 5px; height: 5px; border-top: 1px solid var(--ink-500); border-right: 1px solid var(--ink-500); content: ""; transform: rotate(45deg); }
.ownership-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; margin-top: 36px; }
.ownership-details h3 { margin-bottom: 12px; font-size: 15px; font-weight: 550; }
.ownership-details p { color: var(--ink-500); font-size: 13px; line-height: 1.9; }
.start-section { padding-top: 20px; }
.start-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 85px; align-items: center; }
.start-description { margin: 23px 0 20px; color: var(--ink-400); font-size: 15px; line-height: 1.9; }
.setup-terminal { overflow: hidden; background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: 12px; }
.terminal-heading { display: flex; align-items: center; gap: 16px; padding: 17px 22px; color: var(--ink-400); border-bottom: 1px solid var(--ink-700); font-size: 11px; }
.terminal-heading > span:last-child { margin-left: auto; color: var(--ink-500); font-family: Consolas, monospace; }
.terminal-dots { display: flex; gap: 5px; }
.terminal-dots i { width: 6px; height: 6px; background: var(--ink-600); border-radius: 50%; }
.setup-steps { display: grid; gap: 25px; margin: 0; padding: 27px 22px 25px; list-style: none; }
.setup-step-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--ink-500); font-family: Consolas, monospace; font-size: 10px; }
.setup-step-label span { color: var(--ink-400); font-family: inherit; }
.setup-terminal .command-block { background: transparent; border: 0; border-radius: 0; }
.setup-terminal .command-block pre { padding: 4px 43px 4px 0; font-size: 12px; line-height: 2; }
.setup-terminal .copy-button { top: 0; right: 0; min-width: 36px; min-height: 32px; padding: 0 6px; background: transparent; border-color: transparent; font-size: 10px; }
.setup-terminal .copy-button:hover { border-color: var(--ink-700); background: var(--ink-800); }
.terminal-note { display: flex; align-items: center; gap: 8px; padding: 16px 22px; color: var(--ink-500); border-top: 1px solid var(--ink-700); font-size: 10px; }
.terminal-note .connection-dot { width: 5px; height: 5px; }
.download-section { background: var(--ink-900); border-block: 1px solid var(--ink-800); scroll-margin-top: calc(var(--header-height) + 24px); }
.platform-downloads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.platform-download { min-width: 0; min-height: 260px; padding: 28px 22px 24px; background: var(--ink-950); border: 1px solid var(--ink-700); border-radius: 10px; }
.platform-mark { display: block; width: 30px; height: 32px; margin-bottom: 25px; color: var(--ink-300); font-family: "Segoe UI Symbol", sans-serif; font-size: 31px; line-height: 1; }
.platform-mark--ios { width: auto; padding-top: 8px; font-family: inherit; font-size: 21px; font-weight: 600; letter-spacing: -.045em; }
.platform-download h3 { margin-bottom: 10px; font-size: 18px; font-weight: 550; line-height: 1.3; }
.platform-download > p { color: var(--ink-500); font-size: 11px; }
.download-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 17px; color: var(--paper); font-size: 12px; }
.download-link:hover { color: var(--signal-blue); }
.download-link > span { color: var(--ink-500); font-size: 15px; }
.download-note { display: block; margin-top: 9px; color: var(--ink-500); font-size: 10px; line-height: 1.8; }
.download-qr { margin-top: 7px; border-top: 1px solid var(--ink-700); }
.download-qr summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--ink-400); font-size: 11px; list-style: none; cursor: pointer; }
.download-qr summary::-webkit-details-marker { display: none; }
.download-qr summary > span { font-size: 15px; transition: transform 180ms ease; }
.download-qr[open] summary > span { transform: rotate(45deg); }
.download-qr img { width: 164px; height: 164px; max-width: 100%; margin: 6px auto 12px; background: #fff; border: 8px solid #fff; border-radius: 6px; }
.download-footnote { margin-top: 27px; color: var(--ink-500); font-size: 12px; text-align: center; }
.download-footnote a { margin-inline: 3px; color: var(--ink-300); text-decoration: underline; text-underline-offset: 4px; }
.questions-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; }
.questions-layout h2 { font-size: 31px; }
.questions-layout > div > p:last-child { margin-top: 20px; color: var(--ink-500); font-size: 14px; }
.landing-faq { border-top: 1px solid var(--ink-700); }
.landing-faq details { border-bottom: 1px solid var(--ink-700); }
.landing-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 77px; padding-block: 19px; color: var(--paper-soft); font-size: 14px; list-style: none; cursor: pointer; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { flex: none; color: var(--ink-500); content: "+"; font-size: 20px; font-weight: 300; }
.landing-faq details[open] summary::after { content: "−"; }
.landing-faq details p { padding: 0 30px 24px 0; color: var(--ink-400); font-size: 13px; line-height: 1.9; }
.landing-faq a { color: var(--signal-blue); text-decoration: underline; text-underline-offset: 4px; }
.closing-section { padding: 36px 0 110px; text-align: center; }
.closing-section img { margin: 0 auto 25px; border-radius: 10px; }
.closing-section h2 { margin-bottom: 30px; font-size: clamp(38px, 4vw, 55px); font-weight: 550; line-height: 1.35; letter-spacing: -.025em; }
.closing-section .button-row { justify-content: center; }
@media (max-width: 1100px) {
  .landing-hero { padding-top: 66px; }
  .product-showcase { width: calc(100% - 64px); }
  .moment { padding-inline: 27px; }
  .handoff-layout { gap: 48px; }
  .connection-map { gap: 18px; padding-inline: 26px; }
  .connection-node { gap: 10px; }
  .connection-node strong { font-size: 13px; }
  .connection-node span { font-size: 10px; }
  .start-layout { gap: 45px; }
  .platform-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-download { min-height: 240px; }
  .questions-layout { gap: 40px; }
}
@media (max-width: 720px) {
  .section-space { padding-block: 72px; }
  .section-label { margin-bottom: 18px; font-size: 11px; }
  .mobile-break { display: inline; }
  .landing-hero { padding-top: 46px; }
  .hero-kicker { gap: 7px; font-size: 10px; letter-spacing: .015em; }
  .landing-hero h1 { margin: 24px 0 22px; font-size: clamp(38px, 10.4vw, 60px); line-height: 1.3; letter-spacing: -.04em; }
  .hero-description { max-width: 320px; margin-inline: auto; font-size: 13px; line-height: 1.95; text-wrap: pretty; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: min(310px, 100%); margin: 26px auto 0; }
  .hero-actions .button { min-height: 48px; font-size: 13px; }
  .platform-note { margin-top: 17px; font-size: 10px; }
  .platform-note span { padding-inline: 5px; }
  .product-showcase { width: min(302px, calc(100% - 72px)); margin-top: 35px; }
  .showcase-stage { margin-right: 0; }
  .showcase-main { border: 4px solid #252830; border-radius: 25px; }
  /* 窄屏直接选择移动素材，复用同一 URL，不额外下载桌面宽图。 */
  .showcase-main img { aspect-ratio: 480 / 1038; }
  .showcase-companion { display: none; }
  .product-showcase figcaption { flex-wrap: wrap; gap: 7px; margin-top: 22px; font-size: 10px; white-space: nowrap; }
  .demo-label { display: none; }
  .landing-heading { margin-bottom: 38px; }
  .landing-heading > p:last-child { font-size: 13px; }
  .moments-grid { grid-template-columns: 1fr; }
  .moment, .moment:first-child, .moment:last-child { position: relative; min-height: 157px; padding: 26px 0 26px 49px; border: 0; border-top: 1px solid var(--ink-700); }
  .moment:last-child { border-bottom: 1px solid var(--ink-700); }
  .feature-icon { position: absolute; top: 28px; left: 0; width: 23px; height: 23px; margin: 0; }
  .moment h3 { margin-bottom: 9px; font-size: 18px; }
  .moment p { max-width: none; font-size: 13px; }
  .moment-detail { margin-top: 12px; font-size: 11px; }
  .handoff-layout { grid-template-columns: 1fr; gap: 40px; }
  .handoff-copy > p:not(.section-label) { max-width: 100%; margin-top: 20px; font-size: 14px; }
  .handoff-steps { gap: 23px; }
  .handoff-media { width: min(270px, 82%); }
  .ownership-heading { display: block; margin-bottom: 29px; }
  .ownership-heading > p { margin-top: 21px; padding: 0; font-size: 13px; }
  .connection-map { flex-direction: column; align-items: stretch; gap: 16px; padding: 26px; }
  .connection-node { gap: 20px; }
  .connection-node > .icon, .connection-node > img { width: 30px; height: 30px; }
  .connection-node strong { font-size: 14px; }
  .connection-node span { font-size: 11px; }
  .connection-line { flex: none; min-width: 0; width: 1px; height: 26px; margin-left: 14px; }
  .connection-line::after { top: auto; right: -2px; bottom: 0; transform: rotate(135deg); }
  .ownership-details { grid-template-columns: 1fr; gap: 25px; margin-top: 30px; }
  .ownership-details h3 { margin-bottom: 9px; }
  .start-section { padding-top: 0; }
  .start-layout { grid-template-columns: 1fr; gap: 29px; }
  .start-description { font-size: 14px; }
  .terminal-heading { padding-inline: 18px; }
  .setup-steps { padding-inline: 18px; }
  .setup-terminal .command-block pre { padding-top: 5px; padding-right: 40px; font-size: 10px; }
  .terminal-note { flex-wrap: wrap; padding-inline: 18px; font-size: 9px; }
  .platform-downloads { gap: 12px; }
  .platform-download { min-height: 238px; padding: 22px 16px; }
  .platform-mark { margin-bottom: 22px; }
  .platform-download h3 { font-size: 16px; }
  .platform-download > p { font-size: 10px; }
  .download-link { gap: 4px; font-size: 11px; }
  .download-qr img { height: auto; border-width: 5px; }
  .download-footnote { font-size: 11px; }
  .questions-layout { grid-template-columns: 1fr; gap: 30px; }
  .questions-layout h2 { font-size: 30px; }
  .questions-layout > div > p:last-child { font-size: 13px; }
  .landing-faq summary { min-height: 72px; font-size: 13px; }
  .closing-section { padding-block: 10px 80px; }
  .closing-section .button-row { width: min(310px, 100%); margin-inline: auto; }
}
@media (max-width: 359px) {
  .platform-downloads { grid-template-columns: 1fr; }
  .platform-download { min-height: auto; }
  .platform-mark { margin-bottom: 18px; }
  .setup-terminal .command-block pre { padding-top: 34px; padding-right: 0; }
}