:root {
      color-scheme: light;
      --bg: #f5f8fc;
      --surface: #ffffff;
      --ink: #1c2523;
      --muted: #5f6f7d;
      --line: #d9e5ef;
      --brand: #1e90ff;
      --brand-strong: #0b73d9;
      --mint: #eaf4ff;
      --mint-strong: #cfe6ff;
      --blue: #2f80ed;
      --amber: #d89428;
      --dark: #10243a;
      --shadow: 0 26px 70px rgba(16, 36, 58, .13);
      font-family: Arial, "Microsoft YaHei", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.75;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    p, h1, h2, h3 { margin-top: 0; }

    .container {
      width: min(1160px, calc(100% - 40px));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(28, 37, 35, .1);
      background: rgba(245, 248, 247, .9);
      backdrop-filter: blur(16px);
    }

    .nav {
      min-height: 72px;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: stretch;
      gap: 12px;
      font-size: 21px;
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--brand);
      color: #ffffff;
      font-weight: 900;
      box-shadow: 0 12px 28px rgba(30, 144, 255, .28);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: var(--muted);
      font-size: 15px;
    }
    .nav-links a:hover { color: var(--brand-strong); }

    .btn {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 18px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }
    .btn-primary {
      color: #ffffff;
      background: var(--brand);
      box-shadow: 0 14px 32px rgba(30, 144, 255, .26);
    }
    .btn-primary:hover { background: var(--brand-strong); }
    .btn-secondary {
      color: var(--ink);
      border-color: var(--line);
      background: #ffffff;
    }

    .hero {
      padding: 78px 0 66px;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(231, 247, 240, .7), rgba(245, 248, 247, 0) 64%),
        var(--bg);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
      gap: 54px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: var(--brand-strong);
      font-size: 14px;
      font-weight: 900;
    }
    .eyebrow::before {
      content: "";
      width: 32px;
      height: 2px;
      background: var(--brand);
    }

    h1 {
      max-width: 780px;
      margin-bottom: 20px;
      font-size: clamp(42px, 6vw, 72px);
      line-height: 1.04;
      letter-spacing: 0;
    }

    .lead {
      max-width: 690px;
      color: var(--muted);
      font-size: 18px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 30px 0 26px;
    }

    .trust-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      max-width: 720px;
    }

    .trust-item {
      min-height: 78px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .74);
      color: var(--muted);
      font-size: 14px;
    }
    .trust-item strong {
      display: block;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.35;
    }

    .preview-stage {
      position: relative;
      min-height: 470px;
      padding: 34px;
      border: 1px solid rgba(28, 37, 35, .12);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .screen-shot {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8faf9;
    }
    .screen-top {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 13px;
      border-bottom: 1px solid var(--line);
      color: #7c8b87;
      font-size: 13px;
    }
    .dots { display: flex; gap: 7px; }
    .dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ef6b5f;
    }
    .dots span:nth-child(2) { background: #f3ba4d; }
    .dots span:nth-child(3) { background: var(--brand); }

    .screenshot-art {
      display: grid;
      grid-template-columns: 1fr 116px;
      min-height: 270px;
      background: #eef5f2;
    }

    .capture-area {
      position: relative;
      min-height: 270px;
      padding: 22px;
      background:
        linear-gradient(90deg, rgba(16, 34, 29, .05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(16, 34, 29, .05) 1px, transparent 1px),
        #f7faf8;
      background-size: 24px 24px;
    }

    .selection {
      position: absolute;
      inset: 52px 58px 58px 58px;
      border: 2px solid var(--brand);
      background: rgba(30, 144, 255, .08);
      box-shadow: 0 0 0 999px rgba(16, 34, 29, .16);
    }
    .selection::before,
    .selection::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand);
    }
    .selection::before { left: -5px; top: -5px; }
    .selection::after { right: -5px; bottom: -5px; }

    .toolbar {
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 18px 14px;
      border-left: 1px solid var(--line);
      background: #ffffff;
    }
    .tool {
      height: 32px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--brand-strong);
      background: var(--mint);
      font-size: 12px;
      font-weight: 900;
    }

    .pin-note {
      position: absolute;
      right: 26px;
      bottom: 26px;
      width: min(260px, 48%);
      padding: 18px;
      border: 1px solid rgba(30, 144, 255, .34);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 18px 44px rgba(16, 34, 29, .18);
    }
    .pin-note strong {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
    }
    .pin-note span {
      color: var(--muted);
      font-size: 14px;
    }

    section { padding: 72px 0; }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 30px;
    }
    .section-head h2 {
      max-width: 660px;
      margin-bottom: 8px;
      font-size: clamp(30px, 4vw, 44px);
      line-height: 1.16;
      letter-spacing: 0;
    }
    .section-head p {
      max-width: 560px;
      margin-bottom: 0;
      color: var(--muted);
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .feature-card {
      min-height: 224px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }
    .feature-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      border-radius: 8px;
      color: var(--brand-strong);
      background: var(--mint);
      font-weight: 900;
    }
    .feature-card:nth-child(2n) .feature-icon {
      color: var(--blue);
      background: #e7f0fc;
    }
    .feature-card:nth-child(3n) .feature-icon {
      color: var(--amber);
      background: #fff2d8;
    }
    .feature-card h3 {
      margin-bottom: 10px;
      font-size: 21px;
      line-height: 1.3;
      letter-spacing: 0;
    }
    .feature-card p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .showcase {
      background: var(--dark);
      color: #f4fbf8;
    }
    .showcase .section-head p,
    .showcase-card p,
    .scene p {
      color: #c4d2cd;
    }
    .showcase-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 22px;
      align-items: stretch;
    }
    .showcase-card {
      padding: 28px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
    }
    .showcase-card h3 {
      margin-bottom: 12px;
      font-size: 26px;
      line-height: 1.28;
    }
    .workflow-list {
      display: grid;
      gap: 12px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }
    .workflow-list li {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: start;
      color: #e5f2ee;
    }
    .workflow-list span {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #ffffff;
      background: rgba(30, 144, 255, .24);
      font-weight: 900;
    }
    .scene-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .scene {
      min-height: 156px;
      padding: 22px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
    }
    .scene h3 {
      margin-bottom: 8px;
      color: #ffffff;
      font-size: 18px;
    }

    .version-table {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
    }
    .version-row {
      display: grid;
      grid-template-columns: 220px 1fr;
      border-bottom: 1px solid var(--line);
    }
    .version-row:last-child { border-bottom: 0; }
    .version-row span,
    .version-row strong {
      padding: 16px 18px;
      line-height: 1.6;
    }
    .version-row span {
      color: var(--muted);
      background: #f7faf8;
    }
    .version-row strong { font-weight: 700; }

    .download {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #ffffff;
    }
    .download-box {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 26px;
      align-items: stretch;
      padding: 32px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(30, 144, 255, .12), rgba(58, 123, 213, .08)),
        #fbfdfc;
    }
    .download-box h2 {
      margin-bottom: 10px;
      font-size: 34px;
      line-height: 1.2;
      letter-spacing: 0;
    }
    .download-box p {
      max-width: 700px;
      color: var(--muted);
    }

    .download-copy {
      min-height: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: auto auto auto auto 1fr auto;
      align-content: stretch;
    }

    .download-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }
    .download-meta span {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--mint);
      color: var(--brand-strong);
      font-size: 13px;
      font-weight: 900;
    }
    .download-panel {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 14px;
      align-self: stretch;
      height: 100%;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 18px 46px rgba(16, 34, 29, .08);
    }

    .download-panel .btn {
      width: 100%;
      min-height: 56px;
      font-size: 18px;
    }

    .download-panel-head {
      padding: 16px;
      border-radius: 8px;
      background: var(--dark);
      color: #d8eee6;
    }

    .download-panel-head span,
    .download-summary span,
    .download-check span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .download-panel-head span {
      color: #b9dcff;
    }

    .download-panel-head strong {
      display: block;
      margin-top: 4px;
      color: #ffffff;
      font-size: 26px;
      line-height: 1.25;
    }

    .download-summary {
      display: grid;
      gap: 10px;
      align-content: stretch;
    }

    .download-summary div {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .download-summary div,
    .download-check {
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
    }

    .download-summary strong,
    .download-check strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.45;
    }

    .download-check {
      background: var(--mint);
      border-color: var(--mint-strong);
      margin-top: 14px;
    }

    .download-check span {
      margin-top: 5px;
    }
    .platform-list {
      display: grid;
      gap: 10px;
      margin-top: 12px;
      align-content: start;
    }
    .platform-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      color: var(--muted);
      font-size: 14px;
    }
    .platform-item strong {
      color: var(--ink);
      white-space: nowrap;
    }
    .comments-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .comment-card {
      min-height: 228px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
    }
    .comment-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .comment-user {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .avatar {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 50%;
      color: #ffffff;
      background: var(--brand);
      font-weight: 900;
    }
    .comment-user strong,
    .comment-user span {
      display: block;
    }
    .comment-user strong {
      color: var(--ink);
      font-size: 15px;
      line-height: 1.35;
    }
    .comment-user span {
      margin-top: 2px;
      color: var(--muted);
      font-size: 13px;
    }
    .stars {
      color: #f4a72c;
      font-size: 13px;
      white-space: nowrap;
    }
    .comment-card p {
      margin-bottom: 0;
      color: var(--muted);
    }
    .comment-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }
    .comment-meta span {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      color: var(--brand-strong);
      background: var(--mint);
      font-size: 13px;
      font-weight: 800;
    }

    .faq-list {
      display: grid;
      gap: 12px;
      max-width: 920px;
      margin: 0 auto;
    }
    details {
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
    }
    summary {
      cursor: pointer;
      color: var(--ink);
      font-weight: 900;
    }
    details p {
      margin: 12px 0 0;
      color: var(--muted);
    }

    .footer {
      padding: 34px 0;
      background: var(--dark);
      color: #c4d2cd;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      font-size: 14px;
    }
    .footer nav {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    @media (max-width: 980px) {
      .hero-grid,
      .showcase-grid,
      .download-box {
        grid-template-columns: 1fr;
      }
      .feature-grid,
      .comments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .download-panel {
        max-width: none;
      }
    }

    @media (max-width: 720px) {
      .container { width: min(100% - 28px, 1160px); }
      .nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px 0;
      }
      .nav-links {
        width: 100%;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .hero { padding-top: 48px; }
      h1 { font-size: 42px; }
      .trust-row,
      .feature-grid,
      .scene-grid,
      .comments-grid {
        grid-template-columns: 1fr;
      }
      .section-head { display: block; }
      .screenshot-art { grid-template-columns: 1fr; }
      .toolbar {
        flex-direction: row;
        overflow-x: auto;
        border-left: 0;
        border-top: 1px solid var(--line);
      }
      .tool {
        min-width: 44px;
      }
      .pin-note {
        position: static;
        width: 100%;
        margin-top: 18px;
      }
      .version-row { grid-template-columns: 1fr; }
      .download-box { padding: 24px; }
      .download-copy {
        min-height: 0;
        display: block;
      }
      .download-panel {
        height: auto;
        grid-template-rows: none;
      }
      .platform-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }
      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }