:root { --bg:#0b0d12; --ink:#7aa2ff; --ink2:#c084fc; --panel:#0f1320; --text:#f3f3f5; }
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
.wrap{position:relative;min-height:100dvh;overflow:hidden}
#world-bg{position:fixed;inset:0;z-index:0;pointer-events:none;transition:filter .6s ease, background .6s ease}
/* Two-tier footer: controls bar + site footer */
#footer-bar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:42px;z-index:50;
  background:rgba(15,19,32,.88);border:1px solid rgba(122,162,255,.25);
  border-radius:16px;padding:8px 10px;display:flex;align-items:center;gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:min(92vw,980px);justify-content:center;
}
#site-footer{position:fixed;left:0;right:0;bottom:0;height:36px;display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(8,10,16,.9);border-top:1px solid rgba(122,162,255,.18);z-index:49;color:#cfd6ff;font-size:12px;}
.footer-nav{display:flex;gap:12px;align-items:center}
.footer-link{color:#b7c5ff;text-decoration:none}.footer-link:hover{text-decoration:underline}
#timeline-main{position:relative;z-index:1;padding-bottom:120px}
/* Controls UI */
#footer-controls .chip{padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);cursor:pointer}
#footer-controls .chip input{accent-color:currentColor}
#filter-wrap{position:relative}
#filter-btn{cursor:pointer}
#filter-panel{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  width:min(92vw,520px);background:rgba(12,16,26,.96);border:1px solid rgba(122,162,255,.25);
  border-radius:14px;padding:12px;display:none;box-shadow:0 14px 40px rgba(0,0,0,.45);backdrop-filter: blur(8px);
}
#filter-panel.open{display:block}
#filter-panel h4{margin:4px 0 8px;font-size:12px;opacity:.8;letter-spacing:.12em;text-transform:uppercase}
.filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
.filter-grid label{display:flex;align-items:center;gap:8px;font-size:14px;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.06)}
@media (max-width: 540px){
  #footer-bar{bottom:46px;padding:6px 8px;gap:6px;border-radius:14px}
  #site-footer{height:40px;font-size:11px;padding:0 8px}
  .filter-grid{grid-template-columns:1fr}
}
/* Centered, bordered pieces */
.tl-slide{padding-top:8px !important;padding-bottom:8px !important;transition: opacity .4s ease, transform .4s ease}
.tl-slide-content,.tl-media-content{
  margin-left:auto !important;margin-right:auto !important;max-width:min(920px,92vw) !important;position:relative;border-radius:14px;overflow:hidden
}
.tl-slide-content::before,.tl-media-content::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;box-shadow:0 0 0 1px rgba(200,210,255,.15), 0 0 36px rgba(124,152,255,.1) inset}
.tl-slide[data-depth="above"]{opacity:.25;transform: translateY(-6px)}
.tl-slide[data-depth="below"]{opacity:.6; transform: translateY(4px)}
.tl-slide[data-depth="focus"]{opacity:1;transform:none}
/* Timeline theme touches */
.tl-text-content a{color:var(--ink);text-decoration:underline}
.tl-slide .tl-headline{font-weight:800;letter-spacing:.2px}
.tl-timeaxis .tl-timeaxis-major,.tl-timeaxis .tl-timeaxis-minor{color:#b8c3ff}
.tl-timenav{background:linear-gradient(180deg,#0f1320,rgba(15,19,32,.65));filter: drop-shadow(0 6px 24px rgba(0,0,0,.35))}
/* Crawl tilt */
.crawl-tilt #timeline-1{transform-origin:center 60%;transform: perspective(1200px) rotateX(9deg) translateY(18px) scale(.98);transition: transform .6s ease}
@media (max-width: 800px){.crawl-tilt #timeline-1{transform: perspective(1000px) rotateX(6deg) translateY(10px) scale(.985)}}

/* === Inline horizontal footer nav (no bundling), scrollable on small screens === */
#site-footer{ white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.footer-nav{ display:flex; flex-wrap:nowrap; gap:16px; align-items:center; }
.footer-copy{ margin-left:16px; flex:0 0 auto; }

/* === Controls bar: keep chips inline and allow horizontal scroll on small screens === */
#footer-controls{ display:flex; flex-wrap:nowrap; gap:10px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:min(92vw, 960px); }
#footer-controls::-webkit-scrollbar{ height:6px; }
#footer-controls::-webkit-scrollbar-thumb{ background:rgba(180,190,255,.25); border-radius:8px; }

/* Make each chip compact inline-flex so they don't stack */
#footer-controls .chip{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }

/* On very small screens, slightly reduce chip spacing */
@media (max-width: 420px){
  #footer-controls{ gap:8px; }
  #footer-controls .chip{ padding:5px 8px; }
}

/* Ensure the filter dropdown overlays above footer and doesn't push layout */
#filter-panel{ position:absolute; z-index:60; }

/* === Spacing & overlap reduction === */
.tl-slide{ margin: 16px 0 !important; }
.tl-slide-content,.tl-media-content{
  background: rgba(20, 24, 36, .16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(180, 195, 255, .12);
}

/* Prevent scroll locking by segmenting overscroll behavior */
#timeline-main, #tracks-rail{
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Rail container layout */
#tracks-rail{
  position: relative;
  z-index: 2;
  max-width: min(1200px, 96vw);
  margin: 10px auto 6px;
  padding: 6px 0 2px;
  display: none; /* default closed */
}
.track-row{ opacity:.95; margin:10px 0; border-left:4px solid transparent; padding-left:8px }
.track-row .holder{ height: 140px; border-radius: 10px; overflow: hidden; border:1px solid rgba(255,255,255,.08); background: rgba(12,16,26,.35); }
.track-row .label{ font-weight:700; font-size:12px; opacity:.8; margin-bottom:4px }

/* When rail is open, flatten tilt to reduce visual overlap */
.rail-open .crawl-tilt #timeline-1{ transform: none; }

/* Ensure rail doesn't block page when hidden */
#tracks-rail[aria-hidden="true"]{ display:none; pointer-events:none; }
#tracks-rail[aria-hidden="false"]{ display:block; pointer-events:auto; }