#projectPlane .project-link:nth-child(1) {
        --offset: 0vw;
      }

      #projectPlane .project-link:nth-child(2) {
        --offset: 0vw;
      }

      #projectPlane .project-link:nth-child(3) {
        --offset: 0vw;
      }

      #projectPlane .project-link:nth-child(4) {
        --offset: 0vw;
      }

      #projectPlane .project-link:nth-child(5) {
        --offset: 0vw;
      }

      #projectPlane .project-link:nth-child(6) {
        --offset: 0vw;
      }

      #projectPlane .project-link:nth-child(7) {
        --offset: 0vw;
      }

      #projectPlane .project-link {
        --hover-x: 0px;
        --hover-scale: 1;
        transform-style: preserve-3d;
        will-change: transform;
      }

      #projectPlane .project-link .project-title {
        color: #09090f !important;
        -webkit-text-stroke: 0 transparent !important;
        opacity: 1;
      }

      #projectPlane .project-link:hover,
      #projectPlane .project-link:focus-visible {
        --hover-x: 0px;
        --hover-scale: 1;
      }

      #projectPlane .project-link:hover .project-title,
      #projectPlane .project-link:focus-visible .project-title {
        color: transparent !important;
        -webkit-text-stroke: 1.8px #171225 !important;
        opacity: 0.96;
      }

      #projectPlane {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#projectPlane:has(.project-link:hover),
#projectPlane:has(.project-link:focus-visible) {
  transform: rotateY(0deg) translate3d(0, 0, 0) !important;
}

      :root {
        --project-title-size-desktop: clamp(5rem, 9.4vw, 10.4rem);
        --project-title-size-tablet: clamp(2.2rem, 9.6vw, 5.9rem);
        --about-logo-size: clamp(0.9rem, 1.12vw, 1.45rem);
        --about-main-copy-size: clamp(1.3rem, 2.05vw, 2.1rem);
        --about-body-copy-size: clamp(0.96rem, 1.08vw, 1.12rem);
        --about-meta-title-size: clamp(1.02rem, 1.2vw, 1.24rem);
        --about-meta-copy-size: clamp(0.9rem, 1.02vw, 1.04rem);
        --project-modal-title-size: clamp(2.35rem, 6.7vw, 6.9rem);
        --project-modal-copy-size: clamp(0.96rem, 1.03vw, 1.08rem);
        --project-modal-next-size: clamp(1.55rem, 3.55vw, 3.1rem);
      }

      .site-loader {
        position: fixed;
        inset: 0;
        z-index: 130;
        display: grid;
        place-items: center;
        gap: 1rem;
        background:
          radial-gradient(140rem 64rem at -20% 116%, rgba(138, 111, 255, 0.42) 0%, transparent 54%),
          radial-gradient(96rem 52rem at 110% -8%, rgba(100, 66, 255, 0.34) 0%, transparent 48%),
          linear-gradient(164deg, rgba(95, 46, 255, 0.98) 0%, rgba(67, 0, 255, 0.98) 48%, rgba(47, 0, 189, 0.99) 100%);
        transition:
          opacity 360ms ease,
          visibility 360ms ease;
      }

      .site-loader.is-leaving {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .site-loader__rings {
        position: relative;
        width: clamp(3.8rem, 7vw, 5.4rem);
        height: clamp(3.8rem, 7vw, 5.4rem);
      }

      .site-loader__rings span {
        position: absolute;
        inset: 0;
        border: 2px solid rgba(247, 248, 255, 0.22);
        border-top-color: rgba(247, 248, 255, 0.96);
        border-radius: 999px;
        animation: site-loader-spin 1s linear infinite;
      }

      .site-loader__rings span:nth-child(2) {
        inset: 0.44rem;
        border-top-color: rgba(247, 248, 255, 0.84);
        animation-duration: 1.2s;
        animation-direction: reverse;
      }

      .site-loader__rings span:nth-child(3) {
        inset: 0.88rem;
        border-top-color: rgba(247, 248, 255, 0.68);
        animation-duration: 1.4s;
      }

      .site-loader__label {
        margin: 0;
        font-size: clamp(0.74rem, 0.96vw, 0.94rem);
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(247, 248, 255, 0.88);
        animation: site-loader-pulse 1.25s ease-in-out infinite;
      }

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

      @keyframes site-loader-pulse {
        0%,
        100% {
          opacity: 0.54;
        }

        50% {
          opacity: 1;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .site-loader__rings span,
        .site-loader__label {
          animation-duration: 1ms;
          animation-iteration-count: 1;
        }
      }

      #projectPlane .project-title {
        font-size: var(--project-title-size-desktop) !important;
      }

      @media (max-width: 1024px) {
        #projectPlane .project-title {
          font-size: var(--project-title-size-tablet) !important;
        }
      }

      #aboutModalPanel .about-logo {
        font-size: var(--about-logo-size) !important;
        cursor: default;
        transition:
          transform 300ms ease,
          color 300ms ease,
          -webkit-text-stroke 300ms ease,
          text-shadow 300ms ease;
      }

      #aboutModalPanel .about-logo:hover,
      #aboutModalPanel .about-logo:focus-visible {
        transform: translateX(0.18rem);
        color: transparent;
        -webkit-text-stroke: 1.2px #f7f8ff;
        text-shadow: 0 0 12px rgba(247, 248, 255, 0.28);
      }

      #aboutModalPanel .about-side {
        align-self: start;
      }

      #aboutModalPanel .about-side-inner {
        display: grid;
        gap: 0.95rem;
      }

      #aboutModalPanel .about-side-photo-wrap {
        position: relative;
        display: block;
        width: min(100%, 15.2rem);
        border-radius: 0.9rem;
        overflow: hidden;
      }

      #aboutModalPanel .about-side-photo-wrap::after {
        content: "";
        position: absolute;
        inset: -34% -8%;
        background: linear-gradient(
          116deg,
          rgba(247, 248, 255, 0) 26%,
          rgba(247, 248, 255, 0.38) 49%,
          rgba(247, 248, 255, 0) 73%
        );
        transform: translateX(-136%) rotate(11deg);
        opacity: 0;
        transition:
          transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 320ms ease;
        pointer-events: none;
      }

      #aboutModalPanel .about-side-photo {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-radius: 0.9rem;
        border: 1px solid rgba(247, 248, 255, 0.34);
        box-shadow: 0 1rem 2.2rem rgba(8, 2, 32, 0.34);
        transform-origin: center;
        transition:
          transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
          filter 360ms ease,
          box-shadow 360ms ease;
      }

      #aboutModalPanel .about-side-photo-wrap:hover .about-side-photo,
      #aboutModalPanel .about-side-photo-wrap:focus-within .about-side-photo {
        transform: translateY(-4px) scale(1.03) rotate(-0.45deg);
        filter: saturate(1.11) contrast(1.04);
        box-shadow:
          0 1.3rem 2.85rem rgba(8, 2, 32, 0.48),
          0 0 0 1px rgba(247, 248, 255, 0.36),
          0 0 1.8rem rgba(211, 199, 255, 0.34);
      }

      #aboutModalPanel .about-side-photo-wrap:hover::after,
      #aboutModalPanel .about-side-photo-wrap:focus-within::after {
        transform: translateX(136%) rotate(11deg);
        opacity: 1;
      }

      #aboutModalPanel .about-resume-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.46rem;
        width: min(100%, 15.2rem);
        border: 1px solid rgba(247, 248, 255, 0.38);
        border-radius: 999px;
        padding: 0.48rem 0.82rem;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #f7f8ff;
        text-decoration: none;
        background: rgba(247, 248, 255, 0.08);
        transition:
          transform 300ms ease,
          border-color 240ms ease,
          background-color 240ms ease,
          box-shadow 300ms ease;
      }

      #aboutModalPanel .about-resume-link:hover,
      #aboutModalPanel .about-resume-link:focus-visible {
        transform: translateX(0.18rem);
        border-color: rgba(247, 248, 255, 0.72);
        background: rgba(247, 248, 255, 0.18);
        box-shadow: 0 0.46rem 1.3rem rgba(8, 2, 32, 0.32);
      }

      #aboutModalPanel .about-resume-link:focus-visible {
        outline: 1px solid rgba(247, 248, 255, 0.82);
        outline-offset: 2px;
      }

      @media (min-width: 1024px) {
        #aboutModalPanel .about-side {
          position: sticky;
          top: clamp(1rem, 4.6vh, 2.3rem);
        }
      }

      @media (max-width: 1023px) {
        #aboutModalPanel .about-side-photo-wrap,
        #aboutModalPanel .about-resume-link {
          width: min(70vw, 14.6rem);
          margin-inline: auto;
        }
      }

      #aboutModalPanel .about-main-copy {
        font-size: var(--about-main-copy-size) !important;
      }

      #aboutModalPanel .about-sub-copy {
        font-size: var(--about-body-copy-size) !important;
      }

      #aboutModalPanel .about-block-title {
        font-size: var(--about-meta-title-size) !important;
      }

      #aboutModalPanel .about-block-copy,
      #aboutModalPanel .about-block-list li {
        font-size: var(--about-meta-copy-size) !important;
      }

      #projectModal .modal-brand {
        cursor: default;
        transition:
          transform 300ms ease,
          color 300ms ease,
          -webkit-text-stroke 300ms ease,
          text-shadow 300ms ease;
      }

      #projectModal .modal-brand:hover {
        transform: translateX(0.18rem);
        color: transparent;
        -webkit-text-stroke: 1.35px rgba(17, 18, 25, 0.52);
        text-shadow: 0 0 10px rgba(17, 18, 25, 0.14);
      }

      #projectModal .project-modal-title {
        font-size: var(--project-modal-title-size) !important;
        color: transparent;
        -webkit-text-stroke: 2px #101219;
        text-align: right;
        line-height: 0.82;
        letter-spacing: -0.045em;
      }

      #projectModal .project-modal-overlay {
        display: block;
        max-width: min(70vw, 760px);
      }

      @media (max-width: 1024px) {
        #projectModal .project-modal-title {
          -webkit-text-stroke: 1.4px #101219;
        }

        #projectModal .project-modal-overlay {
          max-width: min(88vw, 620px);
        }
      }

      #projectModal .project-carousel-image {
        cursor: zoom-in;
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      #projectModal .project-carousel-image:hover {
        transform: scale(1.015);
      }

      #projectModal .project-carousel-thumb {
        transition:
          opacity 240ms ease,
          border-color 240ms ease,
          transform 240ms ease;
      }

      #projectModal .project-carousel-thumb[aria-current="true"] {
        border-color: rgba(17, 18, 25, 0.72);
        opacity: 1;
        transform: translateY(-1px);
      }

      #projectModal .project-carousel-thumb[aria-current="false"] {
        opacity: 0.72;
      }

      #projectModal .project-action-link[aria-disabled="true"] {
        opacity: 0.46;
        pointer-events: none;
      }

      #projectModal .project-modal-copy {
        font-size: var(--project-modal-copy-size) !important;
      }

      #projectModal .project-modal-next-title {
        font-size: var(--project-modal-next-size) !important;
      }

      #projectModal .tech-stack-chip {
        display: flex;
        align-items: center;
        gap: 0.62rem;
        min-height: 2.55rem;
        padding: 0.52rem 0.76rem;
        border-radius: 0.72rem;
        border: 1px solid rgba(247, 248, 255, 0.24);
        background: rgba(247, 248, 255, 0.08);
        transition:
          transform 220ms ease,
          border-color 220ms ease,
          background-color 220ms ease,
          box-shadow 220ms ease;
      }

      #projectModal .tech-stack-chip:hover {
        transform: translateY(-1px);
        border-color: rgba(247, 248, 255, 0.68);
        background: rgba(247, 248, 255, 0.16);
        box-shadow: 0 0.45rem 1.2rem rgba(8, 2, 35, 0.22);
      }

      #projectModal .tech-stack-chip__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        font-size: 0.96rem;
      }

      #projectModal .tech-stack-chip__label {
        font-weight: 600;
        letter-spacing: 0.01em;
      }

      #projectModal .project-nav-link {
        --nav-hover-x: 0px;
        --nav-scale: 1;
        --tilt-x: 0deg;
        --tilt-y: 0deg;
        position: relative;
        display: block;
        transform-style: preserve-3d;
        transform-origin: 50% 52%;
        transform:
          perspective(980px)
          rotateX(var(--tilt-x))
          rotateY(var(--tilt-y))
          translate3d(var(--nav-hover-x), 0, 0)
          scale(var(--nav-scale));
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
      }

      #projectModal .project-nav-link:hover,
      #projectModal .project-nav-link:focus-visible {
        text-decoration: none;
        --nav-hover-x: 0.95rem;
        --nav-scale: 1.028;
      }

      #projectModal .project-nav-link--prev:hover,
      #projectModal .project-nav-link--prev:focus-visible {
        --tilt-x: 1.4deg;
        --tilt-y: -5.2deg;
      }

      #projectModal .project-nav-link--next:hover,
      #projectModal .project-nav-link--next:focus-visible {
        --tilt-x: 1.4deg;
        --tilt-y: 5.2deg;
      }

      #projectModal .project-nav-kicker {
        color: rgba(240, 244, 255, 0.76) !important;
      }

      #projectModal .project-nav-link--next {
        text-align: right;
      }

      #projectModal .project-nav-link--next .project-nav-kicker {
        text-align: right;
      }

      #projectModal .project-nav-line {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 0.46rem;
        padding-left: 0.08rem;
      }

      #projectModal .project-nav-link--next .project-nav-line {
        justify-content: flex-end;
      }

      #projectModal .project-nav-meta {
        display: inline-flex;
        align-items: flex-start;
        gap: 0.16rem;
        flex-shrink: 0;
        padding-top: 0.31em;
        color: rgba(240, 244, 255, 0.72);
      }

      #projectModal .project-nav-year {
        position: static;
        font-size: clamp(0.72rem, 0.9vw, 0.9rem);
        font-weight: 700;
        letter-spacing: 0.03em;
        color: inherit;
      }

      #projectModal .project-nav-slash {
        position: static;
        font-size: clamp(1.25rem, 2.1vw, 2.2rem);
        line-height: 1;
        color: rgba(240, 244, 255, 0.44);
        transform: translateY(-0.1em);
      }

      #projectModal .project-nav-title {
        font-size: var(--project-modal-next-size) !important;
        line-height: 0.82;
        letter-spacing: -0.045em;
        max-width: min(18ch, 100%);
        overflow-wrap: anywhere;
        word-break: break-word;
        transition:
          color 450ms ease,
          -webkit-text-stroke 450ms ease,
          opacity 450ms ease;
      }

      #projectModal .project-nav-link .project-nav-title {
        color: transparent !important;
        -webkit-text-stroke: 1.55px rgba(247, 248, 255, 0.94);
        opacity: 0.99;
      }

      #projectModal .project-nav-link:hover .project-nav-title,
      #projectModal .project-nav-link:focus-visible .project-nav-title {
        color: rgba(247, 248, 255, 0.98) !important;
        -webkit-text-stroke: 1.15px rgba(247, 248, 255, 0.96);
        opacity: 1;
      }

      #projectModal .project-nav-link--next .project-nav-title {
        text-align: right;
      }

      #projectModal .project-nav-title.project-nav-title--compact {
        font-size: clamp(1.32rem, 2.95vw, 2.45rem) !important;
        line-height: 0.86;
        letter-spacing: -0.04em;
      }

      #projectModal .project-nav-title.project-nav-title--dense {
        font-size: clamp(1.15rem, 2.35vw, 1.95rem) !important;
        line-height: 0.9;
        letter-spacing: -0.03em;
      }

      #projectModal .project-links-panel .project-action-link {
        text-align: center;
        white-space: nowrap;
      }

      .contact-faq-item {
        border-top: 1px solid rgba(247, 248, 255, 0.24);
      }

      .contact-faq-item:last-child {
        border-bottom: 1px solid rgba(247, 248, 255, 0.24);
      }

      .contact-faq-item summary {
        position: relative;
        cursor: pointer;
        list-style: none;
        padding: 0.85rem 1.6rem 0.85rem 0;
        font-size: clamp(0.96rem, 1.05vw, 1.08rem);
        font-weight: 700;
        color: rgba(246, 248, 255, 0.95);
      }

      .contact-faq-item summary::-webkit-details-marker {
        display: none;
      }

      .contact-faq-item summary::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
        line-height: 1;
        color: rgba(240, 244, 255, 0.74);
        transition: transform 220ms ease;
      }

      .contact-faq-item[open] summary::after {
        transform: translateY(-50%) rotate(45deg);
      }

      .contact-faq-item p {
        margin: 0;
        padding: 0 0 0.95rem;
        color: rgba(236, 242, 255, 0.86);
        font-size: clamp(0.9rem, 0.98vw, 1rem);
        line-height: 1.52;
      }

      @media (max-width: 1024px) {
        #projectModal .project-nav-line {
          gap: 0.34rem;
        }
      }

      @media (max-width: 768px) {
        #projectModal .project-nav-link:hover,
        #projectModal .project-nav-link:focus-visible {
          --nav-hover-x: 0.46rem;
          --nav-scale: 1.016;
        }

        #projectModal .project-nav-link--prev:hover,
        #projectModal .project-nav-link--prev:focus-visible {
          --tilt-x: 0.7deg;
          --tilt-y: -2.2deg;
        }

        #projectModal .project-nav-link--next:hover,
        #projectModal .project-nav-link--next:focus-visible {
          --tilt-x: 0.7deg;
          --tilt-y: 2.2deg;
        }

        #projectModal .project-nav-line {
          gap: 0.24rem;
        }

        #projectModal .project-nav-year {
          font-size: 0.64rem;
        }

        #projectModal .project-nav-slash {
          font-size: 1.02rem;
        }

        #projectModal .project-nav-title {
          font-size: clamp(1.45rem, 8.9vw, 2.4rem) !important;
          line-height: 0.9;
        }

        #projectModal .project-nav-title.project-nav-title--compact {
          font-size: clamp(1.24rem, 7.4vw, 2rem) !important;
        }

        #projectModal .project-nav-title.project-nav-title--dense {
          font-size: clamp(1.08rem, 6.25vw, 1.72rem) !important;
        }

        #projectModal .project-links-panel .project-action-link {
          white-space: normal;
        }
      }

      /* Keep project modal aligned with the main page purple identity */
      #projectModal .modal-overlay {
        background: rgba(9, 4, 38, 0.68) !important;
        backdrop-filter: blur(5px);
      }

      #projectModal .modal-panel {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background:
          radial-gradient(130rem 68rem at -30% 110%, #7450ff 0%, transparent 55%),
          radial-gradient(90rem 52rem at 110% -10%, #5a24ff 0%, transparent 48%),
          linear-gradient(165deg, #5f2eff 0%, #4300ff 48%, #2f00bd 100%) !important;
        color: #f7f8ff !important;
      }

      #projectModal .modal-brand {
        color: rgba(247, 248, 255, 0.24) !important;
      }

      #projectModal .modal-brand:hover {
        color: transparent !important;
        -webkit-text-stroke: 1.35px rgba(247, 248, 255, 0.54) !important;
        text-shadow: 0 0 10px rgba(247, 248, 255, 0.18) !important;
      }

      #projectModal .project-modal-title {
        position: relative;
        color: rgba(247, 248, 255, 0.18) !important;
        -webkit-text-stroke: 2.1px rgba(247, 248, 255, 0.88) !important;
        cursor: default;
        pointer-events: auto;
        transition:
          transform 300ms ease,
          color 300ms ease,
          -webkit-text-stroke 300ms ease,
          text-shadow 300ms ease;
        text-shadow:
          0 0 14px rgba(11, 4, 43, 0.46),
          0 0 4px rgba(11, 4, 43, 0.32);
      }

      #projectModal .project-modal-title:hover,
      #projectModal .project-modal-title:focus-visible {
        transform: translateX(0.18rem);
        color: transparent !important;
        -webkit-text-stroke: 2.2px rgba(247, 248, 255, 0.96) !important;
        text-shadow:
          0 0 16px rgba(247, 248, 255, 0.24),
          0 0 6px rgba(20, 8, 72, 0.38);
      }

      #projectModal .project-modal-overlay {
        position: relative;
        padding: 0.35rem 0.5rem;
        pointer-events: auto;
      }

      #projectModal .project-modal-overlay::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 0.45rem;
        background: linear-gradient(
          90deg,
          rgba(14, 6, 52, 0) 0%,
          rgba(14, 6, 52, 0) 100%,
          rgba(14, 6, 52, 0.28) 10%
        );
      }

      #projectModal .project-modal-overlay > * {
        position: relative;
      }

      @media (max-width: 1024px) {
        #projectModal .project-modal-title {
          -webkit-text-stroke: 1.55px rgba(247, 248, 255, 0.9) !important;
        }
      }

      #projectModal figure {
        border-color: rgba(247, 248, 255, 0.3) !important;
        background: rgba(247, 248, 255, 0.08) !important;
      }

      #projectModal .modal-panel section {
        border-color: rgba(247, 248, 255, 0.24) !important;
      }

      #projectModal .project-modal-copy,
      #projectModal .modal-panel p:not(.modal-brand),
      #projectModal .modal-panel li {
        color: rgba(242, 246, 255, 0.94) !important;
      }

      #projectModal button {
        color: #f7f8ff !important;
        border-color: rgba(247, 248, 255, 0.34) !important;
        background: rgba(247, 248, 255, 0.08) !important;
      }

      #projectModal button:hover,
      #projectModal button:focus-visible {
        border-color: rgba(247, 248, 255, 0.74) !important;
        background: rgba(247, 248, 255, 0.2) !important;
      }

      #projectModal .project-action-link {
        color: #f7f8ff !important;
        border-color: rgba(247, 248, 255, 0.34) !important;
        background: rgba(247, 248, 255, 0.08) !important;
      }

      #projectModal .project-action-link:hover,
      #projectModal .project-action-link:focus-visible {
        border-color: rgba(247, 248, 255, 0.74) !important;
        background: rgba(247, 248, 255, 0.2) !important;
      }

      #projectModal .project-carousel-thumb {
        border-color: rgba(247, 248, 255, 0.36) !important;
        background: rgba(247, 248, 255, 0.08) !important;
      }

      #projectModal .project-carousel-thumb[aria-current="true"] {
        border-color: rgba(247, 248, 255, 0.84) !important;
      }

      /* Contact modal: custom composition with about/project language */
      #contactModalBackdrop {
        background: rgba(9, 4, 38, 0.68) !important;
        backdrop-filter: blur(5px);
      }

      #contactModalPanel {
        background:
          radial-gradient(130rem 68rem at -30% 110%, #7450ff 0%, transparent 55%),
          radial-gradient(90rem 52rem at 110% -10%, #5a24ff 0%, transparent 48%),
          linear-gradient(165deg, #5f2eff 0%, #4300ff 48%, #2f00bd 100%) !important;
        color: #f7f8ff !important;
      }

      #contactModalPanel .contact-modal-layout {
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "hero"
          "form"
          "side"
          "faq";
      }

      #contactModalPanel .contact-modal-layout > * {
        min-width: 0;
      }

      #contactModalPanel .contact-hero-col {
        grid-area: hero;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none;
        padding: 0.15rem 0.35rem 0.4rem !important;
      }

      #contactModalPanel .contact-form-col {
        grid-area: form;
        border-color: rgba(247, 248, 255, 0.24) !important;
        background: transparent !important;
        box-shadow: none !important;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.62rem 0.8rem;
      }

      #contactModalPanel .contact-side-col {
        grid-area: side;
        padding-top: 0 !important;
      }

      #contactModalPanel .contact-side-col > section,
      #contactModalPanel .contact-faq-section {
        border-color: rgba(247, 248, 255, 0.24) !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      #contactModalPanel .contact-faq-section {
        grid-area: faq;
      }

      #contactModalPanel .contact-hero-col > p:first-of-type {
        font-family: "Archivo Black", sans-serif;
        text-transform: uppercase;
        line-height: 0.9;
        letter-spacing: -0.028em;
        color: rgba(247, 248, 255, 0.98) !important;
      }

      #contactModalPanel .contact-hero-heading {
        width: fit-content;
        max-width: 100%;
      }

      #contactModalPanel .contact-hero-heading span {
        display: block;
        white-space: nowrap;
      }

      #contactModalPanel .contact-hero-col .contact-hero-copy > p {
        color: rgba(238, 242, 255, 0.88) !important;
      }

      #contactModalPanel .contact-hero-copy p,
      #contactModalPanel .contact-hero-lines li,
      #contactModalPanel .contact-link-item a,
      #contactModalPanel .contact-faq-item p,
      #contactModalPanel .contact-form-col input,
      #contactModalPanel .contact-form-col textarea {
        font-weight: 500;
      }

      #contactModalPanel .contact-hero-lines li {
        border-color: rgba(247, 248, 255, 0.22) !important;
      }

      #contactModalPanel .contact-form-col > label > span {
        color: rgba(234, 240, 255, 0.74) !important;
        font-weight: 600;
      }

      #contactModalPanel .contact-form-col > label,
      #contactModalPanel .contact-form-col > div {
        grid-column: 1 / -1;
      }

      #contactModalPanel .contact-form-col input,
      #contactModalPanel .contact-form-col textarea {
        border-color: rgba(247, 248, 255, 0.34) !important;
        background: rgba(12, 4, 49, 0.36) !important;
        color: #f7f8ff !important;
        transition:
          border-color 220ms ease,
          background-color 220ms ease,
          transform 220ms ease;
      }

      #contactModalPanel .contact-form-col input::placeholder,
      #contactModalPanel .contact-form-col textarea::placeholder {
        color: rgba(231, 238, 255, 0.56) !important;
      }

      #contactModalPanel .contact-form-col input:hover,
      #contactModalPanel .contact-form-col textarea:hover,
      #contactModalPanel .contact-form-col input:focus,
      #contactModalPanel .contact-form-col textarea:focus {
        border-color: rgba(247, 248, 255, 0.72) !important;
        background: rgba(12, 4, 49, 0.52) !important;
      }

      #contactModalPanel .contact-form-col button[type="submit"] {
        border-color: rgba(247, 248, 255, 0.42) !important;
        background: rgba(247, 248, 255, 0.08) !important;
      }

      #contactModalPanel .contact-form-col button[type="submit"]:hover,
      #contactModalPanel .contact-form-col button[type="submit"]:focus-visible {
        border-color: rgba(247, 248, 255, 0.74) !important;
        background: rgba(247, 248, 255, 0.2) !important;
      }

      #contactModalPanel .contact-side-col section > p:first-child,
      #contactModalPanel .contact-faq-section > div > div:first-child > p {
        text-align: left !important;
        color: rgba(234, 240, 255, 0.72) !important;
      }

      #contactModalPanel .contact-section-title {
        display: inline-block;
        font-weight: 600;
        transition:
          transform 220ms ease,
          text-shadow 220ms ease;
      }

      #contactModalPanel .contact-side-col > section:hover .contact-section-title,
      #contactModalPanel .contact-side-col > section:focus-within .contact-section-title,
      #contactModalPanel .contact-faq-section:hover .contact-section-title,
      #contactModalPanel .contact-faq-section:focus-within .contact-section-title,
      #contactModalPanel .contact-faq-item summary:hover,
      #contactModalPanel .contact-faq-item summary:focus-visible {
        transform: translateX(0.12rem);
        text-shadow: 0 0 14px rgba(255, 255, 255, 0.54);
      }

      #contactModalPanel .contact-credential-row,
      #contactModalPanel .contact-link-item {
        border-color: rgba(247, 248, 255, 0.26) !important;
        background: transparent !important;
      }

      #contactModalPanel .contact-link-item {
        transition:
          border-color 220ms ease,
          background-color 220ms ease,
          transform 220ms ease;
      }

      #contactModalPanel .contact-link-item:hover,
      #contactModalPanel .contact-link-item:focus-within {
        border-color: rgba(247, 248, 255, 0.58) !important;
        background: rgba(247, 248, 255, 0.08) !important;
        transform: translateY(-1px);
      }

      #contactModalPanel .contact-faq-section h3 {
        font-family: "Archivo Black", sans-serif;
        text-transform: uppercase;
        letter-spacing: -0.02em;
      }

      #contactModalPanel .contact-faq-item {
        border-color: rgba(247, 248, 255, 0.26) !important;
        transition:
          border-color 220ms ease,
          background-color 220ms ease,
          transform 220ms ease;
      }

      #contactModalPanel .contact-faq-item:hover,
      #contactModalPanel .contact-faq-item:focus-within {
        border-color: rgba(247, 248, 255, 0.58) !important;
        background: rgba(247, 248, 255, 0.08) !important;
        transform: translateY(-1px);
      }

      #contactModalPanel .contact-faq-item summary {
        color: rgba(246, 248, 255, 0.95) !important;
        transition:
          transform 220ms ease,
          text-shadow 220ms ease,
          color 220ms ease;
      }

      #contactModalPanel .contact-faq-item p {
        color: rgba(236, 242, 255, 0.88) !important;
      }

      #contactClose {
        border-color: rgba(247, 248, 255, 0.34) !important;
        background: rgba(247, 248, 255, 0.08) !important;
      }

      #contactClose:hover,
      #contactClose:focus-visible {
        border-color: rgba(247, 248, 255, 0.74) !important;
        background: rgba(247, 248, 255, 0.2) !important;
      }

      #aboutClose {
        z-index: 40;
        pointer-events: auto;
        touch-action: manipulation;
      }

      @media (min-width: 1024px) {
        #contactModalPanel .contact-modal-layout {
          grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
          grid-template-areas:
            "hero hero"
            "form side"
            "faq faq";
          gap: 1.25rem;
        }

        #contactModalPanel .contact-hero-col {
          display: block;
          align-items: start;
          max-width: 34rem;
        }

        #contactModalPanel .contact-side-col {
          position: static;
          align-self: start;
        }
      }

      @media (min-width: 1280px) {
        .left-panel .left-meta > div:first-child {
          justify-content: flex-start !important;
          column-gap: clamp(1rem, 1.45vw, 1.7rem) !important;
          row-gap: 0.48rem !important;
        }

        .left-panel .left-meta > div:first-child > * {
          justify-self: start !important;
        }

        .social-rail {
          right: clamp(1.8rem, 3.2vw, 3.2rem) !important;
        }
      }

      @media (max-width: 1024px) {
        .right-zone {
          margin-right: 0 !important;
        }

        #projectShell {
          width: 100% !important;
          perspective: none;
        }

        #projectPlane {
          transform: rotateY(0deg) translate3d(0, 0, 0) !important;
        }

        #contactModalPanel {
          padding-inline: clamp(1rem, 4vw, 1.8rem) !important;
        }

        #contactModalPanel .contact-modal-layout {
          gap: 0.85rem;
        }

        #contactModalPanel .contact-hero-col {
          padding-inline: 0 !important;
        }

        #contactModalPanel .contact-form-col,
        #contactModalPanel .contact-side-col > section,
        #contactModalPanel .contact-faq-section {
          padding: 0.95rem !important;
        }

        #contactModalPanel .contact-hero-col > p:first-of-type {
          font-size: clamp(1.55rem, 6.8vw, 2.95rem) !important;
          line-height: 0.93;
          letter-spacing: -0.02em;
        }
      }

      @media (max-width: 1000px) and (min-width: 769px) {
        .left-panel .left-meta > div[aria-hidden="true"] {
          height: 2.1rem !important;
        }

        .right-zone {
          padding-top: 1.3rem !important;
          padding-bottom: clamp(3.4rem, 8vw, 4.8rem) !important;
        }

        #projectPlane {
          padding-bottom: clamp(1.1rem, 2.8vw, 2rem);
        }

        #projectPlane .project-link:last-child {
          margin-bottom: clamp(1.1rem, 3vw, 2rem) !important;
        }
      }

      @media (max-width: 768px) {
        #aboutModalPanel {
          padding-top: clamp(4.2rem, 15vw, 5rem) !important;
        }

        #aboutClose {
          top: 0.8rem !important;
          right: 0.8rem !important;
          border-color: rgba(247, 248, 255, 0.5) !important;
          background: rgba(247, 248, 255, 0.12) !important;
        }

        .left-panel .left-meta > div[aria-hidden="true"] {
          height: 1.2rem !important;
        }

        .right-zone {
          padding-top: 0.35rem !important;
          padding-bottom: clamp(8rem, 22vw, 10rem) !important;
        }

        #projectPlane {
          padding-left: 1.15rem;
          padding-bottom: clamp(4.8rem, 18vw, 7rem);
          gap: 0.3rem;
        }

        #projectPlane .project-title {
          font-size: clamp(1.38rem, 8vw, 2.2rem) !important;
          line-height: 0.92;
          letter-spacing: -0.028em !important;
          position: relative;
          z-index: 1;
          white-space: normal !important;
          overflow-wrap: anywhere;
          word-break: break-word;
        }

        #projectPlane .project-link {
          margin-top: 0.02rem !important;
          max-width: min(92vw, 21.5rem);
          padding-left: 2.8rem;
        }

        #projectPlane .project-link:last-child {
          margin-bottom: clamp(3.2rem, 14vw, 5.2rem) !important;
        }

        #projectPlane .project-year {
          top: 0.17em !important;
          left: -0.68rem !important;
          z-index: 6 !important;
          font-size: 0.76rem !important;
          letter-spacing: 0.045em !important;
        }

        #projectPlane .project-slash {
          top: 0.01em !important;
          left: 1.38rem !important;
          z-index: 6 !important;
          font-size: 1.14rem !important;
          line-height: 1;
        }

        #contactModalPanel {
          padding-inline: 0.9rem !important;
          padding-top: clamp(3.8rem, 14vw, 4.6rem) !important;
        }

        #contactModalPanel .contact-hero-col > p:first-of-type {
          font-size: clamp(1rem, 6.2vw, 1.55rem) !important;
          letter-spacing: -0.012em;
        }

        #contactModalPanel .contact-hero-heading span {
          white-space: normal;
        }

        #contactModalPanel .contact-faq-section h3 {
          font-size: clamp(1.42rem, 7.2vw, 1.9rem) !important;
          max-width: none;
          line-height: 0.92;
        }

        #contactModalPanel .contact-form-col button[type="submit"] {
          width: 100%;
          justify-content: center;
        }
      }

      .hover-profile {
        position: relative;
        width: fit-content;
      }

      .hover-profile-card {
        position: absolute;
        left: 0;
        bottom: calc(100% + 0.85rem);
        top: auto;
        z-index: 12;
        width: min(20rem, 72vw);
        overflow: hidden;
        border-radius: 0.9rem;
        border: 1px solid rgba(247, 248, 255, 0.34);
        background: rgba(21, 8, 73, 0.94);
        box-shadow: 0 1rem 2.6rem rgba(8, 2, 32, 0.42);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 8px, 0) scale(0.96);
        transition:
          opacity 220ms ease,
          transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
          visibility 220ms ease;
      }

      .hover-profile:hover .hover-profile-card,
      .hover-profile:focus-within .hover-profile-card {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0) scale(1);
      }

      .hover-profile-card img {
        display: block;
        width: 100%;
        height: auto;
        max-height: min(62vh, 24rem);
        object-fit: contain;
        background: rgba(8, 2, 32, 0.3);
      }

      .hover-profile-card p {
        margin: 0;
        padding: 0.78rem 0.9rem 0.86rem;
        font-size: 0.84rem;
        letter-spacing: 0.02em;
        color: rgba(247, 248, 255, 0.9);
      }

      .interest-icon,
      .skill-icon,
      .section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #f7f8ff;
        flex-shrink: 0;
      }

      .interest-icon {
        width: 1.14rem;
        height: 1.14rem;
        border-radius: 999px;
        border: 1px solid rgba(247, 248, 255, 0.42);
      }

      .interest-icon i {
        font-size: 0.56rem;
      }

      .section-icon {
        width: 1.78rem;
        height: 1.78rem;
        border-radius: 999px;
        border: 1px solid rgba(247, 248, 255, 0.6);
        background: rgba(247, 248, 255, 0.08);
      }

      .section-icon i {
        font-size: 0.74rem;
      }

      .skill-item {
        position: relative;
        width: fit-content;
      }

      .skill-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.44rem;
        color: rgba(242, 246, 255, 0.92);
        outline: none;
      }

      .skill-icon {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 0.35rem;
        border: 1px solid rgba(247, 248, 255, 0.38);
        background: rgba(247, 248, 255, 0.08);
      }

      .skill-icon i {
        font-size: 0.6rem;
      }

      .skill-popup {
        position: absolute;
        top: 50%;
        left: calc(100% + 0.65rem);
        z-index: 5;
        min-width: 15.75rem;
        max-width: min(23rem, 74vw);
        white-space: normal;
        border: 1px solid rgba(247, 248, 255, 0.34);
        background: rgba(15, 7, 58, 0.95);
        color: rgba(247, 248, 255, 0.95);
        border-radius: 0.5rem;
        padding: 0.38rem 0.56rem;
        font-size: 0.72rem;
        line-height: 1.42;
        letter-spacing: 0.02em;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(-4px, -50%, 0);
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          visibility 220ms ease;
      }

      .skill-item:hover .skill-popup,
      .skill-item:focus-within .skill-popup {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, -50%, 0);
      }

      .skill-item-flip .skill-popup {
        left: auto;
        right: calc(100% + 0.65rem);
        min-width: 17.4rem;
        transform: translate3d(4px, -50%, 0);
      }

      .skill-item-flip:hover .skill-popup,
      .skill-item-flip:focus-within .skill-popup {
        transform: translate3d(0, -50%, 0);
      }

      .skill-tag:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.2rem;
      }

      .career-panel {
        border-top: 1px solid rgba(247, 248, 255, 0.22);
        border-bottom: 1px solid rgba(247, 248, 255, 0.22);
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        background: transparent;
        overflow: hidden;
      }

      .career-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 1.25rem 1rem;
        border-top: 1px solid rgba(247, 248, 255, 0.2);
      }

      .career-row:first-of-type {
        border-top: 0;
      }

      .career-label {
        margin: 0;
        padding: 0.95rem 1rem;
        border-top: 1px solid rgba(247, 248, 255, 0.2);
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.11em;
        color: rgba(245, 248, 255, 0.88);
      }

      .career-left-title {
        margin: 0;
        font-size: clamp(1.02rem, 1.18vw, 1.25rem);
        font-weight: 700;
        color: #f7f8ff;
      }

      .career-left-subtitle {
        margin: 0.3rem 0 0;
        font-size: 0.92rem;
        color: rgba(236, 242, 255, 0.9);
      }

      .career-left-date {
        margin: 0.26rem 0 0;
        color: rgba(233, 239, 255, 0.86);
        font-size: 0.92rem;
      }

      .career-right-main {
        margin: 0;
        font-size: clamp(0.97rem, 1.04vw, 1.08rem);
        font-weight: 600;
        line-height: 1.54;
        color: rgba(246, 248, 255, 0.98);
      }

      .career-right-sub {
        margin: 0.32rem 0 0;
        font-size: 0.93rem;
        color: rgba(238, 243, 255, 0.86);
      }

      .career-footer {
        display: flex;
        justify-content: space-between;
        gap: 0.8rem;
        padding: 0.95rem 1rem;
        border-top: 1px solid rgba(247, 248, 255, 0.2);
        text-transform: uppercase;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.11em;
        color: rgba(240, 245, 255, 0.8);
      }

      .career-certifications {
        padding: 1rem;
        border-top: 1px solid rgba(247, 248, 255, 0.2);
      }

      .career-certs-title {
        margin: 0.46rem 0 0;
        font-size: clamp(1.3rem, 2.2vw, 2rem);
        font-weight: 700;
        line-height: 1.06;
        letter-spacing: -0.01em;
        color: #f7f8ff;
      }

      .career-cert-list {
        margin-top: 0.9rem;
        display: grid;
        gap: 0;
      }

      .cert-row {
        position: relative;
        cursor: pointer;
        transition: background-color 220ms ease;
      }

      .cert-row:hover,
      .cert-row:focus-within,
      .cert-row:focus-visible {
        background: rgba(247, 248, 255, 0.05);
      }

      .cert-row:focus-visible {
        outline: 1px solid rgba(247, 248, 255, 0.4);
        outline-offset: -1px;
      }

      #certHoverPreview {
        pointer-events: none;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 116;
        width: min(40vw, 560px);
        overflow: hidden;
        border-radius: 0.82rem;
        border: 1px solid rgba(247, 248, 255, 0.36);
        background: rgba(17, 8, 58, 0.94);
        box-shadow: 0 1.2rem 2.8rem rgba(7, 2, 32, 0.42);
        backdrop-filter: blur(3px);
      }

      #certHoverPreviewImage {
        display: block;
        width: 100%;
        height: auto;
        max-height: min(44vh, 380px);
        object-fit: contain;
        background: #eceef4;
      }

      @media (max-width: 1024px) {
        #certHoverPreview {
          width: min(64vw, 430px);
        }
      }

      @media (max-width: 640px) {
        #certHoverPreview {
          display: none !important;
        }
      }

      html.modal-open,
      body.modal-open {
        overflow: hidden;
      }

      html.modal-open {
        scrollbar-width: none;
      }

      html.modal-open::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      body.project-open #projectModal .modal-panel {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      body.project-open #projectModal .modal-panel::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      body.about-open .social-rail {
        opacity: 0 !important;
        visibility: hidden;
        pointer-events: none;
      }

      body.contact-open .social-rail {
        opacity: 0 !important;
        visibility: hidden;
        pointer-events: none;
      }

      @media (max-width: 1024px) {
        .social-rail {
          position: fixed !important;
          right: clamp(0.75rem, 3.8vw, 1.2rem) !important;
          bottom: 0.9rem !important;
          margin-top: 0 !important;
          z-index: 80 !important;
          align-items: flex-end !important;
          gap: 0.32rem !important;
        }
      }

      @media (max-width: 1000px) and (min-width: 769px) {
        .social-rail {
          bottom: 0.52rem !important;
        }
      }

      @media (max-width: 768px) {
        .social-rail {
          right: clamp(0.55rem, 3.8vw, 0.9rem) !important;
          bottom: clamp(0.55rem, 3.8vw, 0.95rem) !important;
          gap: 0.2rem !important;
        }

        .social-rail .social-link {
          min-width: 8.7rem;
          min-height: 0;
          padding: 0.06rem 0;
          border: 0;
          border-radius: 0;
          background: transparent;
          backdrop-filter: none;
          gap: 0.54rem;
          justify-content: flex-end;
          font-size: clamp(0.9rem, 1.04vw, 1.06rem);
        }

        .social-rail .social-link .index {
          font-size: 1em;
          line-height: 1.12;
        }

        .social-rail .social-link .label {
          font-size: 1em;
          line-height: 1.12;
          letter-spacing: 0;
        }

        .hover-profile-card {
          display: none !important;
        }

        #aboutModalPanel .about-side-photo-wrap:hover .about-side-photo,
        #aboutModalPanel .about-side-photo-wrap:focus-within .about-side-photo {
          transform: none;
          filter: none;
          box-shadow: 0 1rem 2.2rem rgba(8, 2, 32, 0.34);
        }

        #aboutModalPanel .about-side-photo-wrap:hover::after,
        #aboutModalPanel .about-side-photo-wrap:focus-within::after {
          transform: translateX(-136%) rotate(11deg);
          opacity: 0;
        }
      }

      body.about-open #aboutModalPanel {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      body.about-open #aboutModalPanel::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      body.contact-open #contactModalPanel {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      body.contact-open #contactModalPanel::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      html.about-open {
        scrollbar-width: none;
      }

      html.about-open::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      html.contact-open {
        scrollbar-width: none;
      }

      html.contact-open::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      @media (min-width: 900px) {
        .career-row {
          grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.6fr);
          align-items: start;
          gap: 1.35rem;
          padding: 1.5rem 1.2rem;
        }
      }

      @media (max-width: 1024px) {
        .hover-profile-card {
          width: min(18rem, 82vw);
          bottom: calc(100% + 0.65rem);
        }
      }

      @media (max-width: 640px) {
        .skill-popup {
          min-width: 0;
          max-width: min(16.8rem, 84vw);
          left: 0;
          right: auto;
          top: calc(100% + 0.44rem);
          transform: translate3d(0, -4px, 0);
        }

        .skill-item-flip .skill-popup {
          min-width: 0;
          left: 0;
          right: auto;
          transform: translate3d(0, -4px, 0);
        }

        .skill-item:hover .skill-popup,
        .skill-item:focus-within .skill-popup {
          transform: translate3d(0, 0, 0);
        }
      }

      @media (hover: hover) and (pointer: fine) {
        body {
          cursor: none;
        }

        a,
        button,
        [role="button"],
        input,
        textarea,
        select,
        summary {
          cursor: none !important;
        }
      }

      .cursor {
        width: 18px;
        height: 18px;
        border: 2px solid #ffffff;
        position: fixed;
        left: 0;
        top: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) rotate(45deg);
        transition:
          transform 0.15s ease,
          background 0.2s ease,
          opacity 0.2s ease;
        z-index: 120;
      }

      .cursor.hidden {
        opacity: 0;
      }

      .cursor-grow {
        transform: translate(-50%, -50%) scale(2) rotate(45deg);
        background: rgba(255, 255, 255, 0.2);
      }

      @media (hover: none), (pointer: coarse) {
        .cursor {
          display: none;
        }
      }

      html {
        scrollbar-width: thin;
        scrollbar-color: #8f73ff rgba(33, 8, 115, 0.95);
      }

      html::-webkit-scrollbar {
        width: 0.72rem;
      }

      html::-webkit-scrollbar-track {
        background: linear-gradient(180deg, rgba(38, 9, 128, 0.94) 0%, rgba(24, 5, 87, 0.96) 100%);
      }

      html::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #7a5eff 0%, #a58cff 100%);
        border: 2px solid #2f00bd;
        border-radius: 999px;
      }

      html::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #8b71ff 0%, #b59fff 100%);
      }