:root { --ink:#f5f7fb; --muted:#9aa6b5; --panel:#131821; --line:#283140; --accent:#28d7e5; --accent-soft:#123a44; --accent-two:#ff3d8d; --glow-one:#123a4470; --glow-two:#43203d60; --bg:#090c11; }
* { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.hero { background:linear-gradient(145deg,#0d1118,#080a0e); border-bottom:1px solid var(--line); }
.nav { height:86px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:clamp(27px,3vw,36px); font-weight:950; letter-spacing:-1.8px; }.brand span,.footer-brand span { color:var(--accent); }
.nav-links,.actions { display:flex; gap:18px; align-items:center; }
.live-button { position:relative; display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; background:var(--accent-two); color:#090c11; font-weight:950; letter-spacing:.02em; box-shadow:0 0 0 1px var(--accent-two),0 0 28px color-mix(in srgb,var(--accent-two) 55%,transparent); }
.live-dot { width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 #fff9; animation:live-pulse 1.7s infinite; }
@keyframes live-pulse { 65%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.eyebrow,.section-label { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.button { display:inline-flex; align-items:center; padding:12px 18px; border:0; border-radius:999px; background:var(--accent); color:#071013; font:inherit; font-weight:800; cursor:pointer; }.button-small { padding:8px 14px; }.button-ghost { color:var(--ink); background:transparent; border:1px solid var(--line); }
.main-content { padding-block:34px 75px; }
.timeline-section { margin-bottom:58px; }
.timeline-shell { position:relative; padding:7px 0 12px; overflow:hidden; }
.timeline-line { position:absolute; top:25px; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--line) 3%,var(--line) 97%,transparent); }
.year-list { position:relative; display:flex; overflow-x:auto; padding:0 max(48%,calc(50% - 42px)) 20px; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; scroll-snap-type:x proximity; }
.year-link { position:relative; flex:0 0 86px; display:flex; flex-direction:column; align-items:center; gap:13px; color:var(--muted); scroll-snap-align:center; transition:color .2s,transform .2s; }
.year-dot { width:14px; height:14px; margin-top:12px; border:3px solid var(--bg); border-radius:50%; background:var(--line); box-shadow:0 0 0 2px var(--line); transition:.2s; }
.year-number { font-size:14px; font-weight:750; }
.year-link:hover { color:var(--ink); transform:translateY(-2px); }
.year-link:hover .year-dot { background:var(--accent-two); box-shadow:0 0 0 2px var(--accent-two),0 0 20px var(--accent-two); }
.year-link.active { color:var(--ink); transform:translateY(-5px); }
.year-link.active .year-dot { width:24px; height:24px; margin-top:7px; border-width:5px; background:var(--accent); box-shadow:0 0 0 2px var(--accent),0 0 28px var(--accent); }
.year-link.active .year-number { padding:4px 10px; border-radius:999px; background:var(--accent); color:#071013; font-size:17px; font-weight:900; }
.countdown { max-width:960px; margin-inline:auto; opacity:1; transform:translateY(0); transition:opacity .22s ease,transform .22s ease; }
.countdown.is-loading { opacity:.38; pointer-events:none; }
.countdown.is-entering { opacity:0; transform:translateY(12px); }
.countdown-head { display:grid; grid-template-columns:260px 1fr; gap:38px; align-items:center; margin-bottom:45px; }.countdown-head img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:18px; box-shadow:0 25px 60px #0009; }.countdown h2 { margin:0 0 14px; font-size:clamp(34px,5vw,62px); line-height:1; letter-spacing:-.045em; }.countdown-head p { color:var(--muted); }
.mixcloud-players { display:grid; gap:14px; margin:-16px 0 38px; }.mixcloud-player { padding:16px 18px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); animation:player-in .2s ease; }.mixcloud-player iframe { display:block; border-radius:8px; background:#080a0e; }.player-label { margin-bottom:10px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }@keyframes player-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.native-audio-player { margin:-16px 0 30px; padding:18px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:14px; background:linear-gradient(145deg,var(--accent-soft),var(--panel)); }.native-audio-player audio { display:block; width:100%; height:54px; accent-color:var(--accent); }
.chart { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }.chart li { display:grid; grid-template-columns:70px 1fr; gap:18px; padding:19px 10px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 34%,transparent),transparent); transition:.2s; }.chart li:nth-child(even) { background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 22%,transparent),color-mix(in srgb,var(--panel) 52%,transparent),transparent); }.chart li:hover { background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 48%,var(--panel)),var(--panel),transparent); transform:translateX(5px); }.position { color:var(--accent-two); font-size:25px; font-weight:900; }.chart strong,.chart small { display:block; }.chart small { color:var(--muted); margin-top:2px; }.empty { padding:35px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.chart li[hidden],.number-one-artwork[hidden] { display:none; }
.chart .special-mention { grid-template-columns:112px 1fr; border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line)); border-radius:12px; margin:0 0 18px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 62%,var(--panel)),var(--panel),transparent); }.special-mention-label { align-self:center; color:var(--accent); font-size:11px; line-height:1.15; letter-spacing:.13em; text-transform:uppercase; }.chart .special-mention:hover { background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 82%,var(--panel)),var(--panel),transparent); }
.number-one-reveal { display:flex; justify-content:center; padding:26px 0 4px; }.number-one-reveal-button { color:var(--ink); border:1px solid color-mix(in srgb,var(--accent) 65%,var(--line)); background:linear-gradient(135deg,var(--accent-soft),var(--panel)); box-shadow:0 0 30px var(--glow-one); }.number-one-reveal-button:hover { color:#fff; border-color:var(--accent); }
.number-one-artwork { margin:clamp(1.5rem,3vw,2.5rem) auto 0; text-align:center; }.number-one-artwork img { display:block; width:min(620px,100%); aspect-ratio:1; object-fit:cover; margin:.5rem auto 0; border-radius:24px; box-shadow:0 28px 80px #0009; }.number-one-artwork figcaption { margin-top:1.25rem; font-size:clamp(1.15rem,2.5vw,1.65rem); font-weight:800; }.number-one-artwork figcaption span { color:var(--muted); font-weight:500; }.number-one-play { display:flex; align-items:center; justify-content:center; width:fit-content; min-width:180px; margin:1.25rem auto 0; color:#fff; text-align:center; background:#e32636; box-shadow:0 12px 30px #e3263655; }.number-one-play:hover { color:#fff; background:#ff3043; box-shadow:0 15px 38px #e3263677; }
.site-footer { border-top:1px solid var(--line); background:linear-gradient(145deg,#0d1118,#080a0e); }
.footer { display:flex; align-items:flex-end; justify-content:space-between; padding-block:52px; color:var(--muted); }.footer-brand { display:inline-block; color:var(--ink); font-size:28px; font-weight:950; letter-spacing:-1.4px; }.footer p { margin:8px 0 2px; color:var(--ink); }.footer small { color:var(--muted); }.admin-link { padding:7px 0; }
@media (max-width:760px) { .wrap{width:min(100% - 24px,1180px)} .nav{height:74px}.nav-links>a:not(.button):not(.live-button){display:none}.nav-links{gap:8px}.live-button{padding:9px 12px;font-size:13px}.main-content{padding-block:20px 48px}.timeline-section{margin-bottom:40px}.year-list{padding-inline:max(42%,calc(50% - 39px))}.year-link{flex-basis:78px}.countdown-head{grid-template-columns:100px 1fr;gap:20px;align-items:start}.countdown h2{font-size:32px}.countdown-head p{grid-column:1/-1}.actions{flex-wrap:wrap}.chart li{grid-template-columns:46px 1fr}.chart .special-mention{grid-template-columns:82px 1fr}.footer{align-items:flex-start;flex-direction:column;gap:28px;padding-block:38px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.countdown,.year-link,.year-dot{transition:none}.live-dot{animation:none} }