:root {
  --bg:#08080a;
  --panel:#111114;
  --panel-soft:#17171b;
  --text:#f5f5f7;
  --muted:#a0a0a8;
  --line:rgba(255,255,255,.11);
  --green:#e8eaec;
  --yellow:#cfd2d5;
  --orange:#aeb3b8;
  --red:#8e9398;
  --violet:#70757a;
  --blue:#d7dade;
  --card-accent:#d7dade;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
button,a{font:inherit}
a{color:inherit}
button{color:inherit}
::selection{background:#d9dcdf;color:#111}

.shell{width:min(1180px,calc(100% - 38px));margin:0 auto}
.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ambient{position:fixed;border-radius:50%;filter:blur(100px);opacity:.12;pointer-events:none;z-index:-1}
.ambient-one{width:560px;height:560px;background:#fff;right:-220px;top:12vh;opacity:.07}
.ambient-two{width:520px;height:520px;background:#fff;left:-260px;top:62vh;opacity:.045}

.hero{min-height:100svh;position:relative;display:flex;flex-direction:column;background:linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.025) 49%,transparent 57%),radial-gradient(circle at 82% 8%,rgba(255,255,255,.075),transparent 34%)}
.nav{height:84px;display:flex;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.16em}
.wordmark-dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(145deg,#fff,#aeb3b8 42%,#4e5358 70%,#eef0f2);border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px #fff,0 0 18px rgba(255,255,255,.12)}
.nav-link{text-decoration:none;color:#b4b4ba;font-size:13px;transition:.2s}
.nav-link:hover{color:#fff}
.hero-inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding:50px 0 40px}
.hero-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#9f9fa6;margin-bottom:24px}
.hero h1{font-size:clamp(66px,11.6vw,158px);line-height:.79;letter-spacing:-.078em;margin:0;max-width:1100px;font-weight:760}
.hero-gradient{background:linear-gradient(105deg,#5f6469 0%,#f5f6f7 24%,#9ca1a6 48%,#f7f8f8 68%,#666b70 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:190% 100%;animation:drift 8s ease-in-out infinite alternate}
@keyframes drift{to{background-position:100% 0}}
.hero-grid{display:grid;grid-template-columns:1.25fr .55fr;gap:72px;margin-top:48px;align-items:end}
.hero-lead{font-size:clamp(19px,2vw,28px);line-height:1.42;color:#c9c9cf;max-width:760px;margin:0;letter-spacing:-.02em}
.hero-note{border-left:1px solid var(--line);padding-left:24px}
.hero-note p{font-size:14px;line-height:1.65;color:#8f8f97;margin:9px 0 0}
.tiny-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#777780;font-weight:700}
.spectrum{height:5px;border-radius:999px;display:block;overflow:hidden;margin-top:52px;max-width:620px;background:linear-gradient(90deg,#34383c,#a9adb1 18%,#f2f3f4 38%,#777c81 60%,#d9dcdf 82%,#44494e);box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 30px rgba(255,255,255,.06)}
.spectrum span{display:none}
.scroll-cue{margin-top:38px;width:max-content;text-decoration:none;color:#777780;font-size:12px;display:flex;align-items:center;gap:13px}.scroll-cue i{display:block;width:42px;height:1px;background:#55555d;position:relative}.scroll-cue i:after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-right:1px solid #888;border-bottom:1px solid #888;transform:rotate(45deg)}
.reveal{animation:rise .9s cubic-bezier(.16,1,.3,1) both}.reveal:nth-child(2){animation-delay:.09s}.reveal:nth-child(3){animation-delay:.16s}@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

.control-dock{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(28,30,32,.90),rgba(9,10,11,.90));backdrop-filter:blur(24px) saturate(150%);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.controls{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:13px 0}
.order-group{display:flex;border:1px solid var(--line);border-radius:999px;padding:4px;background:rgba(255,255,255,.025)}
.order-btn,.filter-btn{border:0;background:transparent;cursor:pointer;transition:.22s}
.order-btn{padding:9px 13px;border-radius:999px;font-size:12px;color:#9b9ba2;white-space:nowrap}.order-btn span{font-size:9px;color:#64646b;margin-right:5px}.order-btn:hover,.order-btn.active{background:#f5f5f7;color:#09090b}.order-btn.active span{color:#666}
.filter-strip{display:flex;gap:5px;overflow:auto;scrollbar-width:none}.filter-strip::-webkit-scrollbar{display:none}.filter-btn{border:1px solid transparent;padding:9px 11px;border-radius:999px;color:#83838b;font-size:12px;white-space:nowrap}.filter-btn:hover{color:#fff;border-color:var(--line)}.filter-btn.active{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.055)}

.intro-block{padding:110px 0 70px;display:grid;grid-template-columns:1.05fr .6fr;gap:80px;align-items:end}
.intro-block h2{font-size:clamp(46px,7vw,92px);line-height:.9;letter-spacing:-.065em;margin:14px 0 0}.intro-block h2 em{font-style:normal;color:#6c6c75}
.intro-copy p{color:#92929a;line-height:1.65;font-size:15px;margin:0 0 24px;max-width:460px}.autoplay-pill{width:max-content;border:1px solid var(--line);border-radius:999px;padding:9px 12px;color:#b9b9bf;font-size:11px;display:flex;gap:8px;align-items:center}.pulse{width:7px;height:7px;border-radius:50%;background:#e3e5e7;box-shadow:0 0 0 0 rgba(255,255,255,.30);animation:pulse 1.8s infinite}@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.timeline{position:relative;padding:5px 0 120px}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--line) 3%,rgba(255,255,255,.25) 50%,var(--line) 97%,transparent)}
.era-divider{position:relative;z-index:3;display:flex;justify-content:center;margin:0 0 72px}.era-chip{background:#0b0b0d;border:1px solid var(--line);border-radius:999px;padding:11px 15px;color:#909098;font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.moment{--accent:#d7dade;width:calc(50% - 48px);margin:0 0 86px;position:relative;opacity:.62;transform:scale(.985);transition:opacity .45s ease,transform .45s ease}.moment:nth-of-type(even){margin-left:auto}.moment.in-view{opacity:1;transform:scale(1)}
.moment-bridge{position:absolute;top:35px;width:49px;height:1px;background:linear-gradient(90deg,#e4e6e8,rgba(255,255,255,.15))}.moment:not(.right) .moment-bridge{right:-49px}.moment.right .moment-bridge{left:-49px;transform:scaleX(-1)}
.moment-dot{position:absolute;top:28px;width:15px;height:15px;border-radius:50%;background:linear-gradient(145deg,#f8f9fa,#777c81);border:2px solid #d9dcdf;box-shadow:inset 0 1px #fff,0 0 20px rgba(255,255,255,.18)}.moment:not(.right) .moment-dot{right:-56px}.moment.right .moment-dot{left:-56px}
.card{border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,255,255,.045),transparent 24%),linear-gradient(155deg,#202326,#111315 52%,#090a0b);border-radius:30px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.28);transition:border-color .3s,box-shadow .3s}.moment.in-view .card{border-color:rgba(255,255,255,.29);box-shadow:inset 0 1px rgba(255,255,255,.12),0 32px 90px rgba(0,0,0,.42),0 0 45px rgba(255,255,255,.035)}
.video-wrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}.youtube-player{position:absolute;inset:0;width:100%;height:100%}.video-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.38),transparent 38%);z-index:2}.sound-btn{position:absolute;right:14px;bottom:14px;z-index:5;border:1px solid rgba(255,255,255,.25);background:rgba(8,8,10,.73);backdrop-filter:blur(15px);color:#fff;border-radius:999px;padding:9px 12px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:7px}.sound-btn:hover{background:#fff;color:#111}.sound-icon{font-size:13px}.video-status{position:absolute;left:14px;bottom:14px;z-index:4;border-radius:999px;background:rgba(8,8,10,.72);backdrop-filter:blur(12px);padding:8px 10px;font-size:10px;color:#bdbdc3;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:7px}.video-status i{width:6px;height:6px;border-radius:50%;background:#777}.moment.playing .video-status i{background:#f0f1f2;box-shadow:0 0 12px rgba(255,255,255,.6)}
.card-body{padding:25px 26px 29px;position:relative}.accent-line{height:3px;width:54px;background:linear-gradient(90deg,#f0f1f2,#777c81);border-radius:99px;margin-bottom:22px}.meta{display:flex;justify-content:space-between;gap:14px;color:#8b8b93;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.year-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:12px}.year{font-size:clamp(42px,5vw,62px);font-weight:760;letter-spacing:-.06em;line-height:.9}.index-no{font-size:11px;color:#64646c}.card h3{font-size:25px;letter-spacing:-.04em;line-height:1.05;margin:17px 0 10px}.card-copy{color:#aaaab1;line-height:1.6;font-size:14px;margin:0}.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.tag{border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:7px 9px;color:#8e8e96;font-size:10px}
.source-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:#b9b9c0;font-size:11px;text-decoration:none}.source-link:hover{color:#fff}.source-link span{color:#e6e8ea}
.empty{padding:90px 20px;text-align:center;color:#777}
.shuffle-in{animation:shuffleIn .45s cubic-bezier(.16,1,.3,1) both}@keyframes shuffleIn{from{opacity:0;transform:translateY(18px) scale(.97)}}

.finale{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:140px 0 130px;background:radial-gradient(circle at 50% 100%,rgba(255,255,255,.075),transparent 40%)}
.finale-rainbow{position:absolute;width:820px;height:820px;border-radius:50%;right:-360px;top:-390px;background:radial-gradient(circle at 35% 35%,#f3f4f5,#92979c 28%,#34383c 55%,#0b0c0d 72%);filter:blur(35px);opacity:.13}
.finale-inner{position:relative}.finale h2{font-size:clamp(52px,8vw,105px);letter-spacing:-.07em;line-height:.87;margin:18px 0 30px}.finale h2 span{color:#6d6d76}.finale-copy{max-width:660px;color:#97979e;line-height:1.7;font-size:16px}.restart{display:inline-block;margin-top:34px;text-decoration:none;border-bottom:1px solid #555;padding-bottom:5px;color:#d1d1d5;font-size:13px}
.footer{min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:28px;color:#6f6f77;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.1em}
.now-playing{position:fixed;right:18px;bottom:18px;z-index:50;background:rgba(14,14,17,.83);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:999px;padding:10px 13px;color:#aaaab1;font-size:10px;display:flex;align-items:center;gap:9px;max-width:min(330px,calc(100vw - 36px));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playing-bars{display:flex;align-items:end;gap:2px;height:11px}.playing-bars i{width:2px;background:#d9dcdf;height:4px}.now-playing.live .playing-bars i:nth-child(1){animation:eq .8s infinite alternate}.now-playing.live .playing-bars i:nth-child(2){animation:eq .55s .1s infinite alternate}.now-playing.live .playing-bars i:nth-child(3){animation:eq .7s .2s infinite alternate}@keyframes eq{to{height:11px}}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}.hero-note{max-width:580px}.controls{align-items:flex-start;flex-direction:column}.filter-strip{width:100%}.intro-block{grid-template-columns:1fr;gap:34px;padding-top:85px}.timeline-line{left:15px}.era-divider{justify-content:flex-start;padding-left:42px;margin-bottom:50px}.moment,.moment.right{width:calc(100% - 48px);margin-left:48px;margin-bottom:54px}.moment:not(.right) .moment-bridge,.moment.right .moment-bridge{left:-33px;right:auto;width:33px;transform:none}.moment:not(.right) .moment-dot,.moment.right .moment-dot{left:-40px;right:auto}.moment{opacity:.78}.now-playing{display:none}
}
@media(max-width:560px){
  .shell{width:min(100% - 22px,1180px)}.nav{height:68px}.hero-inner{padding-top:30px}.hero h1{font-size:18.5vw}.hero-grid{margin-top:32px}.hero-lead{font-size:18px}.spectrum{margin-top:38px}.order-group{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.order-btn{padding:9px 5px}.order-btn span{display:none}.intro-block{padding-top:66px}.intro-block h2{font-size:14vw}.timeline-line{left:8px}.era-divider{padding-left:32px}.moment,.moment.right{width:calc(100% - 34px);margin-left:34px}.moment:not(.right) .moment-bridge,.moment.right .moment-bridge{left:-26px;width:26px}.moment:not(.right) .moment-dot,.moment.right .moment-dot{left:-33px}.card{border-radius:22px}.card-body{padding:20px}.year{font-size:44px}.card h3{font-size:22px}.footer{align-items:flex-start;flex-direction:column;justify-content:center;padding:30px 0}.sound-btn{right:9px;bottom:9px}.video-status{left:9px;bottom:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-gradient,.pulse,.reveal,.shuffle-in,.playing-bars i{animation:none!important}.moment{transition:none}}


/* Robust direct-embed video player */
.player-stage{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#000;
}
.player-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.28));
  transition:opacity .25s ease;
}
.player-stage.loaded::after{opacity:0}
.youtube-frame{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}
.center-play{
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:opacity .2s ease,transform .2s ease;
}
.center-play:hover{transform:translate(-50%,-50%) scale(1.04)}
.play-disc{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  padding-left:4px;
  font-size:20px;
  color:#111;
  background:linear-gradient(160deg,#fff,#b8bdc2 55%,#6f7479);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 1px #fff,0 14px 34px rgba(0,0,0,.38),0 0 24px rgba(255,255,255,.12);
}
.center-play > span:last-child{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}
.moment.playing .center-play{opacity:0;pointer-events:none}
.moment.playing .video-shade{opacity:0}
.video-shade{transition:opacity .2s ease}