:root {
  --night: #10252B;
  --night-mid: #1C3C44;
  --night-sky: #3A6269;
  --mist: #9DC3C6;
  --paper: #F4E8CF;
  --paper-deep: #E6D3AB;
  --wood: #9D6946;
  --amber: #E2A94B;
  --ink: #2B241F;
  --ink-soft: #6B5E52;
  --moss: #5F7F55;
  --firefly: #F4E8A0;
  --neon-pink: #F09BE0;
  --neon-cyan: #8EDCEF;
  --serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --sans: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --rail: 88px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
  font-size: 18px;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

/* ---------- 房间：灯下的纸 ---------- */
body.room {
  background:
    radial-gradient(1100px 420px at 50% -120px, rgba(226,169,75,.42), rgba(226,169,75,0) 70%),
    var(--paper);
  min-height: 100vh;
}
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 120px;
}
@media (min-width: 900px) {
  .page { margin-left: calc(var(--rail) + 6vw); padding-top: 96px; }
}

/* ---------- 电梯面板 ---------- */
.elevator {
  position: fixed; z-index: 20;
  left: 0; top: 0; bottom: 0; width: var(--rail);
  background: var(--night);
  color: var(--mist);
  font-family: var(--sans);
  display: flex; flex-direction: column; align-items: stretch;
  border-right: 1.5px solid var(--ink);
}
.elevator .home {
  height: 76px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1.5px solid rgba(157,195,198,.25);
  color: var(--paper); font-family: var(--serif); font-weight: 700; font-size: 15px;
  letter-spacing: .12em;
}
.elevator ol { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.elevator li a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60px; padding: 6px 4px; border-radius: 4px; margin: 0 8px;
  color: var(--mist); font-size: 11.5px; line-height: 1.3; text-align: center; letter-spacing: -.01em;
  transition: background .15s, color .15s;
}
.elevator li a b { font-weight: 600; font-size: 14px; color: var(--paper); letter-spacing: .02em; }
.elevator li a:hover { background: var(--night-mid); color: var(--paper); }
.elevator li a[aria-current="page"] {
  background: var(--amber); color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--ink), 0 0 24px rgba(226,169,75,.45);
}
.elevator li a[aria-current="page"] b { color: var(--ink); }
.elevator .cat { margin: auto 0 14px; text-align: center; }
.elevator .cat img { width: 44px; margin: 0 auto 4px; opacity: .9; }
.elevator .cat small { display: block; font-size: 10px; color: var(--mist); line-height: 1.3; }
@media (max-width: 899px) {
  .elevator {
    top: auto; width: auto; right: 0; height: 64px; flex-direction: row;
    border-right: 0; border-top: 1.5px solid var(--ink);
  }
  .elevator .home { height: auto; width: 56px; border-bottom: 0; border-right: 1.5px solid rgba(157,195,198,.25); font-size: 13px; letter-spacing: 0; }
  .elevator ol { flex-direction: row; padding: 0 4px; gap: 0; }
  .elevator li { flex: 1; }
  .elevator li a { min-height: 56px; margin: 4px 2px; font-size: 10px; padding: 4px 0; }
  .elevator li a span { display: none; }
  .elevator .cat { display: none; }
  .page { padding-bottom: 110px; }
}

/* ---------- 框（外来之物都装进来） ---------- */
.frame {
  border: 2px solid var(--ink); border-radius: 4px;
  background: var(--paper-deep); padding: 10px;
}
.frame > * { border-radius: 2px; }
.frame figcaption { margin-top: 8px; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); border-radius: 0; }

/* ---------- 通用文字 ---------- */
.kicker { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.rule { border: 0; border-top: 1.5px solid var(--ink); margin: 40px 0; }
.rule.soft { border-top-color: var(--wood); opacity: .5; }
.back { display: inline-block; margin-top: 56px; font-family: var(--sans); font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid var(--wood); padding-bottom: 2px; }
.back:hover { color: var(--ink); border-bottom-color: var(--ink); }
.footer { margin-top: 80px; padding-top: 18px; border-top: 1.5px solid var(--ink); display: flex; justify-content: space-between; gap: 16px; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }

/* ---------- 电梯动效 ---------- */
.ride {
  position: fixed; inset: 0; z-index: 50; background: var(--night);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.ride.on { opacity: 1; pointer-events: auto; }
.ride .lantern { width: 14px; height: 18px; background: var(--amber); border-radius: 3px 3px 5px 5px; box-shadow: 0 0 30px 10px rgba(226,169,75,.45); }
.ride .floor { margin-left: 18px; font-family: var(--sans); color: var(--paper); font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .ride { display: none !important; }
  * { transition: none !important; animation: none !important; }
}

/* 房间目录与阅读页 */
.room-content header { margin-bottom: 28px; }
.room-content h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.4; margin-top: 10px; }
.room-content h2 { font-size: 24px; font-weight: 600; }
.intro { color: var(--ink-soft); margin-bottom: 48px; max-width: 30em; }
.collection { margin-top: 52px; }
.entries { list-style: none; padding: 0; margin-top: 24px; border-top: 1.5px solid var(--wood); }
.entries a { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--wood); }
.entries a:hover, .text-link:hover { color: #795018; }
.entries span { color: var(--wood); }
.poem-text { white-space: pre-wrap; font-size: clamp(17px, 3.5vw, 20px); line-height: 2.15; margin-top: 48px; }
.poem-visual { margin: 64px 0 0; max-width: 360px; }
.poem-pagination { display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--wood); padding-top: 20px; margin-top: 56px; font-family: var(--sans); font-size: 14px; }
.quiet-note { border-top: 1.5px solid var(--wood); border-bottom: 1.5px solid var(--wood); padding: 30px 0; margin: 36px 0; }
.quiet-note p { margin-top: 14px; color: var(--ink-soft); }
.text-link { display: inline-block; border-bottom: 1px solid var(--wood); margin-top: 22px; }
.study-list { padding: 0; list-style: none; }
.study-list li { padding: 20px 0; border-bottom: 1px solid var(--wood); display: flex; gap: 16px; justify-content: space-between; }
.study-list small { color: var(--ink-soft); font-family: var(--sans); font-size: 13px; }
.work .frame { margin: 0 0 24px; }
.stall-board { padding: 28px; border: 3px solid var(--wood); color: var(--paper); background: var(--night); margin: 30px 0; }
.stall-board p { margin-top: 18px; }
.bell { border: 1.5px solid var(--ink); padding: 10px 22px; background: var(--paper-deep); }
.bell-message { margin-top: 16px; min-height: 2em; color: var(--ink-soft); }
.skip { position: fixed; left: 100px; top: -80px; z-index: 100; background: var(--paper); padding: 12px; }
.skip:focus { top: 8px; }
@media (max-width: 420px) { .page { padding-left: 20px; padding-right: 20px; } .frame { margin-left: 0; margin-right: 0; } }

/* 溪边摊位的拉绳铃铛 */
.hanging-bell { --pull: 0px; width: 120px; height: 270px; position: relative; margin: 0 0 0 16px; color: var(--ink); }
.bell-hook { position: absolute; top: 0; left: 58px; width: 4px; height: 44px; background: var(--wood); border: 1px solid var(--ink); }
.bell-hook::before { content: ''; position: absolute; top: 0; left: -19px; width: 40px; border-top: 3px solid var(--wood); }
.bell-body { position: absolute; top: 37px; left: 15px; transform-origin: 50% 6px; }
.bell-rope { position: absolute; top: 115px; left: 58px; width: 4px; height: calc(66px + var(--pull)); background: repeating-linear-gradient(35deg, #9D6946 0 3px, #E6D3AB 3px 6px); border: 1px solid var(--wood); transition: height .45s cubic-bezier(.2,1.6,.4,1); }
.bell-pull { position: absolute; top: 168px; left: 32px; width: 56px; height: 56px; padding: 8px; transform: translateY(var(--pull)); touch-action: none; user-select: none; cursor: grab; transition: transform .45s cubic-bezier(.2,1.6,.4,1); border-radius: 50%; }
.bell-grip { display: block; width: 26px; height: 38px; margin: auto; border: 5px solid var(--wood); border-radius: 45%; box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px var(--ink); background: var(--paper); }
.hanging-bell.dragging .bell-pull { cursor: grabbing; }
.hanging-bell.dragging .bell-pull, .hanging-bell.dragging .bell-rope { transition: none; }
.hanging-bell.ringing .bell-body { animation: bell-swing .85s ease-out; }
.bell-hint { font: 13px var(--sans); color: var(--ink-soft); margin: 0 0 22px; }
@keyframes bell-swing { 0% { transform: rotate(0); } 18% { transform: rotate(-16deg); } 38% { transform: rotate(12deg); } 58% { transform: rotate(-8deg); } 78% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .bell-pull, .bell-rope { transition: none !important; } .hanging-bell.ringing .bell-body { animation: none !important; } }

/* 吉他猫音乐开关 */
.reading-count { color: var(--moss); font: 14px var(--sans); margin: -22px 0 40px; }
.reading-reviews, .reading-shelf, .book-highlights, #reviews { margin-top: 48px; }
.review-card { border-top: 1.5px solid var(--wood); padding: 24px 0; margin-top: 22px; }
.review-card h3 { font-size: 22px; margin: 12px 0 18px; }
.review-body p, .my-thought p { margin-top: 18px; overflow-wrap: anywhere; }
.search-label { display: block; font: 13px var(--sans); color: var(--ink-soft); margin: 24px 0 8px; }
.book-search { width: 100%; border: 1px solid var(--wood); border-radius: 3px; background: transparent; font: 16px var(--sans); padding: 12px; color: var(--ink); }
.book-search:focus-visible, .shelf-filters input:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.shelf-filters { display: flex; flex-wrap: wrap; gap: 12px 24px; border: 0; margin: 18px 0; padding: 0; font: 14px var(--sans); }
.shelf-filters input { accent-color: var(--wood); }
.reading-list { list-style: none; padding: 0; margin: 18px 0 36px; }
.shelf-entry { display: block; padding: 22px 0; border-bottom: 1px solid var(--wood); }
.shelf-entry h3 { font-size: 22px; line-height: 1.65; font-weight: 600; margin: 8px 0; }
.shelf-entry:hover h3 { color: #795018; }
.shelf-tags, .highlight-count { font: 13px/1.6 var(--sans); color: var(--moss); }
.shared-highlight { margin: 28px 0; border-top: 1px solid var(--wood); padding: 28px 0; }
.shared-highlight blockquote { margin: 0 0 18px; font-size: 21px; line-height: 1.9; }
.highlight-count { margin-top: 8px; }
.my-thought { margin-top: 24px; padding-left: 18px; border-left: 2px solid var(--wood); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[hidden] { display: none !important; }
.article-entry { display: block; border-bottom: 1px solid var(--wood); padding: 24px 0; }
.article-entry h3 { font-size: 22px; line-height: 1.65; margin-top: 8px; font-weight: 600; }
.article-entry:hover h3 { color: #795018; }
.book-entry { border-top: 1.5px solid var(--wood); padding: 32px 0; }
.book-entry h2 { margin: 8px 0 24px; }
.book-entry p + p { margin-top: 18px; }
.prose { margin-top: 40px; overflow-wrap: anywhere; }
.prose p { margin: 24px 0; }
.prose h2, .prose h3 { margin: 44px 0 18px; line-height: 1.5; }
.prose h3 { font-size: 21px; }
.prose blockquote { margin: 28px 0; padding: 4px 20px; border-left: 2px solid var(--wood); color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 24px 0; }
.prose li + li { margin-top: 8px; }
.prose a { border-bottom: 1px solid var(--wood); }
.prose pre { background: var(--paper-deep); padding: 18px; overflow-x: auto; font: 14px/1.8 var(--sans); }
.prose .frame { margin: 30px 0; }
.table-scroll { overflow-x: auto; margin: 24px 0; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-scroll th, .table-scroll td { text-align: left; border-bottom: 1px solid var(--wood); padding: 10px; min-width: 96px; }
.table-scroll th { font-family: var(--sans); }
.cat-player { display: block; position: relative; width: 100%; padding: 8px 3px; border-radius: 4px; color: var(--mist); }
.cat-player:hover { background: var(--night-mid); }
.cat-player .cat-play-icon { display: block; font-size: 11px; color: var(--amber); margin: 5px 0; line-height: 1; }
.cat-player[aria-pressed="true"] img { animation: cat-strum 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.cat-player[aria-pressed="true"] small { color: var(--amber); }
@keyframes cat-strum { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (max-width: 899px) {
 .elevator .cat { display: flex; align-items: center; margin: 0; width: 48px; flex-shrink: 0; }
 .cat-player { padding: 2px; min-height: 56px; }
 .elevator .cat img { width: 29px; margin-bottom: 0; }
 .elevator .cat small { display: none; }
 .cat-player .cat-play-icon { margin: 2px 0; }
 .elevator .home { width: 44px; flex-shrink: 0; }
}
.shelf-entry { display: flex; align-items: center; gap: 20px; }
.book-cover { width: 72px; height: 104px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(2px 4px 5px rgba(0,0,0,.25)); }
.shelf-info { min-width: 0; }
.book-intro { display: flex; align-items: center; gap: 24px; margin: 30px 0; }
.book-intro .book-cover { width: 120px; height: 174px; }
.apprentice-resources { border-top: 1px solid var(--wood); margin-top: 48px; padding-top: 22px; }
.apprentice-resources .prose { font-size: 16px; }
.prose a { overflow-wrap: anywhere; }
.writing-appendix { border-top: 1px solid var(--wood); padding-top: 28px; margin-top: 48px; }
.writing-figure { margin: 30px 0; }
.writing-figure img { display: block; width: 100%; height: auto; }
.creator-os { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(107,94,82,.3); }
.creator-os-heading .kicker { margin-bottom: 8px; }
.creator-os-heading h2 { font-size: clamp(28px, 5vw, 38px); margin: 0 0 6px; line-height: 1.25; }
.creator-os-subtitle { font-size: 17px; color: var(--ink-soft); }
.creator-os-note { margin-top: 20px; font-size: 16px; line-height: 1.9; max-width: 34em; }
.creator-os .writing-figure { margin-top: 24px; }
.reflection-part { margin-top: 42px; scroll-margin-top: 30px; }
.reflection-part + .reflection-part { border-top: 1px solid var(--wood); padding-top: 30px; }
.reflection-contents { margin: 30px 0; line-height: 2; }
.reflection-contents a { text-decoration: underline; text-underline-offset: 5px; }
.stall-room { position: relative; }
.stall-friends { position: absolute; top: 290px; left: calc(var(--rail) + 6vw + 720px); width: min(280px, calc(100vw - var(--rail) - 6vw - 750px)); text-align: center; }
.stall-friends img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 12px rgba(65,45,25,.12)); }
.stall-friends .cat-player { color: var(--ink-soft); padding: 8px; }
.stall-friends .cat-player:hover { background: transparent; }
.stall-friends .cat-player small { font: 12px var(--sans); }
.stall-friends .cat-play-icon { margin: 12px 0 6px; }
.stall-monkey { transform-origin: 50% 95%; animation: stall-hello 700ms ease-out; }
@keyframes stall-hello { 0% { transform: rotate(-5deg); opacity: 0; } 55% { transform: rotate(4deg); } 100% { transform: rotate(0); opacity: 1; } }
@media (max-width: 1199px) {
  .stall-friends { position: static; width: 190px; margin: 32px 0 16px auto; }
}
@media (prefers-reduced-motion: reduce) { .stall-monkey { animation: none; } }

.cat-track-next { display:block; margin:0 auto; padding:5px 3px; font-size:10px; color:var(--amber); border-radius:4px; }
.cat-track-next:hover { background:var(--night-mid); }
@media (max-width:899px) {
 .elevator .cat { flex-direction:column; }
 .elevator .cat-player { min-height:38px; }
 .elevator .cat-track-next { padding:1px 0; line-height:14px; white-space:nowrap; }
}