/* ==========================================================================
   DRheEheAMServer — 亮色 / 高饱和点缀 / 无衬线
   版式：窗口式容器 + 顶栏居中导航 + 右侧 GitHub + 大标题首屏
   字体：正文全无衬线；仅主页大标题用手写体（呼应设计稿）
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root {
    /* 底色与文字 */
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-soft: #fbfcfe;
    --ink: #14161a;
    --ink-2: #454b57;
    --ink-3: #78808f;
    --line: #e7eaf2;

    /* 高饱和点缀色（每色配一个浅底） */
    --c1: #ff5a3c;
    --c1-soft: #ffeae5;
    --c2: #2f6bff;
    --c2-soft: #e9efff;
    --c3: #00c48c;
    --c3-soft: #e0fbf2;
    --c4: #8b5cf6;
    --c4-soft: #f1ebff;
    --c5: #ff9f1c;
    --c5-soft: #fff4e2;
    --c6: #ff3d8b;
    --c6-soft: #ffe9f2;
    /* 单独命名的高饱和纯黄，给 hero 油漆刷横线用（amber，金黄微橙） */
    --c-yellow: #ffc107;

    /* 尺寸 */
    --gutter: 0px;
    --pad-x: clamp(24px, 3.4vw, 64px);
    --bar-h: clamp(62px, 6vw, 76px);
    --radius: 0px;
    --radius-sm: 14px;

    /* 字体 */
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system,
                 "Segoe UI", Roboto, sans-serif;
    /* 动效节奏：统一缓动 / 时长，避免各处各写一套 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.22s;
    --dur-mid: 0.34s;

    --font-hand: "Chalkboard SE", "Bradley Hand", "Segoe Print", "Comic Sans MS",
                 "Hanzipen SC", "Kaiti SC", cursive;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bar-h) + 22px);
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16.5px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 背景上的柔光色块：让亮色主题不至于发灰 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(52vw 46vw at 8% -8%, rgba(255, 90, 60, 0.12), transparent 62%),
        radial-gradient(46vw 42vw at 96% 2%, rgba(139, 92, 246, 0.13), transparent 60%),
        radial-gradient(58vw 48vw at 50% 108%, rgba(0, 196, 140, 0.11), transparent 62%);
}

h1, h2, h3, h4 {
    color: var(--ink);
    letter-spacing: -0.01em;
}

a {
    color: var(--c2);
    text-decoration: none;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 3px solid var(--c2);
    outline-offset: 2px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 30;
    padding: 10px 18px;
    background: var(--ink);
    color: #fff;
    border-radius: 0 0 12px 0;
    font-size: 14px;
}

.skip-link:focus {
    left: 0;
}

/* ---------- 页面容器：铺满整个视口 ---------- */
.frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    background: var(--surface);
}

/* ---------- 顶栏 ---------- */
.frame__bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    column-gap: 14px;
    padding: 0 var(--pad-x);
    min-height: var(--bar-h);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}

/* 站点头像 + 站名：包成一个链接，连回首页 */
.bar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

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

/* 头像：圆形 */
.bar__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1.5px var(--line), 0 1px 3px rgba(20, 22, 26, 0.06);
}

/* 站名：与 hero__title 同款 — 手写体 + 渐变（静态，切页不跳变） */
.bar__brand-name {
    font-family: var(--font-hand);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 400;
    /* 固定 box 高度 = 头像高度（36px），字符用 inline-flex 视觉居中于 box 中部 */
    line-height: 1;
    height: 36px;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.005em;
    /* 与 hero 同款渐变定义；不做流动动画，避免每次页面加载相位重置导致的跳变 */
    background: linear-gradient(96deg, var(--c1) 0%, var(--c6) 38%, var(--c4) 72%, var(--c2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: opacity var(--dur-fast) var(--ease-soft);
}

@supports not (background-clip: text) {
    .bar__brand-name {
        color: var(--ink);
        -webkit-text-fill-color: var(--ink);
        background: none;
    }
}

.bar__brand:hover .bar__brand-name {
    opacity: 0.85;
}

/* 短竖线：avatar / 站名 / nav 三者之间的分隔 */
.bar__divider {
    width: 1px;
    height: 22px;
    margin-left: 10px;
    background: var(--line);
    border-radius: 1px;
}

/* 居左导航：紧贴竖线右侧排开 */
.nav {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: clamp(6px, 1.6vw, 14px);
}

.nav__link {
    position: relative;
    display: inline-block;        /* 让 min-width 生效 */
    /* 文字左对齐，胶囊里的内容靠左 */
    padding: 7px 14px;
    font-size: clamp(14.5px, 1.5vw, 16px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink-2);
    border-radius: 999px;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}

.nav__link:hover {
    color: var(--ink);
    text-decoration: none;
}

.nav__link.is-active {
    color: var(--ink);
    font-weight: 600;
}

/* 文档页：导航上的「· 当前章节」 */
.nav__crumb {
    color: var(--ink-3);
    font-weight: 500;
}

.nav__link.is-active .nav__crumb {
    color: var(--ink-2);
}

/* 文字包一层：让激活态的下划线等于文字宽度 */
.nav__label {
    position: relative;
    display: inline-block;
}

.nav__link.is-active .nav__label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--c1);
}

/* 「文档」的二级菜单：悬停或键盘聚焦时展开 */
.nav__item {
    position: relative;
    display: inline-flex;
}

.nav__chevron {
    margin-left: 5px;
    opacity: 0.55;
    transition: transform 0.3s var(--ease-out);
}

.nav__item:hover .nav__chevron,
.nav__item:focus-within .nav__chevron {
    transform: rotate(180deg);
}

.nav__menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    min-width: 190px;
    margin-top: 10px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 20px 44px -24px rgba(20, 22, 26, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition:
        opacity 0.24s var(--ease-out),
        transform 0.24s var(--ease-out),
        visibility 0s linear 0.24s;
}

/* 悬停时这段透明区域负责“接住”鼠标，否则从按钮移到菜单会闪 */
.nav__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition:
        opacity 0.24s var(--ease-out),
        transform 0.24s var(--ease-out),
        visibility 0s;
}

.nav__menu-link {
    display: block;
    padding: 7px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
    border-radius: 9px;
    white-space: nowrap;
}

.nav__menu-link:hover {
    color: var(--c2);
    background: var(--c2-soft);
    text-decoration: none;
}

/* 右上角操作区：客户端下载 + GitHub */
.bar__actions {
    grid-column: 4;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* 客户端下载：浅色胶囊，和黑色 GitHub 主次分明 */
.dl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    font-size: clamp(13.5px, 1.4vw, 15px);
    font-weight: 600;
    line-height: 1;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}

.dl:hover {
    color: var(--c2);
    border-color: var(--c2);
    background: var(--c2-soft);
    text-decoration: none;
}

.dl__icon {
    flex: none;
}

/* 右侧 GitHub */
.gh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: clamp(13.5px, 1.4vw, 15px);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--ink);
    border-radius: 999px;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background var(--dur-fast) var(--ease-soft);
}

.gh:hover {
    color: #fff;
    text-decoration: none;
    background: #000;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(20, 22, 26, 0.55);
}

.gh__icon {
    flex: none;
}

/* ---------- 内容区 ---------- */
.frame__body {
    flex: 1;
    padding-bottom: clamp(28px, 4vw, 56px);
}

/* ---------- 首屏 ---------- */
.hero {
    padding: clamp(40px, 7vw, 96px) var(--pad-x) clamp(24px, 4vw, 44px);
}

.hero__title {
    margin: 0 0 clamp(18px, 3vw, 34px);
    /* inline-block 让 .hero__title::after { width:100% } 等于 hero 文字宽度 */
    display: inline-block;
    font-family: var(--font-hand);
    font-weight: 400;
    font-size: clamp(30px, 8.2vw, 88px);
    line-height: 1.04;
    letter-spacing: 0.005em;
    word-break: break-word;
    overflow-wrap: break-word;

    /* 手写体 + 高饱和渐变，是整页唯一的“手绘”元素 */
    background: linear-gradient(96deg, var(--c1) 0%, var(--c6) 38%, var(--c4) 72%, var(--c2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* hero 标题下面：手绘油漆刷横线（暖黄，与文字等宽） */
.hero__title::after {
    content: "";
    display: block;
    width: 100%;
    height: clamp(12px, 1.8vw, 18px);
    margin-top: clamp(8px, 1.4vw, 14px);
    background-color: var(--c-yellow);
    /* SVG path 当 mask：上下边缘 7 处起伏 + 端点参差，营造刷子痕迹 */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 22' preserveAspectRatio='none'><path d='M 8 7 Q 22 3 38 6 Q 60 9 80 5 Q 105 2 125 7 Q 145 11 168 6 Q 190 2 212 8 Q 235 12 258 7 Q 280 3 314 9 L 312 16 Q 290 22 262 18 Q 235 15 210 20 Q 185 24 160 19 Q 135 15 110 21 Q 85 25 60 20 Q 35 16 12 19 Q 5 18 6 15 Z' fill='black'/></svg>") no-repeat center / 100% 100%;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 22' preserveAspectRatio='none'><path d='M 8 7 Q 22 3 38 6 Q 60 9 80 5 Q 105 2 125 7 Q 145 11 168 6 Q 190 2 212 8 Q 235 12 258 7 Q 280 3 314 9 L 312 16 Q 290 22 262 18 Q 235 15 210 20 Q 185 24 160 19 Q 135 15 110 21 Q 85 25 60 20 Q 35 16 12 19 Q 5 18 6 15 Z' fill='black'/></svg>") no-repeat center / 100% 100%;
}

@supports not (background-clip: text) {
    .hero__title {
        color: var(--ink);
        -webkit-text-fill-color: var(--ink);
        background: none;
    }
}

.hero__tagline {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.hero__intro {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 16.5px);
    line-height: 1.9;
    color: var(--ink-3);
}

.hero__note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: clamp(20px, 2.6vw, 30px) 0 0;
    padding: 6px 14px 7px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.hero__note::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c3);
    box-shadow: 0 0 0 4px var(--c3-soft);
    flex: none;
}

/* ---------- 子页面页头（不用手写体） ---------- */
.page-head {
    padding: clamp(36px, 5.5vw, 72px) var(--pad-x) clamp(12px, 2vw, 22px);
}

.page-head__eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c1);
}

.page-head__title {
    margin: 0 0 10px;
    font-size: clamp(30px, 4.2vw, 44px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.page-head__intro {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(15px, 1.4vw, 16.5px);
    line-height: 1.9;
    color: var(--ink-3);
}

/* ---------- 分区 ---------- */
.section {
    padding: clamp(26px, 4vw, 48px) var(--pad-x);
}

.section__title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 clamp(18px, 2.6vw, 28px);
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.2vw, 25px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.section__title::before {
    content: "";
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--c1), var(--c6));
    flex: none;
}

.section__title::after {
    content: "";
    flex: 1;
    height: 1px;
    min-width: 24px;
    background: var(--line);
}

/* ---------- 地址条（无卡片，纯排版） ---------- */
.address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.address__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

.address__value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(16px, 1.7vw, 19px);
    font-weight: 600;
    color: var(--c2);
    letter-spacing: 0.01em;
}

.copy {
    padding: 7px 16px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}

.copy:hover {
    color: var(--c2);
    border-color: var(--c2);
    background: var(--c2-soft);
}

.copy[data-copied="1"] {
    color: #fff;
    background: var(--c3);
    border-color: var(--c3);
}

/* ---------- 卡片网格 ---------- */
.grid {
    display: grid;
    gap: clamp(12px, 1.6vw, 18px);
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
    padding: clamp(18px, 2vw, 24px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(20, 22, 26, 0.03);
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-soft);
}

.card:hover {
    transform: translateY(-3px);
    border-color: #d9deea;
    box-shadow: 0 14px 28px -18px rgba(20, 22, 26, 0.28);
}

/* 每张卡片换一种点缀色（标题前的小色块） */
.card:nth-child(6n + 1) { --c: var(--c1); --cs: var(--c1-soft); }
.card:nth-child(6n + 2) { --c: var(--c2); --cs: var(--c2-soft); }
.card:nth-child(6n + 3) { --c: var(--c3); --cs: var(--c3-soft); }
.card:nth-child(6n + 4) { --c: var(--c4); --cs: var(--c4-soft); }
.card:nth-child(6n + 5) { --c: var(--c5); --cs: var(--c5-soft); }
.card:nth-child(6n + 6) { --c: var(--c6); --cs: var(--c6-soft); }

.card__title {
    position: relative;
    margin: 0 0 8px;
    padding-left: 18px;
    font-family: var(--font-sans);
    font-size: clamp(16.5px, 1.7vw, 18px);
    font-weight: 650;
    line-height: 1.45;
    color: var(--ink);
}

.card__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--c, var(--c2));
}

.card__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-3);
}

/* ---------- 子服卡片 ---------- */
.server {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 18px;
    align-items: start;
    padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.2vw, 26px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--c, var(--c2));
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(20, 22, 26, 0.03);
}

.server + .server {
    margin-top: 12px;
}

.server:nth-child(4n + 1) { --c: var(--c2); --cs: var(--c2-soft); }
.server:nth-child(4n + 2) { --c: var(--c3); --cs: var(--c3-soft); }
.server:nth-child(4n + 3) { --c: var(--c4); --cs: var(--c4-soft); }
.server:nth-child(4n + 4) { --c: var(--c5); --cs: var(--c5-soft); }

.server__name {
    margin: 0;
    font-size: clamp(17.5px, 1.9vw, 20px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

.server__id {
    margin: 5px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--ink-3);
    word-break: break-all;
}

.server__desc {
    grid-column: 1 / -1;
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-3);
}

.server__meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.server__meta li {
    padding: 2px 11px 3px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ink-2);
    background: #f4f6fa;
    border-radius: 999px;
}

.tag {
    justify-self: end;
    align-self: start;
    padding: 3px 12px 4px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--c, var(--c2));
    background: var(--cs, var(--c2-soft));
    border-radius: 999px;
}

/* ---------- 规则列表 ---------- */
.rules {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.rules li {
    position: relative;
    padding-left: 28px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-2);
}

.rules li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.62em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--c1), var(--c4));
}

/* ---------- 文档页 ---------- */
.docs {
    display: grid;
    grid-template-columns: minmax(180px, 232px) minmax(0, 1fr);
    gap: clamp(22px, 3.6vw, 48px);
    padding: clamp(30px, 4.6vw, 56px) var(--pad-x) 0;
    align-items: start;
}

.docs__toc {
    position: sticky;
    top: calc(var(--bar-h) + 20px);
    max-height: calc(100vh - var(--bar-h) - 44px);
    overflow-y: auto;
}

.docs__toc-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

/* 本页目录：纯列表，没有卡片底板 */
.toc {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.7;
}

.toc li + li {
    margin-top: 2px;
}

.toc a {
    display: block;
    padding: 3px 0 3px 12px;
    color: var(--ink-3);
    border-left: 2px solid var(--line);
    transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}

.toc a:hover {
    color: var(--c2);
    border-left-color: var(--c2);
    text-decoration: none;
}

/* 服务器介绍页：正文自带 h1，不用 page-head */
.section--prose {
    padding-top: clamp(30px, 4vw, 52px);
}

.prose h1 {
    margin: 0 0 18px;
    font-size: clamp(30px, 4.2vw, 44px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

/* 正文（文档页 + 服务器介绍页共用排版） */
.doc,
.prose {
    max-width: 92ch;
}

.doc + .doc {
    margin-top: clamp(28px, 3.6vw, 44px);
    padding-top: clamp(22px, 3vw, 32px);
    border-top: 1px solid var(--line);
}

.doc__title {
    margin: 0 0 14px;
    font-size: clamp(21px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* Markdown 里的多级标题 */
.doc h2,
.prose h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 30px 0 12px;
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.doc h2::before,
.prose h2::before {
    content: "";
    flex: none;
    width: 5px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--c1), var(--c6));
}

.doc h3,
.prose h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0 8px;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.5;
}

.doc h3::before,
.prose h3::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--c2), var(--c4));
}

.doc h4,
.prose h4 {
    margin: 18px 0 6px;
    font-size: 16.5px;
    font-weight: 650;
    color: var(--ink-2);
}

.doc p,
.doc li,
.prose p,
.prose li {
    font-size: 16.5px;
    line-height: 1.9;
    color: var(--ink-3);
}

.doc ul,
.doc ol,
.prose ul,
.prose ol {
    padding-left: 22px;
}

.doc strong,
.prose strong {
    color: var(--ink);
}

.doc a,
.prose a {
    color: var(--c2);
}

.doc code,
.prose code {
    padding: 1px 7px 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    color: var(--c2);
    background: var(--c2-soft);
    border-radius: 5px;
}

.doc pre,
.prose pre {
    margin: 14px 0;
    padding: 14px 16px;
    background: #f6f7fb;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow-x: auto;
}

.doc pre code,
.prose pre code {
    padding: 0;
    background: none;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.7;
}

.doc blockquote,
.prose blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--c5-soft);
    border-left: 4px solid var(--c5);
    border-radius: 0 10px 10px 0;
}

.doc blockquote p,
.prose blockquote p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--ink-2);
}

/* Markdown 表格 */
.doc table,
.prose table {
    width: 100%;
    margin: 14px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 15.5px;
}

.doc th,
.doc td,
.prose th,
.prose td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.doc th,
.prose th {
    background: var(--surface-soft);
    color: var(--ink-2);
    font-weight: 600;
    white-space: nowrap;
}

.doc td,
.prose td {
    color: var(--ink-3);
}

.doc tr:last-child td,
.prose tr:last-child td {
    border-bottom: 0;
}

/* 文档翻页 */
.pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    max-width: 92ch;
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.pager__link--prev {
    justify-self: start;
}

.pager__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: border-color var(--dur-mid) var(--ease-soft), transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}

.pager__link:hover {
    text-decoration: none;
    border-color: var(--c2);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -20px rgba(20, 22, 26, 0.5);
}

.pager__link--next {
    justify-self: end;
    text-align: right;
}

.pager__hint {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-3);
}

.pager__title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.pager__count {
    align-self: center;
    flex: none;
    font-size: 13px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.pager__placeholder {
    display: block;
}

/* ---------- 页脚 ---------- */
.frame__foot {
    padding: 16px var(--pad-x) 20px;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
}

.frame__foot p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-3);
    text-align: center;
}

.frame__foot a {
    color: var(--ink-2);
    text-decoration: underline;
    text-decoration-color: var(--line);
}

.frame__foot a:hover {
    color: var(--c2);
}

/* ==========================================================================
   动画
   原则：只动 transform / opacity / background-position，不触发重排；
   所有动画都能被 prefers-reduced-motion 关掉。
   ========================================================================== */

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes floatBlobs {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-1.5%, 1.2%, 0) scale(1.05);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }
    60% {
        opacity: 1;
        transform: scale(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes underlineSlide {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* 背景色块缓慢漂移 */
body::before {
    animation: floatBlobs 26s ease-in-out infinite alternate;
}

/* 顶栏不加动画：内容从首屏开始入场 */

/* 首屏文字依次上浮（渐变保持静态，切页不跳变） */
.hero__title {
    animation: riseIn 1.6s var(--ease-out) 0.05s both;
}

.hero__tagline {
    animation: riseIn 1.6s var(--ease-out) 0.13s both;
}

.hero__intro {
    animation: riseIn 1.6s var(--ease-out) 0.21s both;
}

.hero__note {
    animation: riseIn 1.6s var(--ease-out) 0.29s both;
}

/* 滚动入场：脚本加 .reveal，进入视口后加 .is-in */
html.js .page-head,
html.js .section__title,
html.js .address,
html.js .frame__foot,
html.js .docs__toc,
html.js .card,
html.js .doc,
html.js .server,
html.js .pager,
html.js .section--prose > * {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 1.4s var(--ease-out),
        transform 1.4s var(--ease-out);
}

html.js .page-head.is-in,
html.js .section__title.is-in,
html.js .address.is-in,
html.js .frame__foot.is-in,
html.js .docs__toc.is-in,
html.js .card.is-in,
html.js .doc.is-in,
html.js .server.is-in,
html.js .pager.is-in,
html.js .section--prose > *.is-in {
    opacity: 1;
    transform: none;
}

/* 分区标题左侧的竖条：入场时从上往下长出来 */
.section__title::before {
    transform-origin: top center;
}

html.js .section__title::before {
    transform: scaleY(0);
    transition: transform 0.9s var(--ease-out) 0.15s;
}

html.js .section__title.is-in::before {
    transform: scaleY(1);
}

/* 导航项：悬停轻微上浮 + 下划线呼吸 */
.nav__link {
    transition: color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), transform 0.3s var(--ease-out);
}

.nav__link:hover {
    transform: translateY(-1px);
}

.nav__link.is-active .nav__label::after {
    /* 从左往右展开：scaleX 从 0 到 1，锚点在左侧 */
    animation: underlineSlide 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: left center;
}

/* GitHub 按钮：图标轻微转一下 */
.gh__icon {
    transition: transform 0.3s var(--ease-out);
}

.gh:hover .gh__icon {
    transform: rotate(-12deg) scale(1.06);
}

/* 卡片：抬起 + 标题前小色块放大旋转 */
.card__title::before {
    transition: transform 0.2s ease;
}

.card:hover .card__title::before {
    transform: scale(1.45) rotate(12deg);
}

/* 子服卡片：抬起 + 投影 */
.server {
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}

.server:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -24px rgba(20, 22, 26, 0.45);
}

/* 复制成功的小弹跳 */
.copy[data-copied="1"] {
    animation: popIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .docs {
        grid-template-columns: 1fr;
    }

    .docs__toc {
        position: static;
    }
}

@media (max-width: 820px) {
    /* 窄屏顶栏变成两行，锚点跳转要再让开一点 */
    html {
        scroll-padding-top: 132px;
    }

    .frame__bar {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        padding: 14px 18px;
    }

    .nav,
    .bar__actions {
        grid-column: auto;
    }

    /* 窄屏下竖线没什么意义：堆叠时一根孤立细线 */
    .bar__divider {
        display: none;
    }

    .pager {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .pager__link--prev,
    .pager__link--next {
        justify-self: stretch;
        text-align: left;
    }

    .pager__placeholder {
        display: none;
    }

    .pager__count {
        order: -1;
        justify-self: center;
        padding-bottom: 4px;
    }

    /* 触屏没有 hover：二级菜单收起，靠文档页左侧目录导航 */
    .nav__menu {
        display: none;
    }

    .nav__chevron {
        display: none;
    }

    .bar__actions {
        justify-self: center;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 16px;
    }

    .hero {
        padding-top: clamp(26px, 8vw, 40px);
    }

    .grid--3,
    .grid--2 {
        grid-template-columns: 1fr;
    }

    .server {
        grid-template-columns: 1fr;
    }

    .tag {
        justify-self: start;
    }

    .address {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 窄屏下 Markdown 表格改为横向滚动，别把列挤变形 */
    .doc table,
    .prose table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---------- 减弱动效 / 打印 ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    html.js .page-head,
    html.js .section__title,
    html.js .address,
    html.js .frame__foot,
    html.js .docs__toc,
    html.js .card,
    html.js .doc,
    html.js .server,
    html.js .pager,
    html.js .section--prose > * {
        opacity: 1;
        transform: none;
    }

    html.js .section__title::before {
        transform: scaleY(1);
    }
}

/* ---------- 打印 ---------- */
@media print {
    body {
        padding: 0;
        background: #fff;
    }

    body::before {
        display: none;
    }

    .frame {
        border: 0;
        box-shadow: none;
    }

    .bar__actions,
    .copy {
        display: none;
    }

    html.js .page-head,
    html.js .section__title,
    html.js .address,
    html.js .frame__foot,
    html.js .docs__toc,
    html.js .card,
    html.js .doc,
    html.js .server,
    html.js .pager,
    html.js .section--prose > * {
        opacity: 1;
        transform: none;
    }
}