:root{
  --bg: #000;
  --fg: #fff;
  --muted: #bdbdbd;
  --rail-w: 280px;
  --gap: 16px;
  --speed-up: 28s;
  --speed-down: 32s;
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.top{position:sticky;top:0;padding:18px 20px;background:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.0));backdrop-filter: blur(2px);z-index:3}
#site-title{margin:0;font-weight:800;letter-spacing:.22em;text-align:center;font-size: clamp(16px, 4vw, 28px);}

.stage{display:grid;grid-template-columns: var(--rail-w) 1fr var(--rail-w);gap:var(--gap);min-height: calc(100vh - 96px);padding: 10px 12px 24px;}
.rail{display:flex;flex-direction:column;gap:10px}
.rail-title{margin:6px 0 0 6px;font-size:.95rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

.carousel{position:relative;height:70vh;overflow:hidden;border:1px solid #222;border-radius:var(--radius);padding:6px}
.track{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.track li a{display:flex;align-items:center;gap:10px;border:1px solid #2a2a2a;border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02);transition:transform .2s ease, background .2s ease, border .2s ease}
.track li a:hover{transform: translateX(4px);border-color:#444;background:rgba(255,255,255,.04)}
.track img{width:120px;height:54px;object-fit:contain;background:#000;border:1px solid #333;border-radius:10px;padding:6px}
.track span{font-weight:600;letter-spacing:.06em}

.carousel.up .track{animation: scroll-up var(--speed-up) linear infinite}
.carousel.up .track.clone{animation-delay: calc(var(--speed-up) / -2)}
.carousel.down .track{animation: scroll-down var(--speed-down) linear infinite}
.carousel.down .track.clone{animation-delay: calc(var(--speed-down) / -2)}

@keyframes scroll-up{
  0%{transform:translateY(0)}
  100%{transform:translateY(-100%)}
}
@keyframes scroll-down{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(0)}
}

.hero{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:14px;padding:20px;border:1px dashed #222;border-radius:var(--radius);min-height:60vh}
.tag{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem}
.lead{max-width:46ch;color:#e7e7e7}

.foot{display:flex;justify-content:center;padding:28px;border-top:1px solid #111;color:#aaa}