:root{
  --black:#000000;
  --black-2:#080809;
  --white:#ffffff;
  --silver:#c8ccd4;
  --silver-dim:#6b6f78;
  --hairline:rgba(200,204,212,.22);
  --fringe-red:#ff2b4d;
  --fringe-cyan:#2bd8ff;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{
  background:var(--black);
  color:var(--white);
  font-family:"Red Hat Mono", ui-monospace, monospace;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{ min-height:100vh }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
:focus-visible{ outline:2px solid var(--fringe-cyan); outline-offset:3px }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ============ SOUND TOGGLE ============ */
.sound-toggle{
  position:fixed; top:18px; right:18px;
  z-index:150;
  font-family:"Red Hat Mono", monospace;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--silver-dim);
  border:1px solid var(--hairline);
  padding:9px 14px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:color .15s, border-color .15s;
}
.sound-toggle:hover{ color:var(--white); border-color:var(--silver) }
.sound-toggle.is-on{
  color:var(--white);
  border-color:var(--fringe-cyan);
  text-shadow:-1px 0 rgba(255,43,77,.6), 1px 0 rgba(43,216,255,.6);
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:70px 24px 90px;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(40,42,48,.5) 0%, transparent 60%),
    var(--black);
}
.eyebrow{
  font-family:"Red Hat Mono", monospace;
  font-size:11px;
  letter-spacing:5px;
  color:var(--silver-dim);
  text-transform:uppercase;
  margin-bottom:40px;
}

/* spinning diamond refresh icon */
.refresh-icon{
  position:relative;
  width:min(340px, 62vw);
  height:min(340px, 62vw);
  margin-bottom:34px;
}
.refresh-icon img{
  width:100%; height:100%; object-fit:contain;
  animation:icon-spin 9s linear infinite;
  filter:drop-shadow(0 0 30px rgba(255,255,255,.18));
}
@keyframes icon-spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
.refresh-icon::after{
  content:"";
  position:absolute; inset:-6%;
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.5) 0%, transparent 22%);
  mix-blend-mode:screen;
  animation:glint 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glint{
  0%,100%{ opacity:0; transform:translate(-12%,-8%) }
  45%{ opacity:.9 }
  55%{ opacity:.9 }
  90%{ opacity:0; transform:translate(14%,10%) }
}

.hero-title{
  font-family:"Bodoni Moda", serif;
  font-weight:900;
  font-size:clamp(46px, 8.4vw, 124px);
  line-height:.96;
  letter-spacing:2px;
  color:var(--white);
  text-transform:uppercase;
}
.hero-title .line{ display:block }
.hero-title .line-2{
  font-weight:400;
  font-style:italic;
  font-size:.62em;
  letter-spacing:1px;
  color:var(--silver);
}
/* chromatic fringe */
.fringe{
  position:relative;
  text-shadow:
    -3px 0 rgba(255,43,77,.55),
    3px 0 rgba(43,216,255,.55);
  animation:fringe-jitter 5.5s steps(1) infinite;
}
@keyframes fringe-jitter{
  0%,90%,100%{ text-shadow:-3px 0 rgba(255,43,77,.55), 3px 0 rgba(43,216,255,.55) }
  92%{ text-shadow:-7px 1px rgba(255,43,77,.7), 6px -1px rgba(43,216,255,.7) }
  94%{ text-shadow:-2px 0 rgba(255,43,77,.5), 9px 0 rgba(43,216,255,.6) }
  96%{ text-shadow:-9px -1px rgba(255,43,77,.7), 2px 1px rgba(43,216,255,.5) }
}

/* live existence counter */
.counter-wrap{
  margin-top:46px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.counter-label{
  font-family:"Red Hat Mono", monospace;
  font-size:11px;
  letter-spacing:4px;
  color:var(--silver-dim);
  text-transform:uppercase;
}
.counter{
  font-family:"Red Hat Mono", monospace;
  font-weight:700;
  font-size:clamp(34px, 6vw, 64px);
  letter-spacing:4px;
  color:var(--white);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(255,255,255,.25);
}
.counter.is-reset{
  color:var(--fringe-red);
  text-shadow:0 0 24px rgba(255,43,77,.6);
}

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:"Red Hat Mono", monospace;
  font-size:10px; letter-spacing:4px;
  color:var(--silver-dim);
  text-transform:uppercase;
  animation:cue 2s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ opacity:.4; transform:translateX(-50%) translateY(0) } 50%{ opacity:1; transform:translateX(-50%) translateY(5px) } }

/* ============ BACKRONYM ============ */
.backronym{
  max-width:880px;
  margin:0 auto;
  padding:110px 24px 90px;
}
.section-mark{
  font-family:"Red Hat Mono", monospace;
  font-size:11px; letter-spacing:5px;
  color:var(--silver-dim);
  text-transform:uppercase;
  margin-bottom:34px;
  text-align:center;
}
.acronym-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:28px;
  align-items:baseline;
  padding:26px 0;
  border-top:1px solid var(--hairline);
}
.acronym-row:last-child{ border-bottom:1px solid var(--hairline) }
.acronym-letter{
  font-family:"Bodoni Moda", serif;
  font-weight:900;
  font-size:clamp(46px, 7vw, 84px);
  line-height:.8;
  color:var(--white);
}
.acronym-word{
  font-family:"Bodoni Moda", serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(20px, 3vw, 34px);
  color:var(--silver);
}
.acronym-word b{
  font-style:normal;
  font-weight:700;
  color:var(--white);
}

/* ============ HANDS BANNER ============ */
.banner{
  position:relative;
  width:100%;
  overflow:hidden;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.banner img{
  width:100%; height:auto; display:block;
  opacity:.92;
}
.banner::after{
  content:"DON'T REFRESH";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:"Bodoni Moda", serif;
  font-weight:900; font-style:italic;
  font-size:clamp(28px, 6vw, 90px);
  letter-spacing:3px;
  color:var(--white);
  text-shadow:-3px 0 rgba(255,43,77,.6), 3px 0 rgba(43,216,255,.6), 0 0 40px rgba(0,0,0,.9);
  white-space:nowrap;
  pointer-events:none;
}

/* ============ TRACKLIST ============ */
.tracklist-sec{
  max-width:880px;
  margin:0 auto;
  padding:110px 24px 90px;
}
.ca-bar{
  display:flex; align-items:center; gap:18px;
  border:1px solid var(--hairline);
  padding:18px 22px;
  margin-bottom:60px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.ca-bar .ca-tag{
  font-family:"Red Hat Mono", monospace;
  font-size:10px; letter-spacing:3px;
  color:var(--silver-dim);
  text-transform:uppercase;
  white-space:nowrap;
}
.ca-bar .ca-text{
  flex:1; min-width:0;
  font-family:"Red Hat Mono", monospace;
  font-size:13px;
  letter-spacing:.5px;
  color:var(--white);
  word-break:break-all;
}
.ca-bar .ca-copy{
  font-family:"Bodoni Moda", serif;
  font-style:italic;
  font-size:15px;
  color:var(--silver);
  white-space:nowrap;
  border-bottom:1px solid var(--silver-dim);
  padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.ca-bar .ca-copy:hover{ color:var(--white); border-color:var(--white) }
.ca-bar .ca-copy.is-copied{ color:var(--fringe-cyan); border-color:var(--fringe-cyan) }

.tracklist{ list-style:none }
.track{
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:24px;
  align-items:baseline;
  padding:24px 8px;
  border-top:1px solid var(--hairline);
  transition:background .18s, padding-left .18s;
}
.track:last-child{ border-bottom:1px solid var(--hairline) }
.track:hover{ background:rgba(255,255,255,.04); padding-left:18px }
.track-num{
  font-family:"Red Hat Mono", monospace;
  font-size:13px;
  color:var(--silver-dim);
  font-variant-numeric:tabular-nums;
}
.track:hover .track-num{ color:var(--fringe-cyan) }
.track-title{
  font-family:"Bodoni Moda", serif;
  font-weight:700;
  font-size:clamp(22px, 3.4vw, 38px);
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:1px;
}
.track-meta{
  font-family:"Red Hat Mono", monospace;
  font-size:11px;
  letter-spacing:2px;
  color:var(--silver-dim);
  text-transform:uppercase;
}
.track.disabled{ opacity:.4; cursor:not-allowed }
.track.disabled:hover{ background:none; padding-left:8px }

/* the forbidden refresh button */
.refresh-zone{
  margin-top:70px;
  text-align:center;
}
.refresh-warn{
  font-family:"Red Hat Mono", monospace;
  font-size:11px; letter-spacing:3px;
  color:var(--silver-dim);
  text-transform:uppercase;
  margin-bottom:18px;
}
.refresh-btn{
  font-family:"Bodoni Moda", serif;
  font-weight:900;
  font-style:italic;
  font-size:clamp(26px, 4vw, 44px);
  letter-spacing:2px;
  color:var(--silver-dim);
  text-transform:uppercase;
  border:1px solid var(--hairline);
  padding:18px 50px;
  transition:color .15s, border-color .15s, transform .08s;
}
.refresh-btn:hover{
  color:var(--fringe-red);
  border-color:var(--fringe-red);
  animation:btn-shake .32s linear infinite;
}
@keyframes btn-shake{
  0%,100%{ transform:translate(0,0) }
  25%{ transform:translate(-2px,1px) }
  50%{ transform:translate(2px,-1px) }
  75%{ transform:translate(-1px,-1px) }
}
.refresh-btn.is-armed{
  color:var(--fringe-red);
  border-color:var(--fringe-red);
  text-shadow:-2px 0 rgba(255,43,77,.6), 2px 0 rgba(43,216,255,.6);
}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--hairline);
  padding:50px 24px 40px;
  text-align:center;
}
.foot-icon{
  width:46px; height:46px;
  margin:0 auto 20px;
  opacity:.7;
  animation:icon-spin 9s linear infinite;
}
.foot-copy{
  font-family:"Red Hat Mono", monospace;
  font-size:10px;
  letter-spacing:3px;
  color:var(--silver-dim);
  text-transform:uppercase;
  line-height:1.8;
}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(40px);
  background:var(--black-2);
  color:var(--white);
  border:1px solid var(--silver);
  padding:13px 24px;
  font-family:"Red Hat Mono", monospace;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:0;
  transition:transform .25s, opacity .25s;
  z-index:200;
  pointer-events:none;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ============ RESPONSIVE ============ */
@media (max-width:720px){
  .hero{ padding:54px 18px 80px }
  .eyebrow{ margin-bottom:28px }
  .refresh-icon{ margin-bottom:26px }
  .counter-wrap{ margin-top:32px }
  .backronym, .tracklist-sec{ padding:70px 20px 60px }
  .acronym-row{ grid-template-columns:60px 1fr; gap:16px; padding:18px 0 }
  .ca-bar{ flex-wrap:wrap; gap:10px }
  .ca-bar .ca-text{ flex-basis:100%; font-size:11px }
  .track{ grid-template-columns:38px 1fr; gap:14px }
  .track-meta{ grid-column:2; }
  .banner::after{ font-size:28px }
  .refresh-btn{ padding:14px 32px }
  .sound-toggle{ top:12px; right:12px; font-size:9px; padding:7px 10px }
}

@media (prefers-reduced-motion: reduce){
  .refresh-icon img, .foot-icon{ animation:none }
  .refresh-icon::after, .fringe, .scroll-cue{ animation:none }
  .refresh-btn:hover{ animation:none }
}