:root {
      /* 默认主题 = rock。token 数值与 [data-theme="rock"] 完全等价,
       * 写在 :root 里保证 JS 没跑起来之前页面就已经有完整配色。 */
      --bg: oklch(0.918 0.007 92);
      --bg-soft: oklch(0.970 0.007 92);
      --text: oklch(0.333 0.012 92);
      --text-soft: oklch(0.372 0.009 92);
      --text-muted: oklch(0.576 0.014 92);
      --border: oklch(0.861 0.009 92);
      --border-strong: oklch(0.79 0.009 92);
      --brand: oklch(0.55 0.12 22);
      --brand-hover: oklch(0.48 0.12 22);
      --brand-fg: oklch(0.970 0.007 92);
      --link: oklch(0.42 0.18 22);
    }
    [data-theme="light"] {
      --bg: oklch(1 0 0);
      --bg-soft: oklch(0.969 0.003 255);
      --text: oklch(0.215 0.038 255);
      --text-soft: oklch(0.278 0.030 255);
      --text-muted: oklch(0.613 0.018 255);
      --border: oklch(0.928 0.006 255);
      --border-strong: oklch(0.87 0.008 255);
      --brand: oklch(0.552 0.185 273);
      --brand-hover: oklch(0.48 0.185 273);
      --brand-fg: oklch(1 0 0);
      --link: oklch(0.45 0.18 273);
    }
    [data-theme="dark"] {
      --bg: oklch(0.173 0.009 265);
      --bg-soft: oklch(0.213 0.013 265);
      --text: oklch(0.930 0.005 265);
      --text-soft: oklch(0.865 0.008 265);
      --text-muted: oklch(0.716 0.015 265);
      --border: oklch(0.284 0.014 265);
      --border-strong: oklch(0.36 0.014 265);
      --brand: oklch(0.787 0.108 273);
      --brand-hover: oklch(0.85 0.108 273);
      --brand-fg: oklch(0.173 0.009 265);
      --link: oklch(0.80 0.18 273);
    }
    [data-theme="rock"] {
      --bg: oklch(0.918 0.007 92);
      --bg-soft: oklch(0.970 0.007 92);
      --text: oklch(0.333 0.012 92);
      --text-soft: oklch(0.372 0.009 92);
      --text-muted: oklch(0.576 0.014 92);
      --border: oklch(0.861 0.009 92);
      --border-strong: oklch(0.79 0.009 92);
      --brand: oklch(0.55 0.12 22);
      --brand-hover: oklch(0.48 0.12 22);
      --brand-fg: oklch(0.970 0.007 92);
      --link: oklch(0.42 0.18 22);
    }

    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }

    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", system-ui, "Helvetica Neue", Arial, "Public Sans", sans-serif;
      font-size: 16px;
      line-height: 1.65;
      letter-spacing: 0.005em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    a {
      color: var(--link);
      text-decoration: none;
      border-bottom: 1px solid var(--border);
      transition: border-color 0.15s ease, color 0.15s ease;
    }
    a:hover { border-bottom-color: var(--link); }
    a.bare { border: none; }

    code, pre, kbd {
      font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", monospace;
      font-size: 0.9em;
    }

    code {
      background: var(--bg-soft);
      padding: 0.15em 0.4em;
      border-radius: 3px;
      border: 1px solid var(--border);
    }
    pre {
      background: var(--bg-soft);
      padding: 1rem 1.25rem;
      border-radius: 6px;
      overflow-x: auto;
      border: 1px solid var(--border);
      line-height: 1.55;
    }
    pre code {
      background: none;
      padding: 0;
      border: none;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }
    .container-wide {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* Header */
    header {
      padding: 1.25rem 0;
    }
    header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .wordmark {
      font-weight: 600;
      font-size: 1.05rem;
      letter-spacing: -0.01em;
      color: var(--text);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .wordmark .logo {
      width: 24px;
      height: 24px;
      display: block;
      border-radius: 6px;
    }
    .wordmark .dot { color: var(--text-muted); }
    .nav-links { display: flex; gap: 1.5rem; font-size: 0.9rem; }
    .nav-links a {
      color: var(--text-soft);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .nav-links a svg { display: block; }
    .nav-links a:hover { color: var(--text); }

    /* Hero */
    .hero {
      padding: 3.5rem 0 2rem;
      border-top: none;
    }
    .hero h1 {
      font-size: clamp(2.25rem, 5.5vw, 3.5rem);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin: 0 0 1.5rem;
    }
    /* Hero 里的工具名滚动:4 个 + 1 个重复保证无缝循环 */
    .rotator {
      display: inline-block;
      height: 1.15em;
      line-height: 1.15;
      overflow: hidden;
      vertical-align: text-bottom;
      white-space: nowrap;
    }
    .rotator-track {
      display: block;
      animation: rotator-slide 10s linear infinite;
    }
    .rotator-track > span {
      display: block;
      height: 1.15em;
      line-height: 1.15;
    }
    @keyframes rotator-slide {
      0%,  20%  { transform: translateY(0); }
      25%, 45%  { transform: translateY(-1.15em); }
      50%, 70%  { transform: translateY(-2.30em); }
      75%, 95%  { transform: translateY(-3.45em); }
      100%      { transform: translateY(-4.60em); }
    }
    @media (prefers-reduced-motion: reduce) {
      .rotator-track { animation: none; transform: translateY(0); }
    }
    .hero .lede {
      font-size: 1.1rem;
      color: var(--text-soft);
      margin: 0 0 2.5rem;
      max-width: 36em;
    }
    .hero .ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 1.5rem;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.6rem 1.1rem;
      border-radius: 6px;
      font-size: 0.95rem;
      font-weight: 500;
      border: 1px solid var(--border-strong);
      background: var(--bg);
      color: var(--text);
      transition: all 0.15s ease;
    }
    .btn:hover { border-color: var(--text); }
    .btn-primary {
      background: var(--brand);
      color: var(--brand-fg);
      border-color: var(--brand);
      border-radius: 12px;
    }
    .btn-primary:hover {
      background: var(--brand-hover);
      border-color: var(--brand-hover);
      color: var(--brand-fg);
    }
    .hero .meta {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin: 0;
    }

    /* Generic sections */
    section {
      padding: 0 0 4rem;
    }
    hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0 0 2.5rem;
    }
    .eyebrow {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--brand);
      letter-spacing: -0.01em;
      margin: 0 0 2rem;
      display: inline-flex;
      align-items: baseline;
      gap: 0.5rem;
    }
    .eyebrow::before {
      content: "#";
      color: color-mix(in oklch, var(--brand) 50%, transparent);
      font-weight: 400;
    }
    .prose { max-width: 720px; }
    .prose p { margin: 0 0 1rem; }
    .prose p:last-child { margin-bottom: 0; }

    /* Features grid */
    .features {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    @media (min-width: 640px) {
      .features { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
    }
    .agent-features {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-top: 1.5rem;
    }
    @media (min-width: 640px) {
      .agent-features { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    }
    .feature h3 {
      font-size: 1.05rem;
      font-weight: 600;
      margin: 0 0 0.4rem;
      letter-spacing: -0.01em;
    }
    .feature p {
      color: var(--text-soft);
      margin: 0;
      font-size: 0.95rem;
    }

    /* Audience split */
    .audience {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    @media (min-width: 640px) {
      .audience { grid-template-columns: 1fr 1fr; gap: 3rem; }
    }
    .audience-col h3 {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 1rem;
    }
    .audience-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .audience-col li {
      padding: 0.65rem 0;
      border-top: 1px solid var(--border);
      color: var(--text);
      font-size: 0.95rem;
    }
    .audience-col li:last-child { border-bottom: 1px solid var(--border); }
    .audience-col .not { color: var(--text-soft); }

    .theme-stage {
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      background: var(--bg-soft);
      /* 三层投影 ——
       * 想直接写在图片上, 但 .theme-stage 的 overflow:hidden
       * 会把子元素的 box-shadow 裁掉。挪到 stage 上, 配合已有的 20px
       * border-radius, 阴影形状跟随 stage 边缘投影出去。
       *  - 1px 接触阴影: 紧贴边缘, 模拟窗口贴桌面
       *  - 中模糊 (8px / 24px 偏移): 抬升的中段投影
       *  - 大模糊 (24px / 48px 偏移, -16 spread): 远端扩散, 营造悬浮感 */
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 8px 24px -6px rgba(0, 0, 0, 0.10),
        0 24px 48px -16px rgba(0, 0, 0, 0.10);
    }
    .theme-image {
      width: 100%;
      height: auto;
      display: block;
    }
    .theme-image[hidden] { display: none; }

    /* AI capability cards */
    .ai-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
      margin-top: 1.5rem;
    }
    @media (min-width: 640px) {
      .ai-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .ai-item {
      padding: 0.9rem 1rem;
      background: var(--bg-soft);
      border-radius: 6px;
      border: 1px solid var(--border);
    }
    .ai-item .label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      margin-bottom: 0.35rem;
    }
    .ai-item .desc { font-size: 0.9rem; color: var(--text); line-height: 1.45; }

    /* Writing experience */
    .experience-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    @media (min-width: 768px) {
      .experience-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
      }
    }
    .experience-col {
      display: flex;
      flex-direction: column;
    }
    .experience-col h3 { margin: 0 0 0.5rem; }
    .experience-col p  { margin: 0 0 1rem; }
    .experience-col .preview {
      height: 320px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
    }
    .experience-col .preview svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .experience-col h3 {
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .experience-col p {
      color: var(--text-muted);
      font-size: 0.95rem;
      line-height: 1.5;
    }

    /* Footer */
    footer {
      padding: 2.5rem 0;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    footer .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem;
    }
    footer a { color: var(--text-soft); }
    footer a:hover { color: var(--text); }