@font-face {
        font-family: "Zpix";
        src: url("public/fonts/zpix.woff2") format("woff2");
        font-display: swap;
        font-style: normal;
        font-weight: 400;
      }

      /* Mobile-only tool ribbon; desktop keeps the existing wheel interaction. */
      .mobile-tools-marquee {
        display: none;
      }

      @keyframes mobileToolsDrift {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(calc(-50% - 7px), 0, 0); }
      }

      @keyframes mobileToolsDriftReverse {
        from { transform: translate3d(calc(-50% - 7px), 0, 0); }
        to { transform: translate3d(0, 0, 0); }
      }

      @media (max-width: 680px) {
        /* Personal profile: keep the portrait compact and let the copy breathe. */
        .about-profile-grid {
          justify-items: center;
          gap: 34px;
        }

        .about-portrait {
          width: clamp(220px, 64vw, 280px);
          min-height: 0;
          justify-self: center;
        }

        .about-play {
          width: 58px;
          height: 58px;
          right: 12px;
          bottom: 12px;
        }

        .about-video-label {
          left: 14px;
          bottom: 14px;
          font-size: 6px;
        }

        .about-info {
          justify-self: stretch;
        }

        .about-info h3 {
          max-width: 100%;
          font-size: clamp(30px, 9vw, 38px);
          line-height: 1.05;
          white-space: nowrap;
        }

        /* The long story shares one continuous field instead of a dark inset panel. */
        .story-section::before {
          inset: -110px 0 -120px;
          opacity: 0.82;
          -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
        }

        .story-article-wrap,
        .story-article-inner,
        .story-article {
          background: transparent;
          box-shadow: none;
        }

        .story-article {
          border-top: 0;
          border-bottom: 0;
          padding-top: 46px;
        }

        .story-copy-head,
        .story-chapter {
          padding-inline: 0;
        }

        /* Four complete cards replace the desktop orbital capability map on phones. */
        .cap-map-section {
          padding: 62px max(16px, env(safe-area-inset-right)) 72px max(16px, env(safe-area-inset-left));
        }

        .cap-map-head {
          display: grid;
          gap: 12px;
          padding: 0 0 26px;
          text-align: left;
        }

        .cap-map-head > p {
          margin: 0;
          text-align: left;
        }

        .cap-map-field {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 12px;
          overflow: visible;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .cap-map-core,
        .cap-map-link,
        .cap-map-field::before,
        .cap-map-field::after {
          display: none !important;
        }

        .cap-map-node,
        .cap-map-node:nth-of-type(1),
        .cap-map-node:nth-of-type(2),
        .cap-map-node:nth-of-type(3),
        .cap-map-node:nth-of-type(4) {
          position: relative;
          inset: auto;
          width: 100%;
          min-height: 0;
          display: block;
          padding: 22px 20px 20px;
          border: 1px solid rgba(244, 241, 232, 0.13);
          border-radius: 14px;
          color: var(--paper);
          background:
            linear-gradient(135deg, rgba(var(--accent-rgb), 0.085), transparent 58%),
            rgba(9, 11, 11, 0.84);
          box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
          opacity: 1;
          text-align: left;
          transform: none !important;
        }

        .cap-map-node:nth-of-type(odd) {
          border-right: 1px solid rgba(244, 241, 232, 0.13);
        }

        .cap-map-node::before,
        .cap-map-node::after {
          display: none;
        }

        .cap-map-node > span {
          display: block;
          margin: 0 0 10px;
          color: var(--accent);
          font-size: 9px;
          line-height: 1.3;
        }

        .cap-map-node h3 {
          margin: 0 0 12px;
          font-size: clamp(24px, 7.2vw, 30px);
          line-height: 1.12;
        }

        .cap-map-node p {
          display: block;
          margin: 0;
          color: rgba(244, 241, 232, 0.62);
          font-size: 12px;
          line-height: 1.75;
        }

        .cap-map-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 7px;
          margin-top: 16px;
        }

        .cap-map-tags small,
        .cap-map-tags small:nth-child(n + 4) {
          display: inline-flex;
          align-items: center;
          min-height: 26px;
          padding: 5px 9px;
          border: 1px solid rgba(244, 241, 232, 0.11);
          border-radius: 999px;
          color: rgba(244, 241, 232, 0.58);
          font-size: 8px;
          line-height: 1;
        }

        .cap-map-node:hover,
        .cap-map-node:focus-visible,
        .cap-map-node.is-active {
          background:
            linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 58%),
            rgba(9, 11, 11, 0.9);
          transform: none !important;
        }

        /* AI arsenal becomes a lightweight, continuously moving logo wall. */
        .mouse-tools {
          min-height: 650px;
        }

        .mouse-tools-shell {
          min-height: 650px;
          padding: 72px 0 58px;
        }

        .mouse-tools-head {
          position: relative;
          top: auto;
          width: calc(100% - 32px);
          margin: 0 auto 44px;
          align-items: flex-start;
        }

        .mouse-tools-head h2 {
          font-size: clamp(42px, 13vw, 58px);
        }

        .mouse-tools-stage,
        .mouse-tools-hint {
          display: none !important;
        }

        .mobile-tools-marquee {
          position: relative;
          display: grid;
          gap: 14px;
          width: 100%;
          padding: 16px 0 24px;
          overflow: hidden;
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        }

        .mobile-tools-row {
          width: 100%;
          overflow: hidden;
        }

        .mobile-tools-track {
          width: max-content;
          display: flex;
          gap: 14px;
          padding-inline: 7px;
          animation: mobileToolsDrift 24s linear infinite;
          will-change: transform;
        }

        .mobile-tools-row--reverse .mobile-tools-track {
          animation-name: mobileToolsDriftReverse;
          animation-duration: 27s;
        }

        .mobile-tools-track--slow {
          animation-duration: 30s;
        }

        .mobile-tools-track a {
          flex: 0 0 auto;
          width: 104px;
          height: 112px;
          display: grid;
          place-items: center;
          align-content: center;
          gap: 10px;
          border: 1px solid rgba(244, 241, 232, 0.12);
          border-radius: 14px;
          color: rgba(244, 241, 232, 0.72);
          background: rgba(8, 10, 10, 0.72);
          box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
        }

        .mobile-tools-track img {
          width: 48px;
          height: 48px;
          display: block;
          border-radius: 12px;
          object-fit: contain;
        }

        .mobile-tools-track span {
          max-width: 90px;
          overflow: hidden;
          font-size: 10px;
          font-weight: 700;
          line-height: 1.2;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .mobile-tools-marquee:active .mobile-tools-track {
          animation-play-state: paused;
        }
      }

      @media (max-width: 680px) and (prefers-reduced-motion: reduce) {
        .mobile-tools-track {
          animation-play-state: paused;
        }
      }

      /* AIGC visual archive: an empty Drift Wall ready for 40 future works. */
      .aigc-gallery {
        position: relative;
        z-index: 3;
        min-height: 1320px;
        padding: 118px 0 110px;
        overflow: clip;
        background:
          radial-gradient(ellipse at 50% 26%, rgba(var(--accent-rgb), 0.11), transparent 34%),
          linear-gradient(180deg, #050606 0%, #090a0a 46%, #050606 100%);
      }

      .aigc-gallery::before {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: "";
        opacity: 0.42;
        background-image:
          linear-gradient(rgba(244, 241, 232, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(244, 241, 232, 0.035) 1px, transparent 1px);
        background-size: 64px 64px;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 88%, transparent);
        mask-image: linear-gradient(180deg, transparent, #000 16%, #000 88%, transparent);
      }

      .aigc-gallery-head {
        position: relative;
        z-index: 3;
        width: min(1320px, calc(100% - 80px));
        margin: 0 auto 72px;
        text-align: center;
      }

      .aigc-gallery-head > span {
        display: block;
        margin-bottom: 18px;
        color: var(--accent);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.18em;
      }

      .aigc-gallery-head h2 {
        margin: 0;
        font-size: clamp(64px, 8vw, 132px);
        font-weight: 760;
        line-height: 0.92;
        letter-spacing: 0;
      }

      .aigc-gallery-head p {
        max-width: 660px;
        margin: 28px auto 0;
        color: rgba(244, 241, 232, 0.54);
        font-size: 16px;
        line-height: 1.8;
      }

      .aigc-drift-viewport {
        position: relative;
        width: min(1760px, calc(100% - 56px));
        height: 780px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid rgba(244, 241, 232, 0.12);
        border-radius: 22px;
        perspective: 1200px;
        -webkit-mask-image:
          linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%),
          linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
          linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%),
          linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
        mask-composite: intersect;
        background: rgba(9, 8, 13, 0.58);
      }

      .aigc-drift-stage {
        --wall-x: 0px;
        --wall-y: 0px;
        --wall-rx: 13deg;
        --wall-ry: -10deg;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 118%;
        height: 138%;
        display: grid;
        grid-template-columns: repeat(var(--aigc-columns, 5), minmax(0, 1fr));
        gap: 16px;
        transform: translate3d(calc(-50% + var(--wall-x)), calc(-50% + var(--wall-y)), -90px) rotateX(var(--wall-rx)) rotateY(var(--wall-ry)) rotateZ(-1.2deg);
        transform-style: preserve-3d;
        will-change: transform;
      }

      .aigc-drift-col {
        position: relative;
        height: 100%;
        overflow: hidden;
        transform-style: preserve-3d;
      }

      .aigc-drift-track {
        display: flex;
        flex-direction: column;
        animation: aigcWallDrift var(--column-duration) linear infinite;
        will-change: transform;
      }

      .aigc-drift-stack {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-bottom: 16px;
      }

      .aigc-drift-track--reverse {
        animation-name: aigcWallDriftReverse;
      }

      @keyframes aigcWallDrift {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(0, -50%, 0); }
      }

      @keyframes aigcWallDriftReverse {
        from { transform: translate3d(0, -50%, 0); }
        to { transform: translate3d(0, 0, 0); }
      }

      .aigc-drift-tile {
        position: relative;
        width: 100%;
        flex: 0 0 auto;
        aspect-ratio: var(--tile-aspect, 1);
        overflow: hidden;
        border: 1px solid rgba(244, 241, 232, 0.13);
        border-radius: 12px;
        background:
          radial-gradient(circle at calc(20% + (var(--tile-index) % 4) * 20%) 30%, rgba(var(--accent-rgb), 0.1), transparent 28%),
          linear-gradient(145deg, rgba(244, 241, 232, 0.055), rgba(244, 241, 232, 0.012));
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
        opacity: 0.58;
        filter: saturate(0.9) brightness(0.74);
        transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease, filter 320ms ease, border-color 240ms ease;
        transform: translateZ(0);
        cursor: pointer;
      }

      .aigc-drift-tile:focus-visible {
        outline: 2px solid rgba(var(--accent-rgb), 0.8);
        outline-offset: 4px;
      }

      .aigc-drift-tile > img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        -webkit-user-drag: none;
        user-select: none;
        transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 260ms ease;
      }

      .aigc-drift-tile.has-image::after {
        display: none;
      }

      .aigc-drift-tile.has-image::before {
        z-index: 1;
        inset: 0;
        border: 0;
        background: linear-gradient(180deg, transparent 56%, rgba(4, 5, 5, 0.58));
      }

      .aigc-drift-tile.has-image:hover > img {
        transform: scale(1.025);
      }

      .aigc-drift-tile::before,
      .aigc-drift-tile::after {
        position: absolute;
        content: "";
        pointer-events: none;
      }

      .aigc-drift-tile::before {
        inset: 12px;
        border: 1px solid rgba(244, 241, 232, 0.07);
      }

      .aigc-drift-tile::after {
        top: 50%;
        left: 50%;
        width: 34px;
        height: 1px;
        background: rgba(244, 241, 232, 0.12);
        box-shadow: 0 -6px rgba(244, 241, 232, 0.06), 0 6px rgba(244, 241, 232, 0.06);
        transform: translate(-50%, -50%);
      }

      .aigc-tile-marker {
        position: absolute;
        right: 12px;
        bottom: 10px;
        z-index: 2;
        color: rgba(244, 241, 232, 0.26);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.14em;
      }

      .aigc-drift-tile.is-video {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 12px;
        padding: 24px;
        border-color: rgba(var(--accent-rgb), 0.34);
        background:
          radial-gradient(circle at 72% 20%, rgba(var(--accent-rgb), 0.2), transparent 36%),
          linear-gradient(145deg, #21100d, #090a0a 68%);
        cursor: pointer;
      }

      .aigc-drift-tile.is-video.has-cover {
        padding: 0;
        background: #090a0a;
      }

      .aigc-drift-tile.is-video.has-cover > img {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .aigc-drift-tile.is-video.has-cover::before {
        z-index: 1;
        inset: 0;
        border: 0;
        background: linear-gradient(180deg, transparent 58%, rgba(3, 4, 4, 0.3));
      }

      .aigc-drift-tile.is-video::before {
        inset: 10px;
        border-color: rgba(var(--accent-rgb), 0.18);
      }

      .aigc-drift-tile.is-video::after {
        top: 24px;
        right: 24px;
        left: auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.72);
        transform: none;
      }

      .aigc-video-kicker {
        position: relative;
        z-index: 1;
        color: rgba(244, 241, 232, 0.44);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.16em;
      }

      .aigc-drift-tile.is-video > strong {
        position: relative;
        z-index: 1;
        max-width: 82%;
        font-size: clamp(22px, 2vw, 32px);
        line-height: 1.08;
        letter-spacing: 0;
      }

      .aigc-video-play {
        position: absolute;
        right: 22px;
        bottom: 22px;
        z-index: 2;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(244, 241, 232, 0.24);
        border-radius: 50%;
        color: var(--paper);
        font-size: 10px;
        font-style: normal;
        transition: color 180ms ease, background-color 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .aigc-drift-tile.is-video:hover .aigc-video-play {
        color: #080a0a;
        background: var(--paper);
        transform: scale(1.08);
      }

      .aigc-drift-tile:hover {
        z-index: 8;
        opacity: 1;
        filter: saturate(1.06) brightness(1);
        border-color: rgba(var(--accent-rgb), 0.56);
        transform: translateZ(68px) scale(1.045);
      }

      .aigc-drift-col:hover .aigc-drift-track {
        animation-play-state: paused;
      }

      .aigc-drift-cursor {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at center, transparent 0, transparent 18%, rgba(5, 6, 6, 0.08) 62%, rgba(5, 6, 6, 0.62) 100%);
      }

      body.aigc-lightbox-open {
        overflow: hidden;
      }

      .aigc-lightbox[hidden] {
        display: none;
      }

      .aigc-lightbox {
        position: fixed;
        inset: 0;
        z-index: 3000;
        display: grid;
        place-items: center;
        padding: clamp(18px, 4vw, 56px);
      }

      .aigc-lightbox-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(2, 3, 3, 0.88);
        backdrop-filter: blur(18px);
        opacity: 0;
        transition: opacity 260ms ease;
      }

      .aigc-lightbox-panel {
        position: relative;
        width: fit-content;
        height: fit-content;
        max-width: min(46vw, 760px);
        max-height: min(58dvh, 620px);
        display: grid;
        place-items: center;
        box-sizing: border-box;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 4px;
        background: transparent;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.975);
        transition: opacity 240ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .aigc-lightbox.is-open .aigc-lightbox-backdrop,
      .aigc-lightbox.is-open .aigc-lightbox-panel {
        opacity: 1;
      }

      .aigc-lightbox.is-open .aigc-lightbox-panel {
        transform: translate3d(0, 0, 0) scale(1);
      }

      .aigc-lightbox-image {
        width: auto;
        height: auto;
        max-width: min(46vw, 760px);
        max-height: min(58dvh, 620px);
        display: block;
        object-fit: contain;
        border-radius: 4px;
      }

      .aigc-lightbox-placeholder {
        position: relative;
        width: min(72%, 720px);
        aspect-ratio: 4 / 3;
        border: 1px solid rgba(244, 241, 232, 0.12);
        background:
          radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.14), transparent 34%),
          linear-gradient(145deg, rgba(244, 241, 232, 0.055), rgba(244, 241, 232, 0.012));
      }

      .aigc-lightbox-placeholder > span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 46px;
        height: 1px;
        background: rgba(244, 241, 232, 0.16);
        box-shadow: 0 -8px rgba(244, 241, 232, 0.08), 0 8px rgba(244, 241, 232, 0.08);
        transform: translate(-50%, -50%);
      }

      .aigc-lightbox-close {
        position: absolute;
        top: -18px;
        right: -18px;
        z-index: 2;
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(244, 241, 232, 0.2);
        border-radius: 50%;
        color: var(--paper);
        background: rgba(8, 10, 10, 0.7);
        font: 300 30px/1 Arial, sans-serif;
        cursor: pointer;
        transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
      }

      .aigc-lightbox-close:hover,
      .aigc-lightbox-close:focus-visible {
        color: #080a0a;
        border-color: var(--paper);
        background: var(--paper);
        outline: none;
      }

      .aigc-lightbox-index {
        position: absolute;
        right: 10px;
        bottom: 8px;
        color: rgba(244, 241, 232, 0.44);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.18em;
      }

      @media (max-width: 680px) {
        .aigc-gallery {
          min-height: 860px;
          padding: 82px 0 76px;
        }

        .aigc-gallery-head {
          width: calc(100% - 32px);
          margin-bottom: 46px;
          text-align: left;
        }

        .aigc-gallery-head > span {
          margin-bottom: 12px;
          font-size: 8px;
        }

        .aigc-gallery-head h2 {
          font-size: clamp(42px, 13vw, 58px);
          line-height: 1;
        }

        .aigc-gallery-head p {
          max-width: 330px;
          margin: 18px 0 0;
          font-size: 12px;
          line-height: 1.75;
        }

        .aigc-drift-viewport {
          width: calc(100% - 24px);
          height: 560px;
          border-radius: 14px;
          perspective: none;
          -webkit-mask-image:
            linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%),
            linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          -webkit-mask-composite: source-in;
          mask-image:
            linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%),
            linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-composite: intersect;
        }

        .aigc-drift-stage {
          width: 132%;
          height: 132%;
          gap: 8px;
          transform: translate3d(-50%, -50%, 0) rotateZ(-1.2deg);
        }

        .aigc-drift-track {
          animation-duration: var(--column-duration);
        }

        .aigc-drift-stack {
          gap: 8px;
          padding-bottom: 8px;
        }

        .aigc-drift-tile {
          width: 100%;
          border-radius: 6px;
          box-shadow: none;
          transform: none;
        }

        .aigc-drift-tile.is-video {
          gap: 8px;
          padding: 16px;
        }

        .aigc-drift-tile.is-video > strong {
          font-size: 18px;
        }

        .aigc-video-play {
          right: 12px;
          bottom: 12px;
          width: 32px;
          height: 32px;
        }

        .aigc-lightbox {
          padding: 14px;
        }

        .aigc-lightbox-panel {
          width: fit-content;
          height: fit-content;
          max-width: 82vw;
          max-height: 52dvh;
          padding: 0;
          border-radius: 4px;
        }

        .aigc-lightbox-image {
          max-width: 82vw;
          max-height: 52dvh;
        }

        .aigc-lightbox-close {
          top: 12px;
          right: 12px;
          width: 44px;
          height: 44px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .aigc-drift-track {
          animation-play-state: paused;
        }
      }

      :root {
        --bg: #080a0a;
        --bg-soft: #0d1111;
        --panel: rgba(244, 241, 232, 0.075);
        --panel-strong: rgba(244, 241, 232, 0.13);
        --paper: #f4f1e8;
        --muted: rgba(244, 241, 232, 0.58);
        --faint: rgba(244, 241, 232, 0.34);
        --line: rgba(244, 241, 232, 0.14);
        --line-strong: rgba(244, 241, 232, 0.28);
        --accent: #ff4f2e;
        --accent-rgb: 255, 79, 46;
        --accent-2: #b8ff5d;
        --accent-3: #40d9ff;
        --violet: #a78bfa;
        --radius: 10px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        background: var(--bg);
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        min-height: 100vh;
        color: var(--paper);
        background:
          radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 28vw),
          radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 26vw),
          linear-gradient(180deg, #080a0a 0%, #0b0e0e 42%, #080a0a 100%);
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Microsoft YaHei", Arial, sans-serif;
        line-height: 1.48;
        letter-spacing: 0;
        overflow-x: hidden;
      }

      body[data-theme="lime"] {
        --accent: #b8ff5d;
        --accent-rgb: 184, 255, 93;
        --accent-2: #40d9ff;
        --accent-3: #ff4f2e;
      }

      body[data-theme="cyan"] {
        --accent: #40d9ff;
        --accent-rgb: 64, 217, 255;
        --accent-2: #ff4f2e;
        --accent-3: #b8ff5d;
      }

      body.is-locked {
        overflow: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button {
        font: inherit;
      }

      img {
        display: block;
        max-width: 100%;
      }

      .noise,
      .vignette,
      .cursor {
        pointer-events: none;
        position: fixed;
      }

      .noise {
        inset: 0;
        z-index: 1;
        opacity: 0.16;
        background-image:
          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 36px 36px;
        mask-image: linear-gradient(180deg, black 0%, transparent 88%);
      }

      .vignette {
        inset: 0;
        z-index: 2;
        background:
          linear-gradient(180deg, rgba(8, 10, 10, 0.12), transparent 24%, rgba(8, 10, 10, 0.9)),
          radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.36) 100%);
      }

      .cursor {
        z-index: 101;
        left: 0;
        top: 0;
        width: 7px;
        height: 7px;
        border: 1px solid rgba(244, 241, 232, 0.9);
        border-radius: 50%;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition:
          opacity 180ms ease,
          width 180ms ease,
          height 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
        mix-blend-mode: difference;
      }

      .cursor.is-hot {
        width: 20px;
        height: 20px;
        border-color: var(--accent);
        background: rgba(var(--accent-rgb), 0.12);
      }

      .cursor-ribbon {
        position: fixed;
        z-index: 100;
        inset: 0;
        width: 100vw;
        height: 100svh;
        display: block;
        pointer-events: none;
        opacity: 0;
        transition: opacity 240ms ease;
      }

      .cursor-ribbon.is-active {
        opacity: 0.68;
      }

      body.intro-active .cursor,
      body.intro-active .cursor-ribbon {
        display: none;
      }

      .site {
        position: relative;
        z-index: 3;
      }

      .loader {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: grid;
        place-items: center;
        background: #050606;
        transition:
          transform 560ms cubic-bezier(0.77, 0, 0.175, 1),
          opacity 420ms ease;
      }

      .loader.is-done {
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
      }

      .loader-card {
        width: min(420px, calc(100% - 48px));
        display: grid;
        gap: 18px;
        opacity: 0.58;
      }

      .loader-line {
        height: 1px;
        background: var(--line);
        overflow: hidden;
      }

      .loader-line::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--accent);
        animation: loadbar 620ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
        transform-origin: left;
      }

      .loader-card span {
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: 12px;
        font-weight: 760;
        text-transform: uppercase;
      }

      @keyframes loadbar {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }

      .intro-gate {
        --mx: 0.5;
        --my: 0.5;
        position: fixed;
        inset: 0;
        z-index: 90;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
          radial-gradient(circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 26vw),
          radial-gradient(circle at 50% 50%, rgba(244, 241, 232, 0.06), transparent 22vw),
          #050606;
        transition:
          opacity 760ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .intro-gate[hidden] {
        display: none;
      }

      .intro-gate.is-leaving {
        opacity: 0;
        filter: none;
        transform: none;
        pointer-events: none;
      }

      .intro-gate::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 6;
        width: min(42vw, 520px);
        aspect-ratio: 1;
        border-radius: 50%;
        background:
          radial-gradient(circle, rgba(244, 241, 232, 0.28), transparent 24%),
          radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 58%);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.16);
      }

      .intro-gate.is-unlocking::after {
        animation: unlockFlash 720ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
      }

      .intro-canvas {
        position: absolute;
        inset: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        opacity: 0.56;
        mix-blend-mode: screen;
      }

      .intro-video-backdrop,
      .intro-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .intro-video-backdrop {
        z-index: 0;
        object-fit: cover;
        opacity: 0.68;
        filter: blur(30px) saturate(1.08) contrast(1.22) brightness(0.48);
        transform: scale(1.16);
      }

      .intro-video {
        z-index: 1;
        object-fit: contain;
        opacity: 0.98;
        filter: saturate(0.98) contrast(1.1) brightness(0.76);
        transform: none;
      }

      .intro-video-scrim {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
          radial-gradient(circle at 50% 48%, transparent 0 34%, rgba(5, 6, 6, 0.06) 55%, rgba(5, 6, 6, 0.52) 100%),
          radial-gradient(circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), color-mix(in srgb, var(--accent-3) 16%, transparent), transparent 30vw),
          linear-gradient(90deg, rgba(5, 6, 6, 0.42), transparent 18%, transparent 82%, rgba(5, 6, 6, 0.42)),
          linear-gradient(180deg, rgba(5, 6, 6, 0.56), transparent 20%, transparent 78%, rgba(5, 6, 6, 0.64));
      }

      .intro-edge-blur {
        position: absolute;
        inset: 0;
        z-index: 4;
        pointer-events: none;
      }

      .intro-edge-blur span {
        position: absolute;
        background: rgba(5, 6, 6, 0.18);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .edge-top,
      .edge-bottom {
        left: 0;
        right: 0;
        height: clamp(38px, 7vw, 92px);
      }

      .edge-top {
        top: 0;
        box-shadow: 0 34px 72px rgba(5, 6, 6, 0.42);
      }

      .edge-bottom {
        bottom: 0;
        box-shadow: 0 -34px 72px rgba(5, 6, 6, 0.48);
      }

      .edge-left,
      .edge-right {
        top: 0;
        bottom: 0;
        width: clamp(34px, 6vw, 88px);
      }

      .edge-left {
        left: 0;
        box-shadow: 28px 0 72px rgba(5, 6, 6, 0.42);
      }

      .edge-right {
        right: 0;
        box-shadow: -28px 0 72px rgba(5, 6, 6, 0.42);
      }

      .intro-frame {
        position: absolute;
        inset: 24px;
        z-index: 5;
        border: 1px solid rgba(244, 241, 232, 0.08);
        border-radius: 22px;
        pointer-events: none;
        box-shadow:
          inset 0 0 90px rgba(244, 241, 232, 0.028),
          0 0 70px rgba(0, 0, 0, 0.34);
      }

      .intro-frame::before,
      .intro-frame::after {
        content: "";
        position: absolute;
        width: min(26vw, 220px);
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        opacity: 0.6;
      }

      .intro-frame::before {
        left: 8%;
        top: -1px;
      }

      .intro-frame::after {
        right: 8%;
        bottom: -1px;
      }

      .intro-copy {
        display: none;
      }

      .intro-copy span,
      .intro-status span,
      .intro-trigger small {
        color: var(--faint);
        font-size: 11px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .intro-copy strong {
        color: var(--paper);
        font-size: clamp(22px, 3vw, 42px);
        line-height: 1.02;
      }

      .intro-copy p {
        max-width: 360px;
        margin: 4px 0 0;
        color: rgba(244, 241, 232, 0.62);
        font-size: 14px;
      }

      .intro-status {
        display: none;
      }

      .intro-status div {
        min-width: 96px;
        padding: 11px 12px;
        background: rgba(8, 10, 10, 0.72);
      }

      .intro-status strong {
        display: block;
        margin-top: 4px;
        font-size: 14px;
      }

      .intro-trigger {
        position: relative;
        z-index: 7;
        width: clamp(198px, 20vw, 286px);
        aspect-ratio: 1.55;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 30px;
        color: var(--paper);
        clip-path: polygon(13% 0, 87% 0, 100% 50%, 87% 100%, 13% 100%, 0 50%);
        background:
          radial-gradient(circle at 22% 0%, rgba(244, 241, 232, 0.44), transparent 24%),
          linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, white), color-mix(in srgb, var(--accent-3) 70%, transparent) 55%, rgba(244, 241, 232, 0.22));
        cursor: pointer;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * 18px), calc((var(--my, 0.5) - 0.5) * 18px))
          perspective(900px)
          rotateX(calc((var(--my, 0.5) - 0.5) * -8deg))
          rotateY(calc((var(--mx, 0.5) - 0.5) * 10deg));
        box-shadow:
          0 30px 100px rgba(0, 0, 0, 0.46),
          0 0 70px color-mix(in srgb, var(--accent) 28%, transparent);
        transition:
          transform 160ms ease,
          filter 180ms ease;
      }

      .intro-gate.is-unlocking .intro-trigger {
        animation: triggerUnlock 740ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
      }

      .intro-trigger::before,
      .intro-trigger::after {
        content: "";
        position: absolute;
        clip-path: inherit;
      }

      .intro-trigger::before {
        inset: 8px;
        border: 1px solid rgba(244, 241, 232, 0.22);
        border-radius: 24px;
        background:
          linear-gradient(135deg, rgba(244, 241, 232, 0.12), transparent 34%),
          radial-gradient(circle at 74% 48%, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 48%),
          rgba(5, 6, 6, 0.78);
        box-shadow:
          inset 0 0 58px rgba(244, 241, 232, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.035);
      }

      .intro-trigger::after {
        inset: -16px;
        border-radius: 36px;
        background:
          conic-gradient(from 90deg, transparent, color-mix(in srgb, var(--accent) 72%, transparent), transparent, color-mix(in srgb, var(--accent-3) 58%, transparent), transparent);
        opacity: 0.42;
        filter: blur(14px);
        animation: introControlGlow 2.6s ease-in-out infinite;
      }

      .intro-trigger:hover,
      .intro-trigger:focus-visible {
        filter: brightness(1.2);
        outline: none;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * 22px), calc((var(--my, 0.5) - 0.5) * 22px))
          perspective(900px)
          rotateX(calc((var(--my, 0.5) - 0.5) * -10deg))
          rotateY(calc((var(--mx, 0.5) - 0.5) * 13deg))
          scale(1.035)
          translateY(-2px);
      }

      .intro-trigger span {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 8px;
        justify-items: center;
        font-weight: 860;
        letter-spacing: 0;
        text-transform: none;
      }

      .intro-trigger small {
        color: rgba(244, 241, 232, 0.48);
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .intro-trigger b {
        font-size: clamp(21px, 2.3vw, 31px);
        line-height: 1;
      }

      .intro-trigger i {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(244, 241, 232, 0.2);
        border-radius: 50%;
        background: rgba(244, 241, 232, 0.08);
        box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
      }

      .intro-trigger i::before {
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: translateX(-2px) rotate(45deg);
      }

      .intro-click-burst {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 6;
        width: min(380px, 48vw);
        aspect-ratio: 1;
        pointer-events: none;
        transform: translate(-50%, -50%);
      }

      .intro-click-burst span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 18px var(--accent);
        opacity: 0;
        transform:
          translate(-50%, -50%)
          rotate(var(--angle))
          translateY(0)
          scale(0.2);
      }

      .intro-gate.is-unlocking .intro-click-burst span {
        animation: burstParticle 820ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
        animation-delay: var(--delay);
      }

      .intro-gate.is-unlocking .intro-video {
        animation: videoUnlock 820ms ease forwards;
      }

      @keyframes pulseRing {
        0%,
        100% {
          opacity: 0.2;
          transform: scale(0.92);
        }
        50% {
          opacity: 0.64;
          transform: scale(1.05);
        }
      }

      @keyframes introControlGlow {
        0%,
        100% {
          opacity: 0.28;
          transform: scale(0.96);
        }
        50% {
          opacity: 0.7;
          transform: scale(1.04);
        }
      }

      @keyframes unlockFlash {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.16);
        }
        28% {
          opacity: 0.9;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.55);
        }
      }

      @keyframes triggerUnlock {
        0% {
          transform:
            translate(calc((var(--mx, 0.5) - 0.5) * 18px), calc((var(--my, 0.5) - 0.5) * 18px))
            scale(1);
        }
        34% {
          transform:
            translate(calc((var(--mx, 0.5) - 0.5) * 12px), calc((var(--my, 0.5) - 0.5) * 12px))
            scale(0.88);
          filter: brightness(1.45);
        }
        100% {
          transform:
            translate(calc((var(--mx, 0.5) - 0.5) * 24px), calc((var(--my, 0.5) - 0.5) * 24px))
            scale(1.22);
          filter: brightness(1.1);
        }
      }

      @keyframes burstParticle {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(0.2);
        }
        22% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(1);
        }
      }

      @keyframes videoUnlock {
        0% {
          filter: saturate(0.92) contrast(1.08) brightness(0.72);
          transform: scale(1);
        }
        44% {
          filter: saturate(1.15) contrast(1.18) brightness(0.98);
        }
        100% {
          filter: saturate(0.9) contrast(1.08) brightness(0.62);
          transform: scale(1.035);
        }
      }

      .intro-prelude {
        position: absolute;
        inset: 0;
        z-index: 40;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 48%, rgba(8, 17, 24, 0.82), transparent 32%),
          #020304;
        clip-path: circle(150% at 50% 50%);
        transition: visibility 0s linear 900ms;
      }

      .intro-prelude-grid {
        position: absolute;
        inset: 0;
        opacity: 0.2;
        background-image:
          linear-gradient(rgba(64, 217, 255, 0.07) 1px, transparent 1px),
          linear-gradient(90deg, rgba(64, 217, 255, 0.055) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(circle at center, black, transparent 70%);
      }

      .intro-neon-sign {
        position: relative;
        z-index: 3;
        width: min(1320px, 92vw);
        overflow: visible;
        filter: drop-shadow(0 0 36px rgba(64, 217, 255, 0.14));
      }

      .intro-neon-text {
        fill: var(--glyph-color);
        stroke-linecap: round;
        stroke-linejoin: round;
        clip-path: inset(0 100% 0 0);
        font-family: "Snell Roundhand", "STKaiti", "KaiTi", "Songti SC", cursive;
        font-size: 116px;
        font-style: italic;
        font-weight: 500;
        letter-spacing: 0;
      }

      .intro-neon-glyph.is-latin .intro-neon-text {
        font-family: "Snell Roundhand", "Bradley Hand", cursive;
        font-size: 136px;
      }

      .intro-neon-aura {
        fill: var(--glyph-color);
        stroke: var(--glyph-color);
        stroke-width: 10px;
        opacity: 0;
        filter: blur(16px);
      }

      .intro-neon-tube {
        fill: var(--glyph-color);
        stroke: var(--glyph-color);
        stroke-width: 2.5px;
        opacity: 0;
        filter:
          drop-shadow(0 0 4px var(--glyph-color))
          drop-shadow(0 0 13px var(--glyph-color))
          drop-shadow(0 0 28px color-mix(in srgb, var(--glyph-color) 54%, transparent));
      }

      .intro-neon-core {
        fill: color-mix(in srgb, var(--glyph-color) 48%, white);
        stroke: rgba(255, 255, 255, 0.72);
        stroke-width: 1px;
        opacity: 0;
        filter: drop-shadow(0 0 5px white);
      }

      .intro-gate.is-prelude-running .intro-neon-aura {
        animation: neonGlyphWrite 580ms cubic-bezier(0.65, 0, 0.35, 1) var(--glyph-delay) forwards;
      }

      .intro-gate.is-prelude-running .intro-neon-tube {
        animation: neonGlyphWrite 580ms cubic-bezier(0.65, 0, 0.35, 1) var(--glyph-delay) forwards;
      }

      .intro-gate.is-prelude-running .intro-neon-core {
        animation: neonGlyphWrite 580ms cubic-bezier(0.65, 0, 0.35, 1) var(--glyph-delay) forwards;
      }

      .intro-neon-lead {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 24vw;
        height: 5px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, #40d9ff, #ff4f9a);
        box-shadow:
          0 0 8px #40d9ff,
          0 0 24px rgba(255, 79, 154, 0.8);
        opacity: 0;
      }

      .intro-neon-lead-left {
        right: calc(50% + min(570px, 41vw));
      }

      .intro-neon-lead-right {
        left: calc(50% + min(570px, 41vw));
        transform: rotate(180deg);
      }

      .intro-gate.is-prelude-running .intro-neon-lead {
        animation: neonLeadIn 460ms ease 1.92s forwards;
      }

      .intro-prelude-bloom {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 5;
        width: min(920px, 76vw);
        height: 2px;
        border-radius: 999px;
        opacity: 0;
        background: rgba(245, 251, 255, 0.98);
        box-shadow:
          0 0 12px rgba(255, 255, 255, 0.9),
          0 0 42px rgba(189, 228, 238, 0.55),
          0 0 120px rgba(142, 184, 197, 0.24);
        mix-blend-mode: screen;
        filter: blur(0.4px);
        transform: translate(-50%, -50%) scaleX(0.04) scaleY(1);
        pointer-events: none;
      }

      .intro-gate.is-prelude-leaving .intro-prelude {
        animation: preludeReveal 920ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
      }

      .intro-gate.is-prelude-leaving .intro-neon-sign {
        animation: neonSignExit 720ms ease forwards;
      }

      .intro-gate.is-prelude-leaving .intro-prelude-bloom {
        animation: preludeBloom 860ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
      }

      .intro-gate.is-prelude-complete .intro-prelude {
        visibility: hidden;
        pointer-events: none;
      }

      @keyframes neonGlyphWrite {
        0% { clip-path: inset(0 100% 0 0); opacity: 0; filter: blur(7px); }
        14% { opacity: 0.9; }
        72% { filter: blur(0); }
        100% { clip-path: inset(0 0 0 0); opacity: 1; }
      }

      @keyframes neonLeadIn {
        from { opacity: 0; transform: scaleX(0); }
        to { opacity: 0.76; transform: scaleX(1); }
      }

      @keyframes neonSignExit {
        0% { opacity: 1; transform: scale(1); filter: blur(0); }
        46% { opacity: 1; transform: scale(1.025); }
        100% { opacity: 0; transform: scale(1.12); filter: blur(16px); }
      }

      @keyframes preludeBloom {
        0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.04) scaleY(1); }
        28% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(1); }
        62% { opacity: 0.72; transform: translate(-50%, -50%) scaleX(1.24) scaleY(34); }
        100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.5) scaleY(190); }
      }

      @keyframes preludeReveal {
        0% { clip-path: inset(0 0 0 0); opacity: 1; }
        42% { clip-path: inset(0 0 0 0); opacity: 1; }
        100% { clip-path: inset(49.9% 0 49.9% 0); opacity: 0; }
      }

      @property --hold-progress {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
      }

      .gate-chamber {
        --hold-progress: 0;
        --hold-angle: 0deg;
        --hold-width: 0%;
        --hold-glow: 10px;
        --hold-core-opacity: 0.34;
        position: absolute;
        inset: 0;
        z-index: 30;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background:
          radial-gradient(circle at 50% 42%, rgba(64, 217, 255, 0.12), transparent 28%),
          linear-gradient(180deg, #071017 0%, #040608 58%, #020303 100%);
        transition:
          opacity 620ms ease,
          visibility 0s linear 620ms;
      }

      .intro-gate.is-chamber .gate-chamber {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
      }

      .intro-gate.is-chamber > .intro-video,
      .intro-gate.is-chamber > .intro-video-backdrop,
      .intro-gate.is-chamber > .intro-video-scrim,
      .intro-gate.is-chamber > .intro-canvas,
      .intro-gate.is-chamber > .intro-edge-blur,
      .intro-gate.is-chamber > .intro-frame {
        opacity: 0;
        filter: blur(18px);
        transition: opacity 520ms ease, filter 620ms ease;
      }

      .intro-gate.is-chamber .intro-trigger {
        opacity: 0;
        filter: blur(10px);
        transform: scale(0.72);
        pointer-events: none;
      }

      .gate-city-grid {
        position: absolute;
        left: -20%;
        right: -20%;
        bottom: -28%;
        height: 68%;
        opacity: 0.44;
        background-image:
          linear-gradient(rgba(64, 217, 255, 0.15) 1px, transparent 1px),
          linear-gradient(90deg, rgba(64, 217, 255, 0.13) 1px, transparent 1px);
        background-size: 66px 46px;
        transform: perspective(620px) rotateX(64deg);
        transform-origin: top;
        mask-image: linear-gradient(180deg, transparent, black 22%, transparent 82%);
      }

      .gate-monitor {
        position: absolute;
        z-index: 3;
        width: clamp(145px, 17vw, 270px);
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border: 1px solid rgba(64, 217, 255, 0.2);
        border-radius: 4px;
        background: rgba(3, 6, 8, 0.74);
        box-shadow:
          inset 0 0 38px rgba(64, 217, 255, 0.08),
          0 0 48px rgba(0, 0, 0, 0.52);
        opacity: 0.34;
        transition: opacity 600ms ease, transform 900ms cubic-bezier(0.19, 1, 0.22, 1);
      }

      .gate-monitor::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(64, 217, 255, 0.08) 5px);
        pointer-events: none;
      }

      .gate-monitor video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(0.72) saturate(0.72) contrast(1.24) brightness(0.58) hue-rotate(144deg);
      }

      .gate-monitor > span {
        position: absolute;
        left: 8px;
        bottom: 7px;
        z-index: 2;
        color: rgba(244, 241, 232, 0.58);
        font-size: 8px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .gate-monitor-l1 { left: 2.5%; top: 19%; transform: perspective(700px) rotateY(18deg) rotateZ(-2deg); }
      .gate-monitor-l2 { left: 6%; bottom: 17%; width: clamp(120px, 13vw, 210px); transform: perspective(700px) rotateY(18deg) rotateZ(2deg); }
      .gate-monitor-r1 { right: 2.5%; top: 20%; transform: perspective(700px) rotateY(-18deg) rotateZ(2deg); }
      .gate-monitor-r2 { right: 6%; bottom: 18%; width: clamp(120px, 13vw, 210px); transform: perspective(700px) rotateY(-18deg) rotateZ(-2deg); }

      .gate-portal {
        --gate-seam-x: 52%;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 10;
        width: min(820px, 62vw);
        height: 126vh;
        perspective: 1200px;
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 34px 80px rgba(0, 0, 0, 0.62));
      }

      .gate-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        overflow: hidden;
        border: 1px solid rgba(244, 241, 232, 0.14);
        background:
          linear-gradient(120deg, rgba(244, 241, 232, 0.1), transparent 18% 74%, rgba(64, 217, 255, 0.08)),
          repeating-linear-gradient(90deg, transparent 0 42px, rgba(244, 241, 232, 0.035) 43px 44px),
          linear-gradient(180deg, #11191c, #080d0f 48%, #101416);
        box-shadow:
          inset 0 0 90px rgba(0, 0, 0, 0.58),
          inset 0 0 0 8px rgba(244, 241, 232, 0.018);
        backface-visibility: hidden;
        transition: transform 1.26s cubic-bezier(0.77, 0, 0.175, 1), filter 820ms ease;
      }

      .gate-panel-left {
        left: 0;
        width: calc(var(--gate-seam-x) - 7px);
        clip-path: polygon(0 5%, 92% 0, 100% 7%, 100% 93%, 92% 100%, 0 95%);
        transform-origin: left center;
      }

      .gate-panel-right {
        right: 0;
        width: calc(100% - var(--gate-seam-x) - 7px);
        clip-path: polygon(8% 0, 100% 5%, 100% 95%, 8% 100%, 0 93%, 0 7%);
        transform-origin: right center;
      }

      .gate-panel-lines {
        position: absolute;
        inset: 5% 7%;
        border: 1px solid rgba(64, 217, 255, 0.16);
        background:
          linear-gradient(90deg, transparent 49.7%, rgba(64, 217, 255, 0.18) 50%, transparent 50.3%),
          repeating-linear-gradient(180deg, transparent 0 80px, rgba(255, 178, 89, 0.08) 81px 82px);
        box-shadow: inset 0 0 50px rgba(64, 217, 255, 0.035);
      }

      .gate-pattern {
        position: absolute;
        left: 50%;
        top: 48%;
        width: min(320px, 72%);
        aspect-ratio: 1;
        border: 1px solid rgba(255, 178, 89, 0.3);
        border-radius: 50%;
        color: #ffb259;
        background:
          radial-gradient(circle, transparent 0 14%, rgba(64, 217, 255, 0.17) 14.5% 15.5%, transparent 16% 28%, rgba(255, 178, 89, 0.16) 28.5% 29.5%, transparent 30%),
          repeating-conic-gradient(from 22.5deg, transparent 0 10deg, rgba(255, 178, 89, 0.2) 11deg 15deg, transparent 16deg 45deg);
        box-shadow:
          0 0 34px rgba(255, 178, 89, 0.08),
          inset 0 0 40px rgba(64, 217, 255, 0.04);
        transform: translate(-50%, -50%);
        opacity: 0.7;
      }

      .gate-panel-right .gate-pattern {
        transform: translate(-50%, -50%) scaleX(-1);
      }

      .gate-pattern::before,
      .gate-pattern::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 52%;
        height: 52%;
        border: 1px solid rgba(255, 178, 89, 0.34);
        border-radius: 50% 14% 50% 14%;
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: 0 0 18px rgba(255, 178, 89, 0.08);
      }

      .gate-pattern::after {
        transform: translate(-50%, -50%) rotate(90deg) scale(0.66);
        border-color: rgba(64, 217, 255, 0.3);
      }

      .gate-pattern span {
        position: absolute;
        width: 38%;
        height: 19%;
        border-top: 2px solid currentColor;
        border-radius: 50%;
        opacity: 0.7;
      }

      .gate-pattern span:nth-child(1) { left: 8%; top: 26%; transform: rotate(-28deg); }
      .gate-pattern span:nth-child(2) { right: 8%; top: 26%; transform: rotate(28deg); }
      .gate-pattern span:nth-child(3) { left: 31%; bottom: 12%; transform: rotate(180deg); }

      .gate-panel-mark {
        position: absolute;
        left: 50%;
        bottom: 12%;
        color: rgba(244, 241, 232, 0.1);
        font-size: clamp(78px, 10vw, 160px);
        font-style: normal;
        font-weight: 920;
        transform: translateX(-50%);
      }

      .gate-seam {
        position: absolute;
        left: var(--gate-seam-x);
        top: 7%;
        bottom: 7%;
        z-index: 4;
        width: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        background: linear-gradient(180deg, transparent, rgba(64, 217, 255, 0.92) 15% 85%, transparent);
        box-shadow:
          0 0 12px rgba(64, 217, 255, 0.92),
          0 0 42px rgba(64, 217, 255, 0.54),
          0 0 100px rgba(64, 217, 255, 0.26);
        transform: translateX(-50%);
      }

      .gate-seam span {
        width: 8px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #b8ff5d;
        box-shadow: 0 0 12px #b8ff5d;
        animation: gateIndicator 1.5s ease-in-out infinite;
        animation-delay: calc(var(--index, 0) * 100ms);
      }

      .gate-seam span:nth-child(2) { animation-delay: 120ms; }
      .gate-seam span:nth-child(3) { animation-delay: 240ms; }
      .gate-seam span:nth-child(4) { animation-delay: 360ms; }
      .gate-seam span:nth-child(5) { animation-delay: 480ms; }

      .gate-light {
        position: absolute;
        left: var(--gate-seam-x);
        top: 0;
        bottom: 0;
        z-index: 0;
        width: 2px;
        opacity: 0.4;
        background: white;
        box-shadow: 0 0 70px 22px rgba(64, 217, 255, 0.5);
        transform: translateX(-50%);
        transition: width 1.1s cubic-bezier(0.19, 1, 0.22, 1), opacity 500ms ease;
      }

      .gate-hold-wrap {
        position: absolute;
        left: 50%;
        bottom: clamp(24px, 5vh, 52px);
        z-index: 50;
        width: min(430px, calc(100% - 36px));
        display: grid;
        justify-items: center;
        gap: 10px;
        transform: translateX(-50%);
        transition: opacity 420ms ease, transform 620ms ease;
      }

      .gate-hold {
        width: min(310px, 82vw);
        min-height: 78px;
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 13px;
        align-items: center;
        padding: 10px 18px 10px 10px;
        border: 1px solid rgba(64, 217, 255, 0.26);
        border-radius: 999px;
        color: var(--paper);
        background: rgba(3, 7, 9, 0.84);
        box-shadow:
          0 22px 64px rgba(0, 0, 0, 0.58),
          inset 0 0 30px rgba(64, 217, 255, 0.055);
        backdrop-filter: blur(18px);
        cursor: pointer;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
      }

      .gate-hold:focus-visible {
        outline: 1px solid var(--accent-3);
        outline-offset: 5px;
      }

      .gate-hold-ring {
        position: relative;
        width: 56px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: conic-gradient(var(--accent-3) var(--hold-angle), rgba(244, 241, 232, 0.1) 0);
        box-shadow: 0 0 var(--hold-glow) color-mix(in srgb, var(--accent-3) 46%, transparent);
        transform: rotate(-90deg);
      }

      .gate-hold-ring::before {
        content: "";
        width: 46px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #071013;
        box-shadow: inset 0 0 20px rgba(64, 217, 255, 0.16);
      }

      .gate-hold-core {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--accent-3);
        opacity: var(--hold-core-opacity);
        box-shadow: 0 0 18px color-mix(in srgb, var(--accent-3) 54%, transparent);
        transform: translate(-50%, -50%);
      }

      .gate-hold-copy {
        display: grid;
        gap: 4px;
        justify-items: start;
        text-align: left;
      }

      .gate-hold-copy small {
        color: rgba(244, 241, 232, 0.42);
        font-size: 8px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .gate-hold-copy b {
        font-size: 17px;
        line-height: 1;
      }

      .gate-hold-track {
        width: 100%;
        height: 2px;
        overflow: hidden;
        background: rgba(244, 241, 232, 0.1);
      }

      .gate-hold-track span {
        display: block;
        width: var(--hold-width);
        height: 100%;
        background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2));
        box-shadow: 0 0 16px var(--accent-3);
      }

      .gate-hold-wrap p {
        margin: 0;
        color: rgba(244, 241, 232, 0.42);
        font-size: 9px;
      }

      .gate-chamber.is-holding .gate-hold-core {
        animation: gateHoldPulse 680ms ease-in-out infinite;
      }

      .gate-system-status {
        position: absolute;
        left: 26px;
        bottom: 24px;
        z-index: 4;
        display: flex;
        gap: 18px;
        color: rgba(244, 241, 232, 0.3);
        font-size: 8px;
        font-weight: 820;
      }

      .gate-system-status span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .gate-system-status i {
        width: 5px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--accent-2);
        box-shadow: 0 0 8px var(--accent-2);
      }

      .intro-gate.is-opening .gate-panel-left {
        transform: translateX(-80%) rotateY(-13deg);
        filter: brightness(1.2);
      }

      .intro-gate.is-opening .gate-panel-right {
        transform: translateX(80%) rotateY(13deg);
        filter: brightness(1.2);
      }

      .intro-gate.is-opening .gate-seam {
        opacity: 0;
        transition: opacity 260ms ease;
      }

      .intro-gate.is-opening .gate-light {
        width: 72vw;
        opacity: 1;
      }

      .intro-gate.is-opening .gate-hold-wrap {
        opacity: 0;
        transform: translateX(-50%) translateY(26px);
        pointer-events: none;
      }

      .intro-gate.is-opening .gate-monitor {
        opacity: 0;
      }

      .intro-gate.is-opening .gate-monitor-l1,
      .intro-gate.is-opening .gate-monitor-l2 { transform: translateX(-80px) scale(0.9); }
      .intro-gate.is-opening .gate-monitor-r1,
      .intro-gate.is-opening .gate-monitor-r2 { transform: translateX(80px) scale(0.9); }

      @keyframes gateIndicator {
        0%, 100% { opacity: 0.24; transform: scale(0.72); }
        50% { opacity: 1; transform: scale(1); }
      }

      @keyframes gateHoldPulse {
        0%, 100% { transform: translate(-50%, -50%) scale(0.78); opacity: 0.7; }
        50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
      }

      @media (max-width: 680px) {
        .intro-neon-sign {
          width: 170vw;
        }

        .intro-neon-lead {
          display: none;
        }

        .gate-portal {
          width: 108vw;
          height: 118vh;
        }

        .gate-monitor-l2,
        .gate-monitor-r2 {
          display: none;
        }

        .gate-monitor-l1,
        .gate-monitor-r1 {
          top: 16%;
          width: 32vw;
          opacity: 0.2;
        }

        .gate-monitor-l1 { left: -7%; }
        .gate-monitor-r1 { right: -7%; }

        .gate-pattern {
          width: 78%;
        }

        .gate-hold-wrap {
          bottom: 24px;
        }

        .gate-system-status {
          display: none;
        }
      }

      /* Refined opening: handwritten prelude and minimal access portal. */
      .intro-prelude {
        background:
          radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.025), transparent 46%),
          #020303;
      }

      .intro-prelude-grid {
        opacity: 0.035;
        background-size: 96px 96px;
      }

      .intro-handwritten-sign {
        position: relative;
        z-index: 3;
        width: max-content;
        max-width: 94vw;
        display: flex;
        align-items: baseline;
        justify-content: center;
        color: var(--paper);
        font-family: "Arlo Hand", "STKaiti", "KaiTi", cursive;
        font-size: clamp(62px, 9.2vw, 142px);
        font-weight: 400;
        line-height: 0.9;
        letter-spacing: -0.08em;
        white-space: nowrap;
        transform: rotate(-1.8deg);
        transform-origin: center;
        filter: drop-shadow(0 14px 42px rgba(0, 0, 0, 0.52));
      }

      .intro-handwritten-sign span {
        position: relative;
        display: inline-block;
        color: var(--ink);
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        filter:
          saturate(0.86)
          drop-shadow(0 0 3px color-mix(in srgb, var(--ink) 72%, transparent))
          drop-shadow(0 0 14px color-mix(in srgb, var(--ink) 24%, transparent));
        transform: translate3d(-7px, 9px, 0) scale(0.97);
        will-change: clip-path, opacity, transform;
      }

      .intro-handwritten-sign .is-latin {
        font-family: "Snell Roundhand", "Brush Script MT", cursive;
        font-size: 1.16em;
        margin-left: -0.12em;
      }

      .intro-handwritten-sign .is-latin-start {
        margin-left: -0.02em;
      }

      .intro-gate.is-prelude-running .intro-handwritten-sign span {
        animation: handwrittenGlyphIn 690ms cubic-bezier(0.16, 1, 0.3, 1) var(--write-delay) forwards;
      }

      .intro-handwritten-cursor {
        position: absolute;
        left: 0;
        top: 52%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(248, 252, 255, 0.92);
        box-shadow:
          0 0 9px rgba(255, 255, 255, 0.92),
          0 0 24px rgba(117, 210, 224, 0.46);
        opacity: 0;
        transform: translate(-50%, -50%);
      }

      .intro-gate.is-prelude-running .intro-handwritten-cursor {
        animation: handwrittenCursor 2.02s cubic-bezier(0.42, 0, 0.22, 1) 70ms forwards;
      }

      .intro-neon-lead,
      .intro-prelude-bloom {
        display: none;
      }

      .intro-gate.is-prelude-leaving .intro-handwritten-sign {
        animation: handwrittenExit 760ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
      }

      @keyframes handwrittenGlyphIn {
        0% {
          opacity: 0;
          clip-path: inset(0 100% 0 0);
          transform: translate3d(-7px, 9px, 0) scale(0.97);
        }
        22% { opacity: 1; }
        100% {
          opacity: 1;
          clip-path: inset(0 0 0 0);
          transform: translate3d(0, 0, 0) scale(1);
        }
      }

      @keyframes handwrittenCursor {
        0% { left: 0; opacity: 0; }
        4% { opacity: 1; }
        94% { left: 100%; opacity: 1; }
        100% { left: 101%; opacity: 0; }
      }

      @keyframes handwrittenExit {
        0% { opacity: 1; transform: rotate(-1.8deg) scale(1); filter: blur(0); }
        48% { opacity: 0.96; transform: rotate(-1.8deg) scale(1.015); filter: blur(0); }
        100% { opacity: 0; transform: rotate(-1.8deg) scaleX(1.1) scaleY(0.02); filter: blur(10px); }
      }

      .intro-handwritten-sign {
        display: none !important;
      }

      .intro-neon-sign,
      .intro-neon-lead,
      .intro-prelude-bloom,
      .intro-handwritten-sign,
      .intro-handwritten-cursor {
        display: none !important;
        animation: none !important;
      }

      .intro-prelude {
        background:
          radial-gradient(circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), rgba(215, 239, 244, 0.055), transparent 24vw),
          radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.022), transparent 46%),
          #050606;
      }

      .intro-brand-intro {
        position: relative;
        z-index: 3;
        width: min(920px, calc(100% - 48px));
        display: grid;
        justify-items: center;
        gap: 17px;
        padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 64px);
        color: var(--paper);
        text-align: center;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * 10px), calc((var(--my, 0.5) - 0.5) * 8px));
        transition: transform 220ms ease;
      }

      .intro-brand-code {
        color: rgba(244, 241, 232, 0.42);
        font-size: 9px;
        font-weight: 780;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        opacity: 0;
      }

      .intro-brand-intro h1 {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 0.2em;
        margin: 0;
        white-space: nowrap;
        font-size: clamp(30px, 4.3vw, 62px);
        line-height: 1;
        font-weight: 620;
        letter-spacing: 0;
      }

      .intro-brand-intro h1 span,
      .intro-brand-intro h1 strong {
        display: inline-block;
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(14px);
        will-change: clip-path, opacity, transform;
      }

      .intro-brand-intro h1 strong {
        position: relative;
        color: var(--paper);
        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
        font-weight: 760;
      }

      .intro-brand-intro h1 strong::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -10px;
        height: 2px;
        background: rgba(244, 241, 232, 0.62);
        transform: scaleX(0);
        transform-origin: left;
      }

      .intro-brand-line {
        position: relative;
        width: min(620px, 76vw);
        height: 1px;
        overflow: visible;
        background: linear-gradient(90deg, transparent, rgba(244, 241, 232, 0.18) 18% 82%, transparent);
        opacity: 0;
      }

      .intro-brand-line i {
        position: absolute;
        left: calc(var(--mx, 0.5) * 100%);
        top: 50%;
        width: 74px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(244, 241, 232, 0.72), transparent);
        transform: translate(-50%, -50%);
        transition: left 180ms ease;
      }

      .intro-brand-meta {
        width: min(620px, 76vw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        color: rgba(244, 241, 232, 0.3);
        font-size: 8px;
        font-weight: 760;
        letter-spacing: 0;
        text-transform: uppercase;
        opacity: 0;
      }

      .intro-brand-corner {
        position: absolute;
        width: 42px;
        height: 42px;
        opacity: 0;
      }

      .intro-brand-corner-a {
        left: 0;
        top: 0;
        border-left: 1px solid rgba(244, 241, 232, 0.16);
        border-top: 1px solid rgba(244, 241, 232, 0.16);
      }

      .intro-brand-corner-b {
        right: 0;
        bottom: 0;
        border-right: 1px solid rgba(244, 241, 232, 0.16);
        border-bottom: 1px solid rgba(244, 241, 232, 0.16);
      }

      .intro-gate.is-prelude-running .intro-brand-code {
        animation: introBrandFade 520ms ease 80ms forwards;
      }

      .intro-gate.is-prelude-running .intro-brand-intro h1 span,
      .intro-gate.is-prelude-running .intro-brand-intro h1 strong {
        animation: introBrandSegment 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--brand-delay) forwards;
      }

      .intro-gate.is-prelude-running .intro-brand-intro h1 strong::after {
        animation: introBrandUnderline 560ms cubic-bezier(0.16, 1, 0.3, 1) 650ms forwards;
      }

      .intro-gate.is-prelude-running .intro-brand-line,
      .intro-gate.is-prelude-running .intro-brand-meta,
      .intro-gate.is-prelude-running .intro-brand-corner {
        animation: introBrandFade 620ms ease 820ms forwards;
      }

      .intro-gate.is-prelude-leaving .intro-brand-intro {
        animation: introBrandExit 720ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
      }

      @keyframes introBrandFade {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes introBrandSegment {
        from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(14px); }
        to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
      }

      @keyframes introBrandUnderline {
        to { transform: scaleX(1); }
      }

      @keyframes introBrandExit {
        0% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
        100% { opacity: 0; transform: translate(0, -12px) scale(0.985); filter: blur(7px); }
      }

      .gate-chamber {
        background:
          radial-gradient(ellipse at 50% 50%, rgba(160, 211, 222, 0.07), transparent 31%),
          radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.045), transparent 48%),
          #030506;
      }

      .gate-chamber::before {
        content: "";
        position: absolute;
        inset: -20%;
        z-index: 1;
        opacity: 0.22;
        background:
          repeating-radial-gradient(circle at 50% 50%, transparent 0 72px, rgba(196, 229, 235, 0.055) 73px 74px),
          conic-gradient(from 90deg at 50% 50%, transparent, rgba(188, 225, 232, 0.055), transparent 28%, transparent 72%, rgba(188, 225, 232, 0.045), transparent);
        animation: gateAmbientDrift 18s linear infinite;
        pointer-events: none;
      }

      .gate-chamber::after {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: -20%;
        z-index: 2;
        height: 1px;
        opacity: 0.32;
        background: linear-gradient(90deg, transparent, rgba(222, 244, 248, 0.88), transparent);
        box-shadow: 0 0 30px rgba(170, 225, 236, 0.32);
        animation: gateScan 5.8s ease-in-out infinite;
        pointer-events: none;
      }

      .gate-city-grid {
        inset: 0;
        height: auto;
        opacity: 0.13;
        background:
          radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.68) 0 1px, transparent 1.5px),
          radial-gradient(circle at 78% 64%, rgba(194, 234, 242, 0.58) 0 1px, transparent 1.5px),
          radial-gradient(circle at 38% 82%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.5px);
        background-size: 180px 150px, 240px 210px, 210px 170px;
        transform: none;
        mask-image: radial-gradient(ellipse at center, black, transparent 78%);
        animation: gateParticles 16s linear infinite;
      }

      .gate-monitor {
        display: none !important;
      }

      .gate-portal {
        --gate-seam-x: 50%;
        width: min(1180px, 82vw);
        height: 138vh;
        perspective: 1600px;
        filter:
          drop-shadow(0 42px 96px rgba(0, 0, 0, 0.72))
          drop-shadow(0 0 74px rgba(159, 211, 221, 0.06));
      }

      .gate-panel {
        border: 0;
        clip-path: none;
        background:
          linear-gradient(105deg, rgba(255, 255, 255, 0.07), transparent 12% 83%, rgba(174, 220, 228, 0.045)),
          linear-gradient(180deg, #111718 0%, #080b0c 46%, #0c1011 100%);
        box-shadow:
          inset 0 0 0 1px rgba(230, 245, 248, 0.075),
          inset 0 0 120px rgba(0, 0, 0, 0.66),
          inset 0 0 0 12px rgba(255, 255, 255, 0.012);
        transition:
          transform 1.34s cubic-bezier(0.77, 0, 0.175, 1),
          filter 780ms ease,
          box-shadow 560ms ease;
      }

      .gate-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0 66%, rgba(255, 255, 255, 0.035) 78%, transparent 92%);
        transform: translateX(-55%);
        animation: gateSurfaceLight 7s ease-in-out infinite;
      }

      .gate-panel-left {
        width: calc(50% - 4px);
        transform-origin: left center;
      }

      .gate-panel-right {
        width: calc(50% - 4px);
        transform-origin: right center;
      }

      .gate-panel-lines {
        inset: 4.5% 4%;
        border: 1px solid rgba(211, 238, 243, 0.075);
        background:
          linear-gradient(180deg, transparent 49.92%, rgba(211, 238, 243, 0.055) 50%, transparent 50.08%),
          linear-gradient(90deg, transparent 49.92%, rgba(211, 238, 243, 0.04) 50%, transparent 50.08%);
        box-shadow: none;
      }

      .gate-pattern {
        top: 50%;
        width: min(290px, 52%);
        border-color: rgba(208, 229, 232, 0.1);
        color: rgba(208, 229, 232, 0.38);
        background:
          radial-gradient(circle, transparent 0 17%, rgba(211, 238, 243, 0.075) 17.5% 18%, transparent 18.5% 32%, rgba(211, 238, 243, 0.05) 32.5% 33%, transparent 33.5%),
          repeating-conic-gradient(from 22.5deg, transparent 0 14deg, rgba(211, 238, 243, 0.055) 15deg 16deg, transparent 17deg 45deg);
        box-shadow: none;
        opacity: 0.32;
      }

      .gate-pattern::before,
      .gate-pattern::after {
        border-color: rgba(214, 236, 240, 0.13);
        box-shadow: none;
      }

      .gate-pattern::after {
        border-color: rgba(214, 236, 240, 0.1);
      }

      .gate-panel-mark {
        display: none;
      }

      .gate-seam {
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, transparent, rgba(221, 247, 250, 0.84) 22% 78%, transparent);
        box-shadow:
          0 0 10px rgba(213, 245, 249, 0.72),
          0 0 44px rgba(153, 214, 225, 0.25),
          0 0 110px rgba(153, 214, 225, 0.11);
      }

      .gate-seam span {
        display: none;
      }

      .gate-light {
        width: 1px;
        opacity: 0.34;
        background: #f0fcff;
        box-shadow: 0 0 68px 18px rgba(182, 230, 238, 0.22);
      }

      .intro-gate.is-chamber:not(.is-opening) .gate-panel-left {
        animation: gateAssembleLeft 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      .intro-gate.is-chamber:not(.is-opening) .gate-panel-right {
        animation: gateAssembleRight 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      .gate-hold-wrap {
        left: 50%;
        top: 50%;
        bottom: auto;
        width: min(560px, calc(100% - 32px));
        gap: 18px;
        transform: translate(-50%, -50%);
      }

      .gate-hold {
        position: relative;
        width: clamp(164px, 15vw, 204px);
        min-height: 0;
        aspect-ratio: 1;
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(216, 241, 245, 0.18);
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 42%, rgba(214, 242, 247, 0.09), transparent 34%),
          rgba(4, 8, 9, 0.88);
        box-shadow:
          0 32px 80px rgba(0, 0, 0, 0.66),
          0 0 90px rgba(152, 217, 228, 0.08),
          inset 0 0 38px rgba(193, 232, 239, 0.055);
        backdrop-filter: blur(22px);
        transition: transform 220ms ease, border-color 260ms ease, box-shadow 260ms ease;
      }

      .gate-hold::before,
      .gate-hold::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
      }

      .gate-hold::before {
        inset: -15px;
        border: 1px solid rgba(211, 239, 244, 0.12);
        border-left-color: rgba(220, 248, 252, 0.64);
        border-right-color: rgba(220, 248, 252, 0.34);
        animation: gateRingSpin 8s linear infinite;
      }

      .gate-hold::after {
        inset: -31px;
        border: 1px dashed rgba(211, 239, 244, 0.1);
        animation: gateRingSpin 13s linear infinite reverse;
      }

      .gate-hold-ring {
        position: absolute;
        inset: 10px;
        width: auto;
        background: conic-gradient(rgba(222, 248, 252, 0.92) var(--hold-angle), rgba(222, 248, 252, 0.07) 0);
        box-shadow: 0 0 var(--hold-glow) rgba(176, 228, 237, 0.28);
      }

      .gate-hold-ring::before {
        width: calc(100% - 9px);
        background:
          radial-gradient(circle, rgba(207, 241, 247, 0.05), transparent 54%),
          #060a0b;
        box-shadow:
          inset 0 0 30px rgba(171, 226, 236, 0.09),
          0 0 0 1px rgba(219, 243, 247, 0.06);
      }

      .gate-hold-core {
        width: 64px;
        background: radial-gradient(circle, #effcff 0 4%, rgba(201, 239, 246, 0.72) 8%, rgba(108, 178, 191, 0.12) 52%, transparent 70%);
        box-shadow: 0 0 34px rgba(176, 230, 239, 0.38);
      }

      .gate-hold-copy {
        position: relative;
        z-index: 3;
        gap: 7px;
        justify-items: center;
        text-align: center;
        pointer-events: none;
      }

      .gate-hold-copy small {
        color: rgba(226, 244, 247, 0.42);
        font-size: 8px;
        letter-spacing: 0.08em;
      }

      .gate-hold-copy b {
        font-size: clamp(17px, 1.5vw, 21px);
        font-weight: 720;
      }

      .gate-hold-track {
        width: min(420px, 78vw);
        height: 3px;
        border-radius: 999px;
        background: rgba(222, 244, 248, 0.08);
      }

      .gate-hold-track span {
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(133, 196, 207, 0.6), #e8fbff);
        box-shadow: 0 0 18px rgba(178, 232, 241, 0.38);
      }

      .gate-hold-wrap p {
        display: grid;
        gap: 5px;
        justify-items: center;
        margin: 3px 0 0;
        color: rgba(226, 243, 246, 0.68);
        text-align: center;
      }

      .gate-hold-wrap p strong {
        font-size: clamp(16px, 1.7vw, 22px);
        font-weight: 620;
      }

      .gate-hold-wrap p span {
        color: rgba(218, 239, 243, 0.42);
        font-size: 12px;
      }

      .gate-system-status {
        display: none;
      }

      .gate-chamber.is-holding .gate-hold {
        border-color: rgba(222, 248, 252, 0.46);
        box-shadow:
          0 34px 84px rgba(0, 0, 0, 0.7),
          0 0 112px rgba(164, 224, 234, 0.18),
          inset 0 0 44px rgba(193, 232, 239, 0.09);
        transform: scale(0.985);
      }

      .gate-chamber.is-holding .gate-panel-left {
        animation: none !important;
        transform: translateX(-5px);
      }

      .gate-chamber.is-holding .gate-panel-right {
        animation: none !important;
        transform: translateX(5px);
      }

      .intro-gate.is-opening .gate-panel-left {
        transform: translateX(-70vw) !important;
        filter: none;
      }

      .intro-gate.is-opening .gate-panel-right {
        transform: translateX(70vw) !important;
        filter: none;
      }

      .intro-gate.is-opening .gate-light {
        width: 88vw;
      }

      .intro-gate.is-opening .gate-hold-wrap {
        transform: translate(-50%, -50%) scale(0.82);
      }

      @keyframes gateAmbientDrift {
        to { transform: rotate(360deg) scale(1.04); }
      }

      @keyframes gateScan {
        0%, 100% { top: -10%; opacity: 0; }
        16% { opacity: 0.32; }
        84% { opacity: 0.24; }
        100% { top: 112%; opacity: 0; }
      }

      @keyframes gateParticles {
        from { background-position: 0 0, 0 0, 0 0; }
        to { background-position: 30px -150px, -36px -210px, 20px -170px; }
      }

      @keyframes gateSurfaceLight {
        0%, 100% { transform: translateX(-65%); opacity: 0.28; }
        50% { transform: translateX(60%); opacity: 0.62; }
      }

      @keyframes gateAssembleLeft {
        from { opacity: 0; transform: translateX(-9%) scale(1.025); filter: blur(12px); }
        to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
      }

      @keyframes gateAssembleRight {
        from { opacity: 0; transform: translateX(9%) scale(1.025); filter: blur(12px); }
        to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
      }

      @keyframes gateRingSpin {
        to { transform: rotate(360deg); }
      }

      .gate-portal {
        width: min(1380px, 96vw);
      }

      .gate-pattern,
      .gate-panel-lines {
        display: none !important;
      }

      .gate-panel {
        background:
          linear-gradient(90deg, rgba(212, 236, 240, 0.015), rgba(212, 236, 240, 0.055) 82%, rgba(235, 249, 251, 0.09)),
          rgba(7, 11, 12, 0.72);
        backdrop-filter: blur(26px) saturate(0.74);
        -webkit-backdrop-filter: blur(26px) saturate(0.74);
        box-shadow:
          inset 0 0 0 1px rgba(226, 245, 248, 0.045),
          inset 0 0 120px rgba(0, 0, 0, 0.42);
      }

      .gate-panel-left {
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 18%, black 54%, black 100%);
      }

      .gate-panel-right {
        background:
          linear-gradient(270deg, rgba(212, 236, 240, 0.015), rgba(212, 236, 240, 0.055) 82%, rgba(235, 249, 251, 0.09)),
          rgba(7, 11, 12, 0.72);
        mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.48) 18%, black 54%, black 100%);
      }

      .gate-seam {
        width: 2px;
        opacity: 0.7;
        box-shadow:
          0 0 10px rgba(213, 245, 249, 0.52),
          0 0 38px rgba(153, 214, 225, 0.18);
      }

      .gate-hold {
        width: clamp(156px, 13vw, 184px);
        border-color: rgba(216, 241, 245, 0.14);
        background:
          radial-gradient(circle at 50% 45%, rgba(214, 242, 247, 0.07), transparent 38%),
          rgba(5, 9, 10, 0.86);
        box-shadow:
          0 28px 76px rgba(0, 0, 0, 0.62),
          0 0 72px rgba(152, 217, 228, 0.055),
          inset 0 0 32px rgba(193, 232, 239, 0.04);
      }

      .gate-hold::before {
        inset: -17px;
        border-color: rgba(211, 239, 244, 0.09);
        border-top-color: rgba(224, 249, 252, 0.52);
        border-left-color: rgba(224, 249, 252, 0.14);
        animation-duration: 11s;
      }

      .gate-hold::after {
        display: none;
      }

      .gate-hold-core {
        width: 48px;
        box-shadow: 0 0 28px rgba(176, 230, 239, 0.26);
      }

      /* The access control is intentionally quiet: one action, one progress cue. */
      .gate-hold-wrap {
        width: min(340px, calc(100% - 32px));
        gap: 0;
      }

      .gate-hold {
        width: min(306px, 82vw);
        height: 116px;
        min-height: 116px;
        aspect-ratio: auto;
        grid-template-columns: 1fr;
        padding: 0 28px 12px;
        overflow: hidden;
        border: 1px solid rgba(244, 241, 232, 0.16);
        border-radius: 6px;
        clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
        background:
          linear-gradient(105deg, rgba(255, 255, 255, 0.045), transparent 38%),
          rgba(6, 9, 10, 0.9);
        box-shadow:
          0 30px 84px rgba(0, 0, 0, 0.66),
          0 0 0 1px rgba(255, 255, 255, 0.025) inset,
          0 18px 52px rgba(0, 0, 0, 0.22) inset;
        backdrop-filter: blur(24px) saturate(0.7);
        transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
      }

      .gate-hold::before {
        inset: 0;
        border: 0;
        border-radius: 0;
        background: linear-gradient(90deg, rgba(244, 241, 232, 0.075) 0 var(--hold-width), transparent var(--hold-width));
        animation: none;
      }

      .gate-hold::after {
        display: block;
        inset: 0 auto 0 var(--hold-width);
        width: 1px;
        border: 0;
        border-radius: 0;
        opacity: 0;
        background: linear-gradient(180deg, transparent 12%, rgba(248, 246, 239, 0.7) 50%, transparent 88%);
        box-shadow: 0 0 18px rgba(248, 246, 239, 0.22);
        transition: left 40ms linear, opacity 180ms ease;
      }

      .gate-hold-ring {
        inset: auto 22px 17px;
        width: auto;
        height: 2px;
        aspect-ratio: auto;
        display: block;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(244, 241, 232, 0.1);
        box-shadow: none;
        transform: none;
      }

      .gate-hold-ring::before {
        display: block;
        width: var(--hold-width);
        height: 100%;
        aspect-ratio: auto;
        border-radius: inherit;
        background: #f5f2e9;
        box-shadow: 0 0 12px rgba(245, 242, 233, 0.34);
      }

      .gate-hold-core {
        display: none;
      }

      .gate-hold-copy {
        position: relative;
        z-index: 2;
        gap: 10px;
        justify-items: center;
        text-align: center;
      }

      .gate-hold-copy small {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(244, 241, 232, 0.38);
        font-size: 8px;
        font-weight: 720;
        letter-spacing: 0.16em;
      }

      .gate-hold-copy small::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(244, 241, 232, 0.7);
        box-shadow: 0 0 9px rgba(244, 241, 232, 0.28);
      }

      .gate-hold-copy b {
        font-size: clamp(22px, 2vw, 27px);
        font-weight: 600;
        letter-spacing: 0;
      }

      .gate-hold-track,
      .gate-hold-wrap p {
        display: none !important;
      }

      .gate-hold:hover {
        border-color: rgba(244, 241, 232, 0.28);
        background:
          linear-gradient(105deg, rgba(255, 255, 255, 0.06), transparent 38%),
          rgba(7, 10, 11, 0.94);
        transform: translateY(-2px);
      }

      .gate-chamber.is-holding .gate-hold {
        border-color: rgba(244, 241, 232, 0.34);
        background:
          linear-gradient(105deg, rgba(255, 255, 255, 0.055), transparent 38%),
          rgba(6, 9, 10, 0.94);
        box-shadow:
          0 34px 92px rgba(0, 0, 0, 0.7),
          0 0 56px rgba(244, 241, 232, 0.045),
          0 0 0 1px rgba(255, 255, 255, 0.035) inset;
        transform: scale(0.99);
      }

      .gate-chamber.is-holding .gate-hold::after {
        opacity: 1;
      }

      .gate-bio-ui {
        display: none;
      }

      /* Selected biometric interface. */
      .gate-chamber[data-gate-version="biometric"] {
        background:
          radial-gradient(ellipse at 50% 50%, rgba(145, 216, 211, 0.075), transparent 28%),
          radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.035), transparent 46%),
          #030708;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-seam {
        width: 1px;
        opacity: 0.62;
        background: linear-gradient(180deg, transparent, rgba(181, 226, 223, 0.76) 26% 74%, transparent);
        box-shadow: 0 0 22px rgba(145, 216, 211, 0.2);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-wrap {
        width: min(620px, calc(100% - 24px));
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-wrap::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: -1;
        width: min(620px, 92vw);
        height: 1px;
        opacity: 0.38;
        background: linear-gradient(90deg, transparent, rgba(145, 216, 211, 0.2) 28%, rgba(215, 239, 237, 0.56) 50%, rgba(145, 216, 211, 0.2) 72%, transparent);
        transform: translate(-50%, -50%) scaleX(calc(1 - var(--hold-progress) * 0.28));
        transition: transform 80ms linear;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-wrap::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: -1;
        width: 218px;
        aspect-ratio: 1;
        border: 1px solid rgba(145, 216, 211, 0.34);
        border-radius: 50%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.78);
        pointer-events: none;
      }

      .gate-chamber[data-gate-version="biometric"].is-impact .gate-hold-wrap::after {
        animation: gateBioImpact 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold {
        width: 202px;
        height: 202px;
        min-height: 202px;
        aspect-ratio: 1;
        overflow: visible;
        padding: 0;
        border: 1px solid rgba(190, 229, 226, 0.15);
        border-radius: 50%;
        clip-path: none;
        background:
          radial-gradient(circle at 50% 38%, rgba(214, 240, 237, 0.08), transparent 30%),
          radial-gradient(circle, rgba(11, 20, 21, 0.96), rgba(4, 8, 9, 0.98) 72%);
        box-shadow:
          0 34px 92px rgba(0, 0, 0, 0.68),
          0 0 76px rgba(145, 216, 211, 0.055),
          inset 0 0 42px rgba(145, 216, 211, 0.045);
        animation: none;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold::before {
        inset: 20px;
        border: 1px solid rgba(190, 229, 226, 0.085);
        border-radius: 50%;
        background:
          radial-gradient(circle at 46% 42%, rgba(145, 216, 211, calc(0.025 + var(--hold-progress) * 0.07)), transparent 34%),
          rgba(1, 5, 6, 0.28);
        animation: none;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold::after {
        display: block;
        inset: 31px;
        width: auto;
        border: 0;
        border-radius: 50%;
        opacity: calc(0.12 + var(--hold-progress) * 0.34);
        background:
          linear-gradient(118deg, transparent 20%, rgba(205, 236, 233, 0.08) 46%, transparent 67%),
          radial-gradient(ellipse at 42% 38%, rgba(145, 216, 211, 0.1), transparent 58%);
        box-shadow: none;
        transform: scale(calc(0.96 + var(--hold-progress) * 0.04)) rotate(calc(var(--hold-progress) * 16deg));
        transition: transform 80ms linear, opacity 120ms ease;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-ring {
        inset: 8px;
        width: auto;
        height: auto;
        aspect-ratio: 1;
        display: block;
        overflow: visible;
        border-radius: 50%;
        background: conic-gradient(
          from -90deg,
          rgba(145, 216, 211, 0.18) 0,
          rgba(187, 232, 228, 0.96) calc(var(--hold-progress) * 1turn),
          rgba(145, 216, 211, 0.065) calc(var(--hold-progress) * 1turn),
          rgba(145, 216, 211, 0.065) 1turn
        );
        box-shadow: 0 0 calc(8px + var(--hold-progress) * 26px) rgba(145, 216, 211, calc(0.06 + var(--hold-progress) * 0.18));
        transform: none;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-ring::before {
        position: absolute;
        inset: 5px;
        display: block;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 42%, rgba(145, 216, 211, 0.04), transparent 40%), #050a0b;
        box-shadow: inset 0 0 34px rgba(145, 216, 211, 0.045);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-ring::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        margin: -3px;
        border-radius: 50%;
        opacity: var(--hold-progress);
        background: #d9f1ef;
        box-shadow: 0 0 12px rgba(145, 216, 211, 0.92), 0 0 28px rgba(145, 216, 211, 0.46);
        transform: rotate(calc(-90deg + var(--hold-progress) * 360deg)) translateY(-93px);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-ui {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        border-radius: 50%;
        pointer-events: none;
      }

      .gate-bio-orbit,
      .gate-bio-ticks,
      .gate-bio-scan {
        position: absolute;
        border-radius: 50%;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-orbit {
        inset: -20px;
        border: 1px solid rgba(145, 216, 211, 0.1);
        border-right-color: rgba(145, 216, 211, 0.4);
        animation: gateBioOrbit 12s linear infinite;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-orbit::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -3px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #91d8d3;
        box-shadow: 0 0 12px rgba(145, 216, 211, 0.58);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-ticks {
        inset: -9px;
        opacity: 0;
        background: repeating-conic-gradient(from -90deg, rgba(184, 226, 223, 0.62) 0 1deg, transparent 1deg 12deg);
        -webkit-mask: radial-gradient(circle, transparent 0 93%, #000 93.5% 100%);
        mask: radial-gradient(circle, transparent 0 93%, #000 93.5% 100%);
        transform: scale(0.96);
        transition: opacity 260ms ease, transform 360ms ease;
      }

      .gate-chamber[data-gate-version="biometric"].is-late-hold .gate-bio-ticks {
        opacity: 0.48;
        transform: scale(1);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-scan {
        inset: 31px;
        overflow: hidden;
        border: 1px solid rgba(145, 216, 211, 0.055);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-scan::before {
        content: "";
        position: absolute;
        left: 9%;
        right: 9%;
        top: 18%;
        height: 1px;
        opacity: 0;
        background: linear-gradient(90deg, transparent, rgba(187, 232, 228, 0.72), transparent);
        box-shadow: 0 0 12px rgba(145, 216, 211, 0.28);
      }

      .gate-chamber[data-gate-version="biometric"].is-holding .gate-bio-scan::before {
        animation: gateBioScan 1.05s ease-in-out infinite;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-core {
        display: block;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 86px;
        border-radius: 46% 54% 52% 48%;
        opacity: calc(0.18 + var(--hold-progress) * 0.36);
        background:
          radial-gradient(circle at 38% 34%, rgba(213, 240, 237, 0.22), transparent 26%),
          radial-gradient(circle at 58% 66%, rgba(145, 216, 211, 0.13), transparent 54%);
        filter: blur(1px);
        box-shadow: 0 0 38px rgba(145, 216, 211, calc(0.05 + var(--hold-progress) * 0.12));
        transform: translate(-50%, -50%) rotate(calc(var(--hold-progress) * 14deg)) scale(calc(0.9 + var(--hold-progress) * 0.1));
        animation: gateBioLiquid 5.2s ease-in-out infinite;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-copy {
        z-index: 4;
        gap: 9px;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-copy small {
        color: rgba(198, 228, 225, 0.42);
        letter-spacing: 0.13em;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-copy small::before {
        background: #91d8d3;
        box-shadow: 0 0 9px rgba(145, 216, 211, 0.42);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-copy b {
        font-size: 23px;
        font-weight: 580;
      }

      .gate-chamber[data-gate-version="biometric"].is-holding .gate-hold {
        border-color: rgba(190, 229, 226, 0.3);
        box-shadow:
          0 36px 96px rgba(0, 0, 0, 0.72),
          0 0 calc(72px + var(--hold-progress) * 54px) rgba(145, 216, 211, calc(0.06 + var(--hold-progress) * 0.09)),
          inset 0 0 48px rgba(145, 216, 211, 0.075);
        transform: scale(0.985);
        animation-play-state: paused;
      }

      .gate-chamber[data-gate-version="biometric"].is-holding .gate-panel-left {
        transform: translateX(calc(var(--hold-progress) * -12px)) !important;
      }

      .gate-chamber[data-gate-version="biometric"].is-holding .gate-panel-right {
        transform: translateX(calc(var(--hold-progress) * 12px)) !important;
      }

      .gate-chamber[data-gate-version="biometric"].is-recovering {
        transition: --hold-progress 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      @keyframes gateBioOrbit {
        to { transform: rotate(360deg); }
      }

      @keyframes gateBioLiquid {
        0%, 100% { border-radius: 46% 54% 52% 48%; }
        50% { border-radius: 54% 46% 44% 56%; }
      }

      @keyframes gateBioScan {
        0% { top: 16%; opacity: 0; }
        18%, 82% { opacity: 0.54; }
        100% { top: 82%; opacity: 0; }
      }

      @keyframes gateBioImpact {
        0% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.78); }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); }
      }

      .intro-gate.is-opening .gate-light {
        width: 2px;
        opacity: 0;
        box-shadow: 0 0 24px rgba(182, 230, 238, 0.16);
        transition: opacity 420ms ease, box-shadow 420ms ease;
      }

      .intro-gate.is-opening .gate-chamber {
        animation: none;
      }

      .intro-gate.is-opening .gate-city-grid,
      .intro-gate.is-opening .gate-chamber::before,
      .intro-gate.is-opening .gate-chamber::after {
        opacity: 0;
        transition: opacity 620ms ease;
      }

      @media (max-width: 680px) {
        .intro-handwritten-sign {
          max-width: none;
          font-size: clamp(48px, 15vw, 68px);
          letter-spacing: -0.12em;
          transform: rotate(-1.8deg) scale(0.88);
        }

        .intro-brand-intro {
          width: calc(100% - 24px);
          gap: 14px;
          padding: 38px 14px;
        }

        .intro-brand-intro h1 {
          gap: 0.12em;
          font-size: clamp(22px, 7.2vw, 31px);
        }

        .intro-brand-meta {
          width: 88vw;
          gap: 8px;
          font-size: 6.5px;
        }

        .intro-brand-corner {
          width: 28px;
          height: 28px;
        }

        .gate-portal {
          width: 132vw;
          height: 136vh;
        }

        .gate-hold {
          width: min(286px, 84vw);
          height: 108px;
          min-height: 108px;
        }

        .gate-hold-wrap {
          width: calc(100% - 24px);
        }

        .gate-chamber[data-gate-version="biometric"] .gate-hold {
          width: 184px;
          height: 184px;
          min-height: 184px;
        }

        .gate-chamber[data-gate-version="biometric"] .gate-hold-ring::after {
          transform: rotate(calc(-90deg + var(--hold-progress) * 360deg)) translateY(-84px);
        }

        .gate-pattern {
          width: 56%;
        }
      }

      body.intro-pending .site {
        opacity: 0;
        filter: none;
        transform: none;
        pointer-events: none;
      }

      .site {
        transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .topbar {
        position: fixed;
        top: 18px;
        left: 50%;
        z-index: 80;
        width: min(1200px, calc(100% - 32px));
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
        align-items: center;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(8, 10, 10, 0.64);
        backdrop-filter: blur(22px);
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-right: 6px;
      }

      .brand-mark {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        color: #080a0a;
        background: var(--paper);
        font-weight: 920;
        line-height: 1;
      }

      .brand-text {
        display: grid;
        gap: 1px;
      }

      .brand-text strong {
        font-size: 12px;
        line-height: 1;
        text-transform: uppercase;
      }

      .brand-text span {
        color: var(--faint);
        font-size: 10px;
        text-transform: uppercase;
      }

      .nav {
        display: flex;
        justify-content: center;
        gap: 4px;
      }

      .nav a {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 8px 11px;
        border-radius: 8px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 760;
      }

      .nav a:hover,
      .nav a.is-active {
        color: var(--paper);
        background: rgba(244, 241, 232, 0.08);
      }

      .menu-btn {
        display: none;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--paper);
        background: transparent;
      }

      .profile-hero {
        position: relative;
        min-height: 100svh;
        display: grid;
        align-items: center;
        padding: 96px 0 18px;
        overflow: hidden;
        isolation: isolate;
        background:
          radial-gradient(circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 22vw),
          radial-gradient(circle at 76% 36%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 24vw),
          linear-gradient(180deg, rgba(5, 6, 6, 0.52), #050606 88%);
      }

      .profile-hero::before {
        content: "";
        position: absolute;
        inset: -22%;
        z-index: -3;
        background:
          conic-gradient(from 218deg at 61% 48%, transparent 0 30deg, color-mix(in srgb, var(--accent) 48%, transparent) 42deg, transparent 82deg, color-mix(in srgb, var(--accent-3) 20%, transparent) 128deg, transparent 210deg, color-mix(in srgb, var(--accent) 24%, transparent) 255deg, transparent 330deg),
          radial-gradient(circle at 58% 46%, rgba(244, 241, 232, 0.08), transparent 23%),
          radial-gradient(circle at 17% 76%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 26%);
        filter: blur(18px);
        opacity: 0.72;
        pointer-events: none;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * -36px), calc((var(--my, 0.5) - 0.5) * -28px))
          rotate(calc((var(--mx, 0.5) - 0.5) * 8deg));
        animation: commandAtmosphere 16s ease-in-out infinite alternate;
      }

      .profile-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image:
          linear-gradient(90deg, rgba(244, 241, 232, 0.042) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.034) 1px, transparent 1px),
          linear-gradient(180deg, transparent 0 48%, rgba(244, 241, 232, 0.035) 49%, transparent 50%);
        background-size: 82px 82px, 82px 82px, 100% 7px;
        mask-image: radial-gradient(circle at 58% 50%, black 0%, transparent 72%);
        opacity: 0.62;
        pointer-events: none;
      }

      .command-bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        overflow: hidden;
      }

      .command-beam {
        position: absolute;
        left: 50%;
        top: 48%;
        width: min(78vw, 1180px);
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 72%, transparent), transparent);
        opacity: 0.28;
        transform-origin: center;
      }

      .command-beam:nth-child(1) {
        transform:
          translate(-50%, -50%)
          rotate(calc(-16deg + (var(--mx, 0.5) - 0.5) * 8deg));
      }

      .command-beam:nth-child(2) {
        opacity: 0.18;
        transform:
          translate(-50%, -50%)
          rotate(calc(28deg + (var(--my, 0.5) - 0.5) * -10deg));
      }

      .command-shell {
        position: relative;
        z-index: 2;
        width: min(1500px, calc(100% - 72px));
        min-height: calc(100svh - 104px);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(410px, 0.98fr) minmax(430px, 1.04fr) minmax(230px, 0.58fr);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: clamp(20px, 3vw, 52px);
        align-items: center;
        overflow: visible;
        perspective: 1400px;
      }

      .command-shell::before,
      .command-shell::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .command-shell::before {
        inset: 10% 28% 0 23%;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
        filter: blur(44px);
        opacity: 0.62;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * 46px), calc((var(--my, 0.5) - 0.5) * 30px))
          scale(1.02);
      }

      .command-shell::after {
        left: -4vw;
        right: -4vw;
        bottom: 6px;
        height: 24%;
        background:
          linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px),
          linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px);
        background-size: 72px 30px;
        mask-image: linear-gradient(180deg, transparent, black 24%, transparent 88%);
        transform: perspective(720px) rotateX(63deg);
        transform-origin: bottom;
        opacity: 0.52;
      }

      .command-copy,
      .command-stage,
      .command-rail,
      .command-ribbon {
        position: relative;
        z-index: 2;
      }

      .command-copy {
        grid-row: 1;
        align-self: center;
        display: grid;
        gap: 18px;
        max-width: 600px;
      }

      .command-kicker {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 32px;
        padding: 7px 13px;
        border: 1px solid rgba(244, 241, 232, 0.14);
        border-radius: 999px;
        color: rgba(244, 241, 232, 0.72);
        background: rgba(244, 241, 232, 0.055);
        backdrop-filter: blur(18px);
        font-size: 11px;
        font-weight: 840;
        text-transform: uppercase;
      }

      .command-kicker::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 20px var(--accent);
      }

      .command-title {
        max-width: 640px;
        margin: 0;
        color: var(--paper);
        font-size: clamp(42px, 4.8vw, 78px);
        line-height: 0.98;
        font-weight: 920;
      }

      .command-title .accent {
        color: color-mix(in srgb, var(--accent) 90%, white);
        text-shadow:
          0 0 36px color-mix(in srgb, var(--accent) 30%, transparent),
          0 12px 52px color-mix(in srgb, var(--accent) 20%, transparent);
      }

      .command-title .subline {
        color: rgba(244, 241, 232, 0.78);
      }

      .command-lede {
        max-width: 560px;
        margin: 0;
        color: rgba(244, 241, 232, 0.66);
        font-size: clamp(15px, 1.35vw, 18px);
        line-height: 1.68;
      }

      .command-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 4px;
      }

      .command-primary,
      .command-secondary {
        min-height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 12px 18px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 840;
        transition:
          transform 180ms ease,
          box-shadow 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .command-primary {
        color: #050606;
        background:
          linear-gradient(135deg, var(--paper), color-mix(in srgb, var(--accent) 62%, white)),
          var(--paper);
        box-shadow:
          0 0 0 1px rgba(244, 241, 232, 0.28),
          0 18px 58px color-mix(in srgb, var(--accent) 28%, transparent);
      }

      .command-secondary {
        color: var(--paper);
        border: 1px solid rgba(244, 241, 232, 0.18);
        background: rgba(244, 241, 232, 0.055);
        backdrop-filter: blur(14px);
      }

      .command-primary:hover,
      .command-secondary:hover {
        transform: translateY(-2px);
      }

      .command-secondary:hover {
        border-color: color-mix(in srgb, var(--accent) 58%, transparent);
        background: rgba(244, 241, 232, 0.08);
      }

      .command-primary svg,
      .command-secondary svg {
        width: 22px;
        height: 22px;
      }

      .command-proof {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        max-width: 570px;
        margin-top: 12px;
        border: 1px solid rgba(244, 241, 232, 0.11);
        border-radius: 8px;
        overflow: hidden;
        background: rgba(244, 241, 232, 0.04);
        backdrop-filter: blur(18px);
      }

      .command-proof article {
        min-height: 78px;
        display: grid;
        align-content: center;
        gap: 7px;
        padding: 15px;
        background: rgba(5, 6, 6, 0.48);
      }

      .command-proof strong {
        color: color-mix(in srgb, var(--accent) 82%, white);
        font-size: clamp(24px, 2.35vw, 34px);
        line-height: 1;
      }

      .command-proof span {
        color: rgba(244, 241, 232, 0.54);
        font-size: 12px;
        font-weight: 760;
        text-transform: uppercase;
      }

      .command-stage {
        grid-row: 1;
        min-height: min(68svh, 650px);
        display: grid;
        place-items: center;
        align-self: center;
      }

      .command-stage::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(44vw, 640px);
        aspect-ratio: 1;
        border-radius: 50%;
        background:
          radial-gradient(circle, rgba(244, 241, 232, 0.045), transparent 39%),
          conic-gradient(from 190deg, transparent 0 18deg, color-mix(in srgb, var(--accent) 70%, transparent) 42deg, transparent 84deg, rgba(244, 241, 232, 0.12) 118deg, transparent 176deg, color-mix(in srgb, var(--accent-3) 32%, transparent) 240deg, transparent 320deg);
        opacity: 0.95;
        filter: drop-shadow(0 0 48px color-mix(in srgb, var(--accent) 24%, transparent));
        transform:
          translate(-50%, -50%)
          rotate(calc((var(--mx, 0.5) - 0.5) * 16deg));
        animation: commandRotate 24s linear infinite;
      }

      .command-stage::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 51%;
        width: min(28vw, 390px);
        aspect-ratio: 1;
        border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
        border-radius: 50%;
        box-shadow:
          0 0 0 110px rgba(255, 255, 255, 0.018),
          0 0 0 210px rgba(255, 255, 255, 0.01),
          inset 0 0 52px color-mix(in srgb, var(--accent) 12%, transparent);
        opacity: 0.82;
        transform:
          translate(-50%, -50%)
          rotate(calc((var(--my, 0.5) - 0.5) * -12deg));
      }

      .command-scan {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(55vw, 760px);
        aspect-ratio: 1;
        border-radius: 50%;
        background:
          linear-gradient(90deg, transparent 48%, rgba(244, 241, 232, 0.16) 50%, transparent 52%),
          linear-gradient(0deg, transparent 48%, rgba(244, 241, 232, 0.12) 50%, transparent 52%);
        mask-image: radial-gradient(circle, transparent 0 23%, black 24% 61%, transparent 62%);
        opacity: 0.28;
        transform:
          translate(-50%, -50%)
          rotate(calc(32deg + (var(--mx, 0.5) - 0.5) * 24deg));
      }

      .command-person {
        position: relative;
        z-index: 5;
        width: min(34vw, 460px);
        max-height: min(72svh, 650px);
        object-fit: contain;
        filter:
          drop-shadow(0 42px 58px rgba(0, 0, 0, 0.64))
          drop-shadow(0 0 34px color-mix(in srgb, var(--accent) 20%, transparent));
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 34px), calc((var(--my, 0.5) - 0.5) * 24px), 0)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -7deg))
          scale(1.04);
        transition:
          transform 160ms ease-out,
          filter 180ms ease;
      }

      .command-stage:hover .command-person {
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 38px), calc((var(--my, 0.5) - 0.5) * 28px), 0)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -8deg))
          scale(1.075);
        filter:
          drop-shadow(0 48px 64px rgba(0, 0, 0, 0.68))
          drop-shadow(0 0 44px color-mix(in srgb, var(--accent) 28%, transparent));
      }

      .command-floor {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2%;
        z-index: 1;
        height: 28%;
        background:
          radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%),
          linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px),
          linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent) 1px, transparent 1px);
        background-size: auto, 44px 23px, 44px 23px;
        transform: perspective(640px) rotateX(67deg);
        transform-origin: bottom;
        mask-image: linear-gradient(180deg, transparent, black 18%, transparent 86%);
        opacity: 0.62;
      }

      .command-node {
        position: absolute;
        z-index: 6;
        min-width: 138px;
        padding: 10px 12px;
        border: 1px solid rgba(244, 241, 232, 0.16);
        border-radius: 8px;
        background: rgba(5, 6, 6, 0.64);
        backdrop-filter: blur(18px);
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.32);
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          background 180ms ease;
      }

      .command-node:hover {
        border-color: color-mix(in srgb, var(--accent) 56%, transparent);
        background: rgba(244, 241, 232, 0.08);
      }

      .command-node span {
        display: block;
        color: rgba(244, 241, 232, 0.42);
        font-size: 10px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .command-node strong {
        display: block;
        margin-top: 6px;
        color: var(--paper);
        font-size: 22px;
        line-height: 1;
      }

      .command-node small {
        display: block;
        margin-top: 5px;
        color: rgba(244, 241, 232, 0.56);
        font-size: 11px;
      }

      .node-a {
        left: 4%;
        top: 18%;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * -22px), calc((var(--my, 0.5) - 0.5) * -18px))
          rotate(-3deg);
      }

      .node-b {
        right: 2%;
        top: 24%;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * 18px), calc((var(--my, 0.5) - 0.5) * -12px))
          rotate(4deg);
      }

      .node-c {
        left: 8%;
        bottom: 23%;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * -18px), calc((var(--my, 0.5) - 0.5) * 14px))
          rotate(5deg);
      }

      .node-d {
        right: 5%;
        bottom: 15%;
        transform:
          translate(calc((var(--mx, 0.5) - 0.5) * 20px), calc((var(--my, 0.5) - 0.5) * 18px))
          rotate(-4deg);
      }

      .command-rail {
        grid-row: 1;
        display: grid;
        gap: 14px;
        align-content: center;
      }

      .command-rail-head {
        display: grid;
        gap: 8px;
        margin-bottom: 8px;
      }

      .command-rail-head span {
        color: var(--accent);
        font-size: 10px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .command-rail-head strong {
        font-size: clamp(20px, 2vw, 30px);
        line-height: 1.12;
      }

      .command-signal {
        position: relative;
        min-height: 128px;
        display: grid;
        gap: 10px;
        padding: 16px 0 16px 22px;
        border-left: 1px solid rgba(244, 241, 232, 0.16);
        color: rgba(244, 241, 232, 0.64);
        transition:
          color 180ms ease,
          border-color 180ms ease,
          transform 180ms ease;
      }

      .command-signal::before {
        content: "";
        position: absolute;
        left: -5px;
        top: 23px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 22px var(--accent);
      }

      .command-signal:hover {
        color: var(--paper);
        border-color: color-mix(in srgb, var(--accent) 54%, transparent);
      }

      .command-signal b {
        color: rgba(244, 241, 232, 0.36);
        font-size: 11px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .command-signal h3 {
        margin: 0;
        color: var(--paper);
        font-size: 18px;
        line-height: 1.24;
      }

      .command-signal p {
        margin: 0;
        font-size: 13px;
        line-height: 1.72;
      }

      .command-ribbon {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
        margin: 4px 0 10px;
        transform:
          translateY(calc((var(--my, 0.5) - 0.5) * -8px))
          rotateX(0deg);
      }

      .command-ribbon span {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(244, 241, 232, 0.1);
        border-radius: 999px;
        color: rgba(244, 241, 232, 0.5);
        background: rgba(244, 241, 232, 0.035);
        font-size: 10px;
        font-weight: 820;
        text-transform: uppercase;
        backdrop-filter: blur(14px);
      }

      .command-ribbon span:nth-child(2n) {
        transform: translateY(7px);
      }

      .command-ribbon span:nth-child(3n) {
        color: color-mix(in srgb, var(--accent) 68%, white);
        border-color: color-mix(in srgb, var(--accent) 20%, transparent);
      }

      @keyframes commandRotate {
        to {
          rotate: 360deg;
        }
      }

      @keyframes commandAtmosphere {
        0% {
          opacity: 0.52;
          filter: blur(22px);
        }
        100% {
          opacity: 0.8;
          filter: blur(14px);
        }
      }

      .story-section {
        --story-progress: 0;
        position: relative;
        width: min(1420px, calc(100% - 68px));
        margin: -64px auto 0;
        padding: 0 clamp(30px, 3.2vw, 52px) 120px;
        isolation: isolate;
      }

      .story-section::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -180px 0 0;
        background:
          linear-gradient(90deg, rgba(244, 241, 232, 0.024) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.018) 1px, transparent 1px),
          radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 34%),
          linear-gradient(180deg, rgba(5, 6, 8, 0.02), rgba(5, 6, 8, 0.72) 88%);
        background-size: 72px 72px, 72px 72px, auto, auto;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 90%, transparent);
        mask-image: linear-gradient(180deg, transparent, #000 12%, #000 90%, transparent);
        pointer-events: none;
      }

      .story-portal {
        position: relative;
        min-height: min(560px, 68svh);
        display: grid;
        place-items: center;
        overflow: visible;
      }

      .story-portal::before {
        content: "";
        position: absolute;
        right: -18%;
        top: 50%;
        width: min(820px, 62vw);
        aspect-ratio: 1;
        border: 1px solid rgba(244, 241, 232, 0.055);
        border-radius: 50%;
        box-shadow:
          0 0 0 96px rgba(244, 241, 232, 0.008),
          0 0 0 192px rgba(244, 241, 232, 0.005);
        transform: translateY(-50%);
        pointer-events: none;
      }

      .story-portal-meta,
      .story-portal-foot {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 20px 0;
        color: rgba(244, 241, 232, 0.38);
        font-size: 9px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .story-portal-meta {
        border-bottom: 1px solid rgba(244, 241, 232, 0.08);
      }

      .story-portal-meta span:first-child,
      .story-portal-foot span:first-child {
        color: color-mix(in srgb, var(--accent-2) 76%, white);
      }

      .story-portal-main {
        position: relative;
        z-index: 2;
        width: min(900px, 100%);
        padding: 112px 0 96px;
        text-align: center;
      }

      .story-kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 22px;
        color: var(--accent);
        font-size: 10px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .story-kicker::before {
        content: "";
        width: 34px;
        height: 1px;
        background: currentColor;
      }

      .story-portal h2 {
        max-width: 780px;
        margin: 0 auto;
        font-size: clamp(36px, 4.2vw, 60px);
        line-height: 1.08;
        font-weight: 720;
        text-wrap: balance;
      }

      .story-portal-summary {
        max-width: 660px;
        margin: 24px auto 0;
        color: rgba(244, 241, 232, 0.58);
        font-size: clamp(14px, 1.4vw, 17px);
        line-height: 1.75;
      }

      .story-open {
        min-width: 260px;
        min-height: 68px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        margin-top: 44px;
        padding: 0 9px 0 26px;
        border: 1px solid rgba(244, 241, 232, 0.18);
        border-radius: 8px;
        color: var(--paper);
        background: rgba(9, 11, 11, 0.72);
        box-shadow: 0 20px 56px rgba(0, 0, 0, 0.22);
        cursor: pointer;
        transition:
          transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
          border-color 200ms ease,
          background 200ms ease,
          box-shadow 260ms ease;
      }

      .story-open:hover,
      .story-open:focus-visible {
        border-color: color-mix(in srgb, var(--accent) 54%, transparent);
        background: color-mix(in srgb, var(--accent) 8%, rgba(5, 7, 7, 0.78));
        box-shadow: 0 24px 70px color-mix(in srgb, var(--accent) 12%, transparent);
        transform: translateY(-3px);
      }

      .story-open-icon {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(244, 241, 232, 0.12);
        border-radius: 6px;
        background: rgba(244, 241, 232, 0.045);
        font-size: 20px;
        transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .story-section.is-open .story-open-icon {
        transform: rotate(180deg);
      }

      .story-article-wrap {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition:
          grid-template-rows 920ms cubic-bezier(0.16, 1, 0.3, 1),
          opacity 420ms ease;
      }

      .story-section.is-open .story-article-wrap {
        grid-template-rows: 1fr;
        opacity: 1;
      }

      .story-article-inner {
        min-height: 0;
        overflow: hidden;
      }

      .story-article {
        position: relative;
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: clamp(54px, 7vw, 112px);
        padding: 86px 0 118px;
        border-top: 1px solid rgba(244, 241, 232, 0.12);
        border-bottom: 1px solid rgba(244, 241, 232, 0.12);
        background:
          linear-gradient(90deg, rgba(244, 241, 232, 0.018), transparent 28%),
          radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%);
        scroll-margin-top: 88px;
      }

      .story-article-rail {
        align-self: start;
        position: sticky;
        top: 112px;
        display: grid;
        grid-template-columns: 2px 1fr;
        gap: 20px;
      }

      .story-progress-track {
        position: relative;
        width: 2px;
        min-height: 250px;
        overflow: hidden;
        background: rgba(244, 241, 232, 0.1);
      }

      .story-progress-track span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: calc(var(--story-progress) * 100%);
        background: linear-gradient(180deg, var(--accent), var(--accent-2));
        box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 38%, transparent);
      }

      .story-article-rail div:last-child {
        display: grid;
        align-content: start;
        gap: 12px;
      }

      .story-article-rail strong {
        color: var(--paper);
        font-size: 12px;
      }

      .story-article-rail span,
      .story-article-rail a,
      .story-article-rail small {
        color: rgba(244, 241, 232, 0.38);
        font-size: 9px;
        line-height: 1.6;
        text-transform: uppercase;
      }

      .story-article-rail a {
        width: fit-content;
        text-decoration: none;
        transition: color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .story-article-rail a:hover,
      .story-article-rail a:focus-visible,
      .story-article-rail a.is-active {
        color: var(--paper);
        transform: translateX(4px);
        outline: none;
      }

      .story-article-rail a.is-active::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        margin: 0 7px 1px 0;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 58%, transparent);
      }

      .story-copy {
        width: min(760px, 100%);
      }

      .story-copy-head {
        padding-bottom: 54px;
      }

      .story-copy-head span {
        color: var(--accent-2);
        font-size: 10px;
        font-weight: 840;
        text-transform: uppercase;
      }

      .story-copy-head h3 {
        margin: 16px 0 0;
        font-size: clamp(30px, 3.8vw, 50px);
        line-height: 1.08;
        font-weight: 700;
        text-wrap: balance;
      }

      .story-chapter {
        position: relative;
        padding: 56px 0 62px;
        border-top: 1px solid rgba(244, 241, 232, 0.11);
        scroll-margin-top: 118px;
      }

      .story-chapter-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        color: rgba(244, 241, 232, 0.34);
        font-size: 9px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .story-chapter-label b {
        color: var(--accent);
        font-size: 11px;
      }

      .story-chapter h4 {
        margin: 18px 0 24px;
        font-size: clamp(24px, 3vw, 36px);
        line-height: 1.15;
      }

      .story-chapter p {
        margin: 0 0 22px;
        color: rgba(244, 241, 232, 0.68);
        font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
        font-size: 18px;
        line-height: 1.95;
      }

      .story-chapter p:last-child {
        margin-bottom: 0;
      }

      .story-chapter:first-of-type p:first-of-type::first-letter {
        float: left;
        margin: 9px 10px 0 0;
        color: color-mix(in srgb, var(--accent) 78%, white);
        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
        font-size: 58px;
        font-weight: 780;
        line-height: 0.72;
      }

      .story-float-return {
        position: fixed;
        z-index: 48;
        right: clamp(18px, 2.6vw, 42px);
        bottom: clamp(20px, 3.6vh, 38px);
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        align-items: center;
        padding: 5px;
        border: 1px solid rgba(244, 241, 232, 0.15);
        border-radius: 50%;
        color: rgba(244, 241, 232, 0.76);
        background: rgba(9, 11, 11, 0.76);
        box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(18px) saturate(1.08);
        -webkit-backdrop-filter: blur(18px) saturate(1.08);
        font: inherit;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 12px, 0) scale(0.96);
        transition:
          opacity 220ms ease,
          visibility 220ms ease,
          transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
          border-color 180ms ease,
          color 180ms ease;
      }

      .story-float-return.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) scale(1);
      }

      .story-float-return:hover,
      .story-float-return:focus-visible {
        color: var(--paper);
        border-color: color-mix(in srgb, var(--accent) 46%, rgba(244, 241, 232, 0.15));
        transform: translate3d(0, -3px, 0) scale(1);
        outline: none;
      }

      .story-float-ring {
        position: relative;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        color: var(--paper);
        background: conic-gradient(
          var(--accent) calc(var(--story-progress) * 360deg),
          rgba(244, 241, 232, 0.1) 0deg
        );
      }

      .story-float-ring::before {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        background: #0a0c0c;
      }

      .story-float-ring span {
        position: relative;
        z-index: 1;
        font-size: 16px;
        line-height: 1;
      }

      .about-profile {
        position: relative;
        width: min(1280px, calc(100% - 32px));
        min-height: 100svh;
        margin: 0 auto;
        padding: 56px 0 38px;
        display: grid;
        align-content: center;
        overflow: hidden;
      }

      .about-profile::before,
      .about-profile::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .about-profile::before {
        inset: 44px 0 36px;
        border: 1px solid rgba(244, 241, 232, 0.08);
        border-radius: 18px;
        background:
          linear-gradient(90deg, rgba(244, 241, 232, 0.035) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.026) 1px, transparent 1px),
          radial-gradient(circle at 18% 32%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 36%),
          radial-gradient(circle at 88% 70%, color-mix(in srgb, var(--accent-3) 16%, transparent), transparent 34%),
          rgba(5, 6, 8, 0.54);
        background-size: 72px 72px, 72px 72px, auto, auto, auto;
        mask-image: linear-gradient(90deg, black 0%, black 86%, transparent 100%);
      }

      .about-profile::after {
        right: 4%;
        bottom: 8%;
        width: min(520px, 46vw);
        aspect-ratio: 1;
        border: 1px solid color-mix(in srgb, var(--accent-2) 18%, transparent);
        border-radius: 50%;
        opacity: 0.16;
        box-shadow:
          0 0 0 78px rgba(244, 241, 232, 0.012),
          inset 0 0 80px color-mix(in srgb, var(--accent-2) 12%, transparent);
      }

      .about-titlebar {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: clamp(42px, 4.5vw, 68px);
      }

      .about-titlebar h2 {
        margin: 0;
        font-size: clamp(36px, 4.6vw, 60px);
        line-height: 0.88;
        text-transform: uppercase;
      }

      .about-titlebar span {
        color: var(--accent-2);
      }

      .about-titlebar p {
        margin: clamp(16px, 1.5vw, 24px) 0 0;
        color: rgba(244, 241, 232, 0.52);
        font-size: 13px;
        font-weight: 780;
        text-transform: uppercase;
      }

      .about-profile-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(280px, 0.4fr) minmax(0, 1fr);
        gap: clamp(22px, 3.6vw, 50px);
        align-items: start;
      }

      .about-portrait {
        position: relative;
        min-height: 360px;
        border-radius: 22px;
        border: 1px solid rgba(244, 241, 232, 0.14);
        overflow: hidden;
        background: #f4f1e8;
        box-shadow:
          0 34px 120px rgba(0, 0, 0, 0.45),
          inset 0 0 0 1px rgba(255, 255, 255, 0.04);
      }

      .about-portrait::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: inherit;
        background:
          linear-gradient(180deg, transparent 0%, transparent 46%, rgba(5, 6, 6, 0.52) 100%),
          radial-gradient(circle at 50% 18%, transparent 0 32%, rgba(8, 10, 10, 0.08) 72%, rgba(8, 10, 10, 0.38) 100%),
          linear-gradient(90deg, rgba(5, 6, 6, 0.16), transparent 18%, transparent 82%, rgba(5, 6, 6, 0.16));
        pointer-events: none;
      }

      .about-portrait::after {
        content: "AI PROJECTS / GROWTH / DELIVERY";
        position: absolute;
        z-index: 3;
        left: 20px;
        right: 20px;
        bottom: 18px;
        color: rgba(244, 241, 232, 0.76);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-align: center;
        text-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
      }

      .about-avatar {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: 50% 30%;
        filter: saturate(0.98) contrast(1.02);
      }

      .about-play {
        position: absolute;
        z-index: 4;
        right: 18px;
        bottom: 18px;
        width: 78px;
        aspect-ratio: 1;
        border: 1px solid rgba(244, 241, 232, 0.14);
        border-radius: 50%;
        background:
          radial-gradient(circle, rgba(244, 241, 232, 0.18), transparent 68%),
          rgba(5, 6, 6, 0.32);
        backdrop-filter: blur(10px);
        opacity: 0.9;
      }

      .about-play::before {
        content: "";
        position: absolute;
        left: 56%;
        top: 50%;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 23px solid rgba(244, 241, 232, 0.78);
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 0 28px color-mix(in srgb, var(--accent) 30%, transparent));
      }

      .about-info {
        position: relative;
        display: grid;
        gap: 13px;
      }

      .about-kicker {
        margin: 0;
        color: var(--accent-2);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
      }

      .about-info h3 {
        margin: 8px 0 0;
        font-size: clamp(34px, 4.4vw, 54px);
        line-height: 0.92;
      }

      .about-info h3 span {
        color: var(--accent);
      }

      .about-summary {
        max-width: 780px;
        margin: 0;
        color: rgba(244, 241, 232, 0.64);
        font-size: clamp(14px, 1.25vw, 16px);
        line-height: 1.58;
      }

      .about-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid rgba(244, 241, 232, 0.12);
        border-bottom: 1px solid rgba(244, 241, 232, 0.12);
      }

      .about-meta div {
        min-height: 46px;
        padding: 8px 18px 8px 0;
        border-bottom: 1px solid rgba(244, 241, 232, 0.08);
      }

      .about-meta div:nth-child(odd) {
        border-right: 1px solid rgba(244, 241, 232, 0.08);
      }

      .about-meta div:nth-last-child(-n + 2) {
        border-bottom: 0;
      }

      .about-meta small,
      .about-stat small,
      .about-step small {
        display: block;
        color: rgba(244, 241, 232, 0.36);
        font-size: 10px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .about-meta strong {
        display: block;
        margin-top: 4px;
        color: rgba(244, 241, 232, 0.92);
        font-size: 15px;
        line-height: 1.25;
      }

      .about-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(76px, 0.58fr);
        gap: 10px;
      }

      .about-stat {
        position: relative;
        display: grid;
        align-content: center;
        min-height: 66px;
        padding: 12px 14px;
        border: 1px solid rgba(244, 241, 232, 0.1);
        border-radius: 16px;
        background:
          radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 46%),
          rgba(244, 241, 232, 0.035);
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
        overflow: hidden;
        transition:
          transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1),
          border-color 220ms ease,
          background-color 220ms ease,
          box-shadow 220ms ease;
      }

      .about-stat::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--accent), transparent);
        opacity: 0;
        transform: scaleX(0.35);
        transform-origin: left;
        transition: opacity 220ms ease, transform 280ms cubic-bezier(0.2, 0.75, 0.25, 1);
      }

      .about-stat:not(.about-stat--more):hover,
      .about-stat:focus-visible,
      .about-stat.is-active {
        z-index: 1;
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--accent) 46%, rgba(244, 241, 232, 0.12));
        background-color: rgba(244, 241, 232, 0.055);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
        outline: none;
      }

      .about-stat:not(.about-stat--more):hover::after,
      .about-stat:focus-visible::after,
      .about-stat.is-active::after {
        opacity: 0.9;
        transform: scaleX(1);
      }

      .about-stat strong {
        display: block;
        margin-bottom: 5px;
        color: var(--accent-2);
        font-size: clamp(24px, 3.2vw, 34px);
        line-height: 0.9;
      }

      .about-stat[data-about-stat="growth"] strong {
        font-size: clamp(21px, 2.55vw, 30px);
        white-space: nowrap;
      }

      .about-stat[data-about-stat="business"] strong {
        font-size: clamp(20px, 2.35vw, 28px);
        white-space: nowrap;
      }

      .about-stat small {
        line-height: 1.3;
      }

      .about-stat--more {
        display: grid;
        align-content: center;
        justify-items: center;
        padding-inline: 10px;
        text-align: center;
        cursor: default;
      }

      .about-stat--more strong {
        margin: 0 0 6px;
        font-size: 18px;
        line-height: 1;
      }

      .about-stat--more::after {
        display: none;
      }

      .about-stat-detail {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transform: translateY(-7px);
        transition:
          grid-template-rows 320ms cubic-bezier(0.2, 0.75, 0.25, 1),
          opacity 200ms ease,
          transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1);
      }

      .about-stat-detail.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
        transform: translateY(0);
      }

      .about-stat-detail-inner {
        min-height: 0;
        overflow: hidden;
      }

      .about-stat-detail article {
        position: relative;
        margin-top: 2px;
        padding: 18px 20px 19px;
        border: 1px solid rgba(244, 241, 232, 0.1);
        border-radius: 14px;
        background:
          linear-gradient(112deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
          rgba(6, 7, 7, 0.68);
      }

      .about-stat-detail article::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 20px;
        width: 52px;
        height: 1px;
        background: var(--accent);
        box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
      }

      .about-stat-detail-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 14px;
      }

      .about-stat-detail-tags span {
        padding: 6px 9px;
        border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(244, 241, 232, 0.12));
        border-radius: 999px;
        color: color-mix(in srgb, var(--accent-2) 70%, white);
        background: color-mix(in srgb, var(--accent) 6%, rgba(244, 241, 232, 0.025));
        font-size: 10px;
        font-weight: 760;
        line-height: 1;
      }

      .about-stat-detail p {
        max-width: 980px;
        margin: 9px 0 0;
        color: rgba(244, 241, 232, 0.61);
        font-size: 13px;
        line-height: 1.7;
      }

      .about-stat-detail-body {
        display: grid;
        gap: 12px;
        margin-top: 14px;
      }

      .about-stat-detail-body section {
        display: grid;
        gap: 5px;
      }

      .about-stat-detail-body h5 {
        margin: 0;
        color: rgba(244, 241, 232, 0.82);
        font-size: 13px;
        line-height: 1.45;
      }

      .about-stat-detail-body p {
        margin: 0;
      }

      .about-stat-detail-body .about-stat-separator {
        width: 30px;
        height: 1px;
        margin-block: 2px;
        background: rgba(244, 241, 232, 0.18);
      }

      .about-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .about-tags span {
        padding: 7px 11px;
        border: 1px solid rgba(244, 241, 232, 0.12);
        border-radius: 999px;
        color: rgba(244, 241, 232, 0.62);
        background: rgba(244, 241, 232, 0.035);
        font-size: 12px;
        font-weight: 760;
      }

      .about-path {
        position: relative;
        z-index: 1;
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
      }

      .about-path::before {
        content: "";
        position: absolute;
        left: 4px;
        right: 4px;
        top: 12px;
        height: 1px;
        background:
          linear-gradient(90deg, var(--accent-2), color-mix(in srgb, var(--accent) 64%, transparent), transparent);
        opacity: 0.72;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 1300ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .about-path.is-sequence-visible::before {
        transform: scaleX(1);
      }

      .about-step {
        position: relative;
        padding-top: 22px;
      }

      .about-step::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        width: 17px;
        height: 17px;
        background: var(--accent-2);
        clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
        filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-2) 48%, transparent));
      }

      .about-step h4 {
        margin: 6px 0 0;
        color: rgba(244, 241, 232, 0.9);
        font-size: 15px;
      }

      .about-step p {
        margin: 6px 0 0;
        color: rgba(244, 241, 232, 0.48);
        font-size: 12px;
        line-height: 1.42;
      }

      .hero {
        position: relative;
        min-height: 100svh;
        display: grid;
        align-items: center;
        padding: 100px 0 32px;
        overflow: hidden;
      }

      .hero-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.9;
      }

      .poster-shell {
        position: relative;
        width: min(1220px, calc(100% - 32px));
        min-height: calc(100svh - 122px);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.44fr);
        gap: 12px;
        perspective: 1200px;
      }

      .poster-panel,
      .poster-stage,
      .poster-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(8, 10, 10, 0.52);
        backdrop-filter: blur(18px);
      }

      .poster-stage {
        position: relative;
        min-height: 650px;
        overflow: hidden;
        transform-style: preserve-3d;
        background:
          radial-gradient(circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 24%),
          linear-gradient(135deg, rgba(244, 241, 232, 0.08), transparent 32%, rgba(244, 241, 232, 0.035)),
          rgba(8, 10, 10, 0.58);
      }

      .poster-stage::before {
        content: "";
        position: absolute;
        inset: 16px;
        border: 1px solid rgba(244, 241, 232, 0.1);
        border-radius: 8px;
        pointer-events: none;
      }

      .poster-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 28%),
          linear-gradient(90deg, rgba(244, 241, 232, 0.06) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.045) 1px, transparent 1px);
        background-size: auto, 58px 58px, 58px 58px;
        mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
        opacity: 0.72;
        pointer-events: none;
      }

      .poster-title {
        position: absolute;
        left: 28px;
        top: 28px;
        z-index: 4;
        display: grid;
        gap: 9px;
        pointer-events: none;
      }

      .poster-title::before {
        content: "";
        position: absolute;
        inset: -12px -16px -14px;
        z-index: -1;
        border-radius: 8px;
        background: linear-gradient(90deg, rgba(8, 10, 10, 0.82), rgba(8, 10, 10, 0));
      }

      .poster-title small,
      .poster-chip,
      .poster-card span,
      .poster-readout span {
        color: var(--faint);
        font-size: 11px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .poster-title h1 {
        max-width: 420px;
        margin: 0;
        font-size: clamp(24px, 2.55vw, 36px);
        line-height: 1;
        font-weight: 860;
      }

      .poster-title p {
        max-width: 430px;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .poster-orbit {
        position: absolute;
        left: 50%;
        top: 52%;
        z-index: 2;
        width: min(58vw, 610px);
        aspect-ratio: 1;
        border: 1px solid rgba(244, 241, 232, 0.14);
        border-radius: 50%;
        transform: translate(-50%, -50%) rotate(calc((var(--mx, 0.5) - 0.5) * 16deg));
        transition: transform 140ms ease-out;
        pointer-events: none;
      }

      .poster-orbit::before,
      .poster-orbit::after {
        content: "";
        position: absolute;
        inset: 12%;
        border: 1px dashed color-mix(in srgb, var(--accent) 32%, transparent);
        border-radius: 50%;
        animation: spin 32s linear infinite;
      }

      .poster-orbit::after {
        inset: 30%;
        border-style: solid;
        animation-duration: 18s;
        animation-direction: reverse;
      }

      .poster-core {
        position: absolute;
        left: calc(var(--mx, 0.5) * 100%);
        top: calc(var(--my, 0.5) * 100%);
        z-index: 5;
        width: 96px;
        height: 96px;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
        border-radius: 50%;
        background:
          radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
          rgba(8, 10, 10, 0.62);
        box-shadow:
          0 0 50px color-mix(in srgb, var(--accent) 26%, transparent),
          inset 0 0 38px rgba(244, 241, 232, 0.07);
        transform: translate(-50%, -50%);
        transition:
          left 120ms ease-out,
          top 120ms ease-out;
        pointer-events: none;
      }

      .poster-core::before {
        content: "";
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 28px var(--accent);
      }

      .poster-map {
        position: absolute;
        inset: 128px 34px 82px;
        z-index: 6;
        display: grid;
        place-items: center;
        pointer-events: none;
      }

      .map-center {
        position: relative;
        z-index: 3;
        width: 176px;
        height: 176px;
        display: grid;
        place-items: center;
        text-align: center;
        padding: 18px;
        border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
        border-radius: 50%;
        background:
          radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 64%),
          rgba(8, 10, 10, 0.78);
        box-shadow:
          0 0 58px color-mix(in srgb, var(--accent) 22%, transparent),
          inset 0 0 32px rgba(244, 241, 232, 0.06);
      }

      .map-center span,
      .map-node span,
      .map-output span {
        color: var(--accent);
        font-size: 10px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .map-center strong {
        display: block;
        margin-top: 8px;
        font-size: 18px;
        line-height: 1.16;
      }

      .map-node {
        position: absolute;
        z-index: 4;
        width: min(245px, 28%);
        min-height: 116px;
        display: grid;
        align-content: space-between;
        gap: 10px;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
        border-radius: 8px;
        background:
          radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 36%),
          rgba(8, 10, 10, 0.74);
        backdrop-filter: blur(16px);
        box-shadow: 0 20px 56px rgba(0, 0, 0, 0.28);
      }

      .map-node strong {
        font-size: 16px;
        line-height: 1.18;
      }

      .map-node small {
        color: rgba(244, 241, 232, 0.56);
        font-size: 12px;
        line-height: 1.35;
      }

      .node-signal {
        left: 0;
        top: 12%;
      }

      .node-product {
        right: 0;
        top: 8%;
      }

      .node-growth {
        right: 2%;
        bottom: 8%;
      }

      .node-delivery {
        left: 2%;
        bottom: 8%;
      }

      .map-line {
        position: absolute;
        z-index: 2;
        width: 31%;
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 48%, transparent), transparent);
        transform-origin: center;
      }

      .line-a {
        left: 24%;
        top: 34%;
        transform: rotate(16deg);
      }

      .line-b {
        right: 23%;
        top: 35%;
        transform: rotate(-17deg);
      }

      .line-c {
        right: 24%;
        bottom: 30%;
        transform: rotate(18deg);
      }

      .line-d {
        left: 24%;
        bottom: 30%;
        transform: rotate(-18deg);
      }

      .map-output {
        position: absolute;
        left: 50%;
        bottom: -54px;
        z-index: 4;
        width: min(560px, 72%);
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        background: rgba(244, 241, 232, 0.08);
        backdrop-filter: blur(16px);
      }

      .map-output div {
        min-height: 72px;
        display: grid;
        align-content: center;
        gap: 5px;
        padding: 11px 12px;
        background: rgba(8, 10, 10, 0.78);
      }

      .map-output strong {
        font-size: 13px;
        line-height: 1.2;
      }

      .poster-chip {
        position: absolute;
        z-index: 4;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(8, 10, 10, 0.68);
        pointer-events: none;
      }

      .poster-chip::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
      }

      .chip-a {
        right: 32px;
        top: 34px;
      }

      .chip-b {
        left: 34px;
        bottom: 32px;
      }

      .chip-c {
        right: 34px;
        bottom: 34px;
      }

      .poster-panel {
        min-height: 650px;
        display: grid;
        grid-template-rows: auto 1fr auto;
        overflow: hidden;
      }

      .poster-readout {
        display: grid;
        gap: 12px;
        padding: 18px;
        border-bottom: 1px solid var(--line);
      }

      .poster-readout strong {
        font-size: 30px;
        line-height: 1;
      }

      .poster-card-stack {
        display: grid;
        gap: 10px;
        align-content: center;
        padding: 18px;
      }

      .poster-card {
        min-height: 112px;
        padding: 15px;
        display: grid;
        align-content: space-between;
        transform:
          rotateX(calc((var(--my, 0.5) - 0.5) * -5deg))
          rotateY(calc((var(--mx, 0.5) - 0.5) * 7deg));
        transition:
          transform 120ms ease-out,
          border-color 180ms ease,
          background 180ms ease;
      }

      .poster-card:hover {
        border-color: color-mix(in srgb, var(--accent) 58%, transparent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
      }

      .poster-card strong {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.28;
      }

      .poster-footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--line);
      }

      .poster-footer div {
        min-height: 82px;
        padding: 13px;
        border-right: 1px solid var(--line);
      }

      .poster-footer div:last-child {
        border-right: 0;
      }

      .poster-footer strong {
        display: block;
        font-size: 20px;
      }

      .poster-footer span {
        color: var(--faint);
        font-size: 10px;
        text-transform: uppercase;
      }

      .hero-grid {
        position: relative;
        width: min(1200px, calc(100% - 32px));
        margin: 0 auto;
        display: grid;
        grid-template-columns: 0.78fr 1fr;
        gap: 18px;
        align-items: stretch;
      }

      .hero-copy,
      .hero-visual {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(8, 10, 10, 0.54);
        backdrop-filter: blur(14px);
        overflow: hidden;
      }

      .hero-copy {
        min-height: 620px;
        display: grid;
        align-content: space-between;
        padding: 22px;
      }

      .eyebrow {
        margin: 0;
        color: var(--accent);
        font-size: 11px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .hero-title {
        max-width: 520px;
        margin: 0;
        font-size: clamp(28px, 3.8vw, 46px);
        line-height: 1.05;
        font-weight: 820;
        letter-spacing: 0;
      }

      .hero-title span {
        display: block;
        color: var(--muted);
        max-width: 440px;
        margin-top: 7px;
        font-size: clamp(23px, 3.1vw, 36px);
        line-height: 1.12;
        font-weight: 620;
      }

      .hero-sub {
        max-width: 520px;
        margin: 16px 0 0;
        color: var(--muted);
        font-size: 15px;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
      }

      .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 14px;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        color: var(--paper);
        background: rgba(244, 241, 232, 0.055);
        font-size: 13px;
        font-weight: 820;
        transition:
          transform 180ms ease,
          background 180ms ease,
          border-color 180ms ease;
      }

      .btn:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--accent) 58%, white 0%);
        background: color-mix(in srgb, var(--accent) 15%, transparent);
      }

      .btn-primary {
        color: #080a0a;
        border-color: transparent;
        background: var(--accent);
      }

      .mini-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--line);
        overflow: hidden;
      }

      .mini-stats div {
        min-height: 92px;
        padding: 14px;
        background: rgba(8, 10, 10, 0.82);
      }

      .mini-stats strong {
        display: block;
        color: var(--paper);
        font-size: 22px;
      }

      .mini-stats span {
        color: var(--faint);
        font-size: 11px;
      }

      .console-stack {
        display: grid;
        gap: 8px;
        margin-top: 22px;
      }

      .console-row {
        min-height: 42px;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(244, 241, 232, 0.035);
        color: var(--muted);
        font-size: 12px;
      }

      .console-row strong {
        color: var(--paper);
        font-size: 12px;
      }

      .console-row small {
        color: var(--accent);
        font-size: 10px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .hero-visual {
        position: relative;
        min-height: 620px;
      }

      .orbital {
        position: absolute;
        inset: 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
      }

      .orbital::before,
      .orbital::after {
        content: "";
        position: absolute;
        inset: 10%;
        border: 1px solid var(--line);
        border-radius: 50%;
        animation: spin 28s linear infinite;
      }

      .orbital::after {
        inset: 23%;
        border-style: dashed;
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        animation-duration: 18s;
        animation-direction: reverse;
      }

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

      .visual-tile {
        position: absolute;
        display: grid;
        align-content: space-between;
        min-height: 126px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(8, 10, 10, 0.78);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
        transform-style: preserve-3d;
        transition:
          transform 240ms ease,
          border-color 240ms ease,
          background 240ms ease;
      }

      .visual-tile:hover {
        border-color: color-mix(in srgb, var(--accent) 60%, transparent);
        background: rgba(244, 241, 232, 0.08);
      }

      .tile-a {
        left: 8%;
        top: 12%;
        width: 38%;
      }

      .tile-b {
        right: 8%;
        top: 20%;
        width: 32%;
      }

      .tile-c {
        left: 14%;
        bottom: 14%;
        width: 34%;
      }

      .tile-d {
        right: 10%;
        bottom: 10%;
        width: 42%;
      }

      .visual-tile span {
        color: var(--faint);
        font-size: 11px;
        font-weight: 760;
        text-transform: uppercase;
      }

      .visual-tile strong {
        display: block;
        max-width: 260px;
        margin-top: 24px;
        font-size: 20px;
        line-height: 1.1;
      }

      .visual-image {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(300px, 42%);
        aspect-ratio: 1;
        border: 1px solid var(--line);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        filter: saturate(0.8) contrast(1.1);
        opacity: 0.8;
      }

      .visual-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .section {
        width: min(1200px, calc(100% - 32px));
        margin: 0 auto;
        padding: 110px 0;
      }

      .section-head {
        display: grid;
        grid-template-columns: 0.42fr minmax(0, 1fr);
        gap: 28px;
        align-items: end;
        margin-bottom: 28px;
      }

      .section-title {
        max-width: 820px;
        margin: 0;
        font-size: clamp(28px, 4vw, 52px);
        line-height: 1.06;
        font-weight: 830;
      }

      .section-note {
        max-width: 640px;
        margin: 14px 0 0;
        color: var(--muted);
        font-size: 15px;
      }

      .interaction-wall {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 12px;
      }

      .wall-large,
      .wall-stack article {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(244, 241, 232, 0.045);
        overflow: hidden;
      }

      .wall-large {
        min-height: 560px;
        display: grid;
        grid-template-rows: 1fr auto;
      }

      .motion-field {
        position: relative;
        min-height: 390px;
        overflow: hidden;
      }

      .motion-dot {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 64%, transparent);
        animation: floatDot var(--speed) ease-in-out infinite alternate;
      }

      @keyframes floatDot {
        to {
          transform: translate3d(var(--x), var(--y), 0) scale(1.6);
          opacity: 0.38;
        }
      }

      .wall-caption {
        padding: 22px;
        border-top: 1px solid var(--line);
      }

      .wall-caption h3,
      .wall-stack h3 {
        margin: 0;
        font-size: 25px;
        line-height: 1.12;
      }

      .wall-caption p,
      .wall-stack p {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 13px;
      }

      .wall-stack {
        display: grid;
        gap: 12px;
      }

      .wall-stack article {
        min-height: 174px;
        display: grid;
        align-content: space-between;
        padding: 18px;
        transition:
          transform 200ms ease,
          background 200ms ease,
          border-color 200ms ease;
      }

      .wall-stack article:hover {
        transform: translateX(8px);
        border-color: color-mix(in srgb, var(--accent) 48%, transparent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
      }

      .wall-stack span {
        color: var(--accent);
        font-size: 11px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .showcase {
        position: relative;
        height: 420vh;
      }

      .showcase-sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        display: grid;
        align-items: center;
        overflow: hidden;
      }

      .showcase-track {
        display: flex;
        gap: 16px;
        width: max-content;
        will-change: transform;
        padding-left: max(16px, calc((100vw - 1200px) / 2));
        padding-right: 16px;
      }

      .project-card {
        position: relative;
        width: min(72vw, 720px);
        height: min(70svh, 560px);
        display: grid;
        align-content: space-between;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--card-accent) 26%, transparent), transparent 30%),
          linear-gradient(135deg, rgba(244, 241, 232, 0.1), rgba(244, 241, 232, 0.035));
        overflow: hidden;
      }

      .project-card::before {
        content: "";
        position: absolute;
        inset: 18px;
        border: 1px solid rgba(244, 241, 232, 0.1);
        border-radius: 8px;
      }

      .project-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(90deg, rgba(244, 241, 232, 0.08) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.08) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), black, transparent 46%);
        opacity: 0.8;
      }

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

      .project-top {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        color: var(--faint);
        font-size: 11px;
        font-weight: 780;
        text-transform: uppercase;
      }

      .project-card h3 {
        max-width: 560px;
        margin: 0;
        font-size: clamp(30px, 5vw, 66px);
        line-height: 0.94;
        font-weight: 860;
      }

      .project-card p {
        max-width: 520px;
        margin: 16px 0 0;
        color: var(--muted);
      }

      .project-index {
        width: 72px;
        height: 72px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: var(--paper);
        font-size: 22px;
        font-weight: 850;
      }

      .project-card img {
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 1;
        width: 44%;
        max-height: 46%;
        object-fit: cover;
        border: 1px solid var(--line);
        border-radius: 8px;
        filter: grayscale(0.35) contrast(1.12);
        opacity: 0.56;
      }

      .mouse-tools {
        position: relative;
        width: 100%;
        max-width: none;
        min-height: 100svh;
        margin: 0;
        overflow: hidden;
        isolation: isolate;
        background: #030405;
      }

      .mouse-tools-media,
      .mouse-tools-video,
      .mouse-tools-shade {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .mouse-tools-media {
        z-index: -3;
        overflow: hidden;
      }

      .mouse-tools-video {
        object-fit: cover;
        object-position: center;
        filter: saturate(0.86) contrast(1.08) brightness(0.86);
        transform: scale(1.015);
      }

      .mouse-tools-shade {
        background:
          linear-gradient(180deg, rgba(3, 4, 5, 0.78), transparent 23%, transparent 70%, rgba(3, 4, 5, 0.88)),
          linear-gradient(90deg, rgba(3, 4, 5, 0.18), transparent 42%, rgba(3, 4, 5, 0.56) 76%, rgba(3, 4, 5, 0.82)),
          radial-gradient(circle at 31% 42%, transparent 0 15%, rgba(3, 4, 5, 0.1) 42%, rgba(3, 4, 5, 0.58) 100%);
        pointer-events: none;
      }

      .mouse-tools-shell {
        position: relative;
        width: min(1480px, calc(100% - 128px));
        min-height: 100svh;
        margin: 0 auto;
      }

      .mouse-tools-head {
        position: absolute;
        top: clamp(78px, 9vh, 112px);
        left: 0;
        z-index: 12;
        display: grid;
        gap: 9px;
        pointer-events: none;
      }

      .mouse-tools-kicker {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--accent);
        font-size: 10px;
        font-weight: 860;
        text-transform: uppercase;
      }

      .mouse-tools-kicker::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 16px currentColor;
      }

      .mouse-tools-head h2 {
        max-width: 540px;
        margin: 0;
        font-size: clamp(26px, 3.1vw, 48px);
        line-height: 1;
        font-weight: 850;
      }

      .mouse-tools-stage {
        position: absolute;
        inset: 0;
        outline: none;
      }

      .mouse-tools-orbit {
        position: absolute;
        left: -2%;
        top: 20%;
        z-index: 8;
        width: 67%;
        height: 62%;
        cursor: ns-resize;
        outline: none;
      }

      .mouse-tools-orbit::before,
      .mouse-tools-orbit::after {
        content: "";
        position: absolute;
        left: 6%;
        top: 12%;
        width: 58%;
        height: 48%;
        border-top: 1px solid rgba(244, 241, 232, 0.1);
        border-radius: 50%;
        transform: rotate(-7deg);
        mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
        pointer-events: none;
      }

      .mouse-tools-orbit::after {
        left: 12%;
        top: 19%;
        width: 46%;
        height: 36%;
        border-color: color-mix(in srgb, var(--accent) 24%, transparent);
        filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 16%, transparent));
      }

      .mouse-tool-node {
        --mouse-x: 31%;
        --mouse-y: 38%;
        --mouse-scale: 1;
        --mouse-opacity: 1;
        --mouse-rotate: 0deg;
        --mouse-blur: 0px;
        position: absolute;
        left: var(--mouse-x);
        top: var(--mouse-y);
        z-index: var(--mouse-layer, 1);
        width: clamp(46px, 4.8vw, 72px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        opacity: var(--mouse-opacity);
        filter: blur(var(--mouse-blur));
        transform:
          translate(-50%, -50%)
          rotate(var(--mouse-rotate))
          scale(var(--mouse-scale));
        transition:
          left 680ms cubic-bezier(0.19, 1, 0.22, 1),
          top 680ms cubic-bezier(0.19, 1, 0.22, 1),
          transform 680ms cubic-bezier(0.19, 1, 0.22, 1),
          opacity 420ms ease,
          filter 320ms ease;
        will-change: left, top, transform, filter;
      }

      .mouse-tool-node[aria-hidden="true"] {
        pointer-events: none;
      }

      .mouse-tool-mark {
        position: relative;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--tool-color) 40%, rgba(255, 255, 255, 0.18));
        border-radius: 24%;
        background:
          radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.94), transparent 25%),
          linear-gradient(145deg, color-mix(in srgb, var(--tool-color) 82%, white), rgba(244, 241, 232, 0.9));
        box-shadow:
          0 18px 38px rgba(0, 0, 0, 0.4),
          0 0 34px color-mix(in srgb, var(--tool-color) 30%, transparent),
          inset 0 0 0 1px rgba(255, 255, 255, 0.24);
        transition:
          transform 280ms cubic-bezier(0.19, 1, 0.22, 1),
          box-shadow 280ms ease,
          filter 280ms ease;
      }

      .mouse-tool-mark img {
        width: 66%;
        height: 66%;
        display: block;
        object-fit: contain;
        filter: drop-shadow(0 9px 12px rgba(0, 0, 0, 0.28));
      }

      .mouse-tool-node[data-tool="jimeng"] img,
      .mouse-tool-node[data-tool="comfy"] img,
      .mouse-tool-node[data-tool="cursor"] img,
      .mouse-tool-node[data-tool="claude"] img {
        width: 72%;
        height: 72%;
      }

      .mouse-tool-node.is-active .mouse-tool-mark {
        box-shadow:
          0 24px 54px rgba(0, 0, 0, 0.52),
          0 0 58px color-mix(in srgb, var(--tool-color) 46%, transparent),
          inset 0 0 0 1px rgba(255, 255, 255, 0.3);
      }

      .mouse-tool-node:hover,
      .mouse-tool-node:focus-visible {
        z-index: 30;
        filter: none;
      }

      .mouse-tool-node:hover .mouse-tool-mark,
      .mouse-tool-node:focus-visible .mouse-tool-mark {
        transform: scale(1.4) translateY(-5px);
        filter: saturate(1.14) brightness(1.06);
        box-shadow:
          0 30px 72px rgba(0, 0, 0, 0.58),
          0 0 76px color-mix(in srgb, var(--tool-color) 55%, transparent),
          inset 0 0 0 1px rgba(255, 255, 255, 0.34);
      }

      .mouse-tools-orbit.is-shifting .mouse-tool-node:not(:hover) {
        filter: blur(calc(var(--mouse-blur) + 3px)) saturate(1.14);
      }

      .mouse-tools-focus {
        position: absolute;
        right: 2%;
        top: 42%;
        z-index: 12;
        width: min(360px, 29vw);
        display: grid;
        gap: 12px;
        padding: 20px 0;
        border-top: 1px solid rgba(244, 241, 232, 0.18);
        border-bottom: 1px solid rgba(244, 241, 232, 0.1);
      }

      .mouse-tools-focus-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        color: rgba(244, 241, 232, 0.46);
        font-size: 9px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .mouse-tools-focus h3 {
        margin: 0;
        font-size: clamp(34px, 4.2vw, 64px);
        line-height: 0.96;
        font-weight: 860;
      }

      .mouse-tools-focus p {
        margin: 0;
        color: rgba(244, 241, 232, 0.58);
        font-size: 12px;
        text-transform: uppercase;
      }

      .mouse-tools-open {
        width: max-content;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        color: var(--paper);
        font-size: 11px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .mouse-tools-open span {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--accent) 54%, transparent);
        border-radius: 50%;
        color: var(--accent);
        transition: transform 220ms ease, background 220ms ease;
      }

      .mouse-tools-open:hover span {
        transform: translateX(4px);
        background: color-mix(in srgb, var(--accent) 16%, transparent);
      }

      .mouse-tools-hint {
        position: absolute;
        left: 0;
        bottom: clamp(34px, 5vh, 58px);
        z-index: 12;
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(244, 241, 232, 0.46);
        font-size: 9px;
        font-weight: 820;
        text-transform: uppercase;
        pointer-events: none;
      }

      .mouse-tools-wheel {
        position: relative;
        width: 22px;
        height: 34px;
        border: 1px solid rgba(244, 241, 232, 0.35);
        border-radius: 12px;
      }

      .mouse-tools-wheel::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 7px;
        width: 2px;
        height: 7px;
        border-radius: 999px;
        background: var(--accent);
        transform: translateX(-50%);
        animation: mouseWheelCue 1.5s ease-in-out infinite;
      }

      @keyframes mouseWheelCue {
        0%, 100% { transform: translate(-50%, 0); opacity: 0.35; }
        45% { transform: translate(-50%, 9px); opacity: 1; }
      }

      @media (max-width: 980px) {
        .mouse-tools-shell {
          width: calc(100% - 32px);
        }

        .mouse-tools-orbit {
          width: 76%;
        }

        .mouse-tools-focus {
          right: 0;
          width: 28vw;
        }
      }

      @media (max-width: 680px) {
        .mouse-tools {
          min-height: 760px;
        }

        .mouse-tools-shell {
          width: calc(100% - 24px);
          min-height: 760px;
        }

        .mouse-tools-video {
          object-position: 36% center;
        }

        .mouse-tools-shade {
          background:
            linear-gradient(180deg, rgba(3, 4, 5, 0.86), transparent 25%, transparent 55%, rgba(3, 4, 5, 0.96) 78%),
            radial-gradient(circle at 42% 42%, transparent, rgba(3, 4, 5, 0.58) 78%);
        }

        .mouse-tools-head {
          top: 74px;
        }

        .mouse-tools-head h2 {
          max-width: 330px;
          font-size: 32px;
        }

        .mouse-tools-orbit {
          left: -8%;
          top: 24%;
          width: 108%;
          height: 46%;
          cursor: auto;
        }

        .mouse-tool-node {
          width: clamp(42px, 13vw, 58px);
        }

        .mouse-tools-focus {
          left: 0;
          right: auto;
          top: auto;
          bottom: 76px;
          width: 100%;
        }

        .mouse-tools-focus h3 {
          font-size: 38px;
        }

        .mouse-tools-hint {
          display: none;
        }
      }

      .contact {
        padding-top: 40px;
      }

      .contact-panel {
        min-height: 420px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: clamp(32px, 5vw, 72px);
        align-items: center;
        padding: clamp(28px, 4vw, 52px);
        border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
        border-radius: var(--radius);
        background:
          radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 36%),
          rgba(244, 241, 232, 0.055);
      }

      .contact-panel h2 {
        max-width: 720px;
        margin: 0;
        font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        font-size: clamp(28px, 3.2vw, 48px);
        line-height: 1.16;
        font-weight: 600;
        text-wrap: balance;
      }

      .contact-panel p {
        max-width: 620px;
        margin: 18px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.75;
      }

      .contact-list {
        display: grid;
        gap: 10px;
      }

      .contact-list a,
      .contact-list button {
        width: 100%;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--paper);
        background: rgba(8, 10, 10, 0.44);
        cursor: pointer;
      }

      .contact-list small {
        color: var(--faint);
      }

      .footer {
        width: min(1200px, calc(100% - 32px));
        margin: 0 auto;
        padding: 26px 0 42px;
        display: flex;
        justify-content: space-between;
        gap: 18px;
        border-top: 1px solid var(--line);
        color: var(--faint);
        font-size: 12px;
      }

      .mobile-section-nav {
        display: none;
      }

      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition:
          opacity 780ms ease,
          transform 780ms cubic-bezier(0.19, 1, 0.22, 1);
      }

      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.001ms !important;
        }
      }

      @media (max-width: 980px) {
        .cursor,
        .cursor-ribbon {
          display: none;
        }

        .topbar {
          grid-template-columns: auto auto;
        }

        .menu-btn {
          display: grid;
          justify-self: end;
        }

        .nav {
          position: fixed;
          top: 72px;
          left: 16px;
          right: 16px;
          display: none;
          grid-template-columns: 1fr;
          padding: 10px;
          border: 1px solid var(--line);
          border-radius: 10px;
          background: rgba(8, 10, 10, 0.94);
          backdrop-filter: blur(18px);
        }

        .topbar.is-open .nav {
          display: grid;
        }

        .hero-grid,
        .poster-shell,
        .command-shell,
        .about-profile-grid,
        .interaction-wall,
        .contact-panel {
          grid-template-columns: 1fr;
        }

        .story-article {
          grid-template-columns: 170px minmax(0, 1fr);
          gap: 46px;
        }

        .about-profile {
          min-height: auto;
          padding: 76px 0 78px;
        }

        .about-titlebar {
          align-items: start;
          flex-direction: column;
        }

        .about-portrait {
          min-height: 620px;
        }

        .about-play {
          left: 74%;
          width: 132px;
        }

        .about-path {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .about-path::before {
          display: none;
        }

        .command-shell {
          width: min(1200px, calc(100% - 32px));
          min-height: auto;
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          gap: 24px;
          padding: 42px 0 10px;
        }

        .command-copy,
        .command-stage,
        .command-rail,
        .command-ribbon {
          grid-row: auto;
        }

        .command-copy {
          max-width: 760px;
        }

        .command-stage {
          min-height: 620px;
          order: 2;
        }

        .command-person {
          width: min(58vw, 450px);
          max-height: 620px;
        }

        .command-stage::before {
          width: min(78vw, 640px);
        }

        .command-stage::after {
          width: min(52vw, 420px);
        }

        .command-copy {
          order: 1;
        }

        .command-rail {
          order: 3;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 12px;
        }

        .command-rail-head {
          grid-column: 1 / -1;
          max-width: 520px;
        }

        .command-signal {
          min-height: auto;
          padding: 14px 14px 14px 20px;
          border: 1px solid var(--line);
          border-radius: 8px;
          background: rgba(8, 10, 10, 0.54);
        }

        .command-ribbon {
          order: 4;
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .hero-copy,
        .hero-visual {
          min-height: auto;
        }

        .hero-copy {
          padding-top: 92px;
        }

        .hero-visual {
          min-height: 560px;
        }

        .poster-stage,
        .poster-panel {
          min-height: 560px;
        }

        .poster-map {
          inset: 128px 24px 82px;
        }

        .map-node {
          width: min(230px, 31%);
        }

        .map-output {
          width: min(520px, 82%);
        }

        .poster-orbit {
          width: min(78vw, 560px);
        }

        .section-head {
          grid-template-columns: 1fr;
        }

      }

      @media (max-width: 680px) {
        .topbar,
        .hero-grid,
        .poster-shell,
        .command-shell,
        .story-section,
        .section,
        .footer {
          width: min(100% - 24px, 1200px);
        }

        .brand-text {
          display: none;
        }

        .intro-copy {
          right: 20px;
          gap: 6px;
        }

        .intro-copy strong {
          font-size: clamp(24px, 8vw, 34px);
        }

        .intro-copy p {
          max-width: 300px;
          font-size: 13px;
        }

        .intro-trigger {
          width: clamp(188px, 62vw, 250px);
        }

        .intro-click-burst {
          width: 260px;
        }

        .intro-status {
          left: 20px;
          right: 20px;
          grid-template-columns: repeat(3, 1fr);
        }

        .intro-status div {
          min-width: 0;
        }

        .hero {
          padding-top: 96px;
        }

        .profile-hero {
          padding: 96px 0 28px;
        }

        .command-shell {
          padding: 20px 0 8px;
          gap: 18px;
        }

        .command-title {
          font-size: clamp(38px, 12vw, 58px);
        }

        .command-lede {
          font-size: 14px;
        }

        .command-actions {
          display: grid;
          grid-template-columns: 1fr;
          max-width: 360px;
        }

        .command-proof {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .command-proof article {
          min-height: 68px;
          padding: 10px 8px;
        }

        .command-proof strong {
          font-size: 22px;
        }

        .command-proof span {
          font-size: 9px;
        }

        .command-stage {
          min-height: 500px;
          margin-top: -6px;
        }

        .command-person {
          width: min(76vw, 320px);
          max-height: 470px;
        }

        .command-stage::before {
          width: 112vw;
        }

        .command-stage::after {
          width: 76vw;
        }

        .command-node {
          min-width: 116px;
          padding: 9px 10px;
        }

        .command-node strong {
          font-size: 18px;
        }

        .node-a {
          left: -2px;
          top: 7%;
        }

        .node-b {
          right: -2px;
          top: 14%;
        }

        .node-c {
          left: 0;
          bottom: 20%;
        }

        .node-d {
          right: 0;
          bottom: 12%;
        }

        .command-rail {
          grid-template-columns: 1fr;
        }

        .command-ribbon {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .story-section {
          padding: 68px 0 76px;
        }

        .story-portal {
          min-height: 650px;
          background-size: 52px 52px, 52px 52px, auto;
        }

        .story-portal-meta,
        .story-portal-foot {
          align-items: flex-start;
          grid-template-columns: 1fr;
          flex-direction: column;
          gap: 8px;
        }

        .story-portal-main {
          padding: 56px 0 64px;
        }

        .story-portal h2 {
          font-size: clamp(34px, 11vw, 48px);
        }

        .story-portal::before {
          right: -52%;
          width: 118vw;
          opacity: 0.54;
        }

        .story-open {
          width: 100%;
          justify-content: space-between;
        }

        .story-float-return {
          right: 14px;
          bottom: 16px;
          min-height: 50px;
          padding: 4px;
        }

        .story-float-ring {
          width: 42px;
          height: 42px;
        }

        .story-article {
          grid-template-columns: 1fr;
          gap: 46px;
          padding: 64px 0 82px;
        }

        .story-article-rail {
          position: relative;
          top: auto;
          grid-template-columns: 1fr;
        }

        .story-progress-track {
          width: 100%;
          min-height: 2px;
          height: 2px;
        }

        .story-progress-track span {
          width: calc(var(--story-progress) * 100%);
          height: 100%;
        }

        .story-article-rail div:last-child {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .story-article-rail strong,
        .story-article-rail small {
          grid-column: 1 / -1;
        }

        .story-copy-head {
          padding-bottom: 42px;
        }

        .story-chapter {
          padding: 44px 0 48px;
        }

        .story-chapter p {
          font-size: 16px;
          line-height: 1.85;
        }

        .about-profile {
          width: min(100% - 24px, 560px);
          padding: 58px 0 62px;
        }

        .about-profile::before {
          inset: 20px 0;
          border-radius: 14px;
          mask-image: none;
        }

        .about-titlebar h2 {
          font-size: clamp(36px, 14vw, 58px);
        }

        .about-portrait {
          min-height: 430px;
          border-radius: 16px;
        }

        .about-avatar {
          width: 100%;
          height: 100%;
          object-position: 50% 26%;
        }

        .about-play {
          width: 92px;
          left: 75%;
        }

        .about-play::before {
          border-top-width: 20px;
          border-bottom-width: 20px;
          border-left-width: 31px;
        }

        .about-info {
          gap: 20px;
        }

        .about-info h3 {
          font-size: clamp(36px, 15vw, 60px);
        }

        .about-meta,
        .about-path {
          grid-template-columns: 1fr;
        }

        .about-stats {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .about-stat--more {
          grid-column: span 2;
          min-height: 52px;
        }

        .about-meta div,
        .about-meta div:nth-child(odd) {
          border-right: 0;
        }

        .about-meta div:nth-last-child(2) {
          border-bottom: 1px solid rgba(244, 241, 232, 0.08);
        }

        .poster-stage {
          min-height: auto;
          padding: 20px 16px 18px;
        }

        .poster-panel {
          min-height: auto;
        }

        .poster-title {
          position: relative;
          left: auto;
          right: auto;
          top: auto;
          margin-bottom: 18px;
        }

        .poster-title h1 {
          font-size: clamp(28px, 8.8vw, 34px);
        }

        .poster-title::before {
          inset: -10px -12px -12px;
        }

        .poster-orbit,
        .poster-core {
          display: none;
        }

        .poster-map {
          position: relative;
          inset: auto;
          display: grid;
          gap: 10px;
          place-items: stretch;
        }

        .map-line {
          display: none;
        }

        .map-center {
          width: 100%;
          height: auto;
          min-height: 92px;
          border-radius: 8px;
        }

        .map-node {
          position: relative;
          left: auto;
          right: auto;
          top: auto;
          bottom: auto;
          width: auto;
          min-height: auto;
        }

        .map-output {
          position: relative;
          left: auto;
          bottom: auto;
          width: 100%;
          transform: none;
          grid-template-columns: 1fr;
        }

        .poster-core {
          width: 72px;
          height: 72px;
        }

        .poster-chip {
          display: none;
        }

        .poster-footer {
          grid-template-columns: 1fr;
        }

        .poster-footer div {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .poster-footer div:last-child {
          border-bottom: 0;
        }

        .hero-title {
          font-size: clamp(30px, 10vw, 44px);
        }

        .hero-visual {
          min-height: 500px;
        }

        .visual-tile {
          width: 42%;
        }

        .mini-stats {
          grid-template-columns: 1fr;
        }

        .showcase {
          height: auto;
        }

        .showcase-sticky {
          position: relative;
          height: auto;
          padding: 0 0 70px;
          overflow: visible;
        }

        .showcase-track {
          width: min(100% - 24px, 1200px);
          margin: 0 auto;
          padding: 0;
          display: grid;
          grid-template-columns: 1fr;
        }

        .project-card {
          width: 100%;
          height: auto;
          min-height: 470px;
        }

        .project-card img {
          width: 58%;
          max-height: 34%;
        }

        .contact-panel {
          min-height: auto;
        }

        .footer {
          flex-direction: column;
        }
      }

      /* Spatial hero: fewer objects, stronger depth, calmer motion. */
      .site .topbar {
        top: 0;
        width: min(1380px, calc(100% - 56px));
        grid-template-columns: auto minmax(0, 1fr);
        gap: 36px;
        padding: 20px 0 15px;
        border: 0;
        border-bottom: 1px solid rgba(244, 241, 232, 0.09);
        border-radius: 0;
        background: linear-gradient(180deg, rgba(5, 6, 6, 0.86), rgba(5, 6, 6, 0.38) 72%, transparent);
        backdrop-filter: blur(12px);
      }

      .site .brand {
        gap: 12px;
      }

      .site .brand-mark {
        width: 32px;
        height: 32px;
        border: 1px solid rgba(244, 241, 232, 0.2);
        border-radius: 4px;
        color: var(--paper);
        background: rgba(244, 241, 232, 0.035);
        font-size: 12px;
      }

      .site .brand-text {
        gap: 4px;
      }

      .site .brand-text strong {
        font-size: 11px;
        letter-spacing: 0;
      }

      .site .brand-text span {
        font-size: 8px;
        letter-spacing: 0.08em;
      }

      .site .nav {
        justify-content: flex-end;
        gap: clamp(12px, 2.1vw, 30px);
      }

      .site .nav a {
        position: relative;
        min-height: 32px;
        padding: 7px 0;
        border-radius: 0;
        color: rgba(244, 241, 232, 0.48);
        font-size: 11px;
        font-weight: 650;
        background: transparent;
      }

      .site .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: 1px;
        height: 1px;
        background: var(--accent);
        transition: right 260ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .site .nav a:hover,
      .site .nav a.is-active {
        color: var(--paper);
        background: transparent;
      }

      .site .nav a:hover::after,
      .site .nav a.is-active::after {
        right: 0;
      }

      .profile-hero {
        min-height: min(920px, 94svh);
        padding: 78px 0 20px;
        background:
          radial-gradient(ellipse at calc(68% + (var(--mx, 0.5) - 0.5) * 5%) calc(46% + (var(--my, 0.5) - 0.5) * 4%), color-mix(in srgb, var(--accent) 11%, transparent), transparent 25%),
          radial-gradient(ellipse at 14% 18%, rgba(78, 126, 128, 0.065), transparent 30%),
          linear-gradient(180deg, #060707 0%, #050606 76%, #080909 100%);
      }

      .profile-hero::before {
        inset: -32% -18%;
        background:
          radial-gradient(ellipse at 67% 48%, transparent 0 20%, rgba(var(--accent-rgb), 0.08) 20.2% 20.45%, transparent 20.8% 29%, rgba(244, 241, 232, 0.045) 29.2% 29.4%, transparent 29.8%),
          conic-gradient(from 225deg at 67% 48%, transparent 0 32deg, rgba(var(--accent-rgb), 0.11) 48deg, transparent 83deg 218deg, rgba(95, 142, 143, 0.055) 246deg, transparent 286deg);
        filter: blur(12px);
        opacity: 0.9;
        transform: translate(calc((var(--mx, 0.5) - 0.5) * -24px), calc((var(--my, 0.5) - 0.5) * -18px));
        animation: commandAtmosphere 18s ease-in-out infinite alternate;
      }

      .profile-hero::after {
        background-image:
          linear-gradient(90deg, rgba(244, 241, 232, 0.025) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.02) 1px, transparent 1px);
        background-size: 118px 118px;
        mask-image: radial-gradient(ellipse at 65% 50%, black 0%, transparent 68%);
        opacity: 0.45;
      }

      .command-bg {
        opacity: 0.7;
      }

      .command-beam {
        left: 67%;
        top: 50%;
        width: min(70vw, 1040px);
        opacity: 0.13;
        background: linear-gradient(90deg, transparent, rgba(244, 241, 232, 0.5), transparent);
      }

      .command-shell {
        width: min(1380px, calc(100% - 72px));
        min-height: calc(min(920px, 94svh) - 108px);
        grid-template-columns: minmax(390px, 0.82fr) minmax(520px, 1.18fr);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: clamp(54px, 7vw, 116px);
        perspective: 1800px;
      }

      .command-shell::before {
        inset: 13% -4% 4% 38%;
        border-radius: 50%;
        background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.11), rgba(116, 144, 143, 0.025) 42%, transparent 70%);
        filter: blur(62px);
        opacity: 0.72;
        transform: translate(calc((var(--mx, 0.5) - 0.5) * 24px), calc((var(--my, 0.5) - 0.5) * 18px));
      }

      .command-shell::after {
        left: 36%;
        right: -6%;
        bottom: 4%;
        height: 18%;
        background:
          linear-gradient(rgba(244, 241, 232, 0.055) 1px, transparent 1px),
          linear-gradient(90deg, rgba(244, 241, 232, 0.045) 1px, transparent 1px);
        background-size: 84px 34px;
        opacity: 0.28;
      }

      .command-copy {
        align-self: center;
        max-width: 560px;
        gap: 24px;
        padding-bottom: 2vh;
      }

      .command-kicker {
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: rgba(244, 241, 232, 0.46);
        background: transparent;
        backdrop-filter: none;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .command-kicker::before {
        display: none;
      }

      .command-kicker i {
        width: 28px;
        height: 1px;
        background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.12));
        box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.28);
      }

      .command-title {
        max-width: 590px;
        font-size: clamp(44px, 4.65vw, 70px);
        line-height: 0.98;
        font-weight: 820;
        letter-spacing: 0;
      }

      .command-title .accent {
        color: var(--accent);
        text-shadow: 0 0 42px rgba(var(--accent-rgb), 0.2);
      }

      .command-title .subline {
        color: rgba(244, 241, 232, 0.92);
      }

      .command-lede {
        max-width: 510px;
        color: rgba(244, 241, 232, 0.57);
        font-size: clamp(14px, 1.15vw, 16px);
        line-height: 1.8;
      }

      .command-actions {
        gap: 24px;
        align-items: center;
        margin-top: 2px;
      }

      .command-primary {
        min-height: 48px;
        padding: 11px 18px;
        border: 1px solid rgba(244, 241, 232, 0.72);
        border-radius: 4px;
        color: #080909;
        background: var(--paper);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
        font-size: 13px;
        font-weight: 720;
      }

      .command-secondary {
        min-height: 40px;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid rgba(244, 241, 232, 0.2);
        border-radius: 0;
        color: rgba(244, 241, 232, 0.7);
        background: transparent;
        backdrop-filter: none;
        font-size: 12px;
        font-weight: 650;
      }

      .command-primary svg,
      .command-secondary svg {
        width: 18px;
        height: 18px;
      }

      .command-secondary:hover {
        border-color: var(--accent);
        background: transparent;
      }

      .command-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        margin-top: clamp(20px, 4vh, 44px);
        color: rgba(244, 241, 232, 0.28);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .command-meta span {
        position: relative;
      }

      .command-meta span + span::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 50%;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background: var(--accent);
      }

      .command-stage {
        min-height: min(72svh, 700px);
        align-self: center;
        transform-style: preserve-3d;
      }

      .command-stage::before {
        width: min(48vw, 690px);
        background:
          conic-gradient(from 214deg, transparent 0 28deg, rgba(var(--accent-rgb), 0.46) 43deg, transparent 76deg 188deg, rgba(244, 241, 232, 0.13) 211deg, transparent 238deg 326deg, rgba(83, 133, 134, 0.13) 342deg, transparent 358deg);
        opacity: 0.7;
        filter: drop-shadow(0 0 46px rgba(var(--accent-rgb), 0.13));
        animation: commandRotate 38s linear infinite;
      }

      .command-stage::after {
        top: 49%;
        width: min(31vw, 440px);
        border-color: rgba(244, 241, 232, 0.12);
        box-shadow:
          0 0 0 108px rgba(244, 241, 232, 0.014),
          0 0 0 206px rgba(244, 241, 232, 0.006),
          inset 0 0 72px rgba(var(--accent-rgb), 0.065);
        opacity: 0.72;
      }

      .command-scan {
        width: min(50vw, 720px);
        border: 1px solid rgba(244, 241, 232, 0.09);
        background: none;
        mask-image: none;
        opacity: 0.72;
        transform: translate(-50%, -50%) rotateX(64deg) rotateZ(calc(8deg + (var(--mx, 0.5) - 0.5) * 10deg));
        transition: transform 220ms ease-out;
      }

      .command-scan::before,
      .command-scan::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
      }

      .command-scan::before {
        inset: 12%;
        border: 1px solid rgba(var(--accent-rgb), 0.16);
      }

      .command-scan::after {
        inset: 29%;
        border: 1px dashed rgba(244, 241, 232, 0.12);
        animation: commandRotate 22s linear infinite reverse;
      }

      .command-floor {
        left: 6%;
        right: 6%;
        bottom: 1%;
        height: 22%;
        background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.14), transparent 62%);
        opacity: 0.52;
      }

      .command-person {
        width: min(36vw, 500px);
        max-height: min(75svh, 700px);
        filter:
          drop-shadow(0 50px 70px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 36px rgba(var(--accent-rgb), 0.1));
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 22px), calc((var(--my, 0.5) - 0.5) * 15px), 34px)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -4deg))
          scale(1.01);
        transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 220ms ease;
      }

      .command-stage:hover .command-person {
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 26px), calc((var(--my, 0.5) - 0.5) * 18px), 42px)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -5deg))
          scale(1.035);
        filter:
          drop-shadow(0 56px 76px rgba(0, 0, 0, 0.72))
          drop-shadow(0 0 42px rgba(var(--accent-rgb), 0.15));
      }

      .command-coordinate {
        position: absolute;
        z-index: 7;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(244, 241, 232, 0.34);
        font-size: 8px;
        font-weight: 720;
        letter-spacing: 0;
        transform: translate3d(calc((var(--mx, 0.5) - 0.5) * var(--depth-x, 8px)), calc((var(--my, 0.5) - 0.5) * var(--depth-y, 8px)), 0);
        transition: color 180ms ease;
      }

      .command-coordinate i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.46);
      }

      .coordinate-a {
        --depth-x: -16px;
        --depth-y: -12px;
        left: 8%;
        top: 24%;
      }

      .coordinate-b {
        --depth-x: 13px;
        --depth-y: -9px;
        right: 4%;
        top: 38%;
      }

      .coordinate-c {
        --depth-x: -10px;
        --depth-y: 12px;
        left: 14%;
        bottom: 19%;
      }

      .command-scroll {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        align-items: center;
        gap: 14px;
        padding-bottom: 6px;
        color: rgba(244, 241, 232, 0.25);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .command-scroll i {
        width: 70px;
        height: 1px;
        overflow: hidden;
        background: rgba(244, 241, 232, 0.09);
      }

      .command-scroll i::after {
        content: "";
        display: block;
        width: 36%;
        height: 100%;
        background: var(--accent);
        animation: heroScrollSignal 2.4s ease-in-out infinite;
      }

      @keyframes heroScrollSignal {
        0% { transform: translateX(-110%); opacity: 0; }
        25%, 72% { opacity: 1; }
        100% { transform: translateX(320%); opacity: 0; }
      }

      /* The selected ring gate now shares the site's warm graphite palette. */
      .gate-chamber[data-gate-version="biometric"] {
        background:
          radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), 0.065), transparent 28%),
          radial-gradient(ellipse at 50% 112%, rgba(244, 241, 232, 0.035), transparent 46%),
          #050606;
      }

      .gate-chamber[data-gate-version="biometric"]::before {
        background:
          repeating-radial-gradient(circle at 50% 50%, transparent 0 84px, rgba(244, 241, 232, 0.035) 85px 86px),
          conic-gradient(from 90deg at 50% 50%, transparent, rgba(var(--accent-rgb), 0.045), transparent 28%, transparent 72%, rgba(101, 143, 143, 0.035), transparent);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-seam {
        background: linear-gradient(180deg, transparent, rgba(244, 241, 232, 0.72) 26% 74%, transparent);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.18), 0 0 48px rgba(244, 241, 232, 0.05);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-wrap::before {
        background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.12) 28%, rgba(244, 241, 232, 0.44) 50%, rgba(var(--accent-rgb), 0.12) 72%, transparent);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-wrap::after {
        border-color: rgba(var(--accent-rgb), 0.34);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold {
        border-color: rgba(244, 241, 232, 0.14);
        background:
          radial-gradient(circle at 50% 38%, rgba(var(--accent-rgb), 0.075), transparent 30%),
          radial-gradient(circle, rgba(16, 14, 13, 0.98), rgba(6, 7, 7, 0.99) 72%);
        box-shadow:
          0 34px 92px rgba(0, 0, 0, 0.68),
          0 0 76px rgba(var(--accent-rgb), 0.045),
          inset 0 0 42px rgba(244, 241, 232, 0.035);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold::before {
        border-color: rgba(244, 241, 232, 0.075);
        background:
          radial-gradient(circle at 46% 42%, rgba(var(--accent-rgb), calc(0.02 + var(--hold-progress) * 0.065)), transparent 34%),
          rgba(3, 4, 4, 0.32);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-ring {
        background: conic-gradient(
          from -90deg,
          rgba(var(--accent-rgb), 0.16) 0,
          rgba(244, 241, 232, 0.96) calc(var(--hold-progress) * 1turn),
          rgba(var(--accent-rgb), 0.06) calc(var(--hold-progress) * 1turn),
          rgba(244, 241, 232, 0.055) 1turn
        );
        box-shadow: 0 0 calc(8px + var(--hold-progress) * 26px) rgba(var(--accent-rgb), calc(0.045 + var(--hold-progress) * 0.15));
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-ring::before {
        background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.035), transparent 40%), #080909;
        box-shadow: inset 0 0 34px rgba(244, 241, 232, 0.035);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-ring::after {
        background: #f4f1e8;
        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.92), 0 0 28px rgba(var(--accent-rgb), 0.4);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-orbit {
        border-color: rgba(244, 241, 232, 0.08);
        border-right-color: rgba(var(--accent-rgb), 0.38);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-orbit::before,
      .gate-chamber[data-gate-version="biometric"] .gate-hold-copy small::before {
        background: var(--accent);
        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-ticks {
        background: repeating-conic-gradient(from -90deg, rgba(244, 241, 232, 0.5) 0 1deg, transparent 1deg 12deg);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-scan {
        border-color: rgba(var(--accent-rgb), 0.05);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-scan::before {
        background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.68), transparent);
        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.24);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-core {
        background:
          radial-gradient(circle at 38% 34%, rgba(244, 241, 232, 0.18), transparent 26%),
          radial-gradient(circle at 58% 66%, rgba(var(--accent-rgb), 0.13), transparent 54%);
        box-shadow: 0 0 38px rgba(var(--accent-rgb), calc(0.04 + var(--hold-progress) * 0.1));
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-copy small {
        color: rgba(244, 241, 232, 0.38);
      }

      .gate-chamber[data-gate-version="biometric"].is-holding .gate-hold {
        border-color: rgba(var(--accent-rgb), 0.28);
        box-shadow:
          0 36px 96px rgba(0, 0, 0, 0.72),
          0 0 calc(72px + var(--hold-progress) * 54px) rgba(var(--accent-rgb), calc(0.05 + var(--hold-progress) * 0.08)),
          inset 0 0 48px rgba(244, 241, 232, 0.055);
      }

      @media (max-width: 980px) and (min-width: 681px) {
        .site .topbar {
          width: calc(100% - 36px);
          grid-template-columns: auto auto;
        }

        .command-shell {
          width: calc(100% - 42px);
          min-height: calc(min(900px, 94svh) - 100px);
          grid-template-columns: minmax(300px, 0.88fr) minmax(350px, 1.12fr);
          gap: 26px;
          padding: 0;
        }

        .command-copy,
        .command-stage {
          grid-row: 1;
          order: initial;
        }

        .command-title {
          font-size: clamp(42px, 6.4vw, 58px);
        }

        .command-stage {
          min-height: min(68svh, 620px);
        }

        .command-person {
          width: min(43vw, 430px);
        }

        .command-stage::before {
          width: min(58vw, 600px);
        }

        .command-stage::after {
          width: min(38vw, 380px);
        }

        .command-scroll {
          grid-row: 2;
        }
      }

      @media (max-width: 680px) {
        .site .topbar {
          top: 0;
          width: calc(100% - 28px);
          grid-template-columns: auto auto;
          padding: 14px 0 11px;
        }

        .site .nav {
          top: 62px;
          justify-content: stretch;
          gap: 0;
        }

        .site .nav a {
          padding: 10px 12px;
        }

        .profile-hero {
          min-height: max(760px, 96svh);
          padding: 66px 0 12px;
        }

        .command-shell {
          width: calc(100% - 28px);
          min-height: calc(max(760px, 96svh) - 78px);
          grid-template-columns: 1fr;
          grid-template-rows: auto minmax(350px, 1fr) auto;
          gap: 0;
          padding: 32px 0 8px;
        }

        .command-copy {
          grid-row: 1;
          align-self: start;
          max-width: 520px;
          gap: 16px;
          padding: 0;
        }

        .command-title {
          font-size: clamp(39px, 12vw, 52px);
        }

        .command-lede {
          max-width: 430px;
          font-size: 13px;
          line-height: 1.7;
        }

        .command-actions {
          display: flex;
          grid-template-columns: none;
          gap: 18px;
        }

        .command-primary {
          min-height: 44px;
          padding: 9px 14px;
        }

        .command-meta {
          display: none;
        }

        .command-stage {
          grid-row: 2;
          min-height: 390px;
          margin-top: -6px;
          order: initial;
        }

        .command-person {
          width: min(72vw, 330px);
          max-height: 420px;
        }

        .command-stage::before {
          width: 112vw;
        }

        .command-stage::after {
          width: 70vw;
        }

        .command-scan {
          width: 105vw;
        }

        .coordinate-b,
        .coordinate-c {
          display: none;
        }

        .coordinate-a {
          left: 3%;
          top: 27%;
        }

        .command-scroll {
          grid-row: 3;
          padding: 0;
        }
      }

      /* Floating glass navigation, refined to stay quiet over the spatial hero. */
      .site .topbar {
        top: 18px;
        width: min(1240px, calc(100% - 40px));
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 18px;
        padding: 8px 10px;
        border: 1px solid rgba(244, 241, 232, 0.12);
        overflow: hidden;
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(24, 25, 24, 0.64), rgba(8, 10, 10, 0.54)),
          rgba(8, 10, 10, 0.48);
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.045),
          inset 0 -1px 0 rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(34px) saturate(1.22) contrast(1.03);
        isolation: isolate;
      }

      .site .topbar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        opacity: 0.18;
        background-image:
          radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.24) 0 0.6px, transparent 0.9px),
          radial-gradient(circle at 72% 64%, rgba(255, 255, 255, 0.16) 0 0.5px, transparent 0.8px);
        background-size: 9px 9px, 13px 13px;
        mask-image: linear-gradient(180deg, black, transparent 88%);
        pointer-events: none;
      }

      .site .topbar::after {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: 0;
        width: auto;
        height: auto;
        border-radius: 7px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-left: 1px solid rgba(255, 255, 255, 0.025);
        pointer-events: none;
      }

      .site .topbar > .brand,
      .site .topbar > .nav,
      .site .topbar > .topbar-actions {
        position: relative;
        z-index: 1;
      }

      .site .brand {
        gap: 10px;
        padding-right: 4px;
      }

      .site .brand-mark {
        width: 38px;
        height: 38px;
        border: 1px solid rgba(244, 241, 232, 0.62);
        border-radius: 6px;
        color: #080909;
        background: linear-gradient(145deg, #f7f4ec, #d9d6ce);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
        font-size: 13px;
      }

      .site .brand-text strong {
        color: rgba(244, 241, 232, 0.92);
        font-size: 11px;
      }

      .site .brand-text span {
        color: rgba(244, 241, 232, 0.34);
        font-size: 8px;
      }

      .site .nav {
        justify-content: center;
        gap: 3px;
      }

      .site .nav a {
        min-height: 36px;
        padding: 9px 13px;
        border: 1px solid transparent;
        border-radius: 6px;
        color: rgba(244, 241, 232, 0.48);
        background: transparent;
        font-size: 11px;
        transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
      }

      .site .nav a::after {
        display: none;
      }

      .site .nav a:hover {
        color: rgba(244, 241, 232, 0.82);
        border-color: rgba(244, 241, 232, 0.07);
        background: rgba(244, 241, 232, 0.035);
      }

      .site .nav a.is-active {
        color: var(--paper);
        border-color: color-mix(in srgb, var(--accent) 18%, rgba(244, 241, 232, 0.07));
        background:
          radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%),
          linear-gradient(180deg, rgba(244, 241, 232, 0.09), rgba(244, 241, 232, 0.045));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.055),
          0 8px 22px rgba(0, 0, 0, 0.14);
      }

      .topbar-actions {
        display: flex;
        align-items: center;
        justify-self: end;
        gap: 7px;
      }

      .theme-switch {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 3px;
        border: 1px solid rgba(244, 241, 232, 0.1);
        border-radius: 7px;
        background:
          linear-gradient(180deg, rgba(244, 241, 232, 0.065), rgba(244, 241, 232, 0.025)),
          rgba(4, 6, 6, 0.28);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.04),
          0 8px 22px rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(16px);
      }

      .swatch {
        position: relative;
        width: 27px;
        height: 27px;
        padding: 0;
        border: 1px solid rgba(244, 241, 232, 0.09);
        border-radius: 5px;
        background: var(--swatch);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.22),
          inset 0 -6px 12px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
      }

      .swatch::after {
        content: "";
        position: absolute;
        inset: 4px;
        border: 1px solid transparent;
        border-radius: 2px;
        transition: border-color 180ms ease;
      }

      .swatch:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }

      .swatch.is-active {
        border-color: rgba(244, 241, 232, 0.78);
        box-shadow:
          0 0 0 2px rgba(244, 241, 232, 0.07),
          0 0 18px color-mix(in srgb, var(--swatch) 24%, transparent),
          inset 0 1px 0 rgba(255, 255, 255, 0.28);
      }

      .swatch.is-active::after {
        border-color: rgba(7, 8, 8, 0.34);
      }

      @media (max-width: 980px) {
        .site .topbar {
          top: 12px;
          width: calc(100% - 32px);
          grid-template-columns: auto auto;
          padding: 8px;
        }

        .site .topbar::after {
          display: block;
        }

        .site .nav {
          top: 76px;
          left: 16px;
          right: 16px;
          gap: 2px;
          padding: 8px;
          border: 1px solid rgba(244, 241, 232, 0.12);
          border-radius: 9px;
          background: rgba(8, 10, 10, 0.86);
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
          backdrop-filter: blur(26px) saturate(1.1);
        }

        .site .nav a {
          justify-content: flex-start;
          padding: 10px 12px;
        }

        .theme-switch {
          gap: 3px;
          padding: 3px;
        }

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

      @media (max-width: 680px) {
        .site .topbar {
          top: 10px;
          width: calc(100% - 24px);
        }

        .site .brand-mark {
          width: 36px;
          height: 36px;
        }

        .site .nav {
          top: 70px;
          left: 12px;
          right: 12px;
        }

        .theme-switch {
          border-radius: 6px;
        }

        .swatch {
          width: 22px;
          height: 22px;
          border-radius: 4px;
        }
      }

      /* Clear frosted glass: visible background transmission with refracted edges. */
      .site .topbar {
        border: 1px solid transparent;
        border-radius: 15px;
        background:
          linear-gradient(180deg, rgba(24, 27, 27, 0.34), rgba(7, 9, 9, 0.22)) padding-box,
          linear-gradient(112deg, rgba(255, 255, 255, 0.34), rgba(var(--accent-rgb), 0.22) 22%, rgba(255, 255, 255, 0.055) 55%, rgba(255, 255, 255, 0.19)) border-box;
        box-shadow:
          0 24px 72px rgba(0, 0, 0, 0.22),
          inset 0 1px 0 rgba(255, 255, 255, 0.075),
          inset 0 -1px 0 rgba(0, 0, 0, 0.13);
        -webkit-backdrop-filter: blur(32px) saturate(1.28);
        backdrop-filter: blur(32px) saturate(1.28);
      }

      .site .topbar::before {
        opacity: 0.13;
        background-image:
          radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.27) 0 0.55px, transparent 0.85px),
          radial-gradient(circle at 72% 64%, rgba(255, 255, 255, 0.18) 0 0.45px, transparent 0.75px),
          linear-gradient(106deg, rgba(255, 255, 255, 0.07), transparent 24% 78%, rgba(var(--accent-rgb), 0.035));
      }

      .site .topbar::after {
        inset: 1px;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(108deg, rgba(255, 255, 255, 0.075), transparent 28% 72%, rgba(255, 255, 255, 0.035));
        opacity: 0.8;
      }

      .site .nav a {
        border-radius: 9px;
      }

      .theme-switch {
        gap: 5px;
        padding: 4px;
        border-color: rgba(244, 241, 232, 0.13);
        border-radius: 11px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
          rgba(7, 9, 9, 0.18);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.055),
          0 10px 28px rgba(0, 0, 0, 0.12);
        -webkit-backdrop-filter: blur(20px) saturate(1.2);
        backdrop-filter: blur(20px) saturate(1.2);
      }

      .swatch {
        width: 31px;
        height: 31px;
        border-radius: 50%;
      }

      .swatch::after {
        inset: 5px;
        border-radius: 50%;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold {
        width: 236px;
        height: 236px;
        min-height: 236px;
        border: 1px solid transparent;
        background:
          radial-gradient(circle at 42% 28%, rgba(255, 255, 255, 0.09), transparent 32%) padding-box,
          rgba(5, 7, 7, 0.42) padding-box,
          linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(var(--accent-rgb), 0.22) 28%, rgba(255, 255, 255, 0.045) 58%, rgba(255, 255, 255, 0.17)) border-box;
        box-shadow:
          0 38px 106px rgba(0, 0, 0, 0.56),
          0 0 96px rgba(var(--accent-rgb), 0.045),
          inset 0 1px 0 rgba(255, 255, 255, 0.075),
          inset 0 -26px 58px rgba(0, 0, 0, 0.23);
        -webkit-backdrop-filter: blur(30px) saturate(1.16);
        backdrop-filter: blur(30px) saturate(1.16);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold::before {
        inset: 25px;
        border-color: rgba(244, 241, 232, 0.065);
        background:
          radial-gradient(circle at 44% 35%, rgba(255, 255, 255, 0.055), transparent 35%),
          radial-gradient(circle, rgba(var(--accent-rgb), calc(0.012 + var(--hold-progress) * 0.055)), transparent 68%);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-ring::after {
        transform: rotate(calc(-90deg + var(--hold-progress) * 360deg)) translateY(-110px);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-bio-orbit {
        inset: -25px;
        border-color: rgba(244, 241, 232, 0.075);
        border-right-color: rgba(var(--accent-rgb), 0.3);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-core {
        width: 98px;
        opacity: calc(0.12 + var(--hold-progress) * 0.32);
      }

      /* Keep idle motion local to the ring so glass layers do not flicker on recomposition. */
      .gate-chamber[data-gate-version="biometric"]::before {
        animation: none;
        transform: none;
      }

      .gate-chamber[data-gate-version="biometric"]::after {
        display: none;
        animation: none;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-panel::before {
        animation: none;
        opacity: 0.18;
        transform: none;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold {
        animation: none;
        filter: none;
        isolation: isolate;
        will-change: transform;
        background:
          radial-gradient(circle at 42% 28%, rgba(255, 255, 255, 0.075), transparent 32%) padding-box,
          rgba(5, 7, 7, 0.86) padding-box,
          linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(var(--accent-rgb), 0.2) 28%, rgba(255, 255, 255, 0.04) 58%, rgba(255, 255, 255, 0.14)) border-box;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold:hover {
        transform: none;
        border-color: rgba(var(--accent-rgb), 0.24);
      }

      @media (max-width: 980px) {
        .site .topbar {
          border-radius: 13px;
        }

        .site .topbar::after {
          border-radius: 12px;
        }

        .swatch {
          width: 26px;
          height: 26px;
          border-radius: 50%;
        }
      }

      @media (max-width: 680px) {
        .theme-switch {
          gap: 3px;
          padding: 3px;
          border-radius: 10px;
        }

        .swatch {
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }

        .gate-chamber[data-gate-version="biometric"] .gate-hold {
          width: 210px;
          height: 210px;
          min-height: 210px;
        }

        .gate-chamber[data-gate-version="biometric"] .gate-hold-ring::after {
          transform: rotate(calc(-90deg + var(--hold-progress) * 360deg)) translateY(-97px);
        }
      }

      /* Interactive hero field: motion stays concentrated around the portrait. */
      .hero-fx-canvas,
      .hero-reactive-light {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .hero-fx-canvas {
        z-index: 0;
        width: 100%;
        height: 100%;
        opacity: 0.9;
        mix-blend-mode: screen;
      }

      .hero-reactive-light {
        z-index: 0;
        inset: -12%;
        opacity: 0.68;
        background:
          radial-gradient(ellipse 24% 38% at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), rgba(var(--accent-rgb), 0.2), transparent 72%),
          linear-gradient(112deg, transparent 28%, rgba(244, 241, 232, 0.025) 48%, transparent 68%);
        filter: blur(26px);
        mix-blend-mode: screen;
        transform: translate3d(calc((var(--mx, 0.5) - 0.5) * 24px), calc((var(--my, 0.5) - 0.5) * 18px), 0);
        transition: opacity 360ms ease;
      }

      .profile-hero .command-bg {
        z-index: 1;
      }

      .profile-hero .command-shell {
        z-index: 3;
      }

      .command-hologram {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 3;
        width: min(53vw, 760px);
        aspect-ratio: 1;
        pointer-events: none;
        transform-style: preserve-3d;
        transform:
          translate3d(calc(-50% + (var(--mx, 0.5) - 0.5) * 26px), calc(-50% + (var(--my, 0.5) - 0.5) * 18px), -12px)
          rotateX(calc(4deg + (var(--my, 0.5) - 0.5) * -6deg))
          rotateY(calc((var(--mx, 0.5) - 0.5) * 7deg));
        transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
        filter: drop-shadow(0 0 38px rgba(var(--accent-rgb), 0.12));
      }

      .holo-ring,
      .holo-sweep {
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
      }

      .holo-ring {
        aspect-ratio: 1;
        background: conic-gradient(
          from 20deg,
          transparent 0 8%,
          rgba(var(--accent-rgb), 0.58) 10%,
          transparent 13% 40%,
          rgba(244, 241, 232, 0.2) 43%,
          transparent 47% 72%,
          rgba(var(--accent-rgb), 0.24) 75%,
          transparent 79% 100%
        );
        -webkit-mask: radial-gradient(circle, transparent 0 93.8%, #000 94.2% 100%);
        mask: radial-gradient(circle, transparent 0 93.8%, #000 94.2% 100%);
      }

      .holo-ring-a {
        width: 100%;
        opacity: 0.72;
        animation: heroHoloA 18s linear infinite;
      }

      .holo-ring-b {
        width: 78%;
        opacity: 0.52;
        animation: heroHoloB 13s linear infinite reverse;
      }

      .holo-ring-c {
        width: 53%;
        opacity: 0.36;
        animation: heroHoloC 9s linear infinite;
      }

      .holo-sweep {
        width: 88%;
        aspect-ratio: 1;
        opacity: 0.42;
        background: conic-gradient(from 0deg, transparent 0 82%, rgba(var(--accent-rgb), 0.22) 92%, transparent 100%);
        -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 25% 68%, transparent 69%);
        mask: radial-gradient(circle, transparent 0 24%, #000 25% 68%, transparent 69%);
        animation: heroSweep 7.8s linear infinite;
      }

      @keyframes heroHoloA {
        from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0deg); }
        to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); }
      }

      @keyframes heroHoloB {
        from { transform: translate(-50%, -50%) rotateY(66deg) rotateZ(18deg); }
        to { transform: translate(-50%, -50%) rotateY(66deg) rotateZ(378deg); }
      }

      @keyframes heroHoloC {
        from { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(42deg); }
        to { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(402deg); }
      }

      @keyframes heroSweep {
        to { transform: translate(-50%, -50%) rotate(360deg); }
      }

      .command-person-wrap {
        position: relative;
        z-index: 6;
        width: min(36vw, 500px);
        max-height: min(75svh, 700px);
        isolation: isolate;
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 24px), calc((var(--my, 0.5) - 0.5) * 16px), 38px)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -4deg))
          scale(1.01);
        transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 220ms ease;
      }

      .command-person-wrap .command-person,
      .command-person-ghost {
        width: 100%;
        max-height: min(75svh, 700px);
        object-fit: contain;
      }

      .command-person-wrap .command-person {
        position: relative;
        z-index: 3;
        transform: none;
        filter:
          drop-shadow(0 52px 74px rgba(0, 0, 0, 0.72))
          drop-shadow(0 0 38px rgba(var(--accent-rgb), 0.12));
        transition: filter 220ms ease;
      }

      .command-stage:hover .command-person-wrap {
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 30px), calc((var(--my, 0.5) - 0.5) * 20px), 50px)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -6deg))
          scale(1.045);
      }

      .command-stage:hover .command-person-wrap .command-person {
        transform: none;
        filter:
          drop-shadow(0 60px 84px rgba(0, 0, 0, 0.74))
          drop-shadow(0 0 48px rgba(var(--accent-rgb), 0.18));
      }

      .command-person-ghost {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        mix-blend-mode: screen;
        filter: contrast(1.2) saturate(1.35) drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.7));
        transition: opacity 150ms ease, transform 100ms linear;
      }

      .ghost-a {
        clip-path: polygon(0 12%, 100% 12%, 100% 34%, 0 34%, 0 51%, 100% 51%, 100% 63%, 0 63%);
        transform: translate3d(var(--ghost-x, 0), var(--ghost-y, 0), 0);
      }

      .ghost-b {
        clip-path: polygon(0 37%, 100% 37%, 100% 49%, 0 49%, 0 66%, 100% 66%, 100% 86%, 0 86%);
        transform: translate3d(calc(var(--ghost-x, 0) * -0.72), calc(var(--ghost-y, 0) * -0.72), 0);
      }

      .profile-hero.is-kinetic .command-person-ghost {
        opacity: 0.1;
      }

      .command-person-scan {
        position: absolute;
        inset: 0;
        z-index: 4;
        opacity: 0.32;
        background:
          linear-gradient(180deg, transparent 0 46%, rgba(244, 241, 232, 0.7) 49%, rgba(var(--accent-rgb), 0.42) 50%, transparent 53%),
          repeating-linear-gradient(180deg, transparent 0 5px, rgba(var(--accent-rgb), 0.06) 6px);
        background-size: 100% 230%, 100% 100%;
        mix-blend-mode: screen;
        animation: heroPersonScan 5.4s ease-in-out infinite;
        pointer-events: none;
      }

      @keyframes heroPersonScan {
        0%, 18% { background-position: 0 -85%, 0 0; opacity: 0; }
        28% { opacity: 0.32; }
        72% { opacity: 0.18; }
        82%, 100% { background-position: 0 115%, 0 0; opacity: 0; }
      }

      .command-title .accent {
        background: linear-gradient(100deg, var(--accent) 0 38%, var(--paper) 50%, var(--accent) 62% 100%);
        background-size: 240% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: heroAccentFlow 5.8s ease-in-out infinite;
      }

      @keyframes heroAccentFlow {
        0%, 30% { background-position: 100% 0; }
        58%, 100% { background-position: -80% 0; }
      }

      .profile-hero.is-pulsing .command-hologram {
        animation: heroHoloKick 720ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      @keyframes heroHoloKick {
        0% { filter: drop-shadow(0 0 38px rgba(var(--accent-rgb), 0.12)); }
        24% { filter: drop-shadow(0 0 86px rgba(var(--accent-rgb), 0.5)); }
        100% { filter: drop-shadow(0 0 38px rgba(var(--accent-rgb), 0.12)); }
      }

      @media (max-width: 980px) {
        .command-hologram {
          width: min(65vw, 630px);
        }

        .command-person-wrap {
          width: min(43vw, 430px);
        }
      }

      @media (max-width: 680px) {
        .hero-fx-canvas {
          opacity: 0.58;
        }

        .hero-reactive-light {
          opacity: 0.42;
        }

        .command-hologram {
          width: 116vw;
        }

        .command-person-wrap {
          width: min(72vw, 330px);
          max-height: 420px;
        }

        .command-person-wrap .command-person,
        .command-person-ghost {
          max-height: 420px;
        }

        .command-person-ghost {
          display: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .command-person-ghost,
        .command-person-scan,
        .holo-sweep {
          display: none;
        }
      }

      /* Unified capability system: one continuous path instead of scattered cards. */
      .capability-system {
        min-height: 100svh;
        padding: 104px 0 58px;
        isolation: isolate;
        background:
          radial-gradient(ellipse at 48% 48%, rgba(var(--accent-rgb), 0.075), transparent 34%),
          linear-gradient(180deg, #060707, #090a0a 54%, #060707);
      }

      .capability-system .hero-canvas {
        z-index: -1;
        opacity: 0.58;
        mix-blend-mode: screen;
        pointer-events: none;
      }

      .capability-system .poster-shell {
        width: min(1280px, calc(100% - 48px));
        min-height: calc(100svh - 162px);
        display: block;
      }

      .capability-system .poster-stage {
        min-height: calc(100svh - 162px);
        padding: clamp(28px, 4vw, 52px);
        border: 1px solid transparent;
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(18, 21, 21, 0.72), rgba(5, 7, 7, 0.62)) padding-box,
          linear-gradient(128deg, rgba(255, 255, 255, 0.2), rgba(var(--accent-rgb), 0.18) 34%, rgba(255, 255, 255, 0.045) 68%, rgba(255, 255, 255, 0.13)) border-box;
        box-shadow:
          0 42px 100px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(24px) saturate(1.08);
        transform: none;
      }

      .capability-system .poster-stage::before {
        inset: 12px;
        border-color: rgba(244, 241, 232, 0.055);
        border-radius: 6px;
      }

      .capability-system .poster-stage::after {
        opacity: 0.3;
        background-size: auto, 86px 86px, 86px 86px;
        mask-image: linear-gradient(90deg, transparent, black 24% 76%, transparent);
      }

      .capability-system .poster-title,
      .capability-system .poster-map,
      .capability-system .poster-panel {
        display: none;
      }

      .capability-unified {
        --cap-index: 0;
        position: relative;
        z-index: 4;
        min-height: 100%;
        display: grid;
        align-content: space-between;
        gap: clamp(28px, 4vh, 48px);
      }

      .capability-head {
        display: grid;
        grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
        gap: clamp(28px, 5vw, 80px);
        align-items: start;
      }

      .capability-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin: 10px 0 0;
        color: var(--accent);
        font-size: 10px;
        font-weight: 760;
        text-transform: uppercase;
      }

      .capability-eyebrow::before {
        content: "";
        width: 34px;
        height: 1px;
        background: var(--accent);
        box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.36);
      }

      .capability-head h2 {
        max-width: 820px;
        margin: 0;
        font-size: clamp(34px, 4.5vw, 62px);
        line-height: 1.02;
        font-weight: 800;
        letter-spacing: 0;
      }

      .capability-head > div > p {
        max-width: 650px;
        margin: 18px 0 0;
        color: rgba(244, 241, 232, 0.5);
        font-size: 14px;
        line-height: 1.75;
      }

      .capability-console {
        border-top: 1px solid rgba(244, 241, 232, 0.11);
        border-bottom: 1px solid rgba(244, 241, 232, 0.11);
        background: rgba(2, 4, 4, 0.22);
      }

      .capability-pipeline {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-bottom: 1px solid rgba(244, 241, 232, 0.1);
      }

      .capability-pipeline button {
        position: relative;
        min-height: 118px;
        display: grid;
        align-content: center;
        justify-items: start;
        gap: 7px;
        padding: 20px clamp(18px, 2.5vw, 34px);
        border: 0;
        border-right: 1px solid rgba(244, 241, 232, 0.08);
        color: rgba(244, 241, 232, 0.4);
        background: transparent;
        text-align: left;
        cursor: pointer;
        transition: color 220ms ease, background 220ms ease;
      }

      .capability-pipeline button:last-of-type {
        border-right: 0;
      }

      .capability-pipeline button::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background: radial-gradient(circle at 50% 120%, rgba(var(--accent-rgb), 0.14), transparent 68%);
        transition: opacity 240ms ease;
      }

      .capability-pipeline button:hover,
      .capability-pipeline button.is-active {
        color: var(--paper);
      }

      .capability-pipeline button:hover::before,
      .capability-pipeline button.is-active::before {
        opacity: 1;
      }

      .capability-pipeline button > * {
        position: relative;
        z-index: 1;
      }

      .capability-pipeline button span {
        color: var(--accent);
        font-size: 9px;
        font-weight: 760;
        text-transform: uppercase;
      }

      .capability-pipeline button strong {
        font-size: clamp(18px, 2vw, 25px);
        font-weight: 680;
      }

      .capability-pipeline button small {
        color: rgba(244, 241, 232, 0.34);
        font-size: 11px;
      }

      .capability-progress {
        position: absolute;
        left: 0;
        bottom: -1px;
        z-index: 3;
        width: calc(100% / 3);
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--accent) 16% 84%, transparent);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.38);
        transform: translateX(calc(var(--cap-index) * 100%));
        transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .capability-focus {
        min-height: 360px;
        display: grid;
        grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
      }

      .capability-engine {
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-right: 1px solid rgba(244, 241, 232, 0.09);
        background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08), transparent 58%);
      }

      .engine-ring {
        position: absolute;
        left: 50%;
        top: 50%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: conic-gradient(from 20deg, transparent 0 12%, rgba(var(--accent-rgb), 0.68) 15%, transparent 19% 52%, rgba(244, 241, 232, 0.18) 55%, transparent 60% 100%);
        -webkit-mask: radial-gradient(circle, transparent 0 96%, #000 96.5% 100%);
        mask: radial-gradient(circle, transparent 0 96%, #000 96.5% 100%);
      }

      .engine-ring-a {
        width: min(280px, 72%);
        animation: capabilityOrbit 15s linear infinite;
      }

      .engine-ring-b {
        width: min(220px, 58%);
        opacity: 0.58;
        animation: capabilityOrbit 10s linear infinite reverse;
      }

      .engine-ring-c {
        width: min(162px, 44%);
        opacity: 0.34;
        animation: capabilityOrbit 7s linear infinite;
      }

      @keyframes capabilityOrbit {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
      }

      .engine-core {
        position: relative;
        z-index: 2;
        width: 128px;
        aspect-ratio: 1;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 8px;
        border: 1px solid rgba(244, 241, 232, 0.13);
        border-radius: 50%;
        background: rgba(8, 10, 10, 0.54);
        box-shadow:
          0 0 64px rgba(var(--accent-rgb), 0.12),
          inset 0 0 36px rgba(var(--accent-rgb), 0.055);
        backdrop-filter: blur(18px);
      }

      .engine-core small {
        color: var(--accent);
        font-size: 10px;
        font-weight: 780;
      }

      .engine-core strong {
        font-size: 14px;
        line-height: 1.08;
        text-align: center;
        text-transform: uppercase;
      }

      .capability-detail {
        align-self: center;
        max-width: 690px;
        padding: clamp(28px, 4vw, 58px);
      }

      .capability-detail > span {
        color: var(--accent);
        font-size: 9px;
        font-weight: 760;
        text-transform: uppercase;
      }

      .capability-detail h3 {
        max-width: 620px;
        margin: 14px 0 0;
        font-size: clamp(26px, 3vw, 42px);
        line-height: 1.08;
        font-weight: 740;
      }

      .capability-detail p {
        max-width: 620px;
        margin: 16px 0 0;
        color: rgba(244, 241, 232, 0.5);
        font-size: 14px;
        line-height: 1.75;
      }

      .capability-outputs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        margin-top: 24px;
        padding-top: 18px;
        border-top: 1px solid rgba(244, 241, 232, 0.09);
      }

      .capability-outputs span {
        position: relative;
        color: rgba(244, 241, 232, 0.68);
        font-size: 11px;
      }

      .capability-outputs span::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        margin: 0 8px 2px 0;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.38);
      }

      .capability-unified.is-switching .capability-detail {
        animation: capabilityDetailIn 420ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .capability-unified.is-switching .engine-core {
        animation: capabilityCorePulse 520ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      @keyframes capabilityDetailIn {
        from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
        to { opacity: 1; transform: translateY(0); filter: blur(0); }
      }

      @keyframes capabilityCorePulse {
        0% { transform: scale(0.9); }
        42% { transform: scale(1.06); box-shadow: 0 0 90px rgba(var(--accent-rgb), 0.3); }
        100% { transform: scale(1); }
      }

      .capability-evidence {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-top: 1px solid rgba(244, 241, 232, 0.09);
      }

      .capability-evidence div {
        min-height: 92px;
        display: grid;
        align-content: center;
        gap: 7px;
        padding: 16px clamp(16px, 2.2vw, 28px);
        border-right: 1px solid rgba(244, 241, 232, 0.08);
      }

      .capability-evidence div:last-child {
        border-right: 0;
      }

      .capability-evidence strong {
        color: var(--paper);
        font-size: clamp(24px, 2.8vw, 38px);
        line-height: 1;
      }

      .capability-evidence span {
        color: rgba(244, 241, 232, 0.36);
        font-size: 10px;
      }

      @media (max-width: 980px) {
        .capability-system {
          min-height: auto;
          padding: 96px 0 64px;
        }

        .capability-system .poster-shell,
        .capability-system .poster-stage {
          min-height: auto;
        }

        .capability-head {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        .capability-eyebrow {
          margin-top: 0;
        }

        .capability-focus {
          grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
        }

        .capability-evidence {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .capability-evidence div:nth-child(2) {
          border-right: 0;
        }

        .capability-evidence div:nth-child(-n + 2) {
          border-bottom: 1px solid rgba(244, 241, 232, 0.08);
        }
      }

      @media (max-width: 680px) {
        .capability-system {
          padding: 82px 0 52px;
        }

        .capability-system .poster-shell {
          width: calc(100% - 24px);
        }

        .capability-system .poster-stage {
          padding: 22px 14px 14px;
        }

        .capability-head h2 {
          font-size: clamp(32px, 10vw, 43px);
        }

        .capability-head > div > p {
          font-size: 13px;
        }

        .capability-pipeline {
          grid-template-columns: 1fr;
        }

        .capability-pipeline button {
          min-height: 82px;
          padding: 14px 16px;
          border-right: 0;
          border-bottom: 1px solid rgba(244, 241, 232, 0.08);
        }

        .capability-pipeline button:last-of-type {
          border-bottom: 0;
        }

        .capability-progress {
          top: 0;
          bottom: auto;
          width: 2px;
          height: calc(100% / 3);
          background: linear-gradient(180deg, transparent, var(--accent) 16% 84%, transparent);
          transform: translateY(calc(var(--cap-index) * 100%));
        }

        .capability-focus {
          grid-template-columns: 1fr;
        }

        .capability-engine {
          min-height: 290px;
          border-right: 0;
          border-bottom: 1px solid rgba(244, 241, 232, 0.09);
        }

        .capability-detail {
          padding: 28px 16px 30px;
        }

        .capability-detail h3 {
          font-size: 28px;
        }

        .capability-evidence div {
          min-height: 82px;
          padding: 14px;
        }

      }

      /* Spatial Signal Field: one dominant scene, restrained information, deep pointer response. */
      .profile-hero {
        min-height: 100svh;
        padding: 104px 0 28px;
        overflow: hidden;
        isolation: isolate;
        background:
          linear-gradient(108deg, rgba(var(--accent-rgb), 0.075), transparent 26%),
          linear-gradient(180deg, #070808 0%, #050606 68%, #080909 100%);
      }

      .profile-hero::before {
        inset: 0;
        background:
          linear-gradient(90deg, transparent 0 48%, rgba(244, 241, 232, 0.035) 48.05% 48.1%, transparent 48.15%),
          linear-gradient(118deg, transparent 0 57%, rgba(var(--accent-rgb), 0.08) 57.1%, transparent 57.35%);
        filter: none;
        opacity: 0.8;
        transform: translate3d(calc((var(--mx, 0.5) - 0.5) * -10px), 0, 0);
        animation: none;
      }

      .profile-hero::after {
        inset: 0;
        background-image:
          linear-gradient(90deg, rgba(244, 241, 232, 0.018) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.016) 1px, transparent 1px);
        background-size: 96px 96px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0 43%, #000 60%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0 43%, #000 60%, transparent 100%);
        opacity: 0.55;
      }

      .profile-hero .hero-fx-canvas {
        z-index: 1;
        opacity: 0.72;
      }

      .profile-hero .hero-reactive-light {
        z-index: 1;
        opacity: 0.44;
        background:
          radial-gradient(ellipse 20% 33% at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), rgba(var(--accent-rgb), 0.16), transparent 74%),
          linear-gradient(112deg, transparent 34%, rgba(244, 241, 232, 0.022) 51%, transparent 67%);
        filter: blur(34px);
      }

      .profile-hero .command-shell {
        z-index: 3;
        width: min(1480px, calc(100% - 72px));
        min-height: calc(100svh - 132px);
        display: grid;
        grid-template-columns: minmax(410px, 0.86fr) minmax(600px, 1.14fr);
        grid-template-rows: minmax(0, 1fr) auto;
        column-gap: 42px;
        row-gap: 18px;
        align-items: center;
        perspective: 1800px;
      }

      .profile-hero .command-shell::before,
      .profile-hero .command-shell::after {
        content: none;
      }

      .profile-hero .command-copy {
        grid-column: 1;
        grid-row: 1;
        z-index: 8;
        align-self: center;
        max-width: 610px;
        display: grid;
        gap: 24px;
        padding: 2vh 0 0;
      }

      .command-overline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: min(100%, 540px);
      }

      .profile-hero .command-kicker {
        min-height: 0;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: rgba(244, 241, 232, 0.48);
        background: transparent;
        font-size: 9px;
        font-weight: 760;
      }

      .profile-hero .command-kicker::before {
        content: none;
      }

      .profile-hero .command-kicker i {
        width: 32px;
        height: 1px;
        background: linear-gradient(90deg, var(--accent), transparent);
        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.32);
      }

      .command-live {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: rgba(244, 241, 232, 0.32);
        font-size: 8px;
        font-weight: 760;
      }

      .command-live i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent-2);
        box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 55%, transparent);
        animation: heroLivePulse 2.8s ease-in-out infinite;
      }

      @keyframes heroLivePulse {
        0%, 100% { opacity: 0.45; transform: scale(0.82); }
        50% { opacity: 1; transform: scale(1); }
      }

      .profile-hero .command-title {
        max-width: 640px;
        margin: 0;
        display: grid;
        gap: 7px;
        color: var(--paper);
        font-size: 68px;
        line-height: 1.02;
        font-weight: 760;
      }

      .profile-hero .command-title span,
      .profile-hero .command-title strong {
        display: block;
        font: inherit;
      }

      .profile-hero .command-title span {
        color: rgba(244, 241, 232, 0.56);
        font-size: 0.76em;
        font-weight: 620;
      }

      .profile-hero .command-title em {
        color: var(--accent);
        font: inherit;
        font-style: normal;
        text-shadow: 0 0 36px rgba(var(--accent-rgb), 0.18);
      }

      .profile-hero .command-title strong {
        color: rgba(244, 241, 232, 0.96);
      }

      .profile-hero .command-lede {
        max-width: 530px;
        margin: 0;
        color: rgba(244, 241, 232, 0.56);
        font-size: 15px;
        line-height: 1.85;
      }

      .command-signal-copy {
        width: min(100%, 540px);
        display: grid;
        grid-template-columns: 118px 1fr;
        align-items: center;
        gap: 18px;
        min-height: 58px;
        padding: 10px 0;
        border-top: 1px solid rgba(244, 241, 232, 0.11);
        border-bottom: 1px solid rgba(244, 241, 232, 0.11);
      }

      .command-signal-copy span {
        color: var(--accent);
        font-size: 9px;
        font-weight: 820;
      }

      .command-signal-copy strong {
        color: rgba(244, 241, 232, 0.82);
        font-size: 14px;
        font-weight: 650;
        line-height: 1.5;
        transition: opacity 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .profile-hero.is-mode-switching .command-signal-copy strong {
        opacity: 0;
        transform: translateY(6px);
      }

      .profile-hero .command-actions {
        display: flex;
        align-items: center;
        gap: 24px;
        margin: 0;
      }

      .profile-hero .command-primary {
        min-height: 48px;
        padding: 11px 18px;
        border: 1px solid rgba(244, 241, 232, 0.72);
        border-radius: 4px;
        color: #080909;
        background: var(--paper);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
        font-size: 13px;
        font-weight: 760;
      }

      .profile-hero .command-secondary {
        min-height: 40px;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid rgba(244, 241, 232, 0.2);
        border-radius: 0;
        color: rgba(244, 241, 232, 0.7);
        background: transparent;
        font-size: 12px;
        font-weight: 680;
      }

      .profile-hero .command-stage {
        grid-column: 2;
        grid-row: 1 / 3;
        z-index: 4;
        min-height: min(78svh, 760px);
        align-self: center;
        display: grid;
        place-items: center;
        overflow: visible;
        transform-style: preserve-3d;
      }

      .profile-hero .command-stage::before,
      .profile-hero .command-stage::after {
        content: none;
      }

      .hero-field-plane {
        position: absolute;
        z-index: 1;
        top: 3%;
        right: -12%;
        bottom: 3%;
        left: 1%;
        overflow: hidden;
        border-left: 1px solid rgba(244, 241, 232, 0.15);
        border-radius: 48% 0 0 48% / 50% 0 0 50%;
        background:
          linear-gradient(108deg, rgba(var(--accent-rgb), 0.085), transparent 38%),
          linear-gradient(156deg, rgba(244, 241, 232, 0.04), rgba(4, 5, 5, 0.08) 42%, rgba(var(--accent-3-rgb, 64, 217, 255), 0.035));
        box-shadow:
          inset 34px 0 74px rgba(var(--accent-rgb), 0.06),
          -24px 0 80px rgba(0, 0, 0, 0.26);
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 12px), calc((var(--my, 0.5) - 0.5) * 8px), -24px)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -2deg));
        transition: border-color 260ms ease, box-shadow 260ms ease;
      }

      .hero-field-plane::before,
      .hero-field-plane::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .hero-field-plane::before {
        inset: 8% 5% 8% 11%;
        border: 1px solid rgba(244, 241, 232, 0.055);
        border-left-color: rgba(var(--accent-rgb), 0.2);
        border-radius: 46% 4% 4% 46% / 50% 4% 4% 50%;
      }

      .hero-field-plane::after {
        left: 7%;
        top: 50%;
        width: 92%;
        height: 1px;
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.38), rgba(244, 241, 232, 0.08), transparent);
        transform: translateY(-50%);
      }

      .hero-field-mesh {
        position: absolute;
        inset: -14% -12% -14% 3%;
        background-image:
          linear-gradient(90deg, rgba(244, 241, 232, 0.045) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.04) 1px, transparent 1px);
        background-size: 54px 54px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 74%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 22%, #000 74%, transparent);
        opacity: 0.48;
        transform:
          perspective(780px)
          rotateY(calc(-11deg + (var(--mx, 0.5) - 0.5) * 7deg))
          rotateX(calc((var(--my, 0.5) - 0.5) * -5deg))
          translate3d(calc((var(--mx, 0.5) - 0.5) * 18px), calc((var(--my, 0.5) - 0.5) * 12px), 0);
        transition: transform 180ms ease-out;
      }

      .hero-field-refraction {
        position: absolute;
        z-index: 2;
        top: -8%;
        bottom: -8%;
        left: calc(var(--mx, 0.5) * 66% + 8%);
        width: 18%;
        border-left: 1px solid rgba(var(--accent-rgb), 0.14);
        border-right: 1px solid rgba(244, 241, 232, 0.04);
        background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.055), transparent);
        filter: blur(0.2px);
        opacity: 0.76;
        transform: skewX(-8deg);
        transition: left 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .hero-field-sweep {
        position: absolute;
        z-index: 3;
        left: 4%;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.72), rgba(244, 241, 232, 0.32), transparent);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.16);
        opacity: 0.34;
        animation: heroFieldSweep 6.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }

      @keyframes heroFieldSweep {
        0%, 12% { top: 14%; opacity: 0; }
        24% { opacity: 0.34; }
        74% { opacity: 0.22; }
        88%, 100% { top: 86%; opacity: 0; }
      }

      .hero-field-status {
        position: absolute;
        z-index: 8;
        top: 10%;
        left: 10%;
        display: grid;
        gap: 7px;
        padding-left: 14px;
        border-left: 1px solid var(--accent);
        color: rgba(244, 241, 232, 0.34);
        font-size: 8px;
        font-weight: 740;
        pointer-events: none;
      }

      .hero-field-status b {
        color: rgba(244, 241, 232, 0.7);
        font-size: 10px;
        font-weight: 720;
      }

      .profile-hero .command-person-wrap {
        position: relative;
        z-index: 6;
        width: min(38vw, 560px);
        max-height: min(78svh, 760px);
        margin-left: 1%;
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 20px), calc((var(--my, 0.5) - 0.5) * 13px), 44px)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -3deg));
        transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .profile-hero .command-person-wrap .command-person,
      .profile-hero .command-person-ghost {
        width: 100%;
        max-height: min(78svh, 760px);
      }

      .profile-hero .command-person-wrap .command-person {
        filter:
          drop-shadow(0 58px 74px rgba(0, 0, 0, 0.72))
          drop-shadow(-10px 0 30px rgba(var(--accent-rgb), 0.12));
      }

      .profile-hero .command-stage:hover .command-person-wrap {
        transform:
          translate3d(calc((var(--mx, 0.5) - 0.5) * 28px), calc((var(--my, 0.5) - 0.5) * 18px), 62px)
          rotateY(calc((var(--mx, 0.5) - 0.5) * -5deg))
          scale(1.025);
      }

      .profile-hero .command-person-scan {
        opacity: 0.22;
        animation-duration: 6.4s;
      }

      .hero-field-caption {
        position: absolute;
        z-index: 8;
        left: 9%;
        bottom: 9%;
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(244, 241, 232, 0.28);
        font-size: 7px;
        font-weight: 760;
        pointer-events: none;
      }

      .hero-field-caption i {
        width: 34px;
        height: 1px;
        background: rgba(244, 241, 232, 0.13);
      }

      .hero-mode-rail {
        position: absolute;
        z-index: 10;
        right: 1%;
        top: 50%;
        width: 116px;
        display: grid;
        transform: translateY(-50%);
      }

      .hero-mode {
        position: relative;
        min-height: 72px;
        display: grid;
        grid-template-columns: 20px 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 10px;
        padding: 10px 4px 10px 14px;
        border: 0;
        border-left: 1px solid rgba(244, 241, 232, 0.11);
        border-radius: 0;
        color: rgba(244, 241, 232, 0.34);
        background: transparent;
        text-align: left;
        transition: color 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .hero-mode::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 50%;
        width: 1px;
        height: 0;
        background: var(--accent);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.48);
        transform: translateY(-50%);
        transition: height 220ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .hero-mode span {
        grid-row: 1 / 3;
        color: rgba(244, 241, 232, 0.22);
        font-size: 8px;
        font-weight: 760;
      }

      .hero-mode b {
        color: inherit;
        font-size: 13px;
        font-weight: 720;
      }

      .hero-mode small {
        color: rgba(244, 241, 232, 0.24);
        font-size: 7px;
        font-weight: 700;
        text-transform: uppercase;
      }

      .hero-mode:hover,
      .hero-mode.is-active {
        color: var(--paper);
        border-left-color: rgba(var(--accent-rgb), 0.32);
        transform: translateX(-5px);
      }

      .hero-mode.is-active::before {
        height: 42px;
      }

      .profile-hero .command-proof {
        grid-column: 1;
        grid-row: 2;
        z-index: 8;
        width: min(100%, 610px);
        max-width: none;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        overflow: visible;
        border: 0;
        border-top: 1px solid rgba(244, 241, 232, 0.1);
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
      }

      .profile-hero .command-proof article {
        min-height: 70px;
        display: grid;
        align-content: center;
        gap: 6px;
        padding: 14px 18px 10px 0;
        border-right: 1px solid rgba(244, 241, 232, 0.08);
        background: transparent;
      }

      .profile-hero .command-proof article + article {
        padding-left: 18px;
      }

      .profile-hero .command-proof strong {
        color: rgba(244, 241, 232, 0.88);
        font-size: 25px;
        font-weight: 720;
      }

      .profile-hero .command-proof span {
        color: rgba(244, 241, 232, 0.32);
        font-size: 8px;
        font-weight: 700;
      }

      .profile-hero .command-proof p {
        grid-column: 1 / -1;
        margin: 10px 0 0;
        color: rgba(244, 241, 232, 0.22);
        font-size: 7px;
        font-weight: 720;
      }

      .profile-hero .command-scroll {
        position: absolute;
        right: 0;
        bottom: 4px;
        z-index: 9;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0;
        color: rgba(244, 241, 232, 0.22);
        font-size: 7px;
        font-weight: 720;
      }

      .profile-hero.is-pulsing .hero-field-plane {
        border-left-color: rgba(var(--accent-rgb), 0.52);
        box-shadow:
          inset 34px 0 92px rgba(var(--accent-rgb), 0.11),
          -24px 0 90px rgba(0, 0, 0, 0.3);
      }

      .profile-hero[data-hero-mode="1"] .hero-field-plane {
        border-left-color: color-mix(in srgb, var(--accent-2) 34%, transparent);
        box-shadow:
          inset 34px 0 82px color-mix(in srgb, var(--accent-2) 6%, transparent),
          -24px 0 80px rgba(0, 0, 0, 0.26);
      }

      .profile-hero[data-hero-mode="1"] .hero-field-status {
        border-left-color: var(--accent-2);
      }

      .profile-hero[data-hero-mode="1"] .hero-field-sweep {
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 72%, transparent), rgba(244, 241, 232, 0.3), transparent);
      }

      .profile-hero[data-hero-mode="2"] .hero-field-plane {
        border-left-color: color-mix(in srgb, var(--accent-3) 34%, transparent);
        box-shadow:
          inset 34px 0 82px color-mix(in srgb, var(--accent-3) 6%, transparent),
          -24px 0 80px rgba(0, 0, 0, 0.26);
      }

      .profile-hero[data-hero-mode="2"] .hero-field-status {
        border-left-color: var(--accent-3);
      }

      .profile-hero[data-hero-mode="2"] .hero-field-sweep {
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-3) 72%, transparent), rgba(244, 241, 232, 0.3), transparent);
      }

      @media (max-width: 1180px) {
        .profile-hero .command-shell {
          width: calc(100% - 48px);
          grid-template-columns: minmax(360px, 0.84fr) minmax(500px, 1.16fr);
          column-gap: 20px;
        }

        .profile-hero .command-title {
          font-size: 58px;
        }

        .profile-hero .command-person-wrap {
          width: min(42vw, 520px);
        }

        .hero-mode-rail {
          right: -2%;
        }
      }

      @media (max-width: 900px) and (min-width: 681px) {
        .profile-hero {
          padding-top: 96px;
        }

        .profile-hero .command-shell {
          min-height: calc(100svh - 118px);
          grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
        }

        .profile-hero .command-copy {
          gap: 18px;
        }

        .profile-hero .command-title {
          font-size: 48px;
        }

        .profile-hero .command-lede {
          font-size: 13px;
        }

        .command-signal-copy {
          grid-template-columns: 94px 1fr;
        }

        .profile-hero .command-stage {
          min-height: min(68svh, 620px);
        }

        .hero-mode-rail {
          right: -8px;
          width: 98px;
        }

        .hero-mode {
          min-height: 62px;
          padding-left: 10px;
        }

        .profile-hero .command-proof p,
        .hero-field-caption {
          display: none;
        }
      }

      @media (max-width: 680px) {
        .profile-hero {
          min-height: auto;
          padding: 88px 0 28px;
        }

        .profile-hero .command-shell {
          width: calc(100% - 28px);
          min-height: 0;
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: auto 480px auto;
          gap: 18px;
          padding: 20px 0 0;
        }

        .profile-hero .command-copy {
          grid-column: 1;
          grid-row: 1;
          gap: 16px;
          padding: 0;
        }

        .command-live {
          display: none;
        }

        .profile-hero .command-title {
          font-size: 43px;
        }

        .profile-hero .command-title span {
          font-size: 0.7em;
        }

        .profile-hero .command-lede {
          font-size: 13px;
          line-height: 1.7;
        }

        .command-signal-copy {
          grid-template-columns: 90px 1fr;
          min-height: 52px;
          gap: 10px;
        }

        .command-signal-copy strong {
          font-size: 12px;
        }

        .profile-hero .command-actions {
          gap: 18px;
        }

        .profile-hero .command-stage {
          grid-column: 1;
          grid-row: 2;
          min-height: 480px;
          margin: 0 -14px;
        }

        .hero-field-plane {
          top: 2%;
          right: -28%;
          bottom: 2%;
          left: -8%;
        }

        .profile-hero .command-person-wrap {
          width: min(82vw, 370px);
          max-height: 450px;
          margin-left: -2%;
        }

        .profile-hero .command-person-wrap .command-person,
        .profile-hero .command-person-ghost {
          max-height: 450px;
        }

        .hero-field-status {
          top: 8%;
          left: 8%;
        }

        .hero-field-caption {
          display: none;
        }

        .hero-mode-rail {
          right: 3%;
          top: auto;
          bottom: 5%;
          width: auto;
          display: flex;
          transform: none;
        }

        .hero-mode {
          width: 74px;
          min-height: 54px;
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          gap: 2px;
          padding: 8px 10px;
          border-left: 0;
          border-bottom: 1px solid rgba(244, 241, 232, 0.12);
        }

        .hero-mode::before {
          left: 50%;
          top: auto;
          bottom: -1px;
          width: 0;
          height: 1px;
          transform: translateX(-50%);
          transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hero-mode span,
        .hero-mode small {
          display: none;
        }

        .hero-mode b {
          font-size: 12px;
          text-align: center;
        }

        .hero-mode:hover,
        .hero-mode.is-active {
          transform: translateY(-3px);
        }

        .hero-mode.is-active::before {
          width: 42px;
          height: 1px;
        }

        .profile-hero .command-proof {
          grid-column: 1;
          grid-row: 3;
        }

        .profile-hero .command-proof article {
          min-height: 62px;
          padding: 10px 8px 8px 0;
        }

        .profile-hero .command-proof article + article {
          padding-left: 10px;
        }

        .profile-hero .command-proof strong {
          font-size: 20px;
        }

        .profile-hero .command-proof span {
          font-size: 7px;
          line-height: 1.4;
        }

        .profile-hero .command-proof p,
        .profile-hero .command-scroll {
          display: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-field-sweep,
        .command-live i {
          animation: none;
        }
      }

      /* Seamless handoff: dark optical dissolve instead of a bright door split. */
      .gate-transition-lens {
        position: absolute;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: center;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }

      .gate-transition-lens span {
        width: 14vmin;
        aspect-ratio: 1;
        border: 1px solid rgba(var(--accent-rgb), 0.16);
        border-radius: 50%;
        background:
          radial-gradient(circle at 42% 38%, rgba(244, 241, 232, 0.045), transparent 24%),
          #050606;
        box-shadow:
          0 0 0 1px rgba(244, 241, 232, 0.025) inset,
          0 0 80px rgba(var(--accent-rgb), 0.08);
        transform: scale(0.18);
      }

      .intro-gate.is-opening .gate-transition-lens {
        opacity: 1;
      }

      .intro-gate.is-opening .gate-transition-lens span {
        animation: gateOpticalDissolve 1.25s cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      @keyframes gateOpticalDissolve {
        0% { opacity: 0; transform: scale(0.18); }
        15% { opacity: 0.94; transform: scale(0.48); }
        62% { opacity: 0.72; transform: scale(13); }
        100% { opacity: 0; transform: scale(18); }
      }

      .gate-chamber[data-gate-version="biometric"] .gate-panel-left,
      .gate-chamber[data-gate-version="biometric"] .gate-panel-right {
        width: calc(50% + 1px);
      }

      .intro-gate.is-opening .gate-seam,
      .intro-gate.is-opening .gate-light {
        visibility: hidden;
        opacity: 0 !important;
        transition: none !important;
      }

      .intro-gate.is-opening .gate-panel {
        opacity: 0;
        filter: blur(16px) !important;
        transition:
          opacity 680ms ease,
          transform 1.08s cubic-bezier(0.16, 1, 0.3, 1),
          filter 720ms ease !important;
      }

      .intro-gate.is-opening .gate-panel-left {
        transform: translateX(-9vw) scale(1.025) !important;
      }

      .intro-gate.is-opening .gate-panel-right {
        transform: translateX(9vw) scale(1.025) !important;
      }

      .intro-gate.is-opening .gate-hold-wrap {
        opacity: 0;
        filter: blur(10px);
        transform: translate(-50%, -50%) scale(0.66) !important;
        transition:
          opacity 360ms ease,
          filter 520ms ease,
          transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .intro-gate.is-opening .gate-portal {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.035);
        transition:
          opacity 820ms ease,
          transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .intro-gate.is-leaving {
        opacity: 0;
        background: #050606;
        transition: opacity 980ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      /* Large background type anchors the hero without competing with the content. */
      .hero-wordmark {
        position: absolute;
        z-index: 2;
        top: 14%;
        left: 7%;
        right: -3%;
        display: flex;
        align-items: flex-start;
        gap: 24px;
        overflow: hidden;
        white-space: nowrap;
        pointer-events: none;
        transform: translate3d(calc((var(--mx, 0.5) - 0.5) * -14px), 0, 0);
      }

      .hero-wordmark span {
        margin-top: 26px;
        color: rgba(244, 241, 232, 0.22);
        font-size: 9px;
        font-weight: 760;
      }

      .hero-wordmark strong {
        color: transparent;
        font-size: 142px;
        line-height: 0.82;
        font-weight: 760;
        -webkit-text-stroke: 1px rgba(244, 241, 232, 0.065);
        text-stroke: 1px rgba(244, 241, 232, 0.065);
      }

      .profile-hero .command-title {
        font-size: 54px;
        line-height: 1.07;
        font-weight: 680;
      }

      .profile-hero .command-title span {
        color: rgba(244, 241, 232, 0.44);
        font-size: 0.5em;
        font-weight: 560;
      }

      .profile-hero .command-title strong {
        font-weight: 680;
      }

      .profile-hero .command-person-wrap .command-person {
        animation: heroPortraitIdle 7.2s ease-in-out infinite;
      }

      @keyframes heroPortraitIdle {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-7px); }
      }

      /* Choreographed first reveal. Every layer joins the same transition rhythm. */
      body.intro-active:not(.hero-revealing) .site .topbar,
      body.intro-active:not(.hero-revealing) .hero-wordmark,
      body.intro-active:not(.hero-revealing) .profile-hero .command-copy > *,
      body.intro-active:not(.hero-revealing) .profile-hero .command-proof,
      body.intro-active:not(.hero-revealing) .profile-hero .command-scroll,
      body.intro-active:not(.hero-revealing) .profile-hero .hero-mode-rail,
      body.intro-active:not(.hero-revealing) .profile-hero .hero-field-status,
      body.intro-active:not(.hero-revealing) .profile-hero .hero-field-caption {
        opacity: 0;
      }

      body.intro-active:not(.hero-revealing) .site .topbar {
        transform: translateY(-18px);
      }

      body.intro-active:not(.hero-revealing) .hero-wordmark {
        transform: translate3d(-44px, 0, 0);
      }

      body.intro-active:not(.hero-revealing) .profile-hero .command-copy > * {
        transform: translateY(20px);
      }

      body.intro-active:not(.hero-revealing) .profile-hero .hero-field-plane {
        opacity: 0;
        clip-path: inset(49% 0 49% 0 round 42%);
      }

      body.intro-active:not(.hero-revealing) .profile-hero .command-person-wrap {
        opacity: 0;
        filter: blur(12px);
        transform:
          translate3d(
            calc((var(--mx, 0.5) - 0.5) * 20px),
            calc((var(--my, 0.5) - 0.5) * 13px + 46px),
            18px
          )
          scale(0.96);
      }

      body.intro-active:not(.hero-revealing) .profile-hero .hero-fx-canvas,
      body.intro-active:not(.hero-revealing) .profile-hero .hero-reactive-light {
        opacity: 0;
      }

      body.hero-revealing .site .topbar {
        opacity: 1;
        transform: translateY(0);
        transition:
          opacity 720ms ease 80ms,
          transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
      }

      body.hero-revealing .hero-wordmark {
        opacity: 1;
        transition:
          opacity 1.1s ease 100ms,
          transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 100ms;
      }

      body.hero-revealing .profile-hero .hero-field-plane {
        opacity: 1;
        clip-path: inset(0 round 0);
        transition:
          opacity 880ms ease 140ms,
          clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1) 140ms,
          border-color 260ms ease,
          box-shadow 260ms ease;
      }

      body.hero-revealing .profile-hero .command-person-wrap {
        opacity: 1;
        filter: blur(0);
        transition:
          opacity 920ms ease 300ms,
          filter 1.05s ease 300ms,
          transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 300ms;
      }

      body.hero-revealing .profile-hero .hero-fx-canvas {
        opacity: 0.72;
        transition: opacity 1.2s ease 280ms;
      }

      body.hero-revealing .profile-hero .hero-reactive-light {
        opacity: 0.44;
        transition: opacity 1.2s ease 320ms;
      }

      body.hero-revealing .profile-hero .command-copy > * {
        opacity: 1;
        transform: translateY(0);
        transition:
          opacity 760ms ease,
          transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      body.hero-revealing .profile-hero .command-overline { transition-delay: 300ms; }
      body.hero-revealing .profile-hero .command-title { transition-delay: 390ms; }
      body.hero-revealing .profile-hero .command-lede { transition-delay: 480ms; }
      body.hero-revealing .profile-hero .command-signal-copy { transition-delay: 570ms; }
      body.hero-revealing .profile-hero .command-actions { transition-delay: 650ms; }

      body.hero-revealing .profile-hero .hero-field-status,
      body.hero-revealing .profile-hero .hero-field-caption,
      body.hero-revealing .profile-hero .hero-mode-rail,
      body.hero-revealing .profile-hero .command-proof,
      body.hero-revealing .profile-hero .command-scroll {
        opacity: 1;
        transition:
          opacity 760ms ease 680ms,
          transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 680ms;
      }

      @media (max-width: 1180px) {
        .hero-wordmark strong {
          font-size: 108px;
        }

        .profile-hero .command-title {
          font-size: 48px;
        }
      }

      @media (max-width: 680px) {
        .hero-wordmark {
          top: 13%;
          left: 14px;
          gap: 12px;
        }

        .hero-wordmark span {
          display: none;
        }

        .hero-wordmark strong {
          font-size: 58px;
          -webkit-text-stroke-color: rgba(244, 241, 232, 0.05);
        }

        .profile-hero .command-title {
          font-size: 39px;
        }

        .profile-hero .command-title span {
          font-size: 0.58em;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .gate-transition-lens,
        .hero-wordmark {
          display: none;
        }

        .profile-hero .command-person-wrap .command-person {
          animation: none;
        }
      }

      /* Keep the desktop navigation on the true visual center of the glass bar. */
      @media (min-width: 981px) {
        .site .topbar {
          grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
        }

        .site .topbar > .brand {
          justify-self: start;
        }

        .site .topbar > .nav {
          justify-self: center;
          justify-content: center;
        }

        .site .topbar > .topbar-actions {
          justify-self: end;
        }
      }

      /* Navigation stays centered during the hero handoff. */
      body.intro-active:not(.hero-revealing) .site .topbar {
        transform: translateX(-50%) translateY(-18px);
      }

      body.hero-revealing .site .topbar,
      body:not(.intro-active) .site .topbar {
        transform: translateX(-50%) translateY(0);
      }

      /* Kinetic brand hero: a single interactive field replaces the previous collage. */
      .profile-hero {
        min-height: 100svh;
        padding: 106px 0 24px;
        background: #050606;
      }

      .profile-hero::before {
        inset: 0;
        opacity: 0.7;
        background:
          linear-gradient(90deg, transparent 0 49.95%, rgba(244, 241, 232, 0.035) 50%, transparent 50.05%),
          linear-gradient(180deg, transparent 0 49.95%, rgba(244, 241, 232, 0.028) 50%, transparent 50.05%);
        filter: none;
        transform: none;
        animation: none;
      }

      .profile-hero::after {
        inset: 0;
        opacity: 0.22;
        background-image:
          linear-gradient(90deg, rgba(244, 241, 232, 0.025) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.021) 1px, transparent 1px);
        background-size: 120px 120px;
        -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 74%);
        mask-image: radial-gradient(ellipse at center, #000 0%, transparent 74%);
      }

      .profile-hero .hero-fx-canvas {
        z-index: 2;
        opacity: 0.96;
        mix-blend-mode: screen;
      }

      .profile-hero .hero-reactive-light {
        z-index: 1;
        inset: 0;
        opacity: 0.34;
        background: radial-gradient(
          ellipse 26% 36% at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%),
          rgba(var(--accent-rgb), 0.13),
          transparent 74%
        );
        filter: blur(42px);
      }

      .profile-hero .hero-kinetic-shell {
        position: relative;
        z-index: 5;
        width: min(1440px, calc(100% - 72px));
        min-height: calc(100svh - 130px);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        place-items: center;
        gap: 24px;
        overflow: visible;
        perspective: none;
      }

      .profile-hero .hero-kinetic-shell::before,
      .profile-hero .hero-kinetic-shell::after {
        content: none;
      }

      .hero-kinetic-copy {
        position: relative;
        z-index: 5;
        width: min(1040px, 100%);
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 22px;
        text-align: center;
      }

      .hero-kinetic-overline {
        width: min(720px, 82%);
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 16px;
        color: rgba(244, 241, 232, 0.34);
        font-size: 8px;
        font-weight: 760;
      }

      .hero-kinetic-overline i {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(244, 241, 232, 0.2), transparent);
      }

      .hero-kinetic-name {
        position: relative;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--paper);
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 164px;
        line-height: 0.78;
        font-weight: 720;
        white-space: nowrap;
      }

      .hero-letter {
        position: relative;
        z-index: 2;
        display: inline-block;
        color: rgba(244, 241, 232, 0.94);
        text-shadow: 0 26px 74px rgba(0, 0, 0, 0.46);
      }

      .hero-kinetic-name em {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: grid;
        place-items: center;
        color: transparent;
        font: inherit;
        font-style: normal;
        -webkit-text-stroke: 1px rgba(var(--accent-rgb), 0.78);
        -webkit-mask-image: radial-gradient(circle 150px at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), #000, transparent 72%);
        mask-image: radial-gradient(circle 150px at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), #000, transparent 72%);
        opacity: 0.72;
        transform: translate3d(
          calc((var(--mx, 0.5) - 0.5) * 14px),
          calc((var(--my, 0.5) - 0.5) * 8px),
          0
        );
        transition: transform 160ms ease-out;
        pointer-events: none;
      }

      .hero-kinetic-position {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: rgba(244, 241, 232, 0.48);
        font-size: 10px;
        font-weight: 760;
      }

      .hero-kinetic-position span + span::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 3px;
        margin: 0 12px 2px 0;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
      }

      .hero-kinetic-copy > p {
        max-width: 520px;
        margin: 0;
        color: rgba(244, 241, 232, 0.58);
        font-size: 15px;
        line-height: 1.75;
      }

      .hero-kinetic-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
      }

      .hero-kinetic-actions a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 1px solid rgba(244, 241, 232, 0.22);
        color: rgba(244, 241, 232, 0.78);
        font-size: 12px;
        font-weight: 680;
        transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
      }

      .hero-kinetic-actions a:hover {
        color: var(--paper);
        border-color: var(--accent);
        transform: translateY(-2px);
      }

      .hero-kinetic-actions a span {
        color: var(--accent);
        font-size: 16px;
      }

      .hero-kinetic-footer {
        position: relative;
        z-index: 5;
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        color: rgba(244, 241, 232, 0.24);
        font-size: 7px;
        font-weight: 740;
      }

      .hero-kinetic-footer i {
        height: 1px;
        background: linear-gradient(90deg, rgba(244, 241, 232, 0.06), rgba(var(--accent-rgb), 0.28), rgba(244, 241, 232, 0.06));
      }

      body.intro-active:not(.hero-revealing) .hero-kinetic-overline,
      body.intro-active:not(.hero-revealing) .hero-kinetic-position,
      body.intro-active:not(.hero-revealing) .hero-kinetic-copy > p,
      body.intro-active:not(.hero-revealing) .hero-kinetic-actions,
      body.intro-active:not(.hero-revealing) .hero-kinetic-footer {
        opacity: 0;
        transform: translateY(18px);
      }

      body.intro-active:not(.hero-revealing) .hero-letter {
        opacity: 0;
        transform: translateY(72px) rotate(3deg);
      }

      body.intro-active:not(.hero-revealing) .hero-kinetic-name em {
        opacity: 0;
      }

      body.hero-revealing .hero-letter {
        opacity: 1;
        transform: translateY(0) rotate(0);
        transition:
          opacity 720ms ease calc(260ms + var(--letter-index) * 85ms),
          transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) calc(260ms + var(--letter-index) * 85ms);
      }

      body.hero-revealing .hero-kinetic-name em {
        opacity: 0.72;
        transition: opacity 900ms ease 620ms, transform 160ms ease-out;
      }

      body.hero-revealing .hero-kinetic-overline,
      body.hero-revealing .hero-kinetic-position,
      body.hero-revealing .hero-kinetic-copy > p,
      body.hero-revealing .hero-kinetic-actions,
      body.hero-revealing .hero-kinetic-footer {
        opacity: 1;
        transform: translateY(0);
        transition:
          opacity 760ms ease,
          transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      body.hero-revealing .hero-kinetic-overline { transition-delay: 180ms; }
      body.hero-revealing .hero-kinetic-position { transition-delay: 650ms; }
      body.hero-revealing .hero-kinetic-copy > p { transition-delay: 730ms; }
      body.hero-revealing .hero-kinetic-actions { transition-delay: 810ms; }
      body.hero-revealing .hero-kinetic-footer { transition-delay: 900ms; }

      @media (max-width: 980px) {
        .profile-hero .hero-kinetic-shell {
          width: calc(100% - 40px);
        }

        .hero-kinetic-name {
          font-size: 112px;
        }
      }

      @media (max-width: 680px) {
        .profile-hero {
          min-height: 100svh;
          padding: 92px 0 20px;
        }

        .profile-hero .hero-kinetic-shell {
          width: calc(100% - 28px);
          min-height: calc(100svh - 112px);
        }

        .hero-kinetic-copy {
          gap: 18px;
        }

        .hero-kinetic-overline {
          width: 100%;
          gap: 10px;
          font-size: 7px;
        }

        .hero-kinetic-name {
          font-size: 66px;
        }

        .hero-kinetic-name em {
          -webkit-mask-image: radial-gradient(circle 84px at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), #000, transparent 72%);
          mask-image: radial-gradient(circle 84px at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), #000, transparent 72%);
        }

        .hero-kinetic-position {
          gap: 6px;
          font-size: 8px;
        }

        .hero-kinetic-position span + span::before {
          margin-right: 6px;
        }

        .hero-kinetic-copy > p {
          max-width: 310px;
          font-size: 13px;
        }

        .hero-kinetic-footer span:first-child {
          display: none;
        }

        .hero-kinetic-footer {
          grid-template-columns: 1fr auto;
        }
      }

      /* 2026-08 visual system: cinematic graphite, restrained signal orange. */
      :root {
        --display-font: "Arial Narrow", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
        --signal: #ff5938;
        --signal-rgb: 255, 89, 56;
        --ice: #dce6e4;
      }

      body {
        background: #050606;
      }

      body[data-theme="coral"] {
        --accent: var(--signal);
        --accent-rgb: var(--signal-rgb);
      }

      .intro-prelude {
        background:
          radial-gradient(circle at 50% 47%, rgba(255, 89, 56, 0.055), transparent 26%),
          linear-gradient(180deg, #050606, #070808 70%, #050606);
      }

      .intro-prelude-grid {
        opacity: 0.28;
        background-image:
          linear-gradient(90deg, rgba(220, 230, 228, 0.035) 1px, transparent 1px),
          linear-gradient(rgba(220, 230, 228, 0.025) 1px, transparent 1px);
        background-size: 88px 88px;
        mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
      }

      .intro-brand-intro {
        width: min(1120px, calc(100% - 64px));
        min-height: 280px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 24px;
      }

      .intro-brand-sign {
        position: fixed;
        left: clamp(24px, 4vw, 72px);
        top: clamp(24px, 4vw, 56px);
        color: rgba(244, 241, 232, 0.66);
        font-size: 12px;
        font-weight: 760;
        letter-spacing: 0.08em;
        opacity: 0;
        transform: translateY(-8px);
      }

      .intro-brand-code {
        position: static;
        color: rgba(220, 230, 228, 0.44);
        font-size: 10px;
        letter-spacing: 0.18em;
      }

      .intro-brand-intro h1 {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 0.2em;
        margin: 0;
        white-space: nowrap;
        font-family: var(--display-font);
        font-size: clamp(34px, 5vw, 70px);
        font-weight: 700;
        line-height: 1.05;
      }

      .intro-brand-intro h1 span,
      .intro-brand-intro h1 strong {
        display: inline-block;
        color: rgba(244, 241, 232, 0.96);
        opacity: 0;
        transform: translateY(26px);
        filter: blur(12px);
      }

      .intro-brand-intro h1 strong {
        color: var(--accent);
        font-weight: 780;
      }

      .intro-brand-intro h1 strong::after {
        display: none;
      }

      .intro-brand-intro .intro-world {
        font-size: 0.65em;
        filter: saturate(0.68);
      }

      .intro-brand-line {
        position: relative;
        width: min(520px, 62vw);
        height: 1px;
        overflow: hidden;
        background: rgba(220, 230, 228, 0.08);
      }

      .intro-brand-line i {
        background: linear-gradient(90deg, transparent, var(--accent), rgba(220, 230, 228, 0.8), transparent);
      }

      .intro-brand-meta {
        width: min(520px, 62vw);
        color: rgba(220, 230, 228, 0.28);
        font-size: 8px;
        letter-spacing: 0.12em;
      }

      .intro-gate.is-prelude-running .intro-brand-sign,
      .intro-gate.is-prelude-running .intro-brand-code,
      .intro-gate.is-prelude-running .intro-brand-line,
      .intro-gate.is-prelude-running .intro-brand-meta {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 650ms ease, transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .intro-gate.is-prelude-running .intro-brand-intro h1 span,
      .intro-gate.is-prelude-running .intro-brand-intro h1 strong {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        transition:
          opacity 760ms ease var(--brand-delay),
          transform 920ms cubic-bezier(0.16, 1, 0.3, 1) var(--brand-delay),
          filter 760ms ease var(--brand-delay);
      }

      .gate-chamber[data-gate-version="biometric"] {
        overflow: hidden;
        background:
          radial-gradient(ellipse at 50% 54%, rgba(255, 89, 56, 0.06), transparent 30%),
          #050707;
      }

      .gate-chamber[data-gate-version="biometric"]::before {
        opacity: 0.42;
        background:
          repeating-radial-gradient(circle at 50% 53%, transparent 0 112px, rgba(220, 230, 228, 0.028) 113px 114px),
          linear-gradient(90deg, transparent 49.92%, rgba(220, 230, 228, 0.1) 50%, transparent 50.08%);
      }

      .gate-chamber[data-gate-version="biometric"]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(5, 7, 7, 0.88), transparent 24% 76%, rgba(5, 7, 7, 0.88)),
          linear-gradient(180deg, rgba(5, 7, 7, 0.38), transparent 18% 78%, rgba(5, 7, 7, 0.76));
      }

      .gate-city-grid {
        opacity: 0.22;
        background-size: 76px 76px;
      }

      .gate-portal,
      .gate-monitor {
        display: none;
      }

      .gate-atmosphere {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
      }

      .gate-arc {
        position: absolute;
        top: 52%;
        width: 46vw;
        max-width: 760px;
        aspect-ratio: 1.9;
        border: 1px solid rgba(220, 230, 228, 0.08);
        border-radius: 50%;
        transform: translateY(-50%) rotate(-7deg);
      }

      .gate-arc-a { right: 57%; }
      .gate-arc-b { left: 57%; transform: translateY(-50%) rotate(7deg); }

      .gate-axis {
        position: absolute;
        top: 52%;
        width: 34%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(220, 230, 228, 0.2), rgba(255, 89, 56, 0.16));
      }

      .gate-axis-left { left: 0; }
      .gate-axis-right { right: 0; transform: scaleX(-1); }

      .gate-signal {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 18px rgba(255, 89, 56, 0.8);
        animation: gateSignalDrift 7s ease-in-out infinite;
      }

      .gate-signal-a { left: 12%; top: 38%; }
      .gate-signal-b { right: 14%; top: 62%; animation-delay: -2.4s; }
      .gate-signal-c { left: 22%; bottom: 18%; animation-delay: -4.8s; }

      @keyframes gateSignalDrift {
        0%, 100% { opacity: 0.22; transform: translateX(-12px) scale(0.7); }
        45% { opacity: 1; transform: translateX(22px) scale(1); }
      }

      .gate-film {
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 50%;
        width: min(72vw, 980px);
        height: min(72svh, 720px);
        transform: translate(-50%, -50%);
        overflow: hidden;
        background: #090b0b;
        mask-image: radial-gradient(ellipse at center, black 50%, rgba(0, 0, 0, 0.88) 68%, transparent 95%);
      }

      .gate-film video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .gate-film-blur {
        object-fit: cover;
        filter: blur(30px) saturate(0.66) brightness(0.44);
        transform: scale(1.1);
        opacity: 0.68;
      }

      .gate-film-main {
        z-index: 1;
        object-fit: contain;
        filter: saturate(0.76) contrast(1.06) brightness(0.66);
      }

      .gate-film-edge {
        position: absolute;
        inset: 0;
        z-index: 2;
        box-shadow: inset 0 0 110px 44px #050707;
        background: linear-gradient(180deg, rgba(5, 7, 7, 0.36), transparent 28% 70%, rgba(5, 7, 7, 0.78));
        pointer-events: none;
      }

      .gate-film-meta {
        position: absolute;
        z-index: 3;
        left: 8%;
        right: 8%;
        bottom: 8%;
        display: flex;
        justify-content: space-between;
        color: rgba(244, 241, 232, 0.46);
        font-size: 8px;
        font-weight: 720;
        letter-spacing: 0.12em;
      }

      .gate-sound {
        position: absolute;
        z-index: 5;
        right: 8%;
        top: 8%;
        min-height: 30px;
        padding: 6px 10px;
        border: 1px solid rgba(244, 241, 232, 0.18);
        border-radius: 999px;
        color: rgba(244, 241, 232, 0.68);
        background: rgba(5, 7, 7, 0.36);
        backdrop-filter: blur(16px);
        cursor: pointer;
      }

      .gate-access {
        position: absolute;
        z-index: 8;
        left: 50%;
        top: 50%;
        width: min(460px, calc(100% - 36px));
        transform: translate(-50%, -48%);
        display: grid;
        justify-items: center;
        gap: 20px;
      }

      .gate-password {
        width: min(330px, 100%);
        display: grid;
        gap: 8px;
        padding: 14px 16px 12px;
        border: 1px solid rgba(244, 241, 232, 0.14);
        border-radius: 14px;
        background: rgba(5, 7, 7, 0.58);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(22px) saturate(1.1);
      }

      .gate-password label {
        color: rgba(244, 241, 232, 0.42);
        font-size: 9px;
        font-weight: 760;
        letter-spacing: 0.12em;
      }

      .gate-password-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
      }

      .gate-password input {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        border: 0;
        border-bottom: 1px solid rgba(244, 241, 232, 0.24);
        outline: 0;
        color: var(--paper);
        background: transparent;
        font-size: 22px;
        letter-spacing: 0.4em;
      }

      .gate-password input:focus {
        border-color: var(--accent);
      }

      .gate-password-field > span {
        color: rgba(244, 241, 232, 0.34);
        font-size: 8px;
        font-weight: 760;
        letter-spacing: 0.08em;
      }

      .gate-password p {
        margin: 0;
        color: rgba(244, 241, 232, 0.34);
        font-size: 10px;
      }

      .gate-chamber.is-authorized .gate-password {
        border-color: rgba(255, 89, 56, 0.36);
      }

      .gate-chamber.is-authorized .gate-password-field > span {
        color: var(--accent);
      }

      .gate-chamber.is-password-error .gate-password {
        animation: passwordShake 300ms ease;
      }

      @keyframes passwordShake {
        0%, 100% { transform: translateX(0); }
        30% { transform: translateX(-7px); }
        65% { transform: translateX(7px); }
      }

      .gate-hold-wrap {
        position: relative;
        inset: auto;
        transform: none;
        width: auto;
        height: auto;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold-wrap::before,
      .gate-chamber[data-gate-version="biometric"] .gate-hold-wrap::after {
        display: none;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-access .gate-hold-wrap {
        width: auto;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold {
        width: 210px;
        height: 210px;
        min-height: 210px;
        opacity: 1;
        cursor: pointer;
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold:disabled {
        opacity: 0.48;
        cursor: not-allowed;
        filter: grayscale(0.8);
      }

      .gate-chamber.is-authorized .gate-hold {
        border-color: rgba(255, 89, 56, 0.28);
        box-shadow: 0 34px 100px rgba(0, 0, 0, 0.62), 0 0 80px rgba(255, 89, 56, 0.08);
      }

      .gate-system-status {
        z-index: 9;
        left: clamp(20px, 4vw, 68px);
        right: clamp(20px, 4vw, 68px);
        bottom: 26px;
        justify-content: space-between;
        color: rgba(244, 241, 232, 0.28);
      }

      .intro-gate.is-opening .gate-chamber {
        opacity: 0;
        filter: blur(18px);
        transform: scale(1.045);
        transition:
          opacity 920ms cubic-bezier(0.16, 1, 0.3, 1),
          filter 1100ms ease,
          transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .intro-gate.is-opening,
      .intro-gate.is-leaving {
        background: #050606;
      }

      /* Floating, centered glass navigation. */
      .site .topbar {
        position: fixed;
        top: 20px;
        left: 50%;
        width: min(1160px, calc(100% - 40px));
        height: 62px;
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 22px;
        transform: translateX(-50%);
        grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto;
        background: rgba(244, 241, 232, 0.1);
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.12);
        -webkit-backdrop-filter: blur(24px) saturate(1.25);
        backdrop-filter: blur(24px) saturate(1.25);
        transition:
          top 280ms ease,
          background-color 280ms ease,
          border-color 280ms ease,
          box-shadow 280ms ease;
      }

      .site .topbar.is-scrolled {
        top: 12px;
        border-color: rgba(255, 255, 255, 0.26);
        background: rgba(15, 17, 17, 0.7);
        box-shadow: 0 20px 58px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.09);
      }

      .site .topbar::before {
        opacity: 0.2;
      }

      .site .topbar::after {
        border-radius: 20px;
      }

      .site .brand-mark {
        width: 42px;
        height: 42px;
        overflow: hidden;
        border-radius: 14px;
        background: #e9ece8;
      }

      .site .brand-mark img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 16%;
        transform: scale(1.72) translateY(8%);
      }

      .site .brand-text strong { font-size: 11px; }
      .site .brand-text span { font-size: 7px; }

      .site .nav {
        justify-content: center;
        gap: 2px;
      }

      .site .nav a {
        min-height: 38px;
        padding: 10px 13px;
        border-radius: 12px;
        font-size: 12px;
      }

      .site .nav a.is-active::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 4px;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--accent);
        transform: translateX(-50%);
        box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
      }

      /* Hero: kinetic type + abstract infinite field, no human figure. */
      .profile-hero {
        min-height: 100svh;
        padding: 104px 0 24px;
        background:
          radial-gradient(ellipse at calc(73% + (var(--mx, 0.5) - 0.5) * 4%) calc(46% + (var(--my, 0.5) - 0.5) * 4%), rgba(255, 89, 56, 0.1), transparent 24%),
          linear-gradient(180deg, #060707 0%, #050606 72%, #080909 100%);
      }

      .profile-hero::before {
        opacity: 0.68;
        filter: blur(20px);
      }

      .hero-edition {
        position: absolute;
        z-index: 7;
        top: 112px;
        left: max(34px, calc((100vw - 1380px) / 2));
        right: max(34px, calc((100vw - 1380px) / 2));
        display: flex;
        justify-content: space-between;
        color: rgba(244, 241, 232, 0.3);
        font-size: 9px;
        font-weight: 720;
        letter-spacing: 0.12em;
      }

      .profile-hero .hero-kinetic-shell {
        position: relative;
        z-index: 6;
        width: min(1380px, calc(100% - 68px));
        min-height: calc(100svh - 128px);
        display: grid;
        grid-template-columns: minmax(390px, 0.82fr) minmax(470px, 1.18fr);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 48px;
        align-items: center;
        margin: 0 auto;
        padding-top: 36px;
      }

      .profile-hero .hero-kinetic-copy {
        align-self: center;
        display: grid;
        gap: 24px;
        max-width: 650px;
      }

      .hero-kinetic-overline {
        display: grid;
        grid-template-columns: auto minmax(36px, 92px) auto;
        align-items: center;
        gap: 14px;
        width: fit-content;
        color: rgba(244, 241, 232, 0.38);
        font-size: 9px;
        font-weight: 730;
        letter-spacing: 0.1em;
      }

      .hero-kinetic-overline i {
        height: 1px;
        background: linear-gradient(90deg, var(--accent), rgba(244, 241, 232, 0.12));
      }

      .hero-create-title {
        position: relative;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.04em;
        font-family: var(--display-font);
        font-size: clamp(76px, 9.5vw, 158px);
        font-weight: 760;
        line-height: 0.82;
        letter-spacing: 0;
      }

      .hero-create-title > span {
        color: rgba(244, 241, 232, 0.96);
      }

      .hero-create-title em {
        color: var(--accent);
        font-size: 1.1em;
        font-style: normal;
        font-weight: 420;
        text-shadow: 0 0 46px rgba(255, 89, 56, 0.24);
        animation: infinityBreath 4.8s ease-in-out infinite;
      }

      @keyframes infinityBreath {
        0%, 100% { transform: scale(0.96); filter: brightness(0.86); }
        50% { transform: scale(1.035); filter: brightness(1.16); }
      }

      .hero-lede {
        max-width: 560px;
        margin: 0;
        color: rgba(244, 241, 232, 0.62);
        font-size: clamp(15px, 1.3vw, 18px);
        line-height: 1.85;
      }

      .hero-kinetic-actions {
        display: flex;
        gap: 12px;
        align-items: center;
      }

      .hero-kinetic-actions a {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 680;
      }

      .hero-kinetic-actions a:first-child {
        color: #090a0a;
        background: var(--paper);
      }

      .hero-kinetic-actions a:last-child {
        border: 1px solid rgba(244, 241, 232, 0.18);
        background: rgba(244, 241, 232, 0.035);
        backdrop-filter: blur(16px);
      }

      .hero-spatial-stage {
        position: relative;
        min-height: min(70svh, 720px);
        transform: translate(calc((var(--mx, 0.5) - 0.5) * 15px), calc((var(--my, 0.5) - 0.5) * 12px));
        transition: transform 260ms ease-out;
        perspective: 1000px;
      }

      .hero-spatial-axis {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(48vw, 700px);
        height: 1px;
        transform: translate(-50%, -50%) rotate(-10deg);
        background: linear-gradient(90deg, transparent, rgba(244, 241, 232, 0.22), var(--accent), transparent);
      }

      .hero-spatial-ring {
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        transform-style: preserve-3d;
      }

      .hero-spatial-ring-a {
        width: min(44vw, 650px);
        aspect-ratio: 1.8;
        border: 1px solid rgba(244, 241, 232, 0.15);
        transform: translate(-50%, -50%) rotate(-12deg) rotateX(52deg);
        box-shadow: 0 0 70px rgba(255, 89, 56, 0.08), inset 0 0 60px rgba(244, 241, 232, 0.025);
        animation: spatialFloatA 9s ease-in-out infinite alternate;
      }

      .hero-spatial-ring-b {
        width: min(35vw, 510px);
        aspect-ratio: 1;
        border: 1px dashed rgba(255, 89, 56, 0.28);
        transform: translate(-50%, -50%) rotate(30deg) rotateY(62deg);
        animation: spatialFloatB 14s linear infinite;
      }

      @keyframes spatialFloatA {
        from { transform: translate(-50%, -52%) rotate(-15deg) rotateX(50deg); }
        to { transform: translate(-50%, -47%) rotate(-6deg) rotateX(58deg); }
      }

      @keyframes spatialFloatB {
        from { transform: translate(-50%, -50%) rotate(0deg) rotateY(62deg); }
        to { transform: translate(-50%, -50%) rotate(360deg) rotateY(62deg); }
      }

      .hero-spatial-core {
        position: absolute;
        left: 50%;
        top: 50%;
        width: clamp(150px, 18vw, 270px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid rgba(244, 241, 232, 0.16);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        color: rgba(244, 241, 232, 0.9);
        background:
          radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.1), transparent 25%),
          radial-gradient(circle, rgba(255, 89, 56, 0.13), rgba(4, 5, 5, 0.72) 66%);
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.52), inset 0 0 60px rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(18px);
      }

      .hero-spatial-core span {
        font-size: clamp(70px, 9vw, 140px);
        font-weight: 320;
        text-shadow: 0 0 36px rgba(255, 89, 56, 0.22);
      }

      .hero-spatial-node {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 20px rgba(255, 89, 56, 0.9);
      }

      .hero-spatial-node-a { left: 17%; top: 39%; animation: nodePulse 2.8s ease-in-out infinite; }
      .hero-spatial-node-b { right: 12%; top: 56%; animation: nodePulse 2.8s ease-in-out -0.9s infinite; }
      .hero-spatial-node-c { left: 48%; bottom: 11%; animation: nodePulse 2.8s ease-in-out -1.8s infinite; }

      @keyframes nodePulse {
        0%, 100% { opacity: 0.25; transform: scale(0.6); }
        50% { opacity: 1; transform: scale(1.25); }
      }

      .hero-spatial-caption {
        position: absolute;
        right: 4%;
        bottom: 9%;
        color: rgba(244, 241, 232, 0.28);
        font-size: 8px;
        font-weight: 720;
        letter-spacing: 0.12em;
      }

      .hero-kinetic-footer {
        grid-column: 1 / -1;
      }

      .hero-infinity {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        opacity: 0.42;
      }

      body.intro-active .hero-edition,
      body.intro-active .hero-kinetic-overline,
      body.intro-active .hero-create-title,
      body.intro-active .hero-lede,
      body.intro-active .hero-kinetic-actions,
      body.intro-active .hero-spatial-stage,
      body.intro-active .hero-kinetic-footer {
        opacity: 0;
      }

      body.intro-active .hero-kinetic-overline,
      body.intro-active .hero-create-title,
      body.intro-active .hero-lede,
      body.intro-active .hero-kinetic-actions {
        transform: translateY(30px);
      }

      body.intro-active .hero-spatial-stage {
        transform: translateY(28px) scale(0.94);
      }

      body.hero-revealing .hero-edition,
      body.hero-revealing .hero-kinetic-overline,
      body.hero-revealing .hero-create-title,
      body.hero-revealing .hero-lede,
      body.hero-revealing .hero-kinetic-actions,
      body.hero-revealing .hero-spatial-stage,
      body.hero-revealing .hero-kinetic-footer {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition:
          opacity 820ms ease,
          transform 1050ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      body.hero-revealing .hero-edition { transition-delay: 120ms; }
      body.hero-revealing .hero-kinetic-overline { transition-delay: 180ms; }
      body.hero-revealing .hero-create-title { transition-delay: 280ms; }
      body.hero-revealing .hero-lede { transition-delay: 430ms; }
      body.hero-revealing .hero-kinetic-actions { transition-delay: 540ms; }
      body.hero-revealing .hero-spatial-stage { transition-delay: 250ms; }
      body.hero-revealing .hero-kinetic-footer { transition-delay: 680ms; }

      /* Wider profile and six-point career map. */
      .about-profile {
        padding: clamp(104px, 11vw, 170px) max(34px, calc((100vw - 1420px) / 2));
      }

      .about-profile-grid {
        grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.6fr);
        gap: clamp(56px, 7vw, 118px);
        align-items: start;
      }

      .about-portrait {
        position: relative;
        width: 100%;
        min-height: 0;
        aspect-ratio: 3 / 4;
        padding: 0;
        overflow: visible;
        border: 1px solid rgba(244, 241, 232, 0.18);
        border-radius: 18px;
        background: #e6e8e5;
        cursor: pointer;
      }

      .about-avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 38%;
        border-radius: inherit;
        clip-path: inset(0 round 18px);
        transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
      }

      @property --portrait-neon-angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
      }

      .about-neon-border,
      .about-neon-border::before,
      .about-neon-border::after {
        position: absolute;
        inset: -3px;
        box-sizing: border-box;
        border-radius: 21px;
        pointer-events: none;
      }

      .about-neon-border {
        --portrait-neon-angle: 0deg;
        z-index: 6;
        padding: 2px;
        background: conic-gradient(
          from var(--portrait-neon-angle),
          transparent 0deg 38deg,
          rgba(204, 145, 73, 0.12) 50deg,
          rgba(232, 180, 111, 0.92) 70deg,
          #fff0cf 82deg,
          rgba(204, 145, 73, 0.78) 96deg,
          transparent 118deg 218deg,
          rgba(204, 145, 73, 0.1) 230deg,
          rgba(232, 180, 111, 0.82) 250deg,
          #fff0cf 262deg,
          rgba(204, 145, 73, 0.68) 276deg,
          transparent 298deg 360deg
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        animation: portraitNeonTravel 7.5s linear infinite;
      }

      .about-neon-border::before,
      .about-neon-border::after {
        content: "";
        inset: -10px;
        border: 3px solid rgba(204, 145, 73, 0.36);
        opacity: 0.4;
        filter: blur(9px);
      }

      .about-neon-border::after {
        inset: -22px;
        border-width: 6px;
        opacity: 0.18;
        filter: blur(24px);
      }

      @keyframes portraitNeonTravel {
        to { --portrait-neon-angle: 360deg; }
      }

      .about-portrait:hover .about-avatar {
        transform: scale(1.035);
        filter: contrast(1.04);
      }

      .about-video-label {
        position: absolute;
        z-index: 3;
        left: 18px;
        bottom: 18px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 8px;
        font-weight: 760;
        letter-spacing: 0.1em;
      }

      .about-path {
        margin-top: clamp(72px, 8vw, 128px);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 64px 28px;
        padding-top: 0;
      }

      .about-path::before {
        display: none;
      }

      .about-step {
        position: relative;
        min-height: 230px;
        padding: 28px 18px 8px 0;
        border-top: 1px solid rgba(244, 241, 232, 0.14);
      }

      .about-step::before {
        left: 0;
        top: -4px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.55);
      }

      .about-step-index {
        position: absolute;
        right: 12px;
        top: 16px;
        color: rgba(244, 241, 232, 0.08);
        font-size: 56px;
        font-weight: 760;
        line-height: 1;
      }

      .about-step h4 {
        position: relative;
        max-width: 90%;
        margin: 18px 0 14px;
        font-size: clamp(17px, 1.5vw, 22px);
        line-height: 1.35;
      }

      .about-step p {
        position: relative;
        max-width: 39ch;
        color: rgba(244, 241, 232, 0.5);
        font-size: 13px;
        line-height: 1.8;
      }

      /* Tool arsenal refinements. */
      .mouse-tools-head {
        align-items: end;
      }

      .mouse-tools-head h2 {
        font-family: var(--display-font);
        font-size: clamp(46px, 7vw, 104px);
        line-height: 0.92;
      }

      .mouse-tools-head > p {
        max-width: 440px;
        margin: 0 0 4px auto;
        color: rgba(244, 241, 232, 0.48);
        font-size: 13px;
        line-height: 1.75;
        text-align: right;
      }

      .mouse-tool-mark.tool-wordmark {
        display: grid;
        place-items: center;
        color: #080909;
        background: var(--tool-color);
        font-size: clamp(28px, 4vw, 56px);
        font-weight: 820;
      }

      /* Contact becomes a full visual destination. */
      .contact {
        position: relative;
        min-height: 100svh;
        display: grid;
        align-items: center;
        padding: 120px max(34px, calc((100vw - 1400px) / 2)) 72px;
        overflow: hidden;
        background:
          radial-gradient(circle at 56% 50%, rgba(255, 89, 56, 0.1), transparent 22%),
          linear-gradient(180deg, #070808, #040505);
      }

      .contact-atmosphere {
        position: absolute;
        inset: 0;
        pointer-events: none;
        color: rgba(244, 241, 232, 0.12);
        font-size: 9px;
        font-weight: 720;
        letter-spacing: 0.1em;
      }

      .contact-atmosphere span:first-child { position: absolute; left: 4vw; top: 14%; }
      .contact-atmosphere span:nth-child(2) { position: absolute; right: 4vw; bottom: 10%; }
      .contact-atmosphere i {
        position: absolute;
        left: 52%;
        top: 52%;
        width: min(70vw, 1050px);
        aspect-ratio: 2.4;
        border: 1px solid rgba(244, 241, 232, 0.055);
        border-radius: 50%;
        transform: translate(-50%, -50%) rotate(-12deg);
      }
      .contact-atmosphere i:nth-of-type(2) { transform: translate(-50%, -50%) rotate(20deg) scale(0.74); }
      .contact-atmosphere i:nth-of-type(3) { transform: translate(-50%, -50%) rotate(62deg) scale(0.48); border-color: rgba(255, 89, 56, 0.12); }

      .contact-panel {
        position: relative;
        z-index: 2;
        width: 100%;
        min-height: 620px;
        display: grid;
        grid-template-columns: minmax(340px, 1fr) minmax(270px, 0.7fr) minmax(320px, 0.84fr);
        gap: clamp(42px, 6vw, 96px);
        align-items: center;
        padding: 0;
        border: 0;
        background: transparent;
      }

      .contact-copy h2 {
        max-width: 700px;
        margin: 20px 0 26px;
        font-family: var(--display-font);
        font-size: clamp(42px, 5.7vw, 84px);
        font-weight: 720;
        line-height: 1.04;
      }

      .contact-copy > p:not(.eyebrow) {
        max-width: 520px;
        color: rgba(244, 241, 232, 0.52);
        font-size: 15px;
        line-height: 1.85;
      }

      .contact-status {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 40px;
        color: rgba(244, 241, 232, 0.34);
        font-size: 8px;
        font-weight: 720;
        letter-spacing: 0.09em;
      }

      .contact-status i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 14px rgba(255, 89, 56, 0.7);
        animation: nodePulse 2.2s ease-in-out infinite;
      }

      .contact-qr {
        position: relative;
        width: min(100%, 330px);
        aspect-ratio: 1;
        justify-self: center;
        padding: 22px;
      }

      .contact-qr img {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 14px;
        filter: contrast(1.08);
        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
      }

      .contact-qr-orbit {
        position: absolute;
        inset: -18px;
        border: 1px solid rgba(244, 241, 232, 0.12);
        border-radius: 50%;
        animation: spatialFloatB 24s linear infinite;
      }

      .contact-qr-orbit::before,
      .contact-qr-orbit::after {
        content: "";
        position: absolute;
        inset: 10%;
        border: 1px dashed rgba(255, 89, 56, 0.18);
        border-radius: 50%;
      }

      .contact-qr-orbit::after {
        inset: 31%;
        border-style: solid;
        border-color: rgba(244, 241, 232, 0.09);
      }

      .contact-qr > span {
        position: absolute;
        z-index: 3;
        left: 50%;
        bottom: -22px;
        transform: translateX(-50%);
        color: rgba(244, 241, 232, 0.34);
        font-size: 8px;
        font-weight: 720;
        letter-spacing: 0.1em;
        white-space: nowrap;
      }

      .contact-list {
        display: grid;
        gap: 0;
        border-top: 1px solid rgba(244, 241, 232, 0.12);
      }

      .contact-list a,
      .contact-list button {
        min-height: 76px;
        padding: 18px 2px;
        border: 0;
        border-bottom: 1px solid rgba(244, 241, 232, 0.12);
        border-radius: 0;
        color: rgba(244, 241, 232, 0.72);
        background: transparent;
        text-align: left;
        cursor: pointer;
        transition: color 180ms ease, padding-left 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease;
      }

      .contact-list a:hover,
      .contact-list button:hover {
        padding-left: 12px;
        border-color: var(--accent);
        color: var(--paper);
      }

      .contact-list span { font-size: clamp(15px, 1.25vw, 18px); }
      .contact-list small { font-size: 8px; letter-spacing: 0.08em; }

      /* Video dialog. */
      .profile-video-modal {
        position: fixed;
        inset: 0;
        z-index: 240;
        display: grid;
        place-items: center;
        padding: 24px;
      }

      .profile-video-modal[hidden] { display: none; }

      .profile-video-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(1, 2, 2, 0.84);
        backdrop-filter: blur(20px);
      }

      .profile-video-dialog {
        position: relative;
        z-index: 1;
        width: min(980px, 92vw);
        max-height: 90svh;
        overflow: hidden;
        border: 1px solid rgba(244, 241, 232, 0.18);
        border-radius: 18px;
        background: #050606;
        box-shadow: 0 40px 140px rgba(0, 0, 0, 0.72);
      }

      .profile-video-head {
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px 0 20px;
        color: rgba(244, 241, 232, 0.46);
        font-size: 9px;
        font-weight: 720;
        letter-spacing: 0.1em;
      }

      .profile-video-head button {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(244, 241, 232, 0.14);
        border-radius: 50%;
        color: var(--paper);
        background: transparent;
        font-size: 20px;
        cursor: pointer;
      }

      .profile-video-dialog video {
        width: 100%;
        max-height: calc(90svh - 52px);
        background: #000;
      }

      body.is-modal-open {
        overflow: hidden;
      }

      /* Scroll choreography, excludes the existing project scene. */
      .scroll-stage {
        opacity: 0;
        transform: translateY(34px);
        filter: blur(8px);
        transition:
          opacity 760ms ease var(--stage-delay, 0ms),
          transform 940ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
          filter 760ms ease var(--stage-delay, 0ms);
      }

      .is-section-visible .scroll-stage {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }

      /* One-piece access dial: passcode and hold gesture share one focal point. */
      .gate-chamber[data-gate-version="biometric"] {
        --film-scale: 1;
        --edge-scale: 1.04;
        --edge-opacity: 0.78;
      }

      .gate-film {
        inset: 0;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100svh;
        transform: none;
        mask-image: none;
        background: #050707;
      }

      .gate-film-blur {
        object-fit: cover;
        filter: blur(42px) saturate(0.82) brightness(0.62);
        transform: scale(1.11);
        opacity: 1;
      }

      .gate-film-main {
        object-fit: cover;
        object-position: 50% 50%;
        -webkit-mask-image: none;
        mask-image: none;
        transform: scale(var(--film-scale));
        filter: saturate(0.82) contrast(1.04) brightness(0.7);
        transition: transform 120ms linear, filter 260ms ease;
        will-change: transform;
      }

      .gate-film-edge {
        inset: -2px;
        overflow: hidden;
        box-shadow: none;
        background:
          radial-gradient(ellipse at center, transparent 0 43%, rgba(5, 7, 7, 0.16) 66%, rgba(5, 7, 7, 0.9) 100%),
          linear-gradient(180deg, rgba(5, 7, 7, 0.46), transparent 20% 72%, rgba(5, 7, 7, 0.84));
      }

      .gate-film-edge::before,
      .gate-film-edge::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        pointer-events: none;
      }

      .gate-film-edge::before {
        width: 118vw;
        aspect-ratio: 1.9;
        border: 1px solid rgba(244, 241, 232, 0.08);
        box-shadow:
          0 0 0 7vw rgba(5, 7, 7, 0.08),
          0 0 0 18vw rgba(5, 7, 7, 0.1),
          inset 0 0 150px rgba(5, 7, 7, 0.72);
        opacity: var(--edge-opacity);
        transform: translate(-50%, -50%) scale(var(--edge-scale)) rotate(-4deg);
        transition: transform 120ms linear, opacity 160ms linear;
        animation: gateEdgeBreath 7s ease-in-out infinite alternate;
      }

      .gate-film-edge::after {
        width: min(78vw, 1180px);
        aspect-ratio: 2.1;
        border: 1px solid rgba(255, 89, 56, 0.12);
        transform: translate(-50%, -50%) rotate(7deg);
        filter: drop-shadow(0 0 34px rgba(255, 89, 56, 0.1));
        opacity: 0.55;
      }

      @keyframes gateEdgeBreath {
        from { border-radius: 46% 54% 51% 49% / 54% 48% 52% 46%; }
        to { border-radius: 53% 47% 44% 56% / 48% 56% 44% 52%; }
      }

      .gate-film-meta {
        left: clamp(24px, 4vw, 72px);
        right: clamp(24px, 4vw, 72px);
        bottom: 30px;
        opacity: 0.64;
      }

      .gate-sound {
        top: 28px;
        right: clamp(24px, 4vw, 72px);
        width: 42px;
        height: 42px;
        min-height: 42px;
        display: grid;
        place-items: center;
        padding: 0;
        border-color: rgba(244, 241, 232, 0.12);
        border-radius: 50%;
        color: rgba(244, 241, 232, 0.78);
        background: rgba(5, 7, 7, 0.26);
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 12px 34px rgba(0, 0, 0, 0.22);
        transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
      }

      .gate-sound:hover {
        transform: scale(1.06);
        border-color: rgba(244, 241, 232, 0.28);
        color: var(--paper);
        background: rgba(5, 7, 7, 0.46);
      }

      .gate-sound svg {
        position: absolute;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: opacity 160ms ease, transform 220ms ease;
      }

      .gate-sound-off {
        opacity: 0;
        transform: scale(0.72) rotate(-8deg);
      }

      .gate-sound.is-muted .gate-sound-on {
        opacity: 0;
        transform: scale(0.72) rotate(8deg);
      }

      .gate-sound.is-muted .gate-sound-off {
        opacity: 1;
        transform: scale(1) rotate(0);
      }

      .gate-access {
        width: min(360px, calc(100vw - 32px));
        height: min(360px, calc(100vw - 32px));
        display: grid;
        place-items: center;
        gap: 0;
        transform: translate(-50%, -50%);
        isolation: isolate;
      }

      .gate-access::before,
      .gate-access::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: 50%;
        pointer-events: none;
      }

      .gate-access::before {
        border: 1px solid rgba(244, 241, 232, 0.16);
        background: repeating-conic-gradient(from -20deg, rgba(244, 241, 232, 0.16) 0 0.45deg, transparent 0.7deg 9deg);
        -webkit-mask-image: radial-gradient(circle, transparent 0 88%, #000 88.5% 100%);
        mask-image: radial-gradient(circle, transparent 0 88%, #000 88.5% 100%);
        animation: gateAccessDial 30s linear infinite;
      }

      .gate-access::after {
        inset: 26px;
        border: 1px solid rgba(244, 241, 232, 0.08);
        background: radial-gradient(circle, rgba(5, 7, 7, 0.8) 0 46%, rgba(5, 7, 7, 0.45) 66%, transparent 76%);
        box-shadow:
          0 34px 120px rgba(0, 0, 0, 0.66),
          inset 0 0 80px rgba(244, 241, 232, 0.025),
          0 0 80px rgba(255, 89, 56, 0.06);
      }

      @keyframes gateAccessDial {
        to { transform: rotate(360deg); }
      }

      .gate-password,
      .gate-hold-wrap {
        grid-area: 1 / 1;
      }

      .gate-password {
        position: relative;
        z-index: 3;
        width: 250px;
        height: 250px;
        align-content: center;
        justify-items: center;
        gap: 22px;
        padding: 36px;
        border: 1px solid rgba(244, 241, 232, 0.12);
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.045), transparent 34%),
          rgba(4, 6, 6, 0.7);
        box-shadow: inset 0 0 46px rgba(244, 241, 232, 0.025);
        backdrop-filter: blur(24px) saturate(1.08);
        transition:
          opacity 420ms ease,
          transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
          filter 420ms ease,
          border-color 240ms ease;
      }

      .gate-password label {
        font-size: 9px;
        letter-spacing: 0.18em;
      }

      .gate-password-field {
        width: 154px;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
      }

      .gate-password input {
        height: 48px;
        padding: 0 0 0 0.32em;
        border-bottom-color: rgba(244, 241, 232, 0.22);
        text-align: center;
        font-size: 25px;
        letter-spacing: 0.32em;
      }

      .gate-password-field > span {
        color: rgba(244, 241, 232, 0.32);
        transition: color 200ms ease;
      }

      .gate-hold-wrap {
        z-index: 4;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.84) rotate(-8deg);
        filter: blur(10px);
        transition:
          opacity 460ms ease,
          transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
          filter 460ms ease;
      }

      .gate-chamber.is-arming .gate-password {
        border-color: rgba(255, 89, 56, 0.34);
        box-shadow: inset 0 0 46px rgba(255, 89, 56, 0.045), 0 0 64px rgba(255, 89, 56, 0.08);
      }

      .gate-chamber.is-arming .gate-access::before {
        animation-duration: 1.2s;
      }

      .gate-chamber.is-authorized .gate-password {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.78);
        filter: blur(14px);
      }

      .gate-chamber.is-authorized .gate-hold-wrap {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1) rotate(0);
        filter: blur(0);
      }

      .gate-chamber[data-gate-version="biometric"] .gate-hold {
        width: 264px;
        height: 264px;
        min-height: 264px;
        border-color: rgba(244, 241, 232, 0.16);
        background:
          radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.065), transparent 30%),
          radial-gradient(circle, rgba(255, 89, 56, 0.035), rgba(4, 6, 6, 0.9) 68%);
      }

      .gate-chamber.is-holding .gate-film-main {
        filter: saturate(0.9) contrast(1.06) brightness(0.78);
      }

      .gate-chamber.is-holding .gate-access::after {
        box-shadow:
          0 34px 120px rgba(0, 0, 0, 0.66),
          inset 0 0 92px rgba(255, 89, 56, 0.07),
          0 0 var(--hold-glow) rgba(255, 89, 56, 0.24);
      }

      .gate-system-status {
        opacity: 0.42;
      }

      /* Scroll-linked spatial choreography inspired by editorial motion sites. */
      .profile-hero {
        --hero-copy-y: 0px;
        --hero-copy-opacity: 1;
        --hero-stage-y: 0px;
        --hero-stage-scale: 1;
        --hero-stage-rotate: 0deg;
      }

      .profile-hero .hero-kinetic-copy {
        opacity: var(--hero-copy-opacity);
        transform: translate3d(0, var(--hero-copy-y), 0);
        transition: opacity 120ms linear, transform 180ms ease-out;
        will-change: opacity, transform;
      }

      .hero-spatial-stage::before,
      .hero-spatial-stage::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        pointer-events: none;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }

      .hero-spatial-stage::before {
        width: min(51vw, 760px);
        aspect-ratio: 1;
        background:
          repeating-conic-gradient(from 18deg, rgba(244, 241, 232, 0.11) 0 0.6deg, transparent 0.8deg 11deg),
          radial-gradient(circle, transparent 0 36%, rgba(255, 89, 56, 0.055) 54%, transparent 72%);
        -webkit-mask-image: radial-gradient(circle, transparent 0 44%, #000 45% 62%, transparent 63%);
        mask-image: radial-gradient(circle, transparent 0 44%, #000 45% 62%, transparent 63%);
        opacity: 0.42;
        animation: spatialDial 38s linear infinite;
      }

      .hero-spatial-stage::after {
        width: min(30vw, 430px);
        aspect-ratio: 1;
        border: 1px solid rgba(244, 241, 232, 0.08);
        box-shadow:
          0 0 0 42px rgba(255, 255, 255, 0.012),
          0 0 0 118px rgba(255, 89, 56, 0.018),
          0 0 110px rgba(255, 89, 56, 0.11);
        opacity: 0.76;
      }

      @keyframes spatialDial {
        to { transform: translate(-50%, -50%) rotate(360deg); }
      }

      body.hero-revealing .hero-spatial-stage {
        transform:
          translate3d(
            calc((var(--mx, 0.5) - 0.5) * 15px),
            calc((var(--my, 0.5) - 0.5) * 12px + var(--hero-stage-y)),
            0
          )
          rotate(var(--hero-stage-rotate))
          scale(var(--hero-stage-scale));
        transition:
          opacity 820ms ease 250ms,
          transform 220ms ease-out;
        will-change: transform;
      }

      .about-profile {
        --about-progress: 0;
        width: min(1420px, calc(100% - 68px));
        margin-top: 0;
        padding: clamp(104px, 10vw, 156px) 0 clamp(86px, 8vw, 128px);
        align-content: center;
        background:
          radial-gradient(ellipse 76% 240px at 50% 0%, rgba(255, 89, 56, 0.035), transparent 72%),
          linear-gradient(180deg, rgba(5, 6, 6, 0.94) 0%, rgba(5, 6, 6, 0.36) 17%, transparent 36%);
      }

      .about-titlebar,
      .about-profile-grid,
      .about-path {
        margin-inline: clamp(30px, 3.2vw, 52px);
      }

      .about-profile::before {
        border-top-color: transparent;
        opacity: calc(0.2 + var(--about-progress) * 0.8);
        transform: scaleX(calc(0.94 + var(--about-progress) * 0.06));
        transform-origin: center top;
        filter: blur(calc((1 - var(--about-progress)) * 5px));
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 9%, #000 25%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 9%, #000 25%, #000 100%);
        transition: opacity 120ms linear, transform 180ms ease-out, filter 180ms ease-out;
      }

      .about-titlebar > * {
        opacity: calc(0.38 + var(--about-progress) * 0.62);
        transform: translate3d(0, calc((1 - var(--about-progress)) * 22px), 0);
        transition: opacity 140ms linear, transform 180ms ease-out;
      }

      .about-profile-grid {
        opacity: calc(0.56 + var(--about-progress) * 0.44);
        transform: translate3d(0, calc((1 - var(--about-progress)) * 34px), 0);
        transition: opacity 140ms linear, transform 190ms ease-out;
      }

      .about-portrait::after {
        display: none;
      }

      .about-profile::after {
        transform:
          translate3d(0, calc((0.5 - var(--about-progress)) * 70px), 0)
          scale(calc(0.92 + var(--about-progress) * 0.08));
        transition: transform 180ms ease-out;
      }

      .about-step {
        --step-delay: 0ms;
        transform: translate3d(-18px, 26px, 0) scale(0.985);
        opacity: 0;
        filter: blur(4px);
        transform-origin: left center;
        transition:
          transform 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--step-delay),
          opacity 520ms ease var(--step-delay),
          filter 620ms ease var(--step-delay);
        will-change: transform, opacity;
      }

      .about-path.is-sequence-visible .about-step {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
        filter: blur(0);
      }

      .about-step::after {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        width: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 72%, white), transparent);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.32);
        transition: width 760ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--step-delay) + 120ms);
      }

      .about-path.is-sequence-visible .about-step::after {
        width: 100%;
      }

      .about-step::before {
        transform: scale(0.72);
        opacity: 0.3;
        transition:
          transform 520ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--step-delay) + 80ms),
          opacity 420ms ease calc(var(--step-delay) + 80ms);
      }

      .about-path.is-sequence-visible .about-step::before {
        transform: scale(1);
        opacity: 1;
      }

      .contact {
        --contact-progress: 0;
      }

      .contact-atmosphere {
        transform: translate3d(0, calc((0.5 - var(--contact-progress)) * 44px), 0);
        opacity: calc(0.44 + var(--contact-progress) * 0.56);
        transition: transform 180ms ease-out, opacity 180ms linear;
      }

      .contact-qr {
        transform:
          translate3d(0, calc((1 - var(--contact-progress)) * 30px), 0)
          scale(calc(0.9 + var(--contact-progress) * 0.1));
        transition: transform 200ms ease-out;
      }

      .contact-list a,
      .contact-list button {
        --contact-item-progress: 0;
        opacity: calc(0.22 + var(--contact-item-progress) * 0.78);
        transform: translate3d(calc((1 - var(--contact-item-progress)) * 24px), 0, 0);
        transition:
          opacity 180ms linear,
          transform 220ms ease-out,
          color 180ms ease,
          padding-left 260ms cubic-bezier(0.16, 1, 0.3, 1),
          border-color 180ms ease;
      }

      @media (prefers-reduced-motion: reduce) {
        .profile-hero .hero-kinetic-copy,
        body.hero-revealing .hero-spatial-stage,
        .about-profile::before,
        .about-titlebar > *,
        .about-profile-grid,
        .about-profile::after,
        .about-step,
        .contact-atmosphere,
        .contact-qr,
        .contact-list a,
        .contact-list button {
          opacity: 1 !important;
          transform: none !important;
        }

        .about-path::before {
          transform: scaleX(1) !important;
        }

        .about-step {
          filter: none !important;
        }
      }

      @media (max-width: 1080px) {
        .profile-hero .hero-kinetic-shell {
          width: calc(100% - 42px);
          grid-template-columns: minmax(350px, 0.9fr) minmax(390px, 1.1fr);
          gap: 24px;
        }

        .site .topbar { width: calc(100% - 32px); }
        .site .nav a { padding-inline: 9px; }

        .about-profile-grid {
          grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
          gap: 48px;
        }

        .contact-panel {
          grid-template-columns: minmax(320px, 1fr) minmax(230px, 0.64fr) minmax(280px, 0.8fr);
          gap: 30px;
        }
      }

      @media (max-width: 820px) {
        .site {
          padding-bottom: calc(78px + env(safe-area-inset-bottom));
        }

        .site .topbar {
          top: 12px;
          height: 58px;
          grid-template-columns: auto auto;
          border-radius: 18px;
        }

        .site .topbar .nav {
          top: 68px;
          left: 0;
          right: 0;
          grid-column: 1 / -1;
          border-radius: 16px;
        }

        .profile-hero {
          min-height: auto;
          padding-top: 96px;
        }

        .hero-edition { top: 90px; left: 22px; right: 22px; }

        .profile-hero .hero-kinetic-shell {
          min-height: 920px;
          grid-template-columns: 1fr;
          grid-template-rows: auto minmax(420px, 1fr) auto;
          gap: 0;
          padding-top: 70px;
        }

        .hero-create-title { font-size: clamp(76px, 18vw, 118px); }
        .hero-spatial-stage { min-height: 460px; }
        .hero-spatial-ring-a { width: min(86vw, 620px); }
        .hero-spatial-ring-b { width: min(66vw, 470px); }

        .about-profile-grid { grid-template-columns: 1fr; }
        .about-portrait { width: min(460px, 100%); justify-self: center; }
        .about-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }

        .contact { min-height: auto; }
        .contact-panel {
          grid-template-columns: 1fr 1fr;
          min-height: 0;
        }
        .contact-copy { grid-column: 1 / -1; }
      }

      @media (max-width: 680px) {
        .intro-brand-intro { width: calc(100% - 32px); }
        .intro-brand-intro h1 { gap: 0.12em; font-size: clamp(25px, 8.1vw, 38px); }
        .intro-brand-code { font-size: 7px; letter-spacing: 0.1em; }
        .intro-brand-meta, .intro-brand-line { width: min(82vw, 420px); }

        .gate-film {
          width: 100vw;
          height: 100svh;
        }

        .gate-film-blur {
          filter: blur(30px) saturate(0.76) brightness(0.56);
          transform: scale(1.16);
        }

        .gate-film-main {
          -webkit-mask-image: none;
          mask-image: none;
        }

        .gate-access {
          top: 50%;
          width: min(320px, calc(100vw - 24px));
          height: min(320px, calc(100vw - 24px));
        }

        .gate-password { width: 224px; height: 224px; padding: 30px; }
        .gate-chamber[data-gate-version="biometric"] .gate-hold {
          width: 230px;
          height: 230px;
          min-height: 230px;
        }

        .gate-system-status span:nth-child(2) { display: none; }

        .site .topbar {
          width: calc(100% - 20px);
          padding: 7px 8px;
        }

        .site .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
        .site .brand-text span { display: none; }
        .theme-switch { display: none; }

        .profile-hero .hero-kinetic-shell {
          width: calc(100% - 28px);
          min-height: 790px;
          grid-template-rows: auto minmax(330px, 1fr) auto;
          padding-top: 58px;
        }

        .hero-edition { font-size: 7px; }
        .hero-kinetic-overline { font-size: 9px; }
        .hero-create-title { font-size: clamp(68px, 21vw, 96px); }
        .hero-lede { font-size: 13px; }
        .hero-kinetic-actions a { min-height: 44px; gap: 20px; padding: 10px 13px; }
        .hero-spatial-stage { min-height: 350px; }
        .hero-spatial-ring-a { width: 94vw; }
        .hero-spatial-ring-b { width: 72vw; }
        .hero-spatial-caption { right: 0; bottom: 4%; }

        .about-profile {
          width: 100%;
          margin-top: 0;
          padding: 92px 18px;
        }

        .about-titlebar,
        .about-profile-grid,
        .about-path {
          margin-inline: 0;
        }

        .about-titlebar { align-items: start; }
        .about-titlebar > p { display: none; }
        .about-path { grid-template-columns: 1fr; gap: 34px; }
        .about-step { min-height: 0; padding-bottom: 18px; }

        .mouse-tools-head {
          align-items: start;
        }
        .mouse-tools-head > p {
          margin: 14px 0 0;
          text-align: left;
        }

        .contact {
          padding: 100px 18px 62px;
        }
        .contact-panel { grid-template-columns: 1fr; gap: 58px; }
        .contact-copy { grid-column: auto; }
        .contact-copy h2 { font-size: clamp(40px, 12vw, 58px); }
        .contact-qr { width: min(82vw, 310px); }
        .contact-list { width: 100%; }
        .profile-video-modal { padding: 10px; }
        .profile-video-dialog { width: 100%; border-radius: 14px; }
      }

      @media (prefers-reduced-motion: reduce) {
        .gate-signal,
        .hero-create-title em,
        .hero-spatial-ring,
        .hero-spatial-node,
        .contact-qr-orbit,
        .contact-status i {
          animation: none !important;
        }

        .scroll-stage {
          opacity: 1;
          transform: none;
          filter: none;
        }
      }

      /* 2026-08-08 composition pass: centered hero, quiet capability flow, signal-field finale. */
      .site .topbar {
        grid-template-columns: minmax(168px, 1fr) auto minmax(168px, 1fr);
      }

      .site .brand-mark {
        width: 44px;
        height: 44px;
        padding: 0;
        overflow: hidden;
        border-radius: 12px;
        background: #f4f2ed;
      }

      .site .brand-mark img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: 50% 42%;
        transform: scale(1.14);
      }

      .site .topbar-actions {
        min-width: 168px;
        justify-content: flex-end;
      }

      .profile-hero {
        min-height: 100svh;
        padding: 98px 0 20px;
        background:
          radial-gradient(ellipse at 50% 48%, rgba(255, 89, 56, 0.1), transparent 28%),
          radial-gradient(ellipse at 18% 32%, rgba(255, 244, 226, 0.035), transparent 34%),
          linear-gradient(180deg, #050606 0%, #070707 66%, #050606 100%);
      }

      .profile-hero::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(90deg, transparent 0 8%, rgba(244, 241, 232, 0.026) 8.05%, transparent 8.1% 91.9%, rgba(244, 241, 232, 0.026) 91.95%, transparent 92%),
          linear-gradient(180deg, transparent 0 22%, rgba(244, 241, 232, 0.018) 22.1%, transparent 22.2% 78%, rgba(244, 241, 232, 0.018) 78.1%, transparent 78.2%);
        mask-image: radial-gradient(ellipse at center, #000 0 58%, transparent 92%);
      }

      .hero-fx-canvas {
        opacity: 0.9;
        mix-blend-mode: screen;
      }

      .profile-hero .hero-kinetic-shell {
        position: relative;
        width: min(1500px, calc(100% - 56px));
        min-height: calc(100svh - 118px);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        place-items: center;
        gap: 0;
        padding: 18px 0 0;
      }

      .profile-hero .hero-kinetic-copy {
        position: relative;
        z-index: 8;
        width: min(940px, 92vw);
        max-width: none;
        align-self: center;
        justify-items: center;
        gap: 20px;
        padding-top: clamp(54px, 7vh, 84px);
        text-align: center;
      }

      .hero-kinetic-overline {
        display: block;
        width: fit-content;
        margin: 0 auto;
        color: rgba(244, 241, 232, 0.7);
        font-size: clamp(10px, 0.8vw, 12px);
        font-weight: 800;
        letter-spacing: 0;
        text-shadow: 0 0 24px rgba(244, 241, 232, 0.12);
      }

      .hero-create-title {
        justify-content: center;
        gap: 0;
        width: 100%;
        margin: 0 0 clamp(330px, 37vh, 410px);
        font-size: clamp(76px, 8.6vw, 132px);
        line-height: 0.82;
        text-align: center;
        text-shadow: 0 18px 64px rgba(0, 0, 0, 0.72);
      }

      .hero-create-title > span {
        display: inline-block;
        transform-origin: 50% 100%;
      }

      .hero-create-title > span + span {
        margin-left: 0.02em;
      }

      .hero-create-title em {
        align-self: flex-start;
        margin: 0.08em 0 0 0.12em;
        color: var(--accent);
        font-size: 0.32em;
        font-style: normal;
        font-weight: 520;
        line-height: 1;
        text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.34);
        animation: infinityBreath 4.8s ease-in-out infinite;
      }

      body.intro-active .hero-create-title > span {
        opacity: 0;
        transform: translateY(42px) rotateX(-32deg);
        filter: blur(14px);
      }

      body.hero-revealing .hero-create-title > span {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        filter: blur(0);
        transition:
          opacity 760ms ease,
          transform 1050ms cubic-bezier(0.16, 1, 0.3, 1),
          filter 820ms ease;
      }

      body.hero-revealing .hero-create-title > span:nth-child(2) {
        transition-delay: 390ms;
      }

      body.hero-revealing .hero-create-title {
        animation: heroTitleBreath 7.2s ease-in-out 1.35s infinite;
      }

      @keyframes heroTitleBreath {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-5px) scale(1.006); }
      }

      .hero-lede {
        max-width: 660px;
        margin: 0 auto;
        font-size: clamp(14px, 1.2vw, 17px);
        line-height: 1.82;
        text-wrap: balance;
      }

      .hero-kinetic-actions {
        justify-content: center;
        margin-top: 4px;
      }

      .hero-kinetic-actions a {
        min-width: 138px;
        border-radius: 10px;
      }

      .hero-spatial-stage {
        position: absolute;
        z-index: 4;
        inset: 0;
        min-height: 0;
        pointer-events: auto;
        transform: translate3d(calc((var(--mx, 0.5) - 0.5) * 22px), calc((var(--my, 0.5) - 0.5) * 16px), 0);
      }

      .hero-spatial-stage::before {
        width: min(78vw, 1180px);
        opacity: 0.16;
      }

      .hero-spatial-stage::after {
        width: min(54vw, 780px);
        opacity: 0.34;
        box-shadow: 0 0 0 90px rgba(255, 255, 255, 0.008), 0 0 160px rgba(255, 89, 56, 0.08);
      }

      .hero-spatial-axis {
        width: min(96vw, 1680px);
        opacity: 0.42;
      }

      .hero-spatial-ring-a {
        width: min(82vw, 1200px);
        aspect-ratio: 2.4;
        opacity: 0.46;
      }

      .hero-spatial-ring-b {
        width: min(62vw, 920px);
        opacity: 0.44;
      }

      .hero-spatial-core {
        top: 49%;
        width: min(72vw, 900px);
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        color: transparent;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-mask-image: radial-gradient(ellipse at center, #000 0 56%, rgba(0, 0, 0, 0.82) 67%, transparent 88%);
        mask-image: radial-gradient(ellipse at center, #000 0 56%, rgba(0, 0, 0, 0.82) 67%, transparent 88%);
        animation: heroObjectFloat 7.6s ease-in-out infinite;
      }

      .hero-infinity-art {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: saturate(0.86) contrast(1.08) brightness(0.82);
        transform: scale(1.04);
      }

      .hero-spatial-core {
        z-index: 3;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        contain: strict;
        aspect-ratio: auto;
        transform: none;
        -webkit-mask-image: radial-gradient(ellipse at center, #000 0 52%, rgba(0, 0, 0, 0.84) 68%, transparent 92%);
        mask-image: radial-gradient(ellipse at center, #000 0 52%, rgba(0, 0, 0, 0.84) 68%, transparent 92%);
        animation: none;
      }

      .hero-infinity-cutout {
        position: absolute;
        left: 50%;
        top: 55.5%;
        width: min(52vw, 720px);
        height: auto;
        display: block;
        opacity: 0;
        object-fit: contain;
        transform: translate(-50%, -50%) scale(0.96);
        filter: drop-shadow(0 34px 48px rgba(0, 0, 0, 0.46));
        transition: opacity 900ms ease 220ms, transform 1200ms cubic-bezier(0.16, 1, 0.3, 1) 220ms;
      }

      body.hero-revealing .hero-infinity-cutout {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        animation: infinityCutoutBreath 7.6s ease-in-out 1.4s infinite;
      }

      @keyframes infinityCutoutBreath {
        0%, 100% { transform: translate(-50%, -50%) scale(1); }
        50% { transform: translate(-50%, calc(-50% - 10px)) scale(1.016); }
      }

      .hero-quote-field {
        position: absolute;
        z-index: 1;
        inset: 17% 0 13%;
        overflow: hidden;
        pointer-events: none;
        opacity: 0.72;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
      }

      .hero-quote-track {
        position: absolute;
        left: 0;
        width: max-content;
        display: flex;
        align-items: center;
        will-change: transform;
      }

      .hero-quote-track span {
        display: block;
        padding-right: 0.38em;
        color: rgba(244, 241, 232, 0.075);
        font-family: var(--display-font);
        font-size: clamp(84px, 10.5vw, 170px);
        font-weight: 720;
        line-height: 0.82;
        letter-spacing: 0;
        white-space: nowrap;
        text-transform: uppercase;
      }

      .hero-quote-track-a {
        top: 14%;
        animation: heroQuoteMarquee 34s linear infinite;
      }

      .hero-quote-track-b {
        bottom: 7%;
        opacity: 0.62;
        animation: heroQuoteMarqueeReverse 42s linear infinite;
      }

      .hero-quote-track-b span {
        color: transparent;
        -webkit-text-stroke: 1px rgba(244, 241, 232, 0.1);
      }

      @keyframes heroQuoteMarquee {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(-50%, 0, 0); }
      }

      @keyframes heroQuoteMarqueeReverse {
        from { transform: translate3d(-50%, 0, 0); }
        to { transform: translate3d(0, 0, 0); }
      }

      @keyframes heroObjectFloat {
        0%, 100% { transform: translate(-50%, -49%) scale(0.985) rotate(-0.4deg); }
        50% { transform: translate(-50%, -51%) scale(1.015) rotate(0.4deg); }
      }

      .hero-spatial-caption {
        right: 8%;
        bottom: 15%;
      }

      .hero-spatial-node-a { left: 11%; top: 34%; }
      .hero-spatial-node-b { right: 9%; top: 58%; }
      .hero-spatial-node-c { left: 52%; bottom: 8%; }

      .hero-kinetic-footer {
        display: none;
      }

      .capability-system {
        min-height: 100svh;
        padding: 116px 0 82px;
        background:
          radial-gradient(ellipse at 50% 54%, rgba(255, 89, 56, 0.055), transparent 37%),
          linear-gradient(180deg, #060707, #080909 55%, #050606);
      }

      .capability-system .hero-canvas {
        opacity: 0.16;
      }

      .capability-system .poster-shell {
        width: min(1240px, calc(100% - 56px));
        min-height: calc(100svh - 198px);
      }

      .capability-system .poster-stage {
        min-height: calc(100svh - 198px);
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
      }

      .capability-system .poster-stage::before {
        display: none;
      }

      .capability-system .poster-stage::after {
        opacity: 0.08;
        mask-image: radial-gradient(ellipse at center, #000 0 26%, transparent 72%);
      }

      .capability-unified {
        gap: clamp(44px, 7vh, 74px);
      }

      .capability-head {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        text-align: center;
      }

      .capability-eyebrow {
        margin: 0;
      }

      .capability-head h2 {
        max-width: 880px;
        margin: 0 auto;
        font-family: var(--display-font);
        font-size: clamp(42px, 5vw, 70px);
        line-height: 0.98;
        font-weight: 720;
        text-wrap: balance;
      }

      .capability-head > div > p {
        max-width: 700px;
        margin: 20px auto 0;
        font-size: 13px;
      }

      .capability-console {
        width: min(1080px, 100%);
        margin: 0 auto;
        border: 0;
        background: transparent;
      }

      .capability-pipeline {
        border-top: 1px solid rgba(244, 241, 232, 0.09);
        border-bottom: 1px solid rgba(244, 241, 232, 0.09);
      }

      .capability-pipeline button {
        min-height: 94px;
        padding-block: 16px;
        background: rgba(255, 255, 255, 0.006);
      }

      .capability-pipeline button::before {
        background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.065));
      }

      .capability-focus {
        min-height: 300px;
        grid-template-columns: minmax(210px, 0.58fr) minmax(0, 1.42fr);
      }

      .capability-engine {
        background: radial-gradient(circle, rgba(var(--accent-rgb), 0.065), transparent 61%);
      }

      .engine-ring-a { width: min(220px, 70%); opacity: 0.7; }
      .engine-ring-b { width: min(176px, 56%); opacity: 0.34; }
      .engine-ring-c { width: min(124px, 42%); opacity: 0.2; }

      .engine-core {
        width: 98px;
        background: rgba(8, 10, 10, 0.72);
      }

      .capability-detail {
        max-width: 720px;
        padding: clamp(34px, 5vw, 66px);
      }

      .capability-detail h3 {
        font-size: clamp(28px, 3.1vw, 44px);
      }

      .capability-evidence div {
        min-height: 78px;
      }

      .capability-evidence strong {
        font-size: clamp(22px, 2.3vw, 32px);
      }

      .mouse-tools-head {
        top: clamp(84px, 10vh, 122px);
        gap: 14px;
        align-items: start;
      }

      .mouse-tools-head h2 {
        font-size: clamp(48px, 5.4vw, 80px);
        line-height: 0.94;
      }

      .mouse-tools-head > p {
        max-width: 520px;
        margin: 6px 0 0;
        text-align: left;
      }

      .mouse-tools-orbit {
        top: 31%;
        height: 55%;
      }

      .mouse-tools-focus {
        top: 48%;
      }

      .mouse-tool-node[data-tool="chatgpt"] .mouse-tool-mark,
      .mouse-tool-node[data-tool="codex"] .mouse-tool-mark,
      .mouse-tool-node[data-tool="doubao"] .mouse-tool-mark {
        background: rgba(244, 241, 232, 0.94);
      }

      .mouse-tool-node[data-tool="chatgpt"] img,
      .mouse-tool-node[data-tool="codex"] img,
      .mouse-tool-node[data-tool="doubao"] img {
        width: 88%;
        height: 88%;
        border-radius: 20%;
        filter: none;
      }

      .contact {
        min-height: 100svh;
        padding: 112px max(30px, calc((100vw - 1380px) / 2)) 56px;
        background:
          radial-gradient(ellipse at 50% 46%, rgba(255, 89, 56, 0.075), transparent 29%),
          linear-gradient(180deg, #050606, #030404);
      }

      .contact-fx-canvas {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        mix-blend-mode: screen;
      }

      .contact-atmosphere {
        z-index: 1;
      }

      .contact-atmosphere i {
        left: 50%;
        top: 54%;
        width: min(88vw, 1320px);
        opacity: 0.66;
      }

      .contact-panel {
        z-index: 3;
        min-height: calc(100svh - 168px);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: clamp(28px, 4vh, 48px);
        align-content: center;
      }

      .contact-copy {
        display: grid;
        justify-items: center;
        text-align: center;
      }

      .contact-copy h2 {
        max-width: 900px;
        margin: 14px auto 20px;
        font-size: clamp(46px, 6vw, 82px);
        line-height: 1.03;
        text-wrap: balance;
      }

      .contact-copy > p:not(.eyebrow) {
        max-width: 620px;
        margin-inline: auto;
        font-size: 14px;
        text-wrap: balance;
      }

      .contact-status {
        margin-top: 24px;
      }

      .contact-qr {
        width: min(22vw, 230px);
        min-width: 190px;
        padding: 16px;
      }

      .contact-qr::after {
        content: "";
        position: absolute;
        z-index: 4;
        left: 13%;
        right: 13%;
        top: 18%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.75);
        animation: qrScan 3.2s ease-in-out infinite;
      }

      @keyframes qrScan {
        0%, 100% { transform: translateY(0); opacity: 0; }
        18% { opacity: 0.72; }
        70% { opacity: 0.72; }
        82% { transform: translateY(145px); opacity: 0; }
      }

      .contact-qr-orbit {
        inset: -28px;
        opacity: 0.72;
      }

      .contact-list {
        width: min(1180px, 100%);
        justify-self: center;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border-top: 1px solid rgba(244, 241, 232, 0.12);
        border-bottom: 1px solid rgba(244, 241, 232, 0.1);
      }

      .contact-list a,
      .contact-list button {
        min-height: 72px;
        padding: 14px 18px;
        display: grid;
        align-content: center;
        gap: 6px;
        border-right: 1px solid rgba(244, 241, 232, 0.09);
        border-bottom: 0;
      }

      .contact-list > :last-child {
        border-right: 0;
      }

      .contact-list a:hover,
      .contact-list button:hover {
        padding-left: 24px;
        background: rgba(var(--accent-rgb), 0.055);
      }

      .contact-list span {
        overflow-wrap: anywhere;
        font-size: clamp(12px, 1.05vw, 16px);
      }

      @media (max-width: 1080px) {
        .profile-hero .hero-kinetic-shell {
          width: calc(100% - 40px);
          grid-template-columns: 1fr;
        }

        .hero-create-title {
          margin-bottom: clamp(300px, 35vh, 370px);
        }

        .hero-spatial-core {
          width: min(86vw, 840px);
        }

        .contact-list {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .contact-list > :nth-child(3) {
          border-right: 0;
        }

        .contact-list > :nth-child(-n + 3) {
          border-bottom: 1px solid rgba(244, 241, 232, 0.09);
        }
      }

      @media (max-width: 820px) {
        .site .topbar {
          grid-template-columns: auto auto;
        }

        .site .topbar-actions {
          min-width: 0;
        }

        .profile-hero .hero-kinetic-shell {
          min-height: 820px;
          grid-template-rows: 1fr auto;
          padding-top: 40px;
        }

        .hero-create-title {
          margin-bottom: 270px;
          font-size: clamp(68px, 16vw, 104px);
        }

        .hero-spatial-core { width: 100%; }

        .hero-infinity-cutout {
          top: 54%;
          width: min(68vw, 520px);
        }

        .capability-head h2 br {
          display: none;
        }

        .capability-focus {
          grid-template-columns: minmax(180px, 0.52fr) minmax(0, 1.48fr);
        }
      }

      @media (max-width: 680px) {
        .site .brand-mark {
          width: 40px;
          height: 40px;
        }

        .profile-hero {
          padding-top: 88px;
        }

        .hero-edition {
          top: 82px;
        }

        .profile-hero .hero-kinetic-shell {
          width: calc(100% - 24px);
          min-height: 760px;
          padding-top: 50px;
        }

        .hero-kinetic-overline {
          font-size: 9px;
        }

        .hero-create-title {
          margin-bottom: 224px;
          font-size: clamp(58px, 18vw, 82px);
        }

        .hero-spatial-core { width: 100%; }

        .hero-infinity-cutout {
          top: 52.5%;
          width: min(80vw, 390px);
        }

        .hero-quote-field {
          inset: 20% 0 16%;
        }

        .hero-quote-track span {
          font-size: clamp(54px, 18vw, 86px);
        }

        .hero-spatial-caption,
        .hero-spatial-node-c {
          display: none;
        }

        .hero-lede {
          max-width: 340px;
          font-size: 12px;
        }

        .hero-kinetic-actions {
          width: min(340px, 100%);
        }

        .hero-kinetic-actions a {
          min-width: 0;
          flex: 1;
          gap: 12px;
        }

        .capability-system {
          padding: 92px 0 60px;
        }

        .capability-system .poster-shell {
          width: calc(100% - 28px);
        }

        .capability-head h2 {
          font-size: clamp(36px, 11vw, 48px);
        }

        .capability-pipeline button {
          min-height: 76px;
        }

        .capability-focus {
          grid-template-columns: 1fr;
        }

        .capability-engine {
          min-height: 220px;
        }

        .mouse-tools-head h2 {
          font-size: clamp(38px, 12vw, 52px);
        }

        .mouse-tools-head > p {
          max-width: 300px;
          margin-left: 0;
          font-size: 11px;
        }

        .mouse-tools-orbit {
          top: 30%;
        }

        .contact {
          padding: 96px 18px 48px;
        }

        .contact-panel {
          min-height: 0;
          gap: 42px;
        }

        .contact-copy h2 {
          font-size: clamp(40px, 12vw, 58px);
        }

        .contact-copy h2 br {
          display: none;
        }

        .contact-qr {
          width: min(68vw, 230px);
        }

        .contact-list {
          grid-template-columns: 1fr;
        }

        .contact-list a,
        .contact-list button {
          min-height: 62px;
          border-right: 0;
          border-bottom: 1px solid rgba(244, 241, 232, 0.09);
        }

        .contact-list > :nth-child(3) {
          border-right: 0;
        }

        .contact-list > :last-child {
          border-bottom: 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-spatial-core,
        .hero-infinity-cutout,
        .hero-quote-orbit .orbit-copy-primary,
        .hero-quote-orbit .orbit-copy-secondary,
        .contact-qr::after {
          animation: none !important;
        }
      }

      /* Capability map: four visible domains connected to one operating core. */
      .cap-map-section {
        position: relative;
        min-height: 100svh;
        padding: clamp(112px, 10vw, 164px) 0 clamp(92px, 9vw, 142px);
        overflow: hidden;
        isolation: isolate;
        background:
          radial-gradient(circle at 50% 52%, rgba(var(--accent-rgb), 0.075), transparent 24%),
          linear-gradient(180deg, #050606 0%, #080909 48%, #050606 100%);
      }

      .cap-map-section::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        opacity: 0.6;
        background:
          linear-gradient(90deg, rgba(244, 241, 232, 0.025) 1px, transparent 1px),
          linear-gradient(rgba(244, 241, 232, 0.018) 1px, transparent 1px);
        background-size: 74px 74px;
        -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, transparent 76%);
        mask-image: radial-gradient(ellipse at center, #000 18%, transparent 76%);
        pointer-events: none;
      }

      .cap-map-section .hero-canvas {
        position: absolute;
        z-index: -1;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.16;
        mix-blend-mode: screen;
        pointer-events: none;
      }

      .cap-map-shell {
        position: relative;
        width: min(1480px, calc(100% - 128px));
        margin: 0 auto;
      }

      .cap-map-head {
        display: grid;
        grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
        gap: clamp(44px, 8vw, 132px);
        align-items: end;
        padding-bottom: clamp(34px, 4vw, 58px);
        border-bottom: 1px solid rgba(244, 241, 232, 0.1);
      }

      .cap-map-kicker {
        display: block;
        margin-bottom: 13px;
        color: var(--accent);
        font-size: 10px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .cap-map-head h2 {
        margin: 0;
        font-size: clamp(44px, 6.2vw, 88px);
        font-weight: 760;
        line-height: 0.92;
      }

      .cap-map-head > p {
        max-width: 720px;
        margin: 0;
        color: rgba(244, 241, 232, 0.72);
        font-size: clamp(22px, 2.5vw, 38px);
        font-weight: 600;
        line-height: 1.34;
        text-wrap: balance;
      }

      .cap-map-field {
        --map-x: 0;
        --map-y: 0;
        position: relative;
        min-height: 820px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(260px, 1fr));
        gap: 126px clamp(260px, 22vw, 380px);
        align-items: stretch;
        padding: 74px 0 34px;
      }

      .cap-map-field::before,
      .cap-map-field::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        pointer-events: none;
      }

      .cap-map-field::before {
        width: min(58vw, 820px);
        aspect-ratio: 1.7;
        border: 1px solid rgba(244, 241, 232, 0.075);
        transform: translate(-50%, -50%) rotate(calc(-7deg + var(--map-x) * 1deg));
        transition: transform 380ms ease-out;
      }

      .cap-map-field::after {
        width: min(38vw, 540px);
        aspect-ratio: 1;
        border: 1px dashed rgba(var(--accent-rgb), 0.18);
        transform: translate(-50%, -50%) rotate(calc(18deg + var(--map-y) * 2deg));
        opacity: 0.66;
        transition: transform 440ms ease-out;
      }

      .cap-map-core {
        position: absolute;
        z-index: 5;
        left: 50%;
        top: 50%;
        width: clamp(184px, 16vw, 238px);
        aspect-ratio: 1;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 9px;
        padding: 24px;
        border: 1px solid rgba(244, 241, 232, 0.16);
        border-radius: 50%;
        color: var(--paper);
        background:
          radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.08), transparent 28%),
          rgba(7, 9, 9, 0.88);
        box-shadow:
          0 0 0 30px rgba(244, 241, 232, 0.012),
          0 0 0 86px rgba(var(--accent-rgb), 0.012),
          0 0 90px rgba(var(--accent-rgb), 0.14),
          inset 0 0 44px rgba(var(--accent-rgb), 0.05);
        transform:
          translate(calc(-50% + var(--map-x) * 5px), calc(-50% + var(--map-y) * 5px));
        transition: transform 320ms ease-out, border-color 260ms ease, box-shadow 260ms ease;
      }

      .cap-map-core::before,
      .cap-map-core::after {
        content: "";
        position: absolute;
        inset: -18px;
        border: 1px solid rgba(244, 241, 232, 0.08);
        border-radius: 50%;
        animation: capMapOrbit 18s linear infinite;
      }

      .cap-map-core::after {
        inset: -38px;
        border-style: dashed;
        border-color: rgba(var(--accent-rgb), 0.18);
        animation-duration: 28s;
        animation-direction: reverse;
      }

      @keyframes capMapOrbit {
        to { rotate: 360deg; }
      }

      .cap-map-core small,
      .cap-map-core strong,
      .cap-map-core p {
        position: relative;
        z-index: 1;
      }

      .cap-map-core small {
        color: var(--accent);
        font-size: 9px;
        font-weight: 820;
        text-transform: uppercase;
      }

      .cap-map-core strong {
        font-size: clamp(24px, 2.7vw, 36px);
        line-height: 1;
      }

      .cap-map-core p {
        max-width: 160px;
        margin: 3px 0 0;
        color: rgba(244, 241, 232, 0.5);
        font-size: 10px;
        line-height: 1.6;
        text-align: center;
      }

      .cap-map-link {
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        width: 35%;
        height: 1px;
        overflow: visible;
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.44), rgba(244, 241, 232, 0.08) 58%, transparent);
        transform-origin: left center;
        opacity: 0.4;
        transition: opacity 240ms ease, filter 240ms ease;
      }

      .cap-map-link::after {
        content: "";
        position: absolute;
        left: 0;
        top: -3px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.78);
        opacity: 0;
      }

      .cap-map-link.is-active {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.36));
      }

      .cap-map-link.is-active::after {
        opacity: 1;
        animation: capMapSignal 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
      }

      .cap-map-link-1 { transform: rotate(208deg); }
      .cap-map-link-2 { transform: rotate(332deg); }
      .cap-map-link-3 { transform: rotate(152deg); }
      .cap-map-link-4 { transform: rotate(28deg); }

      @keyframes capMapSignal {
        from { left: 4%; opacity: 0; }
        18%, 76% { opacity: 1; }
        to { left: 92%; opacity: 0; }
      }

      .cap-map-node {
        --node-delay: 0ms;
        position: relative;
        z-index: 3;
        min-height: 260px;
        display: grid;
        align-content: center;
        gap: 12px;
        padding: 30px clamp(24px, 2.7vw, 42px);
        border: 0;
        border-top: 1px solid rgba(244, 241, 232, 0.14);
        border-bottom: 1px solid rgba(244, 241, 232, 0.06);
        color: rgba(244, 241, 232, 0.5);
        background: linear-gradient(112deg, rgba(244, 241, 232, 0.018), transparent 68%);
        font: inherit;
        text-align: left;
        cursor: pointer;
        opacity: 0;
        filter: blur(5px);
        transform: translate3d(0, 22px, 0);
        transition:
          opacity 680ms ease var(--node-delay),
          filter 680ms ease var(--node-delay),
          transform 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--node-delay),
          color 220ms ease,
          border-color 220ms ease,
          background-color 220ms ease;
      }

      .cap-map-section.is-section-visible .cap-map-node {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
      }

      .cap-map-node:hover,
      .cap-map-node:focus-visible,
      .cap-map-node.is-active {
        color: var(--paper);
        border-top-color: color-mix(in srgb, var(--accent) 60%, rgba(244, 241, 232, 0.14));
        background-color: rgba(var(--accent-rgb), 0.035);
        outline: none;
        transform: translate3d(0, -5px, 0);
      }

      .cap-map-node::before {
        content: "";
        position: absolute;
        left: 0;
        top: -3px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
        opacity: 0.35;
        transition: opacity 220ms ease, transform 260ms ease;
      }

      .cap-map-node.is-active::before {
        opacity: 1;
        transform: scale(1.5);
      }

      .cap-map-node > span {
        color: var(--accent);
        font-size: 9px;
        font-weight: 840;
        text-transform: uppercase;
      }

      .cap-map-node h3 {
        margin: 0;
        color: rgba(244, 241, 232, 0.9);
        font-size: clamp(22px, 2vw, 30px);
        line-height: 1.18;
      }

      .cap-map-node p {
        max-width: 43ch;
        margin: 0;
        color: rgba(244, 241, 232, 0.52);
        font-size: 13px;
        line-height: 1.75;
        text-wrap: pretty;
      }

      .cap-map-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        margin-top: 5px;
      }

      .cap-map-tags small {
        position: relative;
        color: rgba(244, 241, 232, 0.4);
        font-size: 10px;
        line-height: 1.5;
      }

      .cap-map-tags small:not(:last-child)::after {
        content: "";
        display: inline-block;
        width: 3px;
        height: 3px;
        margin: 0 0 2px 14px;
        border-radius: 50%;
        background: rgba(var(--accent-rgb), 0.62);
      }

      @media (max-width: 1080px) {
        .cap-map-head {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .cap-map-field {
          min-height: 1020px;
          gap: 48px 28px;
          padding-top: 300px;
        }

        .cap-map-core {
          top: 138px;
          transform: translateX(-50%);
        }

        .cap-map-field::before,
        .cap-map-field::after,
        .cap-map-link {
          display: none;
        }
      }

      @media (max-width: 680px) {
        .cap-map-section {
          padding: 94px 0 76px;
        }

        .cap-map-shell {
          width: calc(100% - 32px);
        }

        .cap-map-head h2 {
          font-size: clamp(44px, 16vw, 66px);
        }

        .cap-map-head > p {
          font-size: clamp(20px, 6.5vw, 28px);
        }

        .cap-map-field {
          min-height: auto;
          display: flex;
          flex-direction: column;
          gap: 28px;
          padding-top: 54px;
        }

        .cap-map-core {
          position: relative;
          left: auto;
          top: auto;
          width: min(210px, 62vw);
          margin: 18px auto 64px;
          transform: none;
        }

        .cap-map-node {
          min-height: 0;
          padding: 26px 4px 30px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .cap-map-core::before,
        .cap-map-core::after,
        .cap-map-link::after,
        .about-neon-border {
          animation: none !important;
        }

        .cap-map-node {
          opacity: 1;
          filter: none;
          transform: none;
        }
      }

      /* Constellation capability field, spatial rather than card-based. */
      .story-section:not(.is-open) {
        padding-bottom: 34px;
      }

      .cap-map-section {
        min-height: 960px;
        padding: clamp(64px, 6.5vw, 94px) 0 clamp(86px, 8vw, 124px);
        background:
          radial-gradient(circle at 50% 56%, rgba(var(--accent-rgb), 0.065), transparent 20%),
          radial-gradient(circle at 76% 28%, rgba(64, 217, 255, 0.035), transparent 26%),
          linear-gradient(180deg, #050606 0%, #070808 54%, #040505 100%);
      }

      .cap-map-head {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 24px;
        padding-bottom: 42px;
        border-bottom: 0;
        text-align: center;
      }

      .cap-map-head h2 {
        font-size: clamp(36px, 4.6vw, 60px);
        line-height: 0.88;
        text-transform: uppercase;
      }

      .cap-map-head > p {
        max-width: 540px;
        justify-self: center;
        margin: 0 auto;
        font-size: clamp(18px, 1.8vw, 26px);
        font-weight: 520;
        color: rgba(244, 241, 232, 0.56);
      }

      .cap-map-field {
        min-height: 720px;
        display: block;
        padding: 0;
        perspective: 1100px;
      }

      .cap-map-field::before {
        width: min(72vw, 1040px);
        aspect-ratio: 2.15;
        border-color: rgba(244, 241, 232, 0.085);
        box-shadow:
          0 0 0 76px rgba(244, 241, 232, 0.008),
          0 0 0 152px rgba(var(--accent-rgb), 0.006);
        transform: translate(-50%, -50%) rotate(calc(-9deg + var(--map-x) * 1.5deg)) rotateX(calc(var(--map-y) * -1.2deg));
      }

      .cap-map-field::after {
        width: min(30vw, 420px);
        border-color: rgba(var(--accent-rgb), 0.2);
        transform: translate(-50%, -50%) rotate(calc(24deg + var(--map-y) * 2.5deg));
      }

      .cap-map-core {
        width: clamp(190px, 17vw, 252px);
        border-color: rgba(244, 241, 232, 0.18);
        background:
          radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.08), transparent 30%),
          radial-gradient(circle, rgba(var(--accent-rgb), 0.075), rgba(7, 9, 9, 0.94) 68%);
        box-shadow:
          0 0 0 24px rgba(244, 241, 232, 0.009),
          0 0 0 78px rgba(var(--accent-rgb), 0.008),
          0 0 120px rgba(var(--accent-rgb), 0.12),
          inset 0 0 54px rgba(var(--accent-rgb), 0.045);
      }

      .cap-map-link {
        width: 39%;
        opacity: 0.22;
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.52), rgba(244, 241, 232, 0.1) 52%, transparent 96%);
      }

      .cap-map-link-1 { transform: rotate(204deg); }
      .cap-map-link-2 { transform: rotate(336deg); }
      .cap-map-link-3 { transform: rotate(155deg); }
      .cap-map-link-4 { transform: rotate(25deg); }

      .cap-map-node {
        position: absolute;
        width: min(31vw, 390px);
        min-height: 0;
        display: block;
        padding: 22px 24px 24px 34px;
        border: 0;
        color: rgba(244, 241, 232, 0.44);
        background: transparent;
        opacity: 0;
        filter: blur(5px);
        transform: translate3d(0, 24px, 0);
        transition:
          opacity 680ms ease var(--node-delay),
          filter 680ms ease var(--node-delay),
          transform 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--node-delay),
          color 220ms ease;
      }

      .cap-map-node:nth-of-type(1) { left: 2%; top: 10%; }
      .cap-map-node:nth-of-type(2) { right: 0; top: 12%; }
      .cap-map-node:nth-of-type(3) { left: 7%; bottom: 6%; }
      .cap-map-node:nth-of-type(4) { right: 2%; bottom: 5%; }

      .cap-map-node::before {
        left: 4px;
        top: 28px;
        width: 8px;
        height: 8px;
        border: 1px solid rgba(244, 241, 232, 0.5);
        background: #070808;
        box-shadow: 0 0 0 8px rgba(244, 241, 232, 0.018);
        opacity: 0.7;
      }

      .cap-map-node::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 39px;
        width: 1px;
        height: calc(100% - 50px);
        background: linear-gradient(rgba(244, 241, 232, 0.15), transparent);
      }

      .cap-map-node:hover,
      .cap-map-node:focus-visible,
      .cap-map-node.is-active {
        border: 0;
        color: var(--paper);
        background: transparent;
        transform: translate3d(8px, -3px, 28px);
      }

      .cap-map-node.is-active::before {
        border-color: var(--accent);
        background: var(--accent);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.72), 0 0 0 9px rgba(var(--accent-rgb), 0.06);
      }

      .cap-map-node > span {
        display: block;
        margin-bottom: 12px;
        letter-spacing: 0.08em;
      }

      .cap-map-node h3 {
        margin-bottom: 12px;
        font-size: clamp(24px, 2.25vw, 34px);
      }

      .cap-map-node p {
        max-width: 38ch;
        font-size: 12px;
        line-height: 1.72;
      }

      .cap-map-tags {
        gap: 5px 12px;
        margin-top: 13px;
      }

      .cap-map-tags small {
        font-size: 9px;
      }

      /* Tool icons share one full, borderless app-icon treatment. */
      .mouse-tool-mark {
        border: 0;
        background: #101213;
        box-shadow:
          0 18px 38px rgba(0, 0, 0, 0.44),
          0 0 34px color-mix(in srgb, var(--tool-color) 26%, transparent);
      }

      .mouse-tool-mark img,
      .mouse-tool-node[data-tool="jimeng"] img,
      .mouse-tool-node[data-tool="comfy"] img,
      .mouse-tool-node[data-tool="cursor"] img,
      .mouse-tool-node[data-tool="claude"] img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        filter: none;
      }

      .mouse-tool-node[data-tool="deepseek"] img,
      .mouse-tool-node[data-tool="github"] img,
      .mouse-tool-node[data-tool="figma"] img {
        width: 72%;
        height: 72%;
        object-fit: contain;
        border-radius: 0;
      }

      .mouse-tool-node[data-tool="deepseek"] .mouse-tool-mark { background: #3767ee; }
      .mouse-tool-node[data-tool="github"] .mouse-tool-mark { background: #151719; }

      .mouse-tool-node[data-tool="comfy"] img,
      .mouse-tool-node[data-tool="claude"] img,
      .mouse-tool-node[data-tool="gemini"] img,
      .mouse-tool-node[data-tool="yuanbao"] img {
        width: 72%;
        height: 72%;
        object-fit: contain;
        border-radius: 0;
      }

      .mouse-tool-node[data-tool="comfy"] .mouse-tool-mark { background: #111315; }
      .mouse-tool-node[data-tool="claude"] .mouse-tool-mark { background: #f3e9df; }
      .mouse-tool-node[data-tool="gemini"] .mouse-tool-mark { background: #eef4ff; }
      .mouse-tool-node[data-tool="yuanbao"] .mouse-tool-mark { background: #edf5ff; }
      .mouse-tool-node[data-tool="yuanbao"] img {
        width: 76%;
        height: 76%;
        border-radius: 20%;
      }

      .mouse-tool-node[data-tool="jimeng"] img {
        position: absolute;
        left: 12%;
        top: 13%;
        width: auto;
        max-width: none;
        height: 74%;
        object-fit: initial;
        border-radius: 0;
      }

      .mouse-tool-node[data-tool="jimeng"] .mouse-tool-mark { background: #080a0c; }

      .mouse-tools-focus p {
        max-width: 32ch;
        font-size: 12px;
        line-height: 1.7;
        text-transform: none;
      }

      /* Contact: editorial copy, sticker QR, icon-led reach points. */
      .contact {
        min-height: 100svh;
        padding: 116px max(34px, calc((100vw - 1420px) / 2)) 72px;
        background:
          radial-gradient(circle at 66% 48%, rgba(var(--accent-rgb), 0.07), transparent 27%),
          linear-gradient(180deg, #050606, #030404);
      }

      .contact-panel {
        min-height: calc(100svh - 188px);
        grid-template-columns: minmax(360px, 0.82fr) minmax(620px, 1.18fr);
        grid-template-rows: 1fr;
        gap: clamp(54px, 7vw, 118px);
        align-items: center;
      }

      .contact-copy {
        width: 100%;
        display: grid;
        justify-items: start;
        text-align: left;
      }

      .contact-copy .eyebrow {
        justify-self: start;
        margin-left: 0;
        text-align: left;
        color: rgba(244, 241, 232, 0.9);
        font-size: 14px;
        letter-spacing: 0;
      }

      .contact-copy h2 {
        justify-self: start;
        max-width: 640px;
        margin: 24px 0 28px;
        text-align: left;
        font-size: clamp(46px, 5vw, 76px);
        line-height: 1.1;
        letter-spacing: 0;
      }

      .contact-copy > p:not(.eyebrow) {
        max-width: 590px;
        margin: 0;
        color: rgba(244, 241, 232, 0.74);
        font-size: clamp(15px, 1.25vw, 19px);
        line-height: 1.8;
      }

      .contact-status {
        justify-self: start;
        width: max-content;
        justify-content: flex-start;
        margin-left: 0;
        text-align: left;
        margin-top: 36px;
        padding: 6px 11px;
        border-radius: 5px;
        color: rgba(255, 255, 255, 0.92);
        background: rgba(244, 241, 232, 0.24);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: clamp(9px, 0.85vw, 12px);
        letter-spacing: 0.04em;
      }

      .contact-connect {
        display: grid;
        grid-template-columns: minmax(210px, 0.72fr) minmax(330px, 1.28fr);
        gap: clamp(34px, 4vw, 62px);
        align-items: center;
      }

      .contact-qr {
        --sticker-rx: 0deg;
        --sticker-ry: 0deg;
        width: min(24vw, 300px);
        min-width: 220px;
        padding: 13px;
        border: 0;
        border-radius: 20px 22px 24px 18px;
        background: #f5f2eb;
        box-shadow:
          0 38px 70px rgba(0, 0, 0, 0.48),
          0 5px 0 rgba(255, 255, 255, 0.14) inset;
        transform: perspective(800px) rotateX(var(--sticker-rx)) rotateY(var(--sticker-ry)) rotate(-2.4deg);
        transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
        will-change: transform;
      }

      .contact-qr:hover {
        transform: perspective(800px) rotateX(var(--sticker-rx)) rotateY(var(--sticker-ry)) rotate(0.8deg) translateY(-8px) scale(1.025);
        box-shadow: 0 48px 90px rgba(0, 0, 0, 0.56);
      }

      .contact-qr::before {
        display: none;
      }

      .contact-qr::after {
        display: none;
      }

      .contact-qr img {
        border-radius: 10px;
        box-shadow: none;
      }

      .contact-qr-orbit {
        display: none;
      }

      .contact-list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        border: 0;
      }

      .contact-list a,
      .contact-list button {
        min-height: 126px;
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr) auto;
        align-items: center;
        gap: 15px;
        padding: 22px 20px;
        border: 0;
        border-top: 1px solid rgba(244, 241, 232, 0.12);
        border-right: 1px solid rgba(244, 241, 232, 0.08);
        background: transparent;
        color: rgba(244, 241, 232, 0.72);
        transition: color 180ms ease, background-color 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .contact-list a:nth-child(even) {
        border-right: 0;
      }

      .contact-list a:hover {
        padding-left: 20px;
        color: var(--paper);
        background: rgba(var(--accent-rgb), 0.05);
        transform: translateY(-4px);
      }

      .contact-channel-icon {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(244, 241, 232, 0.16);
        border-radius: 50%;
        color: var(--paper);
        font-size: 20px;
        font-weight: 760;
        transition: background-color 220ms ease, border-color 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .contact-channel-icon svg {
        width: 25px;
        height: 25px;
        fill: currentColor;
      }

      .contact-channel-wechat {
        color: #0b0d0e;
        background: #07c160;
        border-color: #07c160;
      }

      .contact-channel-linkedin {
        color: white;
        background: #0a66c2;
        border-color: #0a66c2;
        font-family: Arial, sans-serif;
      }

      .contact-channel-x {
        font-size: 38px;
        font-weight: 820;
      }

      .contact-channel-linkedin {
        font-size: 31px;
        font-weight: 820;
      }

      .contact-list a:hover .contact-channel-icon {
        border-color: rgba(var(--accent-rgb), 0.65);
        transform: scale(1.08) rotate(-4deg);
      }

      .contact-channel-copy {
        min-width: 0;
        display: grid;
        gap: 7px;
      }

      .contact-channel-copy strong {
        color: var(--paper);
        font-size: 16px;
        font-weight: 720;
      }

      .contact-channel-copy small {
        overflow-wrap: anywhere;
        color: rgba(244, 241, 232, 0.42);
        font-size: 9px;
        letter-spacing: 0.04em;
      }

      .contact-channel-arrow {
        color: var(--accent);
        font-size: 17px;
        transition: transform 220ms ease;
      }

      .contact-list a:hover .contact-channel-arrow {
        transform: translate(3px, -3px);
      }

      @media (max-width: 1080px) {
        .cap-map-field {
          min-height: 980px;
          display: grid;
          padding-top: 280px;
        }

        .cap-map-node {
          position: relative;
          inset: auto !important;
          width: auto;
        }

        .contact-panel {
          grid-template-columns: 1fr;
          padding-block: 40px;
        }

        .contact-connect {
          grid-template-columns: minmax(210px, 0.58fr) minmax(420px, 1.42fr);
        }
      }

      @media (max-width: 680px) {
        .story-section:not(.is-open) { padding-bottom: 18px; }

        .cap-map-section {
          min-height: auto;
          padding-top: 64px;
        }

        .cap-map-head h2 {
          font-size: clamp(36px, 13vw, 52px);
        }

        .cap-map-field {
          min-height: auto;
          display: flex;
          padding-top: 54px;
        }

        .contact-copy h2 br {
          display: initial;
        }

        .contact-connect {
          grid-template-columns: 1fr;
        }

        .contact-qr {
          width: min(72vw, 270px);
          justify-self: center;
        }

        .contact-list {
          grid-template-columns: 1fr;
        }

        .contact-list a {
          min-height: 96px;
          border-right: 0;
        }
      }

      /* Preserve the original horizontal contact rail. */
      .contact-panel {
        grid-template-columns: minmax(420px, 1fr) minmax(260px, 0.62fr);
        grid-template-rows: minmax(420px, 1fr) auto;
        column-gap: clamp(54px, 8vw, 140px);
        row-gap: 42px;
      }

      .contact-copy {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
      }

      .contact-connect {
        display: contents;
      }

      .contact-qr {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: center;
      }

      .contact-list {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-bottom: 1px solid rgba(244, 241, 232, 0.1);
      }

      .contact-list a {
        min-height: 112px;
        border-right: 1px solid rgba(244, 241, 232, 0.08);
      }

      .contact-list a:last-child {
        border-right: 0;
      }

      /* Originkit adaptations: liquid hero object, magnetic actions, elastic contact title. */
      .hero-liquid-infinity {
        aspect-ratio: 2318 / 1052;
        overflow: visible;
        isolation: isolate;
        cursor: crosshair;
      }

      .hero-infinity-source,
      .hero-infinity-liquid-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
      }

      .hero-infinity-source {
        z-index: 1;
        object-fit: contain;
        filter: saturate(0.94) contrast(1.035);
        transition: opacity 420ms ease;
      }

      .hero-infinity-liquid-canvas {
        z-index: 2;
        inset: -8%;
        width: 116%;
        height: 116%;
        opacity: 0;
        pointer-events: auto;
        touch-action: none;
        transition: opacity 520ms ease;
      }

      .hero-liquid-infinity.is-liquid-ready .hero-infinity-source {
        opacity: 0;
      }

      .hero-liquid-infinity.is-liquid-ready .hero-infinity-liquid-canvas {
        opacity: 1;
      }

      .hero-particle-title {
        position: relative;
        width: 5.22em;
        height: 0.9em;
        display: block;
        flex: 0 0 5.22em;
        overflow: visible;
        isolation: isolate;
        touch-action: none;
      }

      .hero-particle-title canvas {
        position: absolute;
        z-index: 2;
        inset: -18% -4%;
        width: 108%;
        height: 136%;
        display: block;
        pointer-events: auto;
      }

      .particle-title-fallback {
        position: absolute;
        z-index: 1;
        inset: 0;
        display: grid;
        place-items: center;
        color: rgba(244, 241, 232, 0.96);
        line-height: 0.82;
        transition: opacity 260ms ease;
      }

      .hero-particle-title.is-particle-ready .particle-title-fallback {
        opacity: 0;
      }

      .particle-title-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .hero-kinetic-actions .magnetic-button {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transform: none;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
        transition:
          background-color 240ms ease,
          box-shadow 260ms ease,
          border-color 220ms ease,
          color 220ms ease;
      }

      .hero-kinetic-actions .magnetic-button:hover {
        transform: none;
        color: #080a0a;
        border-color: var(--accent);
        background: var(--accent);
        box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.18);
      }

      .magnetic-sweep {
        display: none;
      }

      .hero-kinetic-actions .magnetic-label {
        position: relative;
        z-index: 1;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        color: inherit;
        font-size: inherit;
        transition: color 220ms ease;
      }

      .hero-kinetic-actions .magnetic-label i {
        color: var(--accent);
        font-size: 16px;
        font-style: normal;
        transition: color 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .hero-kinetic-actions .magnetic-button:hover .magnetic-label,
      .hero-kinetic-actions .magnetic-button:hover .magnetic-label i {
        color: #080a0a;
      }

      .hero-kinetic-actions .magnetic-button:hover .magnetic-label i {
        transform: none;
      }

      .contact-elastic-title {
        justify-self: start;
        max-width: 680px;
        margin: 24px 0 28px;
        color: var(--paper);
        font-family: "Zpix", "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: clamp(44px, 4.7vw, 72px);
        font-weight: 400;
        line-height: 1.22;
        letter-spacing: 0;
        text-align: left;
        touch-action: none;
      }

      .elastic-line {
        display: block;
        white-space: nowrap;
      }

      .elastic-letter {
        display: inline-block;
        opacity: 0;
        filter: blur(7px);
        transform: translate3d(0, 34px, 0) scale(0.9);
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        will-change: transform, opacity, filter;
        transition:
          opacity 560ms ease calc(100ms + var(--elastic-index) * 34ms),
          filter 680ms ease calc(100ms + var(--elastic-index) * 34ms),
          transform 760ms cubic-bezier(0.16, 1, 0.3, 1) calc(100ms + var(--elastic-index) * 34ms);
      }

      .contact.is-section-visible .elastic-letter {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
      }

      .elastic-letter.is-dragging {
        cursor: grabbing;
      }

      /* Selected builds, product catalog and open skills. */
      .hero-kinetic-actions .magnetic-button {
        transform: translate3d(var(--magnetic-x, 0), var(--magnetic-y, 0), 0);
        will-change: transform;
        transition:
          transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
          background-color 240ms ease,
          box-shadow 260ms ease,
          border-color 220ms ease,
          color 220ms ease;
      }

      .hero-kinetic-actions .magnetic-button:hover {
        transform: translate3d(var(--magnetic-x, 0), var(--magnetic-y, 0), 0);
      }

      .showcase-sticky {
        isolation: isolate;
      }

      .showcase-heading {
        position: absolute;
        z-index: 6;
        top: clamp(96px, 10vh, 136px);
        left: 50%;
        width: min(760px, calc(100% - 40px));
        transform: translateX(-50%);
        text-align: center;
        pointer-events: none;
      }

      .showcase-heading span,
      .project-catalog-head span,
      .skills-lab-head span {
        color: var(--accent);
        font-size: 11px;
        font-weight: 850;
        letter-spacing: 0.14em;
      }

      .showcase-heading h2,
      .project-catalog-head h2,
      .skills-lab-head h2 {
        margin: 10px 0 0;
        color: var(--paper);
        font-size: clamp(46px, 6.2vw, 92px);
        line-height: 0.92;
        letter-spacing: 0;
      }

      .showcase-heading h2 {
        margin: 0;
        font-size: clamp(36px, 4.6vw, 60px);
        line-height: 0.88;
      }

      .project-catalog-head h2 {
        font-size: clamp(36px, 4.3vw, 64px);
        line-height: 0.98;
      }

      .showcase-heading p,
      .project-catalog-head p,
      .skills-lab-head p {
        margin: 18px auto 0;
        color: var(--muted);
        font-size: 16px;
      }

      .showcase-track {
        padding-top: clamp(210px, 23vh, 260px);
      }

      .project-card {
        height: min(64svh, 620px);
        color: var(--paper);
        text-decoration: none;
        align-content: initial;
        grid-template-rows: auto 1fr;
        background: #070909;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
        transition: border-color 300ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .project-card:hover {
        border-color: color-mix(in srgb, var(--card-accent) 74%, rgba(255,255,255,.22));
      }

      .project-card::before {
        z-index: 3;
        pointer-events: none;
      }

      .project-card::after {
        z-index: 2;
        opacity: 0.35;
        pointer-events: none;
      }

      .project-card > img {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        object-position: center top;
        border: 0;
        border-radius: 0;
        filter: saturate(0.78) contrast(1.08) brightness(0.72);
        opacity: 0.82;
        transform: scale(1.015);
        transition: transform 850ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease;
      }

      .project-card:hover > img {
        transform: scale(1.055);
        filter: saturate(0.96) contrast(1.06) brightness(0.78);
      }

      .project-card-shade {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(180deg, rgba(3,4,4,.35), transparent 34%),
          linear-gradient(0deg, rgba(3,4,4,.98) 0%, rgba(3,4,4,.82) 35%, transparent 76%);
        pointer-events: none;
      }

      .project-top {
        z-index: 4;
      }

      .project-copy {
        z-index: 4;
        align-self: end;
        padding: 0 4px 6px;
      }

      .project-card h3 {
        margin-top: 20px;
        font-size: clamp(42px, 5vw, 72px);
      }

      .project-enter {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
        color: var(--paper);
        font-size: 13px;
        font-weight: 800;
      }

      .project-enter i {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(244,241,232,.28);
        border-radius: 50%;
        color: var(--card-accent);
        font-style: normal;
        transition: transform 260ms ease, background 260ms ease;
      }

      .project-card:hover .project-enter i {
        transform: translate(3px, -3px);
        background: rgba(244,241,232,.08);
      }

      .project-catalog,
      .skills-lab {
        position: relative;
        width: 100%;
        overflow: hidden;
        background:
          radial-gradient(circle at 74% 18%, rgba(64, 217, 255, 0.055), transparent 30%),
          radial-gradient(circle at 18% 64%, rgba(var(--accent-rgb), 0.07), transparent 36%),
          #050606;
      }

      .project-catalog::before,
      .skills-lab::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(244,241,232,.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(244,241,232,.025) 1px, transparent 1px);
        background-size: 84px 84px;
        mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
        pointer-events: none;
      }

      .project-catalog-shell,
      .skills-lab-shell {
        position: relative;
        z-index: 1;
        width: min(1540px, calc(100% - 64px));
        margin: 0 auto;
        padding: clamp(110px, 12vw, 180px) 0;
      }

      .project-catalog-head,
      .skills-lab-head {
        width: min(900px, 100%);
        margin: 0 auto clamp(78px, 8vw, 126px);
        text-align: center;
      }

      .catalog-group + .catalog-group {
        margin-top: clamp(90px, 10vw, 150px);
      }

      .catalog-group-title {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: end;
        gap: 18px;
        margin-bottom: 24px;
      }

      .catalog-group-title span {
        color: var(--accent);
        font-size: clamp(28px, 3vw, 44px);
        font-weight: 900;
        line-height: 1;
      }

      .catalog-group-title h3 {
        margin: 0;
        color: var(--paper);
        font-size: clamp(28px, 3vw, 44px);
        letter-spacing: 0;
      }

      .catalog-group-title p {
        justify-self: end;
        margin: 0 0 5px;
        color: var(--faint);
        font-size: 13px;
      }

      .catalog-gallery {
        height: min(58vw, 610px);
        min-height: 470px;
        display: flex;
        gap: 10px;
      }

      .catalog-panel {
        position: relative;
        flex: 0.78 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 8px;
        padding: 28px;
        border: 1px solid rgba(244,241,232,.12);
        border-radius: 7px;
        overflow: hidden;
        color: var(--paper);
        text-decoration: none;
        isolation: isolate;
        cursor: pointer;
        transition: flex 720ms cubic-bezier(0.16, 1, 0.3, 1), border-color 360ms ease, filter 360ms ease;
      }

      .catalog-panel::before {
        content: "";
        position: absolute;
        z-index: -2;
        inset: 0;
        background-image: var(--panel-image);
        background-position: center top;
        background-size: cover;
        filter: saturate(.68) brightness(.64) contrast(1.08);
        transform: scale(1.03);
        transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
      }

      .catalog-panel::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        background: linear-gradient(180deg, rgba(3,4,4,.15), rgba(3,4,4,.94));
      }

      .catalog-panel.is-active {
        flex: 3.5 1 0;
        border-color: rgba(var(--accent-rgb), .56);
      }

      .catalog-panel.is-active::before {
        transform: scale(1);
        filter: saturate(.9) brightness(.75) contrast(1.04);
      }

      .catalog-panel-dev::before {
        background:
          radial-gradient(circle at 72% 24%, hsla(var(--panel-hue), 90%, 64%, .28), transparent 28%),
          linear-gradient(135deg, rgba(244,241,232,.08), transparent 55%),
          repeating-linear-gradient(112deg, transparent 0 20px, rgba(244,241,232,.035) 21px 22px),
          #0a0c0c;
      }

      .catalog-panel strong {
        max-width: 520px;
        font-size: clamp(22px, 2.5vw, 42px);
        line-height: 1.04;
        letter-spacing: 0;
        white-space: nowrap;
        transform-origin: left bottom;
        transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .catalog-panel:not(.is-active) strong {
        transform: rotate(-90deg) translateY(4px);
      }

      .catalog-panel small {
        color: rgba(244,241,232,.5);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .14em;
      }

      .catalog-status {
        align-self: flex-start;
        margin-bottom: auto;
        padding: 7px 10px;
        border: 1px solid rgba(244,241,232,.16);
        border-radius: 999px;
        background: rgba(5,6,6,.4);
        color: rgba(244,241,232,.72);
        font-size: 10px;
        font-weight: 800;
        backdrop-filter: blur(12px);
      }

      /* Vibe Coding continuation: compact flowing rows instead of accordion cards. */
      .project-catalog {
        margin-top: -1px;
      }

      .project-catalog-shell {
        padding: clamp(58px, 6vw, 92px) 0 clamp(72px, 7vw, 108px);
      }

      .project-catalog-head {
        width: 100%;
        margin: 0 0 clamp(52px, 5vw, 78px);
        text-align: left;
      }

      .project-catalog-head h2 {
        max-width: 720px;
        margin-top: 12px;
        font-size: clamp(34px, 4vw, 58px);
      }

      .catalog-group + .catalog-group {
        margin-top: clamp(42px, 4.5vw, 68px);
      }

      .catalog-group-title {
        align-items: baseline;
        margin-bottom: 12px;
      }

      .catalog-group-title span,
      .catalog-group-title h3 {
        font-size: clamp(27px, 2.7vw, 40px);
      }

      .flow-menu {
        border-top: 1px solid rgba(244,241,232,.16);
      }

      .flow-menu-item {
        position: relative;
        min-height: clamp(92px, 8.2vw, 126px);
        display: grid;
        grid-template-columns: 52px minmax(260px, 1fr) minmax(170px, .42fr) auto 40px;
        align-items: center;
        gap: clamp(16px, 2.2vw, 36px);
        padding: 0 clamp(14px, 1.5vw, 24px);
        border-bottom: 1px solid rgba(244,241,232,.16);
        overflow: hidden;
        color: var(--paper);
        text-decoration: none;
        isolation: isolate;
        cursor: pointer;
      }

      .flow-menu-item > *:not(.flow-marquee) {
        position: relative;
        z-index: 2;
        transition: opacity 220ms ease, transform 380ms cubic-bezier(.16,1,.3,1);
      }

      .flow-item-index {
        color: var(--flow-accent);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
      }

      .flow-menu-item > strong {
        font-size: clamp(28px, 3.2vw, 52px);
        font-weight: 760;
        line-height: .95;
        letter-spacing: 0;
      }

      .flow-menu-item > small {
        color: rgba(244,241,232,.46);
        font-size: clamp(12px, .95vw, 15px);
        font-weight: 560;
        line-height: 1.55;
        letter-spacing: 0;
      }

      .flow-menu-item > em {
        padding: 7px 10px;
        border: 1px solid rgba(244,241,232,.18);
        border-radius: 999px;
        color: rgba(244,241,232,.64);
        font-size: 10px;
        font-style: normal;
        font-weight: 800;
        white-space: nowrap;
      }

      .flow-item-arrow {
        color: var(--flow-accent);
        font-size: 22px;
        text-align: right;
      }

      .flow-marquee {
        position: absolute;
        z-index: 4;
        inset: 0;
        width: max-content;
        min-width: 200%;
        display: flex;
        align-items: center;
        gap: 28px;
        padding: 0 24px;
        background: var(--flow-accent);
        color: #080909;
        opacity: 0;
        transform: translateY(102%);
        pointer-events: none;
        transition: opacity 220ms ease, transform 520ms cubic-bezier(.16,1,.3,1);
      }

      .flow-marquee span {
        flex: 0 0 auto;
        font-size: clamp(30px, 4vw, 62px);
        font-weight: 820;
        line-height: 1;
        letter-spacing: 0;
        white-space: nowrap;
      }

      .flow-marquee i {
        width: 86px;
        height: 58px;
        flex: 0 0 auto;
        border-radius: 4px;
        background-image: var(--flow-image, linear-gradient(135deg, rgba(8,9,9,.9), rgba(8,9,9,.2)));
        background-position: center;
        background-size: cover;
        box-shadow: 0 9px 28px rgba(0,0,0,.22);
        transform: rotate(-5deg);
      }

      .flow-menu-item:hover > *:not(.flow-marquee),
      .flow-menu-item:focus-visible > *:not(.flow-marquee) {
        opacity: 0;
        transform: translateY(-10px);
      }

      .flow-menu-item:hover .flow-marquee,
      .flow-menu-item:focus-visible .flow-marquee {
        opacity: 1;
        transform: translateY(0);
      }

      .flow-menu-item:hover .flow-marquee > *,
      .flow-menu-item:focus-visible .flow-marquee > * {
        animation: flowMenuRun 8s linear infinite;
      }

      .flow-menu-item.is-developing .flow-marquee {
        filter: saturate(.68);
      }

      @keyframes flowMenuRun {
        from { transform: translateX(0); }
        to { transform: translateX(-72px); }
      }

      .skills-lab {
        margin-top: -1px;
        background:
          radial-gradient(circle at 50% 4%, rgba(var(--accent-rgb), .065), transparent 24%),
          radial-gradient(circle at 74% 18%, rgba(64, 217, 255, .055), transparent 30%),
          radial-gradient(circle at 18% 64%, rgba(var(--accent-rgb), .07), transparent 36%),
          #050606;
      }

      .skills-lab-shell {
        padding: clamp(42px, 4.5vw, 70px) 0 clamp(76px, 7vw, 112px);
      }

      .skills-lab-head {
        width: min(760px, 100%);
        margin: 0 auto clamp(34px, 3.5vw, 54px);
        text-align: center;
      }

      .skills-lab-head h2 {
        margin: 0;
        font-size: clamp(30px, 3.8vw, 50px);
        line-height: .9;
      }

      .skill-bento-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(150px, auto);
        gap: 14px;
        perspective: 1100px;
      }

      .skill-bento-card {
        position: relative;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        padding: clamp(24px, 2.4vw, 38px);
        border: 1px solid rgba(244,241,232,.12);
        border-radius: 8px;
        overflow: hidden;
        isolation: isolate;
        color: var(--paper);
        text-decoration: none;
        background:
          linear-gradient(145deg, rgba(244,241,232,.075), rgba(244,241,232,.018)),
          rgba(8,9,9,.9);
        box-shadow: 0 24px 70px rgba(0,0,0,.28);
        transform: translate3d(var(--bento-x, 0), var(--bento-y, 0), 0) rotateX(var(--bento-rx, 0deg)) rotateY(var(--bento-ry, 0deg));
        transform-style: preserve-3d;
        will-change: transform;
        transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 300ms ease;
      }

      .skill-bento-card:nth-child(1),
      .skill-bento-card:nth-child(4) { grid-column: span 7; }
      .skill-bento-card:nth-child(2),
      .skill-bento-card:nth-child(3) { grid-column: span 5; }

      .skill-bento-card::before,
      .skill-bento-card::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .skill-bento-card::before {
        z-index: 2;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: radial-gradient(
          circle var(--bento-radius, 260px) at var(--glow-x, 50%) var(--glow-y, 50%),
          rgba(var(--bento-rgb), calc(.9 * var(--glow-intensity, 0))) 0%,
          rgba(var(--bento-rgb), calc(.28 * var(--glow-intensity, 0))) 26%,
          transparent 62%
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
      }

      .skill-bento-card::after {
        z-index: 0;
        inset: 0;
        background:
          radial-gradient(circle 280px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(var(--bento-rgb), calc(.14 * var(--glow-intensity, 0))), transparent 70%),
          linear-gradient(130deg, transparent 52%, rgba(var(--bento-rgb), .045));
        opacity: .9;
      }

      .skill-bento-card:hover {
        border-color: rgba(var(--bento-rgb), .3);
        box-shadow: 0 34px 100px rgba(var(--bento-rgb), .08), 0 26px 80px rgba(0,0,0,.42);
      }

      .skill-bento-top,
      .skill-bento-body,
      .skill-bento-link {
        position: relative;
        z-index: 3;
        transform: translateZ(24px);
      }

      .skill-bento-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(var(--bento-rgb), .92);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .13em;
      }

      .skill-bento-top b {
        color: rgba(244,241,232,.32);
        font-size: 12px;
      }

      .skill-bento-body {
        margin: auto 0 0;
      }

      .skill-bento-glyph {
        display: block;
        margin-bottom: clamp(34px, 4vw, 64px);
        color: rgba(var(--bento-rgb), .96);
        font-size: clamp(42px, 5vw, 78px);
        font-style: normal;
        font-weight: 850;
        line-height: 1;
      }

      .skill-bento-card h3 {
        max-width: 16ch;
        margin: 0 0 14px;
        font-size: clamp(27px, 3vw, 46px);
        line-height: .98;
        letter-spacing: 0;
      }

      .skill-bento-card p {
        max-width: 50ch;
        margin: 0;
        color: rgba(244,241,232,.5);
        font-size: 14px;
        line-height: 1.65;
      }

      .skill-bento-link {
        margin-top: 24px;
        color: rgba(var(--bento-rgb), .9);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .13em;
      }

      .bento-particle,
      .bento-ripple {
        position: absolute;
        z-index: 2;
        pointer-events: none;
      }

      .bento-particle {
        left: var(--particle-x);
        top: var(--particle-y);
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgb(var(--bento-rgb));
        box-shadow: 0 0 9px rgba(var(--bento-rgb), .72);
        animation: bentoStarDrift var(--particle-duration, 2.8s) ease-in-out infinite alternate;
      }

      .bento-ripple {
        width: var(--ripple-size);
        height: var(--ripple-size);
        left: var(--ripple-x);
        top: var(--ripple-y);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--bento-rgb), .28), transparent 68%);
        transform: translate(-50%, -50%) scale(0);
        animation: bentoRipple 720ms ease-out forwards;
      }

      @keyframes bentoStarDrift {
        from { opacity: 0; transform: translate3d(0, 0, 0) scale(.3); }
        35% { opacity: .9; }
        to { opacity: .22; transform: translate3d(var(--particle-dx), var(--particle-dy), 0) scale(1); }
      }

      @keyframes bentoRipple {
        from { opacity: .9; transform: translate(-50%, -50%) scale(0); }
        to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
      }

      @media (max-width: 1080px) {
        .skills-lab-shell { padding-bottom: 80px; }
        .catalog-gallery-five .catalog-panel { padding-inline: 18px; }
        .catalog-panel strong { font-size: clamp(20px, 3vw, 36px); }
      }

      @media (max-width: 680px) {
        .showcase-heading {
          position: relative;
          top: auto;
          left: auto;
          margin: 0 auto 48px;
          transform: none;
        }

        .showcase-track { padding-top: 0; }
        .project-card { min-height: 560px; }
        .project-card > img { width: 100%; height: 100%; max-height: none; }
        .project-card h3 { font-size: 42px; }

        .project-catalog-shell,
        .skills-lab-shell { width: min(100% - 28px, 1540px); }

        .catalog-group-title {
          grid-template-columns: auto 1fr;
        }

        .catalog-group-title p { display: none; }

        .project-catalog-shell,
        .skills-lab-shell {
          padding-block: 58px 72px;
        }

        .project-catalog-head,
        .skills-lab-head {
          margin-bottom: 38px;
        }

        .flow-menu-item {
          min-height: 88px;
          grid-template-columns: 32px minmax(0, 1fr) auto;
          grid-template-rows: auto auto;
          gap: 12px;
          padding: 16px 6px;
        }

        .flow-item-index { grid-row: 1 / span 2; align-self: center; }

        .flow-menu-item > strong {
          font-size: clamp(23px, 7.2vw, 32px);
        }

        .flow-item-arrow {
          display: none;
        }

        .flow-menu-item > small {
          display: block;
          grid-column: 2;
          grid-row: 2;
          font-size: 11px;
          line-height: 1.45;
        }

        .flow-menu-item > em {
          grid-column: 3;
          grid-row: 1 / span 2;
          align-self: center;
          padding: 5px 7px;
          font-size: 8px;
        }

        .flow-marquee {
          gap: 18px;
          padding-inline: 12px;
        }

        .flow-marquee span {
          font-size: clamp(26px, 9vw, 38px);
        }

        .flow-marquee i {
          width: 64px;
          height: 44px;
        }

        .catalog-gallery,
        .catalog-gallery-five {
          height: auto;
          min-height: 0;
          display: grid;
          grid-template-columns: 1fr;
        }

        .catalog-panel,
        .catalog-panel.is-active {
          min-height: 360px;
          flex: none;
        }

        .catalog-panel:not(.is-active) strong { transform: none; }

        .skill-bento-grid { grid-template-columns: 1fr; }
        .skill-bento-card,
        .skill-bento-card:nth-child(n) {
          grid-column: 1;
          min-height: 290px;
        }
      }

      @media (max-width: 1080px) {
        .contact-panel {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto;
        }

        .contact-copy,
        .contact-qr,
        .contact-list {
          grid-column: 1;
        }

        .contact-copy { grid-row: 1; }
        .contact-qr { grid-row: 2; }
        .contact-list {
          grid-row: 3;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 680px) {
        .contact-list {
          grid-template-columns: 1fr;
        }

        .contact-list a {
          border-right: 0;
        }

        .contact-elastic-title {
          max-width: 100%;
          font-size: clamp(38px, 11vw, 54px);
          line-height: 1.28;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-infinity-liquid-canvas { display: none; }
        .hero-liquid-infinity .hero-infinity-source { opacity: 1; }
        .magnetic-button { transform: none !important; }
        .magnetic-sweep { display: none; }
        .elastic-letter {
          opacity: 1;
          filter: none;
          transform: none;
          cursor: default;
          transition: none;
        }
        .hero-particle-title canvas { display: none; }
        .hero-particle-title .particle-title-fallback { opacity: 1; }
      }

      /* Mobile release pass: preserve the full composition and reduce continuous GPU work. */
      html,
      body {
        max-width: 100%;
        overflow-x: clip;
      }

      .gate-film-blur {
        position: absolute;
        inset: -8%;
        width: auto;
        height: auto;
        background:
          linear-gradient(rgba(5, 7, 7, 0.16), rgba(5, 7, 7, 0.42)),
          url("public/images/gate/arlo-dream-poster.webp") center / cover no-repeat;
        filter: blur(34px) saturate(0.78) brightness(0.56);
        transform: scale(1.08);
      }

      .gate-film-main {
        object-fit: contain;
        object-position: center;
        transform: none;
        will-change: auto;
      }

      .profile-video-dialog video {
        display: block;
        width: 100%;
        max-height: min(82svh, 900px);
        object-fit: contain;
        background: #030404;
      }

      @media (max-width: 820px) {
        .site .topbar {
          left: max(10px, env(safe-area-inset-left)) !important;
          right: max(10px, env(safe-area-inset-right)) !important;
          width: auto !important;
          inline-size: auto !important;
          min-width: 0;
          max-width: none !important;
          max-inline-size: none !important;
          grid-template-columns: minmax(0, 1fr) auto;
          box-sizing: border-box;
          contain: none;
          overflow: visible;
          transform: none !important;
          -webkit-backdrop-filter: blur(12px) saturate(1.08);
          backdrop-filter: blur(12px) saturate(1.08);
        }

        .site .topbar > .brand,
        .site .topbar > .topbar-actions {
          min-width: 0;
        }

        .cursor-ribbon,
        .hero-infinity-liquid-canvas,
        .hero-particle-title canvas,
        .profile-hero .hero-fx-canvas,
        .cap-map-section .hero-canvas,
        .contact-fx-canvas {
          display: none !important;
        }

        .hero-liquid-infinity .hero-infinity-source,
        .hero-particle-title .particle-title-fallback {
          opacity: 1 !important;
        }

        .hero-infinity-cutout,
        .hero-quote-track {
          animation: none !important;
        }

        .profile-hero .hero-kinetic-shell {
          min-height: max(760px, calc(100svh - 92px));
        }

        .site .topbar .nav {
          position: absolute;
          z-index: 8;
          top: calc(100% + 10px);
          left: 0;
          right: 0;
          width: 100%;
          min-width: 0;
          max-width: 100%;
          max-height: min(62svh, 430px);
          overflow-y: auto;
          overscroll-behavior-y: auto;
          touch-action: pan-y;
          transform: none;
          box-sizing: border-box;
        }

        .site .topbar.is-open .nav {
          display: grid;
        }

        .site .topbar .nav a {
          min-width: 0;
          max-width: 100%;
          overflow-wrap: anywhere;
        }

        .mobile-section-nav {
          position: fixed;
          z-index: 120;
          right: 10px;
          bottom: max(10px, env(safe-area-inset-bottom));
          left: 10px;
          display: flex;
          align-items: center;
          gap: 4px;
          min-height: 56px;
          padding: 6px;
          overflow-x: auto;
          overscroll-behavior-x: contain;
          scroll-behavior: smooth;
          scrollbar-width: none;
          border: 1px solid rgba(255, 255, 255, 0.13);
          border-radius: 18px;
          background: rgba(13, 14, 14, 0.82);
          box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.42),
            inset 0 1px rgba(255, 255, 255, 0.08);
          backdrop-filter: blur(12px) saturate(1.08);
          -webkit-backdrop-filter: blur(12px) saturate(1.08);
        }

        .mobile-section-nav::-webkit-scrollbar {
          display: none;
        }

        .mobile-section-nav a {
          position: relative;
          flex: 0 0 auto;
          display: grid;
          place-items: center;
          min-height: 42px;
          padding: 0 14px;
          border: 1px solid transparent;
          border-radius: 13px;
          color: rgba(242, 239, 232, 0.54);
          font-size: 12px;
          font-weight: 700;
          line-height: 1;
          white-space: nowrap;
          transition:
            color 220ms ease,
            border-color 220ms ease,
            background-color 220ms ease;
        }

        .mobile-section-nav a::after {
          position: absolute;
          bottom: 5px;
          left: 50%;
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background: var(--accent);
          content: "";
          opacity: 0;
          transform: translateX(-50%) scale(0.4);
          transition: opacity 220ms ease, transform 220ms ease;
        }

        .mobile-section-nav a.is-active {
          border-color: rgba(var(--accent-rgb), 0.32);
          color: var(--paper);
          background: rgba(var(--accent-rgb), 0.12);
        }

        .mobile-section-nav a.is-active::after {
          opacity: 1;
          transform: translateX(-50%) scale(1);
        }

        .story-float-return {
          bottom: calc(78px + env(safe-area-inset-bottom));
        }

        .footer {
          padding-bottom: calc(82px + env(safe-area-inset-bottom));
        }

        /* On phones, keep the capability system in one continuous panel. */
        .cap-map-section {
          min-height: auto;
          padding: 64px 14px 76px;
        }

        .cap-map-shell {
          width: 100%;
        }

        .cap-map-head {
          gap: 14px;
          padding: 0 4px 28px;
        }

        .cap-map-head h2 {
          font-size: clamp(40px, 12vw, 54px);
        }

        .cap-map-head > p {
          max-width: 24em;
          font-size: 14px;
          line-height: 1.65;
        }

        .cap-map-field {
          min-height: 0;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-auto-rows: auto;
          padding: 0;
          overflow: hidden;
          border: 1px solid rgba(244, 241, 232, 0.13);
          border-radius: 16px;
          background: rgba(10, 12, 12, 0.72);
          box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
          perspective: none;
        }

        .cap-map-field::before,
        .cap-map-field::after,
        .cap-map-link,
        .cap-map-core::before,
        .cap-map-core::after {
          display: none;
        }

        .cap-map-core {
          position: relative;
          inset: auto;
          grid-column: 1 / -1;
          width: 100%;
          min-height: 94px;
          aspect-ratio: auto;
          display: grid;
          place-items: start;
          align-content: center;
          gap: 5px;
          padding: 18px 20px;
          border: 0;
          border-bottom: 1px solid rgba(244, 241, 232, 0.12);
          border-radius: 0;
          background: rgba(var(--accent-rgb), 0.055);
          box-shadow: none;
          transform: none !important;
        }

        .cap-map-core small {
          font-size: 9px;
        }

        .cap-map-core strong {
          font-size: 27px;
        }

        .cap-map-core p {
          font-size: 11px;
        }

        .cap-map-node,
        .cap-map-node:nth-of-type(1),
        .cap-map-node:nth-of-type(2),
        .cap-map-node:nth-of-type(3),
        .cap-map-node:nth-of-type(4) {
          position: relative;
          inset: auto;
          width: 100%;
          min-height: 148px;
          display: grid;
          align-content: center;
          padding: 16px;
          border: 0;
          border-bottom: 1px solid rgba(244, 241, 232, 0.09);
          border-radius: 0;
          color: rgba(244, 241, 232, 0.72);
          background: transparent;
          opacity: 1;
          filter: none;
          transform: none !important;
          transition: color 200ms ease, background-color 200ms ease;
        }

        .cap-map-node:nth-of-type(odd) {
          border-right: 1px solid rgba(244, 241, 232, 0.09);
        }

        .cap-map-node:last-child {
          border-bottom: 0;
        }

        .cap-map-node:nth-last-child(2) {
          border-bottom: 0;
        }

        .cap-map-node::before,
        .cap-map-node::after,
        .cap-map-node p {
          display: none;
        }

        .cap-map-node > span {
          margin-bottom: 7px;
          color: var(--accent);
          font-size: 7.5px;
          line-height: 1.35;
        }

        .cap-map-node h3 {
          margin: 0 0 9px;
          font-size: clamp(18px, 5.5vw, 23px);
          line-height: 1.15;
        }

        .cap-map-tags {
          gap: 5px 12px;
          margin-top: 0;
        }

        .cap-map-tags small {
          font-size: 8px;
        }

        .cap-map-tags small:nth-child(n + 4) {
          display: none;
        }

        .cap-map-node:hover,
        .cap-map-node:focus-visible,
        .cap-map-node.is-active {
          color: var(--paper);
          background: rgba(var(--accent-rgb), 0.055);
          transform: none !important;
        }
      }

      @media (max-width: 680px) {
        html,
        body {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          overflow-x: clip;
        }

        .site,
        .site > main {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          overflow-x: clip;
        }

        .gate-film,
        .gate-film-main {
          width: 100vw;
          height: 100svh;
        }

        .gate-film-main {
          object-fit: contain;
          object-position: center;
          transform: none !important;
        }

        .gate-film-blur {
          inset: -10%;
          filter: blur(28px) saturate(0.74) brightness(0.5);
          transform: scale(1.1);
        }

        .gate-film-edge {
          background:
            radial-gradient(ellipse at center, transparent 0 50%, rgba(5, 7, 7, 0.12) 70%, rgba(5, 7, 7, 0.82) 100%),
            linear-gradient(180deg, rgba(5, 7, 7, 0.38), transparent 18% 78%, rgba(5, 7, 7, 0.76));
        }

        .gate-film-meta {
          left: 16px;
          right: 16px;
          bottom: max(16px, env(safe-area-inset-bottom));
          font-size: 7px;
        }

        .gate-sound {
          top: max(14px, env(safe-area-inset-top));
          right: 14px;
        }

        .gate-access {
          width: min(292px, calc(100vw - 34px));
          height: min(292px, calc(100vw - 34px));
        }

        .gate-password {
          width: 210px;
          height: 210px;
          padding: 28px;
        }

        .gate-chamber[data-gate-version="biometric"] .gate-hold {
          width: 216px;
          height: 216px;
          min-height: 216px;
        }

        .profile-hero {
          min-height: max(760px, 100svh);
          padding: 82px 0 42px;
          overflow: hidden;
        }

        .hero-edition {
          top: 78px;
          left: 16px;
          right: 16px;
          font-size: 6.5px;
        }

        .profile-hero .hero-kinetic-shell {
          width: calc(100% - 24px);
          min-height: max(670px, calc(100svh - 104px));
          padding-top: 42px;
        }

        .profile-hero .hero-kinetic-copy {
          width: 100%;
          gap: 15px;
          padding-top: 0;
        }

        .hero-kinetic-overline {
          font-size: 8px;
        }

        .hero-create-title {
          margin-bottom: clamp(202px, 31vh, 244px);
          font-size: clamp(52px, 17vw, 72px);
        }

        .hero-infinity-cutout {
          top: 49.5%;
          width: min(94vw, 430px);
          max-width: calc(100vw - 12px);
        }

        .hero-quote-field {
          inset: 22% 0 18%;
          opacity: 0.38;
          max-width: 100%;
          overflow: hidden;
          contain: paint;
        }

        .hero-quote-track span {
          font-size: clamp(48px, 16vw, 70px);
        }

        .hero-spatial-ring-a,
        .hero-spatial-ring-b,
        .hero-spatial-stage::before,
        .hero-spatial-stage::after {
          animation: none;
        }

        .hero-lede {
          max-width: 350px;
          font-size: 12px;
          line-height: 1.68;
        }

        .hero-kinetic-actions {
          width: min(350px, 100%);
          gap: 10px;
        }

        .hero-kinetic-actions a {
          min-height: 46px;
          padding: 10px 13px;
        }

        .about-profile {
          width: 100%;
          max-width: 100%;
          margin-inline: auto;
          padding-block: 80px 74px;
          padding-left: max(16px, env(safe-area-inset-left));
          padding-right: max(16px, env(safe-area-inset-right));
          box-sizing: border-box;
          overflow-x: clip;
        }

        .about-titlebar,
        .about-profile-grid,
        .about-path {
          width: 100%;
          max-width: 100%;
          margin-inline: 0;
          box-sizing: border-box;
        }

        .about-titlebar h2 {
          font-size: clamp(42px, 13vw, 64px);
        }

        .about-profile-grid {
          min-width: 0;
          justify-items: stretch;
          gap: 42px;
        }

        .about-portrait {
          width: min(100%, 420px);
          max-width: 100%;
          justify-self: center;
          box-sizing: border-box;
        }

        .about-info {
          width: 100%;
          min-width: 0;
          max-width: 100%;
        }

        .story-section {
          width: 100%;
          max-width: 100%;
          margin-inline: auto;
          padding-top: 68px;
          padding-right: max(20px, env(safe-area-inset-right));
          padding-bottom: 76px;
          padding-left: max(20px, env(safe-area-inset-left));
          box-sizing: border-box;
          overflow-x: clip;
        }

        .story-portal,
        .story-portal-main,
        .story-article-wrap,
        .story-article-inner,
        .story-article,
        .story-copy {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          box-sizing: border-box;
        }

        .story-article {
          padding: 60px 2px 82px;
        }

        .story-copy-head,
        .story-chapter {
          padding-inline: 2px;
        }

        .story-chapter-label,
        .story-chapter h4,
        .story-chapter p {
          max-width: 100%;
          overflow-wrap: anywhere;
        }

        .about-meta,
        .about-stats {
          min-width: 0;
        }

        .about-stat {
          min-width: 0;
        }

        .showcase {
          height: auto !important;
          min-height: 0;
          padding: 84px 0 64px;
          overflow: visible;
        }

        .showcase-sticky {
          position: relative;
          inset: auto;
          height: auto;
          min-height: 0;
          display: block;
          overflow: visible;
        }

        .showcase-heading {
          width: calc(100% - 28px);
          margin: 0 auto 40px;
        }

        .showcase-heading h2 {
          font-size: clamp(42px, 13vw, 62px);
        }

        .showcase-track {
          width: calc(100% - 28px);
          margin: 0 auto;
          padding: 0;
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 16px;
          transform: none !important;
        }

        .project-card {
          width: 100%;
          min-width: 0;
          height: auto;
          min-height: clamp(430px, 118vw, 540px);
        }

        .project-card h3 {
          font-size: clamp(34px, 11vw, 48px);
        }

        .project-catalog,
        .skills-lab,
        .mouse-tools,
        .contact {
          overflow: clip;
        }

        .project-catalog-shell,
        .skills-lab-shell {
          width: calc(100% - 28px);
          padding-block: 52px 64px;
        }

        .flow-menu-item {
          min-width: 0;
          overflow: hidden;
          contain: paint;
        }

        .contact {
          padding-inline: 16px;
        }

        .contact-panel {
          min-width: 0;
        }

        .profile-video-modal {
          padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
        }

        .profile-video-dialog video {
          max-height: 76svh;
        }
      }

      /* Final phone composition overrides. Desktop remains unchanged. */
      @media (max-width: 680px) {
        .about-profile-grid {
          justify-items: center;
          gap: 34px;
        }

        .about-portrait {
          width: clamp(220px, 64vw, 280px);
          min-height: 0;
          justify-self: center;
        }

        .about-play {
          width: 58px;
          height: 58px;
          right: 12px;
          bottom: 12px;
        }

        .about-video-label {
          left: 14px;
          bottom: 14px;
          font-size: 6px;
        }

        .about-info {
          justify-self: stretch;
        }

        .about-info h3 {
          max-width: 100%;
          font-size: clamp(30px, 9vw, 38px);
          line-height: 1.05;
          white-space: nowrap;
        }

        .story-section::before {
          inset: -110px 0 -120px;
          opacity: 0.82;
          -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
        }

        .story-article-wrap,
        .story-article-inner,
        .story-article {
          background: transparent;
          box-shadow: none;
        }

        .story-article {
          border-top: 0;
          border-bottom: 0;
          padding-top: 46px;
        }

        .story-copy-head,
        .story-chapter {
          padding-inline: 0;
        }

        .cap-map-section {
          padding: 62px max(16px, env(safe-area-inset-right)) 72px max(16px, env(safe-area-inset-left));
        }

        .cap-map-head {
          display: grid;
          gap: 12px;
          padding: 0 0 26px;
          text-align: left;
        }

        .cap-map-head > p {
          margin: 0;
          text-align: left;
        }

        .cap-map-field {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 12px;
          overflow: visible;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .cap-map-core,
        .cap-map-link,
        .cap-map-field::before,
        .cap-map-field::after {
          display: none !important;
        }

        .cap-map-node,
        .cap-map-node:nth-of-type(1),
        .cap-map-node:nth-of-type(2),
        .cap-map-node:nth-of-type(3),
        .cap-map-node:nth-of-type(4) {
          position: relative;
          inset: auto;
          width: 100%;
          min-height: 0;
          display: block;
          padding: 22px 20px 20px;
          border: 1px solid rgba(244, 241, 232, 0.13);
          border-radius: 14px;
          color: var(--paper);
          background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.085), transparent 58%), rgba(9, 11, 11, 0.84);
          box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
          opacity: 1;
          text-align: left;
          transform: none !important;
        }

        .cap-map-node:nth-of-type(odd) {
          border-right: 1px solid rgba(244, 241, 232, 0.13);
        }

        .cap-map-node::before,
        .cap-map-node::after {
          display: none;
        }

        .cap-map-node > span {
          display: block;
          margin: 0 0 10px;
          color: var(--accent);
          font-size: 9px;
          line-height: 1.3;
        }

        .cap-map-node h3 {
          margin: 0 0 12px;
          font-size: clamp(24px, 7.2vw, 30px);
          line-height: 1.12;
        }

        .cap-map-node p {
          display: block;
          margin: 0;
          color: rgba(244, 241, 232, 0.62);
          font-size: 12px;
          line-height: 1.75;
        }

        .cap-map-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 7px;
          margin-top: 16px;
        }

        .cap-map-tags small,
        .cap-map-tags small:nth-child(n + 4) {
          display: inline-flex;
          align-items: center;
          min-height: 26px;
          padding: 5px 9px;
          border: 1px solid rgba(244, 241, 232, 0.11);
          border-radius: 999px;
          color: rgba(244, 241, 232, 0.58);
          font-size: 8px;
          line-height: 1;
        }

        .cap-map-node:hover,
        .cap-map-node:focus-visible,
        .cap-map-node.is-active {
          background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 58%), rgba(9, 11, 11, 0.9);
          transform: none !important;
        }

        .mouse-tools,
        .mouse-tools-shell {
          min-height: 650px;
        }

        .mouse-tools-shell {
          padding: 72px 0 58px;
        }

        .mouse-tools-head {
          position: relative;
          top: auto;
          width: calc(100% - 32px);
          margin: 0 auto 44px;
          align-items: flex-start;
        }

        .mouse-tools-head h2 {
          font-size: clamp(42px, 13vw, 58px);
        }

        .mouse-tools-stage,
        .mouse-tools-hint {
          display: none !important;
        }

        .mobile-tools-marquee {
          position: relative;
          display: grid;
          gap: 14px;
          width: 100%;
          padding: 16px 0 24px;
          overflow: hidden;
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        }

        .mobile-tools-row {
          width: 100%;
          overflow: hidden;
        }

        .mobile-tools-track {
          width: max-content;
          display: flex;
          gap: 14px;
          padding-inline: 7px;
          animation: mobileToolsDrift 24s linear infinite;
          will-change: transform;
        }

        .mobile-tools-row--reverse .mobile-tools-track {
          animation-name: mobileToolsDriftReverse;
          animation-duration: 27s;
        }

        .mobile-tools-track--slow {
          animation-duration: 30s;
        }

        .mobile-tools-track a {
          flex: 0 0 auto;
          width: 104px;
          height: 112px;
          display: grid;
          place-items: center;
          align-content: center;
          gap: 10px;
          border: 1px solid rgba(244, 241, 232, 0.12);
          border-radius: 14px;
          color: rgba(244, 241, 232, 0.72);
          background: rgba(8, 10, 10, 0.72);
          box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
        }

        .mobile-tools-track img {
          width: 48px;
          height: 48px;
          display: block;
          border-radius: 12px;
          object-fit: contain;
        }

        .mobile-tools-track span {
          max-width: 90px;
          overflow: hidden;
          font-size: 10px;
          font-weight: 700;
          line-height: 1.2;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .mobile-tools-marquee:active .mobile-tools-track {
          animation-play-state: paused;
        }
      }

      @media (max-width: 680px) and (prefers-reduced-motion: reduce) {
        .mobile-tools-track {
          animation-play-state: paused;
        }
      }

      /* Desktop title scale: one clear hierarchy across all primary sections. */
      @media (min-width: 821px) {
        .about-titlebar h2,
        .story-portal h2,
        .cap-map-head h2,
        .aigc-gallery-head h2,
        .showcase-heading h2 {
          font-size: clamp(42px, 5vw, 66px);
        }

        .project-catalog-head h2 {
          font-size: clamp(40px, 4.6vw, 62px);
        }

        .skills-lab-head h2 {
          font-size: clamp(36px, 4.2vw, 56px);
        }

        .mouse-tools-head h2 {
          font-size: clamp(52px, 5.8vw, 84px);
        }

        .contact-elastic-title {
          font-size: clamp(48px, 5.1vw, 78px);
        }
      }