:root {
      --container-width: min(52.8vw, 52.8rem);
      --container-height: 16.575rem;
    }

    * {
      box-sizing: border-box;
      cursor: url("./public/cursor-cursor.png") 16 16, auto !important;
    }

    button,
    a,
    input,
    select,
    textarea,
    [role="button"] {
      cursor: url("./public/cursor-cursor.png") 16 16, pointer !important;
    }

    button:hover,
    button:active,
    button:focus,
    a:hover,
    a:active,
    a:focus,
    input:hover,
    input:active,
    input:focus,
    select:hover,
    select:active,
    select:focus,
    textarea:hover,
    textarea:active,
    textarea:focus,
    [role="button"]:hover,
    [role="button"]:active,
    [role="button"]:focus {
      cursor: url("./public/cursor-cursor.png") 16 16, pointer !important;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #000000;
      font-family: Arial, sans-serif;
    }

    body.is-loading {
      overflow: hidden;
    }

    body.bg-ready {
      background: url("./public/back.jpg") center center / cover no-repeat fixed;
    }

    .startup-loader {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background: #000000;
      z-index: 30;
      opacity: 1;
      visibility: visible;
      transition: opacity 320ms ease, visibility 320ms ease;
    }

    .startup-loader.is-hidden {
      opacity: 0;
      visibility: hidden;
    }

    .startup-loader__spinner {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.16);
      border-top-color: rgba(255, 255, 255, 0.92);
      animation: startup-spin 0.8s linear infinite;
    }

    @keyframes startup-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .scene {
      width: 100%;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      perspective: 1400px;
    }

    .layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    .stack {
      position: relative;
      width: var(--container-width);
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
      opacity: 0;
      transform: perspective(1400px) rotateX(72deg) scaleY(0.035) scaleX(0.96);
      transform-origin: center center;
      transition:
        opacity 220ms ease,
        transform 1050ms cubic-bezier(0.2, 0.9, 0.24, 1);
    }

    .stack.is-visible {
      opacity: 1;
      transform: perspective(1400px) rotateX(0deg) scaleY(1) scaleX(1);
    }

    .card {
      position: relative;
      width: 100%;
      height: var(--container-height);
      min-height: var(--container-height);
      padding: 24px 28px;
      border-radius: 28px;
      overflow: visible;
      isolation: isolate;
      border: none;
      background: rgba(27, 27, 27, 0.24);
      box-shadow: none;
      will-change: transform;
      transition: 700ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
      transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
    }

    .player {
      width: var(--container-width);
      min-height: 8.25rem;
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 18px 24px;
      border-radius: 28px;
      background: rgba(27, 27, 27, 0.24);
      color: #ffffff;
      opacity: 0;
      transform: perspective(1400px) rotateX(68deg) scaleY(0.04) scaleX(0.94) translateY(-14px);
      transform-origin: center center;
      transition:
        opacity 220ms ease 860ms,
        transform 1050ms cubic-bezier(0.2, 0.9, 0.24, 1) 860ms;
    }

    .stack.is-visible + .player {
      opacity: 1;
      transform: perspective(1400px) rotateX(0deg) scaleY(1) scaleX(1) translateY(0);
    }

    .player > * {
      opacity: 0;
      transform: translateY(10px);
      transition:
        opacity 320ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .stack.is-visible + .player > * {
      opacity: 1;
      transform: translateY(0);
    }

    .stack.is-visible + .player .player__cover {
      transition-delay: 1.36s;
    }

    .stack.is-visible + .player .player__main {
      transition-delay: 1.46s;
    }

    .stack.is-visible + .player .player__controls {
      transition-delay: 1.56s;
    }

    .player__cover {
      width: 84px;
      height: 84px;
      border-radius: 18px;
      object-fit: cover;
      flex: 0 0 auto;
    }

    .player__main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .player__title {
      font-size: 22px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .player__row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .player__time {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.74);
      min-width: 42px;
    }

    .player__bar {
      position: relative;
      flex: 1;
      min-width: 180px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.22);
      overflow: hidden;
      cursor: pointer;
    }

    .player__bar::before {
      content: "";
      position: absolute;
      inset: -7px 0;
    }

    .player__progress {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0%;
      background: #ffffff;
      border-radius: inherit;
    }

    .player__controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
      flex: 0 0 auto;
    }

    .player__button {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      color: rgba(255, 255, 255, 0.82);
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: transform 180ms ease, color 180ms ease;
    }

    .player__button--primary {
      color: #ffffff;
    }

    .player__button:hover {
      transform: scale(1.08);
      color: #ffffff;
    }

    .player__button svg {
      width: 100%;
      height: 100%;
      display: block;
      shape-rendering: geometricPrecision;
    }

    .avatar {
      position: absolute;
      top: 50%;
      left: 24px;
      width: 112px;
      height: 112px;
      object-fit: cover;
      border-radius: 0;
      opacity: 0.92;
      transform: translateY(-58%);
      transition: opacity 360ms ease 620ms;
    }

    .label {
      position: absolute;
      top: 50%;
      left: 168px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      transform: translateY(-56%);
      transition: opacity 360ms ease 680ms;
    }

    .card-meta {
      position: absolute;
      left: 24px;
      bottom: 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 15px;
      font-weight: 500;
    }

    .card-meta__item {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      position: relative;
    }

    .card-meta__item svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    .card-meta__item::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 8px);
      transform: translateX(-50%) translateY(4px);
      padding: 10px 16px;
      border-radius: 14px;
      background: rgba(27, 27, 27, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
      color: #ffffff;
      font-size: 18px;
      line-height: 1;
      opacity: 0;
      white-space: nowrap;
      pointer-events: none;
      z-index: 20;
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .card-meta__item:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .card-meta__divider {
      width: 1px;
      height: 18px;
      background: rgba(255, 255, 255, 0.16);
    }

    .label__top {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .label__text {
      position: relative;
      color: #ffffff;
      font-size: 29px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.02em;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.22);
    }

    .label__text::after {
      content: "spotify92";
      position: absolute;
      inset: 0;
      color: rgba(255, 255, 255, 0.5);
      filter: blur(8px);
      z-index: -1;
      pointer-events: none;
    }

    .label__desc {
      color: rgba(255, 255, 255, 0.72);
      font-size: 22px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .label__bottom {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: nowrap;
      overflow: visible;
    }

    .skills-toggle {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
      cursor: pointer;
      transition:
        transform 260ms ease,
        background 260ms ease,
        border-color 260ms ease;
    }

    .skills-toggle:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.16);
    }

    .skills-toggle svg {
      width: 15px;
      height: 15px;
      transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .skills-toggle.is-open svg {
      transform: translateX(-1px) rotate(180deg);
    }

    .skills {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 8px;
      max-width: 0;
      opacity: 0;
      overflow: visible;
      transform: translateX(-8px);
      transition:
        max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 240ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .skills.is-open {
      display: flex;
      max-width: 320px;
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    .label::before,
    .label::after {
      content: "";
      position: absolute;
      inset: -28px -40px;
      pointer-events: none;
      background-repeat: no-repeat;
      opacity: 0.75;
    }

    .label::before {
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px);
      background-size: 3px 3px, 3px 3px, 2px 2px, 2px 2px, 2px 2px;
      background-position: 8px 18px, 52px -2px, 96px 28px, 132px 4px, 148px 40px;
      animation: sparkle-drift 1.9s ease-in-out infinite;
    }

    .label::after {
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.5px);
      background-size: 2px 2px, 3px 3px, 2px 2px, 2px 2px;
      background-position: -4px 36px, 72px 52px, 118px 14px, 154px -6px;
      animation: sparkle-drift 2.2s ease-in-out infinite reverse;
    }

    @keyframes sparkle-drift {
      0%,
      100% {
        transform: translateY(0);
        opacity: 0.45;
      }

      50% {
        transform: translateY(-4px);
        opacity: 0.85;
      }
    }

    .badge {
      position: relative;
      top: auto;
      left: auto;
      width: 44px;
      height: 31px;
      display: grid;
      place-items: center;
      border: none;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.22);
      color: #101010;
      transform: translateY(0);
      cursor: default;
    }

    .badge img {
      width: 17px;
      height: 17px;
      object-fit: contain;
      opacity: 0.9;
    }

    .badge::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: calc(100% + 8px);
      transform: translateX(-50%) translateY(4px);
      padding: 10px 16px;
      border-radius: 14px;
      background: rgba(27, 27, 27, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
      color: #ffffff;
      font-size: 21px;
      line-height: 1;
      opacity: 0;
      white-space: nowrap;
      pointer-events: none;
      z-index: 20;
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .badge:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .badge--skill {
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.16);
    }

    .badge--skill img {
      width: 18px;
      height: 18px;
    }

    .badge--skill::after {
      content: attr(data-tooltip);
    }

    .card > * {
      opacity: 0;
    }

    .stack.is-visible .card > * {
      opacity: 1;
    }

    .enter-text {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: auto;
      z-index: 10;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 420ms ease,
        visibility 420ms ease,
        backdrop-filter 420ms ease,
        -webkit-backdrop-filter 420ms ease;
    }

    .enter-text.is-ready {
      opacity: 1;
      visibility: visible;
    }

    .enter-text.is-hidden {
      opacity: 0;
      visibility: hidden;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
    }

    .enter-text__label {
      border: none;
      background: transparent;
      color: #ffffff;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 220ms ease, opacity 220ms ease;
    }

    .enter-text:hover .enter-text__label {
      transform: scale(1.03);
    }

    .ip-display {
      position: fixed;
      left: 50%;
      top: 22px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px 10px 16px;
      border-radius: 999px;
      background: rgba(27, 27, 27, 0.24);
      color: rgba(255, 255, 255, 0.9);
      font-size: 15px;
      line-height: 1;
      opacity: 0;
      visibility: hidden;
      transition: opacity 220ms ease, visibility 220ms ease;
      z-index: 5;
      overflow: hidden;
      height: 50px;
      max-width: 320px;
      transition:
        opacity 220ms ease,
        visibility 220ms ease,
        max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
        height 420ms cubic-bezier(0.22, 1, 0.36, 1),
        padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
        gap 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .ip-display.is-collapsed {
      max-width: 60px;
      height: 46px;
      padding: 0 7px;
      gap: 0;
      justify-content: center;
    }

    .ip-display.is-visible {
      opacity: 1;
      visibility: visible;
    }

    .ip-display__text {
      min-width: 0;
      text-align: center;
      white-space: nowrap;
      opacity: 1;
      max-width: 220px;
      transition:
        opacity 260ms ease,
        max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
        margin 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .ip-display.is-expanding .ip-display__text {
      transition:
        opacity 340ms ease,
        max-width 900ms cubic-bezier(0.22, 1, 0.36, 1),
        margin 900ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .ip-display.is-collapsing .ip-display__text,
    .ip-display.is-collapsed .ip-display__text {
      opacity: 0;
      max-width: 0;
      margin-right: 0;
    }

    .ip-display__toggle {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
      cursor: pointer;
      transition:
        background 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
    }

    .ip-display__toggle:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.16);
    }

    .ip-display__toggle svg {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 19px;
      height: 19px;
      display: block;
      shape-rendering: geometricPrecision;
      filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.18));
    }

    .ip-icon-off {
      display: none;
    }

    .ip-display.is-masked .ip-icon-on {
      display: none;
    }

    .ip-display.is-masked .ip-icon-off {
      display: block;
    }

    @media (max-width: 700px) {
      :root {
        --container-width: min(94vw, 28rem);
        --container-height: 10.75rem;
      }

      .scene {
        padding: 18px;
      }

      .layout {
        gap: 14px;
      }

      .card {
        padding: 18px 20px;
        border-radius: 24px;
      }

      .avatar {
        left: 18px;
        width: 74px;
        height: 74px;
        transform: translateY(-54%);
      }

      .label {
        left: 108px;
        right: 18px;
        gap: 6px;
        transform: translateY(-54%);
      }

      .label__text {
        font-size: 19px;
      }

      .label__desc {
        font-size: 15px;
      }

      .label__top,
      .label__bottom {
        width: 100%;
      }

      .label__bottom {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        grid-template-areas:
          "desc desc"
          "toggle skills";
        align-items: center;
        gap: 8px 10px;
      }

      .label__desc {
        grid-area: desc;
      }

      .skills-toggle {
        grid-area: toggle;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
      }

      .skills-toggle svg {
        width: 13px;
        height: 13px;
      }

      .skills {
        grid-area: skills;
        justify-self: start;
        gap: 6px;
        max-width: 0;
        min-width: 0;
      }

      .skills.is-open {
        max-width: 130px;
      }

      .badge {
        width: 36px;
        height: 26px;
      }

      .badge img {
        width: 14px;
        height: 14px;
      }

      .card-meta {
        left: 18px;
        right: 18px;
        bottom: 14px;
        gap: 8px;
        font-size: 12px;
      }

      .card-meta__item {
        gap: 4px;
      }

      .card-meta__item svg {
        width: 14px;
        height: 14px;
      }

      .card-meta__divider {
        height: 14px;
      }

      .player {
        width: var(--container-width);
        min-height: 6.4rem;
        padding: 12px 14px;
        gap: 12px;
        border-radius: 24px;
      }

      .player__cover {
        width: 54px;
        height: 54px;
        border-radius: 14px;
      }

      .player__title {
        font-size: 16px;
      }

      .player__time {
        font-size: 12px;
        min-width: 30px;
      }

      .player__controls {
        gap: 8px;
      }

      .player__button {
        width: 24px;
        height: 24px;
      }

      .player__bar {
        min-width: 92px;
      }

      .ip-display {
        top: 16px;
        padding: 8px 10px 8px 12px;
      }

      .ip-display__text {
        max-width: 140px;
        font-size: 13px;
      }

      .ip-display__toggle {
        width: 28px;
        height: 28px;
      }
    }