:root{--serif: "Palatino", "Iowan Old Style", Georgia, serif;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif}:root[data-theme=light]{--bg: #efe7d5;--panel: #f8f3e6;--panel-2: #efe8d6;--border: #d8cdb2;--text: #2b2416;--muted: #7a6f58;--accent: #8a6d1a;--accent-text: #fff;--map-bg: #f4eedd;--map-filter: sepia(.22) brightness(.99);--chip: #ece4cf;--shadow: 0 4px 18px rgba(60, 45, 10, .18);--walker-frodo: #c17d00;--walker-sam: #8f8a00;--walker-merry: #146fc1;--walker-pippin: #007a55;--walker-gandalf: #5f6266;--walker-aragorn: #1a3f9c;--walker-legolas: #5e35b1;--walker-gimli: #ad2c72;--walker-boromir: #bf360c}:root[data-theme=dark]{--bg: #14110b;--panel: #1e1912;--panel-2: #262017;--border: #3a3223;--text: #e8dfc9;--muted: #9c9074;--accent: #d4a017;--accent-text: #1a1509;--map-bg: #17140d;--map-filter: invert(.88) sepia(.35) saturate(1.4) brightness(1.15) contrast(1.15);--chip: #2c2518;--shadow: 0 4px 18px rgba(0, 0, 0, .5);--walker-frodo: #eaa221;--walker-sam: #ede04a;--walker-merry: #5ab8ee;--walker-pippin: #0fb287;--walker-gandalf: #b5b5b5;--walker-aragorn: #3a97e0;--walker-legolas: #9678d8;--walker-gimli: #d787b4;--walker-boromir: #e0661a}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}.app{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;gap:16px;padding:0 16px;height:54px;border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0}.header .brand{display:flex;align-items:center;gap:10px;min-width:0}.header .brand-mark{width:32px;height:32px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:14px;flex-shrink:0}.header h1{font-family:var(--serif);font-size:15px;letter-spacing:.08em;margin:0;white-space:nowrap}.header .subtitle{font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}.volume-tabs{display:flex;gap:4px;margin:0 auto}.volume-tabs button{background:none;border:none;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;cursor:pointer;border-radius:6px;font-family:var(--sans)}.volume-tabs button:hover{color:var(--text);background:var(--panel-2)}.volume-tabs button.active{color:var(--accent);font-weight:600}.header .actions{display:flex;gap:6px}.icon-button{background:none;border:1px solid transparent;color:var(--muted);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}.icon-button:hover{color:var(--text);background:var(--panel-2);border-color:var(--border)}.main{display:flex;flex:1;min-height:0}.map-pane{position:relative;flex:1;min-width:0}.sidebar{width:380px;flex-shrink:0;overflow-y:auto;border-left:1px solid var(--border);background:var(--panel);padding:20px 22px 40px}.map-container{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--map-bg)}.map-container .leaflet-container{width:100%;height:100%;background:var(--map-bg);font-family:var(--sans)}.leaflet-image-layer{filter:var(--map-filter)}.map-tooltip{font-family:var(--sans);font-size:12px}.map-legend{position:absolute;top:14px;right:14px;z-index:1000;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 6px;box-shadow:var(--shadow);max-width:130px}.map-legend button{display:flex;align-items:center;gap:7px;width:100%;background:none;border:none;color:var(--text);font-size:12px;padding:3px 8px;cursor:pointer;border-radius:6px;opacity:.55;font-family:var(--sans)}.map-legend button.present{opacity:1}.map-legend button:hover,.map-legend button.selected{background:var(--panel-2)}.map-legend button.selected{outline:1px solid var(--accent)}.map-legend .swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0}.timeline{position:absolute;left:14px;right:14px;bottom:14px;z-index:1000;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px 12px}.timeline .status-row{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;font-size:12px}.timeline .status-date{color:var(--accent);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}.timeline .status-location{color:var(--text);font-family:var(--serif)}.timeline .status-progress{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}.timeline .status-progress b{color:var(--text)}.timeline .scrub-row{display:flex;align-items:center;gap:10px}.timeline .nav-button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:6px;line-height:1}.timeline .nav-button:hover:not(:disabled){color:var(--text);background:var(--panel-2)}.timeline .nav-button:disabled{opacity:.3;cursor:default}.timeline .nav-label{font-size:10px;color:var(--muted);max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.timeline .track{flex:1;min-width:0}.timeline svg{display:block;width:100%}.timeline .tick{cursor:pointer}.timeline .play-button{background:var(--panel-2);border:1px solid var(--border);color:var(--text);cursor:pointer;width:34px;height:34px;border-radius:50%;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.timeline .play-button:hover{border-color:var(--accent)}.sidebar .volume-label{color:var(--accent);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}.sidebar h2{font-family:var(--serif);font-size:24px;margin:0 0 2px}.sidebar .chapter-title{font-family:var(--serif);font-size:17px;color:var(--text);margin:0 0 4px}.sidebar .chapter-location{color:var(--muted);margin-bottom:12px}.sidebar .badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.badge{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text)}.badge.accent{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}.sidebar section{margin-bottom:22px}.sidebar h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:6px}.summary p{font-family:var(--serif);font-size:14.5px;line-height:1.5;margin:0 0 10px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:5px 11px;border-radius:8px;background:var(--chip);border:1px solid var(--border);color:var(--text);text-decoration:none}.chip .swatch{width:9px;height:9px;border-radius:50%}a.chip:hover{border-color:var(--accent)}.movement{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin-bottom:8px;font-size:13px;display:flex;align-items:center;gap:8px}.movement .swatch{width:9px;height:9px;border-radius:50%;flex-shrink:0}.movement .route{color:var(--muted)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}.modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);max-width:520px;width:100%;max-height:85vh;overflow-y:auto;padding:24px 26px;position:relative}.modal h2{font-family:var(--serif);margin:0 0 2px;font-size:20px}.modal .subtitle{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}.modal h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}.modal p,.modal li{font-size:13.5px;line-height:1.55}.modal ul{margin:0;padding-left:18px}.modal .close{position:absolute;top:14px;right:14px}.modal kbd{background:var(--panel-2);border:1px solid var(--border);border-radius:5px;padding:1px 7px;font-size:12px}.modal a{color:var(--accent)}@media (max-width: 900px){.main{flex-direction:column;overflow-y:auto}.map-pane{flex:none;height:58vh}.sidebar{width:auto;border-left:none;border-top:1px solid var(--border);overflow-y:visible}.header .subtitle,.timeline .nav-label{display:none}}@media (max-width: 760px){.header .brand h1{display:none}}
