/*! Spica theme · © 2026 织星 / Astraea · https://github.com/misterrabbit0w0/misterrabbit0w0.github.io · MIT */
/* ── shared.css — Spica kawaii + Light/Dark/System ── */
:root,
[data-color-mode="light"] {
  color-scheme: light;
  --bg:         oklch(98.5% 0.014 85);
  --bg2:        oklch(96% 0.02 85);
  --card:       oklch(99.5% 0.008 85);
  --fg:         oklch(24% 0.02 285);
  --fg-soft:    oklch(38% 0.02 285);
  --body-text:  oklch(32% 0.02 285);
  --muted:      oklch(56% 0.02 285);
  --pink:       oklch(66% 0.13 350);
  --pink-light: oklch(92% 0.07 355);
  --lavender:   oklch(72% 0.18 290);
  --lav-light:  oklch(93% 0.06 290);
  --mint:       oklch(72% 0.18 175);
  --mint-light: oklch(92% 0.05 175);
  --mint-border: oklch(88% 0.07 175);
  --gold:       oklch(65% 0.16 50);
  --gold-light: oklch(94% 0.05 50);
  --gold-border: oklch(90% 0.08 50);
  --border:     oklch(90% 0.02 85);
  --shadow:     0 4px 24px oklch(60% 0.08 330 / 0.07);
  --shadow-lift: 0 12px 32px oklch(60% 0.08 330 / 0.10);
  --nav-pill:   oklch(94% 0.03 355);
  --dot:        oklch(75% 0.12 330 / 0.16);
  --star-dot:   oklch(62% 0.10 350); /* 星图远景小星：带彩度的玫瑰灰，浅色下可辨、不似灰尘 */
  --petal-opacity: 0.7;
  --input-bg:   var(--card);
  --code-bg:    oklch(95% 0.018 290);
  --code-fg:    oklch(28% 0.03 290);
  --code-border: oklch(88% 0.025 290);
  --article-text: oklch(30% 0.018 285);
  --article-text-soft: oklch(42% 0.018 285);
  --article-muted: oklch(58% 0.018 285);
  --article-heading: oklch(22% 0.022 285);
  --article-emphasis: oklch(24% 0.026 285);
  --article-link: oklch(60% 0.13 350);
  --article-link-bg: oklch(94% 0.055 355 / 0.68);
  --article-surface: oklch(99.2% 0.006 85 / 0.86);
  --article-surface-border: oklch(88.5% 0.022 85);
  --article-table-stripe: oklch(97% 0.014 85 / 0.72);
  --article-code-bg: oklch(96.5% 0.016 290);
  --article-code-fg: oklch(28% 0.024 290);
  --article-code-inline-fg: oklch(30% 0.05 300);
  --article-code-header: oklch(94.5% 0.018 290);
  --article-code-border: oklch(87% 0.026 290);
}

[data-color-mode="dark"] {
  color-scheme: dark;
  --bg:         oklch(19% 0.028 290);
  --bg2:        oklch(24% 0.03 290);
  --card:       oklch(27% 0.032 290);
  --fg:         oklch(96% 0.012 290);
  --fg-soft:    oklch(88% 0.015 290);
  --body-text:  oklch(90% 0.014 290);
  --muted:      oklch(78% 0.022 290);
  --pink:       oklch(79% 0.11 350);
  --pink-light: oklch(32% 0.07 355);
  --lavender:   oklch(82% 0.16 290);
  --lav-light:  oklch(30% 0.07 290);
  --mint:       oklch(82% 0.15 175);
  --mint-light: oklch(30% 0.06 175);
  --mint-border: oklch(36% 0.07 175);
  --gold:       oklch(84% 0.13 70);
  --gold-light: oklch(32% 0.06 70);
  --gold-border: oklch(38% 0.07 70);
  --border:     oklch(38% 0.035 290);
  --shadow:     0 4px 24px oklch(4% 0.03 290 / 0.55);
  --shadow-lift: 0 14px 36px oklch(4% 0.04 290 / 0.48);
  --nav-pill:   oklch(32% 0.04 290);
  --dot:        oklch(72% 0.1 330 / 0.06);
  --star-dot:   oklch(80% 0.08 350);
  --petal-opacity: 0.35;
  --input-bg:   oklch(24% 0.03 290);
  --code-bg:    oklch(22% 0.032 290);
  --code-fg:    oklch(92% 0.014 290);
  --code-border: oklch(34% 0.035 290);
  --article-text: oklch(78% 0.014 292);
  --article-text-soft: oklch(69% 0.016 292);
  --article-muted: oklch(59% 0.018 292);
  --article-heading: oklch(94% 0.012 292);
  --article-emphasis: oklch(87% 0.018 292);
  --article-link: oklch(80% 0.11 350);
  --article-link-bg: oklch(32% 0.07 355 / 0.24);
  --article-surface: oklch(22% 0.03 290 / 0.68);
  --article-surface-border: oklch(39% 0.036 290 / 0.68);
  --article-table-stripe: oklch(24% 0.032 290 / 0.7);
  --article-code-bg: oklch(21% 0.032 290);
  --article-code-fg: oklch(80% 0.018 292);
  --article-code-inline-fg: oklch(84% 0.055 318);
  --article-code-header: oklch(23.5% 0.034 290);
  --article-code-border: oklch(34% 0.038 290);
}

:root {
  --r: 20px;
  --r-sm: 14px;
  --font-mono: "Maple Mono CN", ui-monospace, "SF Mono", "Fira Code", Consolas, "Microsoft YaHei", monospace; /* deslop-ignore 34 */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  /* deslop-ignore-next-line 34 — 全站 Maple Mono CN 为刻意选择：圆润字形配樱花主题，经中文网字计划子集懒加载 */
  font-family: var(--font-mono);
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  overflow-x: hidden;
  text-wrap: pretty;
}

/* 切主题瞬间禁用一切过渡，避免全站元素集体渐变（Paco 式主题切换保护） */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

h1, h2, h3, h4 { text-wrap: balance; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); /* deslop-ignore 06 */
  background-size: 28px 28px;
  pointer-events: none;
}

.petals { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* 双层花瓣：外层负责下坠（匀速直线），内层负责横向飘摆 + 旋转（缓入缓出），
   两层叠加出叶片般自然飘落的轨迹，而非机械的垂直坠落。 */
.petal {
  position: absolute;
  top: -8%;
  opacity: 0;
  will-change: transform, opacity;
  animation: petal-fall linear infinite;
}
/* 花瓣形状由 JS 注入 SVG（V 缺口心形瓣），CSS 只负责运动；
   双层结构不变：外层匀速下坠，内层飘摆 + 旋转。 */
.petal-inner {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform;
  animation: petal-sway var(--sway-dur, 3.4s) ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
}
@keyframes petal-fall {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: var(--petal-opacity); }
  88%  { opacity: calc(var(--petal-opacity) * 0.55); }
  100% { transform: translateY(112vh); opacity: 0; }
}
/* scaleX 随飘摆振荡：模拟花瓣在空中的 3D 翻转（永不完全翻面） */
@keyframes petal-sway {
  from { transform: translateX(calc(var(--sway, 14px) * -1)) rotate(var(--rot-a, -18deg)) scaleX(var(--wob, .7)); }
  to   { transform: translateX(var(--sway, 14px)) rotate(var(--rot-b, 34deg)) scaleX(1); }
}

/* 入夜不下花瓣：夜空已有星场、流星与许愿星，再加一层就是噪音 */
[data-color-mode="dark"] .petals { display: none; }

/* ── 入场渐现 ──
   仅在 JS 就位且未开启「减少动态效果」时挂上 html.js-reveal，
   因此无 JS / reduced-motion 时内容始终可见，纯增强。 */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
html.js-reveal .reveal.reveal-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .66s cubic-bezier(.22,.61,.36,1),
    transform .66s cubic-bezier(.22,.61,.36,1);
}
html.js-reveal .reveal.reveal-done {
  will-change: auto;
}

/* 织星成座：入夜浮现的夜空。
   首页 = 本命星图室女座（极淡连线 + 四角闪星主星 + 角宿一粉色呼吸）；
   其他页 = 净空散点，不重复本命场景。 */
.nightsky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
.nightsky svg { display: block; width: 100%; height: 100%; }
[data-color-mode="dark"] .nightsky { opacity: 1; }

/* 渐变着色：辉光中心亮 → 边缘透明（真·径向辉光，非硬边圆盘） */
.ns-stop-core { stop-color: oklch(97% 0.012 290); stop-opacity: .85; }
.ns-stop-edge { stop-color: oklch(97% 0.012 290); stop-opacity: 0; }
.ns-stop-pink-core { stop-color: var(--pink); stop-opacity: .9; }
.ns-stop-pink-mid  { stop-color: var(--pink); stop-opacity: .26; }
.ns-stop-pink-edge { stop-color: var(--pink); stop-opacity: 0; }
.ns-neb-pink0 { stop-color: oklch(74% 0.13 350); stop-opacity: .085; }
.ns-neb-pink1 { stop-color: oklch(74% 0.13 350); stop-opacity: 0; }
.ns-neb-lav0  { stop-color: oklch(70% 0.13 295); stop-opacity: .07; }
.ns-neb-lav1  { stop-color: oklch(70% 0.13 295); stop-opacity: 0; }

/* 背景星场：远星为致密亮点，少数近星裹一层柔光 → 夜空纵深 */
.ns-star { fill: oklch(96% 0.012 290); }
.ns-field-glow { fill: url(#nsGlow); }

/* 主星：径向辉光 + 致密亮核，半径/透明度由 inline style 按星等连续控制 */
.ns-glow { fill: url(#nsGlow); }
.ns-core { fill: oklch(98% 0.01 300); }

/* 室女座连线：光的丝线 —— 细描边 + 柔和外辉，不是铅笔灰线；
   入场时自我描绘（一次性；pathLength=1 在标记里） */
.ns-links polyline {
  fill: none;
  stroke: oklch(88% 0.035 320);
  stroke-width: .9;
  opacity: .24;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px oklch(86% 0.06 330 / .45));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ns-draw 1.6s ease-out .3s forwards;
}
.ns-links polyline:nth-child(2) { animation-delay: .6s; }
.ns-links polyline:nth-child(3) { animation-delay: 1s; }
@keyframes ns-draw { to { stroke-dashoffset: 0; } }

/* 星点错峰闪烁：--tw-a/--tw-hi 保留每颗星自己的亮度个性，负 delay 载入即在中途 */
.ns-tw {
  animation: ns-twinkle var(--tw-dur, 6s) ease-in-out infinite alternate;
  animation-delay: var(--tw-del, 0s);
}
@keyframes ns-twinkle {
  from { opacity: var(--tw-a, .3); }
  to   { opacity: var(--tw-hi, 1); }
}

/* 角宿一 Spica：四角闪星（与封面亮星同一语言）——呼吸缩放微旋转在外层 g，
   本体保留 transform 给 hot 态（近悬放大），两层 transform 叠加互不覆盖 */
.ns-spica {
  fill: var(--pink);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .25s ease;
}
.ns-spica.ns-spica-hot { transform: scale(1.3); }
.ns-spica-breath {
  transform-box: fill-box;
  transform-origin: center;
  animation: ns-spica-breath 5.5s ease-in-out infinite;
}
@keyframes ns-spica-breath {
  0%, 100% { transform: scale(.85) rotate(-4deg); }
  50%      { transform: scale(1.02) rotate(5deg); }
}
.ns-spica-hi { fill: oklch(99% 0.008 350); opacity: .92; }
/* 贴身微辉：静态、小而淡，只给闪星一点存在感——不再叠光晕盘 */
.ns-spica-glow { opacity: .35; }
/* 星河抵达时才亮起：主脊描绘近完成（1.9s）前，角宿一自一点绽开 */
.ns-spica-wrap {
  transform-box: fill-box;
  transform-origin: center;
  animation: ns-spica-in .9s cubic-bezier(.22,.61,.36,1) 1.7s both;
}
@keyframes ns-spica-in {
  from { opacity: 0; transform: scale(.35); }
  to   { opacity: 1; transform: scale(1); }
}

/* 尊重 reduced-motion：关掉呼吸/描绘/闪烁，归位最终态 */
@media (prefers-reduced-motion: reduce) {
  .ns-spica-breath, .ns-tw, .ns-spica-wrap { animation: none; transform: none; }
  .ns-links polyline { animation: none; stroke-dashoffset: 0; }
}

/* 流星：暗色下偶尔划过的一道细光（由 JS 触发，位置随机） */
.shooting-star {
  position: fixed;
  z-index: 1;
  width: 120px;
  height: 1.6px;
  border-radius: 50%; /* deslop-ignore 19 */
  background: linear-gradient(90deg, transparent, oklch(96% 0.03 290 / 0.95));
  box-shadow: 0 0 6px oklch(92% 0.04 290 / 0.7);
  pointer-events: none;
  opacity: 0;
}

/* 许愿光晕：点亮角宿一时从星点荡开的一层柔光扩散，不是实心圆环 */
.ns-ripple {
  position: fixed;
  z-index: 1149;
  width: 14px;
  height: 14px;
  border-radius: 50%; /* deslop-ignore 19 */
  background: radial-gradient(circle, var(--pink) 0%, transparent 70%); /* deslop-ignore 06 */
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

/* 星屑：鼠标尾迹 + 点亮绽放 —— 柔光微粒（中心亮 → 边缘渐隐），非硬边实心点 */
.skydust {
  position: fixed;
  z-index: 1150;
  pointer-events: none;
  width: 5px;
  height: 5px;
  border-radius: 50%; /* deslop-ignore 19 */
  background: radial-gradient(circle, oklch(95% 0.06 350) 0%, oklch(90% 0.06 350 / .4) 42%, transparent 72%); /* deslop-ignore 06 */
}
.skydust-burst {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--pink);
  line-height: 1;
}

/* 许愿话语：不是 toast，是星星的低语——无框无影无底色，粉字带柔光浮现 */
.ns-wish {
  position: fixed;
  z-index: 1160;
  transform: translate(-50%, 0);
  max-width: 260px;
  padding: 4px 10px;
  font-family: var(--font-mono); /* deslop-ignore 34 */
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.7;
  text-align: center;
  color: var(--pink);
  text-shadow: 0 0 16px color-mix(in oklch, var(--pink) 50%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
.ns-wish.show { opacity: 1; transform: translate(-50%, 8px); }

.page {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.page-wide { max-width: 1160px; }

/* ── Navigation ── */
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 24px 0 8px;
}
.nav-logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--pink);
  text-decoration: none;
  justify-self: start;
}
.nav-center {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  flex-wrap: wrap;
  justify-content: center;
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border: 1.5px solid transparent;
}
.nav-pill:hover { color: var(--fg); background: var(--bg2); }
.nav-pill.active {
  color: var(--fg);
  background: var(--nav-pill);
  border-color: var(--border);
}
.nav-pill-icon { flex-shrink: 0; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--card);
}
.theme-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.theme-switch-btn:hover { color: var(--fg); background: var(--bg2); }
.theme-switch-btn.active {
  color: var(--fg);
  background: var(--nav-pill);
  box-shadow: inset 0 0 0 1px var(--border);
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 36px 0;
}
.sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.sec-title { font-size: 18px; font-weight: 700; }
.sec-more {
  font-size: 13px;
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
  transition: opacity .2s;
}
.sec-more:hover { opacity: .75; }
.sec-more::after { content: ' →'; }

.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 99px;
  border: 1.5px solid;
  cursor: default;
  white-space: nowrap;
}
.tag-text {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
/* 标签不再用糖果色区分语义：全部中性，强调色留给真正的 accent。
   cat_tag_class 的映射保留，作为以后需要时的语义钩子。 */
.tag-pink, .tag-lav, .tag-mint, .tag-gold {
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
}

.site-footer {
  margin-top: 64px;
  padding: 24px 0;
  border-top: 1.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy { line-height: 1.5; }
.footer-end {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
}
.footer-pill:hover {
  color: var(--pink);
  border-color: var(--pink-light);
  background: var(--pink-light);
  transform: translateY(-2px);
}
.footer-pill-icon { flex-shrink: 0; opacity: .9; }
.footer-pill-spark {
  font-size: 11px;
  line-height: 1;
  color: var(--pink);
  transition: transform .2s ease;
}
.footer-pill-issue:hover .footer-pill-spark { transform: rotate(-12deg) scale(1.15); }
.counter-value {
  display: inline-block;
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
}
.footer-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  white-space: nowrap;
}
.footer-counter .counter-value {
  color: var(--pink);
  font-weight: 700;
}
.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.footer-links a {
  color: var(--pink);
  text-decoration: none;
  transition: opacity .2s;
}
.footer-links a:hover { opacity: .75; }
.footer-sep {
  margin: 0 4px;
  opacity: .45;
  user-select: none;
}

/* 点击星尘 */
/* tweaks */
#tweaks-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  border-radius: 50%; /* deslop-ignore 19 */
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: transform .2s ease, color .2s, border-color .2s;
  cursor: pointer;
}
#tweaks-toggle:hover { color: var(--pink); border-color: var(--pink-light); transform: rotate(45deg); }
#tweaks-toggle.open { color: var(--pink); border-color: var(--pink-light); transform: rotate(90deg); }
#tweaks-panel {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: 1000;
  width: 240px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--shadow);
  font-size: 13px;
}
#tweaks-panel.open { display: block; animation: tweaks-in .2s ease; }
@keyframes tweaks-in {
  from { opacity: 0; transform: scale(.9) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tweaks-title { font-weight: 700; margin-bottom: 14px; font-size: 14px; }
.tweak-row { margin-bottom: 12px; }
.tweak-label { color: var(--muted); font-size: 12px; margin-bottom: 5px; }

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.social-btn:hover {
  border-color: var(--pink);
  color: var(--pink);
  transform: translateY(-1px);
}
.social-icon { flex-shrink: 0; }

.tweak-row-check { margin-top: 4px; }
.tweak-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}
.tweak-check input {
  margin-top: 2px;
  accent-color: var(--pink);
  flex-shrink: 0;
}

/* ── Spica theme cursor (stable CSS cursor-url mode) ──
   分层：默认樱花（浏览）→ 星杖（可点击）→ 羽毛（输入）→ 放大镜（图片）。
   不用裸 a/button，避免 widget 空白区与正文误触 I-beam。 */
@media (pointer: fine) {
  html.has-theme-cursor,
  html.has-theme-cursor body {
    /* default: line-art kawaii sakura petal arrow with pink accent */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 19 17l-6 1.3 3.7 8.4-4.4 1.7-3.5-8.3-5.1 3.6z' fill='%23ffffff' stroke='%231f2937' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cg transform='translate(22.8 10.6) scale(1.2) translate(-22.8 -10.6)'%3E%3Cpath d='M20.5 6.5c4.6 1.2 5.9 5.1 3 8.3-4.2-.8-5.5-4.8-3-8.3z' fill='%23f9a8d4' stroke='%231f2937' stroke-width='1.2'/%3E%3Cpath d='M23.4 8.9c.7 1.4.3 3.2-1 4.2' stroke='%231f2937' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 3 3, auto;
  }

  html.has-theme-cursor :where(
    .article-row, .nav-card, .archive-card, .project-card, .project-featured,
    .post-card, .repo-card, .page-btn, .toc-item,
    .theme-switch-btn, .code-copy-btn, .filter-btn, .social-btn,
    .footer-pill, .nav-pill, .nav-logo, .author-action-btn, .link-btn,
    #tweaks-toggle, .img-lightbox-close,
    .post-body a, .post-breadcrumb a, .sec-more, .footer-links a,
    .notfound-hint a, .contrib-item a,
    select, summary, label,
    input[type=range], input[type=checkbox], input[type=radio], input[type=submit]
  ) {
    /* pointer: line-art kawaii star wand with mint accent */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Cg transform='translate(32 0) scale(-1 1)'%3E%3Cpath d='M5 26 21 10' stroke='%231f2937' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M5 26 21 10' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg transform='translate(20.9 10.7) scale(1.15) translate(-20.9 -10.7)'%3E%3Cpath d='M21 3.5l2.2 5 5.3.7-3.9 3.6 1 5.2-4.6-2.6-4.6 2.6 1-5.2-3.9-3.6 5.3-.7z' fill='%23a7f3d0' stroke='%231f2937' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle cx='7' cy='24' r='2.1' fill='%23ffffff' stroke='%231f2937' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E") 8 8, pointer;
  }

  html.has-theme-cursor .img-lightbox-backdrop {
    /* zoom-out: line-art kawaii magnifier minus with blue glass */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Cpath d='M19.2 19.2 27 27' stroke='%231f2937' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M19.2 19.2 27 27' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='13' r='9.2' fill='%23fde68a' stroke='%231f2937' stroke-width='1.5'/%3E%3Cpath d='M8.2 13h9.6' stroke='%231f2937' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 10 10, zoom-out;
  }

  html.has-theme-cursor :where(
    input[type=text], input[type=search], input[type=email], textarea
  ) {
    /* text: line-art kawaii feather I-beam with lavender accent */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Cpath d='M16 5v22M11 5h10M11 27h10' stroke='%231f2937' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M16 5v22M11 5h10M11 27h10' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg transform='translate(22.5 16) scale(1.18) translate(-22.5 -16)'%3E%3Cpath d='M21.5 7.5c3.6 3.1 3.2 8.3-1.3 12.6-2-4.5-1.5-8.6 1.3-12.6z' fill='%23c4b5fd' stroke='%231f2937' stroke-width='1.2'/%3E%3Cpath d='M20.4 18.9 25 25' stroke='%231f2937' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 12 12, text;
  }

  html.has-theme-cursor .img-zoomable,
  html.has-theme-cursor .post-body a:has(> img.img-zoomable) {
    /* zoom-in: line-art kawaii magnifier plus with blue glass */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Cpath d='M19.2 19.2 27 27' stroke='%231f2937' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M19.2 19.2 27 27' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='13' r='9.2' fill='%23fde68a' stroke='%231f2937' stroke-width='1.5'/%3E%3Cpath d='M13 8.2v9.6M8.2 13h9.6' stroke='%231f2937' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 10 10, zoom-in;
  }
}

@media (hover: none), (pointer: coarse) {
  html.has-theme-cursor,
  html.has-theme-cursor body,
  html.has-theme-cursor a,
  html.has-theme-cursor button {
    cursor: auto !important;
  }
}

/* image lightbox */
body.lightbox-open { overflow: hidden; }

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.img-lightbox[hidden] { display: none; }

.img-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: oklch(12% 0.02 290 / 0.72);
  backdrop-filter: blur(6px); /* deslop-ignore 19 */
  cursor: zoom-out;
  animation: lightbox-fade .22s ease;
}
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
.img-lightbox-closing .img-lightbox-panel { animation: lightbox-out .18s ease forwards; }
.img-lightbox-closing .img-lightbox-backdrop { animation: lightbox-fade-out .18s ease forwards; }
@keyframes lightbox-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.95); }
}
@keyframes lightbox-fade-out { from { opacity: 1; } to { opacity: 0; } }

.img-lightbox-panel {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: lightbox-in .2s ease;
}

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.img-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 48px);
  width: auto;
  height: auto;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--card);
}

.img-lightbox-caption {
  font-size: 13px;
  color: oklch(92% 0.01 290);
  text-align: center;
  max-width: 640px;
  line-height: 1.5;
}

.img-lightbox-caption[hidden] { display: none; }

.img-lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--border);
  border-radius: 50%; /* deslop-ignore 19 */
  background: var(--card);
  color: var(--fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease;
}

.img-lightbox-close:hover {
  transform: scale(1.05);
  border-color: var(--pink);
}

@media (max-width: 820px) {
  .site-nav { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .nav-logo { grid-column: 1; }
  .nav-actions { grid-column: 2; grid-row: 1; }
  .nav-center { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .petals { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 640px) {
  .site-footer { flex-direction: column; text-align: center; }
  .footer-end { flex-direction: column; align-items: center; }
  .footer-pills { justify-content: center; }
  #tweaks-toggle { bottom: 16px; right: 16px; }
  #tweaks-panel { bottom: 70px; right: 16px; width: calc(100vw - 32px); max-width: 260px; }
}

/* ── 昼夜转场 ──
   切换明/暗时，新主题以点击的开关为圆心、像涟漪一样揭开覆盖旧主题。
   仅在支持 View Transitions 且未开启 reduced-motion 的浏览器生效（JS 中已守卫），
   不支持的浏览器回退为原本的背景淡入。 */
::view-transition-old(root) { animation: none; z-index: 0; }
::view-transition-new(root) {
  animation: vt-reveal .55s cubic-bezier(.22,.61,.36,1);
  z-index: 1;
}
@keyframes vt-reveal {
  from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 0%)); }
  to   { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 0%)); }
}