/* 基础 + 全局界面 + 通用组件 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.85;
  overflow-x: hidden;
  transition: background-color 2.4s var(--ease), color 2.4s var(--ease);
}
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0 0 1em; }
strong { font-weight: 900; color: var(--fg); }
::selection { background: var(--klein); color: #fff; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.mono { font-family: var(--f-mono); letter-spacing: .08em; }
.muted { color: var(--dim); }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
}

/* ---------- 背景层：香烟 / 噪点 / 过曝 / 故障 ---------- */
#smoke { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 60;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-1%, 4%); }
}
body::before {
  /* 过曝：同化越高越亮 */
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 55;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, calc(var(--assim) * .55)), transparent 70%);
  transition: background 2s;
}
#glitch { position: fixed; inset: 0; pointer-events: none; z-index: 56; display: none; }
#glitch i {
  position: absolute; left: 0; right: 0; height: 3px;
  background: var(--klein-glow);
  mix-blend-mode: multiply;
  opacity: 0;
  animation: glitch 7s steps(1) infinite;
}
#glitch i:nth-child(1) { top: 22%; animation-delay: -1s; }
#glitch i:nth-child(2) { top: 58%; height: 14px; animation-delay: -3.4s; left: 30%; right: 10%; }
#glitch i:nth-child(3) { top: 81%; height: 6px; animation-delay: -5.2s; right: 45%; }
@keyframes glitch {
  0%, 91%, 100% { opacity: 0; transform: translateX(0); }
  92% { opacity: .7; transform: translateX(-30px); }
  94% { opacity: .35; transform: translateX(40px); }
  96% { opacity: .6; transform: translateX(-8px); }
}
body[data-stage="2"] #glitch, body[data-stage="3"] #glitch { display: block; }
body[data-stage="3"] #glitch i { animation-duration: 4s; }
body[data-stage="3"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='5' fill='%23ffe9b0' fill-opacity='.85'/><circle cx='12' cy='12' r='10' fill='%23ffe9b0' fill-opacity='.2'/></svg>") 12 12, auto;
}

/* ---------- 顶栏 ---------- */
#chrome {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 70%, transparent));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  transition: background 2.4s;
}
#chrome[hidden] { display: none; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand__star { color: var(--accent); font-size: 18px; }
.brand__case { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; }
.backlink {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--dim); text-decoration: none;
  border-left: 1px solid var(--line-2); padding-left: 20px; transition: color .3s;
}
.backlink:hover { color: var(--fg); }
.chrome__spacer { flex: 1; }
body.is-home .backlink { visibility: hidden; }
.status { display: flex; align-items: center; gap: 12px; }
.status__tokens { display: flex; align-items: center; gap: 8px; }
.tok { display: inline-flex; align-items: center; }
.tok--flame {
  width: 8px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6d8, #ffd27a 60%, rgba(255, 190, 90, 0));
  box-shadow: 0 0 10px 3px rgba(255, 220, 140, .35);
  animation: flicker 1.6s infinite alternate;
}
@keyframes flicker { 0% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(.9, 1.08) rotate(2deg); } 100% { transform: scale(1.05, .95); } }
.tok--bell .icon { width: 22px; height: 22px; color: var(--klein-glow); }
.tok--gun { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--fg-2); border: 1px solid var(--line-2); padding: 1px 6px; }
.meter { display: flex; align-items: center; gap: 8px; }
.meter svg { width: 34px; height: 34px; }
.meter__base { fill: var(--ink-2); stroke: var(--line-2); }
.meter__fill { fill: #fff; transition: all 1.4s var(--ease); }
.meter__ring { fill: none; stroke: var(--line-2); stroke-dasharray: 2 3; }
.meter__text { display: flex; flex-direction: column; line-height: 1.2; }
.meter__label { font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; color: var(--dim); }
.meter__text b { font-weight: 600; font-size: 14px; letter-spacing: .3em; }

/* ---------- 角落按钮 ---------- */
.corner {
  position: fixed; bottom: 18px; z-index: 45;
  background: none; border: 1px solid var(--line-2); color: var(--dim);
  font-size: 12px; padding: 6px 12px; cursor: pointer; letter-spacing: .12em;
  transition: color .3s, border-color .3s;
}
.corner:hover { color: var(--fg); border-color: var(--fg-2); }
.corner--left { left: 18px; }
.corner--right { right: 18px; display: flex; align-items: center; gap: 8px; }
.corner[hidden] { display: none; }
.music__bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.music__bars i { width: 2px; height: 3px; background: currentColor; }
#music[aria-pressed="true"] { color: var(--fg); }
#music[aria-pressed="true"] .music__bars i { animation: bars 1.1s ease-in-out infinite alternate; }
#music[aria-pressed="true"] .music__bars i:nth-child(2) { animation-delay: -.4s; }
#music[aria-pressed="true"] .music__bars i:nth-child(3) { animation-delay: -.8s; }
@keyframes bars { from { height: 2px; } to { height: 10px; } }

/* ---------- 页面容器 ---------- */
#app { position: relative; z-index: 1; outline: none; min-height: 80vh; padding-bottom: 96px; }
#app.enter { animation: enter .9s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-head { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--gutter) 32px; }
.page-head h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: .12em; }
.page-head__lead { color: var(--fg-2); margin-top: 12px; max-width: 40em; }
.page-head--center { text-align: center; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 26px; border: 1px solid var(--line-2); background: transparent;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .2em;
  text-decoration: none; cursor: pointer; transition: all .3s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--klein) 18%, transparent); }
.btn:disabled { cursor: default; opacity: .55; }
.btn--klein { background: var(--klein); border-color: var(--klein); color: #fff; }
.btn--klein:hover:not(:disabled) { background: var(--klein-glow); color: #fff; }
.btn.is-done { border-style: dashed; }

/* ---------- 维的手写批注 ---------- */
.note {
  font-family: var(--f-hand);
  color: var(--note);
  font-size: 17px;
  line-height: 1.6;
  margin: 18px 0 0;
  padding-left: 22px;
  position: relative;
  transform: rotate(-1.2deg);
  transform-origin: left;
  transition: color 2s, font-size 2s, opacity 2s;
}
.note__mark { position: absolute; left: 0; top: 0; opacity: .8; }
body[data-stage="2"] .note { font-size: 14px; }
body[data-stage="3"] .note { opacity: 0; }
.note.is-covered { color: transparent; background: var(--bg-2); }
.note.is-covered .note__mark { opacity: 0; }

/* ---------- 被替换的颂词 ---------- */
.hymn {
  color: var(--accent);
  font-style: italic;
  border-bottom: 1px dotted currentColor;
  animation: hymn-in 2.4s var(--ease);
}
body[data-stage="3"] .hymn { color: var(--fg-2); border-bottom-color: transparent; }
@keyframes hymn-in { from { filter: blur(4px); opacity: 0; } }

/* ---------- 匿名字迹 ---------- */
.anon { display: inline-flex; position: relative; letter-spacing: .06em; }
.anon span { display: inline-block; transition: filter .4s, opacity .4s, color .4s; }
.anon--wax span {
  transform-origin: top center;
  filter: blur(.6px);
  text-shadow: 0 2px 0 currentColor, 0 5px 2px color-mix(in srgb, currentColor 50%, transparent), 0 10px 6px color-mix(in srgb, currentColor 18%, transparent);
  animation: wax 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.9s);
  opacity: .8;
}
@keyframes wax {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(2px) scaleY(1.32); }
}
.anon--strike { color: var(--dim); }
.anon--strike::after {
  content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 9px; margin-top: -5px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 6 C10 2 20 9 30 5 S50 1 60 6 S80 9 100 3' stroke='black' stroke-width='2.4' fill='none'/><path d='M2 3 C20 8 40 1 60 5 S90 7 98 6' stroke='black' stroke-width='1.6' fill='none'/></svg>") center / 100% 100% no-repeat;
  filter: invert(var(--strike-invert, 1));
}
body[data-stage="2"] .anon--strike::after, body[data-stage="3"] .anon--strike::after { --strike-invert: 0; }
.anon--white span { color: transparent; background: var(--fog); }
body[data-stage="2"] .anon--white span, body[data-stage="3"] .anon--white span { background: #fff; }
.anon:hover .peek { filter: none; opacity: 1; color: var(--fg); background: transparent; text-shadow: none; animation: none; }

/* ---------- 模态框 ---------- */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(4px); }
.modal__panel {
  position: relative; width: min(760px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--sheet); border: 1px solid var(--line-2);
  padding: 44px clamp(20px, 4vw, 48px);
  animation: enter .5s var(--ease);
}
.modal__close {
  position: absolute; top: 12px; right: 14px; background: none; border: 0; cursor: pointer;
  color: var(--dim); font-size: 16px; padding: 6px;
}
.modal__close:hover { color: var(--fg); }
body.has-modal { overflow: hidden; }

/* ---------- 图标 ---------- */
.icon { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.icon .thin { stroke-width: .8; }
.icon .dash { stroke-dasharray: 2 3; stroke-width: .8; }
.icon .fill { fill: currentColor; stroke: none; }
.icon .fill-soft { fill: color-mix(in srgb, currentColor 25%, transparent); }
.icon .fill-solid { fill: currentColor; stroke: none; }
.icon .strike { stroke: var(--accent); stroke-width: 1.6; }
.icon .tiny { font-family: var(--f-mono); font-size: 4px; fill: currentColor; stroke: none; letter-spacing: .1em; }

.moon .moon-edge { fill: none; stroke: var(--line-2); stroke-width: 1; }
.moon .moon-lit { fill: var(--fg); stroke: none; }

/* 人物剪影 */
.portrait__bg { fill: var(--klein-deep); }
.portrait__grid path { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.portrait__body, .portrait__body * { fill: #0b0f1c; }
.portrait__bar { mix-blend-mode: normal; }

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

@media (max-width: 640px) {
  .brand__case { display: none; }
  .backlink { border-left: 0; padding-left: 0; }
}