:root { --font:var(--sans); --ink-dim:var(--muted); --ink-faint:var(--muted); --line:var(--rule); --accent:var(--rust); --tour:#b47a13; --tour-ink:#fffdf4; --card:#e8ecdf; --hover:#e0e7d7; --map-row:#e8ebdf66; --map-rule:#cbd3c4; --label-halo:#f3f0e7; }
:root[data-theme="dark"] { color-scheme:dark; --paper:#101720; --surface:#17212c; --ink:#e0e3e8; --muted:#a7b5bf; --rule:#354451; --rust:#dbc08b; --tour:#e0bd6b; --tour-ink:#25251d; --card:#202e3a; --hover:#2a3a47; --map-row:#ffffff05; --map-rule:#41525e; --label-halo:#101720; }
.masthead { gap:18px; }
.histomap-return,.sticky-histomap-return { display:inline-flex; align-items:center; min-height:40px; white-space:nowrap; font-size:12px; font-weight:600; color:var(--ink); }
.histomap-return:hover,.sticky-histomap-return:hover { text-decoration:underline; }
.top-nav { margin-left:auto; gap:18px; }
.search-launch { min-width:150px; color:var(--muted); border-color:var(--rule); }
#view-theme { display:inline-flex; align-items:center; gap:6px; padding:8px; min-height:40px; background:var(--surface); border:1px solid var(--rule); border-radius:6px; }
.masthead #progress-counter { flex-shrink:0; }
.time-machine-heading { flex-wrap:wrap; gap:10px; }
.time-machine-heading>.small-muted { display:none; }
.time-machine-heading>.eyebrow { margin-right:auto; }
.time-machine-heading #random-moment { min-width:44px; font-size:20px; }
.time-machine-heading>button:not(.guided-tour-launch) { min-height:40px; padding:8px 10px; background:var(--surface); border:1px solid var(--rule); border-radius:4px; font-size:12px; }
.guided-tour-launch,.top-nav [data-open-tours] { background:var(--tour); color:var(--tour-ink); border-color:var(--tour); }
.top-nav [data-open-tours] { height:38px; padding:0 12px; border-radius:4px; }
.time-machine,.atlas-layout,.reader { background:var(--surface); }
.reader { padding:0; display:block; max-height:760px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--muted) transparent; }
.reader-content { padding:18px 20px 24px; }
.reader .reader-meta .eyebrow { display:block; color:var(--muted); font-size:9px; }
.reader .reader-meta h3 { font-size:29px; margin:9px 0; color:var(--ink); }
.reader .reader-date { margin-bottom:12px; color:var(--rust); }
.reader .reader-blurb { font-size:13px; line-height:1.65; margin:0; color:var(--ink); }
.reader-gallery { width:100%; aspect-ratio:16/9; background-position:center; background-size:cover; background-repeat:no-repeat; background-color:var(--surface); position:relative; touch-action:pan-y; }
.reader-gallery.portrait-image { background-size:contain; }
.reader-gallery button { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:56px; padding:0; border:0; background:transparent; color:white; font-size:38px; text-shadow:0 1px 4px #000,0 0 10px #0009; }
.reader-image-prev { left:4px; }.reader-image-next { right:4px; }
.reader-image-count { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:#10172099; color:white; padding:2px 8px; border-radius:12px; font-size:11px; }
.reader .reader-section,.reader .book-section { margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--rule); }
.reader .reader-section h4,.reader .book-heading { margin:0 0 7px; color:var(--muted); font:600 10px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.reader-section h4 a:hover { color:var(--rust); text-decoration:underline; }
.reader-video { display:flex; gap:9px; align-items:center; width:100%; min-width:0; border:0; padding:0; background:transparent; text-align:left; color:var(--ink); }
.reader-video-thumb { display:grid; place-items:center; width:80px; height:48px; flex:0 0 80px; background:var(--card); border-radius:3px; overflow:hidden; }
.reader-video-thumb img { width:100%; height:100%; object-fit:cover; }
.reader-video-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.reader-video-copy strong { font-size:12px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.reader-video-copy>span { font-size:11px; line-height:1.4; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-video-search { display:flex; flex-direction:column; gap:4px; font-size:12px; }
.reader-video-search>span { font-size:11px; color:var(--muted); }
.reader-media-more summary { padding:8px 0; cursor:pointer; font-size:11px; color:var(--rust); }
.reader-media-more .reader-video { margin-block:8px; }
.reader-connections>div { display:flex; gap:5px; flex-wrap:wrap; }
.reader .connection { display:inline-flex; width:auto; min-height:30px; padding:5px 7px; margin:0; border:1px solid var(--rule); background:var(--card); border-radius:5px; font-size:11px; color:var(--ink); }
#reader-context h5 { font-size:13px; margin:14px 0 8px; }
#reader-context p { font-size:12px; line-height:1.7; margin:0 0 12px; }
#reader-context .reader-source { font-size:11px; color:var(--muted); }
#reader-video-player { width:min(920px,calc(100% - 24px)); padding:18px; }
#reader-video-player iframe { display:block; width:100%; aspect-ratio:16/9; border:0; background:#000; margin-bottom:14px; }
#reader-video-player>a { color:var(--rust); font-size:12px; }
#view-tutorial h3 { margin:22px 0 10px; font-size:17px; }
#view-tutorial p { line-height:1.7; font-size:14px; margin-bottom:18px; }
#view-feedback-dialog label { display:block; margin:16px 0; font-size:13px; }
#view-feedback-dialog select,#view-feedback-dialog textarea { display:block; width:100%; margin-top:8px; padding:10px; color:var(--ink); background:var(--paper); border:1px solid var(--rule); font:inherit; }
#view-feedback-dialog form>button { min-height:44px; padding:10px; background:var(--card); border:1px solid var(--rule); margin:0 6px 12px 0; }
#view-feedback-status { font-size:12px; line-height:1.5; }
/* Shared theme preference; each view keeps its own layout. */
[data-theme="dark"] .hero-description,[data-theme="dark"] #hero-era,[data-theme="dark"] .section-description,[data-theme="dark"] .small-muted { color:var(--muted); }
[data-theme="dark"] .era-nav button,[data-theme="dark"] .timeline-key,[data-theme="dark"] .timeline-note,[data-theme="dark"] .world-card .world-excerpt { color:var(--muted); }
[data-theme="dark"] .time-machine,[data-theme="dark"] .era-nav button,[data-theme="dark"] .round-button,[data-theme="dark"] dialog { border-color:var(--rule); }
[data-theme="dark"] .portrait-content { background:radial-gradient(ellipse,var(--paper) 40%,transparent 71%); }
[data-theme="dark"] .tour-card,[data-theme="dark"] .tour-list-button,[data-theme="dark"] .timeline-zoom button { background:var(--card); color:var(--ink); border-color:var(--rule); }
[data-theme="dark"] .tour-card .tour-match,[data-theme="dark"] .tour-card .tour-stop-count,[data-theme="dark"] .tour-list-button small { color:var(--muted); }
[data-theme="dark"] .tour-list-button:hover,[data-theme="dark"] .timeline-zoom button:hover:not(:disabled) { background:var(--hover); }
[data-theme="dark"] .search-launch kbd { background:var(--card); }
[data-theme="dark"] .tour-category-tab[aria-selected=true],[data-theme="dark"] .era-nav button[aria-current=true] { background:var(--tour); color:var(--tour-ink); }
[data-theme="dark"] .journey-player { background:var(--card); color:var(--ink); }
[data-theme="dark"] .journey-actions button { color:var(--ink); }
#timeline .axis-label,#timeline .region-count { fill:var(--muted); }
#timeline .region-label,#timeline .entry-label { fill:var(--ink); }
#timeline .timeline-row { fill:var(--map-row); }
#timeline .timeline-grid { stroke:var(--map-rule); }
#timeline .network-line { fill:none; stroke:var(--rust); stroke-width:1; opacity:.45; pointer-events:none; }
#timeline .network-name text { fill:var(--ink); font:400 11px var(--sans); paint-order:stroke; stroke:var(--label-halo); stroke-width:3px; stroke-linejoin:round; }
#timeline .network-name { cursor:pointer; }
#timeline .network-name:focus { outline:none; }
#timeline .network-name:hover text,#timeline .network-name:focus-visible text { text-decoration:underline; }
#timeline [role=button]:focus:not(:focus-visible) { outline:none; }
@media(min-width:1200px) { .atlas-layout { grid-template-columns:minmax(0,1fr) 370px; } }
@media(max-width:1250px) { .masthead .top-nav,.masthead #progress-counter { display:none; } .masthead .search-launch { margin-left:auto; } }
@media(max-width:900px) { .reader { display:block; max-height:none; } .reader-gallery { max-height:320px; } .reader-content { padding:22px; } }
@media(max-width:700px) { .masthead { height:auto; min-height:74px; flex-wrap:wrap; gap:10px; padding-block:12px; } .masthead .histomap-return { order:5; flex:0 0 100%; min-height:28px; } .masthead .search-launch { min-width:40px; width:40px; padding:9px; } .search-launch span,.search-launch kbd { display:none; } .wordmark { font-size:18px; } .wordmark svg { width:25px; margin-right:7px; } #view-theme span { display:none; } #view-theme { min-height:44px; min-width:40px; justify-content:center; } .time-machine-heading>.eyebrow { display:none; } .sticky-histomap-return { margin-right:auto; } .guided-tour-launch { margin-left:0; } .time-machine-heading { gap:7px; } .time-machine-heading>button { min-height:44px; } .reader .connection,.reader-media-more summary { min-height:44px; } .reader .connection { align-items:center; } .reader-media-more summary { padding-block:13px; } .reader .book-source { flex-basis:44px; } }
@media(max-width:380px) { .masthead { gap:6px; padding-inline:4%; } .wordmark { font-size:16px; } .wordmark svg { width:22px; margin-right:4px; } .masthead #account-btn { width:40px; flex-basis:40px; } .tour-total { display:none; } }