:root{
  --bg:#f2e8d5;
  --paper:#fbf5ea;
  --panel:#fff8ef;
  --ink:#18202a;
  --muted:#6c6f72;
  --accent:#a85133;
  --accent-2:#2a6c77;
  --line:#c9b793;
  --shadow:0 14px 30px rgba(72,48,23,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
    var(--bg);
  background-size:58px 58px,58px 58px,auto;
}
body.theme-dark{
  --bg:#11151c;
  --paper:#1c222c;
  --panel:#202835;
  --ink:#edf2f6;
  --muted:#b6c0cc;
  --accent:#f0b46b;
  --accent-2:#8ecfda;
  --line:#314052;
  --shadow:0 16px 28px rgba(0,0,0,.35);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 28px;background:rgba(248,238,216,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(140,111,60,.18);
}
body.theme-dark .topbar{background:rgba(18,22,29,.88)}
.brand{display:flex;align-items:center;gap:14px}
.brand span{
  width:68px;height:68px;border:3px solid var(--ink);display:grid;place-items:center;
  font-size:34px;font-weight:800;background:var(--paper);box-shadow:8px 8px 0 rgba(83,109,138,.15)
}
.brand strong{display:block;font-size:30px;line-height:1.1}
.brand em{display:block;font-size:15px;color:var(--muted);font-style:normal;margin-top:4px}
nav{display:flex;flex-wrap:wrap;gap:12px}
nav a,.button{
  border:1px solid rgba(91,81,52,.25);
  background:var(--paper);
  padding:13px 18px;border-radius:8px;
  font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.06)
}
nav a.active,.button.primary{background:var(--ink);color:var(--paper)}
main{width:min(1420px,calc(100vw - 40px));margin:0 auto;padding:32px 0 56px}
.hero,.style-board,.section,.page-title{
  background:rgba(255,248,235,.72);
  border:2px solid rgba(145,119,77,.35);
  box-shadow:14px 14px 0 rgba(199,168,113,.22), var(--shadow);
}
body.theme-dark .hero, body.theme-dark .style-board, body.theme-dark .section, body.theme-dark .page-title{
  background:rgba(27,34,44,.88)
}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;padding:28px;margin-bottom:24px}
.hero-copy h1,.page-title h1{margin:8px 0 12px;font-size:72px;line-height:1.02;letter-spacing:0}
.eyebrow,.crumb{font-size:15px;font-weight:700;color:var(--accent);margin:0}
.lead{font-size:22px;line-height:1.7;max-width:820px}
.hero-actions,.path-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.hero-panel{display:flex;flex-direction:column;gap:18px}
.hero-panel img{aspect-ratio:3/4;object-fit:contain;background:#f4f1ea;border:1px solid var(--line);padding:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stats div,.fact{
  background:var(--paper);border:1px solid var(--line);padding:16px;min-height:92px
}
.stats strong{display:block;font-size:36px;color:var(--accent-2)}
.section,.page-title{padding:28px;margin-bottom:24px}
.section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px}
.section-head h2,.reading-card h2,.viewer h2,.quiz-box h2{margin:0 0 10px;font-size:26px}
.section-head p{max-width:720px;color:var(--muted);line-height:1.8;margin:0}
.entry-router,.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.entry-card,.card,.path-card,.panel,.quiz-box{
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)
}
.entry-card{padding:20px;min-height:180px}
.entry-card.primary{border-left:12px solid var(--accent-2)}
.entry-card span, .card small{display:block;color:var(--accent);font-weight:700;margin-bottom:12px}
.entry-card strong{display:block;font-size:28px;line-height:1.15;margin-bottom:12px}
.entry-card p,.card p,.reading-card p,.quiz-box p,.path-card span,.path-card strong,.source-caption,.source-meta span{line-height:1.8}
.card{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.card img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#f6f1e7;border:1px solid var(--line);padding:12px}
.card h3{margin:0;font-size:34px;line-height:1.18}
.style-board{display:grid;grid-template-columns:1.2fr .65fr;gap:20px;padding:18px}
.detail-panel{display:flex;flex-direction:column;gap:18px;padding:0;background:transparent;border:none;box-shadow:none}
.reading-card,.viewer,.quiz-box{padding:22px}
.reading-card.thesis{border-left:12px solid var(--accent-2)}
.reading-card.danger{border-left:12px solid var(--accent)}
.detail-list{margin:0;padding-left:22px;line-height:1.9}
.route-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.route-item{background:var(--paper);border:1px solid var(--line);padding:16px;display:flex;gap:10px;align-items:center;font-weight:700;min-height:86px}
.route-number{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--accent-2);color:#fff;font-size:16px}
.source-expansion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.source-item{background:#eef1f5;border:1px solid var(--line);padding:16px}
body.theme-dark .source-item{background:#263140}
.source-item h3{margin:0 0 10px;font-size:24px}
.source-meta{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(79,92,107,.35)}
.plate-path-group{margin-top:16px}
.plate-path-head h3{margin:0 0 6px;font-size:24px}
.plate-path-head p{margin:0 0 12px;color:var(--muted)}
.viewer-main{margin:0;background:#f6f1e7;padding:16px;border:1px solid var(--line)}
.viewer-main img{width:100%;max-height:720px;object-fit:contain}
.viewer-main figcaption{margin-top:12px;color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.thumbs button{padding:0;border:none;background:none;cursor:pointer}
.thumbs img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#f6f1e7;padding:8px;border:1px solid var(--line)}
.learning-path,.term-cloud,.fact-strip{display:flex;flex-wrap:wrap;gap:12px}
.path-card{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1 1 220px}
.path-card strong{font-size:22px}
.term-chip{
  display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:999px;
  background:#efe8b7;border:1px solid rgba(118,103,33,.35);font-weight:700
}
body.theme-dark .term-chip{background:#304035}
.term-chip em{font-style:normal;color:var(--accent-2)}
.fact-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.fact strong{display:block;font-size:18px;margin-top:8px}
.quiz-box .answer{display:none;margin-top:14px;padding:14px;border:1px solid var(--line);background:var(--paper)}
.quiz-box .answer.is-open{display:block}
.single-column{display:flex;flex-direction:column}
.plate-full{width:100%;object-fit:contain;background:#f6f1e7;padding:14px;border:1px solid var(--line)}
.footer{width:min(1420px,calc(100vw - 40px));margin:0 auto 48px;color:var(--muted);font-size:15px}
@media (max-width:1200px){
  .entry-router,.grid,.source-expansion{grid-template-columns:repeat(2,minmax(0,1fr))}
  .style-board,.hero{grid-template-columns:1fr}
}
@media (max-width:760px){
  .topbar{padding:18px;flex-direction:column;align-items:flex-start}
  main{width:min(100vw - 20px,1420px)}
  .hero-copy h1,.page-title h1{font-size:48px}
  .entry-router,.grid,.route-list,.source-expansion,.thumbs,.fact-strip{grid-template-columns:1fr}
  .brand strong{font-size:24px}
}