/* ============================================================
 * 设计变量 / Design Tokens
 * 变量集中定义主题色板、圆角、缓动曲线，全站引用
 * ============================================================ */
:root {
  --h:265;
  --accent:265 90% 65%;
  --accent-soft:265 90% 74%;
  --accent-deep:265 80% 52%;
  --bg:232 22% 6%;
  --bg-2:232 20% 9%;
  --surface:232 18% 12%;
  --border:0 0% 100% / .07;
  --text:0 0% 96%;
  --text-dim:0 0% 66%;
  --radius:20px;
  --ease-bounce:cubic-bezier(.5,0,0,1.4);
  --ease-smooth:cubic-bezier(.16,1,.3,1);
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html {
  scrollbar-width:thin;
  scrollbar-color:hsl(var(--accent)) transparent;
}
html:not(.entered),body:not(.entered) {
  overflow:hidden;
}
::-webkit-scrollbar {
  width:10px;
}
::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:hsl(var(--accent));
}

/* ============================================================
 * 按钮 / Button
 * 通用按钮
 * ============================================================ */
::-webkit-scrollbar-button {
  display:none!important;
}
body {
  overflow-x:hidden;
  min-height:100vh;
  font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,sans-serif;
  color:hsl(var(--text));
  background:radial-gradient(130vmax 130vmax at 82% -12%, hsl(var(--accent)/.2), transparent 58%), radial-gradient(100vmax 100vmax at -12% 112%, hsl(var(--accent-deep)/.16), transparent 55%), hsl(var(--bg));
  transition:background 1.4s var(--ease-smooth);
}
.display {
  font-weight:900;
  line-height:.92;
  letter-spacing:-.03em;
}
a {
  color:inherit;
}
#stars {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.noise {
  position:fixed;
  inset:0;
  z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;
  pointer-events:none;
  mix-blend-mode:overlay;
}
#cursorGlow {
  position:fixed;
  top:0;
  left:0;
  z-index:3;
  width:420px;
  height:420px;
  margin:-210px 0 0 -210px;
  border-radius:50%;
  background:radial-gradient(circle, hsl(var(--accent)/.2), transparent 60%);
  transform:translate(-9999px,-9999px);
  pointer-events:none;
  will-change:transform;
  mix-blend-mode:screen;
}
#boom {
  position:fixed;
  inset:0;
  z-index:80;
  background:radial-gradient(circle at var(--bx,50%) var(--by,50%), hsl(var(--accent)/.85), transparent 58%);
  opacity:0;
  pointer-events:none;
}
#boom.go {
  animation:boom 1.15s var(--ease-smooth) forwards;
}

/* ============================================================
 * 关键帧动画 / Keyframes
 * 光球/加载/呼吸等动画定义
 * ============================================================ */
@keyframes boom {
  0% {
    opacity:0;
    transform:scale(.15);
  }
  16% {
    opacity:.9;
  }
  to {
    opacity:0;
    transform:scale(2.6);
  }
}
.site-main {
  position:relative;
  z-index:2;
}

/* ============================================================
 * 导航 / Navigation
 * 顶部导航与菜单
 * ============================================================ */
.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(16px,5vw,52px);
  border-bottom:1px solid var(--border);
  background:hsl(var(--bg)/.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.logo {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:21px;
  font-weight:900;
  text-decoration:none;
}
.logo .dot {
  width:11px;
  height:11px;
  border-radius:50%;
  box-shadow:0 0 16px hsl(var(--accent));
  background:hsl(var(--accent));
  animation:pulse 3.2s var(--ease-smooth) infinite;
}

/* ============================================================
 * 关键帧动画 / Keyframes
 * 光球/加载/呼吸等动画定义
 * ============================================================ */
@keyframes pulse {
  0%,to {
    opacity:1;
    transform:scale(1);
  }
  50% {
    opacity:.5;
    transform:scale(1.5);
  }
}
.status {
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:hsl(var(--text-dim));
}

/* ============================================================
 * 按钮 / Button
 * 通用按钮
 * ============================================================ */
.btn {
  display:inline-block;
  padding:15px 30px;
  border:none;
  border-radius:999px;
  box-shadow:0 10px 30px hsl(var(--accent)/.45);
  font-size:16px;
  font-weight:800;
  text-decoration:none;
  color:#fff;
  background:hsl(var(--accent));
  transition:transform .3s var(--ease-bounce), box-shadow .3s;
  cursor:pointer;
  will-change:transform;
}
.btn:hover {
  box-shadow:0 16px 44px hsl(var(--accent)/.6);
}
.btn.ghost {
  border:1.5px solid hsl(var(--accent)/.6);
  box-shadow:none;
  color:hsl(var(--accent-soft));
  background:0 0;
}
.btn.ghost:hover {
  background:hsl(var(--accent)/.12);
}
.compass {
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border:1px solid var(--border);
  border-radius:50%;
  box-shadow:0 0 0 0 hsl(var(--accent)/.5);
  background:hsl(var(--surface)/.85);
  opacity:0;
  backdrop-filter:blur(8px);
  transform:scale(.2);
  transition:opacity .6s var(--ease-smooth), transform .7s var(--ease-bounce), box-shadow .3s;
  animation:ring 2.8s var(--ease-smooth) infinite;
  cursor:pointer;
  pointer-events:none;
  -webkit-backdrop-filter:blur(8px);
}

/* ============================================================
 * 关键帧动画 / Keyframes
 * 光球/加载/呼吸等动画定义
 * ============================================================ */
@keyframes ring {
  0% {
    box-shadow:0 0 0 0 hsl(var(--accent)/.45);
  }
  70% {
    box-shadow:0 0 0 22px hsl(var(--accent)/0);
  }
  to {
    box-shadow:0 0 0 0 hsl(var(--accent)/0);
  }
}
.compass svg {
  width:26px;
  height:26px;
  color:hsl(var(--accent-soft));
}
body.entered .compass {
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.star-map {
  position:fixed;
  inset:0;
  z-index:44;
  pointer-events:none;
}
#constellation {
  position:absolute;
  inset:0;
  overflow:visible;
  width:100%;
  height:100%;
  pointer-events:none;
}
.star-map a.star {
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border:1px solid hsl(var(--c,var(--h)) 80% 60% / .55);
  border-radius:50%;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  color:hsl(var(--text));
  background:hsl(var(--surface)/.92);
  opacity:0;
  transition:background .3s,box-shadow .3s,color .3s;
  pointer-events:none;
  will-change:transform;
}
.star-map.open a.star {
  pointer-events:auto;
}
.star-map.open a.star:hover {
  box-shadow:0 0 26px hsl(var(--c,var(--h)) 90% 55% / .6);
  color:#fff;
  background:hsl(var(--c,var(--h)) 90% 60%);
}
#constellation line {
  transition:stroke .3s,stroke-width .3s;
  stroke:hsl(var(--c,var(--h)) 80% 60% / .22);
  stroke-width:1px;
}
#constellation line.lit {
  filter:drop-shadow(0 0 6px hsl(var(--c,var(--h)) 92% 60% / .85));
  stroke:hsl(var(--c,var(--h)) 92% 64% / .9);
  stroke-width:2.4px;
}
.map-audio {
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:43;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--border);
  border-radius:50%;
  box-shadow:0 0 16px hsl(var(--accent)/.25);
  font-size:14px;
  color:hsl(var(--accent-soft));
  background:hsl(var(--surface)/.85);
  opacity:0;
  backdrop-filter:blur(8px);
  transform:translate(0)scale(.2);
  transition:opacity .5s var(--ease-smooth), transform .55s var(--ease-bounce);
  cursor:pointer;
  pointer-events:none;
  -webkit-backdrop-filter:blur(8px);
}
.star-map.open~.map-audio {
  opacity:1;
  transform:translate(-4px,-82px)scale(1);
  pointer-events:auto;
}
.map-audio:hover {
  transform:translate(-4px,-82px)scale(1.12);
}
@keyframes audioRing {
  0%,to {
    box-shadow:0 0 0 0 hsl(var(--accent)/.45);
  }
  70% {
    box-shadow:0 0 0 14px hsl(var(--accent)/0);
  }
}
.map-audio.on {
  animation:audioRing 2.8s var(--ease-smooth) infinite;
}
.plate {
  position:relative;
  padding:70px clamp(16px,5vw,52px) 110px;
  color:hsl(var(--text-dim));
}
.plate-rule {
  width:100%;
  height:1px;
  margin-bottom:34px;
  box-shadow:0 0 14px hsl(var(--accent)/.4);
  background:linear-gradient(90deg, transparent, hsl(var(--accent)/.6), transparent);
  transition:background 1.4s var(--ease-smooth);
}
.plate-inner {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}
.plate-copy {
  font-size:14px;
  letter-spacing:.04em;
}

/* ============================================================
 * 友链 / Links
 * 友链卡片与分组
 * ============================================================ */
.plate-links {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:14px;
}
.plate-links a {
  position:relative;
  font-size:14px;
  text-decoration:none;
  color:hsl(var(--text-dim));
  transition:all .25s;
}
.plate-links a:after {
  position:absolute;
  bottom:-4px;
  left:0;
  width:100%;
  height:1px;
  background:hsl(var(--accent-soft));
  transform-origin:0;
  transform:scaleX(0);
  transition:transform .3s var(--ease-smooth);
  content:"";
}
.plate-links a:hover {
  color:hsl(var(--accent-soft));
}
.plate-links a:hover:after {
  transform:scaleX(1);
}
.plate-days {
  text-align:right;
}
.plate-days .days-num {
  display:inline-block;
  font-size:clamp(40px,7vw,72px);
  font-weight:900;
  line-height:1;
  text-shadow:0 0 40px hsl(var(--accent)/.5);
  color:hsl(var(--accent-soft));
}
.plate-days .days-label {
  display:block;
  margin-top:8px;
  font-size:13px;
  letter-spacing:.2em;
}
.plate-sign {
  margin-top:14px;
  font-size:13px;
  letter-spacing:.18em;
  text-shadow:0 0 18px hsl(var(--accent)/.4);
  color:hsl(var(--accent-soft));
}
.veil {
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  background:hsl(var(--bg));
  transition:opacity 1.4s var(--ease-smooth), filter 1.4s, transform 1.4s;
  cursor:pointer;
}
.veil.gone {
  opacity:0;
  filter:blur(24px);
  transform:scale(1.08);
  pointer-events:none;
}
.veil .halo {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(70vw,460px);
  height:min(70vw,460px);
}
.veil .ring {
  position:absolute;
  inset:0;
  border:1px solid hsl(var(--accent)/.25);
  border-radius:50%;
}
.veil .ring.r2 {
  inset:14%;
  border-color:hsl(var(--accent)/.18);
}
.veil .ring.r3 {
  inset:28%;
  border-color:hsl(var(--accent)/.12);
}
.veil .ring.spin {
  border-style:dashed;
  animation:22s linear infinite spin;
}
.veil .ring.spin.rev {
  animation:30s linear infinite reverse spin;
}

/* ============================================================
 * 关键帧动画 / Keyframes
 * 光球/加载/呼吸等动画定义
 * ============================================================ */
@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}

/* ============================================================
 * 首页光球 / Hero Orb
 * 开门式光球交互与光晕
 * ============================================================ */
.veil .orb {
  display:flex;
  align-items:center;
  justify-content:center;
  width:120px;
  height:120px;
  border-radius:50%;
  box-shadow:0 0 60px hsl(var(--accent)/.7), inset 0 0 30px #ffffff40;
  background:radial-gradient(circle at 40% 35%, hsl(var(--accent-soft)), hsl(var(--accent-deep)));
  animation:breathe 3.4s var(--ease-smooth) infinite;
}

/* ============================================================
 * 关键帧动画 / Keyframes
 * 光球/加载/呼吸等动画定义
 * ============================================================ */
@keyframes breathe {
  0%,to {
    opacity:.92;
    transform:scale(1);
  }
  50% {
    opacity:1;
    transform:scale(1.12);
  }
}
.veil .mark {
  font-size:clamp(46px,11vw,128px);
  font-weight:900;
  letter-spacing:.04em;
  text-align:center;
}
.veil .mark span {
  display:inline-block;
  color:#0000;
  background:linear-gradient(120deg,hsl(var(--accent-soft)),hsl(var(--accent-deep)));
  background-clip:text;
  opacity:0;
  transform:translateY(24px);
  -webkit-background-clip:text;
}
.veil .hint {
  font-size:14px;
  letter-spacing:.34em;
  color:hsl(var(--text-dim));
  opacity:0;
}
.veil .days {
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:hsl(var(--text-dim)/.7);
  opacity:0;
}

/* ============================================================
 * 首页光球 / Hero Orb
 * 开门式光球交互与光晕
 * ============================================================ */
.hero {
  position:relative;
  display:flex;
  align-items:center;
  min-height:100vh;
  padding:120px clamp(16px,5vw,52px) 60px;
}
.hero-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:40px;
  width:100%;
}
.kicker {
  display:inline-block;
  margin-bottom:20px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  text-decoration:none;
  color:hsl(var(--accent-soft));
  transition:all .25s;
  cursor:pointer;
}
.kicker:hover {
  color:hsl(var(--accent));
}
.hero h1 {
  font-size:clamp(46px,10vw,140px);
}
.hero h1 .l {
  display:inline-block;
}
.hero h1 em {
  font-style:normal;
  text-shadow:0 0 50px hsl(var(--accent)/.55);
  color:hsl(var(--accent-soft));
}
.hero p {
  max-width:520px;
  margin-top:24px;
  font-size:clamp(15px,2vw,18px);
  line-height:1.75;
  color:hsl(var(--text-dim));
}
.cta {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}
.shards {
  position:relative;
  height:clamp(360px,46vw,520px);
}
.shard {
  position:absolute;
  overflow:hidden;
  width:clamp(160px,19vw,230px);
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 14px 40px #0006;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(150deg, hsl(var(--surface)), hsl(var(--bg-2)));
  transition:transform .5s var(--ease-smooth), box-shadow .5s, border-color .4s;
  cursor:pointer;
  will-change:transform;
}
.shard:before {
  position:absolute;
  inset:0;
  background:radial-gradient(120% 120% at 80% 0%, hsl(var(--accent)/.35), transparent 60%);
  opacity:.5;
  transition:opacity .4s;
  content:"";
}

/* ============================================================
 * 标签 / 分类
 * 标签与分类徽标
 * ============================================================ */
.shard .tag {
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:hsl(var(--accent-soft));
}
.shard h3 {
  position:relative;
  margin-top:10px;
  font-size:19px;
  font-weight:800;
}
.shard .desc {
  position:relative;
  overflow:hidden;
  max-height:0;
  margin-top:10px;
  font-size:13px;
  line-height:1.6;
  color:hsl(var(--text-dim));
  opacity:0;
  transition:max-height .5s var(--ease-smooth), opacity .4s;
}
.shard:hover {
  z-index:5;
  border-color:hsl(var(--accent)/.6);
  box-shadow:0 26px 70px hsl(var(--accent)/.3);
  transform:translateY(-6px)rotate(0)scale(1.04)!important;
}
.shard:hover .desc {
  max-height:120px;
  opacity:1;
}
.shard:hover:before {
  opacity:.85;
}
.s1 {
  top:2%;
  left:4%;
  transform:rotate(-5deg);
}
.s2 {
  top:30%;
  right:2%;
  transform:rotate(4deg);
}
.s3 {
  bottom:0%;
  left:24%;
  transform:rotate(-2deg);
}
.whisper {
  padding:60px clamp(16px,5vw,52px);
  text-align:center;
}
.whisper p {
  max-width:760px;
  margin:0 auto;
  font-size:clamp(20px,3.4vw,38px);
  font-weight:800;
  line-height:1.5;
}
.whisper p em {
  font-style:normal;
  color:hsl(var(--accent-soft));
}
.archive {
  padding:96px clamp(16px,5vw,52px) 110px;
}
.archive .kicker {
  margin-bottom:18px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:hsl(var(--accent-soft));
}
.archive h2 {
  margin-bottom:18px;
  font-size:clamp(40px,8vw,92px);
  line-height:.95;
  text-shadow:0 0 44px hsl(var(--accent)/.28);
  color:hsl(var(--text));
}
.archive .sub {
  position:relative;
  max-width:680px;
  margin-bottom:52px;
  padding-left:22px;
  font-size:clamp(16px,2.2vw,21px);
  line-height:1.85;
  letter-spacing:.02em;
  color:hsl(var(--text));
}
.archive .sub:before {
  position:absolute;
  top:6px;
  bottom:6px;
  left:0;
  width:3px;
  border-radius:3px;
  box-shadow:0 0 16px hsl(var(--accent)/.6);
  background:linear-gradient(hsl(var(--accent-soft)), transparent);
  content:"";
}
.archive .sub {
  text-shadow:0 0 22px hsl(var(--accent)/.12);
}

/* ============================================================
 * 瀑布流 / 网格
 * 图库与多列布局
 * ============================================================ */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}

/* ============================================================
 * 卡片 / 文章
 * 文章卡片与列表项
 * ============================================================ */
.card {
  display:block;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  background:hsl(var(--surface));
  transition:transform .35s var(--ease-bounce), border-color .3s, box-shadow .3s;
}
.card:hover {
  border-color:hsl(var(--accent)/.6);
  box-shadow:0 22px 54px hsl(var(--accent)/.22);
  transform:translateY(-8px);
}
.card .cover {
  aspect-ratio:16/10;
  background:linear-gradient(135deg, hsl(var(--accent)/.5), hsl(var(--accent-deep)/.3));
}
.card .body {
  padding:16px 18px;
}
.card h3 {
  margin-bottom:6px;
  font-size:18px;
  font-weight:800;
}
.card .meta {
  font-size:13px;
  color:hsl(var(--text-dim));
}
.section {
  max-width:1100px;
  margin:0 auto;
  padding:110px clamp(16px,5vw,52px);
}
.section-full {
  padding:110px clamp(16px,5vw,52px);
}
.section-head {
  margin-bottom:52px;
}
.section-head .eyebrow {
  font-size:13px;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:hsl(var(--accent-soft));
}
.section-head h2 {
  margin-top:16px;
  font-size:clamp(40px,8vw,92px);
  line-height:.95;
  text-shadow:0 0 44px hsl(var(--accent)/.28);
  color:hsl(var(--text));
}
.section-head p {
  position:relative;
  max-width:680px;
  margin-top:18px;
  padding-left:22px;
  font-size:clamp(16px,2.2vw,21px);
  line-height:1.85;
  text-shadow:0 0 22px hsl(var(--accent)/.12);
  color:hsl(var(--text));
}
.section-head p:before {
  position:absolute;
  top:6px;
  bottom:6px;
  left:0;
  width:3px;
  border-radius:3px;
  box-shadow:0 0 16px hsl(var(--accent)/.6);
  background:linear-gradient(hsl(var(--accent-soft)), transparent);
  content:"";
}
.post {
  max-width:840px;
  margin:0 auto;
  padding:130px clamp(16px,5vw,52px) 60px;
}
.post h1 {
  font-size:clamp(30px,6vw,60px);
  line-height:1.1;
}
.post-meta {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:18px 0 30px;
  font-size:14px;
  color:hsl(var(--text-dim));
}
.post-meta a {
  text-decoration:none;
  color:hsl(var(--accent-soft));
}
.post-author {
  text-decoration:none;
  color:hsl(var(--accent-soft));
  transition:all .25s;
}
.post-author:hover {
  color:hsl(var(--accent));
}
.post-time {
  border-bottom:1px dashed hsl(var(--accent)/.4);
  transition:all .25s;
  cursor:pointer;
}
.post-time:hover {
  border-bottom-color:hsl(var(--accent));
  color:hsl(var(--accent));
}
.post-body {
  font-size:17px;
  line-height:1.9;
  color:hsl(var(--text));
}
.post-body p {
  margin:18px 0;
}
.post-body h2 {
  margin:34px 0 14px;
  font-size:26px;
}
.post-body h3 {
  margin:26px 0 12px;
  font-size:21px;
}
.post-body blockquote {
  margin:20px 0;
  padding:8px 18px;
  border-left:3px solid hsl(var(--accent));
  border-radius:0 12px 12px 0;
  color:hsl(var(--text-dim));
  background:hsl(var(--surface)/.5);
}
.post-body img {
  max-width:100%;
  margin:18px 0;
  border-radius:var(--radius);
}
.post-body pre {
  overflow:auto;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:hsl(var(--bg-2));
}
.post-body code {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;
}
.post-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:30px 0;
}
.post-tags a,.post-tags span {
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:13px;
  text-decoration:none;
  color:hsl(var(--accent-soft));
  background:hsl(var(--surface));
}

/* ============================================================
 * 导航 / Navigation
 * 顶部导航与菜单
 * ============================================================ */
.post-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  margin:40px 0;
}
.post-nav a {
  flex:1;
  min-width:200px;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  background:hsl(var(--surface));
  transition:all .3s;
}
.post-nav a:hover {
  border-color:hsl(var(--accent)/.6);
  transform:translateY(-4px);
}
.post-nav .lbl {
  font-size:12px;
  letter-spacing:.2em;
  color:hsl(var(--text-dim));
}
.post-nav .ttl {
  margin-top:6px;
  font-weight:800;
}

/* ============================================================
 * 评论 / Comments
 * 评论区样式（预留，二开可接入评论插件）
 * ============================================================ */
.comments {
  margin-top:50px;
  padding-top:34px;
  border-top:1px solid var(--border);
}
.comments h3 {
  margin-bottom:18px;
  font-size:20px;
}
.timeline {
  position:relative;
  padding-left:34px;
}
.timeline:before {
  position:absolute;
  top:6px;
  bottom:6px;
  left:9px;
  width:2px;
  background:linear-gradient(hsl(var(--accent)), hsl(var(--accent-deep)));
  opacity:.45;
  content:"";
}
.tl-node {
  position:relative;
  padding:12px 0 12px 18px;
}
.tl-node:before {
  position:absolute;
  top:20px;
  left:-30px;
  width:14px;
  height:14px;
  border:2px solid hsl(var(--accent));
  border-radius:50%;
  box-shadow:0 0 12px hsl(var(--accent)/.7);
  background:hsl(var(--bg));
  transition:all .3s;
  content:"";
}
.tl-node:hover:before {
  background:hsl(var(--accent));
  transform:scale(1.25);
}
.tl-date {
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:hsl(var(--accent-soft));
}
.tl-body {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px;
  margin-top:4px;
}
.tl-title {
  font-size:19px;
  font-weight:800;
  text-decoration:none;
  color:hsl(var(--text));
  transition:all .25s;
}
.tl-title:hover {
  color:hsl(var(--accent-soft));
}

/* ============================================================
 * 标签 / 分类
 * 标签与分类徽标
 * ============================================================ */
.tl-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-left:auto;
}
.tl-cat {
  padding:3px 10px;
  border:1px solid hsl(var(--accent)/.35);
  border-radius:999px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:hsl(var(--accent-soft));
}
.tl-tag {
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  letter-spacing:.1em;
  color:hsl(var(--text-dim));
}
.tl-empty {
  padding:40px 0;
  text-align:center;
  color:hsl(var(--text-dim));
}
.tl-group {
  position:relative;
  margin:34px 0 14px;
  padding-left:18px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.12em;
  color:hsl(var(--text));
}
.tl-group:first-child {
  margin-top:6px;
}
.tl-group:before {
  position:absolute;
  top:50%;
  left:-30px;
  width:18px;
  height:18px;
  border:3px solid hsl(var(--bg));
  border-radius:50%;
  box-shadow:0 0 16px hsl(var(--accent)/.8);
  background:hsl(var(--accent));
  transform:translateY(-50%);
  content:"";
}
.tl-group:after {
  position:absolute;
  right:0;
  bottom:-8px;
  left:6px;
  height:1px;
  background:linear-gradient(90deg, hsl(var(--accent)/.5), transparent);
  content:"";
}

/* ============================================================
 * 筛选 / Filter
 * 分类/标签筛选条
 * ============================================================ */
.archive-filters {
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.af-group {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.af-label {
  flex:none;
  font-size:12px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:hsl(var(--text-dim));
}
.af-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.af-chip {
  padding:7px 15px;
  border:1px solid var(--border);
  border-radius:999px;
  font-family:inherit;
  font-size:13px;
  color:hsl(var(--text-dim));
  background:hsl(var(--surface));
  transition:all .25s;
  cursor:pointer;
}
.af-chip:hover {
  border-color:hsl(var(--accent)/.5);
  color:hsl(var(--accent-soft));
}
.af-chip.is-active {
  border-color:hsl(var(--accent)/.6);
  color:hsl(var(--accent-soft));
  background:hsl(var(--accent)/.16);
}

/* ============================================================
 * 卡片 / 文章
 * 文章卡片与列表项
 * ============================================================ */
.post-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px;
}
.post-card {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  background:hsl(var(--surface));
  transition:transform .35s var(--ease-bounce), border-color .3s, box-shadow .3s;
}
.post-card:hover {
  border-color:hsl(var(--accent)/.6);
  box-shadow:0 22px 54px hsl(var(--accent)/.22);
  transform:translateY(-8px);
}
.post-card .pc-cover {
  overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, hsl(var(--accent)/.4), hsl(var(--accent-deep)/.25));
}
.post-card .pc-cover img {
  display:block;
  object-fit:cover;
  width:100%;
  height:100%;
}
.post-card .pc-body {
  padding:16px 18px 18px;
}
.post-card .pc-cats {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}
.post-card .pc-cats span {
  padding:3px 10px;
  border:1px solid hsl(var(--accent)/.35);
  border-radius:999px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:hsl(var(--accent-soft));
}
.post-card .pc-title {
  margin:0 0 12px;
  font-size:18px;
  font-weight:800;
  line-height:1.35;
}
.post-card .pc-meta {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:hsl(var(--text-dim));
}
.post-card .pc-author {
  color:hsl(var(--accent-soft));
}
.post-card .pc-meta time {
  letter-spacing:.06em;
}

/* ============================================================
 * 分页 / Pager
 * 列表分页控件
 * ============================================================ */
.pager {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:48px 0 10px;
}
.pager .pg {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1;
  color:hsl(var(--text-dim));
  background:hsl(var(--surface));
  transition:all .25s;
  cursor:pointer;
}
.pager .pg:hover:not(.is-disabled) {
  border-color:hsl(var(--accent)/.5);
  color:hsl(var(--accent-soft));
}
.pager .pg.is-active {
  border-color:#0000;
  box-shadow:0 8px 24px hsl(var(--accent)/.4);
  color:#fff;
  background:hsl(var(--accent));
}
.pager .pg.is-disabled {
  opacity:.35;
  cursor:not-allowed;
}
.pager .pg-dots {
  padding:0 4px;
  color:hsl(var(--text-dim));
  user-select:none;
  -webkit-user-select:none;
}

/* ============================================================
 * 筛选 / Filter
 * 分类/标签筛选条
 * ============================================================ */
.filterbar {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 36px;
}
.filterbar a {
  padding:9px 18px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:14px;
  text-decoration:none;
  color:hsl(var(--text-dim));
  background:hsl(var(--surface));
  transition:all .25s;
}
.filterbar a:hover {
  color:hsl(var(--accent-soft));
}
.filterbar a.is-active {
  border-color:#0000;
  box-shadow:0 8px 24px hsl(var(--accent)/.4);
  color:#fff;
  background:hsl(var(--accent));
}

/* ============================================================
 * 瀑布流 / 网格
 * 图库与多列布局
 * ============================================================ */
.masonry {
  gap:12px;
  columns:6 130px;
}
.masonry .ph {
  position:relative;
  overflow:hidden;
  margin-bottom:16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(135deg,hsl(var(--accent)/.4),hsl(var(--accent-deep)/.25));
  transition:.35s var(--ease-bounce);
  cursor:pointer;
}
.masonry .ph:hover {
  border-color:hsl(var(--accent)/.6);
  transform:scale(1.02);
}
.masonry .ph img {
  display:block;
  width:100%;
}
.masonry .ph .cap {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:10px 12px;
  font-size:13px;
  font-weight:700;
  background:linear-gradient(transparent, hsl(var(--bg)/.85));
}
.feed {
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:680px;
  margin:0 auto;
}

/* ============================================================
 * 图库 / 瞬间
 * 照片与瞬间流
 * ============================================================ */
.moment {
  padding:20px 22px;
  border:1px solid var(--border);
  border-left:4px solid hsl(var(--accent));
  border-radius:var(--radius);
  background:hsl(var(--surface));
  transition:.35s var(--ease-bounce);
  cursor:pointer;
}
.moment:hover {
  box-shadow:0 14px 40px hsl(var(--accent)/.18);
  transform:translate(8px);
}
.moment p {
  line-height:1.8;
}
.moment .when {
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  color:hsl(var(--accent-soft));
}

/* ============================================================
 * 首页光球 / Hero Orb
 * 开门式光球交互与光晕
 * ============================================================ */
.about-hero {
  padding:140px 20px 40px;
  text-align:center;
}
.about-hero .avatar {
  width:120px;
  height:120px;
  margin:0 auto 26px;
  border-radius:50%;
  box-shadow:0 0 50px hsl(var(--accent)/.6);
  background:radial-gradient(circle at 40% 35%, hsl(var(--accent-soft)), hsl(var(--accent-deep)));
}
.about-hero h1 {
  font-size:clamp(34px,7vw,68px);
}
.about-hero p {
  max-width:560px;
  margin:20px auto 0;
  font-size:18px;
  line-height:1.8;
  color:hsl(var(--text-dim));
}
.about-body {
  max-width:720px;
  margin:40px auto 0;
  font-size:17px;
  line-height:1.9;
  color:hsl(var(--text));
}
.about-body p {
  margin:18px 0;
}
.broken {
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  min-height:82vh;
  padding:120px 20px 60px;
  text-align:center;
}
.broken .void {
  position:relative;
  font-size:clamp(90px,22vw,240px);
  font-weight:900;
  line-height:.85;
  color:#0000;
  background:linear-gradient(120deg,hsl(var(--accent-soft)),hsl(var(--accent-deep)));
  background-clip:text;
  filter:blur(.3px);
  transform:rotate(-3deg);
  -webkit-background-clip:text;
}
.broken .void:after {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 14px, hsl(var(--bg)) 14px 16px);
  background-clip:text;
  opacity:.5;
  content:"";
  -webkit-background-clip:text;
}
.broken .stray {
  position:absolute;
  border:1px solid hsl(var(--accent)/.25);
  border-radius:14px;
  background:linear-gradient(150deg, hsl(var(--accent)/.32), hsl(var(--accent-deep)/.12));
  filter:blur(.4px);
}
.broken .stray.s1 {
  top:18%;
  left:14%;
  width:120px;
  height:80px;
  transform:rotate(-12deg);
}
.broken .stray.s2 {
  top:60%;
  left:20%;
  width:90px;
  height:120px;
  transform:rotate(8deg);
}
.broken .stray.s3 {
  top:22%;
  right:12%;
  width:140px;
  height:70px;
  transform:rotate(10deg);
}
.broken .stray.s4 {
  right:22%;
  bottom:14%;
  width:70px;
  height:70px;
  border-radius:50%;
  transform:rotate(-6deg);
}
.broken .echo {
  max-width:440px;
  margin-top:26px;
  font-size:17px;
  line-height:1.9;
  letter-spacing:.02em;
  color:hsl(var(--text-dim));
}
.broken .echo del {
  text-decoration-color:hsl(var(--accent-soft)/.6);
  color:hsl(var(--text-dim)/.5);
  -webkit-text-decoration-color:hsl(var(--accent-soft)/.6);
  -webkit-text-decoration-color:hsl(var(--accent-soft)/.6);
}
.broken .echo ins {
  text-decoration:none;
  color:hsl(var(--accent-soft));
}
.broken .home {
  margin-top:34px;
}
.broken .fragment {
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  box-shadow:0 0 14px hsl(var(--accent));
  background:hsl(var(--accent-soft));
  cursor:pointer;
}
.broken .fragment:hover {
  transform:scale(1.8);
}

/* ============================================================
 * 卡片 / 文章
 * 文章卡片与列表项
 * ============================================================ */
.moment-card {
  padding:22px 24px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:hsl(var(--surface));
  transition:transform .35s var(--ease-bounce), border-color .3s, box-shadow .3s;
  cursor:default;
}
.moment-card:hover {
  border-color:hsl(var(--accent)/.6);
  box-shadow:0 14px 40px hsl(var(--accent)/.18);
}

/* ============================================================
 * 图库 / 瞬间
 * 照片与瞬间流
 * ============================================================ */
.moment-meta {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  font-size:13px;
  color:hsl(var(--text-dim));
}
.moment-meta .mdot {
  width:9px;
  height:9px;
  border-radius:50%;
  box-shadow:0 0 10px hsl(var(--accent));
  background:hsl(var(--accent));
}
.moment-body {
  font-size:16px;
  line-height:1.8;
  color:hsl(var(--text));
}
.moment-body p {
  margin:0 0 10px;
}
.moment-media {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
  margin-top:14px;
}
.moment-media img,.moment-media video {
  display:block;
  width:100%;
  border-radius:12px;
}
.moment-media audio {
  width:100%;
  margin-top:6px;
}
.moment-foot {
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--border);
}
.moment-foot .open {
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  color:hsl(var(--accent-soft));
}
.moment-foot .open:hover {
  color:hsl(var(--accent));
}

/* ============================================================
 * 友链 / Links
 * 友链卡片与分组
 * ============================================================ */
.link-empty {
  padding:60px 20px;
  line-height:2.1;
  letter-spacing:.05em;
  text-align:center;
  color:hsl(var(--text-dim));
}
.list-page {
  position:relative;
  z-index:2;
  padding:118px clamp(18px,5vw,52px) 96px;
}

/* ============================================================
 * 页头 / Page Head
 * 栏目页标题区
 * ============================================================ */
.page-head {
  margin-bottom:30px;
}
.page-head .eyebrow {
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:hsl(var(--accent-soft));
}
.page-head h1 {
  font-size:clamp(34px,7vw,72px);
  line-height:.95;
}
.page-head p {
  max-width:640px;
  margin-top:14px;
  line-height:1.7;
  color:hsl(var(--text-dim));
}

/* ============================================================
 * 友链 / Links
 * 友链卡片与分组
 * ============================================================ */
.link-groups {
  display:flex;
  flex-direction:column;
  gap:42px;
}
.link-group .lg-name {
  margin-bottom:18px;
  font-size:14px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:hsl(var(--accent-soft));
}
.link-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}

/* ============================================================
 * 卡片 / 文章
 * 文章卡片与列表项
 * ============================================================ */
.link-card {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:18px 20px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  text-decoration:none;
  color:inherit;
  background:hsl(var(--surface));
  transition:transform .3s var(--ease-bounce), border-color .3s, box-shadow .3s;
}
.link-card .lk-name {
  font-size:17px;
  font-weight:800;
}
.link-card .lk-desc {
  font-size:13px;
  line-height:1.5;
  color:hsl(var(--text-dim));
}
.link-card:hover {
  border-color:hsl(var(--accent)/.6);
  box-shadow:0 14px 40px hsl(var(--accent)/.2);
}

/* ============================================================
 * 瀑布流 / 网格
 * 图库与多列布局
 * ============================================================ */
.archive .grid {
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:36px 26px;
}

/* ============================================================
 * 卡片 / 文章
 * 文章卡片与列表项
 * ============================================================ */
.archive .card {
  position:relative;
  box-shadow:0 18px 44px #00000073;
  transform:rotate(var(--rot,0deg)) scale(var(--sc,1));
  transition:transform .45s var(--ease-bounce), border-color .3s, box-shadow .3s;
  isolation:isolate;
}
.archive .card:before {
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(120% 120% at 82% 0%, hsl(var(--accent)/.32), transparent 60%);
  opacity:.5;
  animation:7s ease-in-out infinite glowBreath;
  content:"";
  pointer-events:none;
}
.archive .card:hover:before {
  opacity:.95;
}
.archive .card:nth-child(4n+1) {
  margin-top:46px;
  --rot:-9deg;
  --sc:1.06;
}
.archive .card:nth-child(4n+2) {
  margin-top:-12px;
  --rot:8deg;
  --sc:.95;
}
.archive .card:nth-child(4n+3) {
  margin-top:74px;
  --rot:-5deg;
  --sc:1.04;
}
.archive .card:nth-child(4n) {
  margin-top:6px;
  --rot:9deg;
  --sc:1;
}
.archive .card:hover {
  position:relative;
  z-index:5;
  border-color:hsl(var(--accent)/.6);
  box-shadow:0 30px 70px hsl(var(--accent)/.28);
  transform:translateY(-12px)rotate(0)scale(1.05);
}
.section-full .feed {
  max-width:none;
}

/* ============================================================
 * 图库 / 瞬间
 * 照片与瞬间流
 * ============================================================ */
.section-full .feed .moment {
  position:relative;
  width:min(640px,92%);
  margin:0 auto 18px;
  border-left:3px solid hsl(var(--accent)/.5);
  box-shadow:0 14px 34px #0006;
  transform:rotate(var(--mr,0deg));
  transition:transform .45s var(--ease-bounce), box-shadow .3s, border-color .3s;
  isolation:isolate;
}
.section-full .feed .moment:before {
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(120% 120% at 0% 0%, hsl(var(--accent)/.24), transparent 55%);
  opacity:.5;
  animation:8s ease-in-out infinite glowBreath;
  content:"";
  pointer-events:none;
}
.section-full .feed .moment:hover:before {
  opacity:.9;
}
.section-full .feed .moment:hover {
  border-color:hsl(var(--accent)/.8);
}
.section-full .feed .moment:nth-child(odd) {
  margin-left:5%;
  margin-right:auto;
  --mr:-2.6deg;
}
.section-full .feed .moment:nth-child(2n) {
  margin-left:auto;
  margin-right:5%;
  --mr:2.8deg;
}
.section-full .feed .moment:nth-child(3n) {
  margin-top:-10px;
  margin-left:20%;
  --mr:-1.6deg;
}
.section-full .feed .moment:nth-child(4n) {
  margin-top:-10px;
  margin-right:20%;
  --mr:1.8deg;
}
.section-full .feed .moment:hover {
  z-index:4;
  box-shadow:0 18px 48px hsl(var(--accent)/.22);
  transform:translate(12px)rotate(0);
}

/* ============================================================
 * 瀑布流 / 网格
 * 图库与多列布局
 * ============================================================ */
.section-full .masonry {
  columns:3 240px;
}
.section-full .masonry .ph {
  position:relative;
  box-shadow:0 14px 34px #0006;
  transform:rotate(var(--pr,0deg)) translateY(var(--py,0));
  transition:transform .45s var(--ease-bounce), border-color .3s, box-shadow .3s;
  isolation:isolate;
}
.section-full .masonry .ph:before {
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(120% 120% at 50% 0%, hsl(var(--accent)/.26), transparent 60%);
  opacity:.5;
  animation:9s ease-in-out infinite glowBreath;
  content:"";
  pointer-events:none;
}
.section-full .masonry .ph:hover:before {
  opacity:.95;
}
.section-full .masonry .ph:nth-child(5n+1) {
  z-index:3;
  --pr:-6deg;
  --py:14px;
}
.section-full .masonry .ph:nth-child(5n+2) {
  z-index:2;
  --pr:5deg;
  --py:-8px;
}
.section-full .masonry .ph:nth-child(5n+3) {
  z-index:4;
  --pr:-3.5deg;
  --py:22px;
}
.section-full .masonry .ph:nth-child(5n+4) {
  z-index:1;
  --pr:6deg;
  --py:-12px;
}
.section-full .masonry .ph:nth-child(5n) {
  z-index:3;
  --pr:-4deg;
  --py:8px;
}
.section-full .masonry .ph:hover {
  z-index:20;
  border-color:hsl(var(--accent)/.6);
  box-shadow:0 24px 60px hsl(var(--accent)/.3);
  transform:rotate(0)translateY(-6px)scale(1.05);
}

/* ============================================================
 * 关键帧动画 / Keyframes
 * 光球/加载/呼吸等动画定义
 * ============================================================ */
@keyframes glowBreath {
  0%,to {
    filter:brightness();
  }
  50% {
    filter:brightness(1.4);
  }
}
.list-page .list .list-row {
  transition:transform .25s,padding .25s;
}
.list-page .list .list-row:hover {
  padding-left:18px;
  transform:translate(10px);
}

/* ============================================================
 * 卡片 / 文章
 * 文章卡片与列表项
 * ============================================================ */
.moments-page .feed .moment-card {
  transition:transform .35s var(--ease-bounce), box-shadow .3s;
}
.moments-page .feed .moment-card:hover {
  box-shadow:0 14px 40px hsl(var(--accent)/.18);
  transform:translate(8px);
}

/* ============================================================
 * 瀑布流 / 网格
 * 图库与多列布局
 * ============================================================ */
.gallery-page .masonry {
  columns:4;
  column-gap:14px;
}
.gallery-page .masonry .ph {
  transition:transform .35s var(--ease-bounce), border-color .3s;
}
.gallery-page .masonry .ph:hover {
  border-color:hsl(var(--accent)/.6);
  transform:scale(1.03);
}

/* ============================================================
 * 页头 / Page Head
 * 栏目页标题区
 * ============================================================ */
.list-page .page-head h1 {
  display:inline-block;
  transform-origin:0;
  transform:rotate(-1.4deg);
}

/* ============================================================
 * 卡片 / 文章
 * 文章卡片与列表项
 * ============================================================ */
.posts-page .page-head h1 {
  transform:rotate(-2.6deg);
}

/* ============================================================
 * 页头 / Page Head
 * 栏目页标题区
 * ============================================================ */
.moments-page .page-head h1 {
  transform-origin:100%;
  transform:rotate(2.8deg);
}
.gallery-page .page-head h1 {
  transform:rotate(-1.6deg)skew(-3deg);
}

/* ============================================================
 * 友链 / Links
 * 友链卡片与分组
 * ============================================================ */
.links-page .page-head h1 {
  transform:rotate(2deg);
}

/* ============================================================
 * 页头 / Page Head
 * 栏目页标题区
 * ============================================================ */
.list-page .page-head .eyebrow {
  display:inline-block;
  transform:rotate(-3deg);
}
.list-page .page-head p {
  transform:rotate(.8deg);
}

/* ============================================================
 * 筛选 / Filter
 * 分类/标签筛选条
 * ============================================================ */
.filterbar .chip {
  transform:rotate(var(--cr,0deg));
  transition:transform .25s,color .25s,background .25s;
}
.filterbar .chip:nth-child(odd) {
  --cr:-1.8deg;
}
.filterbar .chip:nth-child(2n) {
  --cr:1.8deg;
}
.filterbar .chip:hover {
  transform:rotate(0)translateY(-2px);
}

/* ============================================================
 * 卡片 / 文章
 * 文章卡片与列表项
 * ============================================================ */
.link-card:hover {
  transform:translateY(-4px);
}

/* ============================================================
 * 弹窗 / Modal
 * 灯箱与弹层
 * ============================================================ */
.iframe-modal {
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:hsl(var(--bg)/.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.iframe-modal.open {
  display:flex;
}
.iframe-modal-inner {
  position:relative;
  overflow:hidden;
  width:min(960px,100%);
  height:min(88vh,920px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 40px 100px #0009;
  background:hsl(var(--surface));
}
.iframe-frame {
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:hsl(var(--bg));
}
.modal-close {
  position:absolute;
  top:12px;
  right:14px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid var(--border);
  border-radius:50%;
  font-size:16px;
  color:hsl(var(--text));
  background:hsl(var(--surface)/.92);
  transition:all .25s;
  cursor:pointer;
}
.modal-close:hover {
  border-color:hsl(var(--accent)/.6);
  color:hsl(var(--accent-soft));
  transform:rotate(90deg);
}
.detail-modal {
  z-index:120;
}
.login-modal {
  z-index:130;
}
.detail-modal .iframe-modal-inner {
  width:min(960px,100%);
  height:min(88vh,920px);
}
.login-modal .iframe-modal-inner {
  width:min(440px,100%);
  height:min(86vh,720px);
}
.login-err {
  position:absolute;
  left:50%;
  top:16px;
  transform:translateX(-50%);
  z-index:4;
  max-width:calc(100% - 72px);
  margin:0;
  padding:9px 14px;
  box-sizing:border-box;
  font-size:13px;
  line-height:1.5;
  text-align:center;
  color:hsl(355 85% 74%);
  background:hsl(355 70% 50% / .14);
  border:1px solid hsl(355 80% 60% / .55);
  border-radius:12px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.login-err[hidden] {
  display:none;
}
body.modal-open {
  overflow:hidden;
}

/* ============================================================
 * 导航 / Navigation
 * 顶部导航与菜单
 * ============================================================ */
body.modal-open .site-header,body.modal-open .compass,body.modal-open .star-map,body.modal-open .map-audio,body.modal-open #boom {
  display:none!important;
}
.plate {
  position:relative;
}
.plate-login {
  position:absolute;
  bottom:14px;
  left:clamp(16px,4vw,40px);
  z-index:2;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.55em 1.1em;
  border:1px solid var(--border);
  border-radius:999px;
  font:inherit;
  font-size:.86rem;
  line-height:1;
  letter-spacing:.08em;
  white-space:nowrap;
  color:hsl(var(--text-dim));
  background:hsl(var(--surface)/.7);
  backdrop-filter:blur(6px);
  transition:all .25s;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
}
.plate-login:before {
  font-size:.9em;
  color:hsl(var(--accent));
  content:"◍";
}
.plate-login:hover {
  border-color:hsl(var(--accent)/.6);
  box-shadow:0 8px 24px hsl(var(--accent)/.18);
  color:hsl(var(--accent-soft));
  transform:translateY(-2px);
}
.plate-auth {
  position:absolute;
  bottom:14px;
  left:clamp(16px,4vw,40px);
  z-index:2;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:1em;
}
.plate-auth>[hidden] {
  display:none;
}
.plate-admin {
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.55em 1.1em;
  border:1px solid hsl(var(--accent)/.5);
  border-radius:999px;
  font:inherit;
  font-size:.86rem;
  line-height:1;
  letter-spacing:.08em;
  text-decoration:none;
  white-space:nowrap;
  color:hsl(var(--accent-soft));
  background:hsl(var(--accent)/.14);
  backdrop-filter:blur(6px);
  transition:all .25s;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
}
.plate-admin:before {
  color:hsl(var(--accent));
  content:"◍";
}
.plate-admin:hover {
  box-shadow:0 8px 24px hsl(var(--accent)/.25);
  color:hsl(var(--accent-soft));
  background:hsl(var(--accent)/.24);
  transform:translateY(-2px);
}
.plate-logout {
  padding:.5em .2em;
  border:0;
  font:inherit;
  font-size:.84rem;
  letter-spacing:.06em;
  color:hsl(var(--text-dim));
  background:0 0;
  transition:all .2s;
  cursor:pointer;
}
.plate-logout:hover {
  text-decoration:underline;
  color:hsl(var(--accent-soft));
}

/* ============================================================
 * 图库 / 瞬间
 * 照片与瞬间流
 * ============================================================ */
.single-moment,.single-photo {
  max-width:840px;
  margin:0 auto;
  padding:130px clamp(16px,5vw,52px) 60px;
}
.single-photo .ph-big {
  overflow:hidden;
  margin-bottom:28px;
  border-radius:var(--radius);
}
.single-photo .ph-big img {
  display:block;
  width:100%;
}
.single-photo .photo-head h1 {
  font-size:clamp(28px,5vw,48px);
}
.single-photo .photo-head .desc {
  margin-top:10px;
  color:hsl(var(--text-dim));
}
.single-photo .photo-head .meta {
  margin-top:12px;
  font-size:13px;
  letter-spacing:.1em;
  color:hsl(var(--accent-soft));
}
.single-moment .moment-body {
  font-size:17px;
  line-height:1.9;
}
.single-moment .moment-media {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
  margin-top:18px;
}
.single-moment .moment-media img,.single-moment .moment-media video {
  display:block;
  width:100%;
  border-radius:12px;
}
.single-moment .moment-media audio {
  width:100%;
  margin-top:6px;
}
body.framed {
  overflow:auto;
}

/* ============================================================
 * 导航 / Navigation
 * 顶部导航与菜单
 * ============================================================ */
body.framed .site-header,body.framed .star-map,body.framed .compass,body.framed .map-audio,body.framed #stars,body.framed .noise,body.framed #cursorGlow,body.framed #boom,body.framed .plate {
  display:none!important;
}
body.framed .site-main {
  padding-top:0;
}

/* ============================================================
 * 图库 / 瞬间
 * 照片与瞬间流
 * ============================================================ */
body.framed .single-moment,body.framed .single-photo {
  padding:30px clamp(16px,4vw,36px) 56px;
}
.img-zoom {
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:#000000eb;
  cursor:zoom-out;
}
.img-zoom.open {
  display:flex;
}
.img-zoom img {
  max-width:100%;
  max-height:100%;
  border-radius:var(--radius);
  box-shadow:0 30px 80px #000000b3;
}

/* ============================================================
 * 入场动画 / Reveal
 * 滚动渐显
 * ============================================================ */
.reveal {
  opacity:0;
  filter:blur(6px);
  transform:translateY(30px)scale(.985);
  transition:opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth), filter .8s var(--ease-smooth);
  transition-delay:var(--rd,0s);
  will-change:opacity, transform;
}
.reveal-in {
  opacity:1;
  filter:none;
  transform:none;
}
@media (width<=820px) {
  .hero-grid {
    grid-template-columns:1fr;
  }
  .shards {
    height:420px;
    margin-top:20px;
  }
  .masonry {
    columns:2 140px;
  }
  .plate-inner {
    flex-direction:column;
    align-items:flex-start;
  }
  .plate-days {
    text-align:left;
  }
}
@media (prefers-reduced-motion:reduce) {
  * {
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}