:root {
      --ink: #050405;
      --accent: #dc1226;
      --frost: #e9eef5;
      --pointer-x: 50vw;
      --pointer-y: 50vh;
    }

    html {
      zoom: 0.85;
    }

    * {
      box-sizing: border-box;
      cursor: none !important;
    }

    .custom-cursor {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 32px;
      height: 32px;
      margin: -16px 0 0 -16px;
      pointer-events: none;
      opacity: 0;
      background: url("cursor.png") center / contain no-repeat;
      will-change: transform;
      transition: opacity .2s ease;
    }

    .custom-cursor.is-visible {
      opacity: 1;
    }

    @media (pointer: coarse) {

      *,
      *::before,
      *::after {
        cursor: auto !important;
      }

      .custom-cursor {
        display: none;
      }
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--ink);
      -webkit-user-select: none;
      user-select: none;
    }

    body {
      color: var(--frost);
      font-family: Arial, Helvetica, sans-serif;
    }

    button {
      font: inherit;
    }

    @keyframes grainShift {
      0% {
        transform: translate3d(-1.5%, -1%, 0);
      }

      100% {
        transform: translate3d(1.5%, 1%, 0);
      }
    }

    @keyframes snowFall {
      from {
        transform: translate3d(0, -4vh, 0);
      }

      to {
        transform: translate3d(var(--drift), 108vh, 0);
      }
    }

    @keyframes cdDrop {
      from {
        opacity: 0;
        scale: .82;
        filter: blur(8px);
      }

      to {
        opacity: 1;
        scale: 1;
        filter: blur(0);
      }
    }

    @keyframes cleanReveal {
      from {
        opacity: 0;
        translate: 0 15px;
        filter: blur(5px);
      }

      to {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }

    @keyframes cleanRevealLeft {
      from {
        opacity: 0;
        translate: -12px 0;
        filter: blur(4px);
      }

      to {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }

    @keyframes cleanRevealDown {
      from {
        opacity: 0;
        translate: 0 -15px;
        filter: blur(5px);
      }

      to {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }

    @keyframes lineReveal {
      from {
        opacity: 0;
        translate: 0 6px;
        filter: blur(4px);
        clip-path: inset(0 100% 0 0);
      }

      to {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
        clip-path: inset(0 0 0 0);
      }
    }

    @keyframes entryExit {
      from {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }

      to {
        opacity: 0;
        translate: 0 -12px;
        filter: blur(8px);
      }
    }

    @keyframes entryBreath {

      0%,
      100% {
        opacity: .82;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.03);
      }
    }

    .scene {
      position: relative;
      min-height: 100svh;
      isolation: isolate;
      background: #030303;
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: -1;
      opacity: .07;
      background:
        repeating-radial-gradient(circle at 31% 37%, transparent 0 1px, rgba(255, 255, 255, .08) 1px 2px, transparent 2px 4px),
        repeating-linear-gradient(121deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 5px);
      background-size: 19px 21px, 13px 17px;
      mix-blend-mode: screen;
      animation: grainShift 9s steps(8) infinite alternate;
    }

    .bg-canvas {
      position: fixed;
      inset: -34px;
      z-index: -3;
      width: calc(100% + 68px);
      height: calc(100% + 68px);
      pointer-events: none;
      filter: blur(80px) brightness(.34) saturate(.75);
      transition: filter 1.35s cubic-bezier(.16, 1, .3, 1);
    }

    .entered .bg-canvas {
      filter: blur(80px) brightness(.66) saturate(1.02);
    }

    .scene::before {
      content: "";
      position: fixed;
      inset: -18px;
      z-index: -2;
      background:
        radial-gradient(115% 95% at 68% 30%, rgba(0, 0, 0, 0), rgba(1, 2, 4, .34) 72%, rgba(0, 1, 3, .55) 100%),
        linear-gradient(rgba(1, 2, 4, .2), rgba(0, 1, 3, .42));
      transition: filter 1.35s cubic-bezier(.16, 1, .3, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1);
    }

    .entered.scene::before {
      background:
        radial-gradient(115% 95% at 68% 30%, rgba(0, 0, 0, 0), rgba(1, 2, 4, .22) 70%, rgba(0, 1, 3, .5) 100%),
        linear-gradient(rgba(1, 2, 4, .12), rgba(0, 1, 3, .32));
    }

    .pointer-glow {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background: radial-gradient(340px circle at var(--pointer-x) var(--pointer-y), rgba(196, 18, 38, .12), transparent 70%);
    }

    .snowfall {
      position: fixed;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
      opacity: .72;
    }

    .snowflake {
      position: absolute;
      top: -4px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .75);
      box-shadow: 0 0 6px rgba(255, 255, 255, .18);
      animation: snowFall linear infinite;
      will-change: transform;
    }

    
    .music-player {
      position: fixed;
      top: auto;
      right: auto;
      bottom: 24px;
      left: 26px;
      z-index: 9;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 163px);
      grid-template-areas:
        "meta controls eq"
        "progress progress progress"
        "status status status";
      align-items: center;
      gap: 8px 23px;
      width: clamp(412px, 41vw, 575px);
      padding: 15px 18px 10px;
      transform: translateY(16px);
      opacity: 0;
      transition: opacity .8s ease .3s, transform .9s cubic-bezier(.16, 1, .3, 1) .3s;
    }

    .entered .music-player {
      transform: translateY(0);
      opacity: 1;
    }

    .music-player>* {
      position: relative;
      z-index: 1;
    }

    .track-line {
      grid-area: meta;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 1px;
      min-width: 0;
    }

    .track-title {
      width: 100%;
      min-width: 0;
      overflow: hidden;
      color: rgba(255, 255, 255, .97);
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.01em;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-transform: lowercase;
      text-shadow: 0 2px 14px rgba(0, 0, 0, .85), 0 0 30px rgba(0, 0, 0, .5);
      transition: opacity .3s ease;
    }

    .track-subtitle {
      width: 100%;
      overflow: hidden;
      color: rgba(255, 255, 255, .5);
      font: italic 400 14.5px/1.3 Georgia, "Times New Roman", serif;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-shadow: 0 2px 12px rgba(0, 0, 0, .8), 0 0 24px rgba(0, 0, 0, .4);
      transition: opacity .3s ease;
    }

    .player-controls {
      grid-area: controls;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
    }

    .player-control {
      display: grid;
      width: 35px;
      height: 35px;
      padding: 0;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: rgba(255, 255, 255, .72);
      background: transparent;
      transition: transform .25s cubic-bezier(.16, 1, .3, 1), color .2s ease, background .2s ease;
    }

    .player-control:hover {
      color: #fff;
      background: rgba(255, 255, 255, .1);
      transform: scale(1.08);
    }

    .player-control.primary {
      width: 40px;
      height: 40px;
      color: #0c0d10;
      background: #fff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    }

    .player-control.primary:hover {
      transform: scale(1.06);
      background: #fff;
      color: #0c0d10;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .42);
    }

    .player-icon {
      display: block;
      width: 19px;
      height: 19px;
      fill: currentColor;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .player-control.primary .player-icon {
      width: 15px;
      height: 15px;
      stroke-width: 2;
    }

    .icon-pause {
      display: none;
    }

    .is-playing .icon-play {
      display: none;
    }

    .is-playing .icon-pause {
      display: block;
    }

    .player-control:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .8);
      outline-offset: 2px;
    }

    .progress {
      grid-area: progress;
      position: relative;
      z-index: 4;
      display: block;
      width: 100%;
      height: 18px;
      margin: 3px 0 -8px;
      padding: 0;
      appearance: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      outline: none;
      cursor: pointer;
      pointer-events: auto;
    }

    .progress::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, #fff var(--played, 0%), rgba(255, 255, 255, .3) var(--played, 0%));
    }

    .progress::-webkit-slider-thumb {
      width: 9px;
      height: 9px;
      margin-top: -3px;
      appearance: none;
      border: 0;
      border-radius: 50%;
      background: #fff;
      box-shadow: none;
      opacity: 0;
      transition: opacity .18s ease, transform .18s ease;
    }

    .progress:hover::-webkit-slider-thumb,
    .progress:focus-visible::-webkit-slider-thumb,
    .progress:active::-webkit-slider-thumb {
      opacity: .9;
    }

    .progress::-moz-range-track {
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .3);
    }

    .progress::-moz-range-progress {
      height: 2px;
      border-radius: 999px;
      background: #fff;
    }

    .progress::-moz-range-thumb {
      width: 9px;
      height: 9px;
      border: 0;
      border-radius: 50%;
      background: #fff;
      box-shadow: none;
      opacity: .9;
      transition: opacity .18s ease;
    }

    .track-status {
      grid-area: status;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      color: rgba(255, 255, 255, .5);
      font: 12.5px/1 monospace;
      letter-spacing: .06em;
    }

    .track-status .remaining {
      justify-self: end;
    }

    .track-line,
    .player-controls,
    .progress,
    .track-status {
      transition: opacity .3s ease;
    }

    .music-player .track-line,
    .music-player .player-controls,
    .music-player .progress,
    .music-player .track-status {
      opacity: 0;
    }

    .entered .music-player .track-line {
      animation: cleanRevealLeft .65s .5s cubic-bezier(.16, 1, .3, 1) both;
    }

    .entered .music-player .player-controls {
      animation: cleanReveal .62s .56s cubic-bezier(.16, 1, .3, 1) both;
    }

    .entered .music-player .progress {
      animation: cleanRevealLeft .7s .62s cubic-bezier(.16, 1, .3, 1) both;
    }

    .entered .music-player .track-status {
      animation: cleanReveal .55s .7s cubic-bezier(.16, 1, .3, 1) both;
    }

    .music-player.is-switching .track-title,
    .music-player.is-switching .track-subtitle {
      opacity: 0;
    }

    .scene.is-switching .cd-disc {
      opacity: .18;
    }

    
    .cd-wrap {
      position: fixed;
      left: 6.8vw;
      top: 50%;
      z-index: 6;
      width: clamp(413px, 49.5vw, 743px);
      aspect-ratio: 1;
      transform: translate3d(-26px, calc(-50% + 18px), 0);
      opacity: 0;
      scale: 1;
      pointer-events: auto;
      transition: opacity .9s ease .45s, transform 1s cubic-bezier(.16, 1, .3, 1) .45s, scale .5s cubic-bezier(.16, 1, .3, 1);
    }

    .playing .cd-wrap:hover {
      scale: 1.05;
    }

    .cd-wrap:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .8);
      outline-offset: 8px;
    }

    .entered .cd-wrap {
      transform: translate3d(0, -50%, 0);
      opacity: 1;
      animation: cdDrop .9s .5s cubic-bezier(.16, 1, .3, 1) both;
    }

    .cd-disc {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #0c0d11;
      box-shadow: 0 46px 90px rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .4);
      will-change: transform;
      transition: opacity .26s ease;
      -webkit-mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0) 0 2.75%, #000 3%);
      mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0) 0 2.75%, #000 3%);
    }

    .cd-artwork {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      filter: contrast(1.06) saturate(1.12) brightness(.68);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .16),
        inset 0 0 46px rgba(0, 0, 0, .52);
    }

    .cd-tone {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(0, 0, 0, .18) 54%, rgba(0, 0, 0, .42) 76%, rgba(0, 0, 0, .62) 97%);
    }

    .cd-streak {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .cd-streak.a {
      background: linear-gradient(118deg,
          transparent 26%,
          rgba(255, 255, 255, .16) 40%,
          rgba(122, 224, 255, .2) 44.5%,
          rgba(255, 140, 160, .16) 48%,
          rgba(160, 240, 190, .14) 51%,
          rgba(255, 255, 255, .1) 55%,
          transparent 68%);
      opacity: .9;
    }

    .cd-streak.b {
      background: linear-gradient(118deg,
          transparent 34%,
          rgba(190, 160, 255, .12) 41%,
          rgba(255, 220, 150, .1) 45%,
          transparent 52%);
      opacity: .8;
    }

    .cd-rim {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .22),
        inset 0 -6px 18px rgba(0, 0, 0, .5),
        inset 0 6px 14px rgba(255, 255, 255, .05);
      pointer-events: none;
    }

    .cd-hub {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      width: 32%;
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(circle closest-side,
          rgba(6, 7, 10, 0) 0 17.5%,
          #cfd3db 17.5% 20.5%,
          rgba(36, 39, 46, .62) 20.5% 42.5%,
          rgba(26, 28, 34, .5) 42.5% 56.5%,
          rgba(14, 15, 19, .3) 56.5% 63.5%,
          rgba(10, 10, 14, 0) 74%);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    }

    
    .profile {
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      --move-x: 0px;
      --move-y: 0px;
      --shine-x: 50%;
      --shine-y: 35%;
      position: fixed;
      right: 6.8vw;
      top: 50%;
      z-index: 5;
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      grid-template-areas:
        "avatar head"
        "bio bio"
        "socials socials";
      gap: 17.5px 35px;
      width: clamp(500px, 62.5vw, 875px);
      padding: 43px 48px 38px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 33px;
      background: linear-gradient(168deg, rgba(11, 12, 15, .8), rgba(6, 7, 9, .7));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 42.5px 112.5px rgba(0, 0, 0, .55);
      backdrop-filter: blur(16px) saturate(130%);
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      transform: translate3d(var(--move-x), calc(-50% + 28px + var(--move-y)), 0) rotate(2.3deg) perspective(1125px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
      transform-style: preserve-3d;
      will-change: transform;
      opacity: 0;
      transition: opacity .95s ease .62s, transform .16s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .25s ease;
    }

    .entered .profile {
      transform: translate3d(var(--move-x), calc(-50% + var(--move-y)), 0) rotate(2.3deg) perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
      opacity: 1;
    }

    .profile::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      padding: 1px;
      border-radius: inherit;
      background: linear-gradient(140deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 34%, rgba(255, 255, 255, .02) 66%, rgba(230, 30, 60, .22) 100%);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
    }

    .profile::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background: radial-gradient(400px circle at var(--shine-x) var(--shine-y), rgba(255, 255, 255, .09), transparent 72%);
      mix-blend-mode: screen;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    .entered .profile::after {
      opacity: .6;
      transition: opacity 1s ease .8s;
    }

    .entered .profile:hover::after {
      opacity: .92;
      transition-delay: 0s;
    }

    .profile>* {
      position: relative;
      z-index: 1;
    }

    .avatar-wrap {
      grid-area: avatar;
      align-self: center;
      justify-self: start;
      width: 160px;
      transform: translateZ(22.5px);
    }

    .avatar-ring {
      position: relative;
      width: 160px;
      height: 160px;
      padding: 3.75px;
      border-radius: 35px;
      background: linear-gradient(150deg, rgba(244, 92, 112, .8), rgba(122, 8, 28, .95) 52%, rgba(230, 30, 60, .55));
      box-shadow: 0 15px 40px rgba(0, 0, 0, .45), 0 0 32.5px rgba(160, 18, 38, .2);
    }

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 31px;
      object-fit: cover;
      filter: saturate(.95) brightness(.9);
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s ease;
    }

    .avatar-wrap:hover .avatar {
      transform: scale(1.04) rotate(-1deg);
      filter: saturate(1) brightness(1);
    }

    .head {
      grid-area: head;
      min-width: 0;
      transform: translateZ(12px);
    }

    .eyebrow {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 11px;
      margin: 0 0 5px;
      color: rgba(255, 255, 255, .55);
      font: 600 12.5px/1 Arial, sans-serif;
      letter-spacing: .2em;
      text-transform: lowercase;
    }

    .eyebrow i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #e0142c;
      box-shadow: 0 0 10px #e0142c;
    }

    .profile h1 {
      margin: 0;
      color: #fff;
      font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(60px, 7vw, 85px);
      line-height: 1;
      letter-spacing: -.01em;
      text-align: left;
      text-transform: lowercase;
      text-shadow: 0 4px 24px rgba(0, 0, 0, .55);
    }

    .bio {
      grid-area: bio;
      width: 100%;
      margin: 2px 0 0;
      color: rgba(255, 255, 255, .62);
      font: italic 400 clamp(20px, 2.375vw, 22.5px)/1.55 Georgia, "Times New Roman", serif;
      text-align: left;
      text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
      transform: translateZ(8px);
    }

    .bio {
      grid-area: bio;
      width: 100%;
      margin: 2px 0 0;
      color: rgba(255, 255, 255, .62);
      font: italic 400 clamp(20px, 2.375vw, 22.5px)/1.55 Georgia, "Times New Roman", serif;
      text-align: left;
      text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
      transform: translateZ(8px);
    }

    .bio-link {
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(255, 255, 255, .85);
      font: inherit;
      font-style: italic;
      text-decoration: underline;
      text-decoration-color: rgba(220, 18, 38, .55);
      text-underline-offset: 3px;
      cursor: pointer;
      transition: color .2s ease, text-decoration-color .2s ease;
    }

    .bio-link:hover {
      color: #fff;
      text-decoration-color: rgba(220, 18, 38, .9);
    }

    .projects-picker {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      padding: 24px;
      background: rgba(2, 3, 5, .52);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .45s ease, visibility .45s;
    }

    .projects-picker.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .projects-picker-panel {
      display: grid;
      justify-items: center;
      gap: 20px;
      width: min(90vw, 440px);
      padding: 0;
      border: 0;
      background: transparent;
      transform: translateY(14px);
      transition: transform .55s cubic-bezier(.16, 1, .3, 1);
    }

    .projects-picker.is-open .projects-picker-panel {
      transform: translateY(0);
    }

    .projects-picker-title {
      margin: 0 0 2px;
      color: rgba(255, 255, 255, .55);
      font: 600 10px/1 Arial, sans-serif;
      letter-spacing: .2em;
      text-transform: lowercase;
      text-align: center;
    }

    .projects-picker-title::after {
      content: "";
      display: block;
      width: 40px;
      height: 1px;
      margin: 16px auto 0;
      background: #a01020;
      box-shadow: 0 0 14px rgba(184, 18, 38, .7);
    }

    .projects-picker-options {
      display: grid;
      gap: 14px;
      width: 100%;
    }

    .project-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 18px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      background: linear-gradient(170deg, rgba(10, 11, 14, .72), rgba(6, 7, 9, .66));
      backdrop-filter: blur(14px) saturate(130%);
      -webkit-backdrop-filter: blur(14px) saturate(130%);
      transition: border-color .25s ease, background .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
    }

    .project-option:hover {
      border-color: rgba(255, 255, 255, .18);
      transform: translateY(-2px);
    }

    .project-name {
      color: #fff;
      font: 700 clamp(26px, 5vw, 40px)/1 Arial, sans-serif;
      letter-spacing: -.04em;
      text-transform: lowercase;
      text-shadow: 0 4px 24px rgba(0, 0, 0, .5), 0 0 28px rgba(220, 18, 38, .16);
    }

    .project-links {
      display: flex;
      gap: 10px;
    }

    .project-link {
      padding: 6px 14px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 4px;
      color: rgba(255, 255, 255, .75);
      font: 500 11px/1 Arial, sans-serif;
      letter-spacing: .12em;
      text-transform: lowercase;
      text-decoration: none;
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }

    .project-link:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, .28);
      background: rgba(255, 255, 255, .06);
    }

    .projects-picker-close {
      position: relative;
      z-index: 1;
      margin-top: 8px;
      border: 0;
      background: transparent;
      color: rgba(255, 255, 255, .55);
      font: 500 clamp(16px, 2vw, 22px)/1 monospace;
      letter-spacing: .08em;
      text-transform: lowercase;
      text-shadow: 0 3px 25px rgba(0, 0, 0, .7);
      transition: color .2s ease;
    }

    .projects-picker-close:hover {
      color: rgba(255, 255, 255, .95);
    }

    .socials {
      grid-area: socials;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 15px;
      margin: 0;
      transform: translateZ(8px);
    }

    .social {
      display: grid;
      width: 50px;
      height: 50px;
      padding: 0;
      place-items: center;
      border: 0;
      border-radius: 0;
      color: rgba(255, 255, 255, .4);
      background: transparent;
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .25s ease;
    }

    .social:hover {
      color: #fff;
      transform: translateY(-3px) scale(1.06);
    }

    .social.discord:hover {
      color: #7289da;
    }

    .social.youtube:hover {
      color: #ff0033;
    }

    .social.spotify:hover {
      color: #1db954;
    }

    .social:focus-visible {
      outline: 2px solid #dc1226;
      outline-offset: 3px;
    }

    .social svg {
      width: 35px;
      height: 35px;
      fill: currentColor;
    }

    a.social {
      text-decoration: none;
      appearance: none;
    }

    .profile .avatar-wrap,
    .profile .head,
    .profile .bio,
    .profile .socials,
    .profile .social {
      opacity: 0;
    }

    .entered .profile .avatar-wrap {
      animation: cleanReveal .78s .72s cubic-bezier(.16, 1, .3, 1) both;
    }

    .entered .profile .head {
      animation: cleanRevealLeft .74s .8s cubic-bezier(.16, 1, .3, 1) both;
    }

    .entered .profile .bio {
      animation: cleanRevealLeft .68s .88s cubic-bezier(.16, 1, .3, 1) both;
    }

    .entered .profile .socials {
      animation: cleanReveal .7s .95s cubic-bezier(.16, 1, .3, 1) both;
    }

    .entered .profile .social {
      animation: socialPop .55s cubic-bezier(.16, 1, .3, 1) both;
    }

    @keyframes socialPop {
      from {
        opacity: 0;
        transform: translateY(9px) scale(.72) rotate(-5deg);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
      }
    }

    
    .volume-dock {
      position: fixed;
      top: 20px;
      left: 22px;
      z-index: 9;
      display: flex;
      align-items: center;
      gap: 12.5px;
      padding: 10px 15px 10px 10px;
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 12.5px;
      background: linear-gradient(170deg, rgba(10, 11, 14, .78), rgba(6, 7, 9, .72));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 40px rgba(0, 0, 0, .45);
      backdrop-filter: blur(18px) saturate(130%);
      -webkit-backdrop-filter: blur(18px) saturate(130%);
      opacity: 0;
      transition: opacity .8s ease .42s;
    }

    .entered .volume-dock {
      opacity: 1;
      animation: cleanReveal .65s .44s cubic-bezier(.16, 1, .3, 1) both;
    }

    .sound-toggle {
      display: grid;
      width: 43px;
      height: 43px;
      padding: 0;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: rgba(255, 255, 255, .9);
      background: transparent;
      transition: background .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
    }

    .sound-toggle:hover {
      background: rgba(255, 255, 255, .12);
      transform: scale(1.07);
    }

    .sound-toggle:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .8);
      outline-offset: 2px;
    }

    .sound-toggle svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .sound-toggle.is-muted .sound-wave {
      opacity: .18;
    }

    
    .eq {
      grid-area: eq;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 6px;
      height: 50px;
      justify-self: end;
      align-self: end;
      pointer-events: none;
    }

    .eq span {
      display: block;
      width: 6px;
      height: 100%;
      border-radius: 3.75px;
      background: rgba(255, 255, 255, .85);
      transform-origin: bottom;
      transform: scaleY(.12);
      will-change: transform;
    }

    .volume-slider {
      display: block;
      width: 175px;
      height: 14px;
      margin: 0;
      padding: 0;
      appearance: none;
      background: transparent;
      outline: none;
      cursor: pointer;
    }

    .volume-slider::-webkit-slider-runnable-track {
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, #fff var(--filled, 80%), rgba(255, 255, 255, .24) var(--filled, 80%));
    }

    .volume-slider::-webkit-slider-thumb {
      width: 7px;
      height: 7px;
      margin-top: -2.5px;
      appearance: none;
      border: 0;
      border-radius: 50%;
      background: #fff;
      box-shadow: none;
      opacity: 0;
      transition: opacity .18s ease;
    }

    .volume-slider:hover::-webkit-slider-thumb,
    .volume-slider:focus-visible::-webkit-slider-thumb,
    .volume-slider:active::-webkit-slider-thumb {
      opacity: .9;
    }

    .volume-slider::-moz-range-track {
      height: 2px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .24);
    }

    .volume-slider::-moz-range-progress {
      height: 2px;
      border-radius: 999px;
      background: #fff;
    }

    .volume-slider::-moz-range-thumb {
      width: 7px;
      height: 7px;
      border: 0;
      border-radius: 50%;
      background: #fff;
      box-shadow: none;
      opacity: .9;
    }

    
    .entry {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 100%;
      border: 0;
      color: #fff;
      overflow: hidden;
      isolation: isolate;
      background: rgba(2, 3, 5, .52);
      cursor: pointer;
      transition: opacity .7s ease, visibility .7s;
    }

    .entry::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: radial-gradient(circle at center, rgba(91, 18, 38, .14), rgba(3, 2, 3, .28) 48%, rgba(3, 2, 3, .6));
    }

    .entry>span {
      position: relative;
      z-index: 1;
    }

    .entered .entry {
      visibility: visible;
      pointer-events: none;
      animation: entryExit .62s cubic-bezier(.4, 0, .2, 1) both;
    }

    .entry-copy {
      color: rgba(255, 255, 255, .95);
      font: 500 clamp(20px, 2.3vw, 30px)/1 monospace;
      letter-spacing: .08em;
      text-transform: lowercase;
      text-shadow: 0 3px 25px rgba(0, 0, 0, .7);
      animation: entryBreath 2.6s ease-in-out infinite;
    }

    @media (max-width: 1100px) {

      .scene {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 14px 140px;
        overflow: hidden;
        overscroll-behavior: none;
      }

      .music-player {
        position: fixed;
        top: auto;
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "meta controls"
          "progress progress"
          "status status";
      }

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

      .cd-wrap {
        position: static;
        order: 1;
        width: 77vw;
        max-width: 413px;
        margin: 84px 0 6px;
        transform: translate3d(0, 18px, 0);
      }

      .entered .cd-wrap {
        transform: translate3d(0, 0, 0);
      }

      .profile {
        position: static;
        order: 2;
        width: min(92vw, 525px);
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 15px 23px;
        padding: 30px 28px;
        transform: translate3d(0, 22px, 0) rotate(1.6deg);
      }

      .entered .profile {
        transform: translate3d(0, 0, 0) rotate(1.6deg);
      }

      .avatar-wrap {
        width: 120px;
      }

      .avatar-ring {
        width: 120px;
        height: 120px;
        border-radius: 30px;
      }

      .avatar {
        border-radius: 26px;
      }

      .profile h1 {
        font-size: 48px;
      }

      .bg-canvas {
        filter: blur(44px) brightness(.38) saturate(.8);
      }

      .volume-dock {
        top: 12px;
        left: 12px;
        padding: 8px 10px 8px 8px;
      }

      .volume-slider {
        width: 115px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .snowfall,
      .grain {
        display: none;
      }
    }