/* ============================================================
   HEPRGRYPH — 终端风格站点样式
   改配色只需要改下面 :root 里的 --c-* 变量。
   ============================================================ */

:root {
  --c-bg: #06090a;
  --c-bg-soft: #0b1012;
  --c-panel: #0d1416;
  --c-green: #4ef08a;
  --c-green-dim: #2b8a52;
  --c-cyan: #58d7ff;
  --c-yellow: #ffd166;
  --c-magenta: #ff6ec7;
  --c-red: #ff5f56;
  --c-text: #c9f2d8;
  --c-muted: #5f7d70;
  --c-line: #16342a;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
    "Fira Code", Menlo, Consolas, "Liberation Mono", "Microsoft YaHei Mono",
    monospace;
  --maxw: 1080px;
  --scan-opacity: 0.045;
}

/* 主题变体：终端里敲 theme amber / light 会切换 data-theme */
[data-theme="amber"] {
  --c-bg: #0d0906;
  --c-bg-soft: #140e08;
  --c-panel: #17100a;
  --c-green: #ffb347;
  --c-green-dim: #a86a20;
  --c-text: #ffe0b8;
  --c-muted: #8a6a45;
  --c-line: #3a2611;
  --c-cyan: #ffd166;
  --c-magenta: #ff8f5f;
}
[data-theme="ice"] {
  --c-bg: #05080f;
  --c-bg-soft: #080e18;
  --c-panel: #0b1220;
  --c-green: #7cc7ff;
  --c-green-dim: #3a7fb5;
  --c-text: #d4e7ff;
  --c-muted: #5d7ba0;
  --c-line: #16283f;
  --c-cyan: #58d7ff;
  --c-magenta: #b58cff;
}
[data-theme="light"] {
  --c-bg: #eef2ee;
  --c-bg-soft: #e4eae4;
  --c-panel: #ffffff;
  --c-green: #0f7a3d;
  --c-green-dim: #4e9c72;
  --c-text: #17241d;
  --c-muted: #6b7f74;
  --c-line: #c3d3c8;
  --c-cyan: #166f8f;
  --c-magenta: #a8247d;
  --c-yellow: #9a6a00;
  --scan-opacity: 0;
}

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

html {
  scroll-behavior: smooth;
  /* 横向裁切必须放在 html 上。
     若只写 body{overflow-x:hidden}，body 会变成滚动容器，
     导致 window.scrollY 恒为 0、scrollTo 失效（视差与滚动记忆都依赖它）。 */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* 背景：网格 + 中心辉光 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.28;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 78%);
}

/* CRT 扫描线 + 轻微暗角 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, var(--scan-opacity)) 0px,
    rgba(255, 255, 255, var(--scan-opacity)) 1px,
    transparent 1px,
    transparent 3px
  );
  /* flicker 与 scanDrift 动画在 motion.css 里定义并叠加 */
  animation: flicker 6s steps(60) infinite;
}

/* ---------------- 布局 ---------------- */

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

a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--c-cyan) 45%, transparent);
  transition: color 0.15s, background 0.15s;
}
a:hover {
  color: var(--c-bg);
  background: var(--c-cyan);
  border-bottom-color: transparent;
}

/* ---------------- 顶栏 ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
  font-size: 13px;
}

.topbar .brand {
  color: var(--c-green);
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 0;
  text-shadow: 0 0 12px color-mix(in srgb, var(--c-green) 55%, transparent);
}
.topbar .brand:hover {
  background: none;
  color: var(--c-green);
}

.topbar nav {
  display: flex;
  gap: 16px;
  margin-left: auto;
  flex-wrap: wrap;
}
.topbar nav a {
  color: var(--c-muted);
  border: 0;
  padding: 2px 4px;
}
.topbar nav a:hover,
.topbar nav a[aria-current="page"] {
  color: var(--c-green);
  background: none;
  text-shadow: 0 0 10px color-mix(in srgb, var(--c-green) 50%, transparent);
}
.topbar nav a[aria-current="page"]::before {
  content: "▸ ";
}

/* ---------------- 终端窗口 ---------------- */

.term {
  margin-top: 34px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-panel) 92%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-green) 6%, transparent),
    0 24px 70px -30px color-mix(in srgb, var(--c-green) 30%, transparent);
  overflow: hidden;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-line);
  font-size: 12px;
  color: var(--c-muted);
  user-select: none;
}
.term-bar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-line);
}
.term-bar .dot.r { background: var(--c-red); }
.term-bar .dot.y { background: var(--c-yellow); }
.term-bar .dot.g { background: var(--c-green); }
.term-bar .title {
  margin-left: 8px;
  letter-spacing: 0.06em;
}
.term-bar .spacer { margin-left: auto; }
.term-bar kbd {
  border: 1px solid var(--c-line);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--c-muted);
}

.term-body {
  padding: 20px 22px 6px;
  min-height: 300px;
}

/* 终端输出区。
   注意：这里【不能】用 white-space: pre-wrap —— 输出内容是 HTML 片段，
   pre-wrap 会把模板字符串里的换行和缩进当成真实空白渲染出来，
   把卡片、表格这类块级结构整体撑高（每层缩进都变成一行）。
   需要保留原样空白的「纯文本行」，用 .line 单独开启。 */
.term-out {
  white-space: normal;
  word-break: break-word;
}
/* 纯文本输出行（启动动画、日志行）保留缩进与空格 */
.term-out > .out-block.line { white-space: pre-wrap; }
.term-out > .out-block > .echo { white-space: pre-wrap; }

/* 每行输出是一个 .out-block，间距由块自身控制，容器不叠加 */
.term-out > * { margin-top: 0; }
.term-out > .out-block { margin-bottom: 6px; }
.term-out > .out-block:last-child { margin-bottom: 12px; }
/* 输出块内部的卡片：不要再叠一层外边距 */
.out-block > .card:last-child { margin-bottom: 0; }
/* 紧跟标题的内容收紧上边距 */
.out-block > h2:first-child,
.out-block > h3:first-child { margin-top: 4px; }

/* 逐行出场动画见 motion.css（整层动效集中在那个文件） */

/* ---------------- 提示行 / 输入 ---------------- */

.prompt-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 14px;
}

.ps1 {
  color: var(--c-green);
  white-space: nowrap;
  text-shadow: 0 0 10px color-mix(in srgb, var(--c-green) 45%, transparent);
}
.ps1 .path { color: var(--c-cyan); }

.cmdline {
  flex: 1 1 140px;
  min-width: 120px;
  position: relative;
  display: flex;
  align-items: baseline;
}
.cmdline input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--c-text);
  font: inherit;
  caret-color: transparent;
  padding: 0;
}
.cmdline input::placeholder {
  color: var(--c-muted);
  opacity: 0.55;
}
/* 光标样式与闪烁动画见 motion.css（motion.js 用 transform 精确定位） */
.caret {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  background: var(--c-green);
  box-shadow: 0 0 10px var(--c-green);
  pointer-events: none;
}

/* 输入历史（上方回显过的命令） */
.echo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--c-muted);
}
.echo .txt { color: var(--c-text); }

/* ---------------- 通用输出块 ---------------- */

.out-block { margin: 0 0 4px; }
/* 输出行之间的间距交给块自身的 margin，避免终端回显区越滚越散 */
.term-out > .out-block:last-child { margin-bottom: 10px; }

.dim { color: var(--c-muted); }
.ok { color: var(--c-green); }
.warn { color: var(--c-yellow); }
.err { color: var(--c-red); }
.cy { color: var(--c-cyan); }
.mg { color: var(--c-magenta); }

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: 20px 0 8px;
}
h1 { font-size: 1.5rem; color: var(--c-green); }
h2 { font-size: 1.15rem; color: var(--c-cyan); }
h3 { font-size: 1rem; color: var(--c-yellow); }
h2::before { content: "## "; color: var(--c-muted); }
h3::before { content: "### "; color: var(--c-muted); }
/* 标题紧跟的前一段不留额外上边距 */
h1 + p, h2 + p, h3 + p, h2 + ul, h3 + ul, h2 + ol, h3 + ol { margin-top: 0; }

p { margin: 0 0 9px; }
p:last-child { margin-bottom: 0; }
strong { color: var(--c-green); font-weight: 700; }
em { color: var(--c-yellow); font-style: normal; }
del { color: var(--c-muted); }

code {
  background: color-mix(in srgb, var(--c-green) 10%, transparent);
  border: 1px solid var(--c-line);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.92em;
  color: var(--c-yellow);
}

pre {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-green-dim);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.9em;
  color: var(--c-text);
}
pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

blockquote {
  margin: 0 0 16px;
  padding: 8px 16px;
  border-left: 2px solid var(--c-magenta);
  background: color-mix(in srgb, var(--c-magenta) 6%, transparent);
  color: var(--c-text);
}

ul, ol { margin: 0 0 10px; padding-left: 20px; }
li { margin: 0; }
li + li { margin-top: 2px; }
ul li::marker { color: var(--c-green-dim); content: "› "; }
ol li::marker { color: var(--c-green-dim); }

hr {
  border: 0;
  border-top: 1px dashed var(--c-line);
  margin: 16px 0;
}

/* 宽表格（比如 9 列的运行时数值表）在窄屏上会被压成"一列一个字"。
   所以正文表格统一套一层横向滚动容器：装得下就照常铺满，装不下就保持
   自然宽度横向滚。th/td 不换行，表格才会按内容撑开而不是被挤扁。 */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 18px;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table { margin: 0; }
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 0.92em;
}
th, td {
  border: 1px solid var(--c-line);
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}
th {
  background: color-mix(in srgb, var(--c-green) 8%, transparent);
  color: var(--c-green);
  font-weight: 700;
}
tbody tr:hover { background: color-mix(in srgb, var(--c-cyan) 6%, transparent); }

/* ---------------- 卡片 / 列表 ---------------- */

.card {
  display: block;
  border: 1px solid var(--c-line);
  /* 左侧强调条由 motion.css 的 ::before 单独绘制并在 hover 时长出。
     这里只保留一条很淡的底线，避免和 ::before 叠成"双色柱"。 */
  border-left: 3px solid color-mix(in srgb, var(--accent, var(--c-green-dim)) 28%, var(--c-line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--c-bg-soft) 80%, transparent);
  padding: 12px 15px;
  margin: 0 0 10px;
  color: inherit;
  line-height: 1.55;
  transition: transform 0.16s, border-color 0.16s, background 0.16s;
}
a.card:hover {
  background: color-mix(in srgb, var(--c-green) 7%, transparent);
  border-color: var(--c-green-dim);
  border-left-color: var(--accent, var(--c-green));
  transform: translateX(4px);
  color: inherit;
}
/* card-head 是 span，必须显式 flex，否则内部元素按 inline 排版把卡片撑高 */
.card .card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.card .card-title {
  color: var(--accent, var(--c-green));
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.card .card-sub { color: var(--c-muted); font-size: 0.85rem; }
.card .card-meta {
  margin-left: auto;
  color: var(--c-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.card p {
  margin: 6px 0 0;
  color: var(--c-text);
  font-size: 0.93rem;
  opacity: 0.92;
}

.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag {
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0 9px;
  font-size: 0.76rem;
  color: var(--c-muted);
  line-height: 1.6;
}
.tag.cy { color: var(--c-cyan); border-color: color-mix(in srgb, var(--c-cyan) 40%, transparent); }
.tag.mg { color: var(--c-magenta); border-color: color-mix(in srgb, var(--c-magenta) 40%, transparent); }
.tag.ye { color: var(--c-yellow); border-color: color-mix(in srgb, var(--c-yellow) 40%, transparent); }

.status {
  font-size: 0.76rem;
  border: 1px dashed currentColor;
  border-radius: 3px;
  padding: 0 6px;
  opacity: 0.9;
}

/* 命令帮助表 */
.cmdlist { margin: 0 0 14px; }
.cmdlist .row {
  display: flex;
  gap: 14px;
  padding: 2px 0;
  align-items: baseline;
}
.cmdlist .row .k {
  color: var(--c-green);
  min-width: 132px;
  flex: 0 0 auto;
}
.cmdlist .row .d { color: var(--c-text); opacity: 0.85; }

/* 按钮式命令提示（可点击） */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.chip {
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  color: var(--c-cyan);
  font: inherit;
  font-size: 0.85rem;
  padding: 2px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover {
  border-color: var(--c-cyan);
  background: color-mix(in srgb, var(--c-cyan) 12%, transparent);
  color: var(--c-text);
}

/* 进度条 */
.bar {
  color: var(--c-green);
  letter-spacing: 0;
}

/* ---------------- 3D 字符 LOGO ----------------
   图案/渲染全在 src/scripts/logo3d.js（纯字符，无 canvas）。
   这里只管排版：**无边框、无背景、页面居中**的一条横幅。
   为什么不做框：终端卡片那层带动车灯和描边的框会把字符画关在里面，
   看起来像一张截图；画面直接铺在页面上才像"页面的标题"。 */
/* LOGO 的"占位槽"：只负责高度，不参与任何视觉。
   开屏（BIOS）期间它被 .boot-logo-idle 压成 0 高度，终端卡片就贴在顶栏下面；
   首页内容出现时由 terminal.js 把它推到自然高度，终端随之平滑下移。
   为什么要单独一层：.logo-hero 上挂着出场动画（transform / opacity / blur），
   布局动画不能和它们抢同一个元素；而且高度得能过渡，也得有个明确的主角。
   垂直留白放在槽上而不是 .logo-hero 上 —— 否则槽塌成 0 时那 32px 还留着。 */
.logo-slot {
  margin: 10px auto 22px;
}

html.boot-logo-idle .logo-slot {
  height: 0;
  overflow: hidden;
}

.logo-hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: var(--maxw);
  padding: 0 20px;
}

.logo3d {
  --logo-cols: 96;
  color: var(--c-green);
  font-size: 12px;
  line-height: 1.0;
  margin: 0;
  /* 父级 .logo-hero 是 display:flex，默认 flex-shrink:1 会把这条 pre
     压到比它自己的内容还窄（东西被 overflow:hidden 从右边切掉）。
     字符画必须按内容宽度排版：宽度由字号算出来，再由 justify-content 居中。 */
  flex: none;
  /* 不加框：这条 pre 会被上面通用的 `pre {...}` 规则套上代码块边框
     （1px 描边 + 左侧强调条 + 深色底 + 圆角 + 内边距），必须逐项抵消，
     否则"不要框"会失效 —— 实测过 logoBorderTop 一直是 1px。 */
  border: 0;
  border-left: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  overflow: hidden;
  white-space: pre;
  font-variant-ligatures: none;
  letter-spacing: 0;
  /* 字符是要发光的东西，给一点点辉光就够，太重会糊成一团。
     半径必须用 em 跟着字号走：手机 390px 下字号只有 2.5px，
     固定 9px 的光晕是字高的 3.6 倍，整幅画会糊成一坨绿色。 */
  text-shadow: 0 0 0.9em color-mix(in srgb, var(--c-green) 42%, transparent);
  will-change: contents;
  /* 拖动转它的时候别让浏览器选中字符 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  /* 字号由 motion.js 的 fitLogo() 按容器宽度反推，现在窄屏也会缩到正好放下，
     所以不再需要横向滚动。滚动条照样藏掉 —— 万一某次字号算大了，
     露出来的滚动条轨道会横在画面下方像一条多余的横线。
     三条是为了覆盖 Firefox / 旧 Edge / Chrome+Safari。 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.logo3d::-webkit-scrollbar { display: none; }

.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 20px 40px;
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: 12px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.footer .links { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.footer a { color: var(--c-muted); border: 0; }
.footer a:hover { color: var(--c-green); background: none; }
/* 备案号：按国内要求放在页脚，指向工信部查询站 */
.footer .icp {
  color: var(--c-muted);
  font-size: 12px;
  opacity: 0.85;
  border: 0;
}
.footer .icp:hover { color: var(--c-green); background: none; }

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

@media (max-width: 720px) {
  body { font-size: 14px; }
  .wrap { padding: 0 12px 60px; }
  .term-body { padding: 16px 14px 4px; }
  /* 手机档位的画布只有 130×24（见 logo3d.js 的 useProfile），但每帧仍要重绘
     3120 个字形；光晕是逐字形的模糊，成本随字形数走。窄屏把半径和浓度都砍半 ——
     看上去还发光，重绘量降一个档。 */
  .logo3d {
    text-shadow: 0 0 0.45em color-mix(in srgb, var(--c-green) 30%, transparent);
  }
  .topbar { padding: 8px 12px; font-size: 12px; gap: 10px; }
  .topbar nav { gap: 12px; margin-left: 0; width: 100%; }
  .cmdlist .row { flex-direction: column; gap: 0; }
  .cmdlist .row .k { min-width: 0; }
  .card .card-meta { margin-left: 0; width: 100%; }

  /* 终端标题栏：窄屏隐藏快捷键提示，避免逐字竖排换行 */
  .term-bar .spacer,
  .term-bar kbd { display: none; }
  .term-bar { flex-wrap: nowrap; }
  .term-bar .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .term-bar .title::after { content: none; }
}

/* 无障碍：动效偏好由 motion.css 统一处理 */

/* 选中文本 */
::selection {
  background: var(--c-green);
  color: var(--c-bg);
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: var(--c-line);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-green-dim); }

/* 打印 */
@media print {
  body::before, body::after, .topbar, .prompt-line, .footer { display: none !important; }
  body { background: #fff; color: #000; }
  .term { border: 0; box-shadow: none; }
}