/* ==========================================================================
   设计 04 · 像素动漫风
   亮底高饱和撞色 / 硬边卡片 / 实心投影 / 网点底纹 / 阶梯缺口标签
   夜间转深色霓虹

   设计主张
   --------
   「像素」是骨相，不是让整页变成游戏机：
     · 0 圆角 + 粗描边 + **实心**投影（投影不模糊 —— 像素画里没有高斯模糊）
     · 阶梯缺口（clip-path 切角）只用在无边框的色块上，避免切坏描边
     · 等宽字体承担 HUD 小标签与数字，中文正文仍走无衬线，保证可读性
   「动漫」是皮相：网点底纹（screentone）、分镜式大标题、贴纸感荣誉墙
   ========================================================================== */

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

  --wrap: 1200px;
  --measure: 42rem;
  --gap: 26px;

  /* 亮底：极浅的蓝紫灰，比纯白耐看，也衬得住高饱和撞色 */
  --paper: #eef0f8;
  --surface: #ffffff;
  --surface-2: #f6f7fd;

  --ink: #101024;
  --ink-2: #45456a;
  --ink-3: #5a5a7d;

  /* 描边与实心投影：像素风的两根骨头 */
  --edge: #101024;
  --shadow-ink: #101024;

  /* 高饱和撞色 */
  --brand: #2f45ff;
  --brand-ink: #1c2ac4;
  --pop: #ff2e7e;
  --pop-ink: #d31361;
  --sun: #ffc400;
  --mint: #00a58e;

  --brand-soft: #e4e8ff;
  --pop-soft: #ffe4ef;
  --sun-soft: #fff3cc;

  /**
   * 高饱和色块上的文字色。
   *
   * 这两根是硬约束，不是可调的审美变量：撞色块（brand / pop / sun）本身的
   * 明度决定了上面的文字只能取一端，取反了对比度就掉到 3 出头。
   *   --on-brand   蓝底上的字：浅色主题用白，深色主题品牌蓝变亮 → 改用近黑
   *   --on-bright  黄/品红底上的字：两套主题都用近黑（这两种色始终够亮）
   * 之前几处写死 #fff，深色主题下白字压亮蓝只有 3.5:1，是实打实的可读性问题。
   */
  --on-brand: #ffffff;
  --on-bright: #101024;

  --dot: rgba(16, 16, 36, 0.075);

  /* 兼容底座遗留变量名 */
  --bg: var(--paper);
  --bg-elev: var(--surface);
  --bg-soft: var(--surface-2);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --border: var(--edge);
  --border-strong: var(--edge);
}

[data-theme="dark"] {
  --paper: #0c0c1a;
  --surface: #14142a;
  --surface-2: #1b1b36;

  --ink: #f0f0ff;
  --ink-2: #bcbcdd;
  --ink-3: #9a9ac4;

  /* 深色下描边要比底色亮才看得见；投影同理，用「比底色亮一档」而不是纯黑 */
  --edge: #3d3d74;
  --shadow-ink: #2a2a56;

  --brand: #6b7bff;
  --brand-ink: #8f9bff;
  --pop: #ff5c9b;
  --pop-ink: #ff85b3;
  --sun: #ffd23f;
  --mint: #2ed3b7;

  --brand-soft: #1c1c44;
  --pop-soft: #2c1430;
  --sun-soft: #2e2610;

  /* 深色主题的品牌蓝提亮了，白字压上去只剩 3.5:1 —— 改用近黑 */
  --on-brand: #0c0c1a;
  --on-bright: #101024;

  --dot: rgba(255, 255, 255, 0.055);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--paper);
  /* 网点底纹 —— 动漫分镜里的 screentone，也是「像素」最省的一层质感 */
  background-image: radial-gradient(circle at center, var(--dot) 1.1px, transparent 1.2px);
  background-size: 14px 14px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button {
  font: inherit;
  color: inherit;
}

/* 焦点环：像素风也用硬边，不用模糊光晕 */
:focus-visible {
  outline: 3px solid var(--pop);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* --------------------------------------------------------------------------
   通用零件：标签 / 芯片 / 按钮
   -------------------------------------------------------------------------- */

/* 阶梯缺口 —— 像素画的圆角就是「切掉一格」。这里用 clip-path 切，
   所以只能用在没有描边的实色块上（切了描边会留下缺口）。 */
.px-tag {
  --notch: 5px;
  display: inline-block;
  padding: 5px 11px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  clip-path: polygon(
    0 var(--notch),
    var(--notch) var(--notch),
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    calc(100% - var(--notch)) var(--notch),
    100% var(--notch),
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    var(--notch) 100%,
    var(--notch) calc(100% - var(--notch)),
    0 calc(100% - var(--notch))
  );
}

.px-chip {
  display: inline-block;
  padding: 3px 9px;
  border: 2px solid var(--edge);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.px-chip-link:hover {
  background: var(--brand);
  border-color: var(--brand-ink);
  color: var(--on-brand);
}

.px-btn {
  display: inline-block;
  padding: 12px 22px;
  border: 3px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 4px 4px 0 var(--shadow-ink);
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}
.px-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
.px-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}
.px-btn-primary {
  background: var(--brand);
  border-color: var(--brand-ink);
  color: var(--on-brand);
}
[data-theme="dark"] .px-btn-primary {
  border-color: var(--brand);
}
.px-btn-ghost {
  background: var(--sun);
  border-color: var(--edge);
  color: var(--ink);
}

.px-dot {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   页头：顶栏（HUD）+ 导航条
   -------------------------------------------------------------------------- */

.px-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 3px solid var(--edge);
}

.px-top-inner {
  /* 主题切换器的下拉面板锚在这一层 —— 见文件末尾「主题切换器」一节 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.px-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* 品牌方块 —— 像素画里最常见的「角色头像格」 */
.px-brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 3px solid var(--edge);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 22px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--shadow-ink);
}

.px-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.px-brand-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.px-brand-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.px-top-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.px-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--edge);
  background: var(--surface-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--shadow-ink);
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}
.px-toggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.px-toggle-icon {
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--sun);
  border: 2px solid var(--edge);
}
[data-theme="dark"] .px-toggle-icon {
  background: var(--brand);
}

/* 导航条独立成行：加上荣誉/企业活动/系列后是七个入口，
   和四芯片的主题切换器挤一行必然在窄屏爆掉。 */
.px-nav {
  border-top: 3px solid var(--edge);
  background: var(--surface-2);
}
.px-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.px-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-right: 2px solid var(--edge);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.1s steps(2);
}
.px-nav-item:first-child {
  border-left: 2px solid var(--edge);
}
.px-nav-item:hover {
  background: var(--brand-soft);
}
.px-nav-item.is-active {
  background: var(--brand);
  color: var(--on-brand);
}
.px-nav-key {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.px-nav-item.is-active .px-nav-key {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   首页 · 开场
   -------------------------------------------------------------------------- */

.px-hero {
  position: relative;
  padding: 56px 0 0;
  border-bottom: 3px solid var(--edge);
  background: var(--surface);
  overflow: hidden;
}
/* 斜向速度线 —— 动漫分镜的惯用手法，压在右上角 */
.px-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 46%;
  height: 180%;
  background: repeating-linear-gradient(
    -20deg,
    var(--brand-soft) 0 10px,
    transparent 10px 26px
  );
  transform: rotate(4deg);
  pointer-events: none;
}

.px-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 44px;
}

.px-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.px-hero-dot {
  width: 10px;
  height: 10px;
  background: var(--pop);
  border: 2px solid var(--edge);
}

.px-hero-title {
  margin: 0 0 22px;
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.px-hero-line {
  display: block;
}
/* 关键词用「实色块 + 近黑字」，而不是在文字底下垫一条高亮。
   垫底那条会同时踩两个坑：z-index:-1 的伪元素在父级不构成层叠上下文时
   会被父级背景盖住（等于没画）；就算画得出来，亮黄压品牌蓝也只有 3.8:1。
   整块色底之后对比度是 12:1 量级，观感也更像漫画标题。 */
.px-hero-line em {
  font-style: normal;
  padding: 0 0.14em;
  background: var(--sun);
  color: var(--on-bright);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.px-hero-line-2 em {
  background: var(--pop);
  color: var(--on-bright);
}

.px-hero-lead {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--pop-ink);
}
[data-theme="dark"] .px-hero-lead {
  color: var(--pop);
}

.px-hero-desc {
  margin: 0 0 28px;
  max-width: 34rem;
  color: var(--ink-2);
  font-size: 15.5px;
}

.px-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.px-hero-side {
  display: flex;
  justify-content: center;
}
.px-hero-card {
  margin: 0;
  width: 100%;
  max-width: 320px;
}
.px-hero-card-frame {
  display: block;
  border: 3px solid var(--edge);
  background: var(--surface-2);
  box-shadow: 8px 8px 0 var(--shadow-ink);
}
.px-hero-card-frame img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.px-hero-card-cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 3px solid var(--edge);
  background: var(--sun);
  color: var(--on-bright);
  box-shadow: 5px 5px 0 var(--shadow-ink);
}
.px-hero-card-cap strong {
  font-size: 16px;
}
.px-hero-card-cap span {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* HUD 数据条 */
.px-hud {
  /* position: relative 不是为了定位，是为了**绘制顺序**。
     .px-hero::before 是那条绝对定位的斜向速度线，而绝对定位元素画在
     静态定位的块级后代**之上** —— 不加这行，右上角那条斜纹会盖住 HUD 的第四格，
     「年份」那一项被压在花纹底下看不清。
     对比度探针只看计算样式里的 color/background-color，看不见这种遮挡，
     所以这里必须写清楚原因。 */
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 -3px;
  border: 3px solid var(--edge);
  border-bottom: none;
  background: var(--surface-2);
}
.px-hud-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 20px;
  border-right: 3px solid var(--edge);
}
.px-hud-item:last-child {
  border-right: none;
}
.px-hud-item dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.px-hud-item dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--brand);
}
[data-theme="dark"] .px-hud-item dd {
  color: var(--brand-ink);
}

/* --------------------------------------------------------------------------
   版块通用
   -------------------------------------------------------------------------- */

.px-sec {
  padding: 62px 22px;
}

.px-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--edge);
}
.px-sec-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.px-sec-title {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.px-sec-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   关于我
   -------------------------------------------------------------------------- */

.px-about {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: start;
}
.px-about-text {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--ink-2);
}
.px-about-text:last-child {
  margin-bottom: 0;
}

.px-honor-wall {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.px-honor-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.px-honor-no {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--pop-ink);
}
.px-honor-text {
  font-size: 15px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   服务能力
   -------------------------------------------------------------------------- */

.px-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.px-svc {
  position: relative;
  padding: 28px 24px 26px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
.px-svc-no {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
}
.px-svc-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border: 3px solid var(--edge);
  background: var(--brand-soft);
  color: var(--brand);
}
[data-theme="dark"] .px-svc-icon {
  color: var(--brand-ink);
}
.px-svc-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.px-svc-detail {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   作品
   -------------------------------------------------------------------------- */

.px-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.px-work {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.px-work:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--shadow-ink);
}
.px-work-figure {
  position: relative;
  display: block;
  border-bottom: 3px solid var(--edge);
  background: var(--surface-2);
  overflow: hidden;
}
.px-work-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.px-work-no {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 9px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.px-work-body {
  padding: 18px 20px 22px;
}
.px-work-title {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
}
.px-work-title a:hover {
  color: var(--brand);
}
[data-theme="dark"] .px-work-title a:hover {
  color: var(--brand-ink);
}
.px-work-desc {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   荣誉与活动 —— 贴纸墙
   -------------------------------------------------------------------------- */

.px-gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.px-gal {
  margin: 0;
}
.px-gal-frame {
  display: block;
  border: 3px solid var(--edge);
  background: var(--surface-2);
  box-shadow: 5px 5px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.px-gal:hover .px-gal-frame {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--shadow-ink);
}
.px-gal-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.px-gal-cap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}
.px-gal-kind {
  flex: none;
  padding: 2px 7px;
  border: 2px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
}
.px-gal-kind-honor {
  background: var(--sun);
  color: var(--on-bright);
}
.px-gal-kind-activity {
  background: var(--brand);
  color: var(--on-brand);
}
.px-gal-title {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

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

.px-course-list {
  display: grid;
  gap: var(--gap);
}
.px-course {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  overflow: hidden;
}
.px-course-figure {
  position: relative;
  display: block;
  border-right: 3px solid var(--edge);
  background: var(--surface-2);
}
.px-course-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.px-course-badge {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 11px;
  /* 亮品红底上白字只有 3.5:1，用近黑反而到 5.5:1 */
  background: var(--pop);
  color: var(--on-bright);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
}
.px-course-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px;
}
.px-course-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}
.px-course-desc {
  font-size: 14.5px;
  color: var(--ink-2);
}
.px-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

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

.px-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.px-contact {
  padding: 20px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.px-contact-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.px-contact-value {
  margin: 0;
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  /* 断点由渲染层插的 <wbr> 决定（见 pages.mjs 的 softBreak）；
     这里只兜底「某一段还是太长」的情况，不用 break-all —— 那会在任意位置断。 */
  overflow-wrap: anywhere;
}
a.px-contact-value:hover {
  color: var(--brand);
}
[data-theme="dark"] a.px-contact-value:hover {
  color: var(--brand-ink);
}
.px-contact-qr {
  width: 120px;
  height: 120px;
  margin-top: 14px;
  border: 3px solid var(--edge);
}

/* --------------------------------------------------------------------------
   文章卡片
   -------------------------------------------------------------------------- */

.px-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.px-card {
  display: flex;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.px-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--shadow-ink);
}
.px-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.px-card-cover {
  border-bottom: 3px solid var(--edge);
  background: var(--surface-2);
  overflow: hidden;
}
.px-card-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.px-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  flex: 1;
}
.px-card-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
}
.px-card-index {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  /* 用 pop-ink 而不是 pop：亮品红压白底只有 3.5:1，够不到正文标准 */
  color: var(--pop-ink);
}
.px-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.px-card-dek {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.px-card-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}

/* 近期文章列表 */
.px-recent {
  display: grid;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
.px-recent-item + .px-recent-item {
  border-top: 2px solid var(--edge);
}
.px-recent-link {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  transition: background 0.1s steps(2);
}
.px-recent-link:hover {
  background: var(--brand-soft);
}
.px-recent-no {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
}
.px-recent-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.px-recent-title {
  font-size: 15.5px;
  font-weight: 600;
}
.px-recent-dek {
  font-size: 13.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.px-recent-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}

.px-more {
  margin-top: 26px;
  text-align: center;
}

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

.px-tag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.px-tag-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.px-tag-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  background: var(--brand-soft);
}
.px-tag-card-no {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
}
.px-tag-card-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.px-tag-card-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pop-ink);
}
[data-theme="dark"] .px-tag-card-count {
  color: var(--pop);
}

.px-tag-grid-lg {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.px-tag-card-lg {
  gap: 14px;
}
.px-tag-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.px-tag-card-samples {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.px-tag-sample {
  font-size: 13.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.px-tag-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 2px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   系列（连载）—— 一个装了不止一篇文章的目录
   首页 #series / 分类页 / /series/ 总览 / 系列页 / 文章页侧栏「本系列」卡。
   （文章页眉部那枚系列标签和翻页下面的收束语离各自的规则更近，留在「文章页」一节里。）

   语汇全部沿用本主题那一套：3px 实描边 + 不模糊的实心投影 + 等宽 HUD 小标签，
   序号块用 ink/paper 这一对（和 .px-tag、代码块角标同源）——
   深色下 ink 自动翻成近白，paper 翻成近黑，两端都够对比度。
   -------------------------------------------------------------------------- */

/* --- 系列卡：首页 / 分类页 / 总览页共用 --------------------------------- */

.px-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap);
}
.px-series-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.px-series-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2), background 0.1s steps(2);
}
.px-series-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--shadow-ink);
  background: var(--brand-soft);
}
.px-series-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* 篇数做成黄底贴纸（和 .px-course-badge 同一记法）。
   写「×7」这种 HUD 记法读者要先愣一下，所以直接写「7 篇」。 */
.px-series-card-count {
  flex: none;
  padding: 3px 9px;
  background: var(--sun);
  color: var(--on-bright);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.px-series-card-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.px-series-card-dek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.75;
}
.px-series-card-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 2px solid var(--edge);
}
.px-series-card-row {
  display: flex;
  gap: 9px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* 目录行必须单行截断：系列标题动辄三四十字，任其折行会把卡片撑得比文章卡还高。
   text-overflow 只作用在真正的文本盒上，所以标题单独包一层（父级是 flex 容器）。 */
.px-series-card-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.px-series-card-no {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pop-ink);
}
[data-theme="dark"] .px-series-card-no {
  color: var(--pop);
}
/* 序号压到 brand-soft 上时（卡片 hover）pop-ink 只剩 4.28，够不到 AA ——
   这种铺底的场合就别硬撑撞色，直接回近黑；品红只留给不铺底的状态。 */
.px-series-card:hover .px-series-card-no {
  color: var(--ink);
}
.px-series-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 2px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}

/* --- 系列页 -------------------------------------------------------------- */

.px-series-main {
  min-width: 0;
}
.px-series-head {
  margin-bottom: 30px;
}
.px-series-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.px-series-span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.px-series-title {
  margin: 0 0 14px;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.px-series-dek {
  margin: 0 0 24px;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

.px-series-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
.px-series-item + .px-series-item {
  border-top: 2px solid var(--edge);
}
.px-series-link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  transition: background 0.1s steps(2);
}
.px-series-link:hover {
  background: var(--brand-soft);
}
.px-series-no {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.1s steps(2), color 0.1s steps(2);
}
.px-series-link:hover .px-series-no {
  background: var(--brand);
  color: var(--on-brand);
}
.px-series-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.px-series-item-title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.px-series-item-dek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.75;
}
.px-series-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* 侧栏「关于本系列」：HUD 读数，一行一个 */
.px-series-facts-list {
  display: grid;
  margin: 0 0 14px;
  padding-top: 2px;
}
.px-series-facts-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.px-series-facts-list > div + div {
  border-top: 2px solid var(--edge);
}
.px-series-facts dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.px-series-facts dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.px-series-all {
  display: block;
  padding-top: 12px;
  border-top: 2px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
}
.px-series-all:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
[data-theme="dark"] .px-series-all {
  color: var(--brand-ink);
}

.px-series-mini {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.px-series-mini li + li {
  border-top: 2px solid var(--edge);
}
.px-series-mini a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.px-series-mini a:hover {
  color: var(--brand);
}
[data-theme="dark"] .px-series-mini a:hover {
  color: var(--brand-ink);
}
.px-series-mini-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* --- 文章页侧栏的「本系列」目录 -----------------------------------------
   外壳照 .px-toc 做（画框 + 头部横条 + 行分隔），两张卡叠在侧栏里才像一族东西。 */

.px-series-panel {
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.px-series-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 3px solid var(--edge);
  background: var(--surface-2);
  font-family: var(--font-mono);
}
.px-series-panel-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.px-series-panel-pos {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pop-ink);
}
[data-theme="dark"] .px-series-panel-pos {
  color: var(--pop);
}
.px-series-panel-title {
  display: block;
  padding: 12px 14px 10px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.px-series-panel-title:hover {
  color: var(--brand);
}
[data-theme="dark"] .px-series-panel-title:hover {
  color: var(--brand-ink);
}
.px-series-panel-list {
  display: grid;
  margin: 0;
  padding: 4px 0 8px;
  list-style: none;
}
.px-series-panel-item a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  transition: background 0.1s steps(2), color 0.1s steps(2);
}
.px-series-panel-item a:hover {
  background: var(--brand-soft);
  color: var(--ink);
}
/* 当前篇：左侧一道品红实条 —— 和 .px-toc-item.is-active 同一个记法 */
.px-series-panel-item.is-current a {
  background: var(--brand-soft);
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 5px 0 0 var(--pop);
}
.px-series-panel-no {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
/* 当前行的底色是 brand-soft，序号再压品红只有 4.28：换回近黑 ——
   「哪一行是当前篇」已经由左边那道品红条说了，不必两处都撞色。 */
.px-series-panel-item.is-current .px-series-panel-no {
  color: var(--ink);
}
.px-series-panel-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.px-series-panel-all {
  display: block;
  padding: 10px 14px;
  border-top: 2px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
}
/* 深色那行必须排在 :hover 之前 —— 它和 hover 规则同为 (0,2,0)，
   写后面就会把 hover 的字色也一起盖掉，变成「亮蓝字压亮蓝底」。 */
[data-theme="dark"] .px-series-panel-all {
  color: var(--brand-ink);
}
.px-series-panel-all:hover {
  background: var(--brand);
  color: var(--on-brand);
}

/* --------------------------------------------------------------------------
   内页通用外壳
   -------------------------------------------------------------------------- */

/* 分类页内部分段（系列连载 / 单篇）之间的间距；.px-sec 那套 padding 是给首页的 */
.px-block + .px-block {
  margin-top: 52px;
}

.px-page {
  padding-top: 52px;
  padding-bottom: 72px;
}

.px-page-head {
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 3px solid var(--edge);
}
.px-page-kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pop-ink);
}
[data-theme="dark"] .px-page-kicker {
  color: var(--pop);
}
.px-page-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.18;
}
.px-page-desc {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
}
.px-page-desc code {
  padding: 2px 7px;
  border: 2px solid var(--edge);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 13px;
}

.px-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.px-crumb a:hover {
  color: var(--brand);
}
[data-theme="dark"] .px-crumb a:hover {
  color: var(--brand-ink);
}
.px-crumb-sep {
  opacity: 0.5;
}

.px-year-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.px-year-jump-item {
  padding: 6px 14px;
  border: 3px solid var(--edge);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
.px-year-jump-item:hover {
  background: var(--brand);
  color: var(--on-brand);
}

/* --------------------------------------------------------------------------
   归档
   -------------------------------------------------------------------------- */

.px-year {
  margin-bottom: 44px;
}
.px-year-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--edge);
}
.px-year-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
}
.px-year-count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}

.px-archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.px-archive-item {
  display: grid;
  grid-template-columns: 52px 62px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 2px solid var(--edge);
}
.px-archive-item:hover {
  background: var(--brand-soft);
}
.px-archive-no,
.px-archive-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.px-archive-link {
  font-size: 15px;
  font-weight: 600;
}
.px-archive-link:hover {
  color: var(--brand);
}
[data-theme="dark"] .px-archive-link:hover {
  color: var(--brand-ink);
}

/* 长英文词/路径类标题的换行。
   真实案例：「手把手带你使用 DevEcoCli/DevEcoCode 快速开发 APP 功能」——
   `DevEcoCli/DevEcoCode` 是一个不可断的长词，在 320px 下比它所在的
   130px 栏还宽，直接把文档撑出 12px 横向滚动。
   这类溢出 rect 量不到（元素盒子没变宽，多出来的是**内容**），
   只有 scrollWidth 看得见，所以很容易漏。列在这里的都是「窄栏里的标题」。 */
.px-archive-link,
.px-card-title,
.px-recent-title,
.px-work-title,
.px-gal-title,
.px-sec-title {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   检索
   -------------------------------------------------------------------------- */

.px-search {
  margin-bottom: 30px;
}
.px-search-input {
  width: 100%;
  padding: 16px 20px;
  border: 3px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  box-shadow: 5px 5px 0 var(--shadow-ink);
}
.px-search-input::placeholder {
  color: var(--ink-3);
}
.px-search-hint {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}

.px-search-results {
  display: grid;
  gap: 16px;
}
.sr-item {
  display: block;
  padding: 18px 20px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.sr-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  background: var(--brand-soft);
}
.sr-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.sr-cat {
  padding: 2px 8px;
  border: 2px solid var(--edge);
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 700;
}
.sr-title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
}
.sr-excerpt {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}
.sr-empty {
  padding: 22px;
  border: 3px dashed var(--edge);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 13.5px;
}
mark {
  padding: 0 3px;
  background: var(--sun);
  color: #101024;
  font-weight: 700;
}

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

.px-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 4px;
  background: transparent;
  pointer-events: none;
}
.px-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--pop);
}

.px-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 52px;
  align-items: start;
  padding-top: 44px;
  padding-bottom: 72px;
}

.px-article-head {
  margin-bottom: 32px;
}
.px-article-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.px-article-group {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
/* 属于系列时这一枚是链接。做成贴纸（描边 + 实心投影）而不是灰字：
   以前它就是一行和 post.group 一模一样的灰字，读者不可能猜到它可点。 */
a.px-article-group {
  padding: 4px 10px;
  border: 2px solid var(--edge);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--shadow-ink);
  transition: background 0.1s steps(2), color 0.1s steps(2);
}
a.px-article-group:hover {
  background: var(--brand);
  border-color: var(--brand-ink);
  color: var(--on-brand);
}
.px-article-title {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.px-article-dek {
  margin: 0 0 22px;
  padding-left: 16px;
  border-left: 4px solid var(--pop);
  font-size: 15.5px;
  color: var(--ink-2);
}

.px-article-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.px-byline-avatar {
  width: 46px;
  height: 46px;
  flex: none;
  border: 3px solid var(--edge);
  object-fit: cover;
}
.px-byline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.px-byline-name {
  font-size: 15px;
  font-weight: 700;
}
.px-byline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

.px-article-cover {
  margin: 0 0 34px;
  border: 3px solid var(--edge);
  background: var(--surface-2);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
.px-article-cover img {
  width: 100%;
}

.px-article-end {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 44px 0 30px;
  padding-top: 22px;
  border-top: 3px solid var(--edge);
}
.px-end-mark {
  font-size: 22px;
  color: var(--pop-ink);
  line-height: 1;
}
.px-end-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 上一篇 / 下一篇 */
.px-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0;
}
.px-pager-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.px-pager-item:not(.is-empty):hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  background: var(--brand-soft);
}
.px-pager-item.is-empty {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.px-pager-next {
  text-align: right;
}
.px-pager-dir {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pop-ink);
}
[data-theme="dark"] .px-pager-dir {
  color: var(--pop);
}
.px-pager-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* 系列最后一篇下面那句收束语：贴一页便利签（sun-soft），
   让读者知道「顺序读到这里就完了」，并且有一处能回到系列目录。 */
.px-pager-note {
  margin: -14px 0 0;
  padding: 14px 16px;
  border: 3px solid var(--edge);
  background: var(--sun-soft);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.px-pager-note a {
  font-weight: 700;
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
[data-theme="dark"] .px-pager-note a {
  color: var(--brand-ink);
}

.px-related {
  margin-top: 40px;
}

/* 侧栏 */
.px-article-side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.px-toc {
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.px-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 3px solid var(--edge);
  background: var(--surface-2);
}
.px-toc-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.px-toc-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.px-toc-list {
  margin: 0;
  padding: 10px 0;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
}
.px-toc-item a {
  display: flex;
  gap: 10px;
  padding: 6px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.px-toc-item a:hover {
  background: var(--brand-soft);
}
.px-toc-item.is-active a {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--pop);
}
.px-toc-no {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  flex: none;
}
.px-toc-l3 a {
  padding-left: 30px;
  font-size: 12.5px;
}
.px-toc-l4 a {
  padding-left: 42px;
  font-size: 12.5px;
}

.px-side-card {
  padding: 18px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
.px-side-kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.px-side-avatar {
  width: 68px;
  height: 68px;
  border: 3px solid var(--edge);
  object-fit: cover;
}
.px-side-name {
  margin: 12px 0 4px;
  font-size: 16px;
  font-weight: 700;
}
.px-side-desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.px-side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   正文
   -------------------------------------------------------------------------- */

.prose {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  overflow-wrap: break-word;
}
.prose > *:first-child {
  margin-top: 0;
}
.prose h1,
.prose h2 {
  margin: 2.2em 0 0.8em;
  padding-bottom: 0.35em;
  border-bottom: 3px solid var(--edge);
  font-size: 1.5em;
  font-weight: 800;
  line-height: 1.35;
}
.prose h3 {
  margin: 1.9em 0 0.7em;
  font-size: 1.22em;
  font-weight: 700;
  line-height: 1.4;
}
.prose h3::before {
  content: "▚ ";
  color: var(--pop);
}
.prose h4 {
  margin: 1.6em 0 0.6em;
  font-size: 1.06em;
  font-weight: 700;
}
.prose p {
  margin: 0 0 1.15em;
}
.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.prose a:hover {
  background: var(--sun);
  color: #101024;
}
.prose ul,
.prose ol {
  margin: 0 0 1.15em;
  padding-left: 1.5em;
}
.prose li {
  margin: 0.35em 0;
}
.prose li::marker {
  color: var(--brand);
  font-weight: 700;
}
.prose blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  border: 3px solid var(--edge);
  border-left-width: 10px;
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  color: var(--ink-2);
}
.prose blockquote p:last-child {
  margin-bottom: 0;
}
.prose img {
  margin: 1.6em 0;
  border: 3px solid var(--edge);
  background: var(--surface-2);
}
.prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  border: 3px solid var(--edge);
  font-size: 14.5px;
}
.prose th,
.prose td {
  padding: 10px 14px;
  border: 2px solid var(--edge);
  text-align: left;
}
.prose th {
  background: var(--surface-2);
  font-weight: 700;
}
.prose hr {
  margin: 2.4em 0;
  border: none;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--edge) 0 10px,
    transparent 10px 20px
  );
}
.prose code {
  padding: 2px 6px;
  border: 2px solid var(--edge);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.prose pre code {
  padding: 0;
  border: none;
  background: transparent;
}

/* 代码块：shiki 双主题 */
.code-block {
  position: relative;
  margin: 1.8em 0;
  border: 3px solid var(--edge);
  background: var(--surface-2);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  overflow: hidden;
}
.code-block pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.75;
}
.code-block code {
  font-size: inherit;
}
.code-block .shiki,
.code-block .shiki span {
  color: var(--shiki-light);
}
.code-block .shiki {
  background-color: var(--shiki-light-bg, var(--surface-2));
}
[data-theme="dark"] .code-block .shiki,
[data-theme="dark"] .code-block .shiki span {
  color: var(--shiki-dark);
}
[data-theme="dark"] .code-block .shiki {
  background-color: var(--shiki-dark-bg, var(--surface-2));
}
/* 没有语言标记的代码块不显示角标——否则会渲染出一个空的背景方块 */
.code-block:not([data-lang])::before {
  display: none;
}
.code-block::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 10px;
  /* 用 ink/paper 这一对而不是 edge/paper：深色主题下 edge 是中间调，
     压深色文字只有 2:1。ink 在浅色主题是近黑、深色主题是近白，两端都稳。 */
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 行号 —— 原站 markdown.lineNumbers 的等价物。
   shiki 把每一行输出成 <span class="line">，行与行之间原本靠一个换行断开。
   这里不动那层换行，只把 .line 变成 inline-block：它自带一个 ::before 计数器，
   正好落在换行让出的那一行上。改成 display:block 反而要多压一次 white-space，
   而且会多出空行。 */
.code-block .shiki code {
  counter-reset: shiki-line;
}
.code-block .line {
  display: inline-block;
  counter-increment: shiki-line;
}
.code-block .line::before {
  content: counter(shiki-line);
  display: inline-block;
  box-sizing: border-box;
  width: 3em;
  padding-right: 1.4em;
  text-align: right;
  /* 探针量的是计算样式里的 color，所以必须用现成的弱化色，
     不能靠 opacity —— 那在对比度检查里是看不见的。 */
  color: var(--ink-3);
  user-select: none;
}

/* --------------------------------------------------------------------------
   评论区（外壳由 features/comments 注入，这里只调间距）
   -------------------------------------------------------------------------- */

.px-article .comments,
.px-main .comments {
  margin: 40px 0 0;
}

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

.px-footer {
  margin-top: 40px;
  border-top: 3px solid var(--edge);
  background: var(--surface);
}

.px-footer-index {
  padding-top: 26px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--edge);
}
.px-footer-index-label {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.px-index-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.px-index-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 3px solid var(--edge);
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--shadow-ink);
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}
.px-index-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  background: var(--brand);
  color: var(--on-brand);
}
.px-index-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.px-index-link:hover .px-index-no {
  color: inherit;
  opacity: 0.8;
}

.px-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 24px;
  padding-bottom: 32px;
}
.px-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.px-footer-brand strong {
  font-size: 17px;
}
.px-footer-brand span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.px-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.px-social {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 3px solid var(--edge);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
}
.px-social:hover {
  background: var(--brand);
  color: var(--on-brand);
}
.px-social-arrow {
  font-size: 11px;
  opacity: 0.7;
}
.px-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.px-footer-meta a:hover {
  color: var(--brand);
}
[data-theme="dark"] .px-footer-meta a:hover {
  color: var(--brand-ink);
}

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

.px-center {
  text-align: center;
}
.px-404-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(72px, 16vw, 160px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--brand);
  text-shadow: 6px 6px 0 var(--pop);
}
[data-theme="dark"] .px-404-code {
  color: var(--brand-ink);
}
.px-center-actions {
  justify-content: center;
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   主题切换器（核心注入的标记，这里只做像素风的皮肤）
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   主题切换器（核心注入的标记，这里只做像素风的皮肤）
   五套皮肤收进一个按钮，点开才是菜单 —— 顶栏不再被一排芯片撑变形。
   -------------------------------------------------------------------------- */

.theme-switch {
  display: inline-flex;
  align-items: center;
}

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

.theme-switch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--edge);
  background: var(--surface-2);
  /* 可点控件不用最弱的 --ink-3，保证对比度 */
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.1s steps(2);
}
.theme-switch-trigger:hover {
  background: var(--brand-soft);
}
.theme-switch-trigger:focus-visible {
  outline: 3px solid var(--pop);
  outline-offset: 2px;
}
.theme-switch-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.theme-switch-current {
  color: var(--ink);
}
.theme-switch-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.1s steps(2);
}
.theme-switch-picker[open] .theme-switch-caret {
  transform: rotate(180deg);
}

/* 面板锚在**顶栏内层容器**上，而不是按钮上。
   按钮可能贴在左边（窄屏），锚按钮的话右对齐的面板会伸出屏幕左侧；
   锚容器就永远是「贴着容器右缘往左展开」，任何宽度都不会横向溢出。 */
.theme-switch-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 4px;
  width: min(288px, calc(100vw - 44px));
  padding: 10px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}
.theme-switch-panel-title {
  padding: 2px 2px 8px;
  margin-bottom: 2px;
  border-bottom: 2px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.theme-switch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid transparent;
  background: var(--surface-2);
  /* 可点控件不用最弱的 --ink-3，保证对比度 */
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.theme-switch-item:hover {
  background: var(--brand-soft);
}
.theme-switch-item.is-current {
  background: var(--ink);
  color: var(--paper);
}
.theme-switch-dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--ink-3);
}
.theme-switch-item.is-current .theme-switch-dot {
  background: var(--sun);
}
.theme-switch-name {
  flex: 1;
  min-width: 0;
}
.theme-switch-state {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pop-ink);
}
[data-theme="dark"] .theme-switch-state {
  color: var(--pop);
}
.theme-switch-item.is-current .theme-switch-state {
  color: var(--sun);
}

.theme-hero {
  margin: 62px auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0 22px;
}
.theme-hero-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--edge);
}
.theme-hero-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pop-ink);
}
[data-theme="dark"] .theme-hero-kicker {
  color: var(--pop);
}
.theme-hero-title {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
}
.theme-hero-note {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
}

/* 首页这处不浮层：展开就把版面撑开，不会盖住页脚 */
.theme-hero-picker {
  display: block;
}
.theme-hero-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.theme-hero-trigger:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  background: var(--brand-soft);
}
.theme-hero-trigger:focus-visible {
  outline: 3px solid var(--pop);
  outline-offset: 3px;
}
.theme-hero-trigger-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pop-ink);
}
[data-theme="dark"] .theme-hero-trigger-label {
  color: var(--pop);
}
.theme-hero-trigger-name {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.theme-hero-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--ink-2);
  transition: transform 0.1s steps(2);
}
.theme-hero-picker[open] .theme-hero-caret {
  transform: rotate(180deg);
}
.theme-hero-panel {
  margin-top: 18px;
}
.theme-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 3px solid var(--edge);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--shadow-ink);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.theme-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow-ink);
  background: var(--brand-soft);
}
.theme-card.is-current {
  background: var(--sun);
  color: #101024;
}
.theme-card-name {
  font-size: 16px;
  font-weight: 700;
}
.theme-card-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}
.theme-card.is-current .theme-card-desc {
  color: #101024;
}
.theme-card-flag {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pop-ink);
}
[data-theme="dark"] .theme-card-flag {
  color: var(--pop);
}
.theme-card.is-current .theme-card-flag {
  color: #101024;
}

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

@media (max-width: 1080px) {
  .px-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .px-hero-side {
    justify-content: flex-start;
  }
  .px-card-grid,
  .px-svc-grid,
  .px-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-gal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .px-tag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .px-article {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .px-article-side {
    position: static;
  }
}

@media (max-width: 820px) {
  .px-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .px-course {
    grid-template-columns: minmax(0, 1fr);
  }
  .px-course-figure {
    border-right: none;
    border-bottom: 3px solid var(--edge);
  }
  .px-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-hud-item:nth-child(2) {
    border-right: none;
  }
  .px-hud-item:nth-child(1),
  .px-hud-item:nth-child(2) {
    border-bottom: 3px solid var(--edge);
  }
  .px-tag-grid,
  .px-tag-grid-lg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-gal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-archive-item {
    grid-template-columns: 40px 54px minmax(0, 1fr);
  }
  .px-archive-item .px-chip {
    display: none;
  }
}

@media (max-width: 720px) {
  /* 七个入口在窄屏不再换行，改成横向滑动 ——
     换行会把导航条撑成三四行，把首屏挤没。 */
  .px-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .px-nav-inner::-webkit-scrollbar {
    display: none;
  }
  .px-nav-item {
    padding: 11px 13px;
    font-size: 13.5px;
  }
  .px-sec {
    padding: 44px 22px;
  }
  .px-card-grid,
  .px-svc-grid,
  .px-work-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .px-pager {
    grid-template-columns: minmax(0, 1fr);
  }
  .px-pager-next {
    text-align: left;
  }
  .px-recent-link {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .px-recent-meta {
    grid-column: 2;
    flex-wrap: wrap;
    white-space: normal;
  }
  .px-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .px-gal-grid,
  .px-tag-grid,
  .px-tag-grid-lg {
    grid-template-columns: minmax(0, 1fr);
  }
  .px-series-grid,
  .px-series-grid-lg {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 目录行右侧那列（分钟 / 日期）在 320px 下会把标题挤成一条竖字，
     挪到标题下面横排 —— 和 .px-recent-meta 同一招 */
  .px-series-link {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
  .px-series-no {
    width: 34px;
    height: 34px;
    font-size: 12.5px;
  }
  .px-series-item-meta {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    white-space: normal;
  }
  .px-top-inner {
    flex-wrap: wrap;
  }
  .px-top-side {
    width: 100%;
    justify-content: flex-start;
  }
}

/* 尊重「减少动态效果」偏好：像素风的位移也一并关掉 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .px-btn:hover,
  .px-work:hover,
  .px-card:hover,
  .px-tag-card:hover,
  .px-series-card:hover,
  .px-pager-item:not(.is-empty):hover,
  .theme-card:hover,
  .px-gal:hover .px-gal-frame {
    transform: none;
  }
}