/* ==========================================================================
   设计 01 · 极客终端暗色
   命令行美学：等宽字体、暗底绿光、文件树、日志流
   ========================================================================== */

:root {
  --font-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", ui-monospace,
    SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;

  --wrap: 1080px;
  --r: 6px;
  --gap: 16px;

  --bg: #0a0e14;
  --panel: #0f141b;
  --panel-2: #131a23;
  --line: #1e2733;
  --line-2: #2c3745;
  --fg: #c6d0dc;
  --fg-2: #8b97a6;
  --fg-3: #5d6a7a;
  --green: #3fd07a;
  --green-dim: #1c6b41;
  --amber: #e3b341;
  --cyan: #56d4dd;
  --red: #ff6b6b;
  --glow: 0 0 12px rgba(63, 208, 122, 0.28);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* 正文里可能有原始 HTML 的 <video>（远程 mp4）。它的固有尺寸要等元数据到达才确定，
   没限宽的话会把整页撑破——实测 390px 视口下溢出 1713px。 */
iframe {
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* CRT 扫描线 —— 极淡，只为质感 */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.014) 0px,
    rgba(255, 255, 255, 0.014) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--green);
  padding: 8px 14px;
  border-radius: var(--r);
}

/* ------------------------------------------------------------ 终端标题栏 */

.term-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 46px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.term-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.term-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line-2);
}
.term-dots i:nth-child(1) {
  background: #ff5f57;
}
.term-dots i:nth-child(2) {
  background: #febc2e;
}
.term-dots i:nth-child(3) {
  background: #28c840;
}

.term-title {
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.term-user {
  color: var(--green);
}
.term-sep {
  color: var(--fg-3);
}
.term-path {
  color: var(--cyan);
}

.term-nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.cmd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--fg-2);
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cmd-prefix {
  color: var(--fg-3);
}
.cmd:hover {
  color: var(--green);
  border-color: var(--line-2);
  background: var(--panel-2);
}
.cmd.is-active {
  color: var(--green);
  border-color: var(--green-dim);
  background: rgba(63, 208, 122, 0.08);
}
.cmd.is-active .cmd-prefix {
  color: var(--green);
}

.term-main {
  min-height: 70vh;
}

/* ------------------------------------------------------------ 通用语汇 */

.ps1 {
  color: var(--green);
  white-space: nowrap;
}
.cmd-text {
  color: var(--fg);
  margin-left: 8px;
}
.out {
  margin: 4px 0 20px;
  padding-left: 2px;
  white-space: pre-wrap;
}
.out-strong {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.out-dim {
  color: var(--fg-3);
  font-size: 13px;
}
.out-lead {
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.85;
  max-width: 68ch;
}
.out-error {
  color: var(--red);
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge {
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg-2);
  background: var(--panel);
}
.badge::before {
  content: "[";
  color: var(--fg-3);
}
.badge::after {
  content: "]";
  color: var(--fg-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover {
  border-color: var(--green);
  color: var(--green);
  box-shadow: var(--glow);
}

/* 首页/404 的「一次终端会话」里的命令行。
   刻意不叫 .line —— shiki 给每一行代码的 <span> 也是 class="line"，
   同名的裸选择器会把代码块的每一行都变成 flex + 26px 上边距。 */
.term-line {
  display: flex;
  align-items: baseline;
  margin-top: 26px;
}

/* ------------------------------------------------------------ 首页会话 */

.session {
  padding: 48px 0 8px;
}

.neofetch {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: center;
  margin: 24px 0 56px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}

.nf-ascii {
  display: grid;
  place-items: center;
}
.nf-avatar {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  filter: grayscale(1) contrast(1.15);
  transition: filter 0.3s;
}
.nf-avatar:hover {
  filter: grayscale(0) contrast(1);
}

.nf-info {
  font-size: 13px;
}
.nf-line {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 2px 0;
}
.nf-k {
  color: var(--green);
}
.nf-v {
  color: var(--fg);
}
.nf-dim {
  color: var(--fg-3);
}
.nf-rule {
  color: var(--line-2);
  margin: 8px 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ------------------------------------------------------------ 区块标题 */

.block {
  margin-bottom: 64px;
}

.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.block-cmd {
  color: var(--green);
  font-size: 13.5px;
}
.block-dim {
  color: var(--fg-3);
}
.block-more {
  font-size: 12.5px;
  color: var(--fg-2);
  white-space: nowrap;
}
.block-more:hover {
  color: var(--green);
}

/* 右侧不跳转的计数标注（作品数 / 荣誉数），与 .block-more 对齐 */
.block-more-static {
  font-size: 12.5px;
  color: var(--fg-3);
  white-space: nowrap;
}

/* 命令后的暗色注释 */
.cmd-note {
  margin-left: 10px;
  color: var(--fg-3);
}

/* ------------------------------------------------------------ 服务清单 */

.svc-list {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}

.svc-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: baseline;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  transition: background 0.16s;
}

.svc-row:last-child {
  border-bottom: 0;
}

.svc-row:hover {
  background: var(--panel-2);
}

.svc-idx {
  color: var(--fg-3);
  font-size: 12.5px;
}

.svc-name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}

.svc-detail {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-2);
}

.svc-ok {
  color: var(--green);
  font-size: 14px;
}

/* ------------------------------------------------------------ 作品列表 */

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

.work {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}

.work:hover {
  border-color: var(--green-dim);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.work-thumb {
  display: block;
  overflow: hidden;
  background: var(--panel-2);
  border-right: 1px solid var(--line);
}

.work-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 108px;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.05);
  transition: filter 0.3s;
}

.work:hover .work-thumb img {
  filter: saturate(1) contrast(1);
}

.work-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
}

.work-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}

.work-no {
  color: var(--green);
}

.work-desc {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--fg-2);
}

/* ------------------------------------------------------------ 荣誉与活动 */

.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.gal {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.16s;
}

.gal:hover {
  border-color: var(--green-dim);
}

.gal img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  filter: grayscale(35%) brightness(0.92);
  transition: filter 0.3s;
}

.gal:hover img {
  filter: none;
}

.gal figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
}

.gal-kind {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--green);
}

.gal-title {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-2);
}

/* ------------------------------------------------------------ 课程 */

.course-list {
  display: grid;
  gap: var(--gap);
}

.course {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.16s, box-shadow 0.16s;
}

.course:hover {
  border-color: var(--green-dim);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.course-figure {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--panel-2);
  border-right: 1px solid var(--line);
}

.course-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.course-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 9px;
  font-size: 11px;
  color: #0a0e14;
  background: var(--green);
  border-radius: 3px;
  box-shadow: var(--glow);
}

.course-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
}

.course-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}

.course-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-2);
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
}

.cm-key {
  color: var(--fg-3);
}

.cm-key::after {
  content: ':';
}

.cm-val {
  color: var(--cyan);
}

/* ------------------------------------------------------------ 联系 */

.contact-list {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.contact-row:last-child {
  border-bottom: 0;
}

.contact-key {
  flex: 0 0 auto;
  color: var(--fg-3);
  font-size: 12.5px;
}

/* 点线引导：终端里 `key ......... value` 的经典排法 */
.contact-dots {
  flex: 1;
  min-width: 20px;
  height: 1px;
  border-bottom: 1px dotted var(--line-2);
}

.contact-val {
  flex: 0 0 auto;
  font-size: 13.5px;
  color: var(--fg);
  overflow-wrap: anywhere;
}

a.contact-val:hover {
  color: var(--green);
}

.contact-qr {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
  padding: 3px;
}

/* ------------------------------------------------------------ 日志卡片 */

.log-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.log-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.log-card:hover {
  border-color: var(--green-dim);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.log-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  gap: 10px;
}

.log-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--fg-3);
}
.log-prompt {
  color: var(--green);
}
.log-tag {
  margin-left: auto;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 0 6px;
  color: var(--fg-2);
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
}
.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.88;
  transition: opacity 0.2s, transform 0.3s;
}
.log-card:hover .card-cover img {
  opacity: 1;
  transform: scale(1.03);
}

.log-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  color: #e6edf3;
  font-family: var(--font-sans);
}
.log-card:hover .log-title {
  color: var(--green);
}

.log-excerpt {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg-2);
  font-family: var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.log-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--fg-3);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.log-open {
  margin-left: auto;
  color: var(--fg-3);
}
.log-card:hover .log-open {
  color: var(--green);
}

/* ------------------------------------------------------------ 主题树 */

.topic-list {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}

.topic-row {
  display: grid;
  grid-template-columns: 26px auto 1fr auto 96px;
  align-items: baseline;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  transition: background 0.14s;
}
.topic-row:last-child {
  border-bottom: none;
}
.topic-row:hover {
  background: var(--panel-2);
}
.topic-branch {
  color: var(--fg-3);
}
.topic-name {
  color: var(--fg);
}
.topic-row:hover .topic-name {
  color: var(--green);
}
.topic-dots {
  border-bottom: 1px dotted var(--line-2);
  transform: translateY(-4px);
}
.topic-count {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.topic-date {
  color: var(--fg-3);
  font-size: 11.5px;
  text-align: right;
}

/* ------------------------------------------------------------ 页面头部 */

.page-wrap {
  padding: 40px 24px 72px;
}

.path-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-3);
  margin-bottom: 20px;
  overflow: hidden;
}
.path-prompt {
  color: var(--green);
  flex-shrink: 0;
}
.path-cmd {
  color: var(--cyan);
  /* 窄屏下命令串（如 find ./posts -name "*.md"）会超出视口。
     允许它收缩并省略，别让 flex-shrink:0 把它顶出去。 */
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.path-arg {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 带面包屑的那一行：路径长到一行放不下时让它整段折下去，
   而不是像 .path-cmd 那样省略掉尾段 —— 面包屑被截断就失去意义了。 */
.path-nav {
  flex-wrap: wrap;
  row-gap: 2px;
}
.path-nav .path-arg {
  flex: 1 1 auto;
}

/* 路径段：目录段是可 cd 的链接，最后一段（当前文件 / 当前目录）不是 */
.path-seg {
  color: var(--cyan);
}
.path-seg:hover {
  color: var(--green);
  text-decoration: underline;
}
.path-seg.is-here {
  color: var(--fg-2);
}
.path-sep {
  color: var(--line-2);
  padding: 0 1px;
}

.page-header {
  margin-bottom: 32px;
}
.page-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.page-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-3);
}

.year-tabs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.year-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--fg-2);
}
.year-tab span {
  color: var(--fg-3);
  font-size: 11px;
}
.year-tab:hover {
  border-color: var(--green);
  color: var(--green);
}

/* ------------------------------------------------------------ 归档列表 */

.year-block {
  margin-bottom: 40px;
}
.year-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.year-branch {
  color: var(--green);
}
.year-num {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.year-count {
  font-size: 11.5px;
  color: var(--fg-3);
}

.entry-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.entry {
  display: grid;
  grid-template-columns: 88px 92px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(30, 39, 51, 0.6);
  font-size: 13px;
  transition: background 0.12s;
}
.entry:hover {
  background: var(--panel);
}
.entry-perm {
  color: var(--line-2);
  font-size: 11.5px;
}
.entry-date {
  color: var(--fg-3);
  font-size: 12px;
}
.entry-name {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry:hover .entry-name {
  color: var(--green);
}
.entry-tag {
  font-size: 11.5px;
  color: var(--fg-3);
  white-space: nowrap;
}

/* ------------------------------------------------------------ 分类网格 */

.topic-grid {
  display: grid;
  /* minmax(0, 1fr) 而非 1fr：卡片里的文章标题是 nowrap，
     用默认的 1fr 时列宽下限会被 min-content 顶住，窄屏直接撑破视口。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.topic-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 同上：允许卡片被压缩到比内容更窄，超出部分交给 li 的 ellipsis。 */
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color 0.16s, transform 0.16s;
}
.topic-card:hover {
  border-color: var(--green-dim);
  transform: translateY(-2px);
}
.topic-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topic-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #e6edf3;
}
.topic-card:hover .topic-card-name {
  color: var(--green);
}
.topic-card-count {
  font-size: 11.5px;
  color: var(--amber);
}
.topic-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--fg-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-sans);
}
.topic-card-list li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-branch {
  color: var(--fg-3);
  margin-right: 6px;
  font-family: var(--font-mono);
}
.topic-card-foot {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--fg-3);
}

/* ------------------------------------------------------------ 系列（装了不止一篇的目录）
   这一节全部按 `ls` / `tree` / `stat` 的输出排：权限位、链接数、目录名尾巴上的
   斜杠、tree 字形、`>` 光标。刻意不给投影与位移 —— 这套的分层靠 1px 边和底色档。
   颜色档位：文字最低用 --fg-2（6.23），--fg-3（3.35）只留给装饰性的字形与注释。
   ---------------------------------------------------------------- */

.dir-grid {
  /* minmax(0,1fr)：卡片里的标题与目录行是 nowrap，用 1fr 会被内容的
     min-content 顶住列宽，窄屏直接撑破视口（.topic-grid 同一个坑）。 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.dir-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color 0.16s, background 0.16s;
}
.dir-card:hover {
  border-color: var(--green-dim);
  background: var(--panel-2);
}

/* ls -l 的那一行头 */
.dir-mode {
  display: flex;
  align-items: baseline;
  /* 允许折行：320px 视口下「drwxr-xr-x 7 files 2025-01 ~ 2026-01」一行放不下，
     不 wrap 就会把卡撑出横向溢出。折下去后 .dir-when 靠 margin-left:auto 仍靠右。 */
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 11.5px;
  color: var(--fg-2);
}
.dir-perm {
  /* 权限位纯装饰（aria-hidden），跟 .entry-perm 一样压到边线色 */
  color: var(--line-2);
}
.dir-links {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.dir-unit {
  font-size: 11px; /* 单位比左边那个数字小一档，读起来才像一列 ls 输出 */
}
.dir-when {
  margin-left: auto;
  color: var(--fg-2);
  white-space: nowrap;
}

.dir-name {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #e6edf3;
  overflow-wrap: anywhere;
}
.dir-card:hover .dir-name {
  color: var(--green);
}
/* 目录名尾巴上的斜杠：一眼分得清这是目录还是文章 */
.dir-slash {
  color: var(--green);
  font-family: var(--font-mono);
}

.dir-topic {
  font-size: 12px;
  color: var(--fg-2);
}
.dir-topic::before {
  content: 'topic: ';
  color: var(--fg-3); /* 与 .cm-key 同一档：标签只是索引，值才是内容 */
}
/* 分类页里这一行就是本页的标题，不必再写一遍 */
.page-category .dir-topic {
  display: none;
}

.dir-dek {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 卡里的 tree：只列前三篇当样本，必须单行截断 ——
   系列标题动辄三四十字，让它换行会把卡撑得比文章卡高一倍。 */
.dir-tree {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
}
.dir-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--fg-2);
}
.dir-branch {
  flex: none;
  color: var(--fg-3);
}
.dir-no {
  flex: none;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.dir-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
}
.dir-card:hover .dir-text {
  color: var(--fg);
}

.dir-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: var(--fg-2);
}
.dir-open {
  margin-left: auto;
  color: var(--fg-2);
}
.dir-card:hover .dir-open {
  color: var(--green);
}

/* --- 系列页：一个目录的 ls -lt --------------------------------------- */

.dir-header {
  margin-bottom: 28px;
}
.dir-header .page-title {
  margin: 6px 0 10px;
  font-size: 30px;
}
.dir-start {
  margin: 18px 0 0;
}
.dir-start .btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.dir-start-prompt {
  margin-right: 6px;
  color: var(--green);
}
.dir-start-order {
  margin-left: 6px;
  color: var(--amber);
}

.dir-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.dir-item + .dir-item {
  border-top: 1px solid var(--line);
}
.dir-item:hover {
  background: var(--panel-2);
}
.dir-link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 15px 18px;
}
.dir-item-title {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.dir-item:hover .dir-item-title {
  color: var(--green);
}
.dir-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dir-item-dek {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
  font-size: 11.5px;
  color: var(--fg-2);
  white-space: nowrap;
}

/* --- 侧栏面板：本系列目录 / stat / 同分类其它连载 -------------------- */

.panel {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.panel-head {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--green);
  overflow-wrap: anywhere;
}
.panel-prompt {
  margin-right: 4px;
}
.panel-head a {
  color: var(--cyan); /* 抬头里那段路径是可点的（回系列页），所以给链接色 */
}
.panel-head a:hover {
  text-decoration: underline;
}
.panel-note {
  font-size: 11.5px;
  color: var(--fg-2);
  margin-bottom: 8px;
}
.panel-here {
  color: var(--amber);
  font-weight: 700;
}
.panel-body {
  display: grid;
  gap: 3px;
}
.panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.panel-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.panel-item a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px;
  border-left: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-2);
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.panel-item a:hover {
  color: var(--green);
  border-left-color: var(--line-2);
}
/* 当前篇：一列 `>` 当光标（shell 的位置标记），而不是涂一块底色 */
.panel-item.is-current > a {
  color: var(--green);
  font-weight: 600;
  border-left-color: var(--green);
}
.panel-mark {
  flex: none;
  width: 8px;
  font-family: var(--font-mono);
  color: var(--green);
}
.panel-no {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber);
}
.panel-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.panel-tail {
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber);
}
.panel-foot {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: var(--cyan);
}
.panel-foot:hover {
  color: var(--green);
}

/* 眉部那句「第 04/07 篇」：琥珀色从日期那堆灰字里分出来，
   它是「你在这条连载的哪一格」，不是元信息。链接本身不用改样式，
   全站 a 已经不带下划线。 */
.meta-ord {
  color: var(--amber);
}

/* 系列读完那句 —— 写成命令行里的一行注释 */
.series-end {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 2px solid var(--green);
  background: var(--panel);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--fg-2);
}
.series-end-hash {
  margin-right: 6px;
  color: var(--green);
}
.series-end a {
  color: var(--cyan);
}
.series-end a:hover {
  color: var(--green);
  text-decoration: underline;
}

/* ------------------------------------------------------------ 文章页 */

.article-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 44px;
  padding-top: 36px;
  padding-bottom: 72px;
}

/* 防止超宽代码块把网格列撑破 */
.article-main {
  min-width: 0;
}

.article-title {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-2);
}
.meta-k {
  color: var(--fg-3);
}
.meta-k::before {
  content: "--";
  color: var(--line-2);
}
.meta-sep {
  color: var(--line-2);
}
.article-meta a {
  color: var(--cyan);
}

.prose {
  margin-top: 28px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.9;
  color: #ccd6e0;
  overflow-wrap: break-word;
}
.prose > *:first-child {
  margin-top: 0;
}

/* 少数文章的正文以 H1 开头（标题取自文件名，首个 H1 是独立章节）。
   这里让它与 H2 同级呈现，避免退化成浏览器默认样式。 */
.prose h1,
.prose h2 {
  margin: 40px 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--green);
  font-size: 21px;
  font-weight: 650;
  color: #fff;
}
.prose h3 {
  margin: 30px 0 10px;
  font-size: 17px;
  font-weight: 650;
  color: #e6edf3;
}
.prose h4 {
  margin: 22px 0 8px;
  font-size: 15.5px;
  color: #e6edf3;
}

.prose p {
  margin: 0 0 18px;
}
.prose a {
  color: var(--cyan);
  border-bottom: 1px dashed var(--cyan);
}
.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 1.5em;
}
.prose li {
  margin-bottom: 6px;
}
.prose blockquote {
  margin: 0 0 18px;
  padding: 4px 16px;
  border-left: 3px solid var(--line-2);
  background: var(--panel);
  color: var(--fg-2);
  border-radius: 0 var(--r) var(--r) 0;
}
.prose img {
  display: block;
  margin: 22px auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.prose table {
  /* 宽表格自带横向滚动：display:block 把表格变成可滚动块，
     内部匿名表格仍按内容宽度铺开，超出即滚，不会把整页撑破。 */
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 13.5px;
  font-family: var(--font-mono);
}

/* 保险：正文里若出现原始 HTML 的裸 <pre>（不经过渲染器的围栏处理），
   也得能横向滚动。 */
.prose pre {
  overflow-x: auto;
  max-width: 100%;
}
.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}
.prose th {
  background: var(--panel);
  color: var(--green);
  font-weight: 500;
}
.prose hr {
  margin: 32px 0;
  border: none;
  border-top: 1px dashed var(--line-2);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.87em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--amber);
}

/* 代码块 */
.code-block {
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #0d1117;
  overflow: hidden;
  position: relative;
}
/* 没有语言标记的代码块不显示角标——否则会渲染出一个空的背景方块 */
.code-block:not([data-lang])::before {
  display: none;
}
.code-block::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 10px;
  font-size: 10.5px;
  color: var(--fg-3);
  background: var(--panel-2);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 var(--r) 0 var(--r);
}
.code-block pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.68;
}
.code-block code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.code-block .shiki,
.code-block .shiki span {
  color: var(--shiki-dark);
  background-color: transparent;
}
.code-block .shiki {
  background-color: #0d1117;
}

/* 行号 —— 原站 markdown.lineNumbers 的等价物。
   shiki 每一行是 <span class="line">，行间靠换行断开；把 .line 变成
   inline-block 并挂一个 ::before 计数器，就正好落在那次换行上。
   （注意别用裸 .line 选择器：首页终端会话的命令行也曾经叫 .line，
   现在叫 .term-line，就是为了不跟这里打架。） */
.code-block .shiki code {
  counter-reset: shiki-line;
}
.code-block .line {
  display: inline-block;
  counter-increment: shiki-line;
}
.code-block .line::before {
  content: counter(shiki-line);
  display: inline-block;
  box-sizing: border-box;
  width: 3em;
  padding-right: 1.4em;
  text-align: right;
  /* 用主题里现成的弱化色，不用 opacity —— 对比度探针看不见 opacity */
  color: var(--fg-3);
  user-select: none;
}

/* 侧栏 */
.article-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tree {
  position: sticky;
  top: 70px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  padding: 14px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.tree-head {
  font-size: 11.5px;
  color: var(--green);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.tree-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tree-item a {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.55;
  font-family: var(--font-sans);
}
.tree-item a:hover,
.tree-item a.is-active {
  color: var(--green);
}
.tree-branch {
  color: var(--fg-3);
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.whoami {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.whoami-head {
  font-size: 11.5px;
  color: var(--green);
  margin-bottom: 12px;
}
.whoami-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--r);
  object-fit: cover;
  border: 1px solid var(--line-2);
  margin-bottom: 10px;
  filter: grayscale(1);
}
.whoami-name {
  font-size: 13.5px;
  color: #fff;
  font-weight: 600;
}
.whoami-role {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.6;
}

/* 上下篇 */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: 44px;
}
.pager-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color 0.16s;
}
.pager-item:hover:not(.is-empty) {
  border-color: var(--green-dim);
}
.pager-item.is-empty {
  border: none;
  background: none;
  padding: 0;
}
.pager-next {
  text-align: right;
}
.pager-dir {
  font-size: 11.5px;
  color: var(--fg-3);
}
/* 系列内的上下篇标出「04/07」，读连载时一眼确认没跳页 */
.pager-ord {
  color: var(--amber);
}
.pager-item:hover:not(.is-empty) .pager-dir {
  color: var(--green);
}
.pager-title {
  font-size: 13px;
  color: var(--fg-2);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.related {
  margin-top: 52px;
}

/* ------------------------------------------------------------ 搜索 */

.grep-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel);
}
.grep-box:focus-within {
  border-color: var(--green);
  box-shadow: var(--glow);
}
.grep-prompt {
  color: var(--green);
}
.grep-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
}
.grep-input::placeholder {
  color: var(--fg-3);
}
.grep-hint {
  margin: 10px 0 20px;
  font-size: 12px;
  color: var(--fg-3);
}
.grep-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grep-item {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color 0.15s;
}
.grep-item:hover {
  border-color: var(--green-dim);
}
.grep-item-title {
  margin: 0 0 6px;
  font-size: 14px;
  color: #e6edf3;
  font-family: var(--font-sans);
  font-weight: 600;
}
.grep-item-meta {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.grep-item-excerpt {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-2);
  font-family: var(--font-sans);
}
.grep-item mark {
  background: rgba(227, 179, 65, 0.2);
  color: var(--amber);
  border-radius: 2px;
}

/* ------------------------------------------------------------ 404 */

.notfound {
  padding-top: 72px;
}
.notfound-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* ------------------------------------------------------------ 页脚 */

.term-foot {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 28px 0 36px;
}
.foot-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}
.foot-prompt {
  color: var(--green);
}
.foot-cmd {
  color: var(--fg-3);
}
.foot-body {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 32px;
  align-items: start;
}
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.foot-col-right {
  text-align: right;
}
.foot-label {
  color: var(--fg-3);
  font-size: 11px;
}
.foot-links {
  display: flex;
  gap: 14px;
}
.foot-link {
  color: var(--fg-2);
}
.foot-link:hover {
  color: var(--green);
}
.foot-dim {
  color: var(--fg-3);
}

/* 首页版块 —— 文章页上没有别的路能回到首页的「作品 / 荣誉与活动」，
   那些锚点只活在首页内部导航里，所以在这里当成一次目录列举。 */
.foot-sections {
  margin-top: 24px;
}
.foot-sections-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.foot-section {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-2);
  transition: color 0.2s;
}
.foot-section:hover {
  color: var(--green);
}

/* ------------------------------------------------------------ 响应式 */

@media (max-width: 1024px) {
  .log-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-wrap {
    grid-template-columns: 1fr;
  }
  /* 侧栏原来是整块 display:none，「本系列」目录跟着一起消失 ——
     读到第 04 篇的人在手机上就看不见剩下 3 篇，比没有这个目录更糟。
     改成折回文档流排在正文之后，同时撤掉目录树那份 sticky 与内部滚动：
     单栏下它已经没有右栏的高度约束，留着会把列表困在一个滚动盒里。 */
  .article-side {
    gap: 14px;
  }
  .tree {
    position: static;
    max-height: none;
    overflow: visible;
  }
  /* 作品卡是「缩略图 + 两行说明」的横排，1024 以下两列会把说明挤成窄条 */
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .term-title {
    display: none;
  }
  /* 导航从 4 个入口加到 6 个后，这一行在窄屏放不下了
     （实测 390px 溢出 4px、320px 溢出 74px）。
     改成可横向滑动的窄条：条目仍是一行、仍是终端提示符的样子，
     放不下的部分滑出来 —— 比折成两行更贴近「一行命令」的语汇。
     用 margin-left:auto 而不是 justify-content:flex-end：
     后者在可滚动容器里会让开头那几项滑不回来。 */
  .term-nav {
    margin-left: auto;
    flex: 0 1 auto;
    /* flex 子项默认不会小于内容宽度，不写这行它就不会收缩，溢出照旧 */
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .term-nav::-webkit-scrollbar {
    display: none;
  }
  .cmd {
    /* 条目本身不许被压扁，宁可滑动 */
    flex: 0 0 auto;
    padding: 4px 7px;
    font-size: 12px;
  }
  .out-strong {
    font-size: 22px;
  }
  .neofetch {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .nf-avatar {
    width: 100px;
    height: 100px;
  }
  .log-grid,
  .topic-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .entry {
    grid-template-columns: 84px 1fr;
  }
  .entry-perm,
  .entry-tag {
    display: none;
  }
  .topic-row {
    grid-template-columns: 22px 1fr auto;
  }
  .topic-dots,
  .topic-date {
    display: none;
  }
  .article-title {
    font-size: 21px;
  }
  .pager {
    grid-template-columns: 1fr;
  }
  /* 系列卡里的 tree 行在窄屏撑不满两列，改成整页一张卡 */
  .dir-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dir-header .page-title {
    font-size: 22px;
  }
  .dir-link {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 4px 10px;
    padding: 14px 16px;
  }
  /* 时长/日期不删、也不挤在右边把标题压成一列字 —— 让它另起一行 */
  .dir-item-meta {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .dir-no {
    grid-row: 1;
  }
  .foot-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .foot-col-right {
    text-align: left;
  }
  /* 首页个人版块：服务行的序号列收窄，课程卡改上下排 */
  .svc-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
  }
  .svc-ok {
    display: none;
  }
  .gal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .course {
    grid-template-columns: minmax(0, 1fr);
  }
  .course-figure {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .course-figure img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  /* 联系行：点线在窄屏会把值挤到下一行，直接去掉 */
  .contact-row {
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .contact-dots {
    display: none;
  }
  .contact-val {
    flex: 1 1 100%;
    order: 3;
  }
  .contact-qr {
    width: 88px;
    height: 88px;
    margin-left: auto;
  }
}

/* ==========================================================================
   主题切换器（由核心注入，这里只负责终端风的皮肤）
   读法上做成一行「命令参数」：theme --list 之后跟着两个可选值。
   ========================================================================== */

.theme-switch {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

/* <summary> 自带的小三角要去掉，换成自己画的箭头 */
.theme-switch-trigger,
.theme-hero-trigger {
  list-style: none;
  cursor: pointer;
}
.theme-switch-trigger::-webkit-details-marker,
.theme-hero-trigger::-webkit-details-marker {
  display: none;
}
.theme-switch-trigger::marker,
.theme-hero-trigger::marker {
  content: '';
}

/* 切换器用 --fg-2 而不是 --fg-3。
 * --fg-3 在这个暗底上只有 3.35 对比度（低于 WCAG AA 的 4.5），
 * 拿来做装饰性注释可以，但切换器是**可点击的控件**，弱到看不清就没人会去点。
 * --fg-2 是 6.23，既够醒目，又仍比正文低一档。 */
.theme-switch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--fg-2);
  font-size: 12.5px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-switch-trigger:hover {
  color: var(--cyan);
  border-color: var(--line-2);
}
.theme-switch-trigger:focus-visible {
  outline: 1px solid var(--green);
  outline-offset: 2px;
}
.theme-switch-label::before {
  content: 'theme ';
  color: var(--green);
}
.theme-switch-current {
  color: var(--fg);
}
.theme-switch-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s;
}
.theme-switch-picker[open] .theme-switch-caret {
  transform: rotate(180deg);
}

/* 面板锚在**标题栏**上（.term-bar 本身是 sticky，已经是定位元素），
   右对齐往左展开 —— 按钮在窄屏会被推到右边，锚按钮的话面板会伸出屏幕。 */
.theme-switch-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 4px;
  width: min(280px, calc(100vw - 44px));
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.theme-switch-panel-title {
  padding: 2px 9px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--fg-2);
}
.theme-switch-panel-title::before {
  content: '# ';
  color: var(--fg-2);
}
.theme-switch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--fg-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-switch-item:hover {
  color: var(--cyan);
  border-color: var(--line-2);
  background: var(--panel-2);
}
.theme-switch-item.is-current {
  color: var(--green);
  border-color: var(--green-dim);
  background: rgba(63, 208, 122, 0.08);
}
.theme-switch-dot {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.theme-switch-item.is-current .theme-switch-dot {
  opacity: 1;
  box-shadow: var(--glow);
}
.theme-switch-name {
  flex: 1;
  min-width: 0;
}
.theme-switch-state {
  flex: none;
  font-size: 11px;
  color: var(--fg-2); /* 这行是操作提示，不用最弱的 --fg-3（3.35） */
}
.theme-switch-item.is-current .theme-switch-state {
  color: var(--green);
}

/* 首页上的大块版：同样收成一个按钮，展开才是那排卡片 */

.theme-hero {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto 40px;
  padding: 0 28px;
}
.theme-hero-head {
  margin-bottom: 16px;
}
.theme-hero-kicker {
  display: block;
  font-size: 12.5px;
  color: var(--fg-3);
}
.theme-hero-kicker::before {
  content: '$ ';
  color: var(--green);
}
.theme-hero-title {
  margin: 8px 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}
.theme-hero-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-3);
}

/* 首页这处不浮层：展开就把版面撑开，不会盖住页脚 */
.theme-hero-picker {
  display: block;
}
.theme-hero-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.15s, background 0.15s;
}
.theme-hero-trigger:hover {
  border-color: var(--green-dim);
  background: var(--panel-2);
}
.theme-hero-trigger:focus-visible {
  outline: 1px solid var(--green);
  outline-offset: 2px;
}
.theme-hero-trigger-label {
  flex: none;
  font-size: 12.5px;
  color: var(--fg-2);
}
.theme-hero-trigger-label::before {
  content: '> ';
  color: var(--green);
}
.theme-hero-trigger-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.theme-hero-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--fg-2);
  transition: transform 0.15s;
}
.theme-hero-picker[open] .theme-hero-caret {
  transform: rotate(180deg);
}
.theme-hero-panel {
  margin-top: 12px;
}
.theme-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.15s, background 0.15s;
}
.theme-card:hover {
  border-color: var(--green-dim);
  background: var(--panel-2);
}
.theme-card.is-current {
  border-color: var(--green-dim);
  background: rgba(63, 208, 122, 0.06);
}
.theme-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.theme-card.is-current .theme-card-name {
  color: var(--green);
}
.theme-card-desc {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--fg-2); /* 卡片说明是内容，不用最弱的 --fg-3（3.35） */
}
.theme-card-flag {
  margin-top: auto;
  padding-top: 4px;
  font-size: 11px;
  color: var(--fg-2); /* 同上：这行是操作提示，得看得清 */
}
.theme-card-flag::before {
  content: '> ';
}
.theme-card.is-current .theme-card-flag {
  color: var(--green);
}

@media (max-width: 860px) {
  .theme-switch {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .theme-hero {
    padding: 0 18px;
  }
  .theme-hero-grid {
    grid-template-columns: 1fr;
  }
}

/**
 * 窄屏：标题栏原来只有「圆点 + 导航」，现在多了切换器，一行放不下。
 * 不硬挤，改成允许换行——标题栏变高一点，但四个导航项与切换器都还在。
 */
@media (max-width: 720px) {
  .term-bar {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 12px;
    row-gap: 6px;
  }
  .theme-switch {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}