/* 字体改为各页面异步加载，避免 1MB 字体表阻塞首屏渲染导致灰屏 */

/* 沪语全景图 — 1930s 月份牌 + 现代极简
   Theme: 月份牌奶油底 / 石库门砖红 / 墨绿 / 老金 / 霓虹粉
*/
:root {
  --paper: #f1e6cf;
  --paper-2: #e8d9b9;
  --paper-deep: #d9c39a;
  --ink: #1a1410;
  --ink-soft: #4a3a2a;
  --brick: #8b3a2f;
  --brick-deep: #6a2620;
  --moss: #1f3a34;
  --moss-2: #2d5048;
  --gold: #a98a52;
  --gold-deep: #7a6234;
  --neon: #e85a7a;
  --jade: #5f9ea0;
  --line: rgba(26,20,16,.18);
  --line-strong: rgba(26,20,16,.42);
  --shadow: 0 1px 0 rgba(26,20,16,.15), 0 24px 60px -28px rgba(26,20,16,.45);

  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-sans:  "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-display: "Noto Serif SC", "Songti SC", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper texture overlay */
.paper-grain {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(122,98,52,.07) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(31,58,52,.05) 0, transparent 50%),
    repeating-linear-gradient(0deg, rgba(26,20,16,.013) 0 1px, transparent 1px 3px);
}

/* type */
.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; }
.kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.vert-text { writing-mode: vertical-rl; text-orientation: upright; }

/* hairlines */
.hr { height:1px; background: var(--line); border:0; }
.hr-strong { height:1px; background: var(--line-strong); border:0; }

/* generic chip */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding: 3px 9px; border:1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.06em;
  background: rgba(255,255,255,.4);
}
.chip.brick  { color: var(--brick); border-color: rgba(139,58,47,.5); }
.chip.moss   { color: var(--moss);  border-color: rgba(31,58,52,.5); }
.chip.gold   { color: var(--gold-deep); border-color: rgba(122,98,52,.5); }
.chip.neon   { color: var(--neon); border-color: rgba(232,90,122,.5); }

/* button */
.btn {
  font-family: var(--font-sans); font-size: 13px;
  padding: 8px 14px; border:1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--paper);
  cursor:pointer; letter-spacing:.04em;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.brick { background: var(--brick); border-color: var(--brick); color: #fdf6e6; }
.btn.moss  { background: var(--moss);  border-color: var(--moss);  color: #fdf6e6; }
.btn.tiny  { padding: 4px 9px; font-size:11px; letter-spacing:.05em; }

/* recording-source badge — stamp on any element with data-rec-key */
[data-rec-src]{ position: relative; }
[data-rec-src]::after{
  content:''; position:absolute; top:6px; right:6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(26,20,16,.18); border: 1px solid rgba(26,20,16,.28);
  pointer-events: none;
}
[data-rec-src="user"]::after{ background: var(--moss, #1f3a34); border-color: var(--moss, #1f3a34); box-shadow: 0 0 0 2px rgba(31,58,52,.18); }
[data-rec-src="file"]::after{ background: var(--brick, #8b3a2f); border-color: var(--brick, #8b3a2f); box-shadow: 0 0 0 2px rgba(139,58,47,.18); }
[data-rec-src]::before{
  position:absolute; top:5px; right:18px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing:.14em;
  color: rgba(26,20,16,.55); pointer-events:none;
}
[data-rec-src="user"]::before{ content:'🎙'; color: var(--moss, #1f3a34); }
[data-rec-src="file"]::before{ content:'🎙'; color: var(--brick, #8b3a2f); }
[data-rec-src="none"]::before{ content:'⚙'; }
/* hide badges entirely if user opted out */
html[data-audio-source="synth"] [data-rec-src]::before,
html[data-audio-source="synth"] [data-rec-src]::after{ display:none; }

/* ───────────────────────────────────────────────────────────────────────────
   Unified site navigation (.site-nav) — rendered by shared/nav.js
   Two tiers: layer-level tabs (tier 1) + module pills / breadcrumb (tier 2).
   Body top-padding is set by nav.js to the measured header height.
   ───────────────────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-sans);
}

/* ── tier 1 ── */
.site-nav .nav-tier1 { display: flex; align-items: stretch; height: 52px; }
.site-nav.has-sub .nav-tier1 { border-bottom: 1px solid var(--line); }

.site-nav .nav-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 20px; text-decoration: none; color: var(--ink);
  border-right: 1px solid var(--line);
}
.site-nav .nav-brand .seal {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--brick); color: var(--paper);
  font-family: var(--font-serif); font-weight: 800; font-size: 18px; border-radius: 2px;
}
.site-nav .nav-brand .wm {
  font-family: var(--font-display); font-size: 17px; letter-spacing: .05em;
  line-height: 1.05; white-space: nowrap;
}
.site-nav .nav-brand .wm small {
  display: block; font-family: var(--font-mono); font-size: 8px;
  letter-spacing: .18em; color: var(--ink-soft); text-transform: uppercase; margin-top: 2px;
}

.site-nav .nav-layers { display: flex; align-items: stretch; }
.site-nav .nav-layer {
  display: flex; align-items: center; gap: 7px; padding: 0 17px;
  text-decoration: none; color: var(--ink-soft);
  border-right: 1px solid var(--line); position: relative;
  transition: background .12s ease, color .12s ease;
}
.site-nav .nav-layer:hover { background: rgba(139,58,47,.06); color: var(--ink); }
.site-nav .nav-layer .ord { font-family: var(--font-serif); font-weight: 800; font-size: 13px; color: var(--gold-deep); white-space: nowrap; }
.site-nav .nav-layer .nm  { font-family: var(--font-serif); font-weight: 600; font-size: 15px; letter-spacing: .05em; white-space: nowrap; }
.site-nav .nav-layer.active { color: var(--ink); background: var(--paper-2); }
.site-nav .nav-layer.active .ord { color: var(--brick); }
.site-nav .nav-layer.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brick);
}

.site-nav .nav-right { display: flex; align-items: stretch; margin-left: auto; }
.site-nav .nav-specials { display: flex; align-items: stretch; }
.site-nav .nav-special {
  display: flex; align-items: center; padding: 0 13px; white-space: nowrap;
  text-decoration: none; color: var(--ink-soft);
  font-family: var(--font-serif); font-size: 14px; letter-spacing: .04em;
  border-left: 1px solid var(--line); position: relative;
  transition: background .12s ease, color .12s ease;
}
.site-nav .nav-special:hover { color: var(--brick); background: rgba(139,58,47,.05); }
.site-nav .nav-special.active { color: var(--ink); background: var(--paper-2); }
.site-nav .nav-special.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brick);
}

.site-nav .nav-voice {
  display: flex; align-items: center; gap: 9px; padding: 0 16px; flex: 0 0 auto;
  border-left: 1px solid var(--line-strong);
}
.site-nav .nav-voice .vlbl {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; white-space: nowrap;
  color: var(--ink-soft); text-transform: uppercase;
}
.site-nav .voice-seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.site-nav .voice-seg button {
  font-family: var(--font-serif); font-size: 13px; padding: 5px 13px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer; line-height: 1;
  transition: background .12s ease, color .12s ease;
}
.site-nav .voice-seg button + button { border-left: 1px solid var(--ink); }
.site-nav .voice-seg button.on { background: var(--ink); color: var(--paper); }
.site-nav .voice-seg button:not(.on):hover { background: rgba(26,20,16,.08); }

/* ── tier 2 ── */
.site-nav .nav-tier2 {
  display: flex; align-items: center; gap: 20px;
  height: 40px; padding: 0 20px; background: var(--paper-2);
}
.site-nav .nav-crumb {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--ink-soft); text-transform: uppercase;
}
.site-nav .nav-crumb a { color: var(--ink-soft); text-decoration: none; }
.site-nav .nav-crumb a:hover { color: var(--brick); }
.site-nav .nav-crumb .sep { opacity: .45; }
.site-nav .nav-crumb .cur { color: var(--ink); }
.site-nav .nav-mods { display: flex; align-items: center; gap: 7px; overflow-x: auto; flex: 1; }
.site-nav .nav-mods::-webkit-scrollbar { height: 0; }
.site-nav .nav-mod {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-serif); font-size: 13px; color: var(--ink-soft);
  white-space: nowrap; background: rgba(255,255,255,.45);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.site-nav .nav-mod:hover { border-color: var(--brick); color: var(--brick); }
.site-nav .nav-mod.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.site-nav .nav-mod .st { color: var(--neon); font-size: 10px; }
.site-nav .nav-mod.active .st { color: #ffd28a; }

/* card */
.card {
  border: 1px solid var(--line-strong);
  background: rgba(255,250,240,.55);
  padding: 22px;
  border-radius: 2px;
}

/* tone color tokens */
.t-yinping { --tc: var(--neon); }
.t-yinqu   { --tc: var(--moss); }
.t-yangqu  { --tc: var(--jade); }
.t-yinru   { --tc: var(--brick); }
.t-yangru  { --tc: var(--gold); }

/* tone pill */
.tone-pill { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size:11px; border:1px solid var(--tc); color: var(--tc); }