:root {
      --bg: #07090c;
      --text: #f5f7f8;
      --muted: #a6afb8;
      --line: rgba(255,255,255,.09);
      --accent: #91f39c;
      --mx: 50vw;
      --my: 50vh;
      --frame: 1180px;
      --page-gutter: clamp(22px, 3vw, 52px);
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      min-height: 100%;
      margin: 0;
    }

    body {
      background:
        radial-gradient(250px circle at var(--mx) var(--my), rgba(145,243,156,.01625), transparent 74%),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
      overflow-y: hidden;
    }

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

    canvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .noise {
      position: fixed;
      inset: 0;
      opacity: .025;
      z-index: 1;
      pointer-events: none;
      background-image:
        repeating-radial-gradient(circle at 0 0, transparent 0, rgba(255,255,255,.35) 1px, transparent 1.3px);
      background-size: 5px 5px;
      mix-blend-mode: soft-light;
    }

    .shell {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100svh;
      min-height: 560px;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      padding-block: clamp(24px, 3vh, 34px);
      padding-inline: max(var(--page-gutter), calc((100vw - var(--frame)) / 2));
    }

    .topbar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 24px;
    }

    .mark {
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #b5bdc5;
    }

    .status {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #929ca6;
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: .67rem;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .status-dot {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 14px rgba(145,243,156,.4);
    }

    .shell > main {
      align-self: stretch;
      width: 100%;
      min-height: 0;
      margin: 0;
      padding-block: clamp(32px, 6vh, 72px);
      transform: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .name {
      margin: 0;
      max-width: 100%;
      font-size: clamp(4.5rem, min(9.4vw, 17vh), 10.5rem);
      line-height: .84;
      letter-spacing: -.075em;
      font-weight: 850;
      text-shadow: 0 0 22px rgba(255,255,255,.035);
    }

    .name span {
      display: block;
      color: #d9dee3;
    }

    .role {
      margin-top: clamp(22px, 3vh, 30px);
      color: #eef1f3;
      font-size: clamp(1rem, 1.25vw, 1.2rem);
      font-weight: 560;
      letter-spacing: -.015em;
    }

    .line {
      margin-top: 9px;
      max-width: 780px;
      color: #b7c0c8;
      font-size: clamp(.98rem, 1.15vw, 1.12rem);
      line-height: 1.55;
      font-weight: 450;
    }

    .statement-shimmer {
      position: relative;
      display: inline-block;
      width: fit-content;
      max-width: 100%;
    }

    .statement-shimmer::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      pointer-events: none;

      color: transparent;
      background:
        linear-gradient(
          105deg,
          transparent 0%,
          transparent 43%,
          rgba(255,255,255,.92) 48%,
          rgba(185,245,194,.96) 50%,
          rgba(255,255,255,.92) 52%,
          transparent 57%,
          transparent 100%
        );
      background-size: 330% 100%;
      background-position: 120% 0;
      -webkit-background-clip: text;
      background-clip: text;

      animation: statementSweep 14s cubic-bezier(.22,.61,.36,1) infinite;
    }

    @keyframes statementSweep {
      0%, 76% {
        background-position: 120% 0;
      }

      94%, 100% {
        background-position: -25% 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .statement-shimmer::after {
        animation: none;
        display: none;
      }
    }

    .nav {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 26px;
      margin-top: clamp(28px, 5vh, 44px);
      max-width: 960px;
    }

    .nav a {
      position: relative;
      padding: 7px 0;
      color: #b8c0c8;
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: .76rem;
      letter-spacing: .085em;
      text-transform: uppercase;
      transition:
        color 180ms ease,
        transform 180ms ease;
    }

    .nav a::before {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 0;
      height: 1px;
      background: var(--accent);
      transition: right 180ms ease;
    }

    .nav a::after {
      content: "↗";
      display: inline-block;
      margin-left: 7px;
      opacity: 0;
      transform: translate(-5px, 3px);
      color: var(--accent);
      transition:
        opacity 180ms ease,
        transform 180ms ease;
    }

    .nav a:hover {
      color: var(--text);
      transform: translateX(3px);
    }

    .nav a:hover::before {
      right: 0;
    }

    .nav a:hover::after {
      opacity: 1;
      transform: translate(0, 0);
    }

    footer {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 30px;
      color: #7e8892;
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: .64rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

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

    .mouse {
      width: 15px;
      height: 21px;
      border: 1px solid #47515a;
      border-radius: 9px;
      position: relative;
    }

    .mouse::after {
      content: "";
      position: absolute;
      width: 2px;
      height: 4px;
      border-radius: 2px;
      background: #717b85;
      left: calc(50% - 1px);
      top: 4px;
      animation: wheel 1.8s infinite ease;
    }

    @keyframes wheel {
      0%   { transform: translateY(0); opacity: 0; }
      20%  { opacity: 1; }
      70%  { opacity: 1; }
      100% { transform: translateY(6px); opacity: 0; }
    }

    @media (max-height: 680px) and (min-width: 721px) {
      body { overflow-y: auto; }

      .shell {
        height: auto;
        min-height: 100svh;
      }

      .shell > main {
        padding-block: 48px;
      }

      .name {
        font-size: clamp(4.5rem, 13vh, 8rem);
      }

      .nav {
        margin-top: 30px;
      }
    }

    @media (max-width: 720px) {
      body { overflow-y: auto; }

      .shell {
        height: auto;
        min-height: 100svh;
        padding: 24px 22px;
      }

      .topbar .mark:last-child {
        display: none;
      }

      .status {
        font-size: .59rem;
        letter-spacing: .07em;
      }

      .shell > main {
        padding: 72px 0 64px;
      }

      .name {
        font-size: clamp(3.8rem, 22vw, 7rem);
      }

      .line {
        max-width: 100%;
      }

      .nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        margin-top: 34px;
      }

      footer {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    /* Shared responsive frame for all secondary pages. */
    body .subpage-shell {
      width: 100%;
      min-height: 100svh;
      padding-block: clamp(24px, 3vh, 34px);
      padding-inline: max(var(--page-gutter), calc((100vw - var(--frame)) / 2));
    }

    body .subpage-top {
      width: 100%;
    }

    body .subpage-main {
      width: 100%;
      max-width: none;
      margin: 0;
      padding-block: clamp(72px, 9vh, 116px) clamp(58px, 8vh, 96px);
    }

    body .subpage-title {
      max-width: 100%;
      font-size: clamp(3.5rem, min(8vw, 13vh), 8rem);
    }

    body .subpage-copy {
      max-width: 720px;
    }

    @media (max-width: 720px) {
      body .subpage-shell {
        padding: 24px 22px;
      }

      body .subpage-main {
        padding: 72px 0 58px;
      }

      body .subpage-title {
        font-size: clamp(3.15rem, 16vw, 5.6rem);
      }
    }

    /* Professional work is designed like the original landing composition:
       viewport-wide with edge gutters, never a centered 1100px card. */
    @media (min-width: 901px) {
      html body.professional-page .subpage-shell {
        padding: 30px 42px 54px !important;
      }

      html body.professional-page .subpage-top,
      html body.professional-page .subpage-main {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      html body.professional-page .subpage-main {
        padding: clamp(82px, 10vh, 116px) 0 84px !important;
      }

      html body.professional-page .subpage-title {
        font-size: clamp(5rem, 8.4vw, 11rem) !important;
      }

      html body.professional-page .subpage-copy {
        max-width: min(58vw, 1120px) !important;
        font-size: clamp(1rem, 1.08vw, 1.35rem) !important;
      }

      html body.professional-page .projects {
        width: 100% !important;
      }

      html body.professional-page .project-title {
        font-size: clamp(1.65rem, 2.35vw, 3rem) !important;
      }

      html body.professional-page .project-content {
        grid-template-columns: minmax(320px, .78fr) minmax(560px, 1.22fr) !important;
        gap: clamp(46px, 4vw, 86px) !important;
      }

      html body.professional-page .project-copy {
        font-size: clamp(.94rem, .92vw, 1.18rem) !important;
      }
    }

    /* Use actual Steam storefront media for Steam-backed project backdrops.
       The project page's JS layers are disabled for these three projects so
       the real storefront media strip can crossfade cleanly. */
    body.professional-page .project[data-short="9 Yin"] .project-backdrop-layer,
    body.professional-page .project[data-short="ARK Aquatica"] .project-backdrop-layer,
    body.professional-page .project[data-short="Town of Zoz"] .project-backdrop-layer {
      display: none !important;
    }

    body.professional-page .project[data-short="9 Yin"] .project-backdrop,
    body.professional-page .project[data-short="ARK Aquatica"] .project-backdrop,
    body.professional-page .project[data-short="Town of Zoz"] .project-backdrop {
      inset: -2% !important;
      opacity: 0 !important;
      overflow: hidden !important;
      transition: opacity .7s ease !important;
    }

    body.professional-page .project[data-short="9 Yin"][open] .project-backdrop,
    body.professional-page .project[data-short="ARK Aquatica"][open] .project-backdrop,
    body.professional-page .project[data-short="Town of Zoz"][open] .project-backdrop {
      opacity: .76 !important;
    }

    body.professional-page .project[data-short="9 Yin"] .project-backdrop::before,
    body.professional-page .project[data-short="9 Yin"] .project-backdrop::after,
    body.professional-page .project[data-short="ARK Aquatica"] .project-backdrop::before,
    body.professional-page .project[data-short="ARK Aquatica"] .project-backdrop::after,
    body.professional-page .project[data-short="Town of Zoz"] .project-backdrop::before,
    body.professional-page .project[data-short="Town of Zoz"] .project-backdrop::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      pointer-events: none !important;
      background-position: center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      filter: saturate(1.08) contrast(1.03) brightness(1.06) !important;
      transform: scale(1.045);
      opacity: 0;
      will-change: opacity, transform;
    }

    /* 9 Yin Sutra: Steam screenshot + official Steam library/store imagery. */
    body.professional-page .project[data-short="9 Yin"] .project-backdrop::before {
      --shot-a: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3638800/8bbdd4ed345e9253c517afbb6b03bd17f79d1c2e/ss_8bbdd4ed345e9253c517afbb6b03bd17f79d1c2e.1920x1080.jpg?t=1786641701");
      --shot-c: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3638800/b3de06d7fb5c58031dae2bb4ff70583fadf0ddd8/library_hero_2x.jpg");
      animation: steamShotA 22s ease-in-out infinite !important;
    }
    body.professional-page .project[data-short="9 Yin"] .project-backdrop::after {
      --shot-b: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3638800/77efeec8d2baf5b51408ff9bbadd648307578b10/header_2x.jpg");
      --shot-d: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3638800/4e7fa415d4f861ad14fdcfdc877cdce8c05162c2/library_header_2x.jpg");
      animation: steamShotB 22s ease-in-out infinite !important;
    }

    /* ARK: Aquatica: actual Steam screenshot assets + Steam trailer/store art. */
    body.professional-page .project[data-short="ARK Aquatica"] .project-backdrop::before {
      --shot-a: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3537070/02e2c53486a4cd4c28bed830f88cd330cdcc955b/ss_02e2c53486a4cd4c28bed830f88cd330cdcc955b.1920x1080.jpg?t=1752598968");
      --shot-c: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3537070/44c331f12d73ee0c9f81ee222558ad3e580c06fd/ss_44c331f12d73ee0c9f81ee222558ad3e580c06fd.jpg");
      animation: steamShotA 22s ease-in-out infinite !important;
    }
    body.professional-page .project[data-short="ARK Aquatica"] .project-backdrop::after {
      --shot-b: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/257168900/0361c2b92f21485d733f3c68060bcf8d3e204424/movie_full.jpg");
      --shot-d: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3537070/82c8febf8513ce7445b4d79994b19655908521ca/header_2x.jpg");
      animation: steamShotB 22s ease-in-out infinite !important;
    }

    /* Town of Zoz: starts with the real storefront screenshot supplied from
       Steam's media strip, then rotates through the current Steam store art. */
    body.professional-page .project[data-short="Town of Zoz"] .project-backdrop::before {
      --shot-a: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1748110/1b2866841ec4951b3237ac034b7939de73014c99/ss_1b2866841ec4951b3237ac034b7939de73014c99.1920x1080.jpg?t=1775753971");
      --shot-c: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1748110/72a9f0e7e73c39711c52b0026d64c96910158e8a/library_hero_2x.jpg");
      animation: steamShotA 22s ease-in-out infinite !important;
    }
    body.professional-page .project[data-short="Town of Zoz"] .project-backdrop::after {
      --shot-b: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1748110/c056cbace79ea92fcd61fb7bd243063a312427ce/page_bg_raw.jpg?t=1775753971");
      --shot-d: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1748110/c8116ba0e01df27e114f2c67ea36de9d9d1c38c0/header_2x.jpg?t=1775753971");
      animation: steamShotB 22s ease-in-out infinite !important;
    }

    @keyframes steamShotA {
      0%   { background-image: var(--shot-a); opacity: 1; transform: scale(1.045); }
      20%  { background-image: var(--shot-a); opacity: 1; transform: scale(1.015); }
      27%  { background-image: var(--shot-a); opacity: 0; transform: scale(1.005); }
      48%  { background-image: var(--shot-a); opacity: 0; }
      50%  { background-image: var(--shot-c); opacity: 0; transform: scale(1.045); }
      55%  { background-image: var(--shot-c); opacity: 1; }
      70%  { background-image: var(--shot-c); opacity: 1; transform: scale(1.015); }
      77%  { background-image: var(--shot-c); opacity: 0; transform: scale(1.005); }
      100% { background-image: var(--shot-c); opacity: 0; }
    }

    @keyframes steamShotB {
      0%   { background-image: var(--shot-b); opacity: 0; transform: scale(1.045); }
      20%  { background-image: var(--shot-b); opacity: 0; }
      27%  { background-image: var(--shot-b); opacity: 1; }
      45%  { background-image: var(--shot-b); opacity: 1; transform: scale(1.015); }
      52%  { background-image: var(--shot-b); opacity: 0; transform: scale(1.005); }
      70%  { background-image: var(--shot-d); opacity: 0; transform: scale(1.045); }
      77%  { background-image: var(--shot-d); opacity: 1; }
      95%  { background-image: var(--shot-d); opacity: 1; transform: scale(1.015); }
      100% { background-image: var(--shot-d); opacity: 0; transform: scale(1.005); }
    }

    body.professional-page .project::before {
      background: linear-gradient(90deg,rgba(7,9,12,.94) 0%,rgba(7,9,12,.80) 30%,rgba(7,9,12,.48) 58%,rgba(7,9,12,.22) 82%,rgba(7,9,12,.34) 100%) !important;
    }

    @media (prefers-reduced-motion: reduce) {
      body.professional-page .project .project-backdrop::before,
      body.professional-page .project .project-backdrop::after {
        animation: none !important;
      }
      body.professional-page .project[data-short="9 Yin"] .project-backdrop::before,
      body.professional-page .project[data-short="ARK Aquatica"] .project-backdrop::before,
      body.professional-page .project[data-short="Town of Zoz"] .project-backdrop::before {
        background-image: var(--shot-a) !important;
        opacity: 1 !important;
      }
    }