:root { --xp-bg:#111c2f; --xp-ink:#f1f5f9; --xp-muted:#9cabc0; --xp-border:#29374d; --xp-accent:#fda4af; }
html.light { --xp-bg:#fff; --xp-ink:#19263c; --xp-muted:#57657a; --xp-border:#dce3ed; --xp-accent:#b71943; }
.timeline-page { max-width:1200px; padding:56px 24px 88px; margin:auto; color:var(--xp-ink); }
.timeline-hero { display:grid; grid-template-columns:1fr 280px; align-items:center; gap:48px; padding:24px 0 48px; }
.timeline-hero h1 { font-family:Cinzel,Georgia,serif; font-size:clamp(42px,5.8vw,74px); line-height:1.12; font-weight:700; letter-spacing:-.025em; margin:20px 0 24px; }
.timeline-hero h1 em { color:var(--xp-accent); font-style:normal; }
.timeline-hero p:not(.quiz-eyebrow) { max-width:570px; color:var(--xp-muted); font-size:17px; line-height:1.8; }
.timeline-hero-stat { min-height:260px; padding:36px; border:1px solid var(--xp-border); border-radius:28px; background:linear-gradient(145deg,rgba(190,18,60,.12),transparent),var(--xp-bg); display:flex; flex-direction:column; justify-content:center; gap:12px; font-size:14px; color:var(--xp-muted); }
.timeline-hero-stat strong { font:700 74px Georgia,serif; color:var(--xp-ink); }
.timeline-hero-line { height:3px; margin-top:12px; background:linear-gradient(90deg,#be123c,#fda4af,transparent); border-radius:8px; }
.timeline-jumps { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.timeline-jumps button { padding:10px 14px; border:1px solid var(--xp-border); border-radius:30px; background:var(--xp-bg); color:var(--xp-muted); font-size:12px; transition:color .2s,border-color .2s; }
.timeline-jumps button:hover { color:var(--xp-accent); border-color:var(--xp-accent); }
.timeline-tools { display:grid; grid-template-columns:2fr 1.4fr 1fr auto; align-items:end; gap:14px; padding:22px; border:1px solid var(--xp-border); border-radius:20px; background:var(--xp-bg); box-shadow:0 8px 24px rgba(0,0,0,.04); }
.timeline-tools label { display:flex; flex-direction:column; gap:8px; font-size:12px; font-weight:600; color:var(--xp-muted); }
.timeline-tools input,.timeline-tools select { width:100%; min-width:0; border:1px solid var(--xp-border); background:transparent; color:var(--xp-ink); border-radius:10px; padding:12px; font-size:14px; }
.timeline-count { color:var(--xp-muted); margin:28px 0; font-size:13px; }
.timeline-track { position:relative; }
.timeline-track::before { content:''; position:absolute; left:157px; top:12px; bottom:32px; width:2px; background:var(--xp-border); }
.timeline-event { display:grid; grid-template-columns:135px 1fr; gap:48px; position:relative; padding-bottom:24px; }
.timeline-date { font-size:15px; font-weight:650; color:var(--xp-accent); text-align:right; padding-top:26px; }
.timeline-event::before { content:''; position:absolute; left:151px; top:30px; width:14px; height:14px; border-radius:50%; background:#be123c; border:3px solid var(--xp-bg); box-shadow:0 0 0 1px var(--xp-border); }
.timeline-event-card { background:var(--xp-bg); border:1px solid var(--xp-border); border-radius:18px; padding:26px 30px; transition:border-color .2s,transform .2s; }
.timeline-event-card:hover { border-color:var(--xp-accent); transform:translateX(3px); }
.timeline-period-label { color:var(--xp-accent); font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:650; }
.timeline-event-card h2 { font-size:21px; font-weight:650; margin:10px 0; line-height:1.5; }
.timeline-event-card p { color:var(--xp-muted); line-height:1.8; font-size:15px; }
.timeline-details { border-top:1px solid var(--xp-border); margin-top:20px; padding-top:14px; font-size:12px; color:var(--xp-muted); }
.timeline-details summary { cursor:pointer; width:fit-content; }
.timeline-details p { font-size:13px; margin-top:12px; }
.timeline-empty { text-align:center; padding:56px 24px; color:var(--xp-muted); }
.quiz-page { max-width:900px; padding:56px 24px 80px; margin:auto; color:var(--xp-ink); }
.quiz-page-heading { text-align:center; margin-bottom:36px; }
.quiz-page-heading h1 { font:700 clamp(32px,4vw,48px) Cinzel,Georgia,serif; margin:16px 0; }
.quiz-page-heading>p:last-child { color:var(--xp-muted); }
.quiz-panel { background:var(--xp-bg); border:1px solid var(--xp-border); border-radius:26px; padding:clamp(24px,4vw,44px); box-shadow:0 12px 40px rgba(0,0,0,.05); }
.quiz-eyebrow { font-size:11px; font-weight:750; letter-spacing:.14em; color:var(--xp-accent); }
.quiz-title { font-size:clamp(22px,2.5vw,30px); font-weight:650; line-height:1.5; margin:18px 0; }
.quiz-muted { color:var(--xp-muted); line-height:1.8; margin:20px 0; }
.quiz-stats { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding:18px 0; margin:14px 0; font-size:13px; font-weight:600; color:var(--xp-muted); }
.quiz-stats span { padding:9px 12px; background:rgba(148,163,184,.08); border:1px solid var(--xp-border); border-radius:10px; }
.quiz-panel progress { width:100%; height:6px; accent-color:#be123c; margin-bottom:24px; }
.quiz-options { display:grid; gap:12px; margin:26px 0; }
.quiz-option { width:100%; text-align:left; padding:18px 20px; border:1px solid var(--xp-border); border-radius:14px; background:var(--xp-bg); color:var(--xp-ink); transition:border-color .2s,background .2s; line-height:1.6; }
.quiz-option:hover:not(:disabled) { border-color:var(--xp-accent); background:rgba(190,18,60,.05); }
.quiz-option.correct { border-color:#34d399; background:rgba(16,185,129,.12); }
.quiz-option.incorrect { border-color:#fb7185; background:rgba(225,29,72,.12); }
.quiz-feedback { color:var(--xp-ink); line-height:1.7; margin:18px 0; }
.quiz-score { display:block; font-size:56px; color:var(--xp-accent); }
@media(max-width:800px){.timeline-hero{grid-template-columns:1fr;gap:24px}.timeline-hero-stat{min-height:0;flex-direction:row;align-items:center;flex-wrap:wrap;padding:24px;gap:18px}.timeline-hero-stat strong{font-size:40px}.timeline-hero-line{display:none}.timeline-tools{grid-template-columns:1fr 1fr}.timeline-tools label:first-child{grid-column:1/-1}.timeline-event{grid-template-columns:1fr;gap:12px;padding-left:26px}.timeline-track::before{left:5px}.timeline-event::before{left:-1px;top:8px}.timeline-date{text-align:left;padding:0}.timeline-event-card{padding:22px}.timeline-page{padding:28px 16px 60px}}
@media(prefers-reduced-motion:reduce){.timeline-event-card:hover{transform:none}}