:root{
  --ink:#1d1a16; --ink2:#4a443b; --muted:#6b6457; --paper:#f7f3ea; --panel:#fffdf8; --line:#d8cfbd; --line2:#e9e2d3;
  --accent:#7a2e1f; --focus:#b45309; --row:24px; --lane-head:26px; --axis:30px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink); background:var(--paper);
}
*{box-sizing:border-box}
html,body{margin:0}
body{line-height:1.45;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem .8rem;z-index:30}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none !important}

.top{padding:.7rem 1rem .4rem;background:var(--panel);border-bottom:1px solid var(--line)}
h1{font-family:Georgia,"Times New Roman",serif;font-size:1.55rem;margin:0;color:var(--accent);letter-spacing:.01em}
.sub{margin:.15rem 0 0;color:var(--ink2);font-size:.95rem}

.tools{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:flex-end;padding:.55rem 1rem;background:var(--panel);border-bottom:1px solid var(--line)}
.layers{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:center}
.layers legend{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0;margin-bottom:.2rem;float:left;width:100%}
.layer{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem .25rem .45rem;background:#fff;cursor:pointer;font-size:.9rem;min-height:2.2rem;user-select:none}
.layer input{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--c)}
.layer .sw{width:.85rem;height:.85rem;border-radius:3px;background:var(--c);flex:none}
.layer:has(input:not(:checked)){opacity:.6;background:transparent}
.layer .n{color:var(--muted);font-size:.8rem}
.find{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end;margin-left:auto}
.find label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.2rem}
.search{position:relative}
#q,#century{font:inherit;font-size:.95rem;border:1px solid var(--ink2);border-radius:6px;padding:.35rem .55rem;min-height:2.2rem;background:#fff;color:var(--ink)}
#q{width:15rem;max-width:70vw}
.matches{position:absolute;z-index:25;left:0;top:100%;margin:.2rem 0 0;padding:.2rem 0;list-style:none;background:#fff;border:1px solid var(--ink2);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.15);width:22rem;max-width:90vw;max-height:20rem;overflow:auto}
.matches li{padding:.35rem .6rem;cursor:pointer;display:flex;gap:.5rem;align-items:baseline}
.matches li[aria-selected="true"],.matches li:hover{background:var(--line2)}
.matches .d{color:var(--muted);font-size:.82rem;margin-left:auto;white-space:nowrap}
.matches .sw{width:.6rem;height:.6rem;border-radius:2px;background:var(--c);flex:none;align-self:center}
.matches .none{color:var(--muted);cursor:default}
.zoom{display:flex;gap:.3rem}
.btn{font:inherit;font-size:.95rem;border:1px solid var(--ink2);background:#fff;color:var(--ink);border-radius:6px;padding:.3rem .75rem;cursor:pointer;min-height:2.2rem;min-width:2.4rem}
.btn:hover{background:var(--line2)}

main{flex:1;padding:.4rem 0 0;min-width:0}
.hint{margin:0 1rem .35rem;font-size:.85rem;color:var(--muted)}
.timeline{position:relative;margin:0;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.timeline.dragging{cursor:grabbing}
.timeline:focus-visible{outline-offset:-3px}
.axis{position:relative;height:var(--axis);border-bottom:1px solid var(--line);background:var(--panel);z-index:3}
.tick{position:absolute;top:0;height:100%;border-left:1px solid var(--line);padding-left:4px;font-size:.78rem;color:var(--ink2);white-space:nowrap;line-height:var(--axis);font-variant-numeric:tabular-nums}
.tick.major{font-weight:700;color:var(--ink)}
.tick.zero{border-left:2px solid var(--ink2)}
.grid{position:absolute;left:0;right:0;top:var(--axis);bottom:0;pointer-events:none;z-index:0}
.gl{position:absolute;top:0;bottom:0;border-left:1px solid var(--line2)}
.gl.major{border-left-color:var(--line)}
.band{position:absolute;top:var(--axis);bottom:0;background:rgba(180,83,9,.10);border-left:2px solid rgba(180,83,9,.55);border-right:2px solid rgba(180,83,9,.55);pointer-events:none;z-index:1}
.band.point{background:transparent;border-right:0}
.lanes{position:relative;z-index:2}
.lane{position:relative;border-bottom:1px solid var(--line)}
.lane-head{position:sticky;left:0;height:var(--lane-head);display:flex;align-items:center;gap:.45rem;padding:0 .7rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c);background:linear-gradient(90deg,var(--tint) 0,var(--tint) 60%,transparent)}
.lane-head .sw{width:.7rem;height:.7rem;border-radius:2px;background:var(--c)}
.track{position:relative;overflow:hidden}

.it{position:absolute;display:block;height:calc(var(--row) - 4px);margin:0;padding:0;border:0;background:transparent;font:inherit;color:var(--ink);cursor:pointer;text-align:left;white-space:nowrap}
.it .bar{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:4px;background:var(--tint);border:1px solid var(--c)}
.it .lbl{position:relative;display:block;font-size:.8rem;line-height:calc(var(--row) - 4px);padding:0 5px;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.it.span .lbl{color:var(--ink)}
.it.span.r1 .lbl{font-weight:600}
.it.span .lbl.out{color:var(--ink2)}
.it.pt .dot{position:absolute;left:-5px;top:50%;margin-top:-5px;width:10px;height:10px;border-radius:50%;background:var(--c);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--c)}
.it.pt.doc .dot{border-radius:2px;transform:rotate(45deg)}
.it.pt .rng{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;background:var(--c);opacity:.45;border-radius:2px}
.it.pt .lbl{position:absolute;left:8px;top:0}
.it.pt.r1 .lbl{font-weight:600}
.it.pt.nolabel .lbl{display:none}
.it.pt.left .lbl{left:0;padding-right:2px}
.it.pt.left .dot{left:auto;right:-5px}
.it.approx .bar{border-style:dashed}
.it.span.thin .bar{top:50%;bottom:auto;height:8px;margin-top:-4px;border-radius:3px;background:var(--c);opacity:.55;border:0}
.it.span.thin:hover .bar,.it.span.thin:focus-visible .bar{opacity:1}
.it:hover .bar,.it:focus-visible .bar{background:var(--c);opacity:.85}
.it:hover .lbl,.it:focus-visible .lbl{text-decoration:underline}
.it.sel .bar{background:var(--c)}
.it.sel.span .lbl{color:#fff}
.it.sel .dot{transform:scale(1.35)}
.it.pt.doc.sel .dot{transform:rotate(45deg) scale(1.35)}
.it.dim{opacity:.35}
.it:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-radius:4px}

.status{margin:.3rem 1rem;font-size:.85rem;color:var(--muted);min-height:1.2em}
.noscript{margin:1rem}

.card{position:fixed;z-index:20;right:1rem;top:1rem;bottom:1rem;width:min(25rem,calc(100vw - 2rem));overflow:auto;background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:1rem 1.1rem 1.1rem;overscroll-behavior:contain}
.card .close{position:absolute;right:.4rem;top:.3rem;font:inherit;font-size:1.6rem;line-height:1;border:0;background:transparent;color:var(--ink2);cursor:pointer;width:2.4rem;height:2.4rem;border-radius:6px}
.card .close:hover{background:var(--line2)}
.kicker{margin:0 2rem .2rem 0;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c)}
.card h2{font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;line-height:1.2;margin:0 2rem .25rem 0}
.card h2:focus{outline:none}
.card h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1rem 0 .25rem}
.card p{margin:.4rem 0}
.dates{font-weight:700;font-variant-numeric:tabular-nums}
.datenote{font-size:.88rem;color:var(--ink2);font-style:italic}
.lesson{margin-top:1rem !important;padding:.55rem .7rem;background:var(--line2);border-radius:6px;font-size:.92rem}
.lesson a{color:var(--accent);font-weight:700}
.same ul{list-style:none;margin:0;padding:0}
.same li{margin:.15rem 0}
.same button{font:inherit;font-size:.9rem;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:.2rem 0;text-align:left;display:flex;gap:.45rem;align-items:baseline}
.same button:hover span.t{text-decoration:underline}
.same .sw{width:.6rem;height:.6rem;border-radius:2px;background:var(--c);flex:none;align-self:center}
.same .d{color:var(--muted);font-size:.8rem;white-space:nowrap}
.source{margin-top:1rem !important;font-size:.78rem;color:var(--muted)}
.source a{color:var(--muted)}
.foot{padding:.6rem 1rem 1rem;font-size:.8rem;color:var(--muted)}
.foot p{margin:0}

@media (max-width:700px){
  :root{--row:26px}
  .top{padding:.6rem .8rem .35rem}
  h1{font-size:1.25rem}
  .sub{font-size:.85rem}
  .tools{padding:.5rem .8rem;gap:.5rem}
  .find{margin-left:0;width:100%}
  .search{flex:1 1 100%}
  #q{width:100%;max-width:none}
  .century{flex:1 1 auto}
  #century{width:100%}
  .layer{font-size:.85rem;padding:.2rem .6rem .2rem .4rem}
  .layer .n{display:none}
  .hint{margin:0 .8rem .3rem;font-size:.8rem}
  .card{left:0;right:0;top:auto;bottom:0;width:auto;max-height:62vh;border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0}
}
@media (prefers-reduced-motion:no-preference){
  .it .bar,.it .dot{transition:background-color .15s,transform .15s}
}

/* Site version: link back to the History courses */
.back{margin:0 0 .2rem;font-size:.85rem}
.back a{color:inherit;opacity:.8}
.back a:hover,.back a:focus-visible{opacity:1}