:root { color-scheme: light; --ink: #243247; --paper: #fffdf7; --red: #a54032; --gold: #d79a36; --mist: #eef3f2; }
* { box-sizing: border-box; }
body { margin: 0; background: #f4f0e7; color: var(--ink); font-family: "Noto Serif SC", "Songti SC", SimSun, serif; line-height: 1.9; }
.page { max-width: 860px; margin: 32px auto; padding: 26px clamp(20px, 5vw, 58px) 54px; background: var(--paper); box-shadow: 0 5px 28px #493a251c; }
header { text-align: center; border-bottom: 2px solid var(--gold); padding-bottom: 24px; }
h1, h2, h3 { color: #6c281f; line-height: 1.35; }
h1 { font-size: clamp(2rem, 5vw, 3.35rem); margin: 0 0 10px; }
h2 { margin-top: 2.2em; border-left: 5px solid var(--gold); padding-left: .65em; }
h3 { margin-bottom: .2em; }
.lead, .subtitle { color: #53606b; font-size: 1.08rem; }
.timeline { background: var(--mist); border-radius: 10px; padding: 18px 22px; }
.timeline strong { color: var(--red); }
figure { margin: 30px 0; }
figure img { width: 100%; display: block; border-radius: 9px; box-shadow: 0 3px 14px #3122162b; }
figcaption { color: #65707c; font-size: .92rem; margin-top: 8px; text-align: center; }
.dynasty { padding: 8px 0 16px; border-bottom: 1px solid #e6dfd2; }
.memory { background: #fff2d6; border-left: 5px solid var(--gold); padding: 14px 18px; border-radius: 0 8px 8px 0; }
.quiz { margin-top: 3em; padding: 24px; background: #f2f5f5; border-radius: 12px; }
.question { padding: 18px 0; border-bottom: 1px solid #d6dfde; }
.question:last-of-type { border: 0; }
.options { display: grid; gap: 7px; }
label { cursor: pointer; padding: 4px 7px; border-radius: 5px; }
label:hover { background: #e4eeee; }
button { border: 0; border-radius: 6px; background: var(--red); color: white; padding: 11px 20px; font: inherit; cursor: pointer; margin-top: 16px; }
button:hover { background: #7e281e; }
#result { font-weight: bold; margin: 14px 0 0; }
.correct { background: #dff1df; }.incorrect { background: #fae2df; }
@media (max-width: 600px) { .page { margin: 0; box-shadow: none; } }