/* CopySync 官网。由 tools/site/build.py 生成的页面共用这一份样式。
 *
 * 整页一种深色：石墨底，系统蓝只给按钮、链接、直连的线和「被复制的那张纸」。
 * 区块之间靠留白分开，不再交替换底色。首屏的复制动画是整页唯一的动画。
 * 不加载网页字体：Mac 上是 SF Pro、苹方、冬青，Windows 上是 Segoe UI、微软雅黑、Meiryo。
 * 从手机宽度写起，宽屏再放开；标题与引言居中，正文、列表、表格左对齐。
 */

:root {
  color-scheme: dark;

  --ground: #141416;
  --surface: #1c1c1f;
  --surface-2: #242428;
  --rule: #2b2b30;
  --rule-strong: #3a3a40;
  --ink: #f3f3f1;
  --ink-2: #cfcfcb;
  --dim: #95959b;
  --faint: #66666c;
  --blue: #3d8bea;
  --blue-hi: #6ea9f1;
  --blue-wash: rgba(61, 139, 234, 0.13);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --content: 72rem;
  --text: 38rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(5rem, 12vw, 9rem);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* 日文用日文字形：冬青与 Meiryo 排在中文字体前面 */
:lang(ja) {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans CJK JP", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
    "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans CJK JP", sans-serif;
}

/* 繁体用繁体字形：苹方的繁体版与微软正黑排在简体字体前面 */
:lang(zh-TW) {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
    "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
    "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
}

:lang(zh-HK) {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
    "PingFang HK", "Microsoft JhengHei", "Noto Sans CJK HK", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
    "Segoe UI", "PingFang HK", "Microsoft JhengHei", "Noto Sans CJK HK", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  background: var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

:lang(zh) body,
body:lang(zh),
body:lang(ja) {
  line-height: 1.8;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--blue-hi);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(61, 139, 234, 0.45);
}

.wrap {
  width: min(100%, var(--content));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
}

caption.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ── 顶栏 ── */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  background: rgba(20, 20, 22, 0.74);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 26px;
  height: 26px;
}

.bar nav {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.6vw, 1.6rem);
  font-size: 0.875rem;
  white-space: nowrap;
}

.bar nav a {
  color: var(--dim);
}

.bar nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

/* 窄屏只留快速开始、连接方式、下载与语言菜单；手机上连接方式也收起来（快速开始里就有），
   最窄的手机上品牌只留图标。英文、日文的导航字数多，按它们算的宽度，不然会撑出横向滚动 */
@media (max-width: 46rem) {
  .bar nav .wide {
    display: none;
  }
}

@media (max-width: 30rem) {
  .bar nav .mid {
    display: none;
  }
}

@media (max-width: 22.5rem) {
  .brand {
    font-size: 0;
  }
}

/* 语言菜单：平时只显示当前语言，点开是一列语言，样子照 macOS 的弹出菜单 */
.lang {
  position: relative;
}

.lang summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: -0.3rem -0.45rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  color: var(--dim);
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.lang summary::-webkit-details-marker {
  display: none;
}

.lang summary:hover,
.lang[open] summary {
  color: var(--ink);
}

.lang summary svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.lang summary .chev {
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 0.15s var(--ease);
}

.lang[open] summary .chev {
  transform: rotate(180deg);
}

.lang ul {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: -0.45rem;
  z-index: 20;
  min-width: 11.5rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

/* 每种语言用自己的字体显示，繁体不借简体的字形 */
.lang ul a {
  position: relative;
  display: block;
  padding: 0.3rem 0.75rem 0.3rem 1.75rem;
  border-radius: 6px;
  color: var(--ink-2);
  font-family: var(--sans);
  line-height: 1.6;
}

.lang ul a:hover,
.lang ul a:focus-visible {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  outline: none;
}

/* 当前语言前面打勾 */
.lang ul a[aria-current]::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 50%;
  width: 0.3rem;
  height: 0.6rem;
  margin-top: -0.4rem;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* 窄屏只留地球图标，语言名在菜单里 */
@media (max-width: 52rem) {
  .lang summary span {
    display: none;
  }
}

/* ── 通用排版 ── */

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* 中日文字距本来就紧，负字距会挤在一起 */
:lang(zh) .display,
:lang(ja) .display,
:lang(zh) .section h2,
:lang(ja) .section h2 {
  letter-spacing: -0.01em;
}

/* 日文没有空格，标题按词组换行（支持的浏览器），字号也收一点，手机上「コピーして、」不会被拆开 */
:lang(ja) .display {
  font-size: clamp(1.85rem, 7.4vw, 5.2rem);
  line-height: 1.18;
  word-break: auto-phrase;
}

:lang(ja) .section > .wrap > h2,
:lang(ja) .flow h3 {
  word-break: auto-phrase;
}

.lede {
  margin: 1.6rem auto 0;
  max-width: var(--text);
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.65;
  color: var(--dim);
  text-wrap: pretty;
}

.section {
  padding-block: var(--section) 0;
}

.section > .wrap > h2 {
  margin: 0 auto;
  max-width: 18em;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.intro {
  margin: 1.25rem auto 0;
  max-width: var(--text);
  text-align: center;
  color: var(--dim);
  font-size: clamp(1rem, 1.9vw, 1.12rem);
  text-wrap: pretty;
}

.block {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 64rem;
}

h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.4;
  font-weight: 650;
}

.small {
  font-size: 0.9rem;
  color: var(--dim);
}

.center {
  text-align: center;
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.08em 0.35em;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink-2);
}

/* ── 按钮 ── */

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.4rem;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.button:hover {
  background: #2f7ad6;
  text-decoration: none;
}

.button:active {
  transform: scale(0.98);
}

.button svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.button.quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}

.button.quiet:hover {
  box-shadow: inset 0 0 0 1.5px var(--ink-2);
}

.note {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--dim);
}

/* 下载按钮下面通往快速开始的一行 */
.start-link {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.95rem;
  font-weight: 500;
}

/* 手机上两个下载按钮各占一行、等宽，拇指好点 */
@media (max-width: 30rem) {
  .cta .button {
    flex: 1 1 100%;
  }
}

/* ── 首屏：左边 Mac 按 ⌘C，一张蓝色的纸沿弧线飞到右边的 Windows，按 Ctrl V 落下 ── */

.hero {
  padding: clamp(4rem, 10vw, 7.5rem) 0 0;
  text-align: center;
  overflow: hidden;
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(2rem, 0.45fr) minmax(0, 1fr);
  align-items: end;
  margin: clamp(4.5rem, 10vw, 7rem) auto 0;
  max-width: 62rem;
}

.device {
  margin: 0;
  min-width: 0;
}

.device .screen {
  position: relative;
  aspect-ratio: 16 / 10.4;
  border-radius: clamp(8px, 1.2vw, 14px) clamp(8px, 1.2vw, 14px) 3px 3px;
  background: #0b0b0d;
  box-shadow: inset 0 0 0 clamp(4px, 0.7vw, 8px) #2d2d32, 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* 屏幕里的桌面：Mac 顶部有菜单栏，Windows 底部有居中的任务栏，一眼分得出 */
.device .desk {
  position: absolute;
  inset: clamp(4px, 0.7vw, 8px);
  border-radius: clamp(4px, 0.6vw, 8px) clamp(4px, 0.6vw, 8px) 0 0;
  overflow: hidden;
}

.mac .desk {
  background: linear-gradient(#3a3c43, #27292e);
}

.mac .desk::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7%;
  background: rgba(255, 255, 255, 0.08);
}

.win .desk {
  background: linear-gradient(#2e3747, #222730);
}

.win .desk::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 10%;
  background: rgba(255, 255, 255, 0.07);
}

.win .taskbar {
  position: absolute;
  bottom: 2.6%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4%;
  width: 30%;
  height: 5%;
  z-index: 1;
}

.win .taskbar i {
  flex: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.device .base {
  height: clamp(6px, 1vw, 12px);
  margin: 0 -6%;
  border-radius: 0 0 clamp(8px, 1.4vw, 16px) clamp(8px, 1.4vw, 16px);
  background: linear-gradient(#45454b, #26262a);
}

.device figcaption {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--dim);
}

.file {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 60%;
  font-size: clamp(0.5rem, 1.1vw, 0.8rem);
  line-height: 1.3;
  color: #ececee;
}

.file .doc {
  position: relative;
  width: clamp(1.5rem, 4.2vw, 3.3rem);
  aspect-ratio: 0.78;
  border-radius: 10%;
  background: #f5f5f4;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* 纸上的三行字，与 App 图标同一个造型 */
.lines {
  position: absolute;
  inset: 22% 18% auto;
  display: grid;
  gap: 14%;
}

.lines i {
  display: block;
  height: 0.28em;
  min-height: 2px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.85;
}

.lines i:nth-child(1) { width: 100%; }
.lines i:nth-child(2) { width: 75%; }
.lines i:nth-child(3) { width: 52%; }

.file .doc .lines {
  color: #4a4a4f;
}

.file .name {
  max-width: 100%;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage:not(.play) .win .file {
  opacity: 1;
}

.stage.play .win .file {
  opacity: 0;
}

.keys {
  position: absolute;
  right: 5%;
  bottom: 14%;
  display: flex;
  gap: 0.3rem;
}

.mac .keys {
  bottom: 9%;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 2em;
  height: 2em;
  padding: 0 0.45em;
  border-radius: 6px;
  background: #3b3d43;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  font: 600 clamp(0.55rem, 1.15vw, 0.85rem) / 1 var(--sans);
  color: #f5f5f4;
}

/* 飞过去的那张纸：与 App 图标前面那张纸同色 */
.sheet-fly {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(2rem, 5vw, 3.6rem);
  aspect-ratio: 0.78;
  border-radius: 12%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.8);
  opacity: 0;
  z-index: 2;
  translate: var(--sx, 0) var(--sy, 0);
  pointer-events: none;
}

.sheet-fly .lines {
  color: #fff;
}

.arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.arc path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  opacity: 0.45;
}

.arc-label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, var(--ly, -2rem));
  font-size: 0.8rem;
  color: var(--dim);
  white-space: nowrap;
}

.replay {
  margin-top: 1.75rem;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.replay:hover {
  color: var(--ink);
}

/* 编排：一次复制、一次粘贴，约 3.6 秒 */
.stage.play .mac kbd {
  animation: press 0.32s var(--ease) both;
}

.stage.play .mac kbd:nth-child(2) {
  animation-delay: 0.12s;
}

.stage.play .mac .file .name {
  animation: select 3.6s both;
}

.stage.play .sheet-fly {
  animation: fly 1.5s var(--ease) 0.55s both;
}

.stage.play .arc path {
  animation: arc 3.6s both;
}

.stage.play .arc-label {
  animation: label 3.6s both;
}

.stage.play .win kbd {
  animation: press 0.32s var(--ease) 2.1s both;
}

.stage.play .win kbd:nth-child(2) {
  animation-delay: 2.22s;
}

.stage.play .win .file {
  animation: land 0.6s var(--ease) 2.45s both;
}

@keyframes press {
  0% { transform: none; background: #3b3d43; }
  40% { transform: translateY(1px) scale(0.92); background: var(--blue); }
  100% { transform: none; background: #3b3d43; }
}

@keyframes select {
  0%, 8% { background: transparent; }
  14%, 70% { background: var(--blue); }
  100% { background: transparent; }
}

@keyframes fly {
  0% { opacity: 0; translate: var(--sx) var(--sy); scale: 0.55; rotate: 0deg; }
  12% { opacity: 1; }
  50% { translate: calc((var(--sx) + var(--tx)) / 2) calc(min(var(--sy), var(--ty)) - var(--lift)); scale: 1; rotate: 8deg; }
  88% { opacity: 1; }
  100% { opacity: 0; translate: var(--tx) var(--ty); scale: 0.6; rotate: 0deg; }
}

@keyframes arc {
  0%, 12% { opacity: 0; stroke-dashoffset: 40; }
  30%, 80% { opacity: 0.9; stroke-dashoffset: 0; }
  100% { opacity: 0.45; stroke-dashoffset: 0; }
}

@keyframes label {
  0%, 30% { opacity: 0; }
  45%, 100% { opacity: 1; }
}

@keyframes land {
  from { opacity: 0; transform: translate(-50%, -40%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* 窄屏：设备上的文件名太小读不清，只留图标与键帽 */
@media (max-width: 34rem) {
  .file .name {
    display: none;
  }

  .stage {
    grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr);
  }
}

/* ── 产品截图 ── */

.shot {
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  max-width: 66rem;
}

/* 截图自带窗口外框与阴影 */
.shot img {
  width: 100%;
}

/* ── 一次复制的经过：真的是先后三步，才用序号与连线 ── */

.flow {
  position: relative;
  display: grid;
  gap: 2rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 0;
  max-width: 62rem;
  list-style: none;
  counter-reset: step;
}

.flow li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
}

.flow li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue-hi);
  background: var(--ground);
  box-shadow: inset 0 0 0 1.5px var(--blue);
  z-index: 1;
}

/* 窄屏是竖线，宽屏是横线，把三个圆连起来 */
.flow::before {
  content: "";
  position: absolute;
  left: calc(1rem - 0.75px);
  top: 1rem;
  bottom: 2rem;
  width: 1.5px;
  background: linear-gradient(var(--blue), var(--rule-strong));
}

.flow p {
  margin: 0.4rem 0 0;
  color: var(--dim);
  font-size: 0.95rem;
  text-wrap: pretty;
}

@media (min-width: 56rem) {
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .flow li {
    padding: 3.25rem 0 0;
    text-align: center;
  }

  .flow li::before {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }

  .flow::before {
    left: 16.6%;
    right: 16.6%;
    top: 1rem;
    bottom: auto;
    width: auto;
    height: 1.5px;
    background: linear-gradient(90deg, var(--blue), var(--rule-strong));
  }
}

/* ── 表格 ── */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

th,
td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

thead th {
  color: var(--dim);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom-color: var(--rule-strong);
}

tbody th {
  font-weight: 500;
  color: var(--ink-2);
}

td {
  color: var(--ink-2);
}

/* 对比表：CopySync 这一列有一道浅蓝底 */
.compare {
  min-width: 40rem;
}

.compare th,
.compare td {
  text-align: center;
}

.compare tbody th {
  text-align: left;
}

.compare .ours {
  background: var(--blue-wash);
  color: var(--ink);
  font-weight: 600;
}

.compare thead .ours {
  color: var(--blue-hi);
  border-radius: 10px 10px 0 0;
}

.compare .no {
  color: var(--faint);
}

.compare .partial {
  color: var(--dim);
}

.compare .yes {
  color: var(--ink);
}

/* ── 工作原理的示意图 ── */

.diagram {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 60rem;
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.d-box {
  fill: var(--surface);
  stroke: var(--rule-strong);
  stroke-width: 1.5;
}

.d-title {
  fill: var(--ink);
  font: 600 22px var(--sans);
}

.d-sub,
.d-note,
.d-legend text {
  fill: var(--dim);
  font: 15px var(--sans);
}

.d-label {
  fill: var(--blue-hi);
  font: 600 16px var(--sans);
}

.d-direct {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
}

.d-relay {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.8;
  stroke-dasharray: 7 6;
}

.d-sig {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}

/* 手机上图里的字太小，换成文字说明 */
.diagram .diagram-text {
  display: none;
}

@media (max-width: 34rem) {
  .diagram svg {
    display: none;
  }

  .diagram .diagram-text {
    display: grid;
  }
}

/* ── 两栏 ── */

.cols {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 64rem;
}

.cols > * {
  min-width: 0;
}

@media (min-width: 52rem) {
  .cols {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
}

.points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.1rem;
}

.points li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--dim);
  font-size: 0.97rem;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.points strong {
  color: var(--ink);
  font-weight: 600;
}

.cols h3 {
  margin-bottom: 1rem;
}

.cols .small {
  margin: 1rem 0 0;
}

.figure-card {
  margin: 0;
}

.figure-card img {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

/* ── 出问题的时候 ── */

.fallbacks {
  display: grid;
  gap: 1.75rem 3rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 64rem;
}

.fallbacks > div {
  min-width: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.fallbacks dt {
  font-weight: 600;
}

.fallbacks dd {
  margin: 0.35rem 0 0;
  color: var(--dim);
  font-size: 0.95rem;
}

@media (min-width: 52rem) {
  .fallbacks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 安装：三栏之间用细线分开，窄屏叠起来 ── */

.install {
  display: grid;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 70rem;
}

.install > div {
  min-width: 0;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 60rem) {
  .install {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .install > div {
    padding: 0.25rem 2rem;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  .install > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .install > div:last-child {
    padding-right: 0;
  }
}

/* 首页安装区下面的连接方式：三个系统的卡片占一行，它单独一块 */
.install-more {
  max-width: 70rem;
  margin: 2.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.install-more h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
}

.install-more h3 svg {
  width: 22px;
  height: 22px;
  color: var(--dim);
}

.install-more .button {
  margin-top: 1.2rem;
}

.install h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 1.15rem;
}

.install h3 svg {
  width: 22px;
  height: 22px;
  color: var(--dim);
}

.install ol {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.install li + li {
  margin-top: 0.6rem;
}

.install li::marker {
  color: var(--faint);
}

.aside {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--dim);
}

.install .button {
  margin-top: 1.5rem;
}

/* 服务器一栏：三种部署方式并列，各一行说明 */
.install .opts,
.install-more .opts {
  display: grid;
  gap: 0.9rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.install .opts li,
.install-more .opts li {
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule-strong);
}

.install .opts a,
.install-more .opts a {
  display: block;
  font-weight: 600;
}

.install .opts span,
.install-more .opts span {
  display: block;
  color: var(--dim);
  font-size: 0.88rem;
}

.install table {
  margin-top: 0.75rem;
  font-size: 0.88rem;
}

.install th,
.install td {
  padding: 0.5rem 0.6rem 0.5rem 0;
}

.pairing {
  margin: 2.5rem auto 0;
  max-width: var(--text);
  text-align: center;
  color: var(--dim);
  font-size: 0.95rem;
}

.pairing strong {
  color: var(--ink);
}

.code {
  position: relative;
  margin-top: 0.4rem;
}

.code pre,
.article pre {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: #0d0d0f;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-2);
  font: 0.8rem/1.7 var(--mono);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.code pre code,
.article pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* 有「复制」按钮时，代码从按钮下面开始，不被挡住 */
.code pre {
  padding-top: 2.4rem;
}

.code .copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--dim);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.code .copy:hover {
  color: var(--ink);
}

/* ── 技术规格 ── */

.specs {
  max-width: 52rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
}

.specs th {
  width: 28%;
  color: var(--dim);
  font-weight: 500;
}

@media (max-width: 34rem) {
  .specs th,
  .specs td {
    display: block;
    width: auto;
    padding-inline: 0;
  }

  .specs th {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .specs td {
    padding-top: 0.3rem;
  }
}

/* ── 常见问题 ── */

.faq {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 48rem;
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  position: relative;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* 加号转成减号 */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--dim);
  transition: transform 0.2s var(--ease);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq .answer {
  padding: 0 2.5rem 1.25rem 0;
  color: var(--dim);
  font-size: 0.97rem;
}

.faq .answer p {
  margin: 0;
}

.faq .answer p + p {
  margin-top: 0.75rem;
}

/* ── 收尾与页脚 ── */

.closing {
  padding-block: var(--section);
  text-align: center;
}

.closing .display {
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
}

.closing .source {
  display: block;
  margin-top: 1.5rem;
  font-size: 0.95rem;
}

.footer {
  padding: 2.25rem 0 3rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--dim);
  text-align: center;
}

.footer p {
  margin: 0;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 0.85rem;
}

.footer a {
  color: var(--dim);
}

.footer a:hover {
  color: var(--ink);
}

.footer a[aria-current] {
  color: var(--ink);
}

/* ── 技术方案页面 ── */

.article {
  width: min(100%, 50rem);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 5rem) var(--gutter) var(--section);
}

.article .crumb {
  margin: 0 0 2rem;
  font-size: 0.9rem;
  color: var(--dim);
}

.article h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.article h2 {
  margin: 3.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 1.6rem;
  line-height: 1.3;
}

.article h3 {
  margin: 2.25rem 0 0;
  font-size: 1.2rem;
}

.article h4 {
  margin: 1.75rem 0 0;
  font-size: 1rem;
}

.article p,
.article ul,
.article ol,
.article pre,
.article .table-scroll,
.article blockquote {
  margin: 1rem 0 0;
}

.article p,
.article li {
  color: var(--ink-2);
}

.article li + li {
  margin-top: 0.35rem;
}

.article li > ul,
.article li > ol {
  margin-top: 0.35rem;
}

.article strong {
  color: var(--ink);
}

.article blockquote {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}

.article blockquote p {
  margin: 0;
  color: var(--dim);
  font-size: 0.93rem;
}

.article blockquote p + p {
  margin-top: 0.3rem;
}

.article table {
  font-size: 0.88rem;
}

.article hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.article .toc {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.93rem;
}

.article .toc ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.article .toc li + li {
  margin-top: 0.2rem;
}

/* ── 在局域网里部署服务器（server/ 页面） ── */

.bar nav a[aria-current] {
  color: var(--ink);
}

.guide-hero .crumb {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--dim);
}

.guide-hero .display {
  font-size: clamp(2.3rem, 6.5vw, 4.6rem);
}

/* 教程顶部的提示：这篇已经不是首选做法时，指向更合适的那篇 */
.guide-hero .notice {
  max-width: 40rem;
  margin: 1.75rem auto 0;
  padding: 0.9rem 1.2rem;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-2);
  font-size: 0.95rem;
  text-align: left;
}

/* 页内目录：几个带序号的胶囊 */
.guide-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.25rem auto 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.guide-toc li {
  counter-increment: toc;
}

.guide-toc a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  color: var(--ink-2);
  font-size: 0.9rem;
}

.guide-toc a::before {
  content: counter(toc);
  color: var(--faint);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.guide-toc a:hover {
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ink-2);
}

/* 示意图里的局域网边界与服务器地址 */
.d-lan {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}

.d-lan-label {
  fill: var(--faint);
  font: 14px var(--sans);
}

.d-ip {
  fill: var(--blue-hi);
  font: 600 17px var(--mono);
}

.ports {
  margin: 2.5rem auto 0;
  max-width: 48rem;
}

/* 按系统分页：有脚本时是一个分段控件，没有脚本时三个系统依次排开 */
.os-tabs {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 70rem;
}

.tablist {
  display: flex;
  width: fit-content;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.tablist[hidden] {
  display: none;
}

.tablist button {
  padding: 0.45rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.tablist button:hover {
  color: var(--ink);
}

.tablist button[aria-selected="true"] {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.os + .os {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
}

.tabs-on .os + .os {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.os-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  font-size: 1.35rem;
}

.os-title svg {
  width: 24px;
  height: 24px;
  color: var(--dim);
}

/* 分页时标题由分段控件代替，只留给读屏 */
.tabs-on .os-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.os-grid {
  display: grid;
  gap: 2.5rem;
}

.os-grid > * {
  min-width: 0;
}

@media (min-width: 62rem) {
  .os-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 3.5rem;
    align-items: start;
  }
}

/* 带圆圈序号的步骤 */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  position: relative;
  padding-left: 2.6rem;
  color: var(--ink-2);
  counter-increment: step;
}

.steps > li + li {
  margin-top: 1.4rem;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.steps .code {
  margin-top: 0.75rem;
}

.os-steps > .button {
  margin: 1.75rem 0 0 2.6rem;
}

.os-steps > .points {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.os-figures {
  display: grid;
  gap: 1.25rem;
}

/* 终端、文件夹、浏览器的示意窗口：照真实窗口画，但只保留轮廓 */
.term,
.explorer,
.browser {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0c0e;
  box-shadow: 0 0 0 1px var(--rule-strong), 0 24px 60px rgba(0, 0, 0, 0.45);
}

.t-bar,
.b-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.3rem;
  padding: 0 0.85rem;
  background: #232327;
  border-bottom: 1px solid #2e2e33;
  color: var(--dim);
  font-size: 0.78rem;
  white-space: nowrap;
}

.t-bar.mac .t-title {
  position: absolute;
  inset: 0 4.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-lights {
  display: flex;
  gap: 8px;
}

.t-lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
}

.t-lights i:nth-child(2) {
  background: #febc2e;
}

.t-lights i:nth-child(3) {
  background: #28c840;
}

.t-bar.win {
  justify-content: space-between;
  padding-right: 0;
  background: #202020;
}

.t-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
}

.t-tab svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--dim);
}

/* 文件夹窗口标题前的文件夹图标 */
.t-tab.folder::before {
  content: "";
  flex: none;
  width: 14px;
  height: 11px;
  border: 1.5px solid var(--dim);
  border-radius: 2px;
  border-top-width: 3px;
}

/* Windows 窗口右上角的最小化、最大化、关闭 */
.t-ctl {
  display: flex;
  align-self: stretch;
}

.t-ctl i {
  position: relative;
  width: 2.75rem;
}

.t-ctl i::before,
.t-ctl i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.t-ctl i:nth-child(1)::before {
  width: 10px;
  height: 1px;
  background: var(--dim);
}

.t-ctl i:nth-child(2)::before {
  width: 9px;
  height: 9px;
  border: 1px solid var(--dim);
}

.t-ctl i:nth-child(3)::before,
.t-ctl i:nth-child(3)::after {
  width: 12px;
  height: 1px;
  background: var(--dim);
  rotate: 45deg;
}

.t-ctl i:nth-child(3)::after {
  rotate: -45deg;
}

.t-body {
  margin: 0;
  padding: 1rem 1.15rem 1.25rem;
  color: var(--ink-2);
  font: 0.74rem/1.7 var(--mono);
  /* 和真的终端一样，太长的行折到下一行 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.t-prompt,
.t-step {
  color: var(--dim);
}

.t-url {
  color: var(--blue-hi);
  font-weight: 600;
}

.explorer {
  background: #191919;
}

.files {
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  font-size: 0.85rem;
}

.files li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  color: var(--ink-2);
}

.files li.hl {
  background: var(--blue-wash);
  box-shadow: inset 0 0 0 1px rgba(61, 139, 234, 0.5);
  color: var(--ink);
}

.files em {
  margin-left: auto;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--blue-hi);
}

/* 文件图标：程序是方框里一个窗口，脚本是带提示符的纸，其他是纸 */
.f-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 17px;
  border: 1.5px solid var(--dim);
  border-radius: 2px;
}

.f-icon.exe {
  width: 17px;
  height: 14px;
  border-top-width: 3.5px;
}

.f-icon.cmd::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 4px;
  height: 4px;
  border: solid var(--dim);
  border-width: 1.5px 1.5px 0 0;
  rotate: 45deg;
}

.browser {
  max-width: 36rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
}

.b-bar {
  gap: 1rem;
  height: 2.6rem;
}

.b-url {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0.8rem;
  border-radius: 7px;
  background: #141416;
  color: var(--ink-2);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b-body {
  margin: 0;
  padding: 1.25rem 1.3rem 1.5rem;
  color: var(--ink-2);
  font: 0.85rem/1.6 var(--mono);
  overflow-x: auto;
}

/* 以后会用到的命令 */
.manage {
  margin-top: 3rem;
  font-size: 0.9rem;
}

.manage caption {
  padding-bottom: 0.5rem;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}

.manage th {
  width: 7.5rem;
  color: var(--dim);
  font-weight: 500;
}

@media (max-width: 34rem) {
  .manage th,
  .manage td {
    display: block;
    width: auto;
    padding-inline: 0;
  }

  .manage th {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .manage td {
    padding-top: 0.25rem;
  }

  .os-steps > .button {
    margin-left: 0;
  }
}

/* ── 三种部署方式：首页的卡片、快速开始里的分页 ── */

.paths {
  display: grid;
  gap: 1rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 70rem;
}

@media (min-width: 60rem) {
  .paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.path {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
  transition: box-shadow 0.15s, background-color 0.15s;
}

.path:hover {
  text-decoration: none;
  background: #202024;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.path svg {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  margin: 0 auto 1.4rem;
  overflow: visible;
}

.path-when {
  color: var(--dim);
  font-size: 0.85rem;
}

.path h3 {
  margin-top: 0.15rem;
  font-size: 1.2rem;
}

.path p {
  flex: 1;
  margin: 0.55rem 0 0;
  color: var(--dim);
  font-size: 0.93rem;
  text-wrap: pretty;
}

.path-go {
  margin-top: 1.1rem;
  color: var(--blue-hi);
  font-size: 0.92rem;
  font-weight: 600;
}

/* 卡片插图：设备轮廓、网络边界、信令的点线、内容走的蓝线 */
.p-dev {
  fill: var(--surface-2);
  stroke: var(--dim);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.p-net {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

/* Tailscale 的虚拟局域网：和网络边界同色，用点线区分 */
.p-ts {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.5;
  stroke-dasharray: 1.5 4;
  stroke-linecap: round;
}

.p-sig {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
  stroke-dasharray: 1.5 4;
  stroke-linecap: round;
}

.p-data {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ── 教程页面 ── */

/* 步骤的序号，放在标题上面 */
.eyebrow {
  margin: 0 0 0.9rem;
  text-align: center;
  color: var(--blue-hi);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.qs-grid {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 70rem;
}

.qs-grid > .shot,
.os-figures .shot {
  margin: 0;
}

/* 宽屏上截图跟着步骤走，读到下面也看得见 */
@media (min-width: 62rem) {
  .qs-grid > .shot {
    position: sticky;
    top: 4.5rem;
    margin-top: -1.5rem;
  }
}

.qs-app h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-size: 1.15rem;
}

.qs-app h3 svg {
  width: 22px;
  height: 22px;
  color: var(--dim);
}

.qs-app + .qs-app {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.qs-app .button,
.qs-grid .os-steps > .button {
  margin: 1.4rem 0 0 2.6rem;
}

.qs-verify {
  margin-top: 2rem;
}

.qs-verify img {
  max-width: 26rem;
  margin: 0;
}

/* Tailscale 示意图里的虚拟局域网边界 */
.d-ts {
  fill: rgba(61, 139, 234, 0.05);
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-dasharray: 8 7;
  opacity: 0.8;
}

.d-ts-label {
  fill: var(--blue-hi);
  font: 14px var(--sans);
}

/* 表格类网页的示意：Tailscale 的设备列表、云服务器的安全组规则 */
.browser.listing {
  max-width: none;
  margin: 0;
}

.listing table {
  font-size: 0.85rem;
}

.listing th,
.listing td {
  padding: 0.7rem 1rem;
  border-bottom-color: #222226;
}

.listing tbody tr:last-child td {
  border-bottom: 0;
}

.listing td:nth-child(2) {
  font-family: var(--mono);
  font-size: 0.8rem;
}

.listing tr.hl td {
  background: var(--blue-wash);
  color: var(--ink);
}

.listing tr.hl td:nth-child(2) {
  color: var(--blue-hi);
  font-weight: 600;
}

.listing em {
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(61, 139, 234, 0.55);
  color: var(--blue-hi);
  font-style: normal;
  font-size: 0.72rem;
}

/* 快速开始第 2 步：左边步骤，右边一张卡片写适合谁、要准备什么、要注意什么 */
.plan-grid {
  display: grid;
  gap: 2rem;
}

.plan-grid > * {
  min-width: 0;
}

@media (min-width: 62rem) {
  .plan-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}

.plan-address {
  margin: 1.6rem 0 0 2.6rem;
  color: var(--dim);
  font-size: 0.95rem;
}

.plan-grid .button {
  margin: 1.25rem 0 0 2.6rem;
}

.plan-card {
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.plan-card svg {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: auto;
  margin: 0 auto 1.25rem;
  overflow: visible;
}

.plan-card dl {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.plan-card dt {
  color: var(--dim);
  font-size: 0.82rem;
  font-weight: 600;
}

.plan-card dd {
  margin: 0.15rem 0 0;
  color: var(--ink-2);
  font-size: 0.93rem;
}

.server-notes {
  max-width: 70rem;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.server-notes h3 {
  margin-bottom: 1.1rem;
}

@media (min-width: 62rem) {
  .server-notes .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.address-term {
  max-width: 30rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
}

/* Linux 上已经装过的，改配置里的地址 */
.switch {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: 0.95rem;
}

.switch p {
  margin: 0 0 0.5rem;
}

.switch strong {
  color: var(--ink);
}

@media (max-width: 34rem) {
  .qs-app .button,
  .qs-grid .os-steps > .button,
  .plan-address,
  .plan-grid .button {
    margin-left: 0;
  }
}

/* 手机上分段控件放不下三个长名字，收紧一点 */
@media (max-width: 30rem) {
  .tablist button {
    padding-inline: 0.75rem;
    font-size: 0.86rem;
  }
}

/* ── 404 ── */

.lost {
  padding-block: var(--section);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .stage.play .win .file {
    opacity: 1;
  }
}

/* 下载页：同一行里的几个下载按钮，比如 Apple 芯片与 Intel、x64 与 ARM64 */
.dl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}

.os h4 {
  margin: 1.6rem 0 0.8rem;
  font-size: 1rem;
  font-weight: 650;
}

.os .os-steps > h4:first-child,
.os-grid > div > h4:first-child {
  margin-top: 0;
}

.os .os-steps > .small {
  margin: 0 0 1.4rem;
  color: var(--dim);
}

.os .os-steps .code {
  margin-bottom: 0.4rem;
}

/* 下载页的系统选择紧跟在标题下面，是首屏的一部分，不需要再隔一整节的距离 */
.guide-hero + #get {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}