:root {
   --bg: #050510;
   --card-bg: rgba(5, 5, 16, 0.9);
   --accent: #ff6a00;
   --accent-soft: rgba(255, 106, 0, 0.18);
   --text-main: #f7f7ff;
   --text-muted: #a3a3c2;
   --border-subtle: rgba(255, 255, 255, 0.08);
   --radius-lg: 22px;
   --radius-pill: 999px;
   --shadow-soft: 0 22px 55px rgba(0, 0, 0, 0.6);
   --blur: 22px;
 }

 * {
   box-sizing: border-box;
 }

 body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
      "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, #31115f 0, #050510 48%),
      radial-gradient(circle at bottom right, #0b4f6d 0, #050510 45%);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    padding: 32px 16px;
    position: relative;
    overflow-x: hidden;
  }

body.lightbox-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(6px 6px at 20% 30%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(5px 5px at 60% 70%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(7px 7px at 50% 50%, rgba(255, 255, 255, 1), transparent),
    radial-gradient(5px 5px at 80% 10%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(6px 6px at 90% 60%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(5px 5px at 33% 80%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(7px 7px at 15% 50%, rgba(255, 255, 255, 1), transparent),
    radial-gradient(5px 5px at 70% 20%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(6px 6px at 40% 90%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(5px 5px at 25% 15%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(6px 6px at 10% 10%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(5px 5px at 30% 60%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(7px 7px at 45% 20%, rgba(255, 255, 255, 1), transparent),
    radial-gradient(5px 5px at 75% 45%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(6px 6px at 55% 80%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(5px 5px at 85% 30%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(6px 6px at 15% 85%, rgba(255, 255, 255, 0.95), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: starTwinkle 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(14px 14px at 20% 30%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(12px 12px at 60% 70%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(16px 16px at 50% 50%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(12px 12px at 80% 10%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(14px 14px at 90% 60%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(12px 12px at 33% 80%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(16px 16px at 15% 50%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(12px 12px at 70% 20%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(14px 14px at 40% 90%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(12px 12px at 25% 15%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(18px 18px at 10% 10%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(16px 16px at 30% 60%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(20px 20px at 45% 20%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(16px 16px at 75% 45%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(18px 18px at 55% 80%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(16px 16px at 85% 30%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(18px 18px at 15% 85%, rgba(255, 255, 255, 0.55), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(10px);
  opacity: 0.0;
  animation: starGlow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes starGlow {
  0%, 100% {
    opacity: 0.1;
    filter: blur(6px);
  }
  50% {
    opacity: 0.45;
    filter: blur(12px);
  }
}

.frame {
    margin: auto;
    width: 100%;
    max-width: 960px;
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.02)
      ),
      radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-soft);
    padding: 26px 26px 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }

 .frame::before,
 .frame::after {
   content: "";
   position: absolute;
   border-radius: 50%;
   filter: blur(42px);
   opacity: 0.8;
   z-index: -1;
 }

 .frame::before {
   width: 360px;
   height: 360px;
   background: radial-gradient(circle, rgba(75, 0, 130, 0.9), transparent);
   top: -140px;
   right: -120px;
 }

 .frame::after {
   width: 260px;
   height: 260px;
   background: radial-gradient(circle, rgba(0, 200, 255, 0.9), transparent);
   bottom: -120px;
   left: -80px;
 }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

 .identity {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .avatar {
   width: 56px;
   height: 56px;
   border-radius: 24px;
  background-image: url("assets/channels4_profile-a076875d-5c9c-415e-bfd7-27d58a5b73e6.png");
  background-size: cover;
  background-position: center;
   border: 0px solid rgba(255, 255, 255, 0.28);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9);
 }

 .name-block h1 {
   margin: 0;
   font-size: 24px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }

 .name-block p {
   margin: 4px 0 0;
   font-size: 13px;
   color: var(--text-muted);
 }

 .matrix-chip {
   font-size: 12px;
   padding: 8px 14px;
   border-radius: var(--radius-pill);
   background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border-subtle);
   color: var(--text-muted);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
 }

 .matrix-chip span.matrix-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: radial-gradient(circle, #3affb3 0, #00a77b 60%, #003320 100%);
   box-shadow: 0 0 0 2px rgba(58, 255, 179, 0.25);
 }

 .matrix-chip code {
   font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
   font-size: 11px;
   color: var(--text-main);
   background: transparent;
   padding: 0;
 }

 .grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 14px;
 }

 @media (min-width: 720px) {
   .grid {
     grid-template-columns: 1fr 1fr;
   }
 }

 .link-card {
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--card-bg);
   border: 1px solid var(--border-subtle);
   display: flex;
   min-height: 180px;
   isolation: isolate;
   cursor: pointer;
   text-decoration: none;
   color: inherit;
   transition:
     transform 160ms ease-out,
     box-shadow 160ms ease-out,
     border-color 160ms ease-out,
     background 160ms ease-out;
 }

 .link-card::before {
   content: "";
   position: absolute;
   inset: 0;
  background-size: cover;
  background-position: center 10%;
  opacity: 0.32;
   transition: opacity 160ms ease-out, transform 200ms ease-out;
   transform: scale(1.02);
 }

 .link-card[data-bg="youtube"]::before {
  background-image: url("assets/G8cNM4ZXIAE7cRK-7c768d4d-6ca7-4e0f-8051-e7ad98dfd0e6.png");
 }

 .link-card[data-bg="soundcloud"]::before {
  background-image: url("assets/G1uOp-LXwAAJq__-62f5eb08-200f-4d69-8081-aff57abfe6f4.png");
  background-position: center 10%;
 }

 .link-card[data-bg="bsky"]::before {
  background-image: url("assets/G1pOU0iXgAAwaJz-987fd284-4c96-4bf8-8939-5cb9d5e3c36f.png");
  background-position: center 40%;
 }

 .link-card[data-bg="matrix"]::before {
  background-image: url("assets/G3GZr5KWkAAvTWy-96bba7b4-2e60-45f0-83d9-bfc2a7643a96.png");
 }
 .link-card[data-bg="gallery"]::before {
  background-image: url("assets/VRChat_2025-06-11_19-29-29.369_2160x3840.png");
  background-position: center 10%;
 }

 .link-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(
       circle at top left,
       rgba(255, 255, 255, 0.35),
       transparent 55%
     ),
     radial-gradient(
       circle at bottom right,
       rgba(5, 5, 16, 0.95),
       rgba(5, 5, 16, 1)
     );
   mix-blend-mode: soft-light;
   opacity: 0.65;
   transition: opacity 160ms ease-out;
 }

 .link-card:hover {
   transform: translateY(-4px) scale(1.01);
   box-shadow: 0 26px 65px rgba(0, 0, 0, 0.9);
   border-color: rgba(255, 255, 255, 0.34);
   background: rgba(5, 5, 16, 0.98);
 }

 .link-card:hover::before {
   opacity: 0.5;
   transform: scale(1.06);
 }

 .link-card:hover::after {
   opacity: 0.82;
 }

 .link-inner {
   position: relative;
   z-index: 1;
   display: flex;
   flex: 1;
   padding: 18px 18px 18px 16px;
   gap: 12px;
   align-items: center;
 }

 .icon-pill {
   flex: 0 0 54px;
   height: 54px;
   border-radius: 20px;
   background: rgba(0, 0, 0, 0.66);
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, 0.24);
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.7);
 }

 .icon-pill svg {
   width: 28px;
   height: 28px;
 }

 .icon-pill.soundcloud {
   background: radial-gradient(circle at 0 0, #ffffff 0, transparent 46%),
     linear-gradient(135deg, #ff6a00, #b33200);
   border-color: rgba(255, 255, 255, 0.38);
 }

 .icon-pill.matrix {
   background: linear-gradient(135deg, #061520, #00171f);
 }

 .icon-pill.youtube {
   background: linear-gradient(135deg, #ff0000, #8b0000);
 }

 .icon-pill.bsky {
   background: linear-gradient(135deg, #00b0ff, #0050e5);
 }

 .text-block {
   flex: 1;
   min-width: 0;
 }

 .service-label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 4px;
 }

 .service-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--accent-soft);
 }

 .service-name {
   font-size: 18px;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   margin-bottom: 3px;
 }

 .service-handle {
   font-size: 13px;
   color: var(--text-muted);
 }

 .cta {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: var(--text-main);
   white-space: nowrap;
 }

 .cta-pill {
   padding: 6px 11px;
   border-radius: var(--radius-pill);
   border: 1px solid rgba(255, 255, 255, 0.22);
   background: radial-gradient(
     circle,
     rgba(255, 255, 255, 0.08),
     rgba(0, 0, 0, 0.85)
   );
 }

 .cta-arrow {
   width: 17px;
   height: 17px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.4);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   background: rgba(0, 0, 0, 0.7);
 }

 footer {
   margin-top: 18px;
   text-align: right;
   font-size: 11px;
   color: var(--text-muted);
   opacity: 0.85;
 }

a {
  color: inherit;
}

/* Gallery Page Styles */
.back-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.back-pill {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08),
    rgba(0, 0, 0, 0.85)
  );
  font-size: 13px;
  transition: all 160ms ease-out;
}

.back-pill:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15),
    rgba(0, 0, 0, 0.9)
  );
}

  .photo-grid {
    column-count: 2;
    column-gap: 24px; 
    margin-top: 24px;
  }
  
  @media (max-width: 600px) {
    .photo-grid {
      column-count: 1;
      column-gap: 20px;
    }
  }
  
  .photo-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: transform 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out;
    width: 100%;
    height: auto;
    break-inside: avoid;
    margin-bottom: 24px; 
  }
  
  @media (max-width: 600px) {
    .photo-item {
      margin-bottom: 20px;
    }
  }
  
  .photo-item img {
    width: 100%;
    height: auto; 
    display: block;
  }
  
  .photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 16px;
    opacity: 0;
    transition: opacity 160ms ease-out;
  }
  
  .photo-item:hover .photo-overlay {
    opacity: 1;
  }
  
  .photo-date {
    font-size: 12px;
    color: var(--text-main);
    letter-spacing: 0.05em;
  }

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    box-sizing: border-box;
  }
  
  .lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto; 
    padding: 40px 20px;
    width: 100%;
    min-height: min-content;
    box-sizing: border-box;
  }
  
  .lightbox-img {
    display: block;
    max-width: 95vw; 
    max-height: 95vh; 
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
    animation: lightboxFadeIn 200ms ease-out;
  }
  
  @media (max-width: 768px) {
    .lightbox-img {
      max-width: 85vw;
      max-height: 60vh;
    }
  }
  @keyframes lightboxFadeIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .lightbox-close {
    position: fixed; 
    top: 20px;
    right: 20px; 
    font-size: 40px;
    font-weight: 300;
    color: var(--text-main);
    cursor: pointer;
    z-index: 10000;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 160ms ease-out;
  }
  
  .lightbox-close:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
  }