:root {
  --blue: #ff3d5d;
  --blue-strong: #b90f2d;
  --blue-pale: #ffd0d8;
  --bg: #050102;
  --glass: rgba(17, 4, 7, .72);
  --border: rgba(255, 126, 146, .25);
  --text: #fff6f7;
  --muted: #d6a8b1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  cursor: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
}

body {
  min-height: 100vh;
  background: #070203;
}

button, input { font: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bg-shade {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(30, 135, 195, .08), transparent 30%),
    linear-gradient(180deg, rgba(2, 7, 14, .26), rgba(2, 8, 18, .66)),
    rgba(1, 7, 13, .2);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .045;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0, rgba(255,255,255,.22) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: soft-light;
}

#particles {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cursor-ring, .cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(120, 216, 255, .85);
  box-shadow: 0 0 22px rgba(120, 216, 255, .78);
  transition: width .15s ease, height .15s ease, border-color .15s ease;
}

.cursor-dot {
  width: 5px;
  height: 5px;
  background: #fff;
  box-shadow: 0 0 12px #fff;
}

.cursor-ring.big {
  width: 42px;
  height: 42px;
  border-color: #fff;
}

.enter-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at center, rgba(120, 216, 255, .18), transparent 28%),
    rgba(0, 0, 0, .88);
  backdrop-filter: blur(14px);
  transition: opacity .7s ease, visibility .7s ease;
}

.enter-screen.hidden { opacity: 0; visibility: hidden; }

.enter-box {
  width: min(88vw, 430px);
  padding: 30px 28px 25px;
  border: 1px solid rgba(120, 216, 255, .25);
  border-radius: 24px;
  outline: none;
  color: #fff;
  text-align: center;
  background: rgba(7, 16, 28, .58);
  box-shadow: 0 0 45px rgba(42, 168, 255, .22);
  backdrop-filter: blur(16px);
  animation: pulseIn 1s ease;
}

.enter-box:focus-visible { border-color: rgba(255,255,255,.8); }
.enter-box:disabled { opacity: 1; }
.enter-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .2em;
}

.enter-box h2 {
  margin-bottom: 14px;
  font-size: clamp(42px, 8vw, 64px);
  line-height: 1;
  text-shadow: 0 0 24px rgba(120, 216, 255, .78);
}

.loading-text {
  min-height: 20px;
  margin-bottom: 15px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .5px;
}

.loading-bar {
  width: 100%;
  height: 9px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(120, 216, 255, .18);
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}

.loading-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--blue-strong), var(--blue-pale));
  box-shadow: 0 0 18px rgba(120, 216, 255, .75);
  transition: width .25s ease;
}

.enter-box p { color: #fff; font-size: 13px; opacity: 0; transition: opacity .35s ease; }
.enter-box.ready p { opacity: .85; }

.page {
  position: relative;
  z-index: 5;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .7s ease, transform .7s ease;
}

.page.show { opacity: 1; transform: scale(1); }

.hero {
  position: absolute;
  top: 41%;
  left: 50%;
  display: grid;
  width: min(92vw, 620px);
  place-items: center;
  gap: 12px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.pfp {
  position: relative;
  display: grid;
  width: clamp(122px, 16vw, 160px);
  height: clamp(122px, 16vw, 160px);
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 34px;
  background:
    radial-gradient(circle at 30% 25%, rgba(184, 236, 255, .26), transparent 30%),
    linear-gradient(145deg, rgba(44, 122, 166, .42), rgba(3, 13, 24, .95));
  box-shadow: 0 0 44px rgba(120, 216, 255, .62), inset 0 0 25px rgba(255,255,255,.08);
  animation: floatPfp 5.5s ease-in-out infinite;
}

.profile-img {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 33px;
  object-fit: cover;
}

.pfp-halo {
  position: absolute;
  top: -28px;
  left: 50%;
  z-index: 4;
  width: 78px;
  height: 20px;
  border: 3px solid rgba(211, 246, 255, .9);
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(120, 216, 255, .75), inset 0 0 9px rgba(120, 216, 255, .45);
  transform: translateX(-50%) rotate(-7deg);
  animation: haloFloat 4.8s ease-in-out infinite;
}

.pfp-shine {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: 34px;
  pointer-events: none;
}

.pfp-shine::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-120%) rotate(12deg);
  animation: pfpShine 5.2s ease-in-out infinite;
}

h1 {
  font-size: clamp(62px, 10vw, 112px);
  line-height: .9;
  letter-spacing: -4px;
  text-shadow: 0 0 26px rgba(120, 216, 255, .9), 0 0 70px rgba(42, 168, 255, .36);
}

.badge {
  padding: 7px 14px;
  border: 1px solid rgba(120, 216, 255, .27);
  border-radius: 999px;
  color: #eafaff;
  font-size: 12px;
  background: rgba(120, 216, 255, .11);
  box-shadow: inset 0 0 14px rgba(120, 216, 255, .08);
  backdrop-filter: blur(12px);
}

.trust-stats {
  display: flex;
  gap: 9px;
  margin-top: 2px;
}

.stat {
  min-width: 128px;
  padding: 9px 16px;
  border: 1px solid rgba(180, 235, 255, .23);
  border-radius: 15px;
  background: rgba(7, 16, 28, .66);
  box-shadow: inset 0 0 18px rgba(120, 216, 255, .045);
  backdrop-filter: blur(14px);
}

.stat strong, .stat span { display: block; }
.stat strong { font-size: 18px; text-shadow: 0 0 14px rgba(120, 216, 255, .62); }
.stat span { margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.social-grid {
  position: fixed;
  bottom: 118px;
  left: 50%;
  z-index: 6;
  display: flex;
  width: min(90vw, 760px);
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  transform: translateX(-50%);
}

.social {
  position: relative;
  display: flex;
  min-width: 138px;
  min-height: 56px;
  padding: 0 23px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(180, 235, 255, .26);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background: rgba(7, 16, 28, .7);
  backdrop-filter: blur(16px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.social::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(120,216,255,.18), transparent);
  transform: translateX(-120%);
  transition: transform .32s ease;
}

.social:hover::before, .social:focus-visible::before { transform: translateX(120%); }
.social:hover, .social:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(120, 216, 255, .55);
  outline: none;
  background: rgba(120, 216, 255, .145);
  box-shadow: 0 0 30px rgba(42, 168, 255, .22);
}
.social strong { position: relative; z-index: 1; font-size: 15px; }

.music-bar {
  position: fixed;
  bottom: 35px;
  left: 50%;
  z-index: 6;
  display: flex;
  width: min(88vw, 500px);
  padding: 11px 14px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(180, 235, 255, .26);
  border-radius: 999px;
  background: rgba(7, 16, 28, .76);
  box-shadow: 0 0 34px rgba(42, 168, 255, .15);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.music-btn {
  position: relative;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  box-shadow: 0 0 22px rgba(120,216,255,.45);
}

.music-btn span {
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
  transform: translate(-50%, -50%);
}

body.playing .music-btn span {
  left: 50%;
  width: 10px;
  height: 12px;
  border: 0;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}

.volume-wrap { display: flex; width: 85px; align-items: center; gap: 6px; }
.volume-btn { border: 0; color: var(--muted); font-size: 8px; letter-spacing: .08em; background: transparent; }
.volume-slider { width: 58px; height: 3px; accent-color: var(--blue); }
.music-info { min-width: 0; flex: 1; text-align: left; }
.music-info span, .music-info strong, .music-info small { display: block; }
.music-info span { margin-bottom: 2px; color: var(--blue); font-size: 7px; letter-spacing: .14em; }
.music-info strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.music-info small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.visualizer { display: flex; height: 28px; align-items: end; gap: 3px; }
.visualizer i {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue-pale);
  box-shadow: 0 0 12px rgba(120,216,255,.8);
}
body.playing .visualizer i { animation: equalize 1.2s ease-in-out infinite; }
.visualizer i:nth-child(2) { animation-delay: .15s; }
.visualizer i:nth-child(3) { animation-delay: .3s; }
.visualizer i:nth-child(4) { animation-delay: .45s; }

@keyframes pulseIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes floatPfp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes haloFloat { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-7deg); } 50% { transform: translateX(-50%) translateY(-4px) rotate(-7deg); } }
@keyframes pfpShine { 0%,58%,100% { transform: translateX(-120%) rotate(12deg); } 74% { transform: translateX(120%) rotate(12deg); } }
@keyframes equalize { 0%,100% { height: 8px; opacity: .55; } 50% { height: 25px; opacity: 1; } }

@media (max-width: 700px) {
  .hero { top: 37%; gap: 9px; }
  .pfp { width: 118px; height: 118px; border-radius: 28px; }
  .pfp-shine { border-radius: 28px; }
  .pfp-letter { font-size: 72px; }
  h1 { font-size: 66px; letter-spacing: -2px; }
  .trust-stats { gap: 7px; }
  .stat { min-width: 115px; padding: 7px 12px; }
  .stat strong { font-size: 16px; }
  .social-grid { bottom: 104px; width: min(92vw, 410px); gap: 8px; }
  .social { min-width: calc(50% - 4px); min-height: 46px; padding: 0 12px; }
  .social strong { font-size: 13px; }
  .music-bar { bottom: 24px; width: min(92vw, 480px); }
  .volume-wrap { display: none; }
}

@media (max-height: 720px) {
  .hero { top: 35%; transform: translate(-50%, -50%) scale(.82); }
  .social-grid { bottom: 92px; }
  .social { min-height: 44px; }
  .music-bar { bottom: 20px; padding-top: 8px; padding-bottom: 8px; }
}

@media (pointer: coarse) {
  * { cursor: auto; }
  .cursor-ring, .cursor-dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  #particles { display: none; }
}

/* Black and red theme */
.bg-shade {
  background:
    radial-gradient(circle at 50% 42%, rgba(190, 18, 49, .12), transparent 30%),
    linear-gradient(180deg, rgba(9, 1, 3, .26), rgba(12, 1, 3, .7)),
    rgba(4, 0, 1, .28);
}

.cursor-ring {
  border-color: rgba(255, 61, 93, .88);
  box-shadow: 0 0 22px rgba(255, 46, 80, .8);
}
.cursor-dot { background: #fff0f3; box-shadow: 0 0 12px #ff3d5d; }

.enter-screen {
  background:
    radial-gradient(circle at center, rgba(211, 20, 55, .2), transparent 28%),
    rgba(0, 0, 0, .9);
}
.enter-box {
  border-color: rgba(255, 79, 108, .3);
  background: rgba(17, 4, 7, .68);
  box-shadow: 0 0 45px rgba(190, 15, 48, .28);
}
.enter-box h2 { text-shadow: 0 0 24px rgba(255, 61, 93, .82); }
.loading-bar { border-color: rgba(255, 82, 109, .22); }
.loading-fill { box-shadow: 0 0 18px rgba(255, 53, 86, .78); }

.pfp {
  border-color: rgba(255, 219, 225, .72);
  background: linear-gradient(145deg, rgba(115, 13, 31, .42), rgba(13, 2, 4, .96));
  box-shadow: 0 0 44px rgba(229, 23, 57, .58), inset 0 0 25px rgba(255,255,255,.07);
}
.pfp-halo {
  border-color: rgba(255, 218, 224, .9);
  box-shadow: 0 0 13px rgba(255, 55, 88, .76), inset 0 0 9px rgba(255, 61, 93, .46);
}
h1 { text-shadow: 0 0 26px rgba(255, 61, 93, .9), 0 0 70px rgba(190, 15, 47, .4); }
.badge {
  border-color: rgba(255, 79, 107, .3);
  color: #fff0f3;
  background: rgba(255, 48, 81, .12);
  box-shadow: inset 0 0 14px rgba(255, 61, 93, .1);
}
.stat {
  border-color: rgba(255, 130, 148, .24);
  background: rgba(17, 4, 7, .7);
  box-shadow: inset 0 0 18px rgba(255, 61, 93, .055);
}
.stat strong { text-shadow: 0 0 14px rgba(255, 61, 93, .68); }
.social {
  border-color: rgba(255, 129, 147, .28);
  background: rgba(17, 4, 7, .74);
}
.social::before { background: linear-gradient(110deg, transparent, rgba(255, 61, 93, .2), transparent); }
.social:hover, .social:focus-visible {
  border-color: rgba(255, 76, 105, .58);
  background: rgba(255, 48, 81, .15);
  box-shadow: 0 0 30px rgba(190, 15, 47, .28);
}
.music-bar {
  border-color: rgba(255, 128, 147, .28);
  background: rgba(17, 4, 7, .8);
  box-shadow: 0 0 34px rgba(190, 15, 47, .2);
}
.music-btn { box-shadow: 0 0 22px rgba(255, 61, 93, .5); }
.visualizer i { box-shadow: 0 0 12px rgba(255, 61, 93, .82); }

@media (max-width: 700px) {
  .profile-img { border-radius: 27px; }
}