/* 初听 · 叙事时间线
   纸色底 + 墨色字 + 一种朱红强调色；深色模式跟随系统 */
:root {
  color-scheme: light dark;
  --bg: #f3efe6;
  --bg-2: #ebe5d8;
  --surface: #fbf8f2;
  --ink: #17140f;
  --ink-2: #47423a;
  --muted: #8a8378;
  --faint: #bdb5a7;
  --line: #ddd5c6;
  --accent: #d2452a;
  --accent-soft: #f4d9cf;
  --ok: #4f8a64;
  --warn: #b7791f;
  --danger: #b4452f;
  --shadow-lg: 0 30px 90px rgb(30 20 10 / .22);
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "Source Serif Pro", Georgia, serif;
  --display: "Iowan Old Style", "Source Serif Pro", "Palatino Linotype", Georgia, var(--serif);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bar: 60px;
  --wide: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100f0d;
    --bg-2: #191815;
    --surface: #1b1a17;
    --ink: #f0eadf;
    --ink-2: #c9c2b5;
    --muted: #8f887c;
    --faint: #4e4a43;
    --line: #2c2a26;
    --accent: #ff7655;
    --accent-soft: #3d1f17;
    --ok: #82c497;
    --warn: #e3b35f;
    --danger: #ff8d74;
    --shadow-lg: 0 30px 90px rgb(0 0 0 / .6);
  }
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px) }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
button, input, select { font: inherit; color: inherit }
button, a, input, select { -webkit-tap-highlight-color: transparent }
button, a { touch-action: manipulation }
button { cursor: pointer }
button:disabled { cursor: not-allowed; opacity: .5 }
a { color: inherit; text-decoration: none }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0 }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }
[hidden] { display: none !important }
::selection { background: var(--accent-soft) }
.mobile-break { display: none }

/* ---------- 顶栏 ---------- */
.bar { position: sticky; top: 0; z-index: 20; height: var(--bar); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(1.3) blur(16px); -webkit-backdrop-filter: saturate(1.3) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent) }
.bar-inner { max-width: var(--wide); height: 100%; margin: auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.brand { display: flex; gap: 10px; align-items: center }
.soundmark { display: flex; align-items: center; gap: 3px; height: 22px }
.soundmark i { display: block; width: 3px; border-radius: 3px; background: var(--accent); height: 10px }
.soundmark i:nth-child(2) { height: 21px }
.soundmark i:nth-child(3) { height: 15px }
.soundmark i:nth-child(4) { height: 7px }
.brand-name { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: .14em }
.bar-actions { display: flex; gap: 8px; align-items: center; min-width: 0 }
.account-label { color: var(--muted); font-size: 13px; margin-right: 6px; display: inline-flex; align-items: center; gap: 7px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.account-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0 }
.account-label.connected { color: var(--ink-2) }
.account-label.connected::before { background: var(--ok) }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 7px 16px; min-height: 36px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .1s }
.button:hover:not(:disabled) { background: var(--ink); color: var(--bg) }
.button:active:not(:disabled) { transform: translateY(1px) }
.button.ghost { border-color: var(--line) }
.button.ghost:hover:not(:disabled) { border-color: var(--ink) }
.button.primary { background: var(--ink); color: var(--bg) }
.button.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff }
.button.primary.is-running { background: transparent; color: var(--ink); border-color: var(--accent) }
.button.large { min-height: 50px; padding: 12px 28px; font-size: 16px }
.text-button { border: 0; background: transparent; color: var(--accent); font-weight: 600; font-size: 14px; padding: 2px; white-space: nowrap }
.text-button:hover { text-decoration: underline; text-underline-offset: 3px }
.icon-button { height: 34px; width: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink-2) }
.icon-button:hover { border-color: var(--ink); color: var(--ink) }
.kicker { font-size: 13px; letter-spacing: .16em; font-weight: 500; color: var(--accent); margin: 0 0 14px }

main { max-width: var(--wide); margin: auto; padding: 0 40px }

/* ---------- 开场 ---------- */
.hero { min-height: calc(100vh - var(--bar)); min-height: calc(100svh - var(--bar)); padding: 11vh 0 64px; display: flex; flex-direction: column; justify-content: center; position: relative }
.hero-title { font-family: var(--serif); font-weight: 900; font-size: clamp(84px, 14.5vw, 200px); line-height: .92; letter-spacing: -.035em; margin: 0 0 0 -.04em; display: flex; flex-wrap: wrap; align-items: baseline }
.hero-title span { font-weight: 400; font-size: .42em; letter-spacing: 0; margin-right: .18em; color: var(--ink-2); align-self: flex-start; padding-top: .12em }
.hero-title em { font-style: normal; color: var(--accent) }
.hero-story { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 33px); line-height: 1.7; max-width: 23em; margin: 42px 0 0; color: var(--ink); text-wrap: pretty; min-height: 3.4em }
.hero-story .num { font-family: var(--display); font-weight: 700; font-size: 1.5em; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; padding: 0 .06em; letter-spacing: -.01em }
.hero-story .mark, .chapter-story .mark { white-space: nowrap; font-weight: 700; background: linear-gradient(transparent 62%, var(--accent-soft) 62%, var(--accent-soft) 92%, transparent 92%); padding: 0 .08em }
.hero-story .mark.wrap { white-space: normal }
.hero-sub { color: var(--muted); font-size: 15px; margin: 18px 0 0; max-width: 40em }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px }
.hero-actions:has(> :not([hidden])) { min-height: 50px }
.scroll-cue { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color .2s, border-color .2s }
.scroll-cue:hover { color: var(--accent); border-color: var(--accent) }
.scroll-cue svg { font-size: 15px }
.motion .scroll-cue svg { animation: nudge 2.4s ease-in-out infinite }
@keyframes nudge { 50% { transform: translateY(3px) } }
.skeleton-line { display: block; height: .9em; margin: .45em 0; border-radius: 6px; background: var(--bg-2); width: 92%; animation: shimmer 1.3s ease-in-out infinite }
.skeleton-line.short { width: 58% }
@keyframes shimmer { 50% { opacity: .45 } }

.sync-line { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 56px; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); max-width: 760px }
.sync-message { flex: 1; min-width: 0; overflow-wrap: anywhere }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0 }
.sync-line[data-status="running"] .sync-dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite }
.sync-line[data-status="completed"] .sync-dot { background: var(--ok) }
.sync-line[data-status="paused"] .sync-dot, .sync-line[data-status="interrupted"] .sync-dot { background: var(--warn) }
.sync-line[data-status="failed"] .sync-dot { background: var(--danger) }
@keyframes pulse { 50% { opacity: .3; transform: scale(.75) } }
.sync-line progress { position: absolute; top: -1px; left: 0; width: 100%; height: 1px; appearance: none; -webkit-appearance: none; border: 0; background: transparent }
.sync-line progress::-webkit-progress-bar { background: transparent }
.sync-line progress::-webkit-progress-value { background: var(--accent); transition: width .5s }
.sync-line progress::-moz-progress-bar { background: var(--accent) }

/* 开场右侧：一张唱片 + 最近一次初听 */
.hero-latest { position: absolute; right: 0; top: 50%; transform: translateY(-46%); width: 300px; border: 0; background: transparent; color: var(--ink); text-align: left; padding: 0; display: flex; flex-direction: column; gap: 4px }
.record { position: relative; display: block; width: 300px; height: 300px; border-radius: 50%; margin-bottom: 26px; background: radial-gradient(circle, transparent 0 31%, #15120f 31.5% 33%, transparent 33.5%), repeating-radial-gradient(circle, #15120f 0 3px, #2b2621 3.5px 4px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .06); transition: transform .6s cubic-bezier(.2, .7, .2, 1) }
.record::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 210deg, transparent 0 8%, rgb(255 255 255 / .1) 12%, transparent 18% 58%, rgb(255 255 255 / .07) 62%, transparent 68%) }
.record-label { position: absolute; inset: 33%; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: .02em; font-variant-numeric: tabular-nums; z-index: 1 }
.record-label::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); bottom: 22%; left: calc(50% - 4px) }
.hero-latest:hover .record { transform: rotate(-8deg) scale(1.02) }
.latest-kicker { font-size: 12.5px; letter-spacing: .16em; color: var(--accent) }
.latest-title { font-family: var(--serif); font-size: 24px; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere }
.hero-latest:hover .latest-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; text-decoration-thickness: 2px }
.latest-meta { font-size: 13.5px; color: var(--muted) }
.hero:has(.hero-latest:not([hidden])) .hero-story { max-width: 19.5em }

/* ---------- 时间线头部 ---------- */
.timeline-section { padding-top: 40px }
.timeline-head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 32px; flex-wrap: wrap; padding: 0 0 28px; border-bottom: 2px solid var(--ink) }
.timeline-heading h2 { font-family: var(--serif); font-size: 40px; font-weight: 900; letter-spacing: .02em; line-height: 1.15; margin: 0; overflow-wrap: anywhere }
.timeline-meta { margin: 6px 0 0; color: var(--muted); font-size: 14px; min-height: 1.6em }
.timeline-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; color: var(--muted); font-size: 16px; background: var(--surface); transition: border-color .2s; width: 260px }
.search:focus-within { border-color: var(--ink) }
.search input { border: 0; background: transparent; font-size: 14px; width: 100%; min-width: 0; padding: 8px 0; outline: none; color: var(--ink) }
.search input::placeholder { color: var(--muted) }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; cursor: pointer; border-radius: 50%; background: #8a8378 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5 5 6 6M11 5l-6 6' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface) }
.segmented button { border: 0; background: transparent; border-radius: 999px; padding: 5px 13px; font-size: 13px; color: var(--muted); transition: background .2s, color .2s }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--bg) }

.timeline-body { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 56px; align-items: start }
.timeline-main { min-width: 0; grid-column: 1; grid-row: 1 }

/* ---------- 月份导航（右侧刻度） ---------- */
.scrubber { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--bar) + 40px); padding-top: 64px; max-height: calc(100vh - var(--bar) - 60px); overflow-y: auto; scrollbar-width: none }
.scrubber::-webkit-scrollbar { display: none }
.scrubber ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line) }
.scrub-year { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--ink); padding: 14px 0 6px 16px; letter-spacing: .04em }
.scrub-year:first-child { padding-top: 0 }
.scrub-month { position: relative; display: flex; justify-content: space-between; align-items: baseline; width: 100%; border: 0; background: transparent; padding: 5px 0 5px 16px; font-size: 13.5px; color: var(--muted); text-align: left; transition: color .2s }
.scrub-month::before { content: ""; position: absolute; left: -1px; top: 50%; width: 8px; height: 1px; background: var(--faint); transition: width .25s, background .25s }
.scrub-month:hover { color: var(--ink) }
.scrub-month.active { color: var(--ink); font-weight: 600 }
.scrub-month.active::before { width: 12px; height: 2px; background: var(--accent); margin-top: -.5px }
.scrub-count { font-family: var(--display); font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums }
.scrub-month.active .scrub-count { color: var(--accent) }

/* ---------- 章节 ---------- */
.chapter { padding-top: 88px }
.chapter-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 36px; align-items: end; margin-bottom: 52px }
.chapter-numeral { font-family: var(--display); font-weight: 700; font-size: clamp(110px, 13vw, 176px); line-height: .78; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); font-variant-numeric: lining-nums; user-select: none }
@supports not (-webkit-text-stroke: 1px black) { .chapter-numeral { color: var(--faint) } }
.chapter-year { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--accent); margin: 0 0 4px; letter-spacing: .06em }
.chapter-title { font-family: var(--serif); font-size: 44px; font-weight: 900; line-height: 1.15; margin: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap }
.chapter-count { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0 }
.chapter-story { font-family: var(--serif); font-size: 19px; line-height: 1.85; color: var(--ink-2); margin: 14px 0 0; max-width: 34em; text-wrap: pretty }
.chapter-story .num { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 1.15em }

/* ---------- 日子与歌曲 ---------- */
.days { list-style: none; margin: 0; padding: 0 }
.day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 8px; padding-bottom: 36px }
.day-label { position: sticky; top: calc(var(--bar) + 20px); align-self: start; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding-top: 2px }
.day-num { grid-row: span 2; font-family: var(--display); font-weight: 700; font-size: 46px; line-height: .95; letter-spacing: -.03em; font-variant-numeric: lining-nums; min-width: 1.1em }
.day-meta { font-size: 13px; color: var(--ink-2); line-height: 1.4; white-space: nowrap }
.day-count { font-size: 12.5px; color: var(--muted); line-height: 1.4 }
.day-tag { grid-column: 2; grid-row: 1; justify-self: start; font-size: 11px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; padding: 0 7px; line-height: 17px; margin-bottom: 4px }
.day-label:has(.day-tag) .day-num { grid-row: span 3 }
.songs { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative }
.songs::before { content: ""; position: absolute; left: 0; top: 10px; bottom: -36px; width: 1px; background: var(--line) }
.day:last-child .songs::before { bottom: 10px }
.song { position: relative; width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; text-align: left; border: 0; background: transparent; padding: 10px 14px 10px 6px; border-radius: 12px; color: var(--ink); transition: background .2s }
.song::before { content: ""; position: absolute; left: -32.5px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink-2); transition: background .2s, border-color .2s, transform .2s }
.song:hover { background: var(--surface) }
.song:hover::before, .song:focus-visible::before { background: var(--accent); border-color: var(--accent); transform: scale(1.25) }
.song-time { font-family: var(--mono); font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.song-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px }
.song-title { font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere }
.song-artist { font-size: 14px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere }
.flag { margin-left: 2px; font-size: 11.5px; font-weight: 600; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); border-radius: 99px; padding: 0 8px; line-height: 19px; white-space: nowrap; align-self: center }
.song-arrow { color: var(--accent); align-self: center; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; display: inline-flex }
.song:hover .song-arrow, .song:focus-visible .song-arrow { opacity: 1; transform: none }

.timeline-end, .empty-block { text-align: center; padding: 96px 16px 40px; color: var(--muted) }
.end-mark { display: block; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: radial-gradient(circle, var(--bg) 0 4px, var(--accent) 4.5px 9px, var(--ink) 9.5px 100%); box-shadow: inset 0 0 0 14px var(--ink), inset 0 0 0 15px color-mix(in srgb, var(--bg) 25%, var(--ink)), inset 0 0 0 22px var(--ink), inset 0 0 0 23px color-mix(in srgb, var(--bg) 25%, var(--ink)) }
.motion .timeline-end.shown .end-mark { animation: spin 6s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.end-title, .empty-block h3 { font-family: var(--serif); font-size: 26px; font-weight: 900; color: var(--ink); margin: 0 }
.end-copy, .empty-block p { font-size: 15px; margin: 10px auto 22px; max-width: 26em; line-height: 1.75 }
.empty-block { padding-top: 72px }
.skeleton-row { display: flex; gap: 18px; padding: 18px 0; align-items: center }
.skeleton-row i { display: block; height: 14px; border-radius: 7px; background: var(--bg-2); animation: shimmer 1.3s ease-in-out infinite }
.skeleton-row i:first-child { width: 90px }
.skeleton-row i:last-child { flex: 1; max-width: 420px }
.sentinel { height: 1px }

/* 搜索时章节更紧凑 */
.compact .chapter { padding-top: 48px }
.compact .chapter-head { margin-bottom: 26px; gap: 0 22px }
.compact .chapter-numeral { font-size: 72px }
.compact .chapter-title { font-size: 30px }
.compact .chapter-story { display: none }
.compact .day { padding-bottom: 20px }
.compact .songs::before { bottom: -20px }

/* 进场动画：只在允许动效时启用 */
.motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1) }
.motion .reveal.shown { opacity: 1; transform: none }

/* ---------- 结尾 ---------- */
.closing { margin-top: 64px; padding: 44px 0 56px; border-top: 2px solid var(--ink) }
.closing-line { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.6; margin: 0 0 30px; max-width: 26em }
.closing-line strong { color: var(--accent) }
.closing-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px }
.closing-note { margin: 0; display: flex; align-items: center; gap: 8px }
.ok-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok) }
.export-links { display: flex; gap: 8px }
.export-links a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); transition: border-color .2s, color .2s }
.export-links a:hover { border-color: var(--ink); color: var(--ink) }
.export-links a[aria-disabled="true"] { opacity: .45 }

/* ---------- 弹窗 ---------- */
dialog { border: 0; border-radius: 22px; background: var(--surface); color: var(--ink); width: 480px; max-width: calc(100% - 28px); max-height: calc(100% - 28px); padding: 34px; box-shadow: var(--shadow-lg) }
dialog[open] { animation: rise .22s ease-out }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } }
dialog::backdrop { background: rgb(16 12 8 / .45); backdrop-filter: blur(4px) }
dialog h2 { font-family: var(--serif); font-size: 30px; font-weight: 900; line-height: 1.3; margin: 0 36px 0 0; overflow-wrap: anywhere }
.dialog-close { position: absolute; top: 18px; right: 18px; border: 0 }
.dialog-copy { color: var(--muted); font-size: 15px; line-height: 1.75; margin: 8px 0 18px }
.form-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; margin: 20px 0 14px }
.form-field select { padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 400 }
.checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); margin: 10px 0; cursor: pointer }
.checkbox-row input { accent-color: var(--accent); width: 17px; height: 17px; margin: 0 }
.form-hint { font-size: 13px; color: var(--muted); line-height: 1.75; margin: 18px 0 16px; padding: 12px 14px; background: var(--bg); border-radius: 12px }
.full-width { width: 100% }
.button.full-width { min-height: 46px; font-size: 15px }
.error-text { font-size: 14px; color: var(--danger); line-height: 1.6; margin: 0 0 12px }
.error-text:empty { display: none }
dl { margin: 18px 0 24px }
dl div { padding: 12px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 6.5em 1fr; gap: 12px }
dt { font-size: 13px; color: var(--muted) }
dd { font-size: 14.5px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
dd.mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2) }
#songDialog { width: 520px }

.toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 14px; font-size: 14px; max-width: min(520px, calc(100% - 28px)); box-shadow: var(--shadow-lg); z-index: 30; line-height: 1.6; animation: rise .2s ease-out }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .bar-inner, main { padding-left: 28px; padding-right: 28px }
  .timeline-body { grid-template-columns: minmax(0, 1fr) 112px; gap: 36px }
  .day { grid-template-columns: 128px minmax(0, 1fr) }
}
@media (max-width: 1100px) { .hero-latest { display: none } .hero:has(.hero-latest:not([hidden])) .hero-story { max-width: 23em } }
@media (max-width: 900px) {
  .timeline-body { display: block }
  .scrubber { position: sticky; top: var(--bar); z-index: 10; margin: 0 -28px; padding: 10px 28px; max-height: none; overflow-x: auto; overflow-y: hidden; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }
  .scrubber ol { display: flex; gap: 6px; border: 0; width: max-content; align-items: center }
  .scrub-year { padding: 0 2px 0 8px; font-size: 12px; color: var(--muted) }
  .scrub-year:first-child { padding-left: 0 }
  .scrub-month { gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; font-size: 13px }
  .scrub-month::before { display: none }
  .scrub-month.active { background: var(--ink); color: var(--bg); border-color: var(--ink) }
  .scrub-month.active .scrub-count { color: inherit; opacity: .7 }
  html { scroll-padding-top: calc(var(--bar) + 64px) }
  .day-label { top: calc(var(--bar) + 66px) }
  .search { width: 100%; flex: 1 1 220px }
  .timeline-tools { width: 100% }
}
@media (max-width: 640px) {
  :root { --bar: 54px }
  body { font-size: 15px }
  .bar-inner { padding: 0 16px; gap: 8px }
  .account-label { display: none }
  .bar-actions { gap: 6px }
  .bar-actions .button { padding: 5px 12px; min-height: 32px; font-size: 13px }
  main { padding: 0 18px }
  .mobile-break { display: inline }
  .hero { padding: 9vh 0 40px; min-height: calc(100svh - var(--bar)) }
  .hero-title { font-size: clamp(76px, 25vw, 112px) }
  .hero-title span { font-size: .36em }
  .hero-story { font-size: 21px; margin-top: 30px; line-height: 1.75 }
  .hero-story .num { font-size: 1.4em }
  .hero-story .mark.wrap { white-space: normal }
.hero-sub { font-size: 14px }
  .hero-actions { margin-top: 26px }
  .sync-line { margin-top: 40px; font-size: 13.5px }
  .timeline-section { padding-top: 16px }
  .timeline-heading h2 { font-size: 32px }
  .scrubber { margin: 0 -18px; padding: 9px 18px }
  .chapter { padding-top: 60px }
  .chapter-head { grid-template-columns: 1fr; margin-bottom: 34px }
  .chapter-numeral { font-size: 96px; line-height: .8; margin-bottom: 18px }
  .chapter-title { font-size: 34px; gap: 12px }
  .chapter-story { font-size: 17px }
  .day { grid-template-columns: 1fr; padding-bottom: 28px }
  .day-label { position: static; display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px }
  .day-num { font-size: 34px }
  .day-tag { order: 3; margin: 0 }
  .day-count { margin-left: auto }
  .songs { padding-left: 22px; margin-left: 4px }
  .songs::before { bottom: -28px }
  .song { grid-template-columns: 48px minmax(0, 1fr); padding: 9px 6px 9px 4px; gap: 2px 10px }
  .song::before { left: -26.5px }
  .song-arrow { display: none }
  .song-main { flex-direction: column }
  .song-title { font-size: 17px }
  .song-artist { font-size: 13px }
  .flag { align-self: flex-start; margin: 4px 0 0 }
  .closing-row { flex-direction: column; align-items: flex-start }
  .compact .chapter { padding-top: 40px }
  .compact .chapter-numeral { font-size: 56px; margin-bottom: 12px }
  .compact .chapter-title { font-size: 26px }
  dialog { padding: 28px 20px 22px }
  dialog h2 { font-size: 26px }
  dl div { grid-template-columns: 1fr; gap: 2px }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important } }
.login-qr { display: block; margin: 1.5rem auto; max-width: 100%; background: white; border-radius: 8px; }
.login-qr[hidden] { display: none; }
.export-links { flex-wrap: wrap; }