/* ==========================================================================
   水族馆 aquarium39 —— 「葱葱的深夜水族箱」
   纯 CSS 设计系统：无 JavaScript、无外部字体、无外部依赖。
   主色取自初音ミク #39C5BB（水色），辅以樱花粉与深海墨色。
   深色模式 = 夜晚的深海水族馆（跟随系统 prefers-color-scheme）。
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root {
  color-scheme: light dark;

  /* 文字 */
  --ink: #1c3a45;
  --ink-muted: #5f7d86;

  /* 水色（主） */
  --miku: #39c5bb;
  --miku-deep: #128078;
  --miku-soft: rgba(57, 197, 187, 0.14);
  --marker: rgba(57, 197, 187, 0.26);

  /* 粉色（辅） */
  --pink: #ffb9cd;
  --pink-strong: #ff8fb3;
  --pink-soft: rgba(255, 163, 192, 0.2);

  /* 面板与线条 */
  --card: #fffefc;
  --chip: #eef7f5;
  --line: #d8ebe9;
  --glass: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.85);

  /* 水体背景：光柱 + 渐变纱罩 + 葱花纹理（--negi-url 由模板注入） */
  --water-base: #eaf7f2;
  --glow: rgba(255, 255, 255, 0.85);
  --veil-a: rgba(213, 245, 242, 0.78);
  --veil-b: rgba(238, 250, 240, 0.84);

  /* 首页水槽（粉色玻璃缸） */
  --tank-a: #ffdce8;
  --tank-b: #ffccdf;
  --tank-border: rgba(255, 255, 255, 0.7);
  --tank-title: #134650;
  --tank-text: #7c4658;

  /* 海底页脚 */
  --sea-a: #c9ecf1;
  --sea-b: #9edbe4;
  --sea-text: #14606b;

  /* 阴影 */
  --shadow-lift: 0 0.7rem 2.3rem rgba(23, 74, 87, 0.12);
  --shadow-float: 0 1.2rem 2.8rem rgba(23, 74, 87, 0.18);

  /* 字体：圆体优先，全部走系统字体（无网络请求） */
  --font-body: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
    "Noto Sans CJK SC", "Microsoft YaHei", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-round: ui-rounded, "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN",
    "Yuanti SC", 幼圆, "YouYuan", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code",
    Consolas, "Courier New", monospace;
}

/* 深夜水族馆：深海模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #d9efee;
    --ink-muted: #90b6ba;

    --miku-deep: #79e2d7;
    --miku-soft: rgba(57, 197, 187, 0.16);
    --marker: rgba(57, 197, 187, 0.3);

    --pink: #ffa2bf;
    --pink-strong: #ff9dbe;
    --pink-soft: rgba(255, 162, 191, 0.15);

    --card: #0e2a33;
    --chip: #14343d;
    --line: #1d4650;
    --glass: rgba(14, 46, 55, 0.66);
    --glass-border: rgba(255, 255, 255, 0.16);

    --water-base: #071e26;
    --glow: rgba(57, 197, 187, 0.1);
    --veil-a: rgba(7, 30, 38, 0.8);
    --veil-b: rgba(9, 38, 46, 0.86);

    --tank-a: rgba(255, 158, 190, 0.2);
    --tank-b: rgba(16, 56, 66, 0.92);
    --tank-border: rgba(255, 255, 255, 0.22);
    --tank-title: #ffe3ec;
    --tank-text: #f0bfd0;

    --sea-a: #0c2f3a;
    --sea-b: #062029;
    --sea-text: #9fc9cf;

    --shadow-lift: 0 0.7rem 2.3rem rgba(0, 8, 12, 0.5);
    --shadow-float: 0 1.2rem 2.8rem rgba(0, 8, 12, 0.6);
  }
}

/* ---------- 基础 ---------- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;

  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.8;

  background-color: var(--water-base);
  background-image:
    radial-gradient(130% 55% at 50% 0%, var(--glow) 0%, transparent 62%),
    linear-gradient(180deg, var(--veil-a), var(--veil-b)),
    var(--negi-url);
  background-attachment: fixed, fixed, fixed;
  background-size: auto, auto, 24rem auto;
  background-repeat: no-repeat, no-repeat, repeat;
}

img {
  display: block;
  object-fit: contain;
}

a {
  color: var(--miku-deep);
  text-decoration: none;
}

::selection {
  background: var(--pink);
  color: #59203a;
}

:focus-visible {
  outline: 3px solid var(--miku);
  outline-offset: 2px;
  border-radius: 0.4em;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--miku) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--marker);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--miku);
}

/* ---------- 首页：玻璃水槽头图 ---------- */
header.home {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--tank-a), var(--tank-b));
  border: 1px solid var(--tank-border);
  border-radius: 2rem;
  box-shadow: var(--shadow-lift),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -18px 30px -22px rgba(18, 128, 120, 0.4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: clamp(1.6rem, 5vh, 3rem) auto 2.4rem;
  max-width: 50rem;
  width: calc(100% - 2rem);
  box-sizing: border-box;
  padding: 1.7rem 1.3rem;
}

header.home > div.text {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  line-height: 1.7;
  margin: 0.8rem;
  max-width: 30rem;
}

header.home > div.text > h1 {
  font-family: var(--font-round);
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  letter-spacing: 0.08em;
  color: var(--tank-title);
  display: inline-block;
  margin: 0.2em 0 0.45em;
  padding-bottom: 0.35em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0 5 Q 5.5 0.5 11 5 T 22 5 T 33 5 T 44 5' fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 44px 10px;
}

header.home > div.text > p {
  margin: 0;
  color: var(--tank-text);
  transition: opacity 0.39s;
}

/* 缸里的照片：拍立得 */
header.home > div.image {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 0.45rem 0.45rem 0.3rem;
  border-radius: 1.1rem;
  box-shadow: 0 0.8rem 2rem rgba(31, 71, 84, 0.18);
  margin: 0.8rem;
  transform: rotate(2.2deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

header.home:hover > div.image {
  transform: rotate(-1.4deg) scale(1.02);
}

header.home > div.image > picture > img {
  border-radius: 0.8rem;
  object-fit: cover;
}

/* 上浮的小气泡（纯 CSS 动画） */
.tank-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.tank-bubbles i {
  position: absolute;
  bottom: -1.4rem;
  left: calc(var(--x) * 1%);
  width: calc(var(--s) * 1px);
  height: calc(var(--s) * 1px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.12) 64%
  );
  box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 0.55),
    inset 1px 1px 3px rgba(120, 200, 205, 0.28);
  opacity: 0;
  animation: bubble-rise var(--t, 8s) ease-in var(--d, 0s) infinite;
}

.tank-bubbles i:nth-child(1) { --x: 7;  --s: 10; --t: 7s;   --d: 0s;   --rise: -26rem; }
.tank-bubbles i:nth-child(2) { --x: 22; --s: 6;  --t: 9.2s; --d: 1.3s; --rise: -22rem; }
.tank-bubbles i:nth-child(3) { --x: 46; --s: 13; --t: 6.4s; --d: 0.6s; --rise: -27rem; }
.tank-bubbles i:nth-child(4) { --x: 64; --s: 7;  --t: 8.6s; --d: 2.2s; --rise: -23rem; }
.tank-bubbles i:nth-child(5) { --x: 81; --s: 11; --t: 7.6s; --d: 1.7s; --rise: -26rem; }
.tank-bubbles i:nth-child(6) { --x: 92; --s: 5;  --t: 10s;  --d: 0.3s; --rise: -21rem; }

@keyframes bubble-rise {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  30% {
    transform: translateY(calc(var(--rise) * 0.33)) translateX(0.4rem);
  }
  60% {
    transform: translateY(calc(var(--rise) * 0.66)) translateX(-0.4rem);
    opacity: 0.75;
  }
  100% {
    transform: translateY(var(--rise)) translateX(0.2rem);
    opacity: 0;
  }
}

/* 缸底游动的小鱼 */
.tank-fishes {
  position: absolute;
  left: 2.2rem;
  bottom: 1.5rem;
  z-index: 0;
  width: 9.5rem;
  height: 3rem;
  pointer-events: none;
  opacity: 0.8;
}

.tank-fishes svg {
  position: absolute;
  width: var(--w, 3rem);
  animation: fish-swim var(--t, 6s) ease-in-out var(--d, 0s) infinite alternate;
}

.tank-fishes svg:nth-child(1) { bottom: 0.2rem; left: 0;      --w: 3.1rem; --t: 5.6s; --d: 0s;    }
.tank-fishes svg:nth-child(2) { bottom: 1.5rem; left: 3.2rem; --w: 2.2rem; --t: 7s;   --d: 0.8s;  }
.tank-fishes svg:nth-child(3) { bottom: 0;      left: 5.8rem; --w: 1.7rem; --t: 6.2s; --d: 1.6s;  }

@keyframes fish-swim {
  from {
    transform: translateX(0) rotate(0deg);
  }
  to {
    transform: translateX(1.1rem) rotate(3deg);
  }
}

/* ---------- 内页顶部：浮标胶囊 ---------- */
header.single {
  align-items: center;
  display: flex;
  justify-content: space-around;
  max-width: 60rem;
  padding: 1.2rem 0 0.9rem;
  width: 100%;
}

h1.single {
  margin: 0;
  animation: buoy-bob 4.6s ease-in-out infinite;
}

h1.single > a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-round);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.45em 1.35em;
  box-shadow: 0 0.35rem 1.2rem rgba(23, 74, 87, 0.1);
  transition: background 0.3s ease, color 0.3s ease;
}

/* 小葱图标 */
h1.single > a::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' stroke='%2312837b' stroke-width='1.6' stroke-linejoin='round' d='M3.2 20.8 L12.6 11.4 L15.8 14.6 L6.4 21 Z'/%3E%3Cpath fill='%2339c5bb' d='M12.6 11.4 C13.4 6.6 17.2 3.2 21.8 2.6 C21.4 7.4 18.4 11.2 14.6 13.4 Z'/%3E%3Cpath fill='%237adf9c' d='M14.8 13.2 C16.6 10.6 19.6 9.4 22.6 10 C21 13 18.2 15 15.8 15.4 Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

h1.single > a:hover {
  background: var(--miku-soft);
  color: var(--miku-deep);
}

@keyframes buoy-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* ---------- 首页卡片流 ---------- */
main.home {
  display: block;
  max-width: 48rem;
  width: calc(100% - 2rem);
  box-sizing: border-box;
}

.card {
  overflow-wrap: anywhere;
}

small.card {
  color: var(--ink-muted);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  font-size: 0.72rem;
  justify-content: flex-start;
  margin-top: 0.9em;
}

small.card > time {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18em 0.85em;
}

a.card {
  align-items: stretch;
  box-sizing: border-box;
  color: var(--ink);
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  margin: 2.6rem 0;
  text-decoration: none;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.3rem;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  max-height: 16em;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
  /* 出水动画：逐张上浮 */
  animation: card-surface 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

main.home > a.card:nth-of-type(1) { animation-delay: 0.05s; }
main.home > a.card:nth-of-type(2) { animation-delay: 0.12s; }
main.home > a.card:nth-of-type(3) { animation-delay: 0.19s; }
main.home > a.card:nth-of-type(4) { animation-delay: 0.26s; }
main.home > a.card:nth-of-type(5) { animation-delay: 0.33s; }
main.home > a.card:nth-of-type(6) { animation-delay: 0.4s; }
main.home > a.card:nth-of-type(7) { animation-delay: 0.47s; }
main.home > a.card:nth-of-type(8) { animation-delay: 0.54s; }
main.home > a.card:nth-of-type(9) { animation-delay: 0.61s; }
main.home > a.card:nth-of-type(n + 10) { animation-delay: 0.68s; }

@keyframes card-surface {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

a.card:hover {
  transform: translateY(-5px) rotate(-0.35deg);
  box-shadow: var(--shadow-float);
}

a.card:active {
  transform: translateY(-2px) scale(0.996);
}

picture.card {
  grid-row: 1 / 2;
  grid-column: 1;
  overflow: hidden;
}

article.card {
  grid-row: 1 / 2;
  grid-column: 2;
  line-height: 1.7;
  padding: 1.3em 1.7em;
}

img.card {
  height: 100%;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

a.card:hover img.card {
  transform: scale(1.045);
}

/* 无封面图的卡片：正文独占整行 */
a.card:not(:has(picture)) article.card {
  grid-column: 1 / -1;
}

h2.card {
  font-family: var(--font-round);
  color: var(--ink);
  font-size: 1.28em;
  font-weight: 700;
  margin: 0;
  display: inline;
  background-image: linear-gradient(
    transparent 62%,
    var(--marker) 62%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  transition: background-size 0.45s ease, color 0.3s ease;
}

a.card:hover h2.card {
  background-size: 100% 100%;
  color: var(--miku-deep);
}

p.card {
  margin: 0.55em 0 0;
}

/* ---------- 列表页（/posts/ /tags/ 等） ---------- */
.list-intro h1 {
  font-family: var(--font-round);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  display: inline-block;
  margin: 1.4rem 0 0;
  padding-bottom: 0.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0 5 Q 5.5 0 11 5 T 22 5 T 33 5 T 44 5' fill='none' stroke='%2339c5bb' stroke-opacity='0.6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 44px 10px;
}

.list-intro p {
  color: var(--ink-muted);
  margin: 0.4em 0 0;
}

.list-empty {
  color: var(--ink-muted);
  text-align: center;
  padding: 2.4rem 0;
}

/* ---------- 文章正文 ---------- */
main.single {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.3rem;
  box-shadow: var(--shadow-lift);
  box-sizing: border-box;
  margin-top: 0.4rem;
  margin-bottom: 2.6rem;
  max-width: 51rem;
  padding: 0.6rem 3.9% 2rem;
  width: calc(100% - 2rem);
  position: relative;
  z-index: 2;
}

article.single {
  line-height: 1.95;
}

.rich h1 {
  font-family: var(--font-round);
  font-size: clamp(1.6rem, 4.5vw, 2.05rem);
  letter-spacing: 0.03em;
  margin: 0.4em 0 0.35em;
}

.rich > .description,
p.description {
  font-size: 1.05rem;
  color: var(--ink-muted);
  margin: 0.2em 0 1em;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.post-meta > time {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2em 0.9em;
}

.post-meta > .reading {
  background: var(--pink-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.2em 0.9em;
}

.rich hr {
  border: none;
  height: 10px;
  margin: 2.2em auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0 5 Q 5.5 0 11 5 T 22 5 T 33 5 T 44 5' fill='none' stroke='%2339c5bb' stroke-opacity='0.55' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 44px 10px;
}

.rich h2 {
  font-family: var(--font-round);
  font-size: 1.42rem;
  letter-spacing: 0.02em;
  margin: 1.9em 0 0.7em;
  position: relative;
  padding-left: 0.75em;
}

.rich h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  bottom: 0.22em;
  width: 0.34em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--miku), var(--pink-strong));
}

.rich h3 {
  font-family: var(--font-round);
  font-size: 1.2rem;
  color: var(--miku-deep);
  margin: 1.6em 0 0.6em;
}

.rich a {
  color: var(--miku-deep);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.32em;
  transition: text-decoration-color 0.25s ease, background 0.25s ease;
}

.rich a:hover {
  text-decoration-color: var(--miku);
  text-decoration-style: wavy;
}

.rich blockquote {
  border-left: 0.45em solid var(--miku);
  border-radius: 0.4em 1.2em 1.2em 0.4em;
  background: var(--miku-soft);
  color: var(--ink-muted);
  font-style: normal;
  margin: 1.6em 0;
  padding: 0.9em 1.4em;
}

.rich blockquote p {
  margin: 0.35em 0;
}

/* 行内代码 */
.rich code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 0.45em;
  padding: 0.12em 0.45em;
}

/* 代码块：深海主题 */
.rich pre {
  margin: 1.5em 0;
}

.rich pre > code {
  background: #0b222c;
  border: none;
  border-radius: 0.9em;
  box-shadow: inset 0 0 0 1px rgba(57, 197, 187, 0.22),
    0 0.5rem 1.6rem rgba(11, 34, 44, 0.28);
  color: #cdeef0;
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  overflow: auto;
  padding: 1em 1.4em;
  white-space: pre;
}

/* Chroma 语法高亮（深海配色） */
.rich .chroma { color: #b8d8dd; }
.rich .chroma .k, .rich .chroma .kc, .rich .chroma .kd, .rich .chroma .kn,
.rich .chroma .kr, .rich .chroma .ow { color: #7fd8ff; }
.rich .chroma .kt { color: #66e0c2; }
.rich .chroma .s, .rich .chroma .sa, .rich .chroma .sb, .rich .chroma .sc,
.rich .chroma .sd, .rich .chroma .se, .rich .chroma .sh, .rich .chroma .si,
.rich .chroma .sx, .rich .chroma .s1, .rich .chroma .s2 { color: #ffd28f; }
.rich .chroma .c, .rich .chroma .c1, .rich .chroma .ch, .rich .chroma .cm,
.rich .chroma .cs, .rich .chroma .go { color: #5f7d88; font-style: italic; }
.rich .chroma .nf, .rich .chroma .fm { color: #9ee8b2; }
.rich .chroma .na, .rich .chroma .nt { color: #ffb3c8; }
.rich .chroma .nc, .rich .chroma .ne, .rich .chroma .nn { color: #c9b3ff; }
.rich .chroma .mi, .rich .chroma .mf, .rich .chroma .mb, .rich .chroma .mx { color: #ffab91; }
.rich .chroma .o { color: #8ac6d1; }

/* 表格 */
.rich table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 1em;
  margin: 1.6em auto;
  max-width: 100%;
  overflow: hidden;
}

.rich th,
.rich td {
  padding: 0.55em 1em;
  border-bottom: 1px solid var(--line);
}

.rich tr:last-child > td {
  border-bottom: none;
}

.rich th {
  background: var(--miku-soft);
  font-family: var(--font-round);
}

.rich tbody tr:nth-child(even) {
  background: rgba(57, 197, 187, 0.05);
}

/* 正文图片 */
.rich > p > picture,
.rich p:has(> picture) {
  text-align: center;
}

.rich picture > img,
.rich > img,
.rich > p > img {
  border-radius: 1.1em;
  box-shadow: 0 0.5rem 1.6rem rgba(23, 74, 87, 0.14);
  height: auto;
  margin-inline: auto;
  max-width: 100%;
}

.rich figure.video {
  margin: 1.6em 0;
}

.rich figcaption {
  color: var(--ink-muted);
  font-size: 0.9em;
  margin-top: 0.6em;
  text-align: center;
}

/* 数学公式（构建时渲染，无需 JS） */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.4em 0;
}

/* 标签云 */
.terms {
  margin-top: 2.4em;
  padding-top: 1.3em;
  border-top: 2px dashed var(--line);
}

.terms > div:first-child {
  font-family: var(--font-round);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 0.7em;
}

.terms ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.terms li {
  display: inline-block;
}

.terms li a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28em 1.05em;
  font-size: 0.92em;
  background: var(--chip);
  color: var(--miku-deep);
  transition: background 0.25s ease, transform 0.25s ease;
}

.terms li a:hover {
  transform: translateY(-2px);
}

.terms li:nth-child(odd) a:hover {
  background: var(--pink-soft);
}

.terms li:nth-child(even) a:hover {
  background: var(--miku-soft);
}

/* ---------- 分页 ---------- */
.pagination-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 2.4rem 0 0.4rem;
}

a.pagination {
  background: var(--glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: 0 0.3rem 1rem rgba(23, 74, 87, 0.1);
  color: var(--miku-deep);
  font-weight: 600;
  padding: 0.5em 1.45em;
  transition: background 0.3s ease, transform 0.3s ease;
}

a.pagination:hover {
  background: var(--miku-soft);
  transform: translateY(-2px);
}

/* ---------- 页脚：海底 ---------- */
.single_footer {
  align-items: center;
  background: linear-gradient(180deg, var(--sea-a), var(--sea-b));
  border-radius: 2rem 2rem 0 0;
  box-sizing: border-box;
  color: var(--sea-text);
  display: flex;
  flex-flow: column;
  gap: 1.2rem;
  justify-content: flex-start;
  margin-top: 1.6rem;
  max-width: 51rem;
  padding: 2.4rem 1.2rem 2.6rem;
  width: calc(100% - 2rem);
}

.single_footer_botton {
  display: block;
  width: 8.4rem;
  height: 8.4rem;
  border: 0.42rem solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0.8rem 1.8rem rgba(6, 40, 50, 0.28);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: buoy-bob 5s ease-in-out 1.2s infinite;
}

.single_footer_botton:hover {
  transform: rotate(-6deg) scale(1.06);
}

.single_footer_botton img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single_footer_caption {
  color: inherit;
  opacity: 0.85;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}

/* 首页底部的构建信息 */
main.home > .single_footer_caption {
  color: var(--ink-muted);
  margin: 1.8rem 0 2.4rem;
}

/* ---------- 404 ---------- */
.lost {
  text-align: center;
}

.lost img {
  border-radius: 1.2em;
  box-shadow: 0 0.6rem 1.8rem rgba(23, 74, 87, 0.18);
  margin: 1.2em auto;
  max-width: 100%;
  height: auto;
}

.back-home {
  display: inline-block;
  background: var(--miku-soft);
  border: 1px solid var(--miku);
  border-radius: 999px;
  color: var(--miku-deep);
  font-family: var(--font-round);
  font-weight: 600;
  padding: 0.55em 1.8em;
  margin-top: 0.6em;
  transition: background 0.3s ease, transform 0.3s ease;
}

.back-home:hover {
  background: var(--miku);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- 视频悬停播放（保留原有能力，纯 CSS） ---------- */
.video.hover-play {
  position: relative;
}

.video.hover-play img.video-poster,
.video.hover-play video {
  display: block;
  width: 100%;
}

.video.hover-play video {
  display: none;
}

.video.hover-play:focus-within video,
.video.hover-play:active video {
  display: block;
}

.video.hover-play:focus-within img.video-poster,
.video.hover-play:active img.video-poster {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .video.hover-play:hover video,
  .video.hover-play:focus-within video {
    display: block;
  }

  .video.hover-play:hover img.video-poster,
  .video.hover-play:focus-within img.video-poster {
    display: none;
  }
}

video {
  width: 100%;
  border-radius: 1.1em;
  background: #000;
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  body {
    background-size: auto, auto, 16rem auto;
  }

  header.home {
    padding: 1.3rem 1rem;
    width: calc(100% - 1.2rem);
    margin-top: 1.4rem;
  }

  header.home > div.text {
    margin: 0.4rem;
  }

  header.home > div.image {
    margin: 0.4rem;
  }

  main.home,
  main.single,
  .single_footer {
    width: calc(100% - 1.2rem);
  }

  main.single {
    padding: 0.4rem 5.5% 1.6rem;
  }

  a.card {
    margin: 1.8rem 0;
  }

  img.card {
    max-height: 300px;
  }

  article.card {
    padding: 1.1em 1.3em;
  }

  .single_footer_botton {
    width: 6.8rem;
    height: 6.8rem;
  }
}

/* ---------- 无障碍：尊重减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}