/* =========================================
   1. FONTS & RESETS
   ========================================= */
@font-face {
  font-family: 'Nippo';
  src: url('/files/fonts/Nippo-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Nippo';
  src: url('/files/fonts/Nippo-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Nippo';
  src: url('/files/fonts/Nippo-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

/* Optional fallback */
@font-face {
  font-family: 'Nippo';
  src: url('/files/fonts/Nippo-500.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  background: #0d0d0d;
  color: white;
  margin: 0;
  font-family: 'Nippo', sans-serif;
  font-weight: 400;
  overflow-x: hidden; 
}

/* =========================================
   2. GENERAL TYPOGRAPHY & LAYOUT
   ========================================= */
h1, h2, .bio, .title {
  font-weight: 500;
}

.location {
  font-weight: 400;
  margin-bottom: 16px;
}

.name {
  margin-top: 1px;
  margin-bottom: 1px;
}

.name-logo {
  max-height: 100px;
  height: auto;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.verified-icon {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  margin-bottom: 3px;
  vertical-align: middle;
}

.subtext {
  font-weight: 600;
  font-size: 32px;
}

.tagline {
  font-weight: 400;
}

.tagline-extra {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  background: linear-gradient(90deg, #39c5bb, #7df9ff, #39c5bb);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s linear infinite;
  will-change: background-position;
}

.tagline-extra::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #39c5bb, #7df9ff, #39c5bb);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s linear infinite;
  filter: blur(8px);
  opacity: 0.6;
  pointer-events: none;
  will-change: background-position, filter;
}

@keyframes gradientShift {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 600px) {
  .tagline-extra::after {
    filter: blur(6px);
    opacity: 0.55;
  }
}

/* =========================================
   3. BANNER & BACKGROUND
   ========================================= */
.banner {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: hidden;
}

.banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(2, 9, 10, 0.08), rgba(57, 197, 187, 0.03), rgba(2, 9, 10, 0.12)),
    url('/files/miku-banner.jpg?v=16') no-repeat center 5%;
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%);
  -webkit-mask-position: bottom;
  mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
}

.banner-dropshadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, rgb(24, 24, 24) 99.5%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, rgb(24, 24, 24) 99.5%, transparent 100%);
  -webkit-mask-position: bottom;
  mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: black;
  filter: blur(16px);
  opacity: 0.2;
  transform: translateY(4px);
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: -100;
  pointer-events: none;
}

/* =========================================
   12. SONIC FRONTIERS UI (FINAL & FIXED)
   ========================================= */

:root {
  --cy-bg: #0a0a0a;       /* Deep Space Black */
  --cy-panel: #121212;    /* Metallic Dark Grey */
  --cy-white: #ffffff;    
  --cy-cyan: #00f0ff;     /* Cyberspace Accent */
  --cy-red: #ff3838;      /* Warning Accent */
  --cy-dim: rgba(255, 255, 255, 0.4);
}

/* --- 1. SEAMLESS TICKER --- */
.sf-ticker-container {
  position: relative;
  width: 100%;
  height: 34px;
  background: var(--cy-bg);
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  z-index: 9000;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.sf-ticker-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.3;
  pointer-events: none;
}

.sf-ticker-track {
  display: flex;
  width: fit-content;
  animation: ticker-scroll 30s linear infinite; 
}

.sf-ticker-item {
  color: var(--cy-white);
  font-family: 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 60px;
  display: flex;
  align-items: center;
}

/* Update the .sf-slash class and add specific colors */
.sf-slash {
  font-weight: 900;
  margin: 0 12px;
  font-style: italic;
  /* Removed fixed color so spans can control it */
}

.s-blue { 
  color: var(--cy-cyan); 
  text-shadow: 0 0 5px var(--cy-cyan); 
}

.s-yellow { 
  color: #fbc638; /* Sonic Ring Yellow */
  text-shadow: 0 0 5px #fbc638; 
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}


/* --- 2. FRONTIERS POPUP (Performance Optimized) --- */

.sf-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 999999; 
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  will-change: opacity; /* Optimization */
}

.sf-popup-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sf-popup-card {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: var(--cy-panel);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
  padding: 0;
  
  opacity: 0;
  transform: scale(0.95);
  will-change: transform, opacity, clip-path; /* Optimization */
}

/* Digital Noise Texture */
.sf-popup-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.sf-popup-overlay.active .sf-popup-card {
  opacity: 1;
  transform: scale(1);
  animation: glitch-intro 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes glitch-intro {
  0% { clip-path: inset(50% 0 50% 0); transform: scale(0.8) translateX(-10px); filter: invert(1); opacity: 0; }
  20% { clip-path: inset(0 0 0 0); transform: scale(1.05) translateX(5px); opacity: 1; }
  40% { clip-path: inset(10% 0 80% 0); transform: scale(0.98) translateX(-5px); filter: invert(0); }
  60% { clip-path: inset(40% 0 40% 0); transform: scale(1.02) translateX(5px); }
  80% { clip-path: inset(0 0 0 0); transform: scale(1) translateX(0); }
  100% { clip-path: inset(0 0 0 0); transform: scale(1); opacity: 1; }
}

/* CONTENT LAYOUT */
.sf-popup-inner {
  padding: 2.5rem 2.5rem 1rem 2.5rem; /* Increased side padding */
  position: relative;
  z-index: 2;
}

/* Header */
.sf-header-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
  margin-bottom: 1.5rem;
}

.sf-warning-icon {
  font-size: 1.2rem;
  color: var(--cy-red);
  margin-right: 12px;
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0%, 100% { text-shadow: 0 0 0 rgba(255, 56, 56, 0); }
  50% { text-shadow: 0 0 10px rgba(255, 56, 56, 0.8); }
}

.sf-title {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--cy-white);
  text-transform: uppercase;
}

/* Body Text */
.sf-body-text {
  color: #cccccc;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}

.sf-mono-small {
  font-family: 'Consolas', monospace;
  font-size: 0.75rem;
  color: var(--cy-dim);
  display: block;
  margin-bottom: 10px;
}

.sf-highlight {
  color: var(--cy-white);
  border-bottom: 1px solid var(--cy-cyan);
}

/* Close X */
.sf-close-abs {
  position: absolute;
  top: 12px; right: 12px;
  background: none; border: none;
  color: #666; font-size: 1.1rem; cursor: pointer;
  z-index: 10;
  transition: color 0.2s;
}
.sf-close-abs:hover { color: var(--cy-white); }


/* --- 3. EXACT CLONE OF EMAIL BUTTON (.cta-clone) --- */
/* This container pushes the button away from the bottom edge */
.sf-footer-row {
  margin-top: 2.5rem; /* Space between text and button */
  margin-bottom: 1rem; /* Space between button and bottom edge */
  display: flex;
  justify-content: flex-end; /* Align right */
}

/* Exact replica of .cta properties */
.cta-clone {
  display: inline-flex;
  padding: 8px 24px;
  font-size: 16px;
  color: white;
  background: #39c5bb;
  transition: 1s;
  box-shadow: 6px 6px 0 black;
  transform: skewX(-15deg);
  border: none;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-family: 'Nippo', sans-serif;
  text-transform: uppercase; /* Ensure uppercase */
}

.cta-clone:hover {
  transition: 0.5s;
  box-shadow: 10px 10px 0 #fbc638;
}

/* Inner elements logic copied exactly */
.cta-clone .icon {
  width: 18px;
  height: 18px;
  transform: skewX(15deg); /* Counter skew */
  margin-right: 8px;
  color: white;
  position: relative;
  top: -0.5px;
}

.cta-clone .span {
  transform: skewX(15deg); /* Counter skew */
  position: relative;
  top: -0.5px;
}

.cta-clone .second {
  transition: 0.5s;
  margin-right: 0px;
  width: 20px;
  margin-left: 10px;
  position: relative;
  top: 3px;
  transform: skewX(15deg); /* Counter skew */
}

.cta-clone:hover .second {
  transition: 0.5s;
  margin-right: 15px;
}

/* SVG Animations */
.one, .two, .three { fill: white; }
.cta-clone:hover .one, 
.cta-clone:hover .two, 
.cta-clone:hover .three { fill: white; } /* Keep white like email button? or change? Defaulting to white per email btn code */

/* Original animation values */
.one { transition: 0.4s; transform: translateX(-60%); }
.two { transition: 0.5s; transform: translateX(-30%); }

.cta-clone:hover .three { animation: color_anim 1s infinite 0.2s; }
.cta-clone:hover .one { transform: translateX(0%); animation: color_anim 1s infinite 0.6s; }
.cta-clone:hover .two { transform: translateX(0%); animation: color_anim 1s infinite 0.4s; }

/* The specific yellow flash animation */
@keyframes color_anim {
  0% { fill: white; }
  50% { fill: #fbc638; }
  100% { fill: white; }
}
/* =========================================
   4. PROFILE CARD
   ========================================= */
.profile-card {
  background: #1a1a1a;
  width: 90%;
  max-width: 850px;
  margin: -220px auto 2rem auto;
  padding: 2rem;
  border-radius: 2px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 2;
}

.avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin-top: -80px;
  margin-bottom: 12px;
  border: 2px solid #1a1a1a;
  background-color: #0d0d0d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  object-fit: cover;
}

.avatar-badge {
  position: relative;
  display: inline-block;
}

.verified-wrapper {
  position: absolute !important;
  right: 16px;
  bottom: 16px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.verified-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1a1a1a;
  z-index: -1;
}

.verified-icon {
  width: 30px;
  height: 30px;
  margin: 0 !important;
  display: block;
}

.verified-tooltip {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.avatar-badge:hover .verified-tooltip {
  visibility: visible;
  opacity: 1;
}

.location {
  font-size: 1rem;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.location-icon {
  width: 18px;
  height: 18px;
}

.bio {
  color: #39c5bb;
  margin: 0.5rem 0 1rem 0;
  font-size: 16px;
}

.tagline {
  margin-top: 1rem;
  color: white;
  line-height: 1.5;
  font-size: 1rem;
}

/* =========================================
   5. EMAIL BUTTON (CTA)
   ========================================= */
.cta {
  display: inline-flex;
  padding: 8px 24px;
  font-size: 16px;
  color: white;
  background: #39c5bb;
  transition: 1s;
  box-shadow: 6px 6px 0 black;
  transform: skewX(-15deg);
  border: none;
  cursor: pointer;
  margin: 1.5rem auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-family: 'Nippo', sans-serif;
}

.cta:hover {
  transition: 0.5s;
  box-shadow: 10px 10px 0 #fbc638;
}

.cta .second {
  transition: 0.5s;
  margin-right: 0px;
  width: 20px;
  margin-left: 10px;
  position: relative;
  top: 3px;
}

.cta:hover .second {
  transition: 0.5s;
  margin-right: 15px;
}

.span {
  transform: skewX(15deg);
  position: relative;
  top: -0.5px;
}

.one { transition: 0.4s; transform: translateX(-60%); }
.two { transition: 0.5s; transform: translateX(-30%); }

.cta:hover .three { animation: color_anim 1s infinite 0.2s; }
.cta:hover .one { transform: translateX(0%); animation: color_anim 1s infinite 0.6s; }
.cta:hover .two { transform: translateX(0%); animation: color_anim 1s infinite 0.4s; }

.cta img.icon {
  width: 18px;
  height: 18px;
  transform: skewX(15deg);
  margin-right: 8px;
  color: white;
  position: relative;
  top: -0.5px;
}

@keyframes color_anim {
  0% { fill: white; }
  50% { fill: #fbc638; }
  100% { fill: white; }
}

.inquiry-note {
  font-size: 0.85rem;
  color: #aaa;
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}
.inquiry-note a { color: #ccc; text-decoration: none; }
.inquiry-note a:hover { text-decoration: underline; }

/* =========================================
   6. SOCIAL CIRCLES
   ========================================= */
.socials-circles {
  display: flex;
  flex-wrap: wrap;
  padding: 0 12px;
  justify-content: center;
  gap: 0.5rem;
}

.socials-circles img {
  width: 42px;
  height: 42px;
  background: #222;
  padding: 4px;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s;
}

.socials-circles a:hover img {
  transform: scale(1.1);
  background: #39c5bb;
}

/* =========================================
   7. LINKS & SECTIONS
   ========================================= */
h2 {
  text-align: center;
  font-size: 1.5rem;
  color: #39c5bb;
  margin-bottom: 1rem;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.section { margin-bottom: 2.5rem; }

.link-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 2rem;
  row-gap: 2.25rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
  .link-text{
    margin-left: 10px !important;
  }
}

.link-card {
  background-color: #1a1a1a;
  border-radius: 2px;
  padding: 1.3rem 1rem 1.3rem 5rem;
  position: relative;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
  cursor: pointer;
  z-index: 2;
  text-decoration: none;
  color: inherit;
}

.link-card:hover { transform: none; }
.link-card.half { width: calc(50% - 1rem); }
.link-card.full { width: 100%; margin-bottom: 1rem; }

.link-icon {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #1f1f2f;
  padding: 5px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  z-index: 2;
  border-radius: 999px;
  object-fit: contain;
}

.link-text {
  margin-left: -0.75rem;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  .link-text {
    margin-left: 1rem;
  }
}

.title { font-weight: 600; font-size: 1rem; }
.subtext { font-size: 0.85rem; color: #999; margin-top: 4px; }

.link-arrow {
  width: 12px;
  height: auto;
  margin-left: auto;
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.link-card:hover .link-arrow { transform: translateX(6px); }

.footer {
  text-align: center;
  color: #999;
  padding: 2rem 1rem;
  font-size: 0.875rem;
}

/* =========================================
   8. GLOW RINGS & PULSE
   ========================================= */
.glow-ring {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin-left: 16px;
  transition: transform 0.3s ease;
}

.link-card:hover .glow-ring {
  transform: translate(-50%, calc(-50% - 6px));
}

.glow-ring::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  background: conic-gradient(#ff0000, #a30000); /* fallback */
  animation: spin 6s linear infinite;
  z-index: -1;
  filter: blur(6px);
  opacity: 0.7;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pulse-ring::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(65, 138, 255, 0.301);
  z-index: -2;
  animation: pulse 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  70% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.08; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

/* Gradients for Glow Rings */
.glow-ring.youtube::before { background: conic-gradient(#ff0000, #a30000); }
.glow-ring.discord::before { background: conic-gradient(#5865F2, #8b5cf6); }
.glow-ring.behance::before { background: conic-gradient(#1769ff, #0f3b7c); }
.glow-ring.spotify::before { background: conic-gradient(#1DB954, #065d37); }
.glow-ring.twitter::before { background: conic-gradient(#808080, #4d4d4d); }
.glow-ring.instagram::before { background: conic-gradient(#f09433, #bc1888); }
.glow-ring.twitch::before { background: conic-gradient(#9146FF, #4b00a9); }
.glow-ring.tiktok::before { background: conic-gradient(#69C9D0, #ee1d52); }
.glow-ring.bluesky::before { background: conic-gradient(#007aff, #0051a3); }
.glow-ring.ko-fi::before { background: conic-gradient(#73a4f2, #5a81bf); }
.glow-ring.card::before { background: conic-gradient(#6e68a9, #4c4875); }
.glow-ring.namemc::before { background: conic-gradient(#808080, #4d4d4d); }

/* Custom Channel Glow Rings */
.glow-ring.swiftblade::before {
  background: conic-gradient(
    #2f7cff,
    #5c2bff,
    #00d5ff,
    #2f7cff
  );
}

.glow-ring.miku::before {
  background: conic-gradient(
    #00e5d4,
    #32ff9c,
    #ffe14d,
    #ff3bd5,
    #00e5d4
  );
}

.glow-ring.oasis-music::before {
  background: conic-gradient(
    #b9e8ff,
    #79bfff,
    #ffffff,
    #8ad7ff,
    #b9e8ff
  );
}

.glow-ring.swift-studios::before {
  background: conic-gradient(
    #7b4dff,
    #b45cff,
    #ffffff,
    #6f7dff,
    #7b4dff
  );
}

/* Pulse Colors */
.glow-ring.youtube .pulse-ring { background: #ff0000; }
.glow-ring.discord .pulse-ring { background: #5865F2; }
.glow-ring.behance .pulse-ring { background: #1769ff; }
.glow-ring.spotify .pulse-ring { background: #1DB954; }
.glow-ring.twitter .pulse-ring { background: #1DA1F2; }
.glow-ring.instagram .pulse-ring { background: #f09433; }
.glow-ring.twitch .pulse-ring { background: #9146FF; }
.glow-ring.tiktok .pulse-ring { background: #69C9D0; }
.glow-ring.bluesky .pulse-ring { background: #007aff; }
.glow-ring.ko-fi .pulse-ring { background: #ff5e5b; }
.glow-ring.card .pulse-ring { background: #39c5bb; }
.glow-ring.namemc .pulse-ring { background: #00c3ff; }

/* =========================================
   9. TOP LOADER BAR
   ========================================= */
.top-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgb(44, 44, 44);
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 300ms ease-out;
}

body.loaded .top-loader {
  opacity: 0;
  transition: opacity 300ms ease-out 1s;
}

.top-loader .black_overlay {
  background: linear-gradient(87deg, rgb(0,0,0) 0%, rgba(0,0,0,0.14) 30%, rgba(0,0,0,0.14) 70%, rgb(0,0,0) 100%);
  position: absolute;
  inset: 0;
}

.top-loader .light {
  width: 900px;
  height: 100%;
  position: absolute;
  left: -30%;
  top: 0;
  background: linear-gradient(87deg, rgba(0,0,0,0) 0%, rgb(0,204,255) 40%, rgb(0,204,255) 60%, rgba(0,0,0,0) 100%);
  animation: loaderSweep 1s infinite ease-in-out;
  filter: drop-shadow(0 0 6px #00eaff);
}

.top-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #00ccff;
  filter: blur(8px);
  opacity: 0.4;
  pointer-events: none;
}

@keyframes loaderSweep {
  from { left: -30%; }
  to { left: 100%; }
}

@supports (padding: env(safe-area-inset-top)) {
  .top-loader { top: env(safe-area-inset-top, 0); }
}

/* =========================================
   10. SCROLLBARS
   ========================================= */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track { background: #0e0e0e; }
::-webkit-scrollbar-thumb {
  background: radial-gradient(circle, #ffd700 30%, #ffcc00 70%, #cc9900 100%);
  border-radius: 10px;
  border: 2px solid #0e0e0e;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0070ff, #00c3ff);
}
::-webkit-scrollbar-corner { background: #0e0e0e; }
* {
  scrollbar-width: thin;
  scrollbar-color: #1e90ff #0e0e0e;
}

/* =========================================
   11. RESPONSIVE MEDIA QUERIES (SITE CONTENT)
   ========================================= */
@media screen and (max-width: 600px) {
  .profile-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin-top: -60px;
    padding-left: 0;
    padding-right: 0;
  }
  .banner-curve { display: none; }
  .banner { height: 126px; }
  .banner-image {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .avatar {
    width: 130px;
    height: 130px;
    margin-top: -40px;
  }
  .name { font-size: 1.25rem; }
  .subtext { font-size: 1.15rem; }
  .tagline { font-size: 0.85rem; }
  .bio { font-size: 14px; }
  .location { font-size: 0.9rem; }
  .cta { font-size: 12px; padding: 5px 14px; box-shadow: 3px 3px 0 black; }
  .cta .second { width: 14px; margin-left: 5px; top: 1.5px; }
  .cta img.icon { width: 14px; height: 14px; margin-right: 5px; top: -0.5px; }
  .inquiry-note { font-size: 0.75rem; }
  
  .link-card { padding: 0.85rem 0.75rem 0.85rem 3.25rem; border-radius: 2px; }
  .link-card.half, .link-card.full { padding-left: 3.25rem; }
  .link-icon { width: 54px; height: 54px; margin-left: 32px; left: -32px; }
  .link-text { margin-left: -0.7rem; }
  .title { font-size: 0.9rem; }
  .subtext { font-size: 0.7rem; }
  .link-pair { column-gap: 1rem; row-gap: 1.5rem; }
  h2 { font-size: 1.25rem !important; margin-bottom: 0.75rem !important; }
  .link-card.half { width: 100%; }
  .link-arrow { width: 8px; }
  .verified-wrapper { right: 4px; bottom: 18px; width: 28px; height: 28px; }
  .verified-icon { width: 20px; height: 20px; }
  .glow-ring { margin-left: 20px; width: 54px; height: 54px; }
  .glow-ring::after { width: 54px; height: 54px; }
}

/* =======================================================
   SONIC LOADER & VISIBILITY LOGIC (FINAL)
   ======================================================= */

/* 1. SONIC LOADER STYLES */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* FIXED: Dark Blue Background */
  background: #0b1e3d; 
  pointer-events: auto;
}

/* --- PRESS START LOADER STATE --- */

/* 1. Base State (Standard Loading Text & Elements) */
.loading-text {
  transition: opacity 0.25s ease;
  opacity: 1;
}

/* Ensure Sonic and Rings transition smoothly */
.sonic-runner-container, 
.rings-container {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s;
}

/* Helper to hide text during the swap */
.loading-text.fade-out {
  opacity: 0;
}

/* 2. Interactive State (Click to Continue) */
.page-loader.wait-for-input .loading-text {
  cursor: pointer;
  /* Smoothly grow INTO this state */
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  /* Pulse Animation */
  animation: pulse-ready 0.6s infinite alternate;
  /* Colors & Shadows */
  background: linear-gradient(to bottom, #fcfc5a 50%, #fbc638 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 #39c5bb) drop-shadow(0 0 20px #fbc638);
}

/* 3. HIDE SONIC & RINGS WHEN WAITING */
.page-loader.wait-for-input .sonic-runner-container, 
.page-loader.wait-for-input .rings-container {
  opacity: 0;
  visibility: hidden;
}

/* Hide the dots specifically in this state */
.page-loader.wait-for-input .dots {
  display: none;
}

/* 4. The "Bigger" Animation */
@keyframes pulse-ready {
  0%   { transform: scale(1.2) skewX(-10deg); opacity: 1; }
  100% { transform: scale(1.3) skewX(-10deg); opacity: 0.9; }
}

/* --- MUSIC TOGGLE UI --- */
.music-toggle-ui {
  position: absolute;
  top: 90%; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 10005;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  font-family: 'Nippo', sans-serif;
  letter-spacing: 1px;
}

/* Show it only when waiting for input */
.page-loader.wait-for-input .music-toggle-ui {
  opacity: 1;
  visibility: visible;
}

/* Custom Checkbox Styling */
.cyber-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 0.9rem;
  user-select: none;
}

.cyber-checkbox-label input {
  display: none; /* Hide default browser checkbox */
}

/* The Box */
.cyber-box {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  background: transparent;
  display: inline-block;
  transition: 0.2s;
  box-shadow: 0 0 5px rgba(255,255,255,0.5);
}

/* Checked State (Gold Fill) */
.cyber-checkbox-label input:checked + .cyber-box {
  background: #fbc638;
  border-color: #fbc638;
  box-shadow: 0 0 10px #fbc638;
}

.cyber-checkbox-label:hover .cyber-box {
  transform: scale(1.1);
}

/* --- LAYERS --- */
.gen-layer { position: absolute; pointer-events: none; will-change: transform; }

/* 1. RED LAYER (Bottom Stack) */
.red-left {
  top: -30%; left: -55%; width: 90%; height: 160%; background: #e60012;
  transform: rotate(-6deg) translateX(-100%); transform-origin: top right;
  animation: slideRed 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; 
  z-index: 10;
}
.red-left::after {
  content: ''; position: absolute; top: 0; 
  /* FIXED: Changed from -30px to -29px to hide the seam line */
  right: -29px; 
  width: 30px; height: 100%;
  background: linear-gradient(135deg, #e60012 25%, transparent 25%) 0 -15px,
              linear-gradient(45deg, #e60012 25%, transparent 25%) 0 -15px;
  background-size: 30px 30px;
}
/* 2. BLUE LAYER & SHADOW */
.blue-shadow {
  top: -102.5%; left: -20%; width: 150%; height: 130%; 
  background: rgba(0,0,0,0.2); 
  transform: rotate(-4deg) translateY(-100%); transform-origin: bottom left;
  animation: slideBlue 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
  z-index: 20; 
}
.blue-shadow::after {
  content: ''; position: absolute; bottom: -30px; left: 0; width: 100%; height: 30px;
  background: linear-gradient(135deg, rgba(0,0,0,0.2) 25%, transparent 25%) -15px 0,
              linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%) -15px 0;
  background-size: 30px 30px;
}

.blue-top {
  top: -104%; left: -20%; width: 150%; height: 130%; background: #0028ff;
  transform: rotate(-4deg) translateY(-100%); transform-origin: bottom left;
  animation: slideBlue 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
  z-index: 21;
}
.blue-top::after {
  content: ''; position: absolute; 
  /* FIXED: Changed from -30px to -29px to hide the seam line */
  bottom: -29px; 
  left: 0; width: 100%; height: 30px;
  background: linear-gradient(135deg, #0028ff 25%, transparent 25%) -15px 0,
              linear-gradient(225deg, #0028ff 25%, transparent 25%) -15px 0;
  background-size: 30px 30px;
}

/* 3. YELLOW LAYER & SHADOW */
.yellow-shadow {
  bottom: -98.5%; left: -20%; width: 150%; height: 130%; 
  background: rgba(0,0,0,0.2);
  transform: rotate(-4deg) translateY(100%); transform-origin: top right;
  animation: slideYellow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; 
  z-index: 30; 
}
.yellow-shadow::after {
  content: ''; position: absolute; top: -30px; left: 0; width: 100%; height: 30px;
  background: linear-gradient(45deg, rgba(0,0,0,0.2) 25%, transparent 25%) -15px 0,
              linear-gradient(315deg, rgba(0,0,0,0.2) 25%, transparent 25%) -15px 0;
  background-size: 30px 30px;
}

.yellow-bottom {
  bottom: -100%; left: -20%; width: 150%; height: 130%; background: #fff200;
  transform: rotate(-4deg) translateY(100%); transform-origin: top right;
  animation: slideYellow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; 
  z-index: 31;
}
.yellow-bottom::after {
  content: ''; position: absolute; 
  /* FIXED: Changed from -30px to -29px to hide the seam line */
  top: -29px; 
  left: 0; width: 100%; height: 30px;
  background: linear-gradient(45deg, #fff200 25%, transparent 25%) -15px 0,
              linear-gradient(315deg, #fff200 25%, transparent 25%) -15px 0;
  background-size: 30px 30px;
}

@keyframes slideBlue { to { transform: rotate(-4deg) translateY(0); } }
@keyframes slideYellow { to { transform: rotate(-4deg) translateY(0); } }
@keyframes slideRed { to { transform: rotate(-6deg) translateX(0); } }


/* =========================================
   DECORATION STYLES
   ========================================= */
.decor-container { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.decor-cluster { position: absolute; }
.decor-shape { position: absolute; }
.decor-svg { position: absolute; display: block; filter: drop-shadow(5px 5px 0px rgba(0,0,0,0.2)); }

/* --- SHAPES --- */
.ring-striped {
  border-radius: 50%;
  -webkit-mask: radial-gradient(transparent 55%, black 55%);
  mask: radial-gradient(transparent 55%, black 55%);
  animation: spin-cw 20s linear infinite;
}
.ring-red-white { background: repeating-conic-gradient(#e60012 0% 5%, #ffffff 5% 10%); }
.ring-blue-yellow { background: repeating-conic-gradient(#0028ff 0% 5%, #fff200 5% 10%); }

.starburst {
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: pulse-spin 5s ease-in-out infinite alternate;
}
.sb-red { color: #e60012; }
.sb-blue { color: #0028ff; }

.circle-yellow { background: #fff200; border-radius: 50%; border: 4px solid #e60012; }

/* New: Striped Bar */
.bar-striped {
  background: repeating-linear-gradient(45deg, #fff200, #fff200 10px, transparent 10px, transparent 20px);
  border: 2px solid #fff200;
}
/* New: Halftone Pattern */
.halftone-circle {
  background-image: radial-gradient(circle, #ffffff 2px, transparent 2.5px);
  background-size: 10px 10px;
  border-radius: 50%;
  opacity: 0.4;
}

/* Animations */
.spin-fast { animation: spin-cw 8s linear infinite; }
.spin-rev { animation: spin-ccw 15s linear infinite; }
.pulse { animation: pulse-scale 2s ease-in-out infinite alternate; }
.float-slow { animation: float 6s ease-in-out infinite; }

@keyframes spin-cw { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }
@keyframes pulse-scale { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }

/* --- CLUSTER POSITIONS --- */

/* 1. TOP LEFT (Maximalist) */
.decor-tl {
  top: 0; left: 0; width: 80%; height: 80%; 
  transform: translateY(-100%);
  animation: slideDownDecor 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.tl-bar { width: 400px; height: 40px; top: 80px; left: -50px; transform: rotate(-15deg); z-index: -1; }
.tl-circ-bg { width: 300px; height: 300px; top: 70px; left: -50px; border: 2px dashed #fff; border-radius: 50%; opacity: 0.3; animation: spin-cw 40s linear infinite; }

.tl-ring { width: 180px; height: 180px; top: -20px; left: 20px; } 
.tl-ring-big-2 { width: 220px; height: 220px; top: 180px; left: -40px; animation-direction: reverse; opacity: 0.6;} 
.tl-gear { width: 150px; height: 150px; top: 100px; left: 220px; fill: #fff200; opacity: 0.9; } 
.tl-sb { width: 120px; height: 120px; top: 300px; left: 80px; } 
.tl-circ-solid { width: 80px; height: 80px; top: 40px; left: 350px; } 
.tl-gear-small { width: 70px; height: 70px; top: 250px; left: 300px; fill: #e60012; } 
.tl-tiny-star-1 { width: 40px; height: 40px; top: 150px; left: 150px; fill: #fff; } 
.tl-tiny-star-2 { width: 30px; height: 30px; top: 50px; left: 250px; fill: #fff200; } 
.tl-tri-1 { width: 40px; height: 40px; top: 350px; left: 220px; background: #fff; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: rotate(15deg); }
.tl-sq-1 { width: 25px; height: 25px; top: 200px; left: 400px; background: #0028ff; transform: rotate(45deg); }


/* 2. TOP RIGHT (Maximalist) */
.decor-tr {
  top: 0; right: 0; width: 60%; height: 60%;
  transform: translateY(-100%);
  animation: slideDownDecor 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tr-ring-giant {
  width: 450px; height: 450px; top: -200px; right: -140px; 
  fill: none; stroke: #fff200; stroke-width: 35px; z-index: 5; 
  transform: translateY(-100%);
  animation: slideDownDecor 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tr-halftone { width: 250px; height: 250px; top: 50px; right: 50px; z-index: -1; }
.tr-chev-1 { width: 40px; height: 40px; top: 100px; right: 280px; fill: #e60012; transform: rotate(45deg); opacity: 0.6; }
.tr-chev-2 { width: 30px; height: 30px; top: 120px; right: 310px; fill: #e60012; transform: rotate(45deg); opacity: 0.4; }

.tr-arrow { width: 140px; height: 140px; top: 60px; right: 160px; fill: #e60012; transform: rotate(45deg); }
.tr-sb { width: 120px; height: 120px; top: 150px; right: -10px; }
.tr-gear { width: 150px; height: 150px; top: -30px; right: 200px; fill: #fff200; }
.tr-arrow-small { width: 80px; height: 80px; top: 20px; right: 80px; fill: #ffffff; transform: rotate(45deg); opacity: 0.8; }
.tr-ring-small { width: 90px; height: 90px; top: 200px; right: 120px; }
.tr-gear-bg { width: 200px; height: 200px; top: 100px; right: -50px; fill: #ffffff; opacity: 0.8; }

/* 3. BOTTOM RIGHT (Maximalist) */
.decor-br {
  bottom: 0; right: 0; width: 60%; height: 60%;
  transform: translateY(100%);
  animation: slideUpDecor 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.br-inner-ring { width: 120px; height: 120px; bottom: 210px; right: 180px; border: 4px solid #fff; border-radius: 50%; }
.br-tri-1 { width: 40px; height: 40px; bottom: 150px; right: 350px; fill: #e60012; transform: rotate(-15deg); }

.br-ring-giant { width: 450px; height: 450px; bottom: -100px; right: -100px; fill: none; stroke: #e60012; stroke-width: 35px; }
.br-circ { width: 180px; height: 180px; bottom: 180px; right: 150px; }
.br-star { width: 150px; height: 150px; bottom: 80px; right: 300px; fill: #ffffff; }
.br-gear { width: 250px; height: 250px; bottom: 20px; right: 20px; fill: #ffffff; opacity: 0.8; }


/* 4. BOTTOM LEFT (Maximalist) */
.decor-bl {
  bottom: 0; left: 0; width: 50%; height: 50%;
  transform: translateX(-100%);
  animation: slideRightDecor 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.bl-square-bg { width: 160px; height: 160px; bottom: -20px; left: -20px; background: #0028ff; transform: rotate(45deg); z-index: -1; }
.bl-inner-gear { width: 80px; height: 80px; bottom: 10px; left: 10px; fill: #fff200; animation: spin-cw 6s linear infinite; }

.bl-ring { width: 180px; height: 180px; bottom: -40px; left: -40px; }
.bl-gear { width: 140px; height: 140px; bottom: 120px; left: 60px; fill: #e60012; }
.bl-sb { width: 100px; height: 100px; bottom: 40px; left: 180px; }


/* Entry Animations */
@keyframes slideDownDecor { to { transform: translateY(0); } }
@keyframes slideUpDecor { to { transform: translateY(0); } }
@keyframes slideRightDecor { to { transform: translateX(0); } }


/* Content Container */
.loader-content {
  position: relative;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px; 
}

/* Sonic Runner */
.sonic-runner {
  height: 50px; 
  width: auto;
  object-fit: contain;
}

/* MIDDLE: Text with Dots */
.loading-text {
  font-family: 'Nippo', sans-serif;
  font-size: 2rem;
  letter-spacing: 1px;
  font-weight: 600; /* Nice and bold */
  margin: 0;
  min-width: 280px;
  text-align: center;

  /* 1. The Sonic "Speed" slant */
  font-style: italic;
  transform: skewX(-1deg);

  text-shadow: none;

  /* 2. The Yellow Half-and-Half Gradient */
  background: linear-gradient(to bottom, #fcfc5a 50%, #fbc638 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 3. The Closer Blue Drop Shadow */
  filter: drop-shadow(2px 2px 0 #39c5bb);
}

.loading-text .dots {
  display: inline-block;
  width: 50px;
  text-align: left;
}

.loading-text .dots::after {
  content: '';
  animation: dots-cycle 1.5s infinite steps(4);
}

@keyframes dots-cycle {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* BOTTOM: Ring GIFs */
.rings-container {
  display: flex;
  gap: 4px;
}

.sonic-ring-gif {
  width: 40px; 
  height: 40px;
  object-fit: contain;
}

/* Wiping Panels */
.panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  will-change: transform;
}
.yellow-panel { background: #fbc638; z-index: 10002; }
.blue-panel   { background: #39c5bb; z-index: 10003; }

/* Panel Animations */
.page-loader.start-wipe .yellow-panel {
  animation: wipe-move 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.page-loader.start-wipe .blue-panel {
  animation: wipe-move 1.2s cubic-bezier(0.7, 0, 0.3, 1) 0.15s forwards; 
}

@keyframes wipe-move {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* =======================================================
   FIXED TRANSITION LOGIC
   ======================================================= */

/* When reveal-underneath starts:
   1. Make the main loader container transparent so the body background shows through immediately.
   2. Fade out all the decorations and layers smoothly under the panels.
   3. EXCLUDE the panels (.panel) so they remain visible during the wipe.
*/
.page-loader.reveal-underneath {
    background: transparent !important;
}

.page-loader.reveal-underneath .gen-layer,
.page-loader.reveal-underneath .decor-container,
.page-loader.reveal-underneath > .decor-svg, /* Target the giant ring */
.page-loader.reveal-underneath .loader-content {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease-out; /* Smooth fade out */
}

.page-loader.finished { display: none; }


/* 2. VISIBILITY FIXES (Ensures site appears after loader) */

/* While 'loading' class is on body, force these hidden */
body.loading .banner,
body.loading .profile-card,
body.loading .container,
body.loading .footer {
  opacity: 0 !important;
}

/* When 'loaded', allow animations to take control */
body.loaded .banner,
body.loaded .profile-card,
body.loaded .container,
body.loaded .footer {
  opacity: 1; /* Fallback if animations fail */
}

/* Force animations to start at 0 opacity */
.fade-up {
  opacity: 0;
  animation: fadeUp 1.4s ease-out forwards;
}
.slide-down {
  opacity: 0;
  animation: slideDown 2s ease-out forwards;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =======================================================
   MOBILE OPTIMIZATION (NO DARK LINE + FIXED GAPS)
   Replace the bottom @media block in style.css with this
   ======================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. SCALE: Kept at 0.65 (Your preferred size) */
    .decor-cluster {
        transform: scale(0.65) !important; 
        transform-origin: center center;
    }

    /* 2. PUSH BACKGROUND LAYERS OFF-SCREEN 
       (Prevents them from crowding the text) */
    .blue-top     { top: -115% !important; }
    .yellow-bottom { bottom: -112% !important; }
    .red-left      { left: -85% !important; width: 120% !important; }

    /* 3. FIX SHADOW VISIBILITY 
       (We offset them slightly so they peek out again) */
    .blue-shadow   { top: -113% !important; }    
    .yellow-shadow { bottom: -110% !important; } 

    /* 4. THE FIX: Handle Solid Colors and Shadows Differently */
    
    /* A. SOLID COLORS: Overlap by 2px to hide the gap line */
    .blue-top::after { bottom: -28px !important; }
    .yellow-bottom::after { top: -28px !important; }
    .red-left::after { right: -28px !important; }

    /* B. SHADOWS: Keep flush at -30px to prevent the "Dark Overlap Line" */
    .blue-shadow::after { bottom: -30px !important; }
    .yellow-shadow::after { top: -30px !important; }

    /* 5. FORCE CORNER POSITIONS (Keep decorations out of the center) */
    .decor-tl { transform-origin: top left;     left: -20px; top: -20px; }
    .decor-tr { transform-origin: top right;    right: -20px; top: -20px; }
    .decor-bl { transform-origin: bottom left;  left: -20px; bottom: -20px; }
    .decor-br { transform-origin: bottom right; right: -20px; bottom: -20px; }

    /* 6. SHRINK GIANT RINGS & HIDE CLUTTER */
    .tr-ring-giant, .br-ring-giant {
        width: 200px !important;
        height: 200px !important;
        stroke-width: 25px !important;
        z-index: 1 !important;
    }
    .tr-ring-giant { top: -60px; right: -60px; }
    .br-ring-giant { bottom: -60px; right: -60px; }

    /* Hide extra tiny shapes to reduce chaos */
    .tl-tiny-star-1, .tl-tiny-star-2, .tl-sq-1, 
    .tr-chev-1, .tr-chev-2, .br-tri-1 {
        display: none !important;
    }

    /* 7. ADJUST TEXT SIZE */
    .loading-text { font-size: 1.4rem; } 
    .sonic-runner { height: 40px; }
    .sonic-ring-gif { width: 30px; height: 30px; }
}

/* =========================================
   BEHANCE 3D SHOWCASE - WIDE IMAGE + FLIPPED BACKS
   ========================================= */

.behance-3d-showcase {
  position: relative;
  width: 100%;
  margin-top: 0rem;
  padding: 0;
  overflow: visible;
}

.behance-3d-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: 330px;
  text-decoration: none;
  color: inherit;
  overflow: visible;
  isolation: isolate;
}

.behance-3d-header {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  pointer-events: none;
}

.behance-3d-header::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(6, 14, 36, 0.95) 0%,
    rgba(6, 14, 36, 0.72) 42%,
    rgba(6, 14, 36, 0.34) 72%,
    rgba(6, 14, 36, 0) 100%
  );
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

.behance-3d-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.behance-3d-title-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 105, 255, 0.12);
  box-shadow: 0 0 18px rgba(23, 105, 255, 0.16);
  flex: 0 0 auto;
}

.behance-3d-title-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.behance-3d-header .title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.55),
    0 0 22px rgba(255,255,255,0.1);
}

.behance-3d-header .subtext {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.74);
  margin-top: 6px;
  font-weight: 400;
  text-shadow: 0 3px 12px rgba(0,0,0,0.5);
}

.behance-3d-stage::before {
  content: "";
  position: absolute;
  inset: 10% 8% 8%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, rgba(120, 220, 255, 0.08) 0%, transparent 36%),
    radial-gradient(circle at 50% 52%, rgba(130, 90, 255, 0.09) 0%, transparent 52%);
  filter: blur(24px);
}

.behance-3d-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.behance-3d-stage:hover .behance-3d-overlay,
.behance-3d-stage:focus-visible .behance-3d-overlay {
  opacity: 1;
}

.behance-3d-hover-ui {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  transform: translateY(24px) scale(0.94);
  opacity: 0;
  transition:
    transform 0.36s cubic-bezier(.22, 1, .36, 1),
    opacity 0.28s ease;
  pointer-events: auto;
  cursor: pointer;
}

.behance-3d-hover-ui::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: calc(100% + 140px);
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(6, 14, 36, 0.96) 0%,
    rgba(6, 14, 36, 0.78) 38%,
    rgba(6, 14, 36, 0.42) 70%,
    rgba(6, 14, 36, 0) 100%
  );
  filter: blur(28px);
  opacity: 0;
  transition: opacity 0.34s ease, transform 0.34s ease;
  pointer-events: none;
  z-index: -1;
}

.behance-3d-stage:hover .behance-3d-hover-ui,
.behance-3d-stage:focus-visible .behance-3d-hover-ui {
  transform: translateY(-2px) scale(1);
  opacity: 1;
}

.behance-3d-stage:hover .behance-3d-hover-ui::before,
.behance-3d-stage:focus-visible .behance-3d-hover-ui::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

.behance-3d-hover-ui:hover {
  transform: translateY(-10px) scale(1.03) !important;
}

.behance-3d-hover-icon {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  width: 78px !important;
  height: 78px !important;
  flex: 0 0 auto;
}

.behance-3d-hover-icon .link-icon,
.behance-3d-hover-img {
  position: static !important;
  transform: none !important;
  width: 72px !important;
  height: 72px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
}

.behance-3d-hover-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.behance-3d-hover-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 14px rgba(143, 210, 255, 0.14);
  transition: color 0.28s ease, text-shadow 0.28s ease;
}

.behance-3d-hover-subtext {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 4px;
}

.behance-3d-hover-ui:hover .behance-3d-hover-title {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(143, 210, 255, 0.2);
}

.behance-3d-hover-arrow {
  width: 24px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.behance-3d-hover-arrow svg {
  width: 50px;
  height: 20px;
}

.behance-3d-hover-arrow .one {
  transition: 0.4s;
  transform: translateX(-60%);
}

.behance-3d-hover-arrow .two {
  transition: 0.5s;
  transform: translateX(-30%);
}

.behance-3d-hover-ui:hover .behance-3d-hover-arrow .three {
  animation: behanceArrowAnim 1s infinite 0.2s;
}

.behance-3d-hover-ui:hover .behance-3d-hover-arrow .one {
  transform: translateX(0%);
  animation: behanceArrowAnim 1s infinite 0.6s;
}

.behance-3d-hover-ui:hover .behance-3d-hover-arrow .two {
  transform: translateX(0%);
  animation: behanceArrowAnim 1s infinite 0.4s;
}

@keyframes behanceArrowAnim {
  0% { fill: white; }
  50% { fill: #8fd2ff; }
  100% { fill: white; }
}

.behance-3d-showcase .wrapper {
  width: 100%;
  height: 330px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  perspective: 1500px;
}

.behance-3d-showcase .inner {
  --w: 172px;
  --h: 135px;
  --translateZ: 300px;
  --rotateX: -14deg;
  --perspective: 1200px;
  position: absolute;
  width: var(--w);
  height: var(--h);
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(var(--perspective));
  transform-style: preserve-3d;
  animation: behanceRotating 42s linear infinite;
}

@keyframes behanceRotating {
  from {
    transform: translate(-50%, -50%) perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0turn);
  }
  to {
    transform: translate(-50%, -50%) perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn);
  }
}

.behance-3d-showcase .card {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: visible;
  transform-style: preserve-3d;
  transform:
    rotateY(calc((360deg / var(--quantity)) * var(--index)))
    translateZ(var(--translateZ));
}

.behance-3d-showcase .card-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid rgba(var(--card-rgb), 0.92);
  box-shadow:
    0 0 12px rgba(var(--card-rgb), 0.55),
    0 0 26px rgba(var(--card-rgb), 0.18),
    inset 0 0 14px rgba(var(--card-rgb), 0.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.behance-3d-showcase .card-front {
  transform: rotateY(0deg) translateZ(1px);
}

.behance-3d-showcase .card-back {
  transform: rotateY(180deg) translateZ(1px);
}

.behance-3d-stage:hover .card-face,
.behance-3d-stage:focus-visible .card-face {
  box-shadow:
    0 0 16px rgba(var(--card-rgb), 0.62),
    0 0 34px rgba(var(--card-rgb), 0.24),
    inset 0 0 16px rgba(var(--card-rgb), 0.14);
}

.behance-3d-showcase .card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(0,0,0,0.1)),
    radial-gradient(
      circle at 50% 50%,
      rgba(var(--card-rgb), 0.10) 0%,
      rgba(var(--card-rgb), 0.05) 60%,
      rgba(var(--card-rgb), 0.14) 100%
    );
  pointer-events: none;
}


@media screen and (max-width: 768px) {
  .behance-3d-header .title {
    white-space: nowrap;
    font-size: 0.9rem;
  }
}




/* =========================================
   SITE MUSIC PLAYER
   ========================================= */

.site-music-player {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.music-player-toggle {
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 999px;
  background: rgba(10, 18, 44, 0.92);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(59, 130, 246, 0.14);
  backdrop-filter: blur(12px);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.music-mini-disc-wrap,
.music-player-disc-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-mini-disc-wrap::before,
.music-player-disc-shell::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: conic-gradient(#1769ff, #00c3ff, #39c5bb, #1769ff);
  filter: blur(8px);
  opacity: 0.72;
  animation: musicDiscGlowSpin 6s linear infinite;
  z-index: 0;
}

.music-mini-disc-spin,
.music-player-disc-spin {
  position: relative;
  z-index: 1;
  animation: musicDiscSpin 5s linear infinite;
  animation-play-state: running;
}

.music-player-disc-spin.is-paused,
.music-mini-disc-spin.is-paused {
  animation-play-state: paused;
}

.music-disc-art {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.14);
  background: #05070d;
  box-shadow: 0 10px 22px rgba(0,0,0,0.3);
  overflow: hidden;
}

.music-disc-art.large {
  width: 78px;
  height: 78px;
}

.music-disc-art::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.8;
}

.music-disc-art::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.04);
  pointer-events: none;
}

.music-disc-hole {
  position: absolute;
  inset: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #f3f6ff;
  box-shadow: 0 0 0 4px rgba(7, 18, 39, 0.95);
}

.music-player-panel {
  width: 300px;
  border-radius: 22px;
  background: rgba(10, 18, 44, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.48),
    0 0 36px rgba(59,130,246,0.12);
  backdrop-filter: blur(14px);
  padding: 14px 14px 12px;
  overflow: hidden;
  transform-origin: bottom right;
  transition:
    transform 0.28s cubic-bezier(.22,1,.36,1),
    opacity 0.24s ease,
    width 0.28s ease;
}

.music-player-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.music-player-meta {
  min-width: 0;
  flex: 1;
}

.music-track-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-track-artist {
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-progress-row {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.music-time {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

.music-progress {
  width: 100%;
  appearance: none;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  outline: none;
}

.music-progress::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #1769ff;
  box-shadow: 0 0 10px rgba(23,105,255,0.22);
  cursor: pointer;
}

.music-progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #1769ff;
  cursor: pointer;
}

.music-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.music-icon-btn,
.music-play-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    opacity 0.22s ease;
}

.music-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.82);
}

.music-icon-btn:hover:not(.is-disabled) {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.22);
}

.music-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1769ff, #57a6ff);
  color: white;
  box-shadow:
    0 12px 26px rgba(23,105,255,0.35),
    0 0 18px rgba(87,166,255,0.18);
  font-size: 1rem;
}

.music-disc-image {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-image: url('/files/kronos-island-intro-ac.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.music-play-btn:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 16px 30px rgba(23,105,255,0.42),
    0 0 24px rgba(87,166,255,0.24);
}

.music-icon-btn.is-active {
  background: rgba(23,105,255,0.16);
  color: #8fcbff;
  box-shadow: 0 0 0 1px rgba(143,203,255,0.12) inset;
}

.music-icon-btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@keyframes musicDiscSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes musicDiscGlowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* mobile collapsed by default */
@media screen and (max-width: 768px) {
  .site-music-player {
    right: 12px;
    bottom: 12px;
  }

  .music-player-toggle {
    display: inline-flex;
  }

  .music-player-panel {
    position: absolute;
    right: 0;
    bottom: 76px;
    width: 280px;
  }

  .site-music-player.is-collapsed .music-player-panel {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    pointer-events: none;
  }

  .site-music-player:not(.is-collapsed) .music-player-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

/* desktop always open */
@media screen and (min-width: 769px) {
  .site-music-player {
    right: 18px;
    bottom: 18px;
  }

  .music-player-toggle {
    display: none;
  }

  .music-player-panel {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

.music-track-title-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.music-track-title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.music-track-title-track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  will-change: transform;
}

.music-track-title-text {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.music-track-title-sep {
  display: inline-block;
  padding: 0 14px;
  color: rgba(255,255,255,0.55);
}

.music-track-title.is-marquee .music-track-title-track {
  animation: musicTitleLoop var(--marquee-duration, 10s) linear infinite;
}

@keyframes musicTitleLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50%));
  }
}

.music-track-artist-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}

.music-track-artist {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.music-track-artist-track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  will-change: transform;
}

.music-track-artist-text {
  display: inline-block;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.66);
}

.music-track-artist-sep {
  display: inline-block;
  padding: 0 12px;
  color: rgba(255,255,255,0.42);
}

.music-track-artist.is-marquee .music-track-artist-track {
  animation: musicArtistLoop var(--artist-marquee-duration, 12s) linear infinite;
}

@keyframes musicArtistLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50%));
  }
}

/* =========================================
   MAIN PAGE - BEHANCE MOBILE OVERFLOW FIX
   ========================================= */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media screen and (max-width: 768px) {
  .behance-3d-showcase {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
  }

  .behance-3d-stage,
  .behance-3d-showcase .wrapper {
    width: 100%;
    overflow: visible;
  }
}

/* =========================================
   MIKU / SRCW_MIKU OVERRIDES
   ========================================= */
:root {
  --miku-cyan: #39c5bb;
  --miku-blue: #00f0ff;
  --miku-pink: #7df9ff;
  --miku-dark: #071314;
  --miku-panel: rgba(12, 28, 31, 0.88);
}

body {
  background: radial-gradient(circle at 50% 0%, rgba(57, 197, 187, 0.16), transparent 32%), #071314;
}

.profile-card {
  background: linear-gradient(180deg, rgba(18, 34, 38, 0.94), rgba(10, 17, 21, 0.94));
  border: 1px solid rgba(57, 197, 187, 0.26);
  box-shadow: 0 0 32px rgba(57, 197, 187, 0.12), 0 4px 20px rgba(0, 0, 0, 0.45);
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(57, 197, 187, 0.12), transparent 40%, rgba(255, 126, 188, 0.08));
  pointer-events: none;
}

.name-text {
  margin: 0.35rem 0 0.2rem 0;
  font-size: clamp(2rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--miku-cyan), #ffffff, var(--miku-pink), var(--miku-cyan));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 7s linear infinite;
  filter: drop-shadow(0 0 18px rgba(57, 197, 187, 0.28));
}

.miku-accent,
.discord-note span {
  color: var(--miku-cyan);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(57, 197, 187, 0.45);
}

.discord-note {
  margin-top: -0.35rem;
  margin-bottom: 1rem;
  color: #a7c7c9;
  font-size: 0.95rem;
}

.tagline-extra,
.tagline-extra::after {
  background: linear-gradient(90deg, var(--miku-cyan), var(--miku-pink), var(--miku-cyan));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta.onsoku-cta {
  background: linear-gradient(90deg, var(--miku-cyan), #248bff);
  box-shadow: 6px 6px 0 #021012;
}

.cta.onsoku-cta:hover {
  box-shadow: 10px 10px 0 var(--miku-pink);
}

.cta .icon.fa-solid {
  transform: skewX(15deg);
  margin-right: 8px;
  position: relative;
  top: -0.5px;
  font-size: 16px;
}

.socials-circles a,
.socials-circles .social-action {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #172326;
  border-radius: 999px;
  border: 1px solid rgba(57, 197, 187, 0.22);
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.socials-circles a:hover,
.socials-circles .social-action:hover {
  transform: scale(1.1);
  background: var(--miku-cyan);
  box-shadow: 0 0 18px rgba(57, 197, 187, 0.45);
}

.socials-circles img {
  background: transparent;
  padding: 4px;
}

.socials-circles a:hover img {
  background: transparent;
  transform: none;
}

.social-action i {
  color: white;
  font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
}

h2 {
  color: var(--miku-cyan);
  text-shadow: 0 0 14px rgba(57, 197, 187, 0.35);
}

.miku-links-section {
  margin-top: -0.5rem;
}

.link-card {
  background: linear-gradient(180deg, rgba(20, 29, 33, 0.96), rgba(13, 18, 21, 0.96));
  border: 1px solid rgba(57, 197, 187, 0.16);
}

.link-card:hover {
  border-color: rgba(57, 197, 187, 0.42);
  box-shadow: 0 0 24px rgba(57, 197, 187, 0.12), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.featured-link {
  min-height: 92px;
  border-color: rgba(57, 197, 187, 0.35);
  background: linear-gradient(90deg, rgba(57, 197, 187, 0.15), rgba(255, 126, 188, 0.08), rgba(13, 18, 21, 0.96));
}

.static-card {
  cursor: default;
}

.static-card:hover .link-arrow {
  transform: none;
}

.link-icon.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  background: #101d20;
}

.glow-ring.onsoku::before {
  background: conic-gradient(var(--miku-cyan), #ffe14d, var(--miku-pink), #248bff, var(--miku-cyan));
}

.glow-ring.twitter::before {
  background: conic-gradient(#d8d8d8, #39c5bb, #333333, #d8d8d8);
}

.glow-ring.youtube::before {
  background: conic-gradient(#ff0000, #7df9ff, #a30000, #ff0000);
}

.glow-ring.twitch::before {
  background: conic-gradient(#9146FF, #39c5bb, #4b00a9, #9146FF);
}

.glow-ring.discord::before {
  background: conic-gradient(#5865F2, #39c5bb, #8b5cf6, #5865F2);
}

.footer {
  color: #8ebec0;
}

@media screen and (max-width: 600px) {
  .name-text {
    font-size: 2.15rem;
    letter-spacing: 1px;
  }

  .featured-link {
    min-height: 78px;
  }

  .discord-note {
    font-size: 0.85rem;
  }
}



/* =========================================
   DONPAMOTORS.CC — FULL MIKU THEME OVERRIDES
   ========================================= */
:root {
  --miku-cyan: #39c5bb;
  --miku-cyan-bright: #7df9ff;
  --miku-blue: #00b8ff;
  --miku-deep: #061315;
  --miku-panel: rgba(8, 24, 27, 0.92);
  --miku-panel-2: rgba(12, 36, 40, 0.9);
  --miku-line: rgba(125, 249, 255, 0.38);
  --miku-white: #f7ffff;
  --miku-muted: rgba(225, 255, 255, 0.72);
  --cy-bg: #061315;
  --cy-panel: #0b1d20;
  --cy-cyan: #39c5bb;
  --cy-red: #39c5bb;
}

body {
  background:
    radial-gradient(circle at 18% 12%, rgba(57, 197, 187, 0.24), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(0, 184, 255, 0.22), transparent 30%),
    linear-gradient(180deg, #02090a 0%, #061315 48%, #020707 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -99;
  background:
    linear-gradient(135deg, rgba(57, 197, 187, 0.16), transparent 25%, rgba(0, 184, 255, 0.12) 70%, transparent),
    repeating-linear-gradient(90deg, rgba(125, 249, 255, 0.035) 0 1px, transparent 1px 85px);
}

.sf-ticker-container {
  background: linear-gradient(90deg, #031011, #082426, #031011);
  border-bottom: 1px solid var(--miku-line);
  box-shadow: 0 0 18px rgba(57, 197, 187, 0.22);
}

.s-blue,
.s-yellow {
  color: var(--miku-cyan-bright);
  text-shadow: 0 0 8px var(--miku-cyan-bright);
}

.sf-warning-icon,
.sf-highlight {
  color: var(--miku-cyan-bright) !important;
  border-color: var(--miku-cyan) !important;
}

.sf-title,
.sf-mono-small {
  color: var(--miku-cyan-bright);
}

.sf-popup-card {
  background: linear-gradient(145deg, rgba(5, 18, 20, 0.96), rgba(7, 38, 41, 0.96));
  border: 1px solid var(--miku-line);
  box-shadow: 0 0 45px rgba(57, 197, 187, 0.22), 0 0 0 1px rgba(255,255,255,0.04) inset;
}

.banner {
  height: 440px;
  background:
    radial-gradient(circle at 50% 15%, rgba(125, 249, 255, 0.12), transparent 42%),
    linear-gradient(135deg, #021012 0%, #093034 48%, #061b26 100%);
}

.banner-image {
  background:
    linear-gradient(90deg, rgba(2, 9, 10, 0.24), rgba(57, 197, 187, 0.08), rgba(2, 9, 10, 0.32)),
    url('/files/miku-banner.jpg') no-repeat center center;
  background-size: cover;
}

#bg-video {
  opacity: 0.92;
  filter: saturate(1.25) hue-rotate(130deg) brightness(0.85);
}

.profile-card {
  background: var(--miku-panel);
  border: 1px solid var(--miku-line);
  box-shadow: 0 18px 70px rgba(0,0,0,0.48), 0 0 55px rgba(57, 197, 187, 0.16);
  overflow: hidden;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--miku-cyan), var(--miku-cyan-bright), var(--miku-blue), transparent);
  box-shadow: 0 0 16px rgba(125,249,255,0.65);
}

.avatar {
  border: 2px solid var(--miku-cyan);
  background-color: #061315;
  box-shadow: 0 0 0 8px rgba(57, 197, 187, 0.08), 0 0 35px rgba(57, 197, 187, 0.45);
}

.verified-wrapper::before {
  background: #061315;
  box-shadow: 0 0 14px rgba(57, 197, 187, 0.42);
}

.name-text {
  margin: 0.4rem 0 0.25rem;
  font-size: clamp(2rem, 6vw, 4.25rem);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 4px;
  color: var(--miku-white);
  text-shadow: 0 0 10px rgba(125, 249, 255, 0.65), 0 0 32px rgba(57, 197, 187, 0.38);
}

.location,
.bio,
.discord-note,
.tagline {
  color: var(--miku-muted);
}

.bio,
.miku-accent,
.discord-note span {
  color: var(--miku-cyan-bright) !important;
  text-shadow: 0 0 12px rgba(57, 197, 187, 0.35);
}

.tagline-extra,
.tagline-extra::after {
  background: linear-gradient(90deg, var(--miku-cyan), var(--miku-white), var(--miku-blue), var(--miku-cyan));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta,
.cta-clone,
.email-cta {
  background: linear-gradient(90deg, var(--miku-cyan), var(--miku-blue)) !important;
  color: #fff;
  box-shadow: 6px 6px 0 #020707, 0 0 22px rgba(57, 197, 187, 0.22);
}

.cta:hover,
.cta-clone:hover,
.email-cta:hover {
  box-shadow: 10px 10px 0 var(--miku-cyan-bright), 0 0 34px rgba(125, 249, 255, 0.36) !important;
}

.cta img.icon,
.cta .icon,
.cta-clone .icon {
  margin-right: 10px !important;
  width: 18px;
  height: 18px;
}

.socials-circles {
  margin-top: 1rem;
  gap: 0.75rem;
}

.socials-circles img {
  background: rgba(3, 17, 19, 0.88);
  border: 1px solid rgba(125, 249, 255, 0.22);
  box-shadow: 0 0 18px rgba(57, 197, 187, 0.12);
}

.socials-circles a:hover img {
  background: var(--miku-cyan);
  box-shadow: 0 0 24px rgba(57, 197, 187, 0.45);
}

h2 {
  color: var(--miku-cyan-bright) !important;
  text-shadow: 0 0 18px rgba(57, 197, 187, 0.36);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.link-card {
  background: linear-gradient(135deg, rgba(6, 21, 23, 0.96), rgba(10, 42, 46, 0.88));
  border: 1px solid rgba(125, 249, 255, 0.14);
  box-shadow: 0 8px 28px rgba(0,0,0,0.34), 0 0 25px rgba(57, 197, 187, 0.08);
}

.link-card:hover {
  border-color: rgba(125, 249, 255, 0.48);
  box-shadow: 0 12px 35px rgba(0,0,0,0.44), 0 0 35px rgba(57, 197, 187, 0.18);
}

.title {
  color: var(--miku-white);
}

.subtext {
  color: rgba(225, 255, 255, 0.68);
}

.glow-ring::before,
.glow-ring.twitter::before,
.glow-ring.youtube::before,
.glow-ring.twitch::before,
.glow-ring.discord::before,
.glow-ring.miku::before {
  background: conic-gradient(var(--miku-cyan), var(--miku-cyan-bright), var(--miku-blue), var(--miku-cyan));
}

.link-icon {
  background-color: #061315;
  border: 1px solid rgba(125, 249, 255, 0.18);
}


.footer {
  color: rgba(225, 255, 255, 0.62);
}

::-webkit-scrollbar-thumb {
  background: radial-gradient(circle, var(--miku-cyan-bright) 25%, var(--miku-cyan) 72%, #0c6368 100%);
}

* {
  scrollbar-color: var(--miku-cyan) #061315;
}

@media screen and (max-width: 600px) {
  .banner { height: 190px; }
  .profile-card {
    background: rgba(8, 24, 27, 0.72) !important;
    margin-top: -80px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .name-text {
    font-size: 2.25rem;
    letter-spacing: 2px;
  }
}

/* =========================================
   DONPAMOTORS.CC — FINAL MIKU CLEANUP V8
   ========================================= */
:root {
  --miku-cyan: #39c5bb;
  --miku-cyan-bright: #7df9ff;
  --miku-blue: #00b8ff;
  --miku-deep: #02090a;
  --miku-panel: rgba(5, 24, 27, 0.90);
  --miku-line: rgba(125, 249, 255, 0.36);
  --miku-white: #f7ffff;
  --miku-muted: rgba(225, 255, 255, 0.72);
  --cy-bg: #061315;
  --cy-panel: #0b1d20;
  --cy-cyan: #39c5bb;
  --cy-red: #39c5bb;
}

html,
body {
  background:
    radial-gradient(circle at 18% 12%, rgba(57, 197, 187, 0.20), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(0, 184, 255, 0.16), transparent 32%),
    linear-gradient(180deg, #02090a 0%, #061315 48%, #020707 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -99;
  background:
    linear-gradient(135deg, rgba(57, 197, 187, 0.14), transparent 25%, rgba(0, 184, 255, 0.10) 70%, transparent),
    repeating-linear-gradient(90deg, rgba(125, 249, 255, 0.03) 0 1px, transparent 1px 85px);
}

/* top ticker: old-site system/security style, Miku colors */
.sf-ticker-container {
  background: linear-gradient(90deg, #031011, #082426, #031011) !important;
  border-bottom: 1px solid var(--miku-line) !important;
  box-shadow: 0 0 18px rgba(57, 197, 187, 0.22) !important;
}

.sf-ticker-track {
  animation-duration: 38s !important;
}

.sf-ticker-item {
  color: var(--miku-white) !important;
}

.s-blue,
.s-yellow {
  color: var(--miku-cyan-bright) !important;
  text-shadow: 0 0 8px var(--miku-cyan-bright) !important;
}

/* popup */
.sf-warning-icon,
.sf-highlight {
  color: var(--miku-cyan-bright) !important;
  border-color: var(--miku-cyan) !important;
}

.sf-title,
.sf-mono-small {
  color: var(--miku-cyan-bright) !important;
}

.sf-popup-card {
  background: linear-gradient(145deg, rgba(5, 18, 20, 0.97), rgba(7, 38, 41, 0.97)) !important;
  border: 1px solid var(--miku-line) !important;
  box-shadow: 0 0 45px rgba(57, 197, 187, 0.22), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
}

.cta-clone {
  background: linear-gradient(90deg, var(--miku-cyan), var(--miku-blue)) !important;
  box-shadow: 6px 6px 0 #020707, 0 0 22px rgba(57, 197, 187, 0.22) !important;
}

.cta-clone:hover {
  box-shadow: 10px 10px 0 var(--miku-cyan-bright), 0 0 34px rgba(125, 249, 255, 0.36) !important;
}

/* banner: image and fallback stay inside the same curved mask */
.banner {
  height: 440px !important;
  background: transparent !important;
  overflow: hidden !important;
  isolation: isolate;
  position: relative;
}

.banner-image {
  background:
    linear-gradient(90deg, rgba(2, 9, 10, 0.18), rgba(57, 197, 187, 0.04), rgba(2, 9, 10, 0.24)),
    url('/files/miku-banner.jpg?v=16') center center / cover no-repeat,
    url('/files/miku-banner.jpg?v=16') center center / cover no-repeat,
    radial-gradient(circle at 50% 18%, rgba(125,249,255,0.15), transparent 45%),
    linear-gradient(135deg, #021012 0%, #093034 48%, #061b26 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  -webkit-mask-position: bottom !important;
  mask-position: bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

.banner-dropshadow {
  background: rgba(0, 0, 0, 0.75) !important;
  opacity: 0.28 !important;
  filter: blur(18px) !important;
}

#bg-video {
  opacity: 0.38 !important;
  filter: saturate(1.25) hue-rotate(130deg) brightness(0.85) !important;
}

/* profile card: no clipped avatar, name is Hatsune Miku */
.profile-card,
.miku-profile-card {
  overflow: visible !important;
  background: var(--miku-panel) !important;
  border: 1px solid var(--miku-line) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,0.48), 0 0 55px rgba(57, 197, 187, 0.16) !important;
  padding-top: 4.75rem !important;
  margin-top: -190px !important;
}

.profile-card::before,
.miku-profile-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--miku-cyan), var(--miku-cyan-bright), var(--miku-blue), transparent) !important;
  box-shadow: 0 0 16px rgba(125,249,255,0.65) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.miku-profile-card > * {
  position: relative;
  z-index: 2;
}

.avatar-badge {
  z-index: 5 !important;
}

.avatar {
  border: 2px solid var(--miku-cyan) !important;
  background-color: #061315 !important;
  box-shadow: 0 0 0 8px rgba(57, 197, 187, 0.08), 0 0 35px rgba(57, 197, 187, 0.45) !important;
}

.verified-wrapper::before {
  background: #061315 !important;
  box-shadow: 0 0 14px rgba(57, 197, 187, 0.42) !important;
}

.name-text {
  margin: 0.4rem 0 0.25rem !important;
  font-size: clamp(2rem, 5.2vw, 3.65rem) !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 2px !important;
  color: var(--miku-white) !important;
  -webkit-text-fill-color: var(--miku-white) !important;
  background: none !important;
  text-shadow: 0 0 10px rgba(125, 249, 255, 0.68), 0 0 32px rgba(57, 197, 187, 0.42) !important;
}

.location,
.bio,
.discord-note,
.tagline {
  color: var(--miku-muted) !important;
}

.bio,
.miku-accent,
.discord-note span {
  color: var(--miku-cyan-bright) !important;
  text-shadow: 0 0 12px rgba(57, 197, 187, 0.35) !important;
}

.tagline-extra,
.tagline-extra::after {
  background: linear-gradient(90deg, var(--miku-cyan), var(--miku-white), var(--miku-blue), var(--miku-cyan)) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* email button */
.cta,
.email-cta {
  background: linear-gradient(90deg, var(--miku-cyan), var(--miku-blue)) !important;
  color: #fff !important;
  box-shadow: 6px 6px 0 #020707, 0 0 22px rgba(57, 197, 187, 0.22) !important;
}

.cta:hover,
.email-cta:hover {
  box-shadow: 10px 10px 0 var(--miku-cyan-bright), 0 0 34px rgba(125, 249, 255, 0.36) !important;
}

.cta img.icon,
.cta .icon,
.cta-clone .icon {
  margin-right: 10px !important;
  width: 18px !important;
  height: 18px !important;
}

/* social circles */
.socials-circles {
  margin-top: 1rem !important;
  gap: 0.75rem !important;
}

.socials-circles a,
.socials-circles .social-action {
  background: #172326 !important;
  border: 1px solid rgba(57, 197, 187, 0.22) !important;
}

.socials-circles img {
  background: rgba(3, 17, 19, 0.88) !important;
  border: 1px solid rgba(125, 249, 255, 0.22) !important;
  box-shadow: 0 0 18px rgba(57, 197, 187, 0.12) !important;
}

.socials-circles a:hover img {
  background: var(--miku-cyan) !important;
  box-shadow: 0 0 24px rgba(57, 197, 187, 0.45) !important;
  transform: scale(1.1) !important;
}

/* link cards: standard style for every button, including Project ONSOKU */
h2 {
  color: var(--miku-cyan-bright) !important;
  text-shadow: 0 0 18px rgba(57, 197, 187, 0.36) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

.link-card {
  background: linear-gradient(135deg, rgba(6, 21, 23, 0.96), rgba(10, 42, 46, 0.88)) !important;
  border: 1px solid rgba(125, 249, 255, 0.14) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.34), 0 0 25px rgba(57, 197, 187, 0.08) !important;
  overflow: visible !important;
}

.link-card:hover {
  border-color: rgba(125, 249, 255, 0.48) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.44), 0 0 35px rgba(57, 197, 187, 0.18) !important;
}

.title {
  color: var(--miku-white) !important;
}

.subtext {
  color: rgba(225, 255, 255, 0.68) !important;
}

.link-icon {
  background-color: #061315 !important;
  border: 1px solid rgba(125, 249, 255, 0.18) !important;
}

.onsoku-link-icon {
  padding: 8px !important;
  object-fit: contain !important;
}

/* Restore original per-platform glow colors */
.glow-ring.youtube::before { background: conic-gradient(#ff0000, #a30000, #ff4d4d, #ff0000) !important; }
.glow-ring.discord::before { background: conic-gradient(#5865F2, #8b5cf6, #5865F2) !important; }
.glow-ring.twitter::before { background: conic-gradient(#808080, #4d4d4d, #111111, #808080) !important; }
.glow-ring.instagram::before { background: conic-gradient(#f09433, #bc1888, #833ab4, #f09433) !important; }
.glow-ring.twitch::before { background: conic-gradient(#9146FF, #4b00a9, #b782ff, #9146FF) !important; }
.glow-ring.spotify::before { background: conic-gradient(#1DB954, #065d37, #1DB954) !important; }
.glow-ring.onsoku::before { background: conic-gradient(#39c5bb, #ffe14d, #ff4fd8, #00b8ff, #39c5bb) !important; }
.glow-ring.miku::before { background: conic-gradient(#00e5d4, #32ff9c, #ffe14d, #ff3bd5, #00e5d4) !important; }

.glow-ring.youtube::after { background: rgba(255, 0, 0, 0.28) !important; }
.glow-ring.discord::after { background: rgba(88, 101, 242, 0.28) !important; }
.glow-ring.twitter::after { background: rgba(180, 180, 180, 0.20) !important; }
.glow-ring.twitch::after { background: rgba(145, 70, 255, 0.28) !important; }
.glow-ring.onsoku::after { background: rgba(57, 197, 187, 0.26) !important; }

/* Music player recolor */
.site-music-player {
  color: var(--miku-white) !important;
}

.music-player-panel,
.music-player-toggle {
  background: rgba(5, 23, 27, 0.92) !important;
  border: 1px solid rgba(125, 249, 255, 0.18) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.50), 0 0 38px rgba(57,197,187,0.18) !important;
}

.music-mini-disc-wrap::before,
.music-player-disc-shell::before {
  background: conic-gradient(var(--miku-cyan), var(--miku-cyan-bright), var(--miku-blue), var(--miku-cyan)) !important;
  opacity: 0.78 !important;
}

.music-disc-art {
  border-color: rgba(125, 249, 255, 0.22) !important;
  background: #061315 !important;
}

.music-disc-hole {
  background: var(--miku-white) !important;
  box-shadow: 0 0 0 4px rgba(2, 12, 14, 0.95), 0 0 12px rgba(125, 249, 255, 0.35) !important;
}

.music-track-title-text,
.music-track-title {
  color: var(--miku-white) !important;
}

.music-track-artist-text,
.music-track-artist,
.music-time {
  color: rgba(225, 255, 255, 0.68) !important;
}

.music-progress {
  background: rgba(125, 249, 255, 0.13) !important;
}

.music-progress::-webkit-slider-thumb {
  background: var(--miku-white) !important;
  border: 2px solid var(--miku-cyan) !important;
  box-shadow: 0 0 12px rgba(57, 197, 187, 0.45) !important;
}

.music-progress::-moz-range-thumb {
  background: var(--miku-white) !important;
  border: 2px solid var(--miku-cyan) !important;
  box-shadow: 0 0 12px rgba(57, 197, 187, 0.45) !important;
}

.music-icon-btn {
  background: rgba(125, 249, 255, 0.08) !important;
  color: rgba(247,255,255,0.82) !important;
}

.music-icon-btn:hover:not(.is-disabled) {
  background: rgba(125, 249, 255, 0.16) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.24), 0 0 18px rgba(57,197,187,0.18) !important;
}

.music-play-btn {
  background: linear-gradient(135deg, var(--miku-cyan), var(--miku-blue)) !important;
  color: white !important;
  box-shadow: 0 12px 26px rgba(57,197,187,0.32), 0 0 20px rgba(125,249,255,0.20) !important;
}

.music-play-btn:hover {
  box-shadow: 0 16px 32px rgba(57,197,187,0.42), 0 0 28px rgba(125,249,255,0.28) !important;
}

.music-icon-btn.is-active {
  background: rgba(57,197,187,0.18) !important;
  color: var(--miku-cyan-bright) !important;
  box-shadow: 0 0 0 1px rgba(125,249,255,0.14) inset, 0 0 16px rgba(57,197,187,0.12) !important;
}

/* footer: mimic original Oasis footer text/layout, Miku recolor */
.footer {
  color: rgba(225, 255, 255, 0.62) !important;
  text-shadow: 0 0 12px rgba(57, 197, 187, 0.16) !important;
  letter-spacing: 1px !important;
}

::-webkit-scrollbar-thumb {
  background: radial-gradient(circle, var(--miku-cyan-bright) 25%, var(--miku-cyan) 72%, #0c6368 100%) !important;
}

* {
  scrollbar-color: var(--miku-cyan) #061315 !important;
}

@media screen and (max-width: 600px) {
  .banner { height: 190px !important; }
  .profile-card,
  .miku-profile-card {
    background: rgba(8, 24, 27, 0.72) !important;
    margin-top: -72px !important;
    padding: 4.2rem 1rem 1.6rem !important;
  }
  .name-text {
    font-size: 2.25rem !important;
    letter-spacing: 1px !important;
  }
  .onsoku-link-icon {
    padding: 6px !important;
  }
}


/* =========================================
   FINAL BANNER POSITION OVERRIDE
   Put this at the VERY bottom of style.css
   ========================================= */

.banner {
  position: relative;
  height: 440px;
  overflow: hidden;
}

.banner-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  background-image:
    linear-gradient(90deg, rgba(2, 9, 10, 0.08), rgba(57, 197, 187, 0.03), rgba(2, 9, 10, 0.12)),
    url('/files/miku-banner.jpg?v=16') !important;

  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;

  /* THIS is the vertical image shift */
  background-position: center center, center 0% !important;

  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  -webkit-mask-position: bottom !important;
  mask-position: bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* =======================================================
   MIKU FINAL PASS v14
   - JPG assets only
   - real <img> banner layer, so object-position actually works
   - clean Miku loader using same JS state classes
   ======================================================= */

:root {
  --miku-bg: #02090a;
  --miku-panel: rgba(5, 20, 22, 0.90);
  --miku-panel-solid: #061416;
  --miku-line: rgba(125, 249, 255, 0.28);
  --miku-cyan: #39c5bb;
  --miku-cyan-bright: #7df9ff;
  --miku-blue: #00b8ff;
  --miku-pink: #ff4fd8;
  --miku-yellow: #ffe14d;
  --miku-white: #f7ffff;
  --miku-muted: rgba(225, 255, 255, 0.72);

  /* Move the JPG inside the banner frame here.
     0% = show more top, 50% = centered, 100% = show lower. */
  --banner-object-x: 50%;
  --banner-object-y: 0%;
}

/* ------------------------------
   Banner: actual JPG layer
   ------------------------------ */
.banner {
  position: relative !important;
  width: 100% !important;
  height: 440px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: transparent !important;
}

.miku-banner-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--banner-object-x) var(--banner-object-y) !important;
  z-index: 1 !important;
  display: block !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  -webkit-mask-position: bottom !important;
  mask-position: bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

.banner-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(2, 9, 10, 0.16), rgba(57, 197, 187, 0.02), rgba(2, 9, 10, 0.18)),
    radial-gradient(circle at 50% 20%, rgba(125,249,255,0.08), transparent 48%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  -webkit-mask-position: bottom !important;
  mask-position: bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* fallback appears only if the JPG fails to load visually; still follows the curve */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(125,249,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,249,255,0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 18%, rgba(57,197,187,0.25), transparent 42%),
    linear-gradient(135deg, #02090a 0%, #06272b 46%, #081b29 100%);
  background-size: 90px 90px, 90px 90px, auto, auto;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%);
  -webkit-mask-position: bottom;
  mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.banner-dropshadow {
  z-index: 0 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  opacity: 0.26 !important;
  filter: blur(18px) !important;
}

/* ------------------------------
   Clean Miku transition
   Keeps JS logic: loading -> wait-for-input -> start-wipe -> reveal-underneath -> finished
   ------------------------------ */

.page-loader.miku-loader,
#sonic-loader.miku-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(57, 197, 187, 0.24), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(255, 79, 216, 0.14), transparent 30%),
    linear-gradient(135deg, #02090a 0%, #061c20 48%, #010506 100%) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.page-loader.miku-loader::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    linear-gradient(rgba(125,249,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,249,255,0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(58deg) translateY(6%);
  transform-origin: 50% 100%;
  animation: mikuGridDrift 4.8s linear infinite;
  opacity: 0.72;
}

.page-loader.miku-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, transparent, rgba(125,249,255,0.08), transparent);
  mix-blend-mode: screen;
  opacity: 0.34;
  animation: mikuScanPulse 2.6s ease-in-out infinite;
}

.miku-loader-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(125,249,255,0.12), transparent 28%),
    linear-gradient(90deg, transparent 0 49.7%, rgba(125,249,255,0.22) 49.9% 50.1%, transparent 50.3% 100%);
  opacity: 0.86;
}

.miku-loader-grid {
  position: absolute;
  width: min(72vw, 760px);
  height: min(72vw, 760px);
  z-index: 2;
  border-radius: 999px;
  border: 1px solid rgba(125,249,255,0.26);
  box-shadow:
    0 0 38px rgba(57,197,187,0.20),
    inset 0 0 42px rgba(57,197,187,0.10);
  animation: mikuOrbitSoft 9s linear infinite;
  opacity: 0.82;
}

.miku-loader-grid::before,
.miku-loader-grid::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: inherit;
  border: 1px dashed rgba(125,249,255,0.24);
}

.miku-loader-grid::after {
  inset: 20%;
  border-style: solid;
  border-color: rgba(255,79,216,0.16);
}

.miku-loader-ring {
  position: absolute;
  width: 220px;
  height: 220px;
  z-index: 3;
  border-radius: 999px;
  background:
    conic-gradient(from 120deg, transparent 0 16%, var(--miku-cyan) 17% 21%, transparent 22% 44%, var(--miku-pink) 45% 49%, transparent 50% 72%, var(--miku-blue) 73% 78%, transparent 79% 100%);
  filter: drop-shadow(0 0 22px rgba(57,197,187,0.30));
  animation: mikuOrbitSoft 5.5s linear infinite reverse;
  opacity: 0.82;
}

.miku-loader-ring::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  background: #031112;
}

.miku-loader-eq {
  position: absolute;
  z-index: 4;
  bottom: calc(50% - 190px);
  display: flex;
  gap: 7px;
  opacity: 0.78;
}

.miku-loader-eq span {
  width: 5px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(var(--miku-white), var(--miku-cyan));
  box-shadow: 0 0 14px rgba(125,249,255,0.42);
  animation: mikuEq 0.8s ease-in-out infinite alternate;
}

.miku-loader-eq span:nth-child(2) { animation-delay: .12s; }
.miku-loader-eq span:nth-child(3) { animation-delay: .24s; }
.miku-loader-eq span:nth-child(4) { animation-delay: .36s; }
.miku-loader-eq span:nth-child(5) { animation-delay: .48s; }

.miku-loader-content {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  min-width: min(92vw, 640px);
  padding: 2rem 2.25rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(3, 17, 19, 0.66), rgba(6, 33, 37, 0.46));
  border: 1px solid rgba(125,249,255,0.18);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.42),
    0 0 45px rgba(57,197,187,0.18),
    inset 0 0 32px rgba(125,249,255,0.04);
  backdrop-filter: blur(10px);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  transition: opacity 0.35s ease, transform 0.45s ease, filter 0.45s ease;
}

.miku-loader-kicker,
.miku-loader-subline {
  font-family: 'Nippo', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 3.2px;
  color: rgba(225,255,255,0.68);
  text-transform: uppercase;
}

.miku-loader-mark {
  font-family: 'Nippo', sans-serif;
  font-size: clamp(4rem, 10vw, 7.2rem);
  line-height: 0.86;
  letter-spacing: 0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(125,249,255,0.44);
  text-shadow: 0 0 34px rgba(57,197,187,0.26);
  opacity: 0.74;
}

.miku-loader .loading-text {
  font-family: 'Nippo', sans-serif !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(1.65rem, 4vw, 2.65rem) !important;
  font-weight: 600 !important;
  letter-spacing: 6px !important;
  color: var(--miku-white) !important;
  background: none !important;
  -webkit-text-fill-color: var(--miku-white) !important;
  text-shadow:
    0 0 10px rgba(125,249,255,0.74),
    0 0 32px rgba(57,197,187,0.38) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

.miku-loader .dots::after {
  content: "";
  animation: dots 1.2s steps(4, end) infinite;
}

.page-loader.wait-for-input.miku-loader .miku-loader-mark {
  animation: mikuMarkPulse 1.1s ease-in-out infinite alternate;
}

.page-loader.wait-for-input.miku-loader .loading-text {
  cursor: pointer !important;
  letter-spacing: 4px !important;
  color: var(--miku-cyan-bright) !important;
  -webkit-text-fill-color: var(--miku-cyan-bright) !important;
  animation: mikuReadyPulse 0.78s ease-in-out infinite alternate !important;
}

.page-loader.wait-for-input.miku-loader .miku-loader-subline {
  color: rgba(255,255,255,0.86);
}

.page-loader.wait-for-input.miku-loader .dots {
  display: none !important;
}

.page-loader.wait-for-input.miku-loader .music-toggle-ui {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin-top: 0.85rem !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 12 !important;
}

.miku-loader .music-toggle-ui {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.miku-loader .cyber-checkbox-label {
  color: rgba(247,255,255,0.84) !important;
  font-size: 0.78rem !important;
  letter-spacing: 2px !important;
}

.miku-loader .cyber-box {
  border-color: rgba(125,249,255,0.8) !important;
  box-shadow: 0 0 12px rgba(57,197,187,0.32) !important;
}

.miku-loader .cyber-checkbox-label input:checked + .cyber-box {
  background: var(--miku-cyan) !important;
  border-color: var(--miku-cyan-bright) !important;
  box-shadow: 0 0 18px rgba(125,249,255,0.62) !important;
}

.miku-wipe {
  position: absolute;
  inset: -20%;
  z-index: 10002;
  pointer-events: none;
  transform: translateX(130%) skewX(-16deg);
  will-change: transform;
}

.miku-wipe-a {
  background: linear-gradient(90deg, transparent, var(--miku-cyan-bright) 16%, var(--miku-cyan) 58%, transparent);
  width: 44%;
  left: auto;
  right: -48%;
  filter: drop-shadow(0 0 26px rgba(125,249,255,0.55));
}

.miku-wipe-b {
  background: linear-gradient(90deg, transparent, rgba(255,79,216,0.0), rgba(255,79,216,0.95), rgba(0,184,255,0.88), transparent);
  width: 34%;
  left: auto;
  right: -42%;
  opacity: 0.92;
}

.miku-wipe-c {
  background: rgba(1, 9, 10, 0.98);
  width: 122%;
  right: -126%;
  opacity: 1;
}

.page-loader.start-wipe.miku-loader .miku-loader-content {
  opacity: 0;
  transform: scale(0.98) translateY(-8px);
  filter: blur(4px);
}

.page-loader.start-wipe.miku-loader .miku-loader-grid,
.page-loader.start-wipe.miku-loader .miku-loader-ring,
.page-loader.start-wipe.miku-loader .miku-loader-eq {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.page-loader.start-wipe.miku-loader .miku-wipe-a {
  animation: mikuWipeAcross 0.92s cubic-bezier(.72, 0, .2, 1) forwards;
}

.page-loader.start-wipe.miku-loader .miku-wipe-b {
  animation: mikuWipeAcross 0.98s cubic-bezier(.72, 0, .2, 1) 0.08s forwards;
}

.page-loader.start-wipe.miku-loader .miku-wipe-c {
  animation: mikuWipeAcross 1.05s cubic-bezier(.72, 0, .2, 1) 0.18s forwards;
}

.page-loader.reveal-underneath.miku-loader {
  background: transparent !important;
}

.page-loader.reveal-underneath.miku-loader::before,
.page-loader.reveal-underneath.miku-loader::after,
.page-loader.reveal-underneath.miku-loader .miku-loader-bg {
  opacity: 0 !important;
}

.page-loader.finished.miku-loader {
  display: none !important;
}

@keyframes mikuGridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 64px, 64px 0; }
}

@keyframes mikuScanPulse {
  0%, 100% { opacity: 0.22; transform: translateY(-2%); }
  50% { opacity: 0.38; transform: translateY(2%); }
}

@keyframes mikuOrbitSoft {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes mikuEq {
  from { transform: scaleY(.32); opacity: .55; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes mikuMarkPulse {
  from { opacity: .52; transform: scale(.995); }
  to { opacity: .86; transform: scale(1.012); }
}

@keyframes mikuReadyPulse {
  from { transform: scale(1); opacity: .86; }
  to { transform: scale(1.045); opacity: 1; }
}

@keyframes mikuWipeAcross {
  0% { transform: translateX(130%) skewX(-16deg); }
  45% { transform: translateX(8%) skewX(-16deg); }
  100% { transform: translateX(-165%) skewX(-16deg); }
}

/* ------------------------------
   Page polish
   ------------------------------ */

#bg-video {
  opacity: 0.42 !important;
  filter: saturate(1.22) hue-rotate(120deg) brightness(0.82) !important;
}

.profile-card,
.miku-profile-card {
  overflow: visible !important;
  background: rgba(5, 20, 22, 0.86) !important;
  border: 1px solid var(--miku-line) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,0.48), 0 0 55px rgba(57, 197, 187, 0.16) !important;
  padding-top: 4.75rem !important;
  margin-top: -190px !important;
  backdrop-filter: blur(8px) !important;
}

.name-text {
  margin: 0.4rem 0 0.25rem !important;
  font-size: clamp(2rem, 5.2vw, 3.65rem) !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 2px !important;
  color: var(--miku-white) !important;
  -webkit-text-fill-color: var(--miku-white) !important;
  background: none !important;
  text-shadow: 0 0 10px rgba(125, 249, 255, 0.68), 0 0 32px rgba(57, 197, 187, 0.42) !important;
}

.avatar {
  border: 2px solid var(--miku-cyan) !important;
  background-color: #061315 !important;
  box-shadow: 0 0 0 8px rgba(57, 197, 187, 0.08), 0 0 35px rgba(57, 197, 187, 0.45) !important;
}

.bio,
.miku-accent,
.discord-note span {
  color: var(--miku-cyan-bright) !important;
  text-shadow: 0 0 12px rgba(57, 197, 187, 0.35) !important;
}

.cta,
.email-cta,
.cta-clone {
  background: linear-gradient(90deg, var(--miku-cyan), var(--miku-blue)) !important;
  color: #fff !important;
  box-shadow: 6px 6px 0 #020707, 0 0 22px rgba(57, 197, 187, 0.22) !important;
}

.cta:hover,
.email-cta:hover,
.cta-clone:hover {
  box-shadow: 10px 10px 0 var(--miku-cyan-bright), 0 0 34px rgba(125, 249, 255, 0.36) !important;
}

/* Normal matching button style for ONSOKU */
.onsoku-link-icon {
  padding: 6px !important;
  object-fit: contain !important;
}

.glow-ring.youtube::before { background: conic-gradient(#ff0000, #a30000, #ff4d4d, #ff0000) !important; }
.glow-ring.discord::before { background: conic-gradient(#5865F2, #8b5cf6, #5865F2) !important; }
.glow-ring.twitter::before { background: conic-gradient(#808080, #4d4d4d, #111111, #808080) !important; }
.glow-ring.twitch::before { background: conic-gradient(#9146FF, #4b00a9, #b782ff, #9146FF) !important; }
.glow-ring.onsoku::before { background: conic-gradient(#39c5bb, #ffe14d, #ff4fd8, #00b8ff, #39c5bb) !important; }

.music-player-panel,
.music-player-toggle {
  background: rgba(5, 23, 27, 0.94) !important;
  border: 1px solid rgba(125, 249, 255, 0.18) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.50), 0 0 38px rgba(57,197,187,0.18) !important;
}

.music-mini-disc-wrap::before,
.music-player-disc-shell::before {
  background: conic-gradient(var(--miku-cyan), var(--miku-cyan-bright), var(--miku-blue), var(--miku-cyan)) !important;
  opacity: 0.78 !important;
}

.music-play-btn {
  background: linear-gradient(135deg, var(--miku-cyan), var(--miku-blue)) !important;
  color: white !important;
  box-shadow: 0 12px 26px rgba(57,197,187,0.32), 0 0 20px rgba(125,249,255,0.20) !important;
}

.footer {
  color: rgba(225, 255, 255, 0.62) !important;
  text-shadow: 0 0 12px rgba(57, 197, 187, 0.16) !important;
  letter-spacing: 1px !important;
}

@media screen and (max-width: 600px) {
  :root {
    --banner-object-y: 0%;
  }

  .banner {
    height: 190px !important;
  }

  .miku-profile-card,
  .profile-card {
    background: rgba(8, 24, 27, 0.72) !important;
    margin-top: -72px !important;
    padding: 4.2rem 1rem 1.6rem !important;
  }

  .name-text {
    font-size: 2.25rem !important;
    letter-spacing: 1px !important;
  }

  .miku-loader-content {
    min-width: 88vw;
    padding: 1.45rem 1.2rem;
  }

  .miku-loader-mark {
    font-size: 4.2rem;
  }

  .miku-loader .loading-text {
    font-size: 1.45rem !important;
    letter-spacing: 3px !important;
  }

  .miku-loader-kicker,
  .miku-loader-subline {
    letter-spacing: 2px;
    font-size: 0.62rem;
  }
}


/* =======================================================
   V15 MIKU LOADER FINAL PATCH
   - cleaner ready state
   - centered title
   - no jitter/breathing on 01
   - no visible grid edge gaps
   - wipe always clears after reveal
   ======================================================= */

.page-loader.miku-loader,
#sonic-loader.miku-loader {
  background:
    radial-gradient(circle at 50% 46%, rgba(57, 197, 187, 0.22), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(255, 79, 216, 0.14), transparent 28%),
    linear-gradient(135deg, #010607 0%, #041618 48%, #010506 100%) !important;
}

.page-loader.miku-loader::before {
  inset: -95% !important;
  background:
    linear-gradient(rgba(125,249,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,249,255,0.08) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  transform: perspective(620px) rotateX(58deg) translateY(0) !important;
  transform-origin: 50% 100% !important;
  animation: mikuGridDriftV15 5.8s linear infinite !important;
  opacity: 0.62 !important;
}

.page-loader.miku-loader::after {
  inset: -18% 0 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.038) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, transparent 0%, rgba(125,249,255,0.08) 48%, rgba(255,79,216,0.07) 58%, transparent 100%) !important;
  transform: none !important;
  animation: mikuScanPulseV15 2.8s ease-in-out infinite !important;
}

.miku-loader-bg {
  inset: -10% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(125,249,255,0.12), transparent 31%),
    linear-gradient(90deg, transparent 0 49.85%, rgba(125,249,255,0.20) 49.95% 50.05%, transparent 50.15% 100%) !important;
  opacity: 0.78 !important;
}

.miku-loader-grid {
  width: min(70vw, 760px) !important;
  height: min(70vw, 760px) !important;
  opacity: 0.74 !important;
  animation: mikuOrbitSoft 11s linear infinite !important;
}

.miku-loader-ring {
  opacity: 0.58 !important;
  animation: mikuOrbitSoft 8s linear infinite reverse !important;
}

.miku-loader-scan {
  position: absolute;
  z-index: 4;
  width: min(92vw, 900px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,249,255,.65), transparent);
  box-shadow: 0 0 20px rgba(125,249,255,.55);
  opacity: .42;
  animation: mikuScanLineV15 2.6s ease-in-out infinite;
  pointer-events: none;
}

.miku-loader-content {
  min-width: min(90vw, 650px) !important;
  padding: 2rem 2.35rem 1.8rem !important;
  gap: 10px !important;
  overflow: visible !important;
  transform: translateX(0) !important;
}

.miku-loader-kicker {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  font-size: .68rem !important;
  letter-spacing: 3px !important;
}

.miku-loader-state {
  color: var(--miku-cyan-bright);
  text-shadow: 0 0 12px rgba(125,249,255,.35);
}

.miku-loader-mark {
  transform: none !important;
  animation: mikuMarkOpacityV15 1.45s ease-in-out infinite alternate !important;
  opacity: .62 !important;
  will-change: opacity !important;
}

.miku-loader .loading-text {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .1em !important;
  transform: none !important;
  text-align: center !important;
  letter-spacing: 6px !important;
  padding-left: 6px !important; /* optical centering for letter spacing */
  white-space: nowrap !important;
}

.loader-main-text {
  display: inline-block;
  text-align: center;
}

.miku-loader-subline {
  color: rgba(225,255,255,0.70) !important;
  min-height: 1em;
}

.miku-loader-progress {
  width: min(360px, 66vw);
  height: 3px;
  margin: .35rem auto .2rem;
  background: rgba(125,249,255,.12);
  border: 1px solid rgba(125,249,255,.18);
  overflow: hidden;
  box-shadow: 0 0 16px rgba(57,197,187,.15);
}

.miku-loader-progress span {
  display: block;
  width: 46%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--miku-cyan-bright), var(--miku-cyan), transparent);
  box-shadow: 0 0 18px rgba(125,249,255,.6);
  animation: mikuProgressV15 1.15s ease-in-out infinite;
}

.miku-loader-start-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  width: 100%;
  margin-top: .55rem;
  color: var(--miku-cyan-bright);
  text-shadow: 0 0 14px rgba(125,249,255,.45);
  font-family: 'Nippo', sans-serif;
  font-size: .78rem;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  opacity: 0;
}

.miku-loader-start-hint .start-line {
  display: block;
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,249,255,.72), transparent);
}

.page-loader.wait-for-input.miku-loader .miku-loader-start-hint {
  display: flex !important;
  animation: mikuReadyHintV15 1.05s ease-in-out infinite alternate;
}

.page-loader.wait-for-input.miku-loader .loading-text {
  cursor: pointer !important;
  color: var(--miku-white) !important;
  -webkit-text-fill-color: var(--miku-white) !important;
  letter-spacing: 5px !important;
  padding-left: 5px !important;
  animation: mikuReadyTextV15 1.05s ease-in-out infinite alternate !important;
}

.page-loader.wait-for-input.miku-loader .miku-loader-mark {
  animation: mikuMarkOpacityV15 1.45s ease-in-out infinite alternate !important;
}

.page-loader.wait-for-input.miku-loader .miku-loader-progress span {
  width: 100%;
  animation: mikuReadyBarV15 1.2s ease-in-out infinite alternate;
}

.page-loader.wait-for-input.miku-loader .music-toggle-ui {
  margin-top: .55rem !important;
}

.page-loader.start-wipe.miku-loader .miku-loader-content {
  opacity: 0 !important;
  transform: translateY(-8px) scale(.985) !important;
  filter: blur(5px) !important;
}

.page-loader.start-wipe.miku-loader .miku-loader-grid,
.page-loader.start-wipe.miku-loader .miku-loader-ring,
.page-loader.start-wipe.miku-loader .miku-loader-eq,
.page-loader.start-wipe.miku-loader .miku-loader-scan {
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}

.miku-wipe {
  inset: -35% !important;
  transform: translateX(130%) skewX(-14deg) !important;
}

.miku-wipe-a {
  width: 46% !important;
  right: -54% !important;
}

.miku-wipe-b {
  width: 38% !important;
  right: -48% !important;
}

.miku-wipe-c {
  width: 150% !important;
  right: -158% !important;
  background: rgba(1,9,10,.985) !important;
}

.page-loader.start-wipe.miku-loader .miku-wipe-a {
  animation: mikuWipeAcrossV15 .88s cubic-bezier(.72,0,.2,1) forwards !important;
}

.page-loader.start-wipe.miku-loader .miku-wipe-b {
  animation: mikuWipeAcrossV15 .96s cubic-bezier(.72,0,.2,1) .07s forwards !important;
}

.page-loader.start-wipe.miku-loader .miku-wipe-c {
  animation: mikuWipeAcrossV15 1.02s cubic-bezier(.72,0,.2,1) .15s forwards !important;
}

.page-loader.reveal-underneath.miku-loader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .34s ease, visibility .34s ease !important;
}

.page-loader.reveal-underneath.miku-loader .miku-wipe,
.page-loader.reveal-underneath.miku-loader .miku-loader-content,
.page-loader.reveal-underneath.miku-loader .miku-loader-grid,
.page-loader.reveal-underneath.miku-loader .miku-loader-ring,
.page-loader.reveal-underneath.miku-loader .miku-loader-eq,
.page-loader.reveal-underneath.miku-loader .miku-loader-scan,
.page-loader.reveal-underneath.miku-loader .miku-loader-bg {
  opacity: 0 !important;
  visibility: hidden !important;
}

.page-loader.finished.miku-loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes mikuGridDriftV15 {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 64px, 64px 0; }
}

@keyframes mikuScanPulseV15 {
  0%, 100% { opacity: .26; }
  50% { opacity: .42; }
}

@keyframes mikuScanLineV15 {
  0%, 100% { transform: translateY(-155px); opacity: .18; }
  50% { transform: translateY(155px); opacity: .52; }
}

@keyframes mikuMarkOpacityV15 {
  from { opacity: .44; }
  to { opacity: .82; }
}

@keyframes mikuProgressV15 {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(240%); }
}

@keyframes mikuReadyTextV15 {
  from { opacity: .82; text-shadow: 0 0 10px rgba(125,249,255,.58), 0 0 30px rgba(57,197,187,.34); }
  to { opacity: 1; text-shadow: 0 0 14px rgba(125,249,255,.95), 0 0 42px rgba(57,197,187,.55); }
}

@keyframes mikuReadyHintV15 {
  from { opacity: .64; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(-1px); }
}

@keyframes mikuReadyBarV15 {
  from { opacity: .62; filter: brightness(1); }
  to { opacity: 1; filter: brightness(1.35); }
}

@keyframes mikuWipeAcrossV15 {
  0% { transform: translateX(130%) skewX(-14deg); }
  45% { transform: translateX(4%) skewX(-14deg); }
  100% { transform: translateX(-210%) skewX(-14deg); }
}

@media screen and (max-width: 600px) {
  .miku-loader-content {
    min-width: 88vw !important;
    padding: 1.45rem 1.2rem !important;
  }
  .miku-loader .loading-text {
    white-space: normal !important;
    letter-spacing: 3px !important;
    padding-left: 3px !important;
  }
  .miku-loader-kicker {
    letter-spacing: 2px !important;
    font-size: .58rem !important;
  }
  .miku-loader-start-hint {
    font-size: .65rem !important;
    letter-spacing: 2px !important;
  }
  .miku-loader-start-hint .start-line {
    width: 34px;
  }
}


/* =======================================================
   MIKU V16 FINAL LOADER FIX
   - real block wipe, hidden until click
   - never traps the page after reveal
   - cleaner ready state
   - jpg assets only
   ======================================================= */

:root {
  --banner-object-y: 0%;
}

body.loading .banner,
body.loading .profile-card,
body.loading .container,
body.loading .footer {
  opacity: 0 !important;
}

body.loaded .banner,
body.loaded .profile-card,
body.loaded .container,
body.loaded .footer,
body:not(.loading) .banner,
body:not(.loading) .profile-card,
body:not(.loading) .container,
body:not(.loading) .footer {
  opacity: 1;
}

.banner {
  position: relative !important;
  height: 440px !important;
  overflow: hidden !important;
  background: #031a1c !important;
}

.banner-image {
  display: none !important;
}

.miku-banner-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% var(--banner-object-y) !important;
  z-index: 1 !important;
  filter: saturate(1.06) contrast(1.02) brightness(.94) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  -webkit-mask-position: bottom !important;
  mask-position: bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

.miku-profile-card,
.profile-card {
  overflow: visible !important;
}

.page-loader.miku-loader,
#sonic-loader.miku-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(57, 197, 187, 0.22), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(255, 79, 216, 0.14), transparent 27%),
    linear-gradient(135deg, #010607 0%, #041618 48%, #010506 100%) !important;
  transition: opacity .26s ease, visibility .26s ease !important;
}

.page-loader.finished.miku-loader,
#sonic-loader.finished.miku-loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.page-loader.miku-loader::before {
  content: "" !important;
  position: absolute !important;
  inset: -120% !important;
  z-index: 1 !important;
  background:
    linear-gradient(rgba(125,249,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,249,255,0.07) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  transform: perspective(680px) rotateX(58deg) translateY(0) !important;
  transform-origin: 50% 100% !important;
  animation: mikuGridDriftV16 6.5s linear infinite !important;
  opacity: .56 !important;
  pointer-events: none !important;
}

.page-loader.miku-loader::after {
  content: "" !important;
  position: absolute !important;
  inset: -18% 0 !important;
  z-index: 2 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.034) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, transparent 0%, rgba(125,249,255,0.055) 48%, rgba(255,79,216,0.055) 58%, transparent 100%) !important;
  transform: none !important;
  animation: mikuScanPulseV16 2.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

.miku-loader-bg {
  position: absolute !important;
  inset: -12% !important;
  z-index: 3 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(125,249,255,0.10), transparent 31%),
    linear-gradient(90deg, transparent 0 49.86%, rgba(125,249,255,0.18) 49.96% 50.04%, transparent 50.14% 100%) !important;
  opacity: .76 !important;
  pointer-events: none !important;
}

.miku-loader-grid {
  position: absolute !important;
  z-index: 4 !important;
  width: min(72vw, 780px) !important;
  height: min(72vw, 780px) !important;
  border: 1px solid rgba(125,249,255,.18) !important;
  border-radius: 50% !important;
  opacity: .66 !important;
  animation: mikuOrbitSoft 11s linear infinite !important;
  pointer-events: none !important;
}

.miku-loader-grid::before,
.miku-loader-grid::after {
  content: "" !important;
  position: absolute !important;
  inset: 18% !important;
  border: 1px dashed rgba(125,249,255,.18) !important;
  border-radius: 50% !important;
}

.miku-loader-grid::after {
  inset: 36% !important;
  border-style: solid !important;
  opacity: .55 !important;
}

.miku-loader-ring {
  position: absolute !important;
  z-index: 4 !important;
  width: min(52vw, 530px) !important;
  height: min(52vw, 530px) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,79,216,.14) !important;
  opacity: .44 !important;
  animation: mikuOrbitSoft 8s linear infinite reverse !important;
  pointer-events: none !important;
}

.miku-loader-scan {
  position: absolute !important;
  z-index: 5 !important;
  width: min(92vw, 900px) !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(125,249,255,.62), transparent) !important;
  box-shadow: 0 0 20px rgba(125,249,255,.5) !important;
  opacity: .38 !important;
  animation: mikuScanLineV16 2.6s ease-in-out infinite !important;
  pointer-events: none !important;
}

.miku-loader-eq {
  position: absolute !important;
  z-index: 8 !important;
  left: 50% !important;
  bottom: 26% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
  opacity: .8 !important;
  pointer-events: none !important;
}

.miku-loader-eq span {
  display: block !important;
  width: 5px !important;
  height: 30px !important;
  border-radius: 99px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.85), var(--miku-cyan-bright), var(--miku-cyan)) !important;
  box-shadow: 0 0 16px rgba(125,249,255,.48) !important;
  animation: mikuEqBars 1.05s ease-in-out infinite alternate !important;
}

.miku-loader-eq span:nth-child(2) { animation-delay: .12s !important; }
.miku-loader-eq span:nth-child(3) { animation-delay: .24s !important; }
.miku-loader-eq span:nth-child(4) { animation-delay: .36s !important; }
.miku-loader-eq span:nth-child(5) { animation-delay: .48s !important; }

.miku-loader-content {
  position: relative !important;
  z-index: 10 !important;
  min-width: min(90vw, 650px) !important;
  max-width: 650px !important;
  padding: 2rem 2.35rem 1.8rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, rgba(2,14,16,.86), rgba(5,35,38,.72)) !important;
  border: 1px solid rgba(125,249,255,.22) !important;
  box-shadow: 0 0 42px rgba(57,197,187,.18), inset 0 0 34px rgba(57,197,187,.055) !important;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)) !important;
  overflow: visible !important;
  transform: translateX(0) !important;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease !important;
}

.miku-loader-kicker {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  font-size: .68rem !important;
  letter-spacing: 3px !important;
  color: rgba(225,255,255,.72) !important;
  text-transform: uppercase !important;
}

.miku-loader-state {
  color: var(--miku-cyan-bright) !important;
  text-shadow: 0 0 12px rgba(125,249,255,.35) !important;
}

.miku-loader-mark {
  font-size: clamp(3.1rem, 7vw, 5rem) !important;
  line-height: .95 !important;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(125,249,255,.35) !important;
  text-stroke: 1px rgba(125,249,255,.35) !important;
  transform: none !important;
  animation: mikuMarkOpacityV16 1.55s ease-in-out infinite alternate !important;
  opacity: .56 !important;
  will-change: opacity !important;
}

.miku-loader .loading-text {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .1em !important;
  transform: none !important;
  text-align: center !important;
  letter-spacing: 6px !important;
  padding-left: 6px !important;
  white-space: nowrap !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: var(--miku-white) !important;
  -webkit-text-fill-color: var(--miku-white) !important;
  text-shadow: 0 0 14px rgba(125,249,255,.75), 0 0 38px rgba(57,197,187,.42) !important;
  transition: opacity .24s ease !important;
}

.loading-text.fade-out {
  opacity: 0 !important;
}

.loader-main-text {
  display: inline-block !important;
  text-align: center !important;
}

.miku-loader .dots::after {
  content: "" !important;
}

.miku-loader-subline {
  color: rgba(225,255,255,0.70) !important;
  min-height: 1em !important;
  font-size: .78rem !important;
  letter-spacing: 2.8px !important;
  text-transform: uppercase !important;
}

.miku-loader-progress {
  width: min(360px, 66vw) !important;
  height: 3px !important;
  margin: .35rem auto .2rem !important;
  background: rgba(125,249,255,.12) !important;
  border: 1px solid rgba(125,249,255,.18) !important;
  overflow: hidden !important;
  box-shadow: 0 0 16px rgba(57,197,187,.15) !important;
}

.miku-loader-progress span {
  display: block !important;
  width: 46% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, var(--miku-cyan-bright), var(--miku-cyan), transparent) !important;
  box-shadow: 0 0 18px rgba(125,249,255,.6) !important;
  animation: mikuProgressV16 1.15s ease-in-out infinite !important;
}

.miku-loader-start-hint {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .8rem !important;
  width: 100% !important;
  margin-top: .55rem !important;
  color: var(--miku-cyan-bright) !important;
  text-shadow: 0 0 14px rgba(125,249,255,.45) !important;
  font-family: 'Nippo', sans-serif !important;
  font-size: .78rem !important;
  letter-spacing: 2.8px !important;
  text-transform: uppercase !important;
  opacity: 0 !important;
}

.miku-loader-start-hint .start-line {
  display: block !important;
  width: 58px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(125,249,255,.72), transparent) !important;
}

.page-loader.wait-for-input.miku-loader .miku-loader-start-hint {
  display: flex !important;
  animation: mikuReadyHintV16 1.05s ease-in-out infinite alternate !important;
}

.page-loader.wait-for-input.miku-loader .loading-text {
  cursor: pointer !important;
  letter-spacing: 5px !important;
  padding-left: 5px !important;
  animation: mikuReadyTextV16 1.05s ease-in-out infinite alternate !important;
}

.page-loader.wait-for-input.miku-loader .miku-loader-progress span {
  width: 100% !important;
  animation: mikuReadyBarV16 1.2s ease-in-out infinite alternate !important;
}

.page-loader.wait-for-input.miku-loader .music-toggle-ui {
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: .55rem !important;
}

/* Kill the old diagonal wipes completely. */
.miku-wipe {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.miku-block-wipe {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.miku-block-wipe span {
  display: block !important;
  background:
    linear-gradient(135deg, rgba(3, 33, 36, .98), rgba(8, 78, 82, .98) 54%, rgba(2, 8, 10, .99)) !important;
  box-shadow: inset 0 0 0 1px rgba(125,249,255,.12), inset 0 0 34px rgba(57,197,187,.16) !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  will-change: transform !important;
}

.miku-block-wipe span:nth-child(even) {
  transform-origin: bottom !important;
}

.page-loader.start-wipe.miku-loader .miku-loader-content {
  opacity: 0 !important;
  transform: translateY(-8px) scale(.985) !important;
  filter: blur(5px) !important;
}

.page-loader.start-wipe.miku-loader .miku-loader-grid,
.page-loader.start-wipe.miku-loader .miku-loader-ring,
.page-loader.start-wipe.miku-loader .miku-loader-eq,
.page-loader.start-wipe.miku-loader .miku-loader-scan,
.page-loader.start-wipe.miku-loader .miku-loader-bg {
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}

.page-loader.start-wipe.miku-loader .miku-block-wipe {
  opacity: 1 !important;
  visibility: visible !important;
}

.page-loader.start-wipe.miku-loader .miku-block-wipe span {
  animation: mikuBlockWipeV16 1.22s cubic-bezier(.76, 0, .2, 1) forwards !important;
}

.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(1) { animation-delay: 0ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(2) { animation-delay: 35ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(3) { animation-delay: 70ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(4) { animation-delay: 105ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(5) { animation-delay: 55ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(6) { animation-delay: 90ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(7) { animation-delay: 125ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(8) { animation-delay: 160ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(9) { animation-delay: 110ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(10) { animation-delay: 145ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(11) { animation-delay: 180ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(12) { animation-delay: 215ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(13) { animation-delay: 165ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(14) { animation-delay: 200ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(15) { animation-delay: 235ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(16) { animation-delay: 270ms !important; }

.page-loader.reveal-underneath.miku-loader {
  background: transparent !important;
}

.page-loader.reveal-underneath.miku-loader::before,
.page-loader.reveal-underneath.miku-loader::after,
.page-loader.reveal-underneath.miku-loader .miku-loader-bg,
.page-loader.reveal-underneath.miku-loader .miku-loader-content,
.page-loader.reveal-underneath.miku-loader .miku-loader-grid,
.page-loader.reveal-underneath.miku-loader .miku-loader-ring,
.page-loader.reveal-underneath.miku-loader .miku-loader-eq,
.page-loader.reveal-underneath.miku-loader .miku-loader-scan {
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes mikuGridDriftV16 {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 64px, 64px 0; }
}

@keyframes mikuScanPulseV16 {
  0%, 100% { opacity: .23; }
  50% { opacity: .40; }
}

@keyframes mikuScanLineV16 {
  0%, 100% { transform: translateY(-155px); opacity: .15; }
  50% { transform: translateY(155px); opacity: .48; }
}

@keyframes mikuMarkOpacityV16 {
  from { opacity: .42; }
  to { opacity: .78; }
}

@keyframes mikuProgressV16 {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(240%); }
}

@keyframes mikuReadyTextV16 {
  from { opacity: .82; text-shadow: 0 0 10px rgba(125,249,255,.58), 0 0 30px rgba(57,197,187,.34); }
  to { opacity: 1; text-shadow: 0 0 14px rgba(125,249,255,.95), 0 0 42px rgba(57,197,187,.55); }
}

@keyframes mikuReadyHintV16 {
  from { opacity: .64; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(-1px); }
}

@keyframes mikuReadyBarV16 {
  from { opacity: .62; filter: brightness(1); }
  to { opacity: 1; filter: brightness(1.35); }
}

@keyframes mikuBlockWipeV16 {
  0% { transform: scaleY(0); }
  34% { transform: scaleY(1); }
  66% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

@media screen and (max-width: 600px) {
  .banner { height: 126px !important; }
  .miku-banner-layer {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .miku-loader-content {
    min-width: 88vw !important;
    padding: 1.45rem 1.2rem !important;
  }
  .miku-loader .loading-text {
    white-space: normal !important;
    letter-spacing: 3px !important;
    padding-left: 3px !important;
    font-size: 1.65rem !important;
  }
  .miku-loader-kicker {
    letter-spacing: 2px !important;
    font-size: .58rem !important;
  }
  .miku-loader-start-hint {
    font-size: .65rem !important;
    letter-spacing: 2px !important;
  }
  .miku-loader-start-hint .start-line {
    width: 34px !important;
  }
}

/* Keep block wipe visible until the final finished class. */
.page-loader.reveal-underneath.miku-loader,
#sonic-loader.reveal-underneath.miku-loader {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.page-loader.reveal-underneath.miku-loader .miku-block-wipe,
#sonic-loader.reveal-underneath.miku-loader .miku-block-wipe {
  opacity: 1 !important;
  visibility: visible !important;
}

.page-loader.finished.miku-loader,
#sonic-loader.finished.miku-loader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}


/* =======================================================
   MIKU V19 STABILITY PATCH
   - restores page layout from the stable v16 base
   - keeps JPG assets
   - background video visible without pushing content around
   - smoother click -> site reveal
   - banner object position locked to 30%
   ======================================================= */

:root {
  --banner-object-x: 50%;
  --banner-object-y: 30%;
  --miku-reveal-speed: .82s;
}

html {
  background: #02090a !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  background: transparent !important;
}

/* Background video: visible, fixed, and behind the page. */
#bg-video {
  display: block !important;
  visibility: visible !important;
  opacity: .52 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: -2 !important;
  pointer-events: none !important;
  filter: saturate(1.16) brightness(.62) contrast(1.08) hue-rotate(124deg) !important;
}

/* Page-wide dark Miku glass overlay. */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(57,197,187,.16), transparent 34%),
    radial-gradient(circle at 78% 44%, rgba(255,79,216,.10), transparent 32%),
    linear-gradient(180deg, rgba(1,8,10,.38), rgba(1,8,10,.72)) !important;
}

.sf-ticker-container,
.banner,
.profile-card,
.container,
.footer,
.site-music-player {
  position: relative !important;
  z-index: 2 !important;
}

.top-loader { z-index: 10000 !important; }
#sonic-loader.miku-loader { z-index: 99999 !important; }
.sf-popup-overlay { z-index: 999999 !important; }

/* Keep the banner frame stable, only move the JPG inside it. */
.banner {
  position: relative !important;
  height: 440px !important;
  overflow: hidden !important;
  background: rgba(2, 12, 14, .64) !important;
}

.banner-image {
  display: none !important;
}

.miku-banner-layer {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--banner-object-x) var(--banner-object-y) !important;
  z-index: 1 !important;
  filter: saturate(1.05) contrast(1.02) brightness(.96) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  -webkit-mask-position: bottom !important;
  mask-position: bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

.banner-dropshadow {
  z-index: 0 !important;
}

/* Page reveal: keep it hidden until click, then fade in under the block wipe. */
body:not(.loaded) .banner,
body:not(.loaded) .profile-card,
body:not(.loaded) .container,
body:not(.loaded) .footer,
body:not(.loaded) .site-music-player {
  opacity: 0 !important;
  transform: translateY(14px) scale(.992) !important;
  filter: blur(9px) !important;
}

body.loaded .banner,
body.loaded .profile-card,
body.loaded .container,
body.loaded .footer,
body.loaded .site-music-player {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
  transition:
    opacity var(--miku-reveal-speed) cubic-bezier(.18,.86,.22,1),
    transform var(--miku-reveal-speed) cubic-bezier(.18,.86,.22,1),
    filter var(--miku-reveal-speed) cubic-bezier(.18,.86,.22,1) !important;
}

/* Loader card text alignment: no italic/skew drift. */
.miku-loader-content {
  text-align: center !important;
  transform-origin: center center !important;
}

.miku-loader .loading-text {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: .18rem auto .45rem !important;
  padding: 0 !important;
  letter-spacing: 4.5px !important;
  line-height: 1.05 !important;
  font-style: normal !important;
  transform: none !important;
}

.loader-main-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  font-style: normal !important;
}

.miku-loader-mark {
  animation: mikuMarkOpacityV19 1.45s ease-in-out infinite alternate !important;
  transform: none !important;
}

.page-loader.wait-for-input.miku-loader .loading-text {
  cursor: pointer !important;
  animation: mikuReadyTextV19 1.05s ease-in-out infinite alternate !important;
}

.page-loader.wait-for-input.miku-loader .miku-loader-start-hint {
  display: flex !important;
  opacity: 1 !important;
  animation: mikuReadyHintV19 1.05s ease-in-out infinite alternate !important;
}

.page-loader.wait-for-input.miku-loader .miku-loader-progress span {
  width: 100% !important;
  transform: translateX(0) !important;
  animation: mikuReadyBarV19 1.15s ease-in-out infinite alternate !important;
}

/* Kill every older diagonal wipe layer. */
.miku-wipe,
.miku-wipe-a,
.miku-wipe-b,
.miku-wipe-c,
.yellow-panel,
.blue-panel,
.red-left,
.blue-shadow,
.blue-top,
.yellow-shadow,
.yellow-bottom {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Clean block wipe: covers, hands off, fades out. */
.miku-block-wipe {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: rgba(1, 7, 8, .22) !important;
}

.miku-block-wipe span {
  display: block !important;
  opacity: 0 !important;
  transform: scale(.94) translateY(12px) !important;
  background:
    linear-gradient(135deg, rgba(1,13,15,.99), rgba(3,45,49,.99) 44%, rgba(7,78,82,.98) 70%, rgba(1,8,10,.99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(125,249,255,.15),
    inset 0 0 38px rgba(57,197,187,.17),
    0 0 18px rgba(57,197,187,.12) !important;
  will-change: transform, opacity, filter !important;
}

.page-loader.start-wipe.miku-loader .miku-loader-content {
  opacity: 0 !important;
  transform: translateY(-10px) scale(.984) !important;
  filter: blur(7px) !important;
  transition: opacity .34s ease, transform .34s ease, filter .34s ease !important;
}

.page-loader.start-wipe.miku-loader .miku-loader-grid,
.page-loader.start-wipe.miku-loader .miku-loader-ring,
.page-loader.start-wipe.miku-loader .miku-loader-eq,
.page-loader.start-wipe.miku-loader .miku-loader-scan,
.page-loader.start-wipe.miku-loader .miku-loader-bg,
.page-loader.start-wipe.miku-loader::before,
.page-loader.start-wipe.miku-loader::after {
  opacity: 0 !important;
  transition: opacity .42s ease !important;
}

.page-loader.start-wipe.miku-loader .miku-block-wipe {
  opacity: 1 !important;
  visibility: visible !important;
}

.page-loader.start-wipe.miku-loader .miku-block-wipe span {
  animation: mikuBlockGateV19 1.64s cubic-bezier(.22,.82,.2,1) forwards !important;
}

.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(1) { animation-delay: 0ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(2) { animation-delay: 28ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(3) { animation-delay: 56ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(4) { animation-delay: 84ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(5) { animation-delay: 112ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(6) { animation-delay: 38ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(7) { animation-delay: 66ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(8) { animation-delay: 94ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(9) { animation-delay: 122ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(10) { animation-delay: 150ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(11) { animation-delay: 76ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(12) { animation-delay: 104ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(13) { animation-delay: 132ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(14) { animation-delay: 160ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(15) { animation-delay: 188ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(16) { animation-delay: 114ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(17) { animation-delay: 142ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(18) { animation-delay: 170ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(19) { animation-delay: 198ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(20) { animation-delay: 226ms !important; }

.page-loader.reveal-underneath.miku-loader {
  background: transparent !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.page-loader.reveal-underneath.miku-loader .miku-block-wipe {
  opacity: 1 !important;
  visibility: visible !important;
}

.page-loader.finished.miku-loader,
#sonic-loader.finished.miku-loader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

@keyframes mikuMarkOpacityV19 {
  from { opacity: .38; }
  to { opacity: .72; }
}

@keyframes mikuReadyTextV19 {
  from { opacity: .84; text-shadow: 0 0 10px rgba(125,249,255,.58), 0 0 30px rgba(57,197,187,.34); }
  to { opacity: 1; text-shadow: 0 0 14px rgba(125,249,255,.95), 0 0 42px rgba(57,197,187,.55); }
}

@keyframes mikuReadyHintV19 {
  from { opacity: .68; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(-1px); }
}

@keyframes mikuReadyBarV19 {
  from { opacity: .62; filter: brightness(1); }
  to { opacity: 1; filter: brightness(1.35); }
}

@keyframes mikuBlockGateV19 {
  0% { opacity: 0; transform: scale(.94) translateY(14px); filter: brightness(.95); }
  16% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1.12); }
  48% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
  72% { opacity: .92; transform: scale(1) translateY(0); filter: brightness(1.06); }
  100% { opacity: 0; transform: scale(.985) translateY(-8px); filter: brightness(1.2); }
}

@media screen and (max-width: 600px) {
  #bg-video { opacity: .46 !important; }
  .banner { height: 126px !important; }
  .miku-banner-layer {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .miku-loader .loading-text {
    letter-spacing: 2.4px !important;
    white-space: normal !important;
  }
}


/* =======================================================
   MIKU V20 POLISH PATCH
   - no expensive blur on reveal
   - centered loader title, dots no longer shift text
   - clean block gate transition
   - solid dark banner curve seam
   - fixed music player + popup viewport safety
   ======================================================= */

:root {
  --banner-object-x: 50%;
  --banner-object-y: 30%;
  --miku-reveal-speed: .42s;
  --miku-dark-solid: #02090a;
}

html,
body {
  background: var(--miku-dark-solid) !important;
}

/* Keep the background video behind everything without pushing layout. */
#bg-video {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: -3 !important;
  pointer-events: none !important;
  opacity: .48 !important;
  filter: saturate(1.08) brightness(.50) contrast(1.05) hue-rotate(122deg) !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(57,197,187,.12), transparent 34%),
    radial-gradient(circle at 78% 48%, rgba(255,79,216,.08), transparent 32%),
    linear-gradient(180deg, rgba(1,8,10,.62), rgba(1,8,10,.80)) !important;
}

/* Banner seam fix: use solid dark under the curve, no gray translucent bleed. */
.banner {
  position: relative !important;
  height: 440px !important;
  overflow: hidden !important;
  background: var(--miku-dark-solid) !important;
  isolation: isolate !important;
}

.banner-image,
.banner-dropshadow {
  display: none !important;
}

.miku-banner-layer {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--banner-object-x) var(--banner-object-y) !important;
  z-index: 1 !important;
  filter: saturate(1.05) contrast(1.02) brightness(.96) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.5%, transparent 100%) !important;
  -webkit-mask-position: bottom !important;
  mask-position: bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

.banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 44% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom, rgba(2,9,10,0) 0%, rgba(2,9,10,.26) 54%, rgba(2,9,10,.86) 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, transparent 0 78%, black 98%, black 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, transparent 0 78%, black 98%, black 100%) !important;
}

/* No blur/lag reveal. Everything fades in cleanly under the block gate. */
body:not(.loaded) .banner,
body:not(.loaded) .profile-card,
body:not(.loaded) .container,
body:not(.loaded) .footer,
body:not(.loaded) .site-music-player {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  filter: none !important;
}

body.loaded .banner,
body.loaded .profile-card,
body.loaded .container,
body.loaded .footer,
body.loaded .site-music-player {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: none !important;
  transition:
    opacity var(--miku-reveal-speed) ease-out,
    transform var(--miku-reveal-speed) cubic-bezier(.18,.86,.22,1) !important;
}

/* Restore player to a real fixed overlay. v19 accidentally made this relative. */
.site-music-player {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  top: auto !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: flex-end !important;
  pointer-events: auto !important;
}

.music-player-panel {
  max-height: calc(100vh - 48px) !important;
}

/* Popup should never get cut off on short screens. */
.sf-popup-overlay {
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 54px 16px 26px !important;
}

.sf-popup-card {
  max-height: calc(100vh - 84px) !important;
  overflow-y: auto !important;
}

/* Loader title centering: dots no longer reserve width and pull text left. */
.miku-loader-content {
  text-align: center !important;
  transform-origin: center center !important;
}

.miku-loader .loading-text {
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 1fr !important;
  margin: .18rem auto .45rem !important;
  padding: 0 !important;
  letter-spacing: 4.5px !important;
  line-height: 1.05 !important;
  font-style: normal !important;
  transform: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.loader-main-text {
  display: block !important;
  grid-area: 1 / 1 !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: translateX(0) !important;
  text-align: center !important;
  font-style: normal !important;
}

.miku-loader .dots,
.loading-text .dots {
  display: none !important;
  width: 0 !important;
}

/* Loader start: no laggy blur while leaving. */
.page-loader.start-wipe.miku-loader .miku-loader-content {
  opacity: 0 !important;
  transform: translateY(-8px) scale(.99) !important;
  filter: none !important;
  transition: opacity .22s ease-out, transform .22s ease-out !important;
}

.page-loader.start-wipe.miku-loader .miku-loader-grid,
.page-loader.start-wipe.miku-loader .miku-loader-ring,
.page-loader.start-wipe.miku-loader .miku-loader-eq,
.page-loader.start-wipe.miku-loader .miku-loader-scan,
.page-loader.start-wipe.miku-loader .miku-loader-bg,
.page-loader.start-wipe.miku-loader::before,
.page-loader.start-wipe.miku-loader::after {
  opacity: 0 !important;
  transition: opacity .24s ease-out !important;
}

/* Proper block gate: rectangular tiles cover first, then release over the loaded page. */
.miku-block-wipe {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
}

.miku-block-wipe span {
  display: block !important;
  opacity: 0 !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  background:
    linear-gradient(135deg, rgba(1,13,15,1), rgba(3,45,49,1) 42%, rgba(7,78,82,.99) 70%, rgba(1,8,10,1)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(125,249,255,.14),
    inset 0 0 28px rgba(57,197,187,.12) !important;
  will-change: transform, opacity !important;
}

.miku-block-wipe span:nth-child(even) {
  transform-origin: bottom !important;
}

.page-loader.start-wipe.miku-loader .miku-block-wipe {
  opacity: 1 !important;
  visibility: visible !important;
}

.page-loader.start-wipe.miku-loader .miku-block-wipe span {
  animation: mikuBlockGateV20 1.38s cubic-bezier(.2,.76,.18,1) forwards !important;
}

/* Slight diagonal rhythm, but still clean rectangular blocks. */
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(1) { animation-delay: 0ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(2) { animation-delay: 22ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(3) { animation-delay: 44ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(4) { animation-delay: 66ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(5) { animation-delay: 88ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(6) { animation-delay: 32ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(7) { animation-delay: 54ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(8) { animation-delay: 76ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(9) { animation-delay: 98ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(10) { animation-delay: 120ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(11) { animation-delay: 64ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(12) { animation-delay: 86ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(13) { animation-delay: 108ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(14) { animation-delay: 130ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(15) { animation-delay: 152ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(16) { animation-delay: 96ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(17) { animation-delay: 118ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(18) { animation-delay: 140ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(19) { animation-delay: 162ms !important; }
.page-loader.start-wipe.miku-loader .miku-block-wipe span:nth-child(20) { animation-delay: 184ms !important; }

.page-loader.reveal-underneath.miku-loader,
#sonic-loader.reveal-underneath.miku-loader {
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.page-loader.reveal-underneath.miku-loader .miku-block-wipe,
#sonic-loader.reveal-underneath.miku-loader .miku-block-wipe {
  opacity: 1 !important;
  visibility: visible !important;
}

.page-loader.finished.miku-loader,
#sonic-loader.finished.miku-loader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

@keyframes mikuBlockGateV20 {
  0% { opacity: 0; transform: scaleY(0); }
  22% { opacity: 1; transform: scaleY(1); }
  56% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0); }
}

@media screen and (max-width: 768px) {
  .site-music-player {
    right: 12px !important;
    bottom: 12px !important;
  }
  .music-player-panel {
    position: absolute !important;
    right: 0 !important;
    bottom: 76px !important;
    max-height: calc(100vh - 100px) !important;
  }
}

@media screen and (max-width: 600px) {
  .banner { height: 126px !important; }
  .miku-banner-layer {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .banner::after { display: none !important; }
}


/* =======================================================
   MIKU V21 BANNER CURVE TRANSPARENCY PATCH
   Keeps the curved banner image, but makes the area outside
   the curve transparent so the background video shows through.
   ======================================================= */

:root {
  --banner-object-x: 50%;
  --banner-object-y: 30%;
}

/* The banner frame itself must be transparent; only the JPG is masked. */
.banner {
  position: relative !important;
  height: 440px !important;
  overflow: hidden !important;
  background: transparent !important;
  isolation: auto !important;
}

/* Hide legacy overlay/curve helpers that can create the gray rectangle. */
.banner-image,
.banner-curve,
.banner-dropshadow,
.banner::before,
.banner::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* Only the image is curved. Everything outside the mask reveals the bg video. */
.miku-banner-layer {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--banner-object-x) var(--banner-object-y) !important;
  z-index: 1 !important;
  filter: saturate(1.05) contrast(1.02) brightness(.96) !important;
  background: transparent !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.35%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 99.35%, transparent 100%) !important;
  -webkit-mask-position: bottom !important;
  mask-position: bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

@media screen and (max-width: 600px) {
  .banner {
    height: 126px !important;
    background: transparent !important;
  }
  .miku-banner-layer {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    object-position: 50% 30% !important;
  }
}


/* =========================================
   V25 FINAL TWEAKS: SOCIAL ALBUM ICONS, PLAYLIST, AVATAR LIFT
   ========================================= */

/* Pull avatar up so ~25-35% sits above the card, like the original layout */
.miku-profile-card,
.profile-card {
  padding-top: 5.15rem !important;
}

.miku-profile-card .avatar,
.profile-card .avatar {
  margin-top: -136px !important;
  margin-bottom: 14px !important;
}

.miku-profile-card .verified-wrapper,
.profile-card .verified-wrapper {
  right: 13px !important;
  bottom: 19px !important;
}

@media screen and (max-width: 600px) {
  .miku-profile-card,
  .profile-card {
    padding-top: 3.9rem !important;
  }

  .miku-profile-card .avatar,
  .profile-card .avatar {
    margin-top: -86px !important;
    margin-bottom: 10px !important;
  }
}

/* Album-art icon treatment inside the big link cards */
.glow-ring.twitter .link-icon,
.glow-ring.youtube .link-icon,
.glow-ring.twitch .link-icon,
.glow-ring.discord .link-icon {
  padding: 0 !important;
  object-fit: cover !important;
  background: #02080a !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 0 0 2px rgba(2, 8, 10, 0.95),
    0 8px 22px rgba(0, 0, 0, 0.42) !important;
}

/* Album-specific glow colors */
.glow-ring.twitter::before {
  background: conic-gradient(#005dff, #fff200, #e60012, #40d66d, #005dff) !important;
}
.glow-ring.youtube::before {
  background: conic-gradient(#ff00a8, #00eaff, #c9b8ff, #05050a, #ff00a8) !important;
}
.glow-ring.discord::before {
  background: conic-gradient(#005dff, #fff200, #39ff8a, #ff4fd8, #005dff) !important;
}
.glow-ring.twitch::before {
  background: conic-gradient(#ff91c8, #8bdcff, #fff0a6, #7771d9, #ff91c8) !important;
}

.glow-ring.twitter::after { background: rgba(0, 93, 255, 0.26) !important; }
.glow-ring.youtube::after { background: rgba(255, 0, 168, 0.24) !important; }
.glow-ring.discord::after { background: rgba(0, 93, 255, 0.24) !important; }
.glow-ring.twitch::after { background: rgba(255, 145, 200, 0.25) !important; }

/* Top social circles now use the same album-art language as the cards */
.socials-circles {
  gap: 0.68rem !important;
  align-items: center !important;
}

.socials-circles .social-circle {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  isolation: isolate !important;
  cursor: pointer !important;
  transition: transform 0.22s ease, filter 0.22s ease !important;
}

.socials-circles .social-circle::before {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: inherit !important;
  filter: blur(7px) !important;
  opacity: 0.74 !important;
  animation: spin 6s linear infinite !important;
  z-index: -1 !important;
}

.socials-circles .social-circle::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background: rgba(2, 8, 10, 0.92) !important;
  z-index: -1 !important;
}

.socials-circles .social-circle img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: #02080a !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 0 0 2px rgba(2, 8, 10, 0.88) !important;
}

.socials-circles .social-circle:hover {
  transform: translateY(-3px) scale(1.06) !important;
  filter: brightness(1.12) !important;
}

.socials-circles .social-twitter::before {
  background: conic-gradient(#005dff, #fff200, #e60012, #40d66d, #005dff) !important;
}
.socials-circles .social-youtube::before {
  background: conic-gradient(#ff00a8, #00eaff, #c9b8ff, #05050a, #ff00a8) !important;
}
.socials-circles .social-discord::before {
  background: conic-gradient(#005dff, #fff200, #39ff8a, #ff4fd8, #005dff) !important;
}
.socials-circles .social-twitch::before {
  background: conic-gradient(#ff91c8, #8bdcff, #fff0a6, #7771d9, #ff91c8) !important;
}

/* Music player: new first track has its own art, and controls are active now */
.music-icon-btn:not(.is-disabled) {
  opacity: 1 !important;
}

.music-icon-btn:not(.is-disabled):hover {
  transform: translateY(-3px) !important;
}