/* ============================================================
   Hyper's Blog — style.css
   机能霓虹配色：青 / 绿 / 粉 / 琥珀，简约而不简单
   ============================================================ */

@font-face {
  font-family: "Win95";
  src: url("../fonts/w95fa.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("../fonts/ms_sans_serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("../fonts/ms_sans_serif_bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0a0c11;
  --panel: rgba(12, 16, 22, .55);
  --border: #1c2430;
  --fg: #d3d9e2;
  --dim: #5f6a79;
  --accent: #3ddce8;    /* 青：主色 */
  --accent-2: #ff5c8a;  /* 粉：点缀 */
  --accent-3: #6ef0a0;  /* 绿：终端提示符、行内代码 */
  --accent-dim: #173f47;
  --glow: rgba(61, 220, 232, .35);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  --terminal-font-size: 11px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  width: 100%; max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
::selection { background: var(--accent); color: var(--bg); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #232c3a; border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }

a { color: var(--accent); }
.accent { color: var(--accent); }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 8px 12px; color: var(--bg); background: var(--accent);
  text-decoration: none; transform: translateY(-160%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
.noscript {
  position: fixed; inset: auto 16px 16px; z-index: 50;
  padding: 12px 16px; border: 1px solid var(--accent-2);
  background: var(--bg); color: var(--fg);
}

/* 键盘焦点可见框（可访问性） */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 2px;
}
.term-input:focus-visible { outline: none; }

/* ---------- 背景层 ---------- */
#ascii-bg { position: fixed; inset: 0; z-index: 0; }
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(4, 5, 8, .45) 100%);
}

/* ---------- 布局：tmux 双窗格 ---------- */
.page { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 24px; }
.page.narrow { max-width: 780px; }
.layout {
  display: grid; grid-template-columns: var(--pane-w, 400px) 6px 1fr;
  max-width: 1440px;
}
.pane-left {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  padding: 112px 24px 28px;
  display: flex; flex-direction: column;
  /* 毛玻璃立柱：桌面 → 玻璃 → 内容 */
  background: rgba(11, 14, 19, .52);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* 会话区内置滚动，窗格永不超高 */
/* 左下角迷你关于 */

.pane-right { padding: 112px 0 0 34px; max-width: 900px; }
.pane-right .section:first-of-type { padding-top: 0; }

.pane-divider {
  position: sticky; top: 0; align-self: start; height: 100vh;
  cursor: col-resize;
  background: linear-gradient(90deg, transparent 2px, var(--border) 2px, var(--border) 3px, transparent 3px);
  transition: background .2s;
}
.pane-divider:hover {
  background: linear-gradient(90deg, transparent 2px, var(--accent-dim) 2px, var(--accent-dim) 3px, transparent 3px);
}
@media (max-width: 1024px) {
  .layout { display: block; }
  .pane-divider { display: none; }
  .pane-left { position: static; height: auto; overflow: visible; padding: 112px 0 0; }
  .pane-right { padding: 0; max-width: none; }
}

/* ---------- 导航 ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
  width: min(1080px, calc(100% - 28px));
  border: 1px solid var(--border); border-radius: 0;
  background: rgba(10, 12, 17, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
  overflow: hidden;
}
.nav-inner { padding: 11px 18px; display: flex; justify-content: space-between; align-items: center; }
.logo { color: var(--fg); text-decoration: none; font-weight: 700; letter-spacing: .5px; }
.nav-dots { display: flex; gap: 8px; align-items: center; margin-right: 4px; }
.nav-title { color: var(--dim); font-size: 12px; margin-left: 10px; opacity: .7; }


.nav-links { display: flex; align-items: baseline; gap: 4px; }
.nav-links a { color: var(--dim); text-decoration: none; padding: 4px 9px; font-size: 14px; transition: color .2s; }
.nav-links a::before { content: "["; margin-right: 2px; color: transparent; transition: color .2s; }
.nav-links a::after { content: "]"; margin-left: 2px; color: transparent; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links a:hover::before, .nav-links a:hover::after,
.nav-links a.active::before, .nav-links a.active::after { color: #6e2a42; }
.clock { margin-left: 12px; color: var(--dim); font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
@media (max-width: 1150px) { .nav-title { display: none; } }
@media (max-width: 900px) { .clock { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; padding: 0 0 40px; }
/* Hero 铭牌：双线边框 + 挂签 */



.cursor-blink.off { opacity: 0; }



/* 开放终端会话：无窗框，hairline 分隔 */



/* ---------- 章节进度点 ---------- */
.dots {
  position: fixed;
  right: max(1px, calc((100vw - 1440px) / 2 + 1px));
  top: calc(50% + 30px);
  transform: translateY(-50%); z-index: 9;
  display: flex; flex-direction: column; gap: 0;
}
.dots a {
  position: relative; display: grid; place-items: center;
  width: 24px; height: 16px;
  text-decoration: none;
}
.dots a::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim); opacity: .45;
  transition: width .18s, height .18s, opacity .18s, background .18s, box-shadow .18s;
}
.dots a.active::before {
  width: 7px; height: 7px;
  background: var(--accent); opacity: 1;
  box-shadow: 0 0 10px var(--glow);
}
.dots a:hover::before { opacity: 1; }
.dots a::after {
  content: attr(data-label); position: absolute; right: 27px; top: 50%;
  transform: translateY(-50%); color: var(--dim); font-size: 11px;
  white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.dots a:hover::after { opacity: 1; }
@media (max-width: 1100px) { .dots { display: none; } }

/* ---------- 俄罗斯方块（Canvas 像素渲染） ---------- */
.tetris-cv { display: block; border: 1px solid var(--border); margin: 8px 0 4px; image-rendering: pixelated; }
.tetris .line { line-height: 1.15; }
.tc { color: #3ddce8; }
.ta { color: #ffc25c; }
.tp { color: #ff5c8a; }
.tg { color: #6ef0a0; }
.tr { color: #ff6b6b; }
.tb { color: #5c9dff; }
.to { color: #ff9f5c; }
.tet-e { color: rgba(255, 255, 255, .05); }

/* ---------- 贪吃蛇（Canvas 像素渲染） ---------- */
.snake-game {
  width: min(332px, 100%);
  margin: 9px 0 5px;
  font-family: var(--mono);
}
.snake-game.is-finished { opacity: .72; }
.snake-frame {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0a0d12;
}
.snake-cv {
  display: block;
  width: 100%; height: auto;
  image-rendering: pixelated;
  touch-action: none;
}
.snake-status {
  min-width: 0;
  display: flex; align-items: baseline; gap: 13px;
  margin-top: 5px;
  color: var(--dim);
  font: 8px/1.35 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.snake-status span { min-width: 0; white-space: nowrap; }
.snake-status strong {
  margin-left: 3px;
  color: var(--fg);
  font: 700 9px/1.35 var(--mono);
  letter-spacing: .03em;
}
.snake-help {
  margin: 2px 0 0;
  color: var(--dim);
  font: 9px/1.5 var(--mono);
}
.snake-controls button {
  border: 1px solid var(--border);
  background: rgba(12, 16, 22, .88);
  color: var(--dim);
  font-family: var(--mono);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.snake-controls button:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(61, 220, 232, .045);
}
.snake-controls button:disabled {
  cursor: not-allowed;
  opacity: .35;
}
.snake-controls {
  width: 138px;
  display: none;
  grid-template-columns: repeat(3, 42px);
  grid-template-rows: repeat(3, 42px);
  gap: 6px;
  margin: 10px auto 2px;
}
.snake-controls button {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  padding: 0;
}
.snake-controls button span {
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("../img/icons/chevron-up.svg") center / contain no-repeat;
  mask: url("../img/icons/chevron-up.svg") center / contain no-repeat;
}
.snake-control-up { grid-column: 2; grid-row: 1; }
.snake-control-left { grid-column: 1; grid-row: 2; }
.snake-control-down { grid-column: 2; grid-row: 3; }
.snake-control-right { grid-column: 3; grid-row: 2; }
.snake-control-left span { transform: rotate(-90deg); }
.snake-control-down span { transform: rotate(180deg); }
.snake-control-right span { transform: rotate(90deg); }
.snake-touch-quit {
  display: none;
  margin: 5px auto 0;
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: var(--dim);
  font: 8px/1.35 var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
}
.snake-touch-quit:hover { color: var(--accent); }

@media (hover: none), (pointer: coarse), (max-width: 640px) {
  .snake-controls { display: grid; }
  .snake-touch-quit { display: block; }
}



/* ---------- 终端窗口（红绿灯保留圆形） ---------- */
.dot { width: 11px; height: 11px; border-radius: 50%; background: #232c3a; }
.dot:nth-child(1) { background: #ff5f57; }
.dot:nth-child(2) { background: #febc2e; }
.dot:nth-child(3) { background: #28c840; }
.term-title { margin-left: 6px; color: var(--dim); font-size: 12px; }
.term-body { padding: 18px 20px; font-size: var(--terminal-font-size); min-height: 208px; max-height: 340px; overflow-y: auto; cursor: text; }
.term-body .line { white-space: pre-wrap; word-break: break-word; }
.prompt { color: var(--accent-3); }
.term-dim { color: var(--dim); }
.term-err { color: var(--accent-2); }
.term-input {
  background: none; border: 0; outline: 0; padding: 0;
  color: var(--fg); font: inherit; width: 26ch; caret-color: var(--accent);
}

/* ---------- ROOT//DUNGEON：与站点板块联动的终端地牢 ---------- */
.term-body.dungeon-running {
  overflow-y: auto;
  cursor: default;
  scrollbar-color: #26303d transparent;
}
.dungeon-game {
  width: min(100%, 440px); min-height: 100%;
  color: var(--fg);
  font: 10px/1.5 var(--mono);
  letter-spacing: .015em;
  animation: dungeon-mount .18s steps(3, end);
}
.hero:has(.term-body.dungeon-running) .term-inputbar { width: min(100%, 440px); }
.dungeon-game button { font-family: var(--mono); }
.dungeon-head {
  display: flex; align-items: center;
  padding: 0 0 7px;
}
.dungeon-head > strong {
  color: var(--accent);
  font-size: 17px; font-weight: 600; letter-spacing: .08em;
}
.dungeon-goal {
  margin: 0; padding: 0 0 10px;
  border-bottom: 1px solid #27313d;
  color: #9aa4b0; font-size: 10px;
}
.dungeon-goal span { padding: 0 5px; color: #ffc25c; }
.dungeon-hud {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(39, 49, 61, .72);
  color: var(--dim);
  font: 10px/1.3 var(--mono);
}
.dungeon-hud span {
  min-width: 0; white-space: nowrap;
  text-align: center;
}
.dungeon-hud b {
  margin-left: 4px; color: var(--accent-3);
  font-size: 11px; font-weight: 600;
}
.dungeon-hud span:nth-child(2) b { color: var(--accent); }
.dungeon-hud span:nth-child(3) b { color: #ffc25c; }
.dungeon-map {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px;
  padding: 12px 0;
  border-bottom: 1px solid #27313d;
}
.dungeon-map-lines {
  position: absolute; inset: 37px 13% 36px; z-index: -1;
  pointer-events: none;
}
.dungeon-map-lines::before,
.dungeon-map-lines::after {
  content: ""; position: absolute; opacity: .72;
}
.dungeon-map-lines::before {
  left: 0; right: 0; top: 50%;
  border-top: 1px solid #303a47;
  box-shadow: 0 -58px 0 #303a47, 0 58px 0 #303a47;
}
.dungeon-map-lines::after {
  top: 0; bottom: 0; left: 50%;
  border-left: 1px solid #303a47;
  box-shadow: -116px 0 0 #303a47, 116px 0 0 #303a47;
}
.dungeon-node {
  position: relative; z-index: 1;
  min-width: 0; height: 50px; padding: 5px 3px;
  display: grid; align-content: center; justify-items: center; gap: 2px;
  border: 1px solid #26303b; border-radius: 0;
  background: #0a0d12; color: #505c69;
  cursor: default;
  transition: color .14s, border-color .14s, background .14s, box-shadow .14s;
}
.dungeon-node strong {
  max-width: 100%; overflow: hidden;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-overflow: ellipsis; white-space: nowrap;
}
.dungeon-node span { color: #46515f; font-size: 7px; letter-spacing: .12em; }
.dungeon-node:disabled { opacity: 1; }
.dungeon-node.is-adjacent { cursor: pointer; }
.dungeon-node.is-visited {
  color: var(--accent-3);
  border-color: rgba(110, 240, 160, .45);
}
.dungeon-node.is-cleared {
  border-style: dashed;
  background: rgba(110, 240, 160, .02);
}
.dungeon-node.is-current {
  color: var(--accent);
  border: 1px solid var(--accent);
  background: rgba(61, 220, 232, .04);
  box-shadow: inset 0 0 0 2px #0a0d12, inset 0 0 0 3px var(--accent-dim);
}
.dungeon-node.is-current span { color: var(--accent); }
.dungeon-node.is-locked {
  color: #a98239;
  border-color: rgba(255, 194, 92, .68);
  border-style: dashed;
}
.dungeon-node.is-locked strong::after {
  content: " ◇"; color: #ffc25c; font-size: 8px;
}
.dungeon-node.is-adjacent:hover,
.dungeon-node.is-adjacent {
  color: #c8f8fa; border-color: rgba(61, 220, 232, .72);
  background: rgba(61, 220, 232, .035);
  box-shadow: 0 0 11px rgba(61, 220, 232, .07);
}
.dungeon-room { padding-top: 11px; }
.dungeon-room-head {
  min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dungeon-room-head strong {
  min-width: 0; overflow: hidden;
  color: var(--accent); font: 600 12px/1.35 var(--mono);
  letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap;
}
.dungeon-room-head span {
  flex: 0 0 auto; color: var(--dim);
  font: 9px/1.35 var(--mono);
}
.dungeon-room-copy {
  min-height: 24px; margin: 5px 0 8px;
  color: #929ca8; font: 10px/1.55 var(--mono);
}
.dungeon-encounter {
  min-width: 0; padding: 8px 0;
  display: flex; align-items: center; gap: 5px;
  border-top: 1px solid rgba(39, 49, 61, .7);
  border-bottom: 1px solid rgba(39, 49, 61, .7);
}
.dungeon-encounter[hidden] { display: none; }
.dungeon-encounter > span { flex: 0 0 auto; color: var(--dim); font-size: 9px; }
.dungeon-encounter strong {
  min-width: 0; overflow: hidden;
  color: var(--accent-2); font-size: 10px; font-weight: 600;
  text-overflow: ellipsis; white-space: nowrap;
}
.dungeon-encounter code {
  flex: 0 0 auto; margin-left: auto; overflow: hidden;
  color: var(--accent-2); font: 8px/1 var(--mono);
  letter-spacing: .1em; white-space: nowrap;
}
.dungeon-actions {
  margin-top: 8px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.dungeon-actions[hidden] { display: none; }
.dungeon-actions button {
  min-width: 0; height: 38px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid #35414f; border-radius: 0;
  background: rgba(12, 16, 22, .82); color: var(--fg);
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.dungeon-actions button span { color: var(--dim); font-size: 9px; }
.dungeon-actions button strong {
  overflow: hidden;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-overflow: ellipsis; white-space: nowrap;
}
.dungeon-actions button:hover,
.dungeon-actions button:focus-visible {
  color: var(--accent); border-color: var(--accent-dim);
  background: rgba(61, 220, 232, .045);
}
.dungeon-actions button:disabled {
  opacity: .34; cursor: not-allowed;
}
.dungeon-guide {
  margin-top: 9px; padding: 9px 10px;
  display: grid; gap: 4px;
  border: 1px solid #2d3946;
  color: #a6b0bb; font: 9.5px/1.5 var(--mono);
}
.dungeon-guide[hidden] { display: none; }
.dungeon-guide strong {
  margin-bottom: 1px; color: var(--accent);
  font-size: 10px; font-weight: 500;
}
.dungeon-log {
  min-height: 42px; margin-top: 8px; padding: 7px 0;
  display: grid; align-content: start; gap: 3px;
  border-top: 1px solid #27313d;
  border-bottom: 1px solid #27313d;
}
.dungeon-log-line {
  min-width: 0;
  color: #8c97a3; font: 9px/1.4 var(--mono);
}
.dungeon-log-line span {
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.dungeon-log-line.is-danger span { color: var(--accent-2); }
.dungeon-log-line.is-success span { color: var(--accent-3); }
.dungeon-log-line.is-amber span { color: #ffc25c; }
.dungeon-log-line.is-command span,
.dungeon-log-line.is-muted span { color: var(--dim); }
.dungeon-help {
  margin: 5px 0 0; color: var(--dim);
  font: 8.5px/1.45 var(--mono);
}
.dungeon-inputbar .prompt {
  flex: 0 0 auto; color: var(--accent);
  font-size: 10px; letter-spacing: .02em;
}
.dungeon-inputbar .term-input { min-width: 0; width: 100%; }

.section.dungeon-linked {
  position: relative;
  box-shadow: inset 1px 0 var(--accent);
  animation: dungeon-section-link .42s steps(3, end);
}
.section.dungeon-linked .sec-title::after { background: var(--accent-dim); }
.dungeon-room-marker {
  position: absolute; top: 70px; right: 0; z-index: 2;
  color: var(--accent);
  font: 7px/1 var(--mono); letter-spacing: .12em;
  pointer-events: none;
}

@keyframes dungeon-mount {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@keyframes dungeon-section-link {
  0%, 45% { box-shadow: inset 3px 0 var(--accent); }
  46%, 100% { box-shadow: inset 1px 0 var(--accent); }
}

@media (hover: none), (pointer: coarse), (max-width: 640px) {
  .dungeon-game { font-size: 10px; }
  .dungeon-map { gap: 6px; }
  .dungeon-map-lines::after { box-shadow: -88px 0 0 #303a47, 88px 0 0 #303a47; }
  .dungeon-node { height: 48px; }
  .dungeon-actions button { min-height: 38px; }
  .dungeon-room-marker { top: 68px; right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .dungeon-game,
  .section.dungeon-linked { animation: none; }
  .dungeon-node,
  .dungeon-actions button { transition: none; }
}

/* ---------- 板块 ---------- */
.section { padding: 64px 0 24px; scroll-margin-top: 96px; }
.sec-title { font-size: 25px; font-weight: 700; display: flex; align-items: center; }
.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--border); margin-left: 20px; }
.sec-title .accent { margin-right: 12px; font-weight: 400; color: var(--accent-2); }
.sec-no { color: var(--dim); font-size: 13px; font-weight: 400; margin-right: 12px; opacity: .7; }
.sec-en { color: var(--dim); font-size: 11px; font-weight: 400; letter-spacing: 3px; margin-left: 14px; opacity: .55; }
/* 板块专属 ## 色 */
#essays .sec-title .accent { color: var(--accent); }
#thoughts .sec-title .accent { color: var(--accent-3); }
#projects .sec-title .accent { color: var(--accent-2); }
#shelf .sec-title .accent { color: #ffc25c; }
#films .sec-title .accent { color: #5c9dff; }
#music .sec-title .accent { color: #b48cff; }
#games .sec-title .accent { color: #ff9f5c; }
.sec-desc { color: var(--dim); font-size: 13px; margin: 6px 0 32px; }
.sec-desc::before { content: '$ '; color: var(--accent-3); }

/* 漫谈 */
.essay-list { display: flex; flex-direction: column; gap: 14px; }
.essay-card {
  position: relative;
  border: 1px solid var(--border); border-radius: 0;
  background: var(--panel);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  padding: 20px 22px; cursor: pointer;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.essay-card:hover {
  border-color: var(--accent-dim); transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(61, 220, 232, .06);
}
/* 悬停时亮起的对角 */
.essay-card::before, .essay-card::after,
.project-card::before, .project-card::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.essay-card::before, .project-card::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.essay-card::after, .project-card::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.essay-card:hover::before, .essay-card:hover::after,
.project-card:hover::before, .project-card:hover::after { opacity: 1; }
.essay-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.essay-top time { color: var(--dim); font-size: 12.5px; display: inline-flex; align-items: center; }
.essay-arrow { color: var(--dim); transition: color .25s, transform .25s; }
.essay-card:hover .essay-arrow { color: var(--accent-2); transform: translateX(4px); }
.essay-idx {
  position: absolute; right: 18px; bottom: 8px;
  font-size: 36px; font-weight: 700; line-height: 1;
  color: rgba(255, 255, 255, .045); pointer-events: none;
}
.essay-title { font-size: 18px; transition: color .2s, text-shadow .25s; }
.essay-card:hover .essay-title { color: var(--accent); text-shadow: 0 0 18px var(--glow); }
.essay-summary { color: var(--dim); font-size: 14px; margin-top: 6px; }
/* 已读标记：小徽章，与文字基线自然对齐 */
.read-mark {
  color: var(--accent-3); font-size: 10px;
  margin-left: 10px; padding: 1px 5px;
  border: 1px solid rgba(110, 240, 160, .35);
  background: rgba(110, 240, 160, .08);
}
.essay-tags { margin-top: 12px; }
.essay-tags span {
  display: inline-block; color: var(--dim); font-size: 11px; margin-right: 8px;
  border: 1px solid var(--border); border-radius: 0; padding: 1px 9px;
  opacity: .8; transition: color .2s, border-color .2s;
}
.essay-card:hover .essay-tags span { color: var(--accent); border-color: var(--accent-dim); }

/* 随想：便签墙 —— 可自由拖动的便签贴 */
.notes-board {
  position: relative; min-height: 480px;
  border: 1px solid var(--border); border-radius: 0;
  background-color: rgba(12, 16, 22, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .045) 1px, transparent 1.6px);
  background-size: 22px 22px;
  overflow: hidden;
}
.thought {
  position: absolute; width: 214px;
  border: 1px solid var(--border); border-radius: 0;
  background: rgba(14, 18, 24, .82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 16px 16px 12px; font-size: 13px;
  transform: rotate(var(--rot, 0deg));
  cursor: grab; touch-action: none; user-select: none;
  transition: left .3s, top .3s, transform .25s, box-shadow .25s, border-color .25s;
}
.thought:hover {
  transform: rotate(0deg);
  border-color: var(--accent-dim);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(61, 220, 232, .05);
}
.thought.dragging {
  cursor: grabbing; transform: rotate(0deg) scale(1.04);
  transition: transform .12s, box-shadow .2s;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}
/* 胶带 */
.thought::before {
  content: ''; position: absolute; top: -9px; left: 50%;
  width: 66px; height: 17px; border-radius: 0;
  transform: translateX(-50%) rotate(-1.5deg); opacity: .5;
}
.thought.t-cyan::before { background: rgba(61, 220, 232, .35); }
.thought.t-green::before { background: rgba(110, 240, 160, .35); }
.thought.t-pink::before { background: rgba(255, 92, 138, .35); }
.thought.t-amber::before { background: rgba(255, 194, 92, .35); }
.thought time { display: block; color: var(--accent); opacity: .5; font-size: 11px; margin-bottom: 6px; }
.thought-text { line-height: 1.65; }
.thought-toggle { position: absolute; top: 10px; right: 12px; color: var(--dim); font-size: 12px; user-select: none; transition: color .2s; }
.thought.expanded .thought-toggle { color: var(--accent-2); }
.thought-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.thought.expanded .thought-body { grid-template-rows: 1fr; }
.thought-content { overflow: hidden; min-height: 0; }
.thought-md { padding-top: 6px; font-size: 12.5px; }
.thought-md p { margin: 8px 0; color: #a8b0bc; }
.thought-md ul, .thought-md ol { margin-left: 16px; }

/* 造物 */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.project-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--border); border-radius: 0;
  background: var(--panel);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  padding: 20px 22px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.project-card:hover {
  border-color: var(--accent-dim); transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(61, 220, 232, .06);
}
/* 语言条：卡片顶边（天然对齐） */
.lang-bar { display: flex; height: 3px; margin: -20px -22px 14px; overflow: hidden; }
.lang-bar i { display: block; }
.project-top { display: flex; justify-content: space-between; align-items: baseline; }
.project-name { color: var(--accent); font-weight: 700; }
.project-arrow { color: var(--dim); font-size: 13px; transition: color .25s, transform .25s; }
.project-card:hover .project-arrow { color: var(--accent-2); transform: translate(2px, -2px); }
.project-tagsline { color: var(--dim); font-size: 11px; margin-top: 3px; }
.project-tagsline span { margin-right: 8px; }
.project-desc { color: var(--dim); font-size: 13.5px; margin: 8px 0 0; }
.project-foot {
  margin-top: auto; padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.lang-names {
  color: var(--dim); font-size: 11px; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.lang-names span { margin-right: 10px; }
.lang-names i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.project-tools { display: flex; align-items: center; gap: 10px; }
.copy-btn {
  background: none; border: 1px solid var(--border); border-radius: 0;
  color: var(--dim); font-family: var(--mono); font-size: 11px; padding: 2px 7px;
  cursor: pointer; flex-shrink: 0; transition: color .2s, border-color .2s;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.copy-btn.ok { color: var(--accent-3); border-color: var(--accent-3); }

/* 关于：键值表（左下角迷你关于复用） */
.about-info p { margin: 5px 0; font-size: 14px; }
.about-info .k {
  display: inline-block; width: 76px; flex-shrink: 0;
  color: var(--accent-3); font-size: 13px;
}
.about-info .k::after { content: ' ::'; color: var(--dim); }

/* ---------- 页脚 ---------- */
footer {
  margin-top: 90px; padding: 24px 0 42px;
  border-top: 1px solid var(--border);
  color: var(--dim); font-size: 12.5px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* ---------- 文章页 ---------- */
.post-main { padding: 130px 0 40px; }
.post {
  background: rgba(12, 16, 22, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  padding: 34px 40px 30px;
}
.post-head { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.post-head h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.3; }
.post-meta { color: var(--dim); font-size: 13px; margin-top: 12px; }
.post-tag { color: var(--accent); opacity: .7; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13.5px; }
.post-nav a { color: var(--dim); text-decoration: none; transition: color .2s; max-width: 48%; }
.post-nav a:hover { color: var(--accent); }
.post-nav .next { margin-left: auto; text-align: right; }
.post-nav a, .article p, .article li, .article blockquote, .refs-card li {
  overflow-wrap: anywhere;
}

/* ---------- 正文排版 ---------- */
.article h2, .article h3 { font-size: 19px; margin: 30px 0 12px; }
.article h3 { font-size: 16px; }
.article h2::before { content: '# '; color: var(--accent); }
.article h3::before { content: '## '; color: var(--accent-dim); }
.article p, .article li, .article blockquote {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.article p { margin: 14px 0; color: #b9c1cd; font-size: 15.5px; line-height: 1.9; }
/* 引文段：稍大 + 首字下沉（仅文章页） */
#post-article > p:first-of-type { font-size: 16.5px; color: #c9d1db; }
#post-article > p:first-of-type::first-letter {
  float: left; font-size: 3.1em; line-height: .82;
  padding: 6px 10px 0 0;
  color: var(--accent); font-weight: 700;
}
/* 图片与图注 */
.article figure { margin: 28px 0 34px; }
.article figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}
.article figcaption { color: var(--dim); font-size: 12px; line-height: 1.65; text-align: center; margin-top: 9px; }
/* 分隔线 */
.article hr { border: 0; margin: 30px 0; text-align: center; }
.article hr::after { content: '· · ·'; color: var(--accent-dim); letter-spacing: 12px; font-size: 14px; }
/* 完篇符 */
.endmark {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--dim); font-size: 13px; margin-top: 44px;
  opacity: .68;
}
.endmark::after {
  content: ''; flex: 0 0 auto;
  width: .55em; height: 1.05em;
  background: rgba(61, 220, 232, .52);
  animation: endmark-caret 1s steps(1, end) infinite;
}
@keyframes endmark-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .06; }
}
/* 点赞按钮 */
.like-btn {
  display: block; margin: 26px auto 0; padding: 6px 18px;
  background: none; border: 1px solid var(--border);
  color: var(--dim); font-family: var(--mono); font-size: 13px;
  cursor: pointer; transition: color .2s, border-color .2s, transform .15s;
}
.like-btn:hover { color: var(--accent-2); border-color: var(--accent-2); }
.like-btn .heart { margin-right: 6px; }
.like-btn.liked { color: var(--accent-2); border-color: var(--accent-2); background: rgba(255, 92, 138, .08); }
.like-btn.liked .heart { text-shadow: 0 0 12px rgba(255, 92, 138, .5); }
.like-btn.pop { animation: likepop .25s; }
@keyframes likepop { 50% { transform: scale(1.12); } }
/* 正文段落首行缩进（引文段除外，仅文章页） */
#post-article > p:not(:first-of-type) { text-indent: 2em; }
/* 上标引用 */
.cite { line-height: 0; }
.cite a { color: var(--accent); text-decoration: none; font-size: .8em; }
.article pre {
  position: relative;
  background: rgba(14, 18, 24, .65);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: 0; padding: 14px 16px; margin: 16px 0;
  overflow-x: auto; font-size: 13px; line-height: 1.6;
}
.article pre[data-lang]::after {
  content: attr(data-lang); position: absolute; top: 7px; right: 12px;
  color: var(--dim); font-size: 10px; letter-spacing: 1px; opacity: .7;
}
.article code { font-family: var(--mono); }
.article p code, .article li code, .article blockquote code {
  background: #14202a; padding: 2px 6px; border-radius: 0;
  font-size: .9em; color: var(--accent-3);
}
.article blockquote { border-left: 2px solid var(--accent-dim); margin: 16px 0; padding: 4px 16px; color: var(--dim); }
.article ul, .article ol { margin: 14px 0 14px 22px; }
.article li { margin: 6px 0; }
.article a { text-decoration: none; border-bottom: 1px dashed var(--accent-dim); }
.article strong { color: var(--fg); }

/* LaTeX */
.math-display { margin: 20px 0; padding: 2px 0; overflow-x: auto; overflow-y: hidden; }
.katex { color: var(--fg); font-size: 1.05em; }
.katex-display { margin: 0; }
.math-raw { color: var(--accent-3); }

/* 交互图表 */
.chart-box {
  border: 1px solid var(--border); border-radius: 0;
  background: rgba(12, 16, 22, .6);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  padding: 16px; margin: 18px 0; height: 280px;
}
.chart-box canvas { width: 100% !important; height: 100% !important; }
.chart-error { color: var(--accent-2); font-size: 13px; }

/* 文章内互动：沿用正文的边框、底色和字号 */
.interactive-host { margin: 18px 0; }
.iw {
  overflow: hidden; border: 1px solid var(--border);
  background: rgba(12, 16, 22, .6);
  padding: 16px;
  box-shadow: none;
}
.iw-choices {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin-bottom: 14px;
}
.iw-choices button {
  min-width: 0; min-height: 38px; margin-left: -1px;
  border: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--dim);
  padding: 6px 8px; cursor: pointer;
  font: 12px/1.45 var(--mono);
}
.iw-choices button:first-child { margin-left: 0; }
.iw-choices button:hover { color: var(--fg); border-color: #2b3747; }
.iw-choices button[aria-pressed="true"] {
  position: relative; z-index: 1;
  color: var(--accent); border-color: var(--accent-dim);
  background: rgba(61, 220, 232, .055);
}
.iw-choices button:focus-visible {
  position: relative; z-index: 2;
  outline: 1px dashed var(--accent); outline-offset: 2px;
}
.iw-loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: stretch; gap: 5px;
}
.iw-loop-step {
  min-width: 0; border-left: 1px solid var(--accent-dim);
  padding: 9px 10px;
}
.iw-loop-step span {
  display: block; color: var(--dim);
  font: 10.5px/1.4 var(--mono);
}
.iw-loop-step strong {
  display: block; margin-top: 5px; color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 13px; font-weight: 600; line-height: 1.55;
}
.iw-loop-step:nth-of-type(2) strong { color: var(--accent); }
.iw-loop-arrow {
  align-self: center; color: var(--accent-dim);
  font: 15px/1 var(--mono); text-align: center;
}
.iw-prob-chart {
  display: grid; gap: 12px; padding: 2px 0 0;
}
.iw-prob-row > div:first-child {
  display: flex; justify-content: space-between; gap: 12px;
  color: var(--dim); font: 11px/1.5 var(--mono);
}
.iw-prob-row strong {
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.iw-prob-track {
  overflow: hidden; height: 6px; margin-top: 6px;
  background: #18202b;
}
.iw-prob-track i {
  display: block; width: 0; height: 100%;
  background: var(--accent); box-shadow: none;
  transition: width .16s ease-out;
}
.iw-prob-track.hot i {
  background: var(--accent-2); box-shadow: none;
}
.iw-caption {
  margin-top: 9px; color: var(--dim); opacity: .78;
  font: 10.5px/1.5 var(--mono);
}

/* 《信条》世界线调试器 */
.iw-tenet {
  padding: 0; overflow: visible;
  border: 0; background: transparent;
}
.tt-tabs {
  display: flex; gap: 22px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.tt-tabs::-webkit-scrollbar { display: none; }
.tt-tabs button {
  flex: 0 0 auto; min-height: 34px; padding: 0 2px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--dim);
  font: 11.5px/1.3 var(--mono); cursor: pointer;
  transition: color .18s ease, border-color .22s ease;
}
.tt-tabs button:hover { color: var(--fg); }
.tt-tabs button[aria-selected="true"] {
  color: var(--accent); border-bottom-color: var(--accent);
}
.tt-tabs button:focus-visible,
.tt-step-main:focus-visible {
  position: relative; z-index: 3;
  outline: 1px dashed var(--accent); outline-offset: 2px;
}
.tt-columns,
.tt-step-main {
  display: grid;
  grid-template-columns: 36px 104px minmax(0, 1fr) 18px;
  align-items: center; column-gap: 8px;
}
.tt-columns {
  padding: 11px 6px 7px;
  color: var(--dim); opacity: .65;
  font: 9px/1.2 var(--mono); letter-spacing: .3px;
}
.tt-route { border-top: 1px solid var(--border); }
.tt-step {
  position: relative; border-bottom: 1px solid var(--border);
  opacity: 1; transform: none;
  transition: opacity .24s ease, transform .24s ease;
  transition-delay: calc(var(--step, 0) * 18ms);
}
.tt-step::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: 2px; background: var(--accent);
  opacity: 0; transform: scaleY(.25); transform-origin: top;
  transition: opacity .2s ease, transform .28s cubic-bezier(.2, .75, .25, 1);
}
.tt-route.is-entering .tt-step {
  opacity: 0; transform: translateY(7px);
}
.tt-step.active::before { opacity: 1; transform: scaleY(1); }
.tt-step.is-inv::before { background: var(--accent-2); }
.tt-step.is-turn::before { background: #ffc25c; }
.tt-step.is-sync::before { background: #6ef0a0; }
.tt-step-main {
  width: 100%; min-height: 53px; padding: 9px 6px;
  border: 0; border-radius: 0; background: transparent;
  color: var(--fg); text-align: left; cursor: pointer;
  transition: background .2s ease;
}
.tt-step-main:hover { background: rgba(255, 255, 255, .025); }
.tt-step.active .tt-step-main { background: rgba(61, 220, 232, .035); }
.tt-step-index {
  color: var(--dim); opacity: .62;
  font: 10px/1.2 var(--mono);
}
.tt-step-when {
  display: flex; align-items: baseline; gap: 7px;
  color: var(--dim); font: 10.5px/1.4 var(--mono);
}
.tt-step-when b {
  color: var(--accent); font-size: 9.5px; font-weight: 400;
}
.tt-step.is-inv .tt-step-when b { color: var(--accent-2); }
.tt-step.is-turn .tt-step-when b { color: #ffc25c; }
.tt-step.is-sync .tt-step-when b { color: #6ef0a0; }
.tt-step-main > strong {
  min-width: 0; color: var(--fg);
  font-size: 13px; font-weight: 600; line-height: 1.45;
}
.tt-step.active .tt-step-main > strong { color: var(--accent); }
.tt-step.active.is-inv .tt-step-main > strong { color: var(--accent-2); }
.tt-step-main > i {
  color: var(--dim); font: 12px/1 var(--mono);
  font-style: normal; text-align: center;
  transition: color .18s ease, transform .28s cubic-bezier(.2, .75, .25, 1);
}
.tt-step.active .tt-step-main > i { color: var(--accent); transform: rotate(180deg); }
.tt-step-detail {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transform: translateY(-4px);
  transition: grid-template-rows .3s cubic-bezier(.2, .75, .25, 1),
              opacity .18s ease, transform .3s cubic-bezier(.2, .75, .25, 1);
}
.tt-step.active .tt-step-detail {
  grid-template-rows: 1fr; opacity: 1; transform: none;
}
.tt-step-detail-inner {
  min-height: 0; overflow: hidden;
  padding: 0 24px 0 162px;
  transition: padding-bottom .3s cubic-bezier(.2, .75, .25, 1);
}
.tt-step.active .tt-step-detail-inner { padding-bottom: 14px; }
.tt-step-detail-inner > p {
  margin: 0; color: #b9c1cd;
  font-size: 13px; line-height: 1.75;
}
.tt-step-detail-inner > small {
  display: block; margin-top: 7px;
  color: var(--dim); font-size: 11px; line-height: 1.6;
}
.tt-step-detail-inner > small span {
  margin-right: 7px; color: var(--accent-dim);
  font-family: var(--mono);
}

@media (max-width: 640px) {
  .tt-tabs { gap: 18px; }
  .tt-columns,
  .tt-step-main {
    grid-template-columns: 28px 88px minmax(0, 1fr) 16px;
    column-gap: 6px;
  }
  .tt-step-when { flex-wrap: wrap; gap: 2px 6px; }
  .tt-step-detail-inner { padding-left: 128px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-tabs button,
  .tt-step,
  .tt-step::before,
  .tt-step-main,
  .tt-step-main > i,
  .tt-step-detail,
  .tt-step-detail-inner {
    transition: none;
  }
}

/* ---------- 滚动入场动画 ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 阅读进度条（文章页） ---------- */
.progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent); opacity: .9;
  transition: width .12s linear;
}

/* ---------- 命令面板（⌘K） ---------- */
.pk {
  position: fixed; inset: 0; z-index: 40;
  display: flex; justify-content: center; align-items: flex-start; padding-top: 16vh;
  background: rgba(4, 5, 8, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.pk.open { opacity: 1; pointer-events: auto; }
.pk-panel {
  width: min(560px, 92vw); overflow: hidden;
  border: 1px solid var(--accent-dim); border-radius: 0;
  background: rgba(12, 15, 20, .85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 50px rgba(61, 220, 232, .08), 0 24px 70px rgba(0, 0, 0, .6);
  transform: translateY(8px); transition: transform .18s;
}
.pk.open .pk-panel { transform: none; }
.pk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pk-input { flex: 1; background: none; border: 0; outline: 0; color: var(--fg); font-family: var(--mono); font-size: 15px; caret-color: var(--accent); }
.pk-input::placeholder { color: var(--dim); }
.pk-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.pk-item {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 12px; border-radius: 0; cursor: pointer;
  border-left: 2px solid transparent;
}
.pk-item.sel { background: rgba(61, 220, 232, .08); border-left-color: var(--accent); }
.pk-kind { color: var(--accent); font-size: 11px; opacity: .65; flex-shrink: 0; }
.pk-label { color: var(--fg); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-hint { margin-left: auto; color: var(--dim); font-size: 11.5px; flex-shrink: 0; }
.pk-empty { padding: 18px; color: var(--dim); font-size: 13px; text-align: center; }

/* ---------- 光影：电影票根卡 ---------- */
.film-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.film-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.film-card:hover {
  border-color: var(--accent-dim); transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(61, 220, 232, .06);
}
.film-card.ticket { display: flex; padding: 0; }
.ticket-poster {
  position: relative; flex-shrink: 0;
  width: clamp(152px, 30%, 194px);
  overflow: hidden; background: #080b10;
}
.ticket-poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; transition: transform .25s;
}
.film-card.ticket:hover .ticket-poster img { transform: scale(1.05); }
.ticket-css-poster { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 10px; }
.tcp-stars { color: #ffc25c; font-size: 10px; letter-spacing: 2px; }
.tcp-year { margin-top: auto; font-size: 32px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .1); }
.tcp-title { font-size: 15px; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.ticket-css-poster.g1 { background: radial-gradient(90% 130% at 15% 0%, rgba(110, 240, 160, .26), transparent 62%), radial-gradient(80% 110% at 95% 100%, rgba(61, 220, 232, .2), transparent 58%), #0b0e13; }
.ticket-css-poster.g2 { background: radial-gradient(90% 130% at 15% 0%, rgba(61, 220, 232, .26), transparent 62%), radial-gradient(80% 110% at 95% 100%, rgba(255, 92, 138, .18), transparent 58%), #0b0e13; }
.ticket-css-poster.g3 { background: radial-gradient(90% 130% at 15% 0%, rgba(61, 220, 232, .24), transparent 62%), radial-gradient(80% 110% at 95% 100%, rgba(255, 194, 92, .2), transparent 58%), #0b0e13; }
.ticket-css-poster.g4 { background: radial-gradient(90% 130% at 15% 0%, rgba(255, 194, 92, .26), transparent 62%), radial-gradient(80% 110% at 95% 100%, rgba(61, 220, 232, .18), transparent 58%), #0b0e13; }
.ticket-css-poster.g5 { background: radial-gradient(90% 130% at 15% 0%, rgba(255, 92, 138, .26), transparent 62%), radial-gradient(80% 110% at 95% 100%, rgba(255, 194, 92, .2), transparent 58%), #0b0e13; }
.ticket-css-poster.g6 { background: radial-gradient(90% 130% at 15% 0%, rgba(110, 240, 160, .24), transparent 62%), radial-gradient(80% 110% at 95% 100%, rgba(255, 92, 138, .18), transparent 58%), #0b0e13; }
.ticket-body { flex: 1; min-width: 0; padding: 16px 18px; }
.ticket-stub {
  position: relative;
  flex-shrink: 0; width: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 0;
  border-left: 1px dashed var(--accent-dim);
  color: var(--dim); font-size: 10px; letter-spacing: 3px;
  transition: transform .25s, border-color .25s;
}
/* 打孔缺口：直接锚在撕线上，上下各一 */
.ticket-stub::before, .ticket-stub::after {
  content: ''; position: absolute; left: -9px; z-index: 2;
  width: 16px; height: 8px;
  background: var(--bg);
}
.ticket-stub::before {
  top: 0; border-radius: 0 0 8px 8px;
  border: 1px solid var(--border); border-top: 0;
}
.ticket-stub::after {
  bottom: 0; border-radius: 8px 8px 0 0;
  border: 1px solid var(--border); border-bottom: 0;
}
.film-card.ticket:hover .ticket-stub { transform: translateX(2px); border-left-color: var(--accent-2); }
.stub-label { writing-mode: vertical-rl; }
.stub-stars { writing-mode: vertical-rl; color: #ffc25c; font-size: 11px; letter-spacing: 2px; }
.stub-barcode {
  width: 26px; height: 40px; opacity: .75;
  background: repeating-linear-gradient(90deg,
    var(--dim) 0 2px, transparent 2px 4px,
    var(--dim) 4px 7px, transparent 7px 9px,
    var(--dim) 9px 10px, transparent 10px 13px);
}
.stub-no { writing-mode: vertical-rl; font-size: 8px; letter-spacing: 1px; color: var(--dim); }
.ticket-show { display: flex; gap: 14px; color: var(--dim); font-size: 11.5px; margin-top: 8px; }
.ticket-show span::before { content: '▪'; color: var(--accent); margin-right: 5px; font-size: 9px; }
.film-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.film-title { font-size: 16px; font-weight: 700; transition: color .2s; }
.film-card:hover .film-title { color: var(--accent); }
.film-meta { color: var(--dim); font-size: 12px; margin-top: 4px; }
.film-sub { color: var(--dim); font-size: 12px; margin-top: 2px; }
.film-review { color: #b9c1cd; font-size: 13.5px; margin-top: 12px; }
.film-review::before {
  content: '“'; color: var(--accent); font-size: 22px;
  line-height: 0; vertical-align: -7px; margin-right: 3px; opacity: .7;
}
.film-card.has-long { cursor: pointer; }
.film-review.clamp {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.film-more { margin-top: 12px; color: var(--accent); font-size: 12.5px; opacity: .85; }

/* 音乐信息（CoverFlow 详情复用） */
.music-info-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.music-index {
  margin-bottom: 4px; color: var(--accent-3);
  font-size: 10px; letter-spacing: .12em;
}
.music-title { font-size: 17px; font-weight: 700; line-height: 1.35; }
.music-meta { color: var(--dim); font-size: 12px; line-height: 1.5; margin-top: 4px; }
.music-rating { font-size: 10px; letter-spacing: 2px; color: #ffc25c; margin-top: 6px; }
.music-rating .r-off { color: var(--dim); opacity: .4; }
.music-note {
  max-width: 72ch; color: #b9c1cd;
  font-size: 12.5px; line-height: 1.65; margin-top: 9px;
}
.music-open {
  flex: 0 0 auto; margin-bottom: 2px;
  color: var(--accent); font-size: 10px; letter-spacing: .08em;
  text-decoration: none; border-bottom: 1px dashed var(--accent-dim);
}
.music-open:hover { color: var(--fg); border-bottom-color: var(--accent); }

/* ---------- 书架：单排书脊，悬停抽出并推动相邻书 ---------- */
.bookshelf-groups { display: block; }
.shelf-group { min-width: 0; }
.shelf-group-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 9px; color: var(--dim);
}
.shelf-group-head h3 {
  margin: 0; color: var(--fg); font-size: 12px; font-weight: 700;
  letter-spacing: .08em;
}
.shelf-group-head h3::before { content: '$ '; color: var(--accent); font-weight: 400; }
.shelf-group-head span { font-size: 10px; letter-spacing: .08em; }
.shelf-group-head--combined h3 {
  min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.shelf-category-name { color: var(--fg); }
.shelf-category-name small {
  color: var(--dim); font: 9px/1 var(--mono); letter-spacing: .04em;
}
.shelf-category-sep { color: #414a56; font-weight: 400; }
.shelf-total { flex: 0 0 auto; }
.shelf-shelf {
  min-width: 0; height: 168px;
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  padding: 14px 6px 0; overflow: hidden;
  border: 0; border-bottom: 1px solid #28303e;
  background: transparent;
  transition:
    height .38s cubic-bezier(.2, .75, .25, 1),
    gap .38s cubic-bezier(.2, .75, .25, 1),
    padding .38s cubic-bezier(.2, .75, .25, 1);
}
.book {
  position: relative; z-index: 1;
  flex: 1 1 28px; width: auto; min-width: 14px; max-width: 34px;
  height: var(--bh, 144px); padding: 6px 2px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 1px 1px 0 0;
  background-color: #343942;
  background-image: linear-gradient(90deg, rgba(255,255,255,.06), transparent 30%, rgba(0,0,0,.2));
  background-position: center; background-size: cover;
  color: rgba(241, 243, 245, .82);
  box-shadow: none;
  cursor: pointer; overflow: hidden;
  transform-origin: bottom center;
  transition:
    flex-basis .38s cubic-bezier(.2, .75, .25, 1),
    min-width .38s cubic-bezier(.2, .75, .25, 1),
    max-width .38s cubic-bezier(.2, .75, .25, 1),
    height .38s cubic-bezier(.2, .75, .25, 1),
    transform .22s cubic-bezier(.2, .75, .25, 1),
    filter .2s ease,
    opacity .2s ease,
    box-shadow .28s ease;
}
.book.is-category-start {
  margin-left: 6px;
  box-shadow: -5px 0 0 -4px #414a56;
}
.book.has-cover {
  background-image:
    linear-gradient(90deg, rgba(7,9,12,.25), rgba(7,9,12,.03) 45%, rgba(7,9,12,.32)),
    var(--book-cover);
}
.book-spine {
  position: relative; z-index: 2;
  min-height: 0; max-height: 100%; overflow: hidden;
  writing-mode: vertical-rl; text-orientation: upright;
  text-shadow: 0 1px 2px rgba(0,0,0,.78);
  transition: opacity .14s ease;
}
.book-spine-text {
  display: block; min-inline-size: 0; max-inline-size: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 8px/1.15 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  letter-spacing: .05em;
}
.shelf-shelf:not(.has-expanded) .book:hover,
.shelf-shelf:not(.has-expanded) .book:focus-visible {
  z-index: 3; outline: 0;
  transform: translateY(-8px);
  filter: brightness(1.12) saturate(.92);
}
.shelf-shelf.has-expanded {
  height: 168px; gap: 1px; padding-top: 10px;
}
.shelf-shelf.has-expanded .book {
  flex-grow: 1; flex-shrink: 1; flex-basis: 0;
  min-width: 3px; max-width: 17px;
  opacity: .72; filter: brightness(.78) saturate(.72);
  transform: none;
}
.shelf-shelf.has-expanded .book.is-category-start { margin-left: 4px; }
.shelf-shelf.has-expanded .book.is-expanded {
  z-index: 5;
  flex-grow: 0; flex-shrink: 0;
  flex-basis: min(360px, calc(100% - 102px));
  min-width: 0; max-width: 360px;
  height: 152px; padding: 0;
  opacity: 1; filter: none;
  box-shadow: inset 0 0 0 1px #343b44, 0 12px 28px rgba(0, 0, 0, .34);
}
.book::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: rgba(9, 12, 16, .97);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.book.is-expanded::before { opacity: 1; }
.book.is-expanded .book-spine { opacity: 0; }
.book-detail {
  position: absolute; inset: 10px; z-index: 2;
  min-width: 0; max-height: none;
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  align-items: center; gap: 14px;
  overflow: visible; opacity: 0; visibility: hidden; pointer-events: none;
  text-align: left; text-shadow: none;
  transform: translateY(6px);
  transition:
    opacity .17s ease,
    transform .28s cubic-bezier(.2, .75, .25, 1),
    visibility 0s linear .2s;
}
.book.is-expanded .book-detail {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: .1s, .06s, 0s;
}
.book-cover {
  display: block; width: 84px; aspect-ratio: 2 / 3; align-self: center;
  object-fit: cover; object-position: center;
  background: #171b20; border: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.book-cover-fallback {
  display: grid; place-items: center; box-sizing: border-box;
  padding: 8px; color: var(--dim); font-size: 9px;
  line-height: 1.5; text-align: center;
}
.book-copy {
  min-width: 0; display: block; align-self: center;
  writing-mode: horizontal-tb; text-orientation: mixed;
  white-space: normal; text-align: left; text-shadow: none;
}
.book-title,
.book-author,
.book-rating,
.book-note {
  min-width: 0; display: block;
  writing-mode: horizontal-tb; text-orientation: mixed;
  white-space: normal; text-align: left; text-shadow: none;
}
.book-title {
  color: var(--fg);
  font: 600 17px/1.35 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
.book-author { margin-top: 2px; color: #747e89; font: 8px/1.45 var(--mono); }
.book-rating { margin-top: 5px; font: 7px/1.4 var(--mono); letter-spacing: 1px; }
.book-rating .r-on { color: var(--accent); }
.book-rating .r-off { color: var(--dim); opacity: .4; }
.book-note {
  margin-top: 9px; overflow: visible;
  color: #b6bec7;
  font: 11px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.book.t-cyan { background-color: #303b40; }
.book.t-green { background-color: #354039; }
.book.t-pink { background-color: #40353b; }
.book.t-amber { background-color: #423d34; }

@media (max-width: 640px) {
  .shelf-group-head { margin-bottom: 7px; }
  .shelf-group-head--combined h3 { gap: 6px; }
  .shelf-category-name small { font-size: 8px; }
  .shelf-shelf { height: 158px; gap: 1px; padding: 12px 5px 0; }
  .book {
    flex-basis: 12px; min-width: 6px; max-width: 16px;
    height: min(var(--bh), 138px); padding-inline: 1px;
  }
  .book.is-category-start { margin-left: 3px; box-shadow: -3px 0 0 -2px #414a56; }
  .book-spine-text { font-size: 7px; }
  .shelf-shelf.has-expanded { height: 164px; gap: 0; padding: 9px 3px 0; }
  .shelf-shelf.has-expanded .book { min-width: 1px; max-width: 4px; }
  .shelf-shelf.has-expanded .book.is-category-start { margin-left: 2px; }
  .shelf-shelf.has-expanded .book.is-expanded {
    flex-basis: min(272px, calc(100% - 60px));
    max-width: 272px; height: 148px;
  }
  .book-detail { inset: 9px; grid-template-columns: 72px minmax(0, 1fr); gap: 11px; }
  .book-cover { width: 72px; }
  .book-title { font-size: 15px; }
  .book-author { font-size: 7px; }
  .book-rating { font-size: 6.5px; }
  .book-note { margin-top: 7px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-shelf,
  .book,
  .book::before,
  .book-detail { transition: none; }
}

/* ---------- 友链 ---------- */
.sub-title { color: var(--dim); font-size: 15px; margin: 36px 0 16px; font-weight: 400; }
.friends { display: flex; flex-direction: column; gap: 10px; }
.friend {
  display: flex; gap: 14px; align-items: baseline; text-decoration: none;
  border: 1px solid var(--border); border-radius: 0;
  background: var(--panel);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  padding: 12px 18px; font-size: 13.5px;
  transition: border-color .25s, transform .25s;
}
.friend:hover { border-color: var(--accent-dim); transform: translateX(4px); }
.friend-name { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.friend-desc { color: var(--dim); }
.friend-arrow { margin-left: auto; color: var(--dim); transition: color .2s; }
.friend:hover .friend-arrow { color: var(--accent-2); }

/* ---------- 搜索按钮 ---------- */
.search-btn {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); color: var(--dim); font-size: 12px; padding: 4px 9px;
  transition: color .2s;
}
.search-btn::before { content: "["; color: transparent; margin-right: 2px; transition: color .2s; }
.search-btn::after { content: "]"; color: transparent; margin-left: 2px; transition: color .2s; }
.search-btn:hover { color: var(--accent); }
.search-btn:hover::before, .search-btn:hover::after { color: #6e2a42; }

/* ---------- 麻将牌：真实 SVG 图案 + 实体牌面 ---------- */
.mj {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  max-width: 100%; gap: 2px; row-gap: 3px;
  margin: 0 2px; vertical-align: middle;
}
.tile {
  display: inline-block; position: relative; flex: 0 0 auto;
  width: 20px; aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 2.5px;
  background:
    linear-gradient(145deg, #fffef3 0%, #f5f0dc 66%, #dcd7c2 100%);
  box-shadow:
    inset 0 0 0 1px rgba(48, 58, 61, .62),
    inset 1px 1px 0 rgba(255, 255, 255, .82),
    0 2px 0 #356764,
    0 3px 5px rgba(0, 0, 0, .38);
}
.tile img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  filter: contrast(1.12) saturate(1.1);
  transform: scale(.82);
  transform-origin: center;
}
/* 整手牌仍是正文辅助图，不扩大成居中的视觉主角。 */
.mj-box {
  width: min(100%, 560px);
  margin: 14px auto; padding: 10px 12px;
  border: 1px dashed var(--border); border-radius: 0;
  background: rgba(12, 16, 22, .5);
  text-align: center;
}
.mj-box .mj {
  justify-content: center; gap: 3px; row-gap: 4px;
}
.mj-box .tile {
  width: 27px;
  border-radius: 3px;
}

/* ---------- 左窗格：neofetch 会话 + 底部输入栏 ---------- */
.pane-left .hero { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane-left .term-body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; padding: 0; }
.term-inputbar {
  flex-shrink: 0; display: flex; align-items: baseline; gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--terminal-font-size);
}
.term-inputbar .term-input { flex: 1; }
.term-input::placeholder { color: var(--dim); opacity: .6; }

/* ---------- 隐藏 AI CLI：Codex / Claude Code ---------- */
.hero.ai-cli-active .term-body {
  scrollbar-color: #4a4b4d transparent;
}
.term-body.ai-cli-running {
  color: #e0e1e4;
  cursor: default;
}
.ai-cli {
  --ai-orange: #f06b49;
  --ai-muted: #959598;
  --ai-faint: #616165;
  width: 100%;
  color: #e0e1e4;
  font: var(--terminal-font-size)/1.42 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
  letter-spacing: .01em;
  animation: ai-cli-enter .16s steps(2, end);
}
.ai-cli p { margin: 0; }
.ai-cli button,
.ai-cli a { font: inherit; }
.ai-cli-shell,
.ai-trust { width: 100%; }
.ai-trust {
  max-width: 80ch;
  padding: 3px 2px 12px;
}
.ai-trust-lead {
  display: flex;
  flex-wrap: wrap;
  gap: 0 5px;
  margin-bottom: 1.3em !important;
}
.ai-trust-lead > strong,
.ai-trust-lead b,
.ai-workspace {
  color: #f3f4f6;
  font-weight: 400;
}
.ai-trust-copy {
  display: grid;
  gap: .65em;
  max-width: 75ch;
  color: #c4c7cc;
}
.ai-trust-copy strong { color: #f1f1f0; }
.ai-trust-choices {
  display: grid;
  gap: 2px;
  margin-top: 1.25em;
}
.ai-trust-choices button {
  width: fit-content;
  max-width: 100%;
  padding: 2px 8px 2px 2px;
  border: 0;
  background: transparent;
  color: #c8cbd0;
  text-align: left;
  cursor: pointer;
}
.ai-trust-choices button > span {
  display: inline-block;
  width: 14px;
  color: transparent;
}
.ai-trust-choices button.is-selected {
  color: #f4f4f2;
  font-weight: 700;
}
.ai-trust-choices button.is-selected > span { color: currentColor; }
.ai-key-hint {
  margin-top: .8em !important;
  color: var(--ai-muted);
}
.ai-rule {
  height: 1px;
  margin: 0 0 1em;
  background: #59595c;
}
.ai-trust-kicker {
  margin-bottom: .45em !important;
  color: #c6c8cc;
}
.ai-workspace { margin-bottom: 1.25em !important; }
.ai-trust--claude .ai-security-link {
  display: inline-block;
  margin-top: 1em;
  color: #aeb5ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ai-trust--claude .ai-trust-choices button.is-selected { color: var(--ai-orange); }
.ai-cli-inputbar {
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  width: 100%;
  min-height: 40px;
  margin-top: 7px;
  padding: 8px 11px;
  border: 0;
  background: #444446;
  transition: color .15s, opacity .15s;
}
.ai-cli-inputbar > .prompt {
  flex: 0 0 auto;
  color: #ffae23;
  font-weight: 700;
}
.ai-cli-inputbar .term-input {
  flex: 1;
  width: auto;
  min-width: 0;
  color: #edf0f3;
  caret-color: #e8eef4;
  font: inherit;
}
.ai-cli-inputbar .term-input::placeholder {
  color: #9a9a9d;
  opacity: 1;
}
.ai-cli-inputbar.is-busy .term-input {
  color: #b2b2b4;
  cursor: wait;
}
.ai-cli-inputbar--claude {
  min-height: 30px;
  margin-top: 7px;
  padding: 5px 2px;
  border-top: 1px solid #8c8c8f;
  border-bottom: 1px solid #8c8c8f;
  background: transparent;
}
.ai-cli-inputbar--claude > .prompt { color: #f1f1f3; }
.ai-codex-card {
  width: 100%;
  padding: 9px 11px 10px;
  border: 1px solid #89898c;
  border-radius: 3px;
  color: #e1e2e5;
}
.ai-codex-brand {
  margin-bottom: 10px;
  color: #929296;
}
.ai-codex-brand b,
.ai-codex-brand strong { color: #fafafa; }
.ai-codex-brand b { margin-right: 5px; }
.ai-codex-card dl,
.ai-codex-card dl div { margin: 0; }
.ai-codex-card dl {
  display: grid;
  gap: 1px;
}
.ai-codex-card dl div {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1fr);
  column-gap: .5ch;
}
.ai-codex-card dt { color: #96969a; }
.ai-codex-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.ai-codex-card .ai-model-name { color: #e6e7ea; }
.ai-codex-card dd em {
  margin-left: .35ch;
  color: #e55ce7;
  font-style: normal;
}
.ai-codex-card dd b {
  margin-left: .35ch;
  color: #00d6df;
  font-weight: 400;
}
.ai-codex-card dd span:last-child {
  display: none;
  margin-left: .2ch;
  color: #949498;
}
.ai-codex-card dd > strong { color: #e060de; }
.ai-tip {
  margin: 13px 2px 0 !important;
  color: #e0e1e4;
}
.ai-tip b,
.ai-tip strong { color: #fff; }
.ai-tip > span { color: #e0e1e4; }
.ai-usage {
  margin: 11px 1px 0 !important;
  color: #e0e1e4;
}
.ai-usage b {
  margin-right: .55em;
  color: #939397;
}
.ai-transcript {
  display: grid;
  gap: .62em;
  margin: 12px 1px 7px;
}
.ai-transcript:empty { display: none; }
.ai-transcript p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ai-user {
  color: #f4f4f5;
  font-weight: 700;
}
.ai-assistant { color: #d7d8db; }
.ai-system { color: #a3a3a7; }
.ai-error { color: #ff7b7b; }
.ai-process { color: #a4a4a8; }
.ai-process.is-active {
  display: flex;
  align-items: baseline;
  color: #c1c1c4;
}
.ai-process.is-active small {
  margin-left: .45em;
  color: #7f7f83;
  font-size: .8em;
}
.ai-thinking-mark {
  display: inline-block;
  color: #e4e5e7;
  transform-origin: 50% 52%;
  animation: ai-thinking-codex .84s ease-in-out infinite;
}
.ai-cli--claude .ai-thinking-mark {
  color: var(--ai-orange);
  animation: ai-thinking-claude 1s steps(8, end) infinite;
}
.ai-command-menu[hidden] { display: none; }
.ai-command-menu {
  flex: 0 0 auto;
  width: 100%;
  max-height: min(35vh, 220px);
  overflow: hidden;
  padding: 1px 11px 4px;
  background: #202122;
  color: #919195;
  font: var(--terminal-font-size)/1.38 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.ai-command-row {
  display: grid;
  grid-template-columns: 14ch minmax(0, 1fr);
  min-width: 0;
}
.ai-command-row strong {
  color: #e1e2e4;
  font-weight: 400;
}
.ai-command-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-command-row.is-selected strong,
.ai-command-row.is-selected span {
  color: #55edf3;
  font-weight: 700;
}
.ai-command-menu--claude .ai-command-row.is-selected strong,
.ai-command-menu--claude .ai-command-row.is-selected span {
  color: var(--ai-orange);
}
.ai-cli-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0 .65em;
  width: 100%;
  min-height: 19px;
  padding: 0 11px;
  overflow: hidden;
  color: #97979a;
  font: var(--terminal-font-size)/1.2 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}
.ai-cli-status i {
  color: #77777b;
  font-style: normal;
}
.ai-cli-status strong {
  color: #ff1684;
  font-weight: 400;
}
.ai-cli-status--codex [data-ai-status-model] { color: #a8ff00; }
.ai-status-spacer { flex: 1; }
.ai-cli-status--claude {
  padding: 0 5px;
  border-bottom: 1px solid #6d6d70;
}
.ai-cli-status--claude [data-ai-status-model] { color: #a1a1a5; }
.ai-cli-status--claude strong { color: #a1a1a5; }
.ai-claude-card {
  width: 100%;
  height: 160px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ai-orange);
  border-radius: 3px;
  color: #dddde0;
}
.ai-claude-card legend {
  margin-left: 24px;
  padding: 0 7px;
  color: #99999d;
}
.ai-claude-card legend span {
  margin-right: .45em;
  color: var(--ai-orange);
}
.ai-claude-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(112px, .8fr);
  height: calc(100% - .45em);
  min-height: 0;
}
.ai-claude-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 4px 12px 10px;
  text-align: center;
}
.ai-claude-main > p {
  color: #f3f3f4;
  font-weight: 700;
}
.ai-claude-main pre {
  margin: 5px 0;
  color: var(--ai-orange);
  font: 700 10px/.82 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
  text-shadow: 0 0 18px rgba(240, 107, 73, .12);
}
.ai-claude-main strong {
  max-width: 100%;
  color: #a1a1a5;
  font-size: .8em;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.ai-claude-main > span {
  max-width: 100%;
  color: #a1a1a5;
  font-size: .8em;
  overflow-wrap: anywhere;
}
.ai-claude-welcome aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .12em;
  min-width: 0;
  margin: 3px 0;
  padding: 0 8px;
  border-left: 1px solid rgba(240, 107, 73, .65);
  color: #e0e0e2;
  font-size: .9em;
}
.ai-claude-welcome aside b {
  color: var(--ai-orange);
  font-weight: 700;
}
.ai-claude-welcome aside span,
.ai-claude-welcome aside em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-claude-welcome aside i {
  height: 1px;
  margin: .45em 0;
  background: rgba(240, 107, 73, .52);
}
.ai-claude-welcome aside em {
  color: #97979a;
  font-style: italic;
}
.ai-claude-notice {
  position: relative;
  display: grid;
  margin: 12px 3px 0;
  padding: 0 4px 0 10px;
  border-left: 2px solid var(--ai-orange);
}
.ai-claude-notice strong { color: var(--ai-orange); }
.ai-claude-notice p {
  color: #dedee1;
  line-height: 1.18;
}
.ai-claude-notice span { color: #a0a0a4; }
.ai-claude-notice i {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #9a9a9e;
  font-style: normal;
}
.ai-claude-shell .ai-transcript {
  margin: 8px 3px 4px;
}
.ai-claude-shell .ai-process,
.ai-claude-shell .ai-assistant::first-letter { color: var(--ai-orange); }
.ai-cli.is-confirmed { opacity: .7; }
.ai-cli.is-leaving {
  opacity: 0;
  transition: opacity .14s steps(2, end);
}
@keyframes ai-cli-enter {
  from { opacity: .25; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
@keyframes ai-thinking-codex {
  0%, 100% { opacity: .4; transform: translateY(0) scale(.84); }
  50% { opacity: 1; transform: translateY(-.12em) scale(1.08); }
}
@keyframes ai-thinking-claude {
  from { opacity: .55; transform: rotate(0deg) scale(.9); }
  50% { opacity: 1; }
  to { opacity: .55; transform: rotate(360deg) scale(.9); }
}

@media (max-width: 480px) {
  .ai-codex-card { width: 100%; }
  .ai-codex-card dl div { grid-template-columns: 11ch minmax(0, 1fr); }
  .ai-codex-card dd em,
  .ai-codex-card dd b { margin-left: .7ch; }
  .ai-tip { margin-right: 3px !important; margin-left: 3px !important; }
  .ai-command-row { grid-template-columns: 14ch minmax(0, 1fr); }
  .ai-claude-card { height: 130px; }
  .ai-claude-welcome { grid-template-columns: 1fr; }
  .ai-claude-welcome aside { display: none; }
  .ai-claude-notice {
    margin-right: 3px;
    margin-left: 3px;
    padding-left: 9px;
  }
  .ai-claude-notice p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .ai-cli-status--claude > span:nth-of-type(2),
  .ai-cli-status--claude > i:nth-of-type(2),
  .ai-cli-status--claude > span:nth-of-type(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-cli,
  .ai-cli.is-leaving,
  .ai-thinking-mark {
    animation: none;
    transition: none;
  }
}

/* ---------- 真·Vim 陷阱 ---------- */
.term-body.vim-running {
  overflow: hidden;
  cursor: text;
}
.vim-tui {
  min-height: calc(100% - 1px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #202122;
  color: #d4d6da;
  font: var(--terminal-font-size)/17px ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
  letter-spacing: -.015em;
  animation: vim-open .12s steps(2, end);
}
.vim-screen {
  flex: 1;
  min-height: 0;
  padding-top: 2px;
}
.vim-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 4ch minmax(0, 1fr);
  height: 17px;
}
.vim-number {
  padding-right: 1ch;
  color: #667384;
  text-align: right;
  user-select: none;
}
.vim-line {
  min-width: 0;
  overflow: hidden;
  color: #c9cdd3;
  white-space: pre;
}
.vim-row:first-child .vim-line {
  color: #63d7df;
  font-weight: 700;
}
.vim-cursor {
  display: inline-block;
  min-width: .62em;
  background: #d7dbe0;
  color: #0a0d12;
  animation: vim-cursor-blink 1.05s steps(1, end) infinite;
}
.vim-cursor.is-insert {
  min-width: 1px;
  background: transparent;
  color: inherit;
  box-shadow: inset 2px 0 #d7dbe0;
}
.vim-status {
  min-height: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 6px;
  overflow: hidden;
  background: #bfc4cc;
  color: #12151a;
  font-weight: 700;
  white-space: nowrap;
}
.vim-status span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.vim-status span:last-child {
  flex-shrink: 0;
  font-weight: 400;
}
.vim-message {
  min-height: 19px;
  padding: 1px 2px;
  color: #d2d5da;
  white-space: pre-wrap;
}
.vim-message.is-error {
  color: #ff6666;
}
.vim-inputbar {
  min-height: 21px;
  align-items: center;
  gap: 0;
  margin-top: 0;
  padding: 0 2px;
  border-top: 0;
}
.vim-inputbar > .prompt {
  color: #d7dbe0;
}
.vim-inputbar .term-input {
  width: auto;
  color: #d7dbe0;
  caret-color: #d7dbe0;
  font: var(--terminal-font-size)/17px ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.vim-touch-controls {
  display: none;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 7px 2px 2px;
}
.vim-touch-controls button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid #323a46;
  background: #0c1016;
  color: #9ba4b0;
  font: 9px/1 var(--mono);
}
.vim-touch-controls button:active {
  border-color: var(--accent-dim);
  color: var(--accent);
}
@keyframes vim-open {
  from { opacity: .2; }
  to { opacity: 1; }
}
@keyframes vim-cursor-blink {
  0%, 56% { opacity: 1; }
  57%, 100% { opacity: .45; }
}

@media (hover: none), (pointer: coarse), (max-width: 640px) {
  .vim-touch-controls {
    display: grid;
  }
  .vim-status {
    gap: 6px;
    font-size: 9px;
  }
  .vim-status span:first-child {
    max-width: 72%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vim-tui,
  .vim-cursor {
    animation: none;
  }
}
.nf { display: flex; gap: 26px; margin: 6px 0 4px; align-items: center; }
.nf-art {
  margin: 0; flex-shrink: 0;
  color: var(--accent); font-size: 13px; line-height: 1.25;
  text-shadow: 0 0 22px var(--glow);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.nf-info { min-width: 0; }
.nf-info p { display: flex; margin: 5px 0; }
.nf-info p > *:last-child { flex: 1; min-width: 0; padding-left: 12px; }
.nf-info .k {
  position: relative;
  display: inline-block; width: 66px; flex-shrink: 0;
  white-space: nowrap;
  color: var(--accent-3); font-size: 13px;
}
.nf-info .k::after { content: '::'; position: absolute; right: 0; color: var(--dim); }
.nf-info a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent-dim); }
.nf-ascii-wordmark {
  min-height: 0; margin: -4px 0 0;
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.nf-ascii-wordmark pre {
  margin: 0;
  color: var(--fg);
  font: 600 12.5px/1.18 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  white-space: pre;
  text-shadow: 0 0 18px rgba(255, 255, 255, .035);
}
.nf-ascii-h {
  color: var(--accent);
  text-shadow: 0 0 22px var(--glow);
}
.nf-ascii-tail { color: var(--fg); }
.nf-ascii-role-slot {
  display: inline-block;
  width: 22ch;
  text-align: center;
  vertical-align: middle;
}
.nf-ascii-role {
  color: var(--accent-3);
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  white-space: nowrap;
}

/* ---------- 音乐：CoverFlow ---------- */
.cflow {
  --cflow-cover: 190px;
  position: relative; height: calc(var(--cflow-cover) + 60px); perspective: 900px;
  touch-action: pan-y; overscroll-behavior-x: contain;
  overflow: hidden; outline: none; cursor: grab;
  contain: layout paint style;
  user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(61, 220, 232, .055), transparent 42%);
}
.cflow::before,
.cflow::after {
  content: ''; position: absolute; z-index: 150; top: 0; bottom: 0;
  width: min(15%, 96px); pointer-events: none;
}
.cflow::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.cflow::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.cflow:focus-visible { outline: none; }
.cflow:focus-visible .cflow-item.active {
  border-color: var(--accent);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .68), 0 0 40px rgba(61, 220, 232, .2);
}
.cflow.pressed, .cflow.dragging { cursor: grabbing; }
.cflow-item {
  position: absolute; left: 50%; top: 8px;
  width: var(--cflow-cover); height: var(--cflow-cover);
  margin-left: calc(var(--cflow-cover) / -2);
  border: 1px solid var(--border);
  background: #0d1015;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  cursor: inherit;
  outline: none; user-select: none; will-change: transform, filter;
  contain: paint;
  transform-style: preserve-3d; backface-visibility: hidden;
  transition: border-color .14s ease, box-shadow .18s ease, opacity .14s ease;
  -webkit-box-reflect: below 4px linear-gradient(transparent 62%, rgba(0, 0, 0, .22));
}
.cflow-item.is-outside { opacity: 0; visibility: hidden; pointer-events: none; }
.cflow-item img {
  width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  background: #0d1015;
}
.cflow-item.active {
  border-color: rgba(61, 220, 232, .46);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .68), 0 0 38px rgba(61, 220, 232, .14);
}
.cflow-item.pressed {
  border-color: var(--accent);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .62), 0 0 0 1px var(--accent-dim);
}
/* 无封面时的占位封面 */
.cflow-novinyl {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; text-align: center;
  font-size: 13px; color: var(--fg);
  background:
    radial-gradient(circle at 50% 42%, transparent 26%, rgba(12, 16, 22, .55) 27%),
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .06), transparent 42%),
    repeating-radial-gradient(circle, #0c0c10 0 2px, #16161c 2px 4px);
}
.cflow-info {
  min-height: 106px; margin-top: 2px; padding-top: 12px;
  border-top: 1px solid var(--border);
  transition: opacity .18s;
}
.cflow-info.fading { opacity: 0; }

@media (max-width: 640px) {
  .cflow { --cflow-cover: min(164px, calc(100vw - 128px)); perspective: 760px; }
  .cflow-item {
    -webkit-box-reflect: below 3px linear-gradient(transparent 72%, rgba(0, 0, 0, .14));
  }
  .music-info-head { align-items: flex-start; gap: 12px; }
  .music-title { font-size: 15px; }
  .music-open { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .cflow-item, .cflow-info { transition: none; }
}

/* ---------- 游戏：Steam 库 ---------- */
.steam-library {
  --steam-blue: #67c1f5;
  --steam-selected: #425a78;
  --steam-sidebar: #171d25;
  --steam-surface: #202731;
  container-type: inline-size;
  display: grid; grid-template-columns: minmax(148px, 18.2%) minmax(0, 1fr);
  width: 100%; min-width: 0; height: 520px; height: clamp(440px, 52.5vw, 520px); overflow: hidden;
  border: 1px solid #303b47; background: #111923;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  color: #d6d7d8;
  font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11px; line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
.steam-library button,
.steam-library input {
  color: inherit; font: inherit;
}
.steam-library button {
  appearance: none; border: 0; border-radius: 0; cursor: pointer;
}
.steam-library button:focus-visible,
.steam-library input:focus-visible {
  outline: 1px solid var(--steam-blue); outline-offset: -1px;
}
.steam-icon {
  display: inline-block; flex: 0 0 auto;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--steam-icon) center / contain no-repeat;
  mask: var(--steam-icon) center / contain no-repeat;
}
.steam-sidebar {
  position: relative; min-width: 0; height: 100%; overflow: hidden;
  border-right: 1px solid #313b47; background: var(--steam-sidebar);
}
.steam-search-row {
  position: relative; display: flex; align-items: center;
  height: 29px; margin: 5px;
  overflow: hidden; border: 1px solid #29323d;
  background: #20242c;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.steam-search-row:hover,
.steam-search-row:focus-within {
  border-color: #333d49; background: #1d2128;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, .62),
    inset 0 0 0 1px rgba(5, 8, 12, .16),
    0 1px 0 rgba(255, 255, 255, .03);
}
.steam-library-search {
  display: grid; grid-template-columns: 25px minmax(0, 1fr);
  align-items: center; min-width: 0; height: 100%; flex: 1;
}
.steam-library-search > .steam-icon {
  justify-self: center; color: #8b949e; font-size: 14px;
  transition: color .16s ease, filter .16s ease;
}
.steam-library-search input {
  display: block; min-width: 0; width: 100%; height: 100%; padding: 0 30px 0 0;
  border: 0; border-radius: 0; outline: 0; background: transparent;
  color: #d9dde1; font-size: 10px;
}
.steam-library-search input:focus-visible { outline: 0; }
.steam-library-search input::placeholder {
  color: #747b84; font-style: italic;
  transition: color .16s ease;
}
.steam-search-row:hover .steam-library-search > .steam-icon,
.steam-search-row:focus-within .steam-library-search > .steam-icon {
  color: #aab2ba; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}
.steam-search-row:hover .steam-library-search input::placeholder,
.steam-search-row:focus-within .steam-library-search input::placeholder { color: #858d96; }
.steam-search-clear {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 27px; height: 100%; background: transparent; color: #7d8791;
}
.steam-search-clear {
  position: absolute; right: 0; opacity: 0; pointer-events: none; font-size: 10px;
}
.steam-sidebar.has-search-query .steam-search-clear { opacity: 1; pointer-events: auto; }
.steam-search-clear:hover { color: #cbd1d6; }
.steam-game-list {
  height: calc(100% - 39px); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: #414a56 transparent;
}
.steam-game-list::-webkit-scrollbar { width: 5px; }
.steam-game-list::-webkit-scrollbar-thumb { background: #414a56; }
.steam-game-group[hidden] { display: none; }
.steam-category {
  display: flex; align-items: center; height: 20px; padding: 0 6px;
  color: #bec7cf; font-size: 9px; white-space: nowrap;
}
.steam-category .steam-icon { margin-right: 5px; color: #8a96a2; font-size: 11px; }
.steam-category strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; }
.steam-category span { margin-left: 5px; color: #657180; }
.steam-group-items { min-width: 0; }
.steam-game-item {
  display: grid; grid-template-columns: 16px minmax(0, 1fr);
  align-items: center; gap: 6px;
  width: 100%; min-width: 0; height: 21px; padding: 2px 6px 2px 11px;
  background: transparent; color: inherit; text-align: left;
  transition: background-color .12s, color .12s;
}
.steam-game-item:hover,
.steam-game-item:focus-visible { background: #303c4a; }
.steam-game-item.is-selected {
  background: var(--steam-selected); color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .18);
}
.steam-game-thumb {
  display: block; width: 16px; height: 16px; overflow: hidden;
  border: 1px solid #36414d; background: #0e131a;
}
.steam-game-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: .72; filter: saturate(.74) brightness(.82);
  transition: opacity .14s, filter .14s;
}
.steam-game-item:hover .steam-game-thumb img,
.steam-game-item:focus-visible .steam-game-thumb img,
.steam-game-item.is-selected .steam-game-thumb img { opacity: 1; filter: none; }
.steam-game-item-copy { min-width: 0; }
.steam-game-item-copy strong {
  display: block; overflow: hidden; color: #b7c2ce;
  font-size: 9px; font-weight: 400; line-height: 1.2;
  text-overflow: ellipsis; white-space: nowrap;
}
.steam-game-item.is-selected strong { color: #fff; }
.steam-game-item[hidden] { display: none !important; }
.steam-no-results {
  position: absolute; top: 79px; right: 0; left: 0;
  margin: 0; padding: 14px 18px; color: #7f8b98; font-size: 10px;
}

.steam-stage {
  position: relative; isolation: isolate; min-width: 0; height: 100%; overflow: hidden;
  background: #151e2a;
}
.steam-stage::before {
  content: ""; position: absolute; z-index: 0; inset: -40px;
  background-image: var(--steam-art); background-size: cover; background-position: center top;
  opacity: .94; filter: blur(30px) saturate(.96) brightness(.46);
  transform: scale(1.12);
}
.steam-stage::after {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: rgba(15, 22, 30, .24); pointer-events: none;
}
.steam-stage.is-entering .steam-stage-content { animation: steam-stage-in .18s ease-out both; }
@keyframes steam-stage-in {
  from { opacity: .45; }
  to { opacity: 1; }
}
.steam-stage-scroll {
  position: relative; z-index: 1; height: 100%; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #46515e transparent;
}
.steam-stage-scroll::-webkit-scrollbar { width: 5px; }
.steam-stage-scroll::-webkit-scrollbar-thumb { background: #46515e; }
.steam-stage-content { position: relative; z-index: 1; min-width: 0; min-height: 100%; }
.steam-stage.is-empty::before { opacity: .18; }
.steam-empty-state {
  position: relative; z-index: 1;
  display: flex; min-height: 220px; height: 100%;
  align-items: center; justify-content: center; gap: 9px;
  color: #8e9aa7;
}
.steam-empty-state .steam-icon { color: #627385; font-size: 20px; }
.steam-empty-state strong { font-size: 11px; font-weight: 400; }
.steam-hero {
  --steam-logo-page-y: 0px;
  position: relative; height: 182px; height: clamp(178px, 21.5cqw, 205px); overflow: hidden;
  background: #0c1118; box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}
.steam-hero-art {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.025);
}
.steam-hero-logo-float {
  position: absolute; left: 18px; top: 52%; width: 50%; height: 70%;
  pointer-events: none;
  transform: translate3d(0, calc(-50% + var(--steam-logo-page-y)), 0);
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .6));
  will-change: transform;
}
.steam-hero-logo {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: left center;
}
.steam-gamebar {
  position: sticky; z-index: 8; top: 0;
  display: grid; grid-template-columns: minmax(116px, 145px) minmax(0, 1fr) auto;
  align-items: stretch; height: 48px;
  border-top: 1px solid rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(7, 11, 16, .62);
  background: rgba(37, 42, 50, .66);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .2);
  backdrop-filter: blur(16px) saturate(1.06); -webkit-backdrop-filter: blur(16px) saturate(1.06);
  transition: height .16s ease-out, background-color .16s ease-out;
}
.steam-launch-group {
  display: grid; grid-template-columns: minmax(0, 1fr) 27px;
  align-self: center; min-width: 0; height: 32px; margin-left: 8px;
}
.steam-launch,
.steam-launch-menu {
  display: flex; align-items: center; justify-content: center;
  background: #3fbf4b; color: #f1fff0;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), inset 0 -1px rgba(0, 0, 0, .18);
}
.steam-launch {
  gap: 6px; min-width: 0; padding: 0 7px; font-size: 10px; white-space: nowrap;
}
.steam-launch .steam-icon { font-size: 14px; }
.steam-launch-menu {
  border-left: 2px solid rgba(22, 82, 31, .65) !important; font-size: 10px;
}
.steam-launch:hover,
.steam-launch-menu:hover { background: #48cd55; }
.steam-launch:active,
.steam-launch-menu:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
.steam-sticky-identity {
  display: none; min-width: 0; align-items: center; gap: 7px;
  padding: 0 8px; color: #bfc7cf;
}
.steam-sticky-identity img {
  width: 22px; height: 22px; object-fit: cover; border: 1px solid #39434e;
}
.steam-sticky-identity strong {
  min-width: 0; overflow: hidden; font-size: 10px; font-weight: 400;
  text-overflow: ellipsis; white-space: nowrap;
}
.steam-stats {
  display: grid; grid-template-columns: repeat(3, max-content);
  justify-content: start; column-gap: 18px;
  align-items: stretch; min-width: 0; margin: 0; padding: 0 1px 0 5px;
}
.steam-stat {
  display: flex; align-items: center; gap: 5px; min-width: 0; padding: 0 5px;
}
.steam-stat > .steam-icon,
.steam-platform-icons { color: #8d969f; font-size: 14px; }
.steam-platform-icons {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
}
.steam-platform-icons .steam-icon { font-size: 1em; }
.steam-stat-achievement > .steam-icon { color: #2b8fff; }
.steam-stat > div { min-width: 0; }
.steam-stat dt {
  overflow: hidden; color: #9ca4ad; font-size: 7.5px; line-height: 1.2;
  text-overflow: ellipsis; white-space: nowrap;
}
.steam-stat dd {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  overflow: hidden; margin: 2px 0 0; color: #b8c0c8;
  font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.steam-progress {
  display: block; min-width: 24px; height: 3px; flex: 1;
  overflow: hidden; background: #202630;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.steam-progress i {
  display: block; height: 100%; background: #2d73ff;
}
.steam-action-controls {
  display: flex; align-items: center; gap: 5px; padding: 0 7px 0 4px;
}
.steam-stage-tool {
  display: grid; place-items: center; width: 24px; height: 24px;
  background: rgba(81, 86, 94, .68); color: #c1c5c9; font-size: 11px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.steam-stage-tool:hover { color: #fff; background: rgba(95, 102, 112, .88); }
.steam-stage-tool[aria-pressed="true"] { color: #66b5f4; }
.steam-scroll-top { display: none; }
.steam-gamebar.is-pinned {
  height: 42px; background: rgba(35, 42, 53, .96);
}
.steam-gamebar.is-pinned .steam-launch-group { height: 31px; margin-left: 8px; }
.steam-gamebar.is-pinned .steam-launch { font-size: 10px; }
.steam-gamebar.is-pinned .steam-stats { display: none; }
.steam-gamebar.is-pinned .steam-sticky-identity { display: flex; }
.steam-gamebar.is-pinned .steam-scroll-top { display: grid; }
.steam-gamebar.is-pinned .steam-stage-tool[aria-label="游戏信息"] { display: none; }
.steam-gamebar.is-pinned .steam-action-controls { padding-right: 7px; }
.steam-gamebar.is-pinned .steam-stage-tool { width: 26px; height: 26px; }
.steam-stage-body {
  min-width: 0; padding: 9px 10px 24px;
  border-top: 1px solid rgba(10, 15, 21, .42);
}
.steam-recommend {
  display: flex; align-items: center; min-width: 0; min-height: 52px;
  padding: 7px 11px; background: rgba(68, 79, 94, .84);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 5px 15px rgba(0, 0, 0, .14);
}
.steam-recommend-copy { min-width: 0; flex: 1; margin-right: 13px; }
.steam-recommend-copy strong,
.steam-recommend-copy span { display: block; }
.steam-recommend-copy strong {
  color: #55b5e8; font-size: 8.5px; font-weight: 400;
}
.steam-recommend-copy span {
  display: -webkit-box; overflow: hidden; margin-top: 2px;
  color: #d9dde1; font-size: 8.5px; line-height: 1.45;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.steam-recommend-actions {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 0 auto;
}
.steam-recommend-actions button {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 52px; height: 30px; padding: 0 8px;
  background: #47667d; color: #5ac5f7; font-size: 9px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}
.steam-recommend-actions button .steam-icon { font-size: 12px; }
.steam-recommend-actions button:last-child { min-width: 73px; }
.steam-recommend-actions button:hover,
.steam-recommend-actions button[aria-pressed="true"] {
  background: #56809b; color: #bdeaff;
}
.steam-feed-grid {
  display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(128px, .95fr);
  gap: 12px; min-width: 0; margin-top: 9px;
}
.steam-activity,
.steam-side-column,
.steam-side-column section { min-width: 0; }
.steam-activity h4,
.steam-side-column h4 {
  margin: 0 0 7px; color: #a6afb8; font-size: 10px; font-weight: 400;
}
.steam-comment-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  height: 34px; overflow: hidden;
  background: rgba(26, 30, 37, .68); color: #69737d;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28);
}
.steam-comment-form input {
  min-width: 0; height: 100%; padding: 0 10px;
  border: 0; outline: 0; background: transparent;
  color: #d8dde2; font-size: 9px;
}
.steam-comment-form input::placeholder { color: #69737d; font-style: italic; }
.steam-comment-form button {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 58px; height: 100%; padding: 0 8px;
  background: #47667d; color: #70cdf7; font-size: 8.5px;
}
.steam-comment-form button:hover { background: #56809b; color: #d1f1ff; }
.steam-comment-list {
  display: grid; gap: 6px; margin-top: 7px;
}
.steam-comment-list:empty { display: none; }
.steam-visitor-comment {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  align-items: start; gap: 8px; padding: 7px 8px;
  border: 1px solid rgba(82, 94, 108, .38);
  background: rgba(35, 41, 50, .72);
}
.steam-comment-avatar {
  display: grid; place-items: center; width: 26px; height: 26px;
}
.steam-visitor-comment > div { min-width: 0; }
.steam-visitor-comment strong {
  display: block; overflow: hidden; color: #c3cbd3;
  font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap;
}
.steam-visitor-comment p {
  margin: 2px 0 0; color: #929da8;
  font-family: inherit; font-size: 8.5px; line-height: 1.45;
  word-break: break-word;
}
.steam-feed-date {
  display: flex; align-items: center; gap: 10px;
  height: 29px; color: #8f979f; font-size: 9px;
}
.steam-feed-date::after {
  content: ""; height: 1px; flex: 1; background: rgba(125, 135, 145, .24);
}
.steam-featured {
  overflow: hidden; border: 1px solid #3a4c5d;
  background: rgba(41, 50, 63, .84);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}
.steam-featured-title {
  height: 22px; padding: 5px 8px; background: rgba(20, 128, 185, .9);
  color: #d6f1ff; font-size: 8.5px; font-weight: 600;
}
.steam-featured-body {
  display: grid; grid-template-columns: minmax(94px, 38%) minmax(0, 1fr);
  min-height: 102px; padding: 8px; gap: 9px;
}
.steam-featured-body > img {
  display: block; width: 100%; height: 86px; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .06);
}
.steam-featured-copy { min-width: 0; padding-top: 1px; }
.steam-featured-copy small,
.steam-featured-copy strong { display: block; }
.steam-featured-copy small { color: #8994a0; font-size: 7.5px; }
.steam-featured-copy strong {
  overflow: hidden; margin-top: 3px; color: #dce0e4;
  font-size: 10px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap;
}
.steam-featured-copy p {
  display: -webkit-box; overflow: hidden; margin: 6px 0 0;
  color: #9ba6b1; font-family: inherit; font-size: 8.5px; line-height: 1.5;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.steam-side-column { display: grid; align-content: start; gap: 11px; }
.steam-side-panel {
  width: 100%; min-height: 50px; padding: 9px;
  border: 1px solid rgba(82, 94, 108, .4);
  background: rgba(39, 46, 56, .72); color: #aeb7c0;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.steam-friends-panel {
  display: flex; align-items: center; gap: 8px; color: #6f7b86;
}
.steam-friends-panel > .steam-icon { font-size: 18px; }
.steam-friends-empty-copy {
  color: #697581; font-size: 8.5px; font-style: italic;
}
.steam-friend-avatars {
  display: inline-flex; align-items: center; flex: 0 0 auto;
}
.steam-friend-avatar {
  display: grid; place-items: center; width: 28px; height: 28px;
  flex: 0 0 auto;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .28);
}
.steam-achievement-panel strong { display: block; margin-bottom: 7px; font-size: 9px; font-weight: 400; }
.steam-achievement-panel .steam-progress { width: 100%; height: 4px; }

/* Steam 启动流程：使用客户端自己的视觉语言，不继承终端弹窗。 */
.steam-launch-modal-open { overflow: hidden; }
.steam-launch-overlay {
  position: fixed; inset: 0; z-index: 82;
  display: grid; place-items: center; padding: 24px;
  background: rgba(5, 9, 14, .74);
  color: #dcdedf;
  font-family: Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: opacity .16s ease-out;
}
.steam-launch-overlay.is-visible { opacity: 1; }
.steam-client-dialog {
  width: min(438px, 100%);
  overflow: hidden;
  border: 1px solid #3d4b5a;
  border-radius: 2px;
  background: #1b2838;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .72),
    0 0 0 1px rgba(0, 0, 0, .45),
    inset 0 1px rgba(255, 255, 255, .025);
  transform: translateY(7px) scale(.992);
  transition: transform .16s ease-out;
}
.steam-launch-overlay.is-visible .steam-client-dialog { transform: none; }
.steam-dialog-titlebar {
  height: 39px;
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 13px;
  border-bottom: 1px solid #111923;
  background: #171d25;
  box-shadow: inset 0 -1px rgba(255, 255, 255, .02);
}
.steam-dialog-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: #d6d7d8;
}
.steam-dialog-brand .steam-icon { width: 19px; height: 19px; color: #f2f4f5; }
.steam-dialog-brand strong {
  font-size: 12px; font-weight: 400; letter-spacing: .01em;
}
.steam-dialog-close {
  width: 40px; height: 39px;
  display: grid; place-items: center;
  appearance: none;
  border: 0; border-radius: 0;
  background: transparent; color: #7f8790;
  cursor: pointer;
}
.steam-dialog-close .steam-icon { width: 11px; height: 11px; }
.steam-dialog-close:hover,
.steam-dialog-close:focus-visible { background: #c42b3b; color: #fff; outline: 0; }
.steam-cloud-body {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px; padding: 23px 24px 20px;
  background: linear-gradient(135deg, #202f41 0%, #1b2838 68%);
}
.steam-cloud-warning-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 1px solid #42566c;
  background: #263b50; color: #66c0f4;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.steam-cloud-warning-icon .steam-icon { width: 25px; height: 25px; }
.steam-cloud-copy { min-width: 0; }
.steam-cloud-copy h2,
.steam-launching-copy h2 {
  margin: 0;
  color: #f2f4f5;
  font-size: 17px; font-weight: 400; line-height: 1.35;
}
.steam-cloud-copy p {
  margin: 10px 0 0;
  color: #b8c0c7;
  font-size: 12px; line-height: 1.62;
}
.steam-cloud-copy p strong { color: #e5e7e8; font-weight: 400; }
.steam-cloud-state {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid #33465a;
  font-size: 11px;
}
.steam-cloud-state span { color: #7f98ad; }
.steam-cloud-state strong { color: #d6a34b; font-weight: 400; }
.steam-dialog-actions {
  min-height: 57px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin: 0; padding: 11px 14px;
  border-top: 1px solid #111923;
  background: #171d25;
}
.steam-dialog-button {
  min-width: 92px; height: 34px; padding: 0 16px;
  border: 0; border-radius: 2px;
  background: #3b4858; color: #dfe3e6;
  font: 12px/1 Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}
.steam-dialog-button:hover,
.steam-dialog-button:focus-visible {
  background: #536477; color: #fff; outline: 1px solid #7d8e9f; outline-offset: -1px;
}
.steam-dialog-button.is-primary {
  background: linear-gradient(90deg, #06bfff 0%, #2d73ff 100%);
  color: #fff;
}
.steam-dialog-button.is-primary:hover,
.steam-dialog-button.is-primary:focus-visible {
  background: linear-gradient(90deg, #39ccff 0%, #4a86ff 100%);
  outline-color: #80d8ff;
}
.steam-launching-body {
  display: grid; grid-template-columns: 58px minmax(0, 1fr);
  align-items: center; gap: 15px;
  min-height: 124px; padding: 24px;
  background: linear-gradient(135deg, #202f41 0%, #1b2838 72%);
}
.steam-launching-cover {
  display: block; width: 58px; height: 58px; object-fit: cover;
  border: 1px solid #425363;
  background: #101821;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
}
.steam-launching-copy { min-width: 0; }
.steam-launching-copy h2 {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.steam-launch-status {
  min-height: 17px; margin: 8px 0 11px;
  color: #8fa7bb;
  font-size: 11px; line-height: 1.5;
}
.steam-launch-progress {
  width: 100%; height: 4px; overflow: hidden;
  background: #0f1922;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .64);
}
.steam-launch-progress i {
  display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, #1a9fff, #66c0f4);
  box-shadow: 0 0 10px rgba(102, 192, 244, .3);
  transition: width .28s ease-out;
}
.steam-achievement-region {
  position: fixed; right: 18px; bottom: 18px; z-index: 84;
  width: min(352px, calc(100vw - 36px));
  pointer-events: none;
}
.steam-achievement-toast {
  width: 100%; min-height: 84px;
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  align-items: center; gap: 13px;
  padding: 13px 15px;
  appearance: none;
  border: 1px solid #344b5f;
  border-top: 2px solid #66c0f4;
  border-radius: 2px;
  background: linear-gradient(100deg, rgba(27, 40, 56, .985), rgba(19, 31, 43, .985));
  color: #dcdedf;
  text-align: left;
  cursor: pointer; pointer-events: auto;
  opacity: 0;
  transform: translateX(22px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .025);
  transition: opacity .2s ease-out, transform .22s ease-out;
}
.steam-achievement-toast.is-visible { opacity: 1; transform: none; }
.steam-achievement-toast:hover,
.steam-achievement-toast:focus-visible {
  border-color: #66c0f4; outline: 0;
  background: linear-gradient(100deg, rgba(34, 52, 70, .995), rgba(22, 38, 52, .995));
}
.steam-achievement-mark {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 1px solid #3f5d75;
  background: #20394c; color: #66c0f4;
  box-shadow: inset 0 0 18px rgba(102, 192, 244, .08);
}
.steam-achievement-mark .steam-icon { width: 25px; height: 25px; }
.steam-achievement-copy {
  min-width: 0;
  display: grid; gap: 3px;
  font-family: Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.steam-achievement-copy small {
  color: #66c0f4;
  font-size: 10px; line-height: 1.2; text-transform: uppercase;
}
.steam-achievement-copy strong {
  overflow: hidden;
  color: #f2f4f5;
  font-size: 15px; font-weight: 400; line-height: 1.3;
  text-overflow: ellipsis; white-space: nowrap;
}
.steam-achievement-copy > span {
  color: #8998a5;
  font-size: 10px; line-height: 1.35;
}

@media (max-width: 640px) {
  .steam-launch-overlay { padding: 12px; }
  .steam-cloud-body {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px; padding: 19px 17px 17px;
  }
  .steam-cloud-warning-icon { width: 44px; height: 44px; }
  .steam-cloud-warning-icon .steam-icon { width: 21px; height: 21px; }
  .steam-cloud-copy h2,
  .steam-launching-copy h2 { font-size: 15px; }
  .steam-cloud-copy p { font-size: 11px; line-height: 1.58; }
  .steam-dialog-actions { padding-inline: 10px; }
  .steam-dialog-button { min-width: 82px; padding-inline: 12px; }
  .steam-launching-body { padding: 20px 17px; }
  .steam-achievement-region {
    right: 12px; bottom: 12px; left: 12px;
    width: auto;
  }

  .steam-library { display: block; height: auto; min-height: 0; }
  .steam-sidebar {
    height: auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid #303b48;
  }
  .steam-game-list { height: auto; overflow: visible; padding-bottom: 5px; }
  .steam-no-results { position: static; margin: 0; }
  .steam-category { height: 23px; }
  .steam-group-items {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }
  .steam-game-item {
    grid-template-columns: 24px minmax(0, 1fr);
    height: 38px; padding-left: 8px;
  }
  .steam-game-thumb { width: 24px; height: 24px; }
  .steam-game-item-copy strong { font-size: 10px; }
  .steam-stage { height: auto; min-height: 0; }
  .steam-stage-scroll { height: auto; overflow: visible; }
  .steam-hero { height: 118px; }
  .steam-hero-logo-float { left: 14px; width: 52%; height: 78%; }
  .steam-gamebar,
  .steam-gamebar.is-pinned {
    position: relative; top: auto;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: 48px auto; height: auto; min-height: 134px;
  }
  .steam-launch-group,
  .steam-gamebar.is-pinned .steam-launch-group {
    grid-column: 1; grid-row: 1; align-self: center;
    height: 34px; margin-left: 7px;
  }
  .steam-gamebar .steam-sticky-identity,
  .steam-gamebar.is-pinned .steam-sticky-identity { display: none; }
  .steam-stats,
  .steam-gamebar.is-pinned .steam-stats {
    display: grid; grid-column: 1 / -1; grid-row: 2;
    grid-template-columns: repeat(3, max-content);
    justify-content: start; column-gap: 14px;
    min-height: 82px; padding: 0 4px 5px;
  }
  .steam-stat { padding: 0 6px 0 2px; }
  .steam-stat > .steam-icon,
  .steam-platform-icons { font-size: 15px; }
  .steam-action-controls,
  .steam-gamebar.is-pinned .steam-action-controls {
    grid-column: 2; grid-row: 1; justify-content: flex-end; padding: 0 7px;
  }
  .steam-stage-tool { width: 30px; height: 30px; font-size: 12px; }
  .steam-scroll-top { display: none !important; }
  .steam-gamebar.is-pinned .steam-stage-tool[aria-label="游戏信息"] { display: grid; }
  .steam-stage-body { padding: 8px 8px 18px; }
  .steam-recommend {
    display: block; min-height: 0; padding: 10px;
  }
  .steam-recommend-copy { min-width: 0; margin: 0 0 8px; }
  .steam-recommend-actions { gap: 4px; }
  .steam-recommend-actions button {
    min-width: 0; flex: 1; height: 32px; padding: 0 6px;
  }
  .steam-comment-form { height: 38px; }
  .steam-comment-form input { font-size: 10px; }
  .steam-comment-form button { min-width: 62px; font-size: 9px; }
  .steam-feed-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .steam-featured-body { grid-template-columns: 36% minmax(0, 1fr); }
  .steam-side-column {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px;
  }
  .steam-side-column h4 { font-size: 8px; }
  .steam-side-panel { min-height: 48px; padding: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .steam-game-item,
  .steam-game-thumb img,
  .steam-gamebar,
  .steam-launch-overlay,
  .steam-client-dialog,
  .steam-launch-progress i,
  .steam-achievement-toast { transition: none; }
  .steam-stage.is-entering .steam-stage-content { animation: none; }
  .steam-stage-scroll { scroll-behavior: auto; }
}

/* ---------- 参考文献：正文卡之后的独立卡 ---------- */
.refs-card {
  margin-top: 16px; padding: 16px 22px;
  border: 1px solid var(--border);
  background: rgba(12, 16, 22, .42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 12.5px; color: var(--dim);
}
.refs-card .refs-title { color: var(--dim); font-size: 11px; letter-spacing: 3px; margin-bottom: 8px; opacity: .8; }
.refs-card ol { list-style: none; margin: 0; padding: 0; counter-reset: ref; }
.refs-card li { margin: 4px 0; line-height: 1.65; opacity: .8; }
.refs-card li::before { content: '[' counter(ref) '] '; counter-increment: ref; color: var(--accent); opacity: .6; }
.refs-card li:target { opacity: 1; }
/* 旧 .refs 面板样式不再使用，保留 cite 上标 */
.cite { line-height: 0; }
.cite a { color: var(--accent); text-decoration: none; font-size: .8em; }

/* ---------- 悬浮目录：毛玻璃面板 ---------- */
.toc {
  position: fixed; top: 130px; right: 26px; z-index: 8;
  width: 200px; max-height: 62vh; overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: rgba(11, 14, 19, .6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: none;
}
.toc.show { display: block; }
.toc-title { color: var(--dim); font-size: 11px; letter-spacing: 3px; margin-bottom: 8px; }
.toc a {
  display: block; padding: 3px 0 3px 10px;
  border-left: 1px solid var(--border);
  color: var(--dim); font-size: 12px; text-decoration: none;
  transition: color .2s, border-color .2s;
}
.toc a.l3 { padding-left: 22px; font-size: 11.5px; }
.toc a .mj {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 0 3px;
  vertical-align: -4px;
}
.toc a .tile {
  width: 14px;
  border-radius: 1.5px;
  box-shadow:
    inset 0 0 0 1px rgba(48, 58, 61, .62),
    0 1px 0 #356764;
}
.toc a:hover { color: var(--fg); }
.toc a.on { color: var(--accent); border-left-color: var(--accent); }
.article h2, .article h3 { scroll-margin-top: 90px; }
@media (max-width: 1360px) { .toc { display: none !important; } }

/* ---------- 评论：毛玻璃卡片 ---------- */
.cmts { margin-top: 48px; }
.cmts-title { font-size: 19px; margin-bottom: 16px; }
.cmts-title .accent { color: var(--accent-2); margin-right: 10px; font-weight: 400; }
.cmts-title span:last-child { color: var(--dim); font-size: 13px; font-weight: 400; }
.cmt {
  --cmt-avatar-size: 34px;
  display: grid;
  grid-template-columns: var(--cmt-avatar-size) minmax(0, 1fr);
  column-gap: 12px; align-items: start;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  padding: 14px 16px; margin-bottom: 12px;
  transition: border-color .25s;
}
.cmt:hover { border-color: var(--accent-dim); }
.cmt.author {
  border-left: 2px solid var(--accent);
  background: rgba(61, 220, 232, .04);
}
.cmt-avatar {
  width: var(--cmt-avatar-size); height: var(--cmt-avatar-size);
  display: grid; place-items: center;
}
.cmt-face {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    #090c11;
  background-size: 5px 5px;
  border: 1px solid;
}
.cmt-face::before {
  content: ''; position: absolute; inset: 2px;
  border: 1px solid currentColor; opacity: .18;
}
.cmt-face::after {
  content: ''; position: absolute; right: 2px; bottom: 2px;
  width: 2px; height: 2px; background: var(--face-color);
  box-shadow: 0 0 5px var(--face-color);
}
.cmt-face svg {
  position: relative; z-index: 1;
  width: 78%; height: 78%;
  fill: currentColor; shape-rendering: crispEdges;
  filter: drop-shadow(0 0 2px currentColor);
}
.cmt-face svg .dim { opacity: .38; }
.cmt-main { flex: 1; min-width: 0; }
.cmt-head {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--cmt-avatar-size);
}
.cmt-identity {
  min-width: 0;
  display: flex; align-items: center; gap: 8px;
}
.cmt-name {
  min-width: 0; max-width: 20ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; font-size: 13px; line-height: 1.25;
}
.cmt-tag {
  flex-shrink: 0;
  color: var(--accent); font-size: 10px; padding: 0 5px;
  border: 1px solid var(--accent-dim); background: rgba(61, 220, 232, .06);
}
.cmt-date {
  flex-shrink: 0; margin-left: auto;
  color: var(--dim); font-size: 11px; line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cmt-text {
  color: #b9c1cd; font-size: 13.5px; margin: 3px 0 0; line-height: 1.75; word-break: break-word;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.cmt-empty { color: var(--dim); font-size: 13px; }
/* 点赞与回复 */
.cmt-acts { display: flex; align-items: center; gap: 12px; min-height: 20px; margin-top: 6px; }
.cmt-like, .cmt-replybtn {
  background: none; border: 0; padding: 0;
  color: var(--dim); font-family: var(--mono); font-size: 11.5px;
  cursor: pointer; transition: color .2s;
}
.cmt-like .h { margin-right: 4px; }
.cmt-like:hover, .cmt-replybtn:hover { color: var(--accent-2); }
.cmt-like.liked { color: var(--accent-2); }
.cmt-like.liked .h { text-shadow: 0 0 10px rgba(255, 92, 138, .5); }
.cmt-like.pop { animation: likepop .25s; }
/* 回复线程：嵌在父卡内，发丝线分隔 */
.cmt-children {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.cmt-children .cmt {
  --cmt-avatar-size: 28px;
  margin-bottom: 8px; padding: 10px 12px;
  background: rgba(255, 255, 255, .02);
  backdrop-filter: none;
}
.cmt-children .cmt:last-child { margin-bottom: 0; }
.cmt-to {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--dim); font-size: 11px;
}
.cmt-to::before { content: '↳ '; color: var(--accent); opacity: .7; }
.cmt-to b { color: var(--accent); font-weight: 400; }
/* 行内回复表单 */
.cmt-replyform {
  margin: 10px 0 6px; display: grid; gap: 8px;
  padding: 12px;
  border: 1px solid var(--accent-dim);
  background: rgba(61, 220, 232, .04);
}
.cmt-replyform textarea {
  background: rgba(14, 18, 24, .8); color: var(--fg);
  border: 1px solid var(--border); padding: 8px 10px;
  font-family: var(--mono); font-size: 13px; outline: none; resize: vertical;
}
.cmt-replyform textarea:focus { border-color: var(--accent-dim); }
.cmt-replyform .rf-row { display: flex; gap: 10px; }
.cmt-replyform button {
  background: none; cursor: pointer; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--border); color: var(--dim); padding: 4px 12px;
  transition: color .2s, border-color .2s;
}
.cmt-replyform button[type=submit] { color: var(--accent); border-color: var(--accent-dim); }
.cmt-replyform button:hover { color: var(--accent); border-color: var(--accent); }

.cmt-form {
  margin-top: 20px; display: grid; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.cmt-form input, .cmt-form textarea {
  background: rgba(14, 18, 24, .8); color: var(--fg);
  border: 1px solid var(--border); padding: 9px 12px;
  font-family: var(--mono); font-size: 13px; outline: none; resize: vertical;
}
.cmt-form input:focus, .cmt-form textarea:focus { border-color: var(--accent-dim); }
.cmt-submit {
  justify-self: end; background: none; cursor: pointer;
  border: 1px solid var(--accent-dim); color: var(--accent);
  font-family: var(--mono); font-size: 13px; padding: 7px 18px;
  transition: background .2s, color .2s;
}
.cmt-submit:hover { background: var(--accent); color: var(--bg); }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .page { width: 100%; max-width: 100%; padding: 0 14px; }
  .nav { top: 10px; width: calc(100% - 20px); border-radius: 0; }
  .nav-dots, .nav-title { display: none; }
  .nav-inner { display: block; padding: 8px 10px 7px; }
  .logo {
    display: block; width: max-content;
    margin-bottom: 5px; font-size: 12px; line-height: 1.3;
  }
  .nav-links {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
    width: 100%; gap: 0; align-items: center;
  }
  .post-nav-links {
    display: flex; justify-content: flex-end;
    gap: 12px; width: 100%;
  }
  .post-nav-links a, .post-nav-links .search-btn {
    width: auto; flex: 0 0 auto; padding-inline: 4px;
  }
  .nav-links a, .search-btn {
    min-width: 0; padding: 3px 0;
    font-size: 11.5px; line-height: 1.25;
    text-align: center; white-space: nowrap;
  }
  .nav-links a::before, .nav-links a::after { content: none; }
  .clock { display: none; }
  .pane-left { padding: 88px 0 0; }
  .pane-left .hero { min-height: auto; padding: 30px 0 50px; }
  .nf { gap: 16px; }
  .nf-art { font-size: 12px; }
  .nf-info p { font-size: 12.5px; }
  .nf-info .k { width: 56px; font-size: 12px; }
  .nf-info p > *:last-child { padding-left: 8px; overflow-wrap: anywhere; }
  .nf-ascii-wordmark { min-height: 0; margin-top: -2px; }
  .nf-ascii-wordmark pre { font-size: 11px; }
  .nf-ascii-role { font-size: 9px; }
  .section { padding: 50px 0 18px; scroll-margin-top: 88px; }
  .sec-title { font-size: 22px; line-height: 1.3; }
  .sec-title::after { margin-left: 12px; }
  .sec-title .accent { margin-right: 8px; }
  .sec-no { margin-right: 8px; font-size: 12px; }
  .sec-en { margin-left: 10px; font-size: 10px; letter-spacing: 2px; }
  .sec-desc { margin: 5px 0 22px; font-size: 12px; line-height: 1.6; }
  .essay-card, .project-card { padding: 17px 16px; }
  .essay-title { font-size: 16px; line-height: 1.5; }
  .essay-summary, .project-desc { font-size: 13px; }
  .lang-bar { margin: -17px -16px 12px; }

  /* 手机上便签回到文档流，避免桌面坐标撑宽页面和截断内容。 */
  .notes-board {
    display: grid; gap: 10px;
    min-height: 0; padding: 10px; overflow: hidden;
  }
  .thought {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 100%; transform: none;
    cursor: default; touch-action: pan-y;
    transition: border-color .2s, box-shadow .2s;
  }
  .thought:hover, .thought.dragging { transform: none; }

  /* 电影票去掉手机上占宽但信息密度很低的票根栏。 */
  .ticket-stub { display: none; }
  .ticket-body { padding: 14px; }
  .film-head { gap: 8px; }
  .film-title { font-size: 15px; }
  .film-review { font-size: 13px; }

  .shelf-shelf, .cflow { max-width: 100%; overscroll-behavior-x: contain; }
  .thought-head { flex-wrap: wrap; gap: 2px 14px; }
  .reader-body { padding: 22px 20px 32px; }
  .post-main { padding: 110px 0 30px; }
  .post { min-width: 0; padding: 26px 17px 23px; }
  .article { min-width: 0; }
  .iw { padding: 14px; }
  .iw-choices { grid-template-columns: 1fr; gap: 6px; }
  .iw-choices button {
    min-height: 40px; margin-left: 0;
    padding: 6px 8px; font-size: 11px;
  }
  .iw-loop { grid-template-columns: 1fr; gap: 4px; }
  .iw-loop-arrow { transform: rotate(90deg); padding: 2px 0; }
  .cmt {
    --cmt-avatar-size: 30px;
    column-gap: 10px; padding: 12px;
  }
  .cmt-children .cmt { --cmt-avatar-size: 26px; padding: 10px; }
  .cmt-head { align-items: flex-start; gap: 8px; }
  .cmt-identity { flex-wrap: wrap; gap: 4px 7px; }
  .cmt-name { max-width: 14ch; }
  .cmt-date { font-size: 10px; padding-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   新文章互动组件
   仅补充组件级样式；继续使用本站现有青 / 粉 / 绿多色变量。
   ============================================================ */
.iw-choices.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iw-choices.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 排名投影 */
.iw-rank-weights {
  margin: 0 0 10px; color: var(--dim);
  font: 10.5px/1.5 var(--mono);
}
.iw-rank-head, .iw-rank-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.5fr) 62px;
  gap: 10px; align-items: center;
}
.iw-rank-head {
  padding: 0 2px 6px; border-bottom: 1px solid var(--border);
  color: var(--dim); font: 10px/1.4 var(--mono);
}
.iw-rank-head .ghost-col { text-align: right; opacity: .7; }
.iw-rank { position: relative; margin-top: 2px; }
.iw-rank-row {
  position: absolute; left: 0; right: 0;
  height: 40px; padding: 0 2px;
  transition: transform .5s cubic-bezier(.22, .9, .3, 1);
}
.iw-rank-no {
  color: var(--accent); font: 12px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.iw-rank-name {
  overflow: hidden; color: var(--fg);
  font-size: 13px; text-overflow: ellipsis; white-space: nowrap;
}
.iw-rank-score {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.iw-rank-score .trk {
  flex: 1; height: 6px; overflow: hidden; background: #18202b;
}
.iw-rank-score .trk i {
  display: block; width: 0; height: 100%;
  background: var(--accent); box-shadow: 0 0 10px var(--glow);
  transition: width .5s ease-out;
}
.iw-rank-score b {
  min-width: 34px; color: var(--fg);
  font: 11px/1 var(--mono); text-align: right;
  font-variant-numeric: tabular-nums;
}
.iw-rank-ghost {
  height: 6px; overflow: hidden;
  background: #18202b; opacity: .6;
}
.iw-rank-ghost i {
  display: block; height: 100%; background: var(--dim);
}

/* 攻略渗透率 */
.iw-slider-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; color: var(--dim);
  font: 11px/1.5 var(--mono);
}
.iw-slider-row input[type="range"] {
  flex: 1; min-width: 0;
  background: transparent; accent-color: var(--accent);
}
.iw-slider-row strong {
  min-width: 38px; color: var(--accent);
  font: 12px/1 var(--mono); text-align: right;
  font-variant-numeric: tabular-nums;
}
.iw-meta-guide {
  margin-top: 14px; padding: 9px 10px;
  border-left: 1px solid var(--accent-dim);
}
.iw-meta-guide span {
  display: block; color: var(--dim);
  font: 10.5px/1.4 var(--mono);
}
.iw-meta-guide strong {
  display: block; margin-top: 5px;
  color: var(--accent); font-size: 13.5px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 600; line-height: 1.55;
}

/* 两遍观看 */
.iw-tp-list { border-top: 1px solid var(--border); }
.iw-tp-row {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr);
  gap: 12px; padding: 11px 2px;
  border-bottom: 1px solid var(--border);
}
.iw-tp-scene {
  color: var(--dim); font: 11px/1.7 var(--mono);
}
.iw-tp-text {
  color: var(--fg); font-size: 13px; line-height: 1.75;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  transition: opacity .14s linear;
}

/* Windows 经典扫雷：开篇先伪装成一张静止截图。 */
.minesweeper-window-host {
  margin: 4px 0 30px;
  min-width: 0;
  overflow-anchor: none;
}
.mine-window-resizing {
  overflow-anchor: none;
  scroll-behavior: auto !important;
}
.article .wm-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: visible;
}
.wm-window {
  --wm-cell: 24px;
  --wm-bevel: 3px;
  --wm-board-width: 192px;
  --wm-board-height: 192px;
  --wm-surface: #c0c0c0;
  --wm-face: #dfdfdf;
  --wm-highlight: #fff;
  --wm-shadow: #808080;
  --wm-frame: #0a0a0a;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 20px 20px 1fr;
  flex: 0 0 auto;
  padding: 3px;
  overflow: visible;
  border: 0;
  outline: 0;
  background: var(--wm-surface);
  color: #000;
  box-shadow:
    inset -1px -1px var(--wm-frame),
    inset 1px 1px var(--wm-face),
    inset -2px -2px var(--wm-shadow),
    inset 2px 2px var(--wm-highlight);
  font-family: "Pixelated MS Sans Serif", "Win95", Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
  transition:
    width .38s cubic-bezier(.22, .84, .28, 1),
    height .38s cubic-bezier(.22, .84, .28, 1);
}
.wm-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  box-sizing: border-box;
  height: 20px;
  padding: 3px 2px 3px 3px;
  background: #000080;
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0;
  text-shadow: none;
  user-select: none;
}
.wm-window[data-controls="ready"]:not(.is-maximized) .wm-titlebar {
  cursor: move;
  touch-action: none;
}
.wm-window[data-controls="ready"] .wm-window-actions {
  cursor: default;
}
html.mine-window-dragging,
html.mine-window-dragging body {
  cursor: move;
  user-select: none;
}
.wm-window.is-displaced:not(.is-maximized) {
  z-index: 18;
  box-shadow:
    inset -1px -1px var(--wm-frame),
    inset 1px 1px var(--wm-face),
    inset -2px -2px var(--wm-shadow),
    inset 2px 2px var(--wm-highlight),
    0 22px 46px rgba(0, 0, 0, .34),
    0 5px 13px rgba(0, 0, 0, .28);
}
.wm-window.is-dragging {
  z-index: 19;
  transition: none;
  will-change: left, top;
}
.wm-title {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
}
.article .wm-title img {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
}
.wm-window-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.wm-window-actions button {
  box-sizing: border-box;
  display: block;
  width: 16px;
  height: 14px;
  min-width: 16px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background-color: var(--wm-surface);
  background-repeat: no-repeat;
  color: #000;
  cursor: default;
  box-shadow:
    inset -1px -1px var(--wm-frame),
    inset 1px 1px var(--wm-highlight),
    inset -2px -2px var(--wm-shadow),
    inset 2px 2px var(--wm-face);
}
.wm-window-actions button:disabled {
  opacity: 1;
  pointer-events: none;
}
.wm-window-actions button:not(:disabled):active {
  box-shadow:
    inset 1px 1px var(--wm-frame),
    inset -1px -1px var(--wm-highlight);
  background-position-x: calc(50% + 1px);
  background-position-y: calc(50% + 1px);
}
.wm-window-actions button:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}
.wm-window-actions .wm-minimize {
  background-image: url("../img/minesweeper/minimize.svg");
  background-position: left 4px bottom 3px;
}
.wm-window-actions .wm-maximize {
  background-image: url("../img/minesweeper/maximize.svg");
  background-position: left 3px top 2px;
}
.wm-window-actions .wm-close {
  background-image: url("../img/minesweeper/close.svg");
  background-position: left 4px top 3px;
}
.wm-window.is-maximized .wm-window-actions .wm-maximize {
  background-image: url("../img/minesweeper/restore.svg");
  background-position: left 3px top 2px;
}
.wm-menubar {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 1px 3px 2px;
  background: var(--wm-surface);
  color: #000;
  user-select: none;
}
.wm-menu-trigger,
.wm-help {
  display: inline-flex;
  align-items: center;
  height: 17px;
  margin: 0;
  padding: 1px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: 11px/15px "Pixelated MS Sans Serif", "Win95", Arial, sans-serif;
  white-space: nowrap;
}
.wm-menu-trigger { cursor: default; }
.wm-menu-trigger:disabled {
  color: #000;
  opacity: 1;
}
.wm-menu-trigger:not(:disabled):hover,
.wm-menu-trigger[aria-expanded="true"] {
  background: #000080;
  color: #fff;
}
.wm-menu-trigger:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: -3px;
}
.wm-help { pointer-events: none; }
.wm-game-menu[hidden] { display: none; }
.wm-game-menu {
  position: absolute;
  z-index: 20;
  top: 19px;
  left: 2px;
  box-sizing: border-box;
  width: 148px;
  padding: 3px;
  border: 0;
  outline: 0;
  background: var(--wm-surface);
  box-shadow:
    inset -1px -1px var(--wm-frame),
    inset 1px 1px var(--wm-face),
    inset -2px -2px var(--wm-shadow),
    inset 2px 2px var(--wm-highlight),
    2px 2px 0 rgba(0, 0, 0, .42);
}
.wm-game-menu button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 23px;
  margin: 0;
  padding: 2px 5px 2px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  cursor: default;
  text-align: left;
  font: 11px/1.2 "Pixelated MS Sans Serif", "Win95", Arial, sans-serif;
}
.wm-game-menu button[data-action="new"] {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-left: 22px;
}
.wm-game-menu button:hover,
.wm-game-menu button:focus-visible {
  outline: none;
  background: #000080;
  color: #fff;
}
.wm-game-menu button i {
  display: inline-flex;
  justify-content: center;
  font-style: normal;
  font-weight: 700;
}
.wm-game-menu kbd {
  background: transparent;
  color: inherit;
  font: 11px/1 "Pixelated MS Sans Serif", "Win95", Arial, sans-serif;
}
.wm-menu-separator {
  display: block;
  height: 0;
  margin: 3px 2px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #fff;
}
.wm-client {
  min-width: 0;
  padding: 6px;
  overflow: visible;
  background: var(--wm-surface);
  transition: opacity .12s linear;
}
.wm-dashboard {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  justify-items: center;
  width: calc(var(--wm-board-width) + 6px);
  height: 42px;
  margin: 0 auto;
  padding: 4px 5px;
  border: 0;
  background: var(--wm-surface);
  box-shadow:
    inset -1px -1px var(--wm-highlight),
    inset 1px 1px var(--wm-shadow),
    inset -2px -2px var(--wm-face),
    inset 2px 2px var(--wm-frame);
  transition: width .38s cubic-bezier(.22, .84, .28, 1);
}
.wm-led {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  gap: 1px;
  width: 50px;
  height: 30px;
  padding: 2px 2px 1px;
  overflow: hidden;
  border: 0;
  background: #050000;
  box-shadow:
    inset -1px -1px var(--wm-highlight),
    inset 1px 1px var(--wm-frame),
    inset -2px -2px var(--wm-face),
    inset 2px 2px var(--wm-shadow);
}
.wm-digit {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 23px;
  flex: 0 0 13px;
}
.wm-digit i {
  position: absolute;
  display: block;
  background: #300000;
}
.wm-digit i.on {
  background: #ff1b0b;
  box-shadow: 0 0 3px rgba(255, 24, 8, .42);
}
.wm-digit .seg-a,
.wm-digit .seg-d,
.wm-digit .seg-g {
  left: 3px;
  width: 7px;
  height: 2px;
}
.wm-digit .seg-a { top: 1px; }
.wm-digit .seg-g { top: 10px; }
.wm-digit .seg-d { bottom: 0; }
.wm-digit .seg-b,
.wm-digit .seg-c,
.wm-digit .seg-e,
.wm-digit .seg-f {
  width: 2px;
  height: 8px;
}
.wm-digit .seg-b { top: 2px; right: 1px; }
.wm-digit .seg-c { right: 1px; bottom: 2px; }
.wm-digit .seg-e { left: 1px; bottom: 2px; }
.wm-digit .seg-f { top: 2px; left: 1px; }
.wm-face {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: var(--wm-surface);
  box-shadow:
    inset -1px -1px var(--wm-frame),
    inset 1px 1px var(--wm-highlight),
    inset -2px -2px var(--wm-shadow),
    inset 2px 2px var(--wm-face);
  pointer-events: none;
  user-select: none;
}
.wm-face:disabled { opacity: 1; }
.wm-window[data-state="active"] .wm-face:not(:disabled) {
  pointer-events: auto;
  cursor: default;
}
.wm-window[data-state="active"] .wm-face:not(:disabled):active {
  box-shadow:
    inset 1px 1px var(--wm-frame),
    inset -1px -1px var(--wm-highlight);
}
.wm-window[data-state="active"] .wm-face:not(:disabled):active img {
  transform: translate(1px, 1px);
}
.article .wm-face img {
  display: block;
  width: 20px;
  height: 20px;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
}
.wm-board-frame {
  box-sizing: border-box;
  width: calc(var(--wm-board-width) + 6px);
  height: calc(var(--wm-board-height) + 6px);
  margin: 6px auto 0;
  overflow: hidden;
  padding: 3px;
  border: 0;
  background: #808080;
  box-shadow:
    inset -1px -1px var(--wm-highlight),
    inset 1px 1px var(--wm-shadow),
    inset -2px -2px var(--wm-face),
    inset 2px 2px var(--wm-frame);
  transition:
    width .38s cubic-bezier(.22, .84, .28, 1),
    height .38s cubic-bezier(.22, .84, .28, 1),
    opacity .12s linear,
    transform .12s ease-out;
}
.wm-board {
  display: grid;
  width: var(--wm-board-width);
  height: var(--wm-board-height);
  overflow: hidden;
  background: #c0c0c0;
}
.wm-cell {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wm-cell);
  height: var(--wm-cell);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: #000;
  cursor: default;
  font: 700 clamp(8px, calc(var(--wm-cell) * .72), 16px)/1 "Pixelated MS Sans Serif", "Win95", Arial, sans-serif;
  text-align: center;
  user-select: none;
}
.wm-cell:disabled { opacity: 1; color: inherit; }
.wm-cell.is-closed {
  border: var(--wm-bevel) solid;
  border-color: var(--wm-highlight) var(--wm-shadow) var(--wm-shadow) var(--wm-highlight);
  background: var(--wm-surface);
  box-shadow: none;
}
.wm-cell.is-closed.is-pressed {
  border: 1px solid var(--wm-shadow);
  background: var(--wm-surface);
  box-shadow: none;
}
.wm-cell.is-open {
  border: 0;
  background: #c0c0c0;
  box-shadow: inset 1px 1px #808080;
}
.wm-window[data-state="active"] .wm-cell:not(:disabled):focus-visible {
  z-index: 1;
  outline: 1px dotted #000;
  outline-offset: -4px;
}
.article .wm-cell img {
  display: block;
  width: min(16px, 82%);
  height: min(16px, 82%);
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
  pointer-events: none;
}
.wm-cell.n1 { color: #0000ff; }
.wm-cell.n2 { color: #008000; }
.wm-cell.n3 { color: #ff0000; }
.wm-cell.n4 { color: #000080; }
.wm-cell.n5 { color: #800000; }
.wm-cell.n6 { color: #008080; }
.wm-cell.n7 { color: #000; }
.wm-cell.n8 { color: #808080; }
.wm-cell.is-questioned {
  color: #000;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
}
.wm-cell.is-exploded { background: #f00000; }
.wm-cell.is-wrong::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f00000;
  font: 700 calc(var(--wm-cell) * .8)/1 Arial, sans-serif;
}
.wm-window.is-changing .wm-board-frame {
  opacity: 0;
  transform: scale(.985);
}
.wm-window.is-changing .wm-dashboard { opacity: .78; }
.wm-caption {
  display: block;
  margin: 8px 0 0;
  color: #7a8796;
  font: 11px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: center;
}
.wm-caption [data-figure-title] {
  display: inline-block;
  transition: color .18s linear, opacity .18s linear;
}
.wm-caption [data-figure-title].is-renamed {
  color: #8391a2;
  animation: wm-caption-reveal .32s ease-out;
}
@keyframes wm-caption-reveal {
  from { opacity: .25; transform: translateY(-2px); }
  to { opacity: 1; transform: none; }
}

html.mine-window-maximized,
html.mine-window-maximized body {
  overflow: hidden !important;
}
html.mine-window-maximized .post {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.mine-window-maximized .page {
  z-index: auto !important;
}
.wm-window.is-maximized {
  position: fixed;
  inset: 0;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 10040;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none;
  max-height: none;
  margin: 0;
  box-shadow: none;
  transition: none;
}
.wm-window.is-maximized .wm-client {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
}
.wm-window.is-maximized .wm-dashboard,
.wm-window.is-maximized .wm-board-frame {
  flex: 0 0 auto;
}
.wm-window.is-maximized + .wm-caption {
  visibility: hidden;
}
.minesweeper-window-host.is-minimizing .wm-caption,
.minesweeper-window-host.is-restoring .wm-caption {
  opacity: 0;
}
.minesweeper-window-host.is-restoring .wm-window {
  opacity: 0;
}
.minesweeper-window-host.is-minimized {
  margin-block: 0;
}
.minesweeper-window-host.is-minimized .wm-figure {
  display: none;
}
.minesweeper-window-host.is-closed {
  display: none;
}

/* 最小化目的地：Aqua 风格 Dock，窗口收缩本身仍使用 9x 式分段运动。 */
.wm-dock[hidden] { display: none; }
.wm-dock {
  position: fixed;
  z-index: 10060;
  left: 50%;
  bottom: 13px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 11px 10px;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(249, 252, 255, .56), rgba(145, 158, 178, .42)),
    rgba(210, 220, 234, .3);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .42),
    inset 0 1px rgba(255, 255, 255, .82),
    inset 0 -1px rgba(41, 52, 69, .25);
  opacity: 0;
  transform: translate(-50%, calc(100% + 30px)) scale(.92);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  transition: opacity .2s linear, transform .26s cubic-bezier(.18, .82, .28, 1);
}
.wm-dock::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 5px;
  left: 9px;
  height: 1px;
  background: rgba(255, 255, 255, .56);
}
.wm-dock.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.wm-dock-app {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 54px;
  min-width: 50px;
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  color: #fff;
  cursor: default;
  transition: transform .16s ease-out;
}
.wm-dock-app:hover,
.wm-dock-app:focus-visible {
  outline: none;
  transform: translateY(-5px) scale(1.16);
}
.wm-dock-app-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72) 0 45%, rgba(255, 255, 255, .08) 46%),
    linear-gradient(145deg, #263f98, #0a7fb0 56%, #64bdd0);
  box-shadow:
    0 5px 10px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(0, 0, 0, .24);
}
.wm-dock-app-icon::after {
  content: "";
  position: absolute;
  inset: 6px 5px 7px;
  border: 2px solid #fff;
  border-right-color: #6f7782;
  border-bottom-color: #6f7782;
  background: #c0c0c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .42);
}
.wm-dock-app-icon img {
  position: relative;
  z-index: 1;
  display: block;
  width: 18px;
  height: 18px;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
}
.wm-dock-app > i {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(20, 27, 38, .9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .36);
}
.wm-dock-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 5px 8px 6px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 7px;
  background: rgba(43, 49, 59, .88);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .34);
  color: #fff;
  font: 11px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px) scale(.96);
  transition: opacity .12s linear, transform .12s ease-out;
  white-space: nowrap;
}
.wm-dock-app:hover .wm-dock-tooltip,
.wm-dock-app:focus-visible .wm-dock-tooltip {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.wm-dock.is-receiving .wm-dock-app-icon {
  animation: wm-dock-bounce .46s steps(6, end);
}
@keyframes wm-dock-bounce {
  0%, 100% { transform: translateY(0); }
  42% { transform: translateY(-9px); }
  72% { transform: translateY(-3px); }
}

/* 扫雷局面：只保留选择、棋盘和一句结论。 */
.ms-lab {
  --ms-ui-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 0;
  border-color: #26303c;
  background: rgba(8, 12, 18, .54);
  font-family: var(--ms-ui-font);
  font-synthesis: none;
}
.ms-lab-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}
.ms-lab-tabs button {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 38px;
  margin: 0 0 0 -1px;
  padding: 7px 9px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font: 12px/1.25 var(--ms-ui-font);
  text-align: center;
}
.ms-lab-tabs button:first-child { margin-left: 0; border-left: 0; }
.ms-lab-tabs button:hover { color: var(--fg); }
.ms-lab-tabs button[aria-pressed="true"] {
  color: var(--accent);
  background: rgba(61, 220, 232, .04);
  box-shadow: inset 0 -2px var(--accent);
}
.ms-lab-tabs button:focus-visible {
  z-index: 1;
  outline: 1px dashed var(--accent);
  outline-offset: -3px;
}
.ms-lab-toggle {
  display: inline-flex;
  min-height: 0;
  margin: 12px 14px 0;
  border: 1px solid var(--border);
}
.ms-lab-toggle:empty { display: none; }
.ms-lab-toggle button {
  min-height: 28px;
  margin: 0;
  padding: 5px 9px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font: 11px/1.35 var(--ms-ui-font);
}
.ms-lab-toggle button:first-child { border-left: 0; }
.ms-lab-toggle button:hover { color: var(--fg); }
.ms-lab-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #071014;
}
.ms-lab-body {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 14px;
}
.ms-stage {
  min-width: 0;
}
.ms-stage-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  opacity: 0;
  transition: opacity .14s linear;
}
.ms-stage-inner.is-visible {
  opacity: 1;
}
.article .ms-fig {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.ms-fig figcaption {
  min-height: 0;
  margin: 0 0 6px;
  color: #778494;
  font: 11px/1.35 var(--ms-ui-font);
}
.ms-grid {
  --ms-cell: 28px;
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: 0;
  padding: 3px;
  border: 2px solid;
  border-color: #787878 #f7f7f7 #f7f7f7 #787878;
  background: #c0c0c0;
}
.ms-cell,
.ms-gap {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ms-cell);
  height: var(--ms-cell);
  font: 700 15px/1 "Pixelated MS Sans Serif", Arial, sans-serif;
}
.ms-gap { background: transparent; }
.ms-cell.ms-open {
  background: #c0c0c0;
  box-shadow: inset 1px 1px #808080;
}
.ms-cell.ms-shut {
  border: 3px solid;
  border-color: #fff #7b7b7b #7b7b7b #fff;
  background: #c0c0c0;
}
.ms-cell.ms-n1 { color: #0000ff; }
.ms-cell.ms-n2 { color: #008000; }
.ms-cell.ms-n3 { color: #f00000; }
.ms-cell.ms-n4 { color: #000080; }
.ms-cell.ms-n5 { color: #800000; }
.ms-cell.ms-n6 { color: #008080; }
.ms-cell.ms-n7 { color: #000; }
.ms-cell.ms-n8 { color: #808080; }
.article .ms-cell.ms-flag img {
  display: block;
  width: 17px;
  height: 17px;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
}
.ms-cell.ms-mark {
  position: relative;
  color: #081016;
  font: 700 13px/1 "Pixelated MS Sans Serif", Arial, sans-serif;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.ms-analysis {
  min-width: 0;
  padding: 0;
}
.article .ms-reading {
  display: block;
  margin: 0 0 7px;
  color: var(--accent);
  font: 700 12px/1.55 var(--ms-ui-font);
}
.article .ms-analysis p {
  margin: 0;
  color: #aeb7c3;
  font: 12px/1.7 var(--ms-ui-font);
}
.article .ms-lab-note {
  display: block;
  padding: 0 14px 11px;
  color: #647182;
  font: 10px/1.45 var(--ms-ui-font);
}

@media (max-width: 640px) {
  .minesweeper-window-host { margin: 0 0 26px; }
  .ms-lab-tabs button {
    min-height: 44px;
    padding: 7px 5px;
    font-size: 11px;
  }
  .ms-lab-toggle {
    display: flex;
    margin: 10px 10px 0;
  }
  .ms-lab-toggle button {
    flex: 1 1 50%;
    padding-inline: 6px;
  }
  .ms-lab-body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 10px;
  }
  .ms-stage-inner { gap: 11px; }
  .ms-grid { --ms-cell: 26px; }
  .ms-lab-note { padding: 0 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-window,
  .wm-dashboard,
  .wm-board-frame,
  .wm-client,
  .ms-stage-inner,
  .wm-dock,
  .wm-dock-app,
  .wm-dock-tooltip {
    transition: none !important;
  }
  .wm-dock-app-icon { animation: none !important; }
}

/* 微型符号课 */
.iw-ml-row {
  display: grid;
  grid-template-columns: 22px minmax(90px, auto) 1fr;
  gap: 12px; align-items: baseline;
  padding: 8px 2px; border-bottom: 1px solid var(--border);
}
.iw-ml-no { color: var(--dim); font: 11px/1.4 var(--mono); }
.iw-ml-sym {
  color: var(--accent-3); font: 15px/1.4 var(--mono);
  letter-spacing: 2px; white-space: nowrap;
}
.iw-ml-gloss {
  color: var(--fg); font-size: 13px; line-height: 1.7;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.iw-ml-test { border-bottom: 0; }
.iw-ml-test .iw-ml-no, .iw-ml-test .iw-ml-gloss {
  color: var(--accent);
}
.iw-ml-options {
  display: grid; gap: 6px; margin: 6px 0 0;
}
.iw-ml-options button {
  border: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--fg);
  padding: 9px 12px; cursor: pointer; text-align: left;
  font-size: 12.5px; line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  transition: color .2s, border-color .2s, background .2s;
}
.iw-ml-options button:hover {
  color: var(--accent-3); border-color: var(--dim);
}
.iw-ml-options button[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent-dim);
  background: rgba(61, 220, 232, .055);
}
.iw-ml-verdict {
  margin-top: 12px; padding: 8px 12px;
  border-left: 2px solid var(--accent-dim);
  color: var(--fg); font-size: 13px; line-height: 1.75;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 情境衰减 */
.iw-cf-text {
  min-height: 3.4em; margin: 2px 0 14px;
  padding: 10px 14px;
  border-left: 2px solid var(--accent-dim);
  color: var(--fg); font-size: 13.5px; line-height: 1.85;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  transition: opacity .14s linear;
}

/* 雷达实验台 */
.rl-stage { margin: 2px 0 12px; }
.rl-map {
  display: block; width: 100%; max-width: 560px;
  height: auto; margin: 0 auto;
}
.rl-walls rect, .rl-walls polygon {
  fill: rgba(61, 220, 232, .055);
  stroke: var(--dim); stroke-width: 1.2;
}
.rl-walls .rl-crate {
  fill: #18202b; stroke: var(--dim); stroke-width: 1;
}
.rl-site { fill: var(--accent-dim); font: 700 40px/1 var(--mono); }
.rl-callout { fill: var(--dim); font: 10px/1 var(--mono); }
.rl-tag { fill: var(--fg); font: 9px/1 var(--mono); }
.rl-t-dot { fill: var(--rl-t, #ffb454); }
.rl-ct-dot { fill: var(--accent); }
.rl-you { stroke: var(--fg); stroke-width: 1.5; }
.rl-you-tag { fill: var(--fg); }
.rl-cone path { fill: var(--accent); opacity: .14; }
.rl-aim path { stroke: var(--fg); stroke-width: 1.6; }
.rl-arc {
  fill: none; stroke: var(--dim); stroke-width: 1.2;
  stroke-dasharray: 4 5;
}
.rl-nade { fill: var(--rl-t, #ffb454); }
.rl-smoke circle {
  fill: var(--dim); opacity: 0;
  transition: opacity .45s ease-out;
}
.rl-smoke.on circle { opacity: .55; }
.rl-t-ghosts circle { fill: var(--rl-t, #ffb454); opacity: .35; }
.rl-t-ghosts text {
  fill: var(--rl-t, #ffb454); font: 700 11px/1 var(--mono);
}
.rl-chip rect {
  fill: rgba(10, 12, 17, .9); stroke: var(--dim);
  opacity: 0; transition: opacity .3s;
}
.rl-chip text {
  fill: var(--fg); font: 9px/1 var(--mono);
  opacity: 0; transition: opacity .3s;
}
.rl-chip.on rect, .rl-chip.on text { opacity: 1; }
.rl-chip.on rect { stroke: var(--accent-dim); }
.rl-guess {
  fill: none; stroke: var(--rl-t, #ffb454);
  stroke-width: 1.6; stroke-dasharray: 6 6;
  opacity: 0; transition: opacity .4s;
}
.rl-rotate {
  fill: none; stroke: var(--accent); stroke-width: 2.2;
  opacity: 0; transition: opacity .3s;
}
.rl-rotate.on {
  opacity: 1; filter: drop-shadow(0 0 5px var(--glow));
}
.rl-replay {
  border: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--fg);
  padding: 6px 12px; cursor: pointer;
  font: 11px/1.4 var(--mono);
  transition: color .2s, border-color .2s;
}
.rl-replay:hover {
  color: var(--accent); border-color: var(--accent-dim);
}
.rl-layers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; margin: 0 0 12px;
}
.rl-layers button { text-align: left; }
.rl-verdict {
  min-height: 2.6em; margin-top: 10px; padding: 7px 11px;
  border-left: 2px solid var(--accent-dim);
  color: var(--fg); font-size: 12.5px; line-height: 1.7;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.rl-nade { opacity: 0; transition: opacity .2s; }
.rl-nade.fly { opacity: 1; }

@media (max-width: 640px) {
  .tile { width: 18px; }
  .mj-box {
    width: 100%; margin: 12px 0; padding: 9px 8px;
  }
  .mj-box .mj { gap: 1px; row-gap: 4px; }
  .mj-box .tile { width: 20px; }

  .iw-choices.c2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
  .iw-choices.c4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
  .iw-rank-head, .iw-rank-row {
    grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.1fr) 42px;
    gap: 6px;
  }
  .iw-rank-name { font-size: 12px; }
  .iw-rank-score b { min-width: 30px; font-size: 10px; }
  .iw-slider-row { flex-wrap: wrap; }
  .iw-tp-row { grid-template-columns: 1fr; gap: 4px; }

  .ms-grid { --ms-cell: 21px; }
  .ms-stage { gap: 14px; }
  .iw-ml-row { grid-template-columns: 16px auto; }
  .iw-ml-gloss {
    grid-column: 1 / -1; padding-left: 28px;
  }
  .rl-layers { grid-template-columns: 1fr; }
  .rl-callout { font-size: 11px; }
  .rl-tag { font-size: 10px; }
}

/* ---------- 东野圭吾 106 部作品书柜 ---------- */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.hb {
  --hb-amber: #ffc25c;
  --hb-wood: #78572f;
  --hb-wood-dark: #2b2118;
  margin: 34px 0 38px; padding: 0;
  overflow: hidden;
  background: rgba(8, 11, 15, .92);
  border-color: #2a333f;
}
.hb p, .hb button, .hb input, .hb dt, .hb dd {
  font-family: var(--mono);
}
.hb p { text-indent: 0 !important; }
.hb-head { border-bottom: 1px solid #2a333f; }
.hb-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 54px; padding: 12px 16px;
}
.article .hb-title-row h3 {
  margin: 0; color: var(--fg);
  font: 700 16px/1.35 var(--mono);
  letter-spacing: .04em;
}
.article .hb-title-row h3::before { content: none; }
.hb-title-row h3 span { color: var(--fg); margin-right: 8px; }
.article .hb-title-row > p {
  margin: 0; color: var(--accent);
  font: 11px/1.5 var(--mono);
}
.hb-tools {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(215px, .62fr);
  gap: 12px; align-items: center;
  padding: 9px 12px;
  border-top: 1px solid rgba(255, 255, 255, .025);
}
.hb-filter-line { min-width: 0; display: flex; align-items: center; gap: 14px; }
.hb-count {
  flex: 0 0 auto; color: var(--accent);
  font: 11px/1.4 var(--mono); white-space: nowrap;
  padding-right: 14px; border-right: 1px solid var(--border);
}
.hb-filters {
  min-width: 0; display: flex; gap: 15px;
  overflow-x: auto; scrollbar-width: none;
}
.hb-filters::-webkit-scrollbar { display: none; }
.hb-filters button {
  position: relative; flex: 0 0 auto;
  min-height: 30px; padding: 0 1px;
  border: 0; background: transparent; color: var(--dim);
  font: 10.5px/1.3 var(--mono); cursor: pointer;
}
.hb-filters button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.hb-filters button:hover { color: var(--fg); }
.hb-filters button[aria-pressed="true"] { color: var(--accent); }
.hb-filters button[aria-pressed="true"]::after { transform: scaleX(1); }
.hb-search {
  min-width: 0; height: 36px;
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 0 8px 0 10px;
  border: 1px solid #35404d; background: rgba(12, 16, 22, .72);
  color: var(--dim);
}
.hb-search:focus-within { border-color: var(--accent-dim); color: var(--accent); }
.hb-search svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round;
}
.hb-search input {
  min-width: 0; height: 100%; padding: 0;
  border: 0; outline: 0; background: transparent; color: var(--fg);
  font: 10.5px/1.4 var(--mono);
}
.hb-search input::placeholder { color: #687382; opacity: .8; }
.hb kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; min-height: 19px; padding: 0 4px;
  border: 1px solid #394554; background: rgba(255, 255, 255, .025);
  color: #788493; font: 9px/1 var(--mono);
  box-shadow: inset 0 -1px rgba(255, 255, 255, .04);
}
.hb-shelves {
  position: relative; padding: 0 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 24px 100%,
    #090c10;
}
.hb-shelf {
  min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr);
  border-left: 1px solid #2a333f; border-right: 1px solid #2a333f;
}
.hb-shelf + .hb-shelf { border-top: 1px solid #222b35; }
.hb-years {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 6px;
  border-right: 1px solid #2a333f;
  background: linear-gradient(90deg, rgba(255, 194, 92, .035), transparent);
  color: var(--hb-amber); font: 10px/1.2 var(--mono);
}
.hb-years i {
  width: 1px; height: 18px; margin: 5px 0;
  background: linear-gradient(var(--hb-amber), transparent);
  opacity: .6;
}
.hb-book-rail {
  position: relative; min-width: 0; overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 194, 92, .035), transparent 24%),
    linear-gradient(#0d1117, #090c10);
}
.hb-book-rail::before,
.hb-book-rail::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 4;
  pointer-events: none;
}
.hb-book-rail::before {
  top: 0; height: 7px;
  border-top: 1px solid #997048; border-bottom: 1px solid #4c3825;
  background: linear-gradient(90deg, #4d3521, #8b6035 35%, #523721 70%, #76502c);
}
.hb-book-rail::after {
  bottom: 0; height: 11px;
  border-top: 1px solid #a27648; border-bottom: 1px solid #3a2a1c;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px),
    linear-gradient(#805932, #3b2a1b);
  box-shadow: 0 -5px 12px rgba(0, 0, 0, .38);
}
.hb-spines {
  min-width: max-content; height: 155px;
  display: flex; align-items: flex-end; gap: 2px;
  padding: 15px 8px 17px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: #2b3440 transparent;
}
.hb-spines::-webkit-scrollbar { height: 4px; }
.hb-spines::-webkit-scrollbar-thumb { background: #2b3440; }
.hb-spine {
  position: relative; z-index: 1; flex: 0 0 var(--hb-w);
  width: var(--hb-w); height: var(--hb-h); min-height: 0; padding: 5px 2px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  border: 1px solid color-mix(in srgb, var(--hb-spine) 72%, #a7a097);
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.13), transparent 18% 76%, rgba(0,0,0,.3)),
    var(--hb-spine);
  color: rgba(244, 238, 226, .86);
  box-shadow: inset 1px 0 rgba(255,255,255,.09), inset -2px 0 rgba(0,0,0,.22);
  cursor: pointer; transform-origin: bottom center;
  transition: transform .22s cubic-bezier(.2, .75, .25, 1), filter .2s, box-shadow .22s;
}
.hb-spine > span {
  min-height: 0; overflow: hidden;
  writing-mode: vertical-rl; text-orientation: upright;
  font: 8px/1.15 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  letter-spacing: .03em;
}
.hb-spine > small {
  color: rgba(255,255,255,.68); font: 6.8px/1 var(--mono);
  writing-mode: horizontal-tb;
}
.hb-spine:hover {
  z-index: 3; transform: translateY(-5px);
  filter: brightness(1.14);
  box-shadow: 0 7px 13px rgba(0,0,0,.42), inset 1px 0 rgba(255,255,255,.12);
}
.hb-spine.is-selected {
  z-index: 5; transform: translateY(10px) scale(1.075);
  filter: brightness(1.16);
  border-color: var(--hb-amber);
  box-shadow: 0 12px 22px rgba(0,0,0,.66), 0 0 0 1px rgba(255,194,92,.22);
}
.hb-empty {
  margin: 0 !important; padding: 38px 18px;
  border-top: 1px solid var(--border); color: var(--dim) !important;
  text-align: center; font: 11px/1.7 var(--mono) !important;
}
.hb-detail-wrap {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transform: translateY(-8px);
  transition: grid-template-rows .34s cubic-bezier(.2,.75,.25,1), opacity .2s, transform .34s cubic-bezier(.2,.75,.25,1);
}
.hb-detail-wrap.open {
  grid-template-rows: 1fr; opacity: 1; transform: none;
}
.hb-detail {
  min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px;
  margin: 12px; padding: 12px 14px;
  border: 1px solid var(--accent); background: rgba(11, 16, 21, .9);
  box-shadow: inset 0 0 30px rgba(61, 220, 232, .018);
}
.hb-cover {
  position: relative; align-self: start;
  width: 100%; aspect-ratio: 2 / 3;
  overflow: hidden; border: 1px solid #424b56;
  background: #11161c;
  box-shadow: 0 12px 22px rgba(0,0,0,.38);
}
.hb-cover-fallback {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 13px 9px 12px; text-align: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 35%),
    linear-gradient(160deg, color-mix(in srgb, var(--hb-cover-tone) 75%, #10151b), #0b0e12);
}
.hb-cover-fallback::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid rgba(255,255,255,.16); pointer-events: none;
}
.hb-cover-fallback span, .hb-cover-fallback small {
  position: relative; z-index: 1; color: rgba(255,255,255,.58);
  font: 7px/1.4 var(--mono); letter-spacing: .08em;
}
.hb-cover-fallback strong {
  position: relative; z-index: 1; color: #eee8dc;
  font: 500 13px/1.45 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
.hb-cover img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
}
.hb-cover-status {
  position: absolute; z-index: 3; right: 5px; bottom: 5px;
  padding: 2px 4px; background: rgba(5,8,11,.78);
  color: rgba(255,255,255,.6); font: 7px/1.2 var(--mono);
}
.hb-cover.is-loading::after {
  content: ''; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform-origin: left;
  animation: hb-cover-load 1.1s ease-in-out infinite;
}
@keyframes hb-cover-load {
  0% { transform: scaleX(.08); opacity: .35; }
  60% { transform: scaleX(.82); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.hb-book-info { min-width: 0; display: flex; flex-direction: column; }
.article .hb-book-info .hb-index {
  margin: 1px 0 5px; color: var(--hb-amber);
  font: 9px/1.4 var(--mono);
}
.article .hb-book-info h3 {
  margin: 0; color: var(--fg);
  font: 700 20px/1.35 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
.article .hb-book-info h3::before { content: none; }
.article .hb-book-info .hb-jp {
  margin: 2px 0 9px; color: var(--accent);
  font: 10.5px/1.5 var(--mono);
}
.hb-book-info dl {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 9px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.hb-book-info dl > div {
  display: grid; grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px; padding: 6px 8px 6px 0;
}
.hb-book-info dl > div + div { padding-left: 10px; border-left: 1px solid var(--border); }
.hb-book-info dt { color: var(--dim); font: 8.5px/1.5 var(--mono); }
.hb-book-info dd { min-width: 0; margin: 0; color: #aeb8c4; font: 9.5px/1.5 var(--mono); }
.article .hb-summary {
  margin: 0; color: #bdc5cf;
  font: 13px/1.75 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.hb-detail-nav {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px; align-items: end; margin-top: auto; padding-top: 12px;
}
.hb-detail-nav button {
  min-width: 0; min-height: 38px; padding: 4px 6px;
  display: flex; align-items: center; gap: 7px;
  border: 0; background: transparent; color: var(--dim);
  cursor: pointer; text-align: left;
}
.hb-detail-nav button:hover { color: var(--accent); }
.hb-detail-nav button svg {
  flex: 0 0 17px; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.hb-detail-nav button span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 9.5px/1.4 var(--mono);
}
.hb-detail-nav button small {
  display: block; color: #7b8693; font: 7.5px/1.3 var(--mono);
}
.hb-detail-nav [data-hb-next] { justify-content: flex-end; text-align: right; }
.hb-detail-nav .hb-return {
  justify-content: center; min-height: 34px; padding: 5px 9px;
  border: 1px solid var(--accent); color: var(--accent);
  font: 9.5px/1.3 var(--mono); white-space: nowrap;
}
.hb-return kbd { margin-left: 3px; }
.hb-source {
  padding: 7px 12px; border-top: 1px solid var(--border);
  color: #5f6976; text-align: right;
  font: 7.5px/1.5 var(--mono); letter-spacing: .01em;
}

@media (max-width: 760px) {
  .hb-tools { grid-template-columns: 1fr; }
  .hb-search { width: 100%; }
}
@media (max-width: 640px) {
  .hb { margin: 28px -5px 32px; }
  .hb-title-row {
    align-items: flex-start; min-height: 0; padding: 12px;
  }
  .article .hb-title-row h3 { font-size: 13px; }
  .article .hb-title-row > p { font-size: 9px; white-space: nowrap; }
  .hb-tools { gap: 8px; padding: 8px; }
  .hb-filter-line { display: block; }
  .hb-count {
    display: block; width: max-content; margin-bottom: 5px; padding: 0;
    border-right: 0; font-size: 9.5px;
  }
  .hb-filters { gap: 13px; }
  .hb-filters button { min-height: 26px; font-size: 9px; }
  .hb-search { height: 34px; }
  .hb-search input { font-size: 9.5px; }
  .hb-shelves { padding: 0 7px; }
  .hb-shelf { grid-template-columns: 38px minmax(0, 1fr); }
  .hb-years { font-size: 8px; padding-inline: 3px; }
  .hb-spines { height: 142px; padding-inline: 6px; }
  .hb-spine { transform-origin: bottom; }
  .hb-spine > span { font-size: 7.5px; }
  .hb-detail {
    grid-template-columns: 92px minmax(0, 1fr); gap: 13px;
    margin: 8px; padding: 10px;
  }
  .article .hb-book-info h3 { font-size: 16px; }
  .article .hb-book-info .hb-jp { margin-bottom: 6px; font-size: 9px; }
  .hb-book-info dl { grid-template-columns: 1fr; margin-bottom: 7px; }
  .hb-book-info dl > div { padding: 4px 0; }
  .hb-book-info dl > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
  .article .hb-summary { font-size: 11px; line-height: 1.65; }
  .hb-detail-nav {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px; padding-top: 8px;
  }
  .hb-detail-nav .hb-return { grid-column: 1 / -1; }
  .hb-source { font-size: 6.5px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-spine, .hb-detail-wrap, .hb-filters button::after { transition: none; }
  .hb-cover.is-loading::after { animation: none; }
}

/* ---------- 东野圭吾书柜：极简版 ---------- */
.hb {
  margin: 44px 0 46px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.hb p, .hb button, .hb input {
  font-family: var(--mono);
}
.hb p {
  text-indent: 0 !important;
}
.hb-head {
  border: 0;
}
.hb-title-row {
  min-height: 0;
  padding: 0 0 14px;
}
.article .hb-title-row h3 {
  margin: 0;
  color: var(--fg);
  font: 500 15px/1.4 var(--mono);
  letter-spacing: .02em;
}
.article .hb-title-row h3::before {
  content: none;
}
.hb-title-row h3 span {
  margin: 0 5px;
  color: #59616b;
}
.hb-title-row h3 b {
  color: var(--fg);
  font-weight: 500;
}
.hb-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px;
  gap: 24px;
  align-items: center;
  padding: 0 0 13px;
  border: 0;
}
.hb-filter-line {
  min-width: 0;
  display: block;
}
.hb-filters {
  min-width: 0;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hb-filters::-webkit-scrollbar {
  display: none;
}
.hb-filters button {
  position: relative;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #68717c;
  font: 10px/1.3 var(--mono);
  cursor: pointer;
}
.hb-filters button::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.hb-filters button:hover,
.hb-filters button[aria-pressed="true"] {
  color: #c4cbd3;
}
.hb-filters button[aria-pressed="true"]::after {
  transform: scaleX(1);
}
.hb-search {
  min-width: 0;
  height: 31px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 0 0 8px;
  border: 0;
  border-bottom: 1px solid #30363e;
  background: transparent;
  color: #68717c;
}
.hb-search:focus-within {
  border-color: #737d88;
  color: #aab2bc;
}
.hb-search svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.hb-search input {
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: 10px/1.4 var(--mono);
}
.hb-search input::placeholder {
  color: #5f6873;
  opacity: 1;
}
.hb-shelves {
  position: relative;
  padding: 0;
  background: transparent;
}
.hb-shelf {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  border-bottom: 1px solid #242a31;
}
.hb-shelf + .hb-shelf {
  border-top: 0;
}
.hb-years {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 10px 8px 0;
  border: 0;
  background: transparent;
  color: #535c67;
  font: 8px/1.2 var(--mono);
  white-space: nowrap;
}
.hb-book-rail {
  position: relative;
  min-width: 0;
  overflow: visible;
  background: transparent;
}
.hb-book-rail::before,
.hb-book-rail::after {
  content: none;
}
.hb-spines {
  min-width: 0;
  height: 125px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 15px 1px 0;
  overflow: hidden;
  scrollbar-width: none;
  transition:
    height .38s cubic-bezier(.2, .75, .25, 1),
    gap .38s cubic-bezier(.2, .75, .25, 1),
    padding .38s cubic-bezier(.2, .75, .25, 1);
}
.hb-spines::-webkit-scrollbar {
  display: none;
}
.hb-spine {
  position: relative;
  z-index: 1;
  flex: 1 1 var(--hb-w);
  width: auto;
  min-width: 12px;
  max-width: 23px;
  height: 104px;
  min-height: 0;
  padding: 6px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 1px 1px 0 0;
  background-color: var(--hb-tone);
  background-image: linear-gradient(90deg, rgba(255,255,255,.05), transparent 28%, rgba(0,0,0,.14));
  background-size: cover;
  background-position: center;
  color: rgba(241, 243, 245, .78);
  box-shadow: none;
  cursor: pointer;
  transform-origin: bottom center;
  transition:
    flex-basis .38s cubic-bezier(.2, .75, .25, 1),
    min-width .38s cubic-bezier(.2, .75, .25, 1),
    max-width .38s cubic-bezier(.2, .75, .25, 1),
    height .38s cubic-bezier(.2, .75, .25, 1),
    transform .22s cubic-bezier(.2, .75, .25, 1),
    filter .2s ease,
    opacity .2s ease,
    box-shadow .28s ease;
}
.hb-spine.has-cover {
  background-image:
    linear-gradient(90deg, rgba(7,9,12,.22), rgba(7,9,12,.05) 45%, rgba(7,9,12,.28)),
    var(--hb-cover);
}
.hb-spine > .hb-spine-label {
  position: relative;
  z-index: 1;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  font: 7.5px/1.15 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  letter-spacing: .03em;
  transition: opacity .14s ease;
}
.hb-spines:not(.has-expanded) .hb-spine:hover,
.hb-spines:not(.has-expanded) .hb-spine:focus-visible {
  z-index: 3;
  outline: 0;
  transform: translateY(-8px);
  filter: brightness(1.12) saturate(.92);
}
.hb-spine.is-selected {
  z-index: 4;
  transform: translateY(-8px);
  filter: brightness(1.08) saturate(.94);
  border: 0;
  box-shadow: inset 0 -2px var(--accent);
}
.hb-empty {
  margin: 0 !important;
  padding: 36px 0;
  border-top: 1px solid #242a31;
  color: #69727c !important;
  text-align: center;
  font: 10px/1.6 var(--mono) !important;
}
.hb-detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-5px);
  transition: grid-template-rows .28s cubic-bezier(.2,.75,.25,1), opacity .18s ease, transform .28s cubic-bezier(.2,.75,.25,1);
}
.hb-detail-wrap.open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}
.hb-detail {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 114px minmax(0, 1fr);
  gap: 26px;
  margin: 0;
  padding: 28px 0 3px;
  border: 0;
  border-top: 1px solid #30363e;
  background: transparent;
  box-shadow: none;
}
.hb-cover {
  position: relative;
  align-self: start;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 0;
  background: #171b20;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.hb-cover-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 9px 12px;
  text-align: center;
  background: var(--hb-cover-tone);
}
.hb-cover-fallback::before {
  content: none;
}
.hb-cover-fallback span,
.hb-cover-fallback small {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.48);
  font: 7px/1.4 var(--mono);
  letter-spacing: .06em;
}
.hb-cover-fallback strong {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.9);
  font: 500 12px/1.45 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
.hb-cover img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hb-cover-status {
  display: none;
}
.hb-book-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.article .hb-book-info h3 {
  margin: 0;
  color: var(--fg);
  font: 600 21px/1.35 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
.article .hb-book-info h3::before {
  content: none;
}
.article .hb-book-info .hb-jp {
  margin: 3px 0 5px;
  color: #747e89;
  font: 9px/1.5 var(--mono);
}
.article .hb-book-info .hb-meta {
  margin: 0 0 15px;
  color: #68717c;
  font: 8px/1.5 var(--mono);
}
.article .hb-summary {
  max-width: 46em;
  margin: 0;
  color: #b6bec7;
  font: 12.5px/1.8 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.hb-detail-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 18px;
}
.hb-detail-nav > span:empty {
  display: none;
}
.hb-detail-nav button {
  min-width: 0;
  min-height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #747e89;
  cursor: pointer;
  text-align: left;
  font: 9px/1.4 var(--mono);
}
.hb-detail-nav button:hover,
.hb-detail-nav button:focus-visible {
  color: var(--fg);
  outline: 0;
}
.hb-detail-nav button svg {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hb-detail-nav button span {
  min-width: 0;
  overflow: visible;
  font: inherit;
}
.hb-detail-nav [data-hb-next] {
  justify-content: flex-start;
  text-align: left;
}
.hb-detail-nav .hb-return {
  min-height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  color: #747e89;
  font: 9px/1.4 var(--mono);
}

@media (max-width: 760px) {
  .hb-tools {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hb-search {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .hb {
    margin: 34px 0 38px;
  }
  .hb-title-row {
    padding: 0 0 12px;
  }
  .article .hb-title-row h3 {
    font-size: 13px;
  }
  .hb-tools {
    padding: 0 0 10px;
  }
  .hb-filters {
    gap: 15px;
  }
  .hb-filters button {
    min-height: 25px;
    font-size: 8.5px;
  }
  .hb-search {
    height: 29px;
  }
  .hb-search input {
    font-size: 9px;
  }
  .hb-shelf {
    grid-template-columns: minmax(0, 1fr);
  }
  .hb-years {
    padding-right: 8px;
    font-size: 7px;
  }
  .hb-spines {
    height: 116px;
    gap: 2px;
  }
  .hb-spine > .hb-spine-label {
    font-size: 7px;
  }
  .hb-spine {
    min-width: 10px;
    height: 96px;
  }
  .hb-detail {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 15px;
    padding-top: 20px;
  }
  .article .hb-book-info h3 {
    font-size: 16px;
  }
  .article .hb-book-info .hb-jp {
    font-size: 8px;
  }
  .article .hb-book-info .hb-meta {
    margin-bottom: 9px;
    font-size: 7px;
  }
  .article .hb-summary {
    font-size: 10.5px;
    line-height: 1.7;
  }
  .hb-detail-nav {
    grid-column: auto;
    flex-wrap: wrap;
    gap: 9px 14px;
    padding-top: 10px;
  }
  .hb-detail-nav .hb-return {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-spine,
  .hb-detail-wrap,
  .hb-filters button::after {
    transition: none;
  }
}

/* 书脊原位展开：选中书变成封面与简介，同行书脊同步让位 */
.hb-inline-library {
  position: relative;
}
.hb-spines.has-expanded {
  height: 168px;
  gap: 2px;
  padding-top: 10px;
}
.hb-spines.has-expanded .hb-spine {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 4px;
  opacity: .72;
  filter: brightness(.78) saturate(.72);
  transform: none;
}
.hb-spines.has-expanded .hb-spine.is-expanded {
  z-index: 5;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: min(360px, calc(100% - 102px));
  min-width: 0;
  max-width: 360px;
  height: 152px;
  padding: 0;
  opacity: 1;
  filter: none;
  box-shadow:
    inset 0 0 0 1px #343b44,
    0 12px 28px rgba(0, 0, 0, .34);
}
.hb-spine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(9, 12, 16, .97);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.hb-spine.is-expanded::before {
  opacity: 1;
}
.hb-spine.is-expanded > .hb-spine-label {
  opacity: 0;
}
.hb-spine > .hb-inline-panel {
  position: absolute;
  inset: 10px;
  z-index: 2;
  min-width: 0;
  max-height: none;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  text-shadow: none;
  font: inherit;
  letter-spacing: normal;
  transform: translateY(6px);
  transition:
    opacity .17s ease,
    transform .28s cubic-bezier(.2, .75, .25, 1),
    visibility 0s linear .2s;
}
.hb-spine.is-expanded .hb-inline-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: .1s, .06s, 0s;
}
.hb-inline-cover {
  width: 84px;
  aspect-ratio: 2 / 3;
  align-self: center;
  background-color: var(--hb-tone);
  background-image: var(--hb-cover);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.hb-inline-copy,
.hb-inline-title,
.hb-inline-jp,
.hb-inline-meta,
.hb-inline-summary {
  min-width: 0;
  display: block;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;
  text-align: left;
  text-shadow: none;
}
.hb-inline-copy {
  align-self: center;
}
.article .hb-inline-title {
  color: var(--fg);
  font: 600 17px/1.35 "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
.article .hb-inline-jp {
  margin-top: 2px;
  color: #747e89;
  font: 8px/1.45 var(--mono);
}
.article .hb-inline-meta {
  margin-top: 5px;
  color: #68717c;
  font: 7px/1.4 var(--mono);
}
.article .hb-inline-summary {
  margin-top: 9px;
  overflow: visible;
  color: #b6bec7;
  font: 11px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

@media (max-width: 640px) {
  .hb-spines.has-expanded {
    height: 164px;
    gap: 1px;
    padding-top: 9px;
  }
  .hb-spines.has-expanded .hb-spine {
    min-width: 2px;
  }
  .hb-spines.has-expanded .hb-spine.is-expanded {
    flex-basis: min(286px, calc(100% - 72px));
    max-width: 286px;
    height: 148px;
  }
  .hb-spine > .hb-inline-panel {
    inset: 9px;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 11px;
  }
  .hb-inline-cover {
    width: 72px;
  }
  .article .hb-inline-title {
    font-size: 15px;
  }
  .article .hb-inline-jp {
    font-size: 7px;
  }
  .article .hb-inline-summary {
    margin-top: 7px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-spines,
  .hb-spine,
  .hb-spine::before,
  .hb-spine > .hb-inline-panel {
    transition: none;
  }
}

/* ---------- 彩蛋成就：发现后出现的低调系统日志 ---------- */
.achievement-modal-open { overflow: hidden; }
.achievement-icon {
  display: inline-block;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("../img/icons/award-fill.svg") center / contain no-repeat;
  mask: url("../img/icons/award-fill.svg") center / contain no-repeat;
}
.achievement-hud[hidden],
.achievement-overlay[hidden] { display: none !important; }
.achievement-hud {
  position: absolute; left: 84px; top: 50%; z-index: 1;
  min-height: 30px; padding: 0 7px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--accent-dim);
  background: rgba(10, 13, 18, .74);
  color: var(--accent);
  font: 9px/1 var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .32), 0 0 16px rgba(61, 220, 232, .04);
  transform: translateY(-50%);
  transition: border-color .18s, color .18s, transform .18s;
}
.achievement-hud:hover {
  border-color: var(--accent);
  transform: translateY(calc(-50% - 2px));
}
.achievement-hud-label { display: none; }
.achievement-hud-count {
  display: none;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.achievement-overlay {
  position: fixed; inset: 0; z-index: 46;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(4, 5, 8, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.achievement-panel {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  background: rgba(10, 13, 18, .96);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .68), 0 0 54px rgba(61, 220, 232, .07);
}
.achievement-panel-head {
  min-width: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.achievement-kicker {
  margin: 0 0 5px;
  color: var(--accent);
  font: 9px/1.35 var(--mono);
  letter-spacing: .14em;
}
.achievement-panel-head h2 {
  margin: 0;
  color: var(--fg);
  font: 700 19px/1.35 var(--mono);
}
.achievement-close {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.achievement-close:hover { color: var(--accent); border-color: var(--accent-dim); }
.achievement-close span {
  width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask: url("../img/icons/x-lg.svg") center / contain no-repeat;
  mask: url("../img/icons/x-lg.svg") center / contain no-repeat;
}
.achievement-overview {
  display: grid; grid-template-columns: auto minmax(100px, 1fr); align-items: center; gap: 18px;
  padding: 11px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .012);
}
.achievement-summary {
  color: var(--dim);
  font: 10px/1.3 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
.achievement-progress {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: #18202b;
}
.achievement-progress i {
  display: block;
  width: 0; height: 100%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
  transition: width .35s ease;
}
.achievement-list {
  min-height: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}
.achievement-card {
  min-width: 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--border);
  border-left-width: 2px;
  background: rgba(255, 255, 255, .012);
}
.achievement-card.is-unlocked {
  border-left-color: var(--accent);
  background: rgba(61, 220, 232, .035);
}
.achievement-card.is-locked { color: var(--dim); opacity: .72; }
.achievement-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.achievement-card-head .achievement-icon {
  width: 13px; height: 13px;
  color: var(--accent);
}
.achievement-card.is-locked .achievement-icon { color: var(--dim); }
.achievement-code {
  color: var(--accent);
  font: 9px/1 var(--mono);
  letter-spacing: .1em;
}
.achievement-card.is-locked .achievement-code { color: var(--dim); }
.achievement-status {
  margin-left: auto;
  color: var(--dim);
  font: 8px/1 var(--mono);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.achievement-card h3 {
  margin: 0 0 4px;
  color: var(--fg);
  font: 700 13px/1.45 var(--mono);
}
.achievement-card.is-locked h3 { color: #8993a1; }
.achievement-card p {
  margin: 0;
  color: var(--dim);
  font: 10.5px/1.65 var(--mono);
}
.achievement-card.is-unlocked p { color: #8e99a8; }
.achievement-panel-foot {
  margin: 0; padding: 10px 22px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 14px;
  color: var(--dim);
  font: 9px/1.4 var(--mono);
}
.achievement-toasts {
  position: fixed; left: 18px; bottom: 68px; z-index: 48;
  width: min(340px, calc(100vw - 36px));
  pointer-events: none;
}
.achievement-toast {
  width: 100%; min-height: 66px;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--accent-dim);
  border-left: 2px solid var(--accent);
  background: rgba(10, 13, 18, .96);
  color: var(--accent);
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .56), 0 0 26px rgba(61, 220, 232, .08);
  transition: opacity .2s ease, transform .2s ease;
}
.achievement-toast.show { opacity: 1; transform: none; }
.achievement-toast-icon { width: 22px; height: 22px; }
.achievement-toast-copy { min-width: 0; display: grid; gap: 4px; }
.achievement-toast-eyebrow {
  color: var(--dim);
  font: 8px/1.2 var(--mono);
  letter-spacing: .14em;
}
.achievement-toast-copy strong {
  overflow: hidden;
  color: var(--fg);
  font: 700 13px/1.35 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .achievement-hud {
    left: auto; right: 10px; top: 7px;
    min-height: 26px; padding-inline: 6px;
    transform: none;
  }
  .achievement-hud-count { display: inline-block; }
  .achievement-hud:hover { transform: translateY(-1px); }
  .achievement-toasts { left: 12px; bottom: 60px; width: calc(100vw - 24px); }
  .achievement-overlay { padding: 10px; align-items: end; }
  .achievement-panel {
    max-height: calc(100dvh - 20px);
    width: 100%;
  }
  .achievement-panel-head { padding: 16px 16px 13px; }
  .achievement-panel-head h2 { font-size: 17px; }
  .achievement-overview {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 16px;
  }
  .achievement-list {
    grid-template-columns: 1fr;
    padding: 9px;
  }
  .achievement-card { padding: 12px; }
  .achievement-panel-foot {
    padding: 9px 16px;
    flex-direction: column;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-hud,
  .achievement-progress i,
  .achievement-toast {
    transition: none;
  }
}