/* ------------------------------------------------------------------
   ENW.CC — 千万分之一
   深夜的海 / 一个亮点 / 一条从你到我、或者从我到你的线
------------------------------------------------------------------- */

:root {
  --ink:       #05111C;   /* 底：夜里的海 */
  --ink-2:     #08192A;   /* 深一层的水 */
  --mist:      #7E93A6;   /* 千万个网站：远处的灰青 */
  --haze:      #A9BCC9;   /* 次级正文 */
  --paper:     #EDE3D4;   /* 正文：暖纸白 */
  --lamp:      #E4A155;   /* 唯一的暖光 */
  --lamp-soft: #F0C48C;

  --rule:      rgba(126, 147, 166, .22);
  --rule-soft: rgba(126, 147, 166, .12);

  --serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC",
           "Noto Serif CJK SC", "SimSun", "Georgia", serif;
  --sans:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
           system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .24, 1);
  --rail: clamp(1.1rem, 7vw, 6.5rem);
  --gap:  clamp(1.5rem, 3.6vw, 3rem);
  --block: clamp(4.6rem, 13vh, 9.5rem);
  --edge-start: calc(var(--rail) + var(--gap));
  --edge-end: clamp(1.1rem, 6vw, 5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(120% 80% at 78% 12%, #0C2133 0%, rgba(12, 33, 51, 0) 58%),
    linear-gradient(180deg, #05111C 0%, #07172A 38%, #04101A 72%, #061523 100%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1rem, .34vw + .93rem, 1.14rem);
  line-height: 1.95;
  font-weight: 400;
  letter-spacing: .015em;
  text-rendering: optimizeLegibility;
}

/* --- 后台：千万个网站 ------------------------------------------- */

#field {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 78% at 50% 46%, rgba(5, 17, 28, 0) 42%, rgba(5, 17, 28, .72) 100%),
    linear-gradient(180deg, rgba(5, 17, 28, .5), rgba(5, 17, 28, 0) 22%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 那条线：你走下来的路 --------------------------------------- */

.thread {
  position: fixed;
  top: 0;
  left: var(--rail);
  z-index: 3;
  width: 1px;
  height: 100vh;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(126, 147, 166, 0) 0%,
    rgba(126, 147, 166, .20) 10%,
    rgba(126, 147, 166, .20) 90%,
    rgba(126, 147, 166, 0) 100%);
}
.thread__bar {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(228, 161, 85, .25), var(--lamp));
  transform: scaleY(0);
  transform-origin: top center;
}
.thread__head {
  position: absolute;
  top: 0; left: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 10px 2px rgba(228, 161, 85, .5);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
body.has-scrolled .thread__head { opacity: 1; }

/* --- 版心 ------------------------------------------------------- */

main { position: relative; z-index: 2; display: block; }

.hero,
.chapter,
.foot {
  padding-inline-start: var(--edge-start);
  padding-inline-end: var(--edge-end);
}

/* 一 · 序 -------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 22vh 16vh;
}

.hero__small {
  margin: 0 0 clamp(1.6rem, 4vh, 2.6rem);
  font-family: var(--sans);
  font-size: .84rem;
  letter-spacing: .06em;
  color: var(--mist);
}

.hero__title {
  margin: 0;
  max-width: 20em;
  font-size: clamp(2.05rem, 5.4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: .015em;
  text-shadow: 0 0 26px rgba(5, 17, 28, .85);
}
.hero__title .line { display: block; }

.hero__lede {
  margin: clamp(2rem, 5vh, 3.2rem) 0 0;
  max-width: 26em;
  font-size: clamp(.98rem, .3vw + .9rem, 1.1rem);
  line-height: 2.05;
  color: var(--haze);
  text-shadow: 0 0 22px rgba(5, 17, 28, .9);
}

.hero__hint {
  margin: clamp(2.4rem, 6vh, 4rem) 0 0;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--mist);
}
.hero__hint::after {
  content: "";
  display: block;
  width: 34px; height: 1px;
  margin-top: .9rem;
  background: linear-gradient(90deg, var(--mist), rgba(126, 147, 166, 0));
}

/* 章 ------------------------------------------------------------- */

.chapter {
  max-width: calc(36em + var(--rail) + var(--gap) + 5rem);
  padding-block: var(--block);
}

.chapter__title {
  margin: 0 0 clamp(1.8rem, 4vh, 2.6rem);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .03em;
}

.prose { max-width: 34em; }
.prose p {
  margin: 0 0 1.35em;
  text-shadow: 0 0 20px rgba(5, 17, 28, .92), 0 0 40px rgba(5, 17, 28, .7);
}
.prose p:last-child { margin-bottom: 0; }

/* 示意：一条线上的一点 ------------------------------------------- */

.odds {
  margin: clamp(3.4rem, 8vh, 5.5rem) 0 0;
  max-width: 40em;
}
.odds__cap {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .05em;
  color: var(--mist);
}
.odds__line {
  position: relative;
  height: 1px;
  margin: clamp(2.8rem, 6vh, 4rem) 0 2.4rem;
  background: var(--rule);
}
.odds__you {
  position: absolute;
  top: 0; left: 63%;
}
.odds__dot {
  position: absolute;
  top: -2.5px; left: -2.5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 12px 3px rgba(228, 161, 85, .55);
}
.odds__label {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--lamp);
}
.odds__note {
  margin: 0;
  max-width: 32em;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--mist);
}

/* 路线：一条竖着的线，最后一个点亮着 ------------------------------ */

.route {
  position: relative;
  --pad: clamp(2.2rem, 5vw, 3.2rem);
  counter-reset: hop;
  list-style: none;
  margin: clamp(2.6rem, 6vh, 4rem) 0 0;
  padding: 0 0 0 var(--pad);
  max-width: 36em;
  border-left: 1px solid var(--rule);
}
.route li {
  position: relative;
  counter-increment: hop;
  padding: .62rem 0;
  color: var(--haze);
  font-size: clamp(.96rem, .3vw + .88rem, 1.06rem);
  line-height: 1.9;
  text-shadow: 0 0 18px rgba(5, 17, 28, .9);
}
.route li::before {
  content: counter(hop);
  position: absolute;
  left: calc(-1 * var(--pad) - 2.8rem);
  top: .95rem;
  width: 1.6rem;
  text-align: right;
  font-family: var(--serif);
  font-size: .74rem;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--mist);
  opacity: .9;
}
.route li::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--pad) - 3px);
  top: 1.35rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--mist);
}
.route li:last-child { color: var(--paper); }
.route li:last-child::after {
  background: var(--lamp);
  border-color: var(--lamp);
  box-shadow: 0 0 10px 2px rgba(228, 161, 85, .5);
}

/* 真实计时 ------------------------------------------------------- */

.timing {
  margin: clamp(3rem, 7vh, 4.6rem) 0 0;
  max-width: 34em;
}
.timing__title {
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--mist);
}
.timing__list {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.timing__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1.2rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.timing__row dt {
  font-family: var(--sans);
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--haze);
}
.timing__row dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
  color: var(--paper);
}
.timing__row--sum {
  border-bottom: 0;
  border-top: 1px solid var(--rule);
  margin-top: 1.4rem;
  padding-top: 1.1rem;
}
.timing__row--sum dt { color: var(--paper); font-size: .9rem; }
.timing__row--sum dd { color: var(--lamp); font-size: 1.3rem; }
.timing__note {
  margin: 1.6rem 0 0;
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--mist);
}

/* 三 · 那句话 ---------------------------------------------------- */

.quote {
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: clamp(1.4rem, 6vw, 2.4rem);
  padding-block: clamp(5rem, 16vh, 11rem);
  text-align: center;
}
.quote__lead {
  margin: 0 0 clamp(2.4rem, 6vh, 3.6rem);
  font-family: var(--sans);
  font-size: .84rem;
  letter-spacing: .08em;
  color: var(--mist);
}
.quote__body {
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 1.9rem);
  line-height: 2;
  letter-spacing: .05em;
}
.quote__body .line {
  display: block;
  text-shadow: 0 0 24px rgba(5, 17, 28, .95);
}
.quote__body .line--last {
  margin-top: .5em;
  color: var(--lamp-soft);
  font-size: 1.06em;
  letter-spacing: .1em;
}
.quote__body .line:nth-child(1) { --rd: 0ms; }
.quote__body .line:nth-child(2) { --rd: 240ms; }
.quote__body .line:nth-child(3) { --rd: 480ms; }
.quote__body .line:nth-child(4) { --rd: 760ms; }
.quote__body .line:nth-child(5) { --rd: 1080ms; }

.quote__by {
  margin: clamp(2rem, 5vh, 2.8rem) 0 0;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--mist);
}
.quote__after {
  margin: clamp(3rem, 8vh, 4.5rem) auto 0;
  max-width: 26em;
  font-size: .98rem;
  line-height: 2.05;
  color: var(--haze);
}

/* 四 · 问 -------------------------------------------------------- */

.ask {
  max-width: 44rem;
  margin: 0 auto;
  padding-inline: clamp(1.4rem, 6vw, 2.4rem);
  padding-block: clamp(3rem, 9vh, 6rem);
  text-align: center;
}
.ask__lead {
  margin: 0 0 clamp(1.6rem, 4vh, 2.4rem);
  font-family: var(--sans);
  font-size: .84rem;
  letter-spacing: .08em;
  color: var(--mist);
}
.ask__q {
  margin: 0;
  font-size: clamp(1.65rem, 4.2vw, 3.3rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
  text-shadow: 0 0 30px rgba(5, 17, 28, .95);
}
.ask__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(1.8rem, 5vw, 3.4rem);
  margin: clamp(2.6rem, 7vh, 4rem) 0 0;
}
body.answered .ask__acts { display: none; }

.say {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 0 .35rem;
  font-family: var(--serif);
  cursor: pointer;
  color: inherit;
  border-bottom: 1px solid var(--rule);
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.say--yes {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--paper);
  border-bottom-color: var(--lamp);
}
.say--no {
  font-size: .95rem;
  color: var(--mist);
}
.say:hover, .say:focus-visible { color: var(--lamp); }
.say--no:hover, .say--no:focus-visible { color: var(--haze); }

/* 五 · 记下 ------------------------------------------------------ */

/* 折叠靠 grid 行收缩；内边距不能放在被裁的那一层，否则收不到零 */
.after {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}

.js .after {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 1.1s var(--ease), opacity 1.1s var(--ease);
}
.js body.answered .after { grid-template-rows: 1fr; opacity: 1; }

.after__inner {
  overflow: hidden;
  padding-inline-start: var(--edge-start);
  padding-inline-end: var(--edge-end);
}

.after__resp {
  margin: 0 0 clamp(2.6rem, 6vh, 4rem);
  padding-top: clamp(2rem, 5vh, 3.4rem);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: .04em;
  color: var(--lamp-soft);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.4rem, 4vw, 3rem);
  max-width: 46rem;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
}
.fact { padding-top: 1rem; border-top: 1px solid var(--rule); }
.fact dt {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--mist);
}
.fact dd {
  margin: .5rem 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.after__mood {
  max-width: 34em;
  margin: 0 0 clamp(3.4rem, 9vh, 5.5rem);
  color: var(--haze);
  text-shadow: 0 0 20px rgba(5, 17, 28, .9);
}

/* 留言簿 --------------------------------------------------------- */

.guest { max-width: 34em; }
.guest__title {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: .06em;
}
.guest__note {
  margin: 0 0 clamp(1.8rem, 4vh, 2.4rem);
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.95;
  letter-spacing: .03em;
  color: var(--mist);
}
.guest__form {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .5rem;
  transition: border-color .5s var(--ease);
}
.guest__form:focus-within {
  border-bottom-color: var(--lamp);
  box-shadow: 0 1px 0 0 var(--lamp);
}
.guest__input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  background: none;
  padding: .4rem 0;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .03em;
  color: var(--paper);
  caret-color: var(--lamp);
}
.guest__input::placeholder { color: rgba(126, 147, 166, .85); }
.guest__input:focus { outline: none; }
.guest__btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--mist);
  cursor: pointer;
  transition: color .4s var(--ease);
}
.guest__btn:hover, .guest__btn:focus-visible { color: var(--lamp); }

.guest__list { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.guest__list li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .98rem;
  line-height: 1.85;
  color: var(--haze);
  overflow-wrap: anywhere;
}
.guest__list li:first-child.is-new { animation: slideIn .9s var(--ease) both; }
.guest__list time {
  display: block;
  margin-top: .3rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .08em;
  color: rgba(126, 147, 166, .88);
}
.guest__empty {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .05em;
  color: rgba(126, 147, 166, .92);
  border-bottom: 0 !important;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* 尾声 ----------------------------------------------------------- */

.coda {
  max-width: 34em;
  margin: clamp(4rem, 11vh, 7rem) 0 var(--block);
  padding-top: clamp(2.4rem, 6vh, 3.4rem);
  border-top: 1px solid var(--rule);
}
.coda p { margin: 0 0 1.3em; text-shadow: 0 0 20px rgba(5, 17, 28, .9); }
.coda p:last-child { margin-bottom: 0; }
.coda__url {
  font-weight: 400;
  color: var(--lamp);
  letter-spacing: .06em;
}

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

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .8rem clamp(1.2rem, 4vw, 2.6rem);
  padding-block: clamp(3rem, 8vh, 5rem) clamp(2.4rem, 6vh, 4rem);
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--mist);
}
.foot__mark { color: var(--haze); letter-spacing: .2em; }
.foot__say { letter-spacing: .06em; }
.foot__top {
  margin-inline-start: auto;
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .2rem;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.foot__top:hover, .foot__top:focus-visible {
  color: var(--lamp);
  border-bottom-color: var(--lamp);
}

/* --- 出现的方式 -------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(5px);
  transition:
    opacity 1s var(--ease) var(--rd, 0ms),
    transform 1.15s var(--ease) var(--rd, 0ms),
    filter 1s var(--ease) var(--rd, 0ms);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}

.js .line .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  filter: blur(6px);
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease),
    filter 1.1s var(--ease);
  transition-delay: calc(var(--rd, 0ms) + var(--i, 0) * 38ms);
}
.js .line.in .ch {
  opacity: 1;
  transform: none;
  filter: none;
}
.js .line[data-split-quote] .ch { transition-duration: 1.5s; }
.js .line[data-split-quote].in .ch { transition-delay: calc(var(--rd, 0ms) + var(--i, 0) * 22ms); }

/* --- 基础可达性 -------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 4px;
  border-radius: 2px;
}
::selection { background: rgba(228, 161, 85, .3); color: #FFF6EA; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 窄屏 -------------------------------------------------------- */

@media (max-width: 720px) {
  :root {
    --rail: .9rem;
    --gap: 1.6rem;
  }
  body { line-height: 1.9; }
  .hero { padding-block: 20vh 12vh; }
  .hero__title { font-size: clamp(1.55rem, 7.4vw, 2.2rem); max-width: 14em; }
  .hero__lede { max-width: 22em; }
  .quote, .ask { padding-inline: clamp(1.3rem, 5vw, 2rem); }
  .quote__body { font-size: clamp(.92rem, 4.4vw, 1.5rem); letter-spacing: .02em; }
  .ask__q { font-size: clamp(1.5rem, 7.4vw, 2.4rem); }
  .route { --pad: 2.2rem; }
  .route li::before { left: calc(-1 * var(--pad) - 1.45rem); width: 1.1rem; }
  .facts { grid-template-columns: 1fr 1fr; }
  .foot__top { margin-inline-start: 0; }
}

/* --- 不想动的人 -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .line .ch {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .after { transition: none; }
  .js .after { transition: none; }
  .guest__list li:first-child { animation: none; }
  .thread__head { transition: none; }
}

/* ------------------------------------------------------------------
   背景音乐开关
   页面上唯一一个"新东西"：右下角一行小字。默认不响 ——
   浏览器不许页面自己出声，也要尊重"我只想安静读一段"的人。
   三条竖线只在响着的时候动，是那节"信号穿过光缆"的最小回声。
------------------------------------------------------------------- */

.sound {
  position: fixed;
  right: var(--edge-end);
  bottom: max(1.05rem, env(safe-area-inset-bottom, 0px));
  z-index: 4;

  appearance: none;
  border: 0;
  background: none;
  margin: 0;
  padding: .18rem 0;
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .09em;
  line-height: 1.2;
  color: var(--mist);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: .5rem;

  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .9s var(--ease), transform .9s var(--ease),
              color .45s var(--ease), border-color .45s var(--ease);
}
.sound.is-ready { opacity: 1; transform: none; }
.sound:hover, .sound:focus-visible { color: var(--lamp); border-bottom-color: var(--rule); }

/* 三条竖线：平时是"平的"，响着的时候才动 */
.sound__wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: .72rem;
  height: .68rem;
  flex: none;
}
.sound__wave i {
  display: block;
  width: 1.5px;
  height: 34%;
  border-radius: 1px;
  background: currentColor;
  opacity: .75;
  transition: height .5s var(--ease), opacity .5s var(--ease);
}
.sound__wave i:nth-child(2) { transition-delay: .12s; }
.sound__wave i:nth-child(3) { transition-delay: .24s; }

body.sound-on .sound { color: var(--lamp-soft); }
body.sound-on .sound__wave i { opacity: 1; animation: soundWave 2.4s ease-in-out infinite; }
body.sound-on .sound__wave i:nth-child(2) { animation-delay: .3s; }
body.sound-on .sound__wave i:nth-child(3) { animation-delay: .6s; }

@keyframes soundWave {
  0%, 100% { height: 30%; }
  50%      { height: 100%; }
}

/* 窄屏：别压到页脚那两行字上 */
@media (max-width: 720px) {
  .sound { font-size: .78rem; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .sound { opacity: 1; transform: none; transition: color .3s var(--ease); }
  .sound__wave i { transition: none; }
  body.sound-on .sound__wave i { animation: none; height: 70%; }
}

/* ------------------------------------------------------------------
   隐藏系统滚动条
   页面左边那条 .thread 已经是这一页自己的进度指示（一条琥珀色的线 +
   一个随着滚动往下走的点），右边再挂一条系统的灰色滚槽就多余了。
   滚动本身完全不受影响，只是不画那条槽。
------------------------------------------------------------------- */

html, body {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* 旧 Edge / IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                /* Chrome / Safari / 新 Edge */
}