/* 教学工具产品页 · Apple 式简洁风（配套站点令牌） */
:root {
  --z-canvas: #ffffff;
  --z-alt: #f5f5f7;
  --z-ink: #1d1d1f;
  --z-ink-soft: #6e6e73;
  --z-line: #d2d2d7;
  --z-accent: #0071e3;
  --z-brand: #0071e3;
}
.z-body { background: var(--z-canvas); color: var(--z-ink);
  font-family: "SF Pro SC", "PingFang SC", "Microsoft YaHei",
               -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; }

/* 顶部毛玻璃导航 */
.z-nav { position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .06); }
.z-nav-inner { max-width: 980px; margin: 0 auto; padding: 0 22px;
  height: 48px; display: flex; align-items: center; gap: 26px; }
.z-nav a { color: var(--z-ink); text-decoration: none; font-size: 13px;
  opacity: .82; white-space: nowrap; }
.nw { white-space: nowrap; }
.z-nav a:hover { opacity: 1; color: var(--z-accent); }
.z-nav .z-brand { font-weight: 700; opacity: 1; }

/* Hero */
.z-hero { text-align: center; padding: 92px 22px 40px; }
.z-hero h1 { font-size: clamp(40px, 6.4vw, 68px); font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 14px; color: var(--z-ink); }
.z-hero .z-sub { font-size: clamp(18px, 2.4vw, 24px);
  color: var(--z-ink-soft); margin: 0 auto; max-width: 640px;
  line-height: 1.5; font-weight: 400; }
.z-hero .z-cta { margin-top: 30px; display: flex; gap: 18px;
  justify-content: center; align-items: center; flex-wrap: wrap; }
.z-btn { display: inline-block; background: var(--z-accent);
  color: #fff; border-radius: 980px; padding: 12px 26px;
  font-size: 16px; text-decoration: none; }
.z-btn:hover { background: #0077ed; }
.z-btn.brand { background: var(--z-brand); }
.z-btn.brand:hover { background: #0077ed; }
.z-btn.weak { background: var(--z-alt); color: var(--z-ink); }
.z-btn.weak:hover { background: #e8e8ed; }
.z-link { color: var(--z-accent); text-decoration: none; font-size: 16px; }
.z-link:hover { text-decoration: underline; }
.z-fine { color: var(--z-ink-soft); font-size: 13px; margin-top: 14px; }
.z-fine a { color: var(--z-accent); text-decoration: none; }
.z-fine a:hover { text-decoration: underline; }

/* 截图舞台 */
.z-stage { background: var(--z-alt); padding: 56px 22px 72px;
  text-align: center; }
.z-stage img { max-width: 980px; width: 100%; border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .14); }
.z-video-wrap { max-width: 980px; margin: 0 auto; border-radius: 14px;
  overflow: hidden; background: #000;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .14); }
.z-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #000; }
.z-stage .z-cap { margin-top: 14px; color: var(--z-ink-soft);
  font-size: 13px; }
.z-shotgrid { display: grid; grid-template-columns: repeat(auto-fit,
  minmax(280px, 1fr)); gap: 22px; max-width: 980px; margin: 34px
  auto 0; }
.z-shotgrid figure { margin: 0; }
.z-shotgrid img { width: 100%; border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .10); }
.z-shotgrid figcaption { margin-top: 10px; color: var(--z-ink-soft);
  font-size: 13px; }

/* 区块 */
.z-sec { padding: 96px 22px; }
.z-sec.alt { background: var(--z-alt); }
.z-sec .z-kicker { color: var(--z-brand); font-weight: 600;
  font-size: 15px; margin: 0 0 8px; text-align: center; }
.z-sec h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700;
  letter-spacing: -.015em; text-align: center; margin: 0 0 56px; }
.z-sec .z-wrap { max-width: 980px; margin: 0 auto; }
.z-trio { display: grid; grid-template-columns: repeat(auto-fit,
  minmax(260px, 1fr)); gap: 22px; }
.z-card { background: #fff; border-radius: 18px; padding: 34px 30px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .05); }
.z-card h3 { font-size: 21px; margin: 0 0 10px; font-weight: 600; }
.z-card p { margin: 0; color: var(--z-ink-soft); font-size: 15.5px;
  line-height: 1.65; }
.z-big { display: grid; grid-template-columns: repeat(auto-fit,
  minmax(220px, 1fr)); gap: 34px; text-align: center; }
.z-big .n { font-size: 52px; font-weight: 700; color: var(--z-ink);
  letter-spacing: -.02em; }
.z-big .t { color: var(--z-ink-soft); font-size: 15px; margin-top: 6px;
  line-height: 1.6; }
.z-list { max-width: 680px; margin: 0 auto; }
.z-list dt { font-weight: 600; font-size: 17px; margin-top: 26px; }
.z-list dd { margin: 6px 0 0; color: var(--z-ink-soft); font-size: 15.5px;
  line-height: 1.65; }
/* 页脚（与首页一致） */
.footer { background: var(--z-canvas); border-top: 1px solid var(--z-line);
  padding: 40px 0; }
.footer-inner { max-width: 980px; margin: 0 auto; padding: 0 22px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  text-align: center; color: var(--z-ink-soft); font-size: 13px; }
.footer-brand { font-weight: 600; color: var(--z-ink); font-size: 14px; }
.footer p { margin: 0; }

/* 图文两栏 */
.z-split { display: grid; grid-template-columns: repeat(auto-fit,
  minmax(320px, 1fr)); gap: 44px; align-items: center; }
.z-split figure { margin: 0; }
.z-split img { width: 100%; border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .10); }
.z-split figcaption { margin-top: 10px; color: var(--z-ink-soft);
  font-size: 13px; }
.z-split h3 { font-size: 23px; margin: 0 0 14px; font-weight: 600; }
.z-split p { color: var(--z-ink-soft); font-size: 15.5px;
  line-height: 1.7; margin: 0 0 12px; }

/* 快捷键表 */
.z-keys { width: 100%; max-width: 720px; margin: 0 auto;
  border-collapse: collapse; font-size: 15.5px; }
.z-keys th, .z-keys td { text-align: left; padding: 13px 10px;
  border-bottom: 1px solid var(--z-line); vertical-align: top; }
.z-keys th { width: 170px; font-weight: 600; }
.z-keys td { color: var(--z-ink-soft); }
.z-keys kbd { display: inline-block; background: #fff;
  border: 1px solid var(--z-line); border-radius: 6px;
  padding: 2px 7px; font-family: ui-monospace, Consolas, monospace;
  font-size: 13.5px; color: var(--z-ink); }
.z-list code, .z-sec code { background: var(--z-alt);
  border-radius: 5px; padding: 1px 6px; font-size: 13.5px;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--z-ink-soft); }

/* 文本折行：标题均衡、正文避免孤字 */
.z-hero h1, .z-hero .z-sub, .z-sec h2,
.z-card h3, .z-split h3, .z-trio h3 { text-wrap: balance; }
.z-body p, .z-list dd, .z-card p, .z-split p,
.z-fine, .z-cap { text-wrap: pretty; }

/* 窄屏：导航换行而不是逐字断开 */
@media (max-width: 760px) {
  .z-nav-inner { height: auto; min-height: 48px; flex-wrap: wrap;
    padding: 8px 22px; row-gap: 6px; }
}