@font-face {
      font-family: "SweiSpring TC";
      src: url("CJK TC/SweiSpringCJKtc-SemiBold.woff2") format("woff2");
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
    }

    :root {
      --ink: #26221d;
      --muted: #71695f;
      --paper: #f7f4ec;
      --paper-deep: #e8dfd0;
      --line: #d7cbbb;
      --green: #87a96b;
      --rose: #d8756b;
      --blue: #5d8fb4;
      --amber: #d89c3f;
      --violet: #8d78b7;
      --shadow: 0 24px 60px rgba(44, 36, 25, .17);
      --ease: cubic-bezier(.2, .86, .25, 1);
      --ease-out: cubic-bezier(.23, 1, .32, 1);
      --ease-drawer: cubic-bezier(.32, .72, 0, 1);
      --cursor-arrow: url("assets/cursors/bibata-modern-classic.svg") 7 2, auto;
      --ui-font: "SweiSpring TC", "PingFang TC", "Noto Sans TC", sans-serif;
      --code-font: "SFMono-Regular", Consolas, ui-monospace, monospace;
      font-family: var(--ui-font);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      scroll-padding-top: 0;
    }

    html.snap-physics-active {
      scroll-behavior: auto;
      scroll-snap-type: none;
    }

    main.physics-layer-active { will-change: transform; }

    body {
      margin: 0;
      cursor: var(--cursor-arrow);
      color: var(--ink);
      background-color: #faf8f5;
      background-image:
        linear-gradient(rgba(196, 177, 148, .25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 177, 148, .25) 1px, transparent 1px);
      background-size: 56px 56px;
      overflow-x: hidden;
    }

    main > section {
      min-height: 100vh;
      min-height: 100svh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      isolation: isolate;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .1;
      background: url("noise-texture.png") repeat;
      background-size: 200px 200px;
      z-index: 9999;
    }

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

    a,
    button,
    [role="button"] { cursor: var(--cursor-arrow); }

    .boot {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      background: #201e1a;
      color: #f7f4ec;
      animation: boot-away .65s var(--ease) 1.8s both;
    }

    .boot-card {
      width: min(420px, calc(100vw - 48px));
      padding: 22px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 8px;
      background: rgba(255,255,255,.06);
      box-shadow: 0 28px 80px rgba(0,0,0,.35);
    }

    .boot-row {
      font-family: var(--code-font);
      font-size: 13px;
      line-height: 1.8;
      color: rgba(247,244,236,.8);
    }

    .boot-caret {
      display: inline-block;
      width: 8px;
      height: 15px;
      margin-left: 4px;
      vertical-align: -2px;
      background: #f7f4ec;
      animation: blink 1s steps(2) infinite;
    }

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 80;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }

    .nav-inner {
      width: min(1400px, 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 34px;
      pointer-events: auto;
    }

    .brand {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      gap: 26px;
      margin-left: auto;
      font-size: 12px;
      color: var(--muted);
    }

    .nav-links a {
      transition: color .2s ease, transform .2s ease;
    }

    .nav-links a:hover {
      color: var(--ink);
      transform: translateY(-2px);
    }

    .hero {
      height: 100vh;
      min-height: 620px;
      display: grid;
      place-items: center;
      padding: 42px 20px 24px;
      overflow: visible;
    }

    .stage {
      position: relative;
      width: 1400px;
      height: 700px;
      max-width: 100vw;
      transform-origin: center center;
      transition: transform .25s ease;
    }

    .signature {
      position: absolute;
      left: 50%;
      top: calc(50% - 36px);
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 40;
      animation: blur-in .7s ease .45s both;
    }

    .signature h1 {
      margin: 0;
      font-family: var(--ui-font);
      font-size: clamp(60px, 9vw, 116px);
      line-height: .82;
      font-weight: 700;
      letter-spacing: -.02em;
    }

    .signature p {
      margin: 20px 0 0;
      color: var(--muted);
      font-size: 13px;
      letter-spacing: .22em;
      text-transform: uppercase;
      animation: fade-up .55s var(--ease) 1.65s both;
    }

    .glare {
      position: absolute;
      inset: -20px;
      overflow: hidden;
      pointer-events: none;
    }

    .glare::before {
      content: "";
      position: absolute;
      top: 0;
      left: -70%;
      width: 46%;
      height: 100%;
      transform: skewX(-16deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
      animation: glare 1.1s ease 3.6s both;
    }

    .object {
      position: absolute;
      filter: drop-shadow(0 18px 30px rgba(42,35,24,.16));
      will-change: transform, opacity;
    }

    .badge {
      left: 10px;
      top: -226px;
      z-index: 22;
      width: 218px;
      transform-origin: top center;
      animation: badge-drop 1.5s var(--ease) 2.1s both, swing 3.2s ease-in-out 3.6s infinite;
    }

    .lanyard {
      width: 28px;
      height: 246px;
      margin: 0 auto -34px;
      background:
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.18) 5px 6px),
        linear-gradient(180deg, #34302b, #191714);
      box-shadow: inset 0 1px rgba(255,255,255,.16);
    }

    .badge-card {
      border-radius: 14px;
      padding: 7px;
      background: linear-gradient(160deg, #434343, #242321 72%, #12110f);
      box-shadow: 0 18px 40px rgba(0,0,0,.2);
    }

    .badge-top {
      padding: 22px 18px 12px;
      border-radius: 9px 9px 0 0;
      color: white;
      background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 40%),
        linear-gradient(165deg, #353534, #242422);
    }

    .badge-top strong {
      display: block;
      font-size: 25px;
      line-height: 1.1;
      letter-spacing: .04em;
    }

    .badge-role {
      display: block;
      margin-top: 10px;
      color: rgba(255,255,255,.86);
      font-size: 12px;
      line-height: 1.4;
    }

    .badge-rule {
      display: block;
      width: 26px;
      height: 2px;
      margin: 13px 0 11px;
      background: rgba(255,255,255,.72);
    }

    .badge-details {
      margin: 0;
      padding-left: 14px;
      color: rgba(255,255,255,.72);
      font-size: 9px;
      line-height: 1.65;
    }

    .badge-details li + li {
      margin-top: 2px;
    }

    .portrait {
      display: grid;
      place-items: center;
      padding: 10px 0 18px;
      border-radius: 0 0 9px 9px;
      background: linear-gradient(180deg, #242422, #11110f);
    }

    .portrait-face {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      border: 3px solid rgba(255,255,255,.72);
      object-fit: cover;
      object-position: 50% 38%;
      transition: transform .35s ease, filter .35s ease;
    }

    .badge:hover .portrait-face {
      transform: scale(1.08) rotate(-4deg);
      filter: saturate(1.35);
    }

    .resume-folder {
      left: 28px;
      top: 300px;
      z-index: 26;
      width: 300px;
      height: 394px;
      transform: rotate(-5deg);
      transform-origin: 52% 92%;
      animation: slide-left .7s var(--ease) 1.25s both;
      cursor: zoom-in;
      outline: none;
    }

    .resume-folder-cover {
      position: absolute;
      left: 8px;
      bottom: 0;
      z-index: 2;
      width: 269px;
      height: auto;
      display: block;
      filter: drop-shadow(0 18px 22px rgba(42,35,24,.2));
      transition: transform .48s var(--ease), filter .48s ease;
    }

    .resume-sheet {
      position: absolute;
      left: 46px;
      bottom: 74px;
      z-index: 1;
      width: 202px;
      height: auto;
      display: block;
      border: 1px solid rgba(83, 75, 65, .18);
      background: white;
      box-shadow: 0 18px 38px rgba(42,35,24,.22);
      opacity: 0;
      transform: translateY(88px) rotate(2deg) scale(.88, .08) skewX(-4deg);
      transform-origin: 50% 100%;
      transition: transform .62s cubic-bezier(.2,.82,.18,1), opacity .2s ease;
    }

    .resume-folder:hover,
    .resume-folder:focus-visible {
      z-index: 46;
    }

    .resume-folder:hover .resume-sheet,
    .resume-folder:focus-visible .resume-sheet {
      opacity: 1;
      transform: translateY(-84px) rotate(2deg) scale(1) skewX(0deg);
    }

    .resume-folder:hover .resume-folder-cover,
    .resume-folder:focus-visible .resume-folder-cover {
      transform: translateY(5px) rotate(1deg);
      filter: drop-shadow(0 22px 26px rgba(42,35,24,.24));
    }

    .resume-folder:focus-visible::after {
      content: "";
      position: absolute;
      inset: 42px 4px 0;
      z-index: 4;
      border: 2px solid #285ebc;
      border-radius: 6px;
      pointer-events: none;
    }

    .resume-lightbox {
      position: fixed;
      inset: 0;
      z-index: 10020;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: clamp(20px, 4vw, 56px);
      background: rgba(30, 27, 23, .38);
      backdrop-filter: blur(8px);
      cursor: zoom-out;
      animation: fade-in .22s ease both;
    }

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

    .resume-lightbox img {
      display: block;
      width: auto;
      height: min(88vh, 920px);
      max-width: min(46vw, 720px);
      object-fit: contain;
      border: 1px solid rgba(255,255,255,.5);
      background: white;
      box-shadow: 0 30px 90px rgba(20, 17, 13, .38);
      cursor: var(--cursor-arrow);
      animation: resume-open .38s var(--ease) both;
    }

    body.resume-preview-open { overflow: hidden; }

    .ipad-hero {
      right: -54px;
      top: 0;
      z-index: 19;
      width: 420px;
      transform: rotate(4deg);
      transform-origin: 52% 52%;
      animation: ipad-arrive .75s var(--ease) 1.55s both;
      transition: transform .4s var(--ease), filter .4s ease;
    }

    .ipad-hero img {
      display: block;
      width: 100%;
      height: auto;
    }

    .ipad-hero:hover {
      transform: rotate(1.5deg) translateY(-8px);
      filter: drop-shadow(0 24px 34px rgba(42,35,24,.2));
    }

    .desk-paper {
      left: 252px;
      right: auto;
      top: 0;
      z-index: 11;
      width: 430px;
      transform: rotate(-4deg);
      filter: drop-shadow(0 12px 24px rgba(42,35,24,.16));
      animation: desk-paper-in .7s var(--ease) 2.05s both;
      transition: transform .38s var(--ease), filter .38s ease;
    }

    .desk-paper:hover {
      transform: rotate(-1deg) translateY(-8px) scale(1.025);
      filter: drop-shadow(0 18px 30px rgba(42,35,24,.2));
    }

    .desk-paper-sheet {
      display: block;
      width: 100%;
      height: auto;
    }

    .desk-coffee,
    .desk-plant,
    .desk-pencil-wrap {
      position: absolute;
      display: block;
    }

    .desk-coffee {
      left: 54%;
      top: 47%;
      width: 70px;
      transform: translate(-50%, -50%);
      filter: drop-shadow(0 5px 8px rgba(42,35,24,.2));
    }

    .desk-coffee:hover { animation: coffee-wobble .55s ease; }

    .desk-plant {
      left: -9%;
      top: 48%;
      width: 178px;
      transform: rotate(-7deg);
      transform-origin: 50% 100%;
      filter: drop-shadow(0 6px 9px rgba(42,35,24,.2));
      transition: transform .42s var(--ease), filter .42s ease;
    }

    .desk-plant:hover {
      transform: rotate(1deg) translateY(-14px) scale(1.07);
      filter: drop-shadow(0 14px 18px rgba(42,35,24,.25));
    }

    .desk-pencil-wrap {
      right: 12%;
      top: 16%;
      width: 58px;
      transition: transform .35s var(--ease);
    }

    .desk-pencil {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 4px 7px rgba(42,35,24,.2));
    }

    .desk-pencil-line {
      position: absolute;
      left: -4px;
      bottom: -10px;
      width: 76px;
      height: 11px;
      object-fit: contain;
      clip-path: inset(0 100% 0 0);
      transition: clip-path .5s ease .08s;
    }

    .desk-pencil-wrap:hover { transform: translateY(-9px) scale(1.08); }
    .desk-pencil-wrap:hover .desk-pencil-line { clip-path: inset(0 0 0 0); }

    .folder {
      left: 336px;
      top: 502px;
      z-index: 24;
      width: 204px;
      height: 163px;
      rotate: 5deg;
      animation: fade-up .65s var(--ease) 1.55s both;
    }

    .folder-back {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      fill: #ceab7e;
      filter: drop-shadow(0 8px 14px rgba(44,36,25,.12));
    }

    .folder-front {
      position: absolute;
      left: 2px;
      right: 2px;
      bottom: 2px;
      height: 126px;
      border-radius: 12px;
      z-index: 5;
      background: #debb8e;
      box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.06);
      transform-origin: bottom center;
      transition: transform .38s cubic-bezier(.2,.8,.2,1);
    }

    .folder-front span {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 22px;
      color: rgba(77, 57, 35, .72);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-align: center;
      pointer-events: none;
    }

    .folder-paper-stack {
      position: absolute;
      left: 13px;
      right: 13px;
      bottom: 13px;
      height: 103px;
      border-radius: 7px;
      background: rgba(255,255,255,.5);
      opacity: 0;
      transition: opacity .2s ease;
    }

    .folder-item {
      position: absolute;
      left: 50%;
      bottom: 41px;
      z-index: 3;
      width: 77px;
      height: 86px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      opacity: 0;
      transform: translateX(-50%);
      transition: transform .48s var(--ease), opacity .25s ease;
      overflow: visible;
    }

    .folder-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .folder:hover .folder-front { transform: rotateX(-18deg); }
    .folder:hover .folder-paper-stack { opacity: 1; }
    .folder:hover .folder-item { opacity: 1; }
    .folder:hover .folder-item:nth-child(3) { transform: translate(-151px, -86px) rotate(-16deg); }
    .folder:hover .folder-item:nth-child(4) { transform: translate(-38px, -118px) rotate(5deg); }
    .folder:hover .folder-item:nth-child(5) { transform: translate(58px, -82px) rotate(15deg); }

    .terminal {
      left: auto;
      right: 64px;
      top: 446px;
      z-index: 28;
      width: 540px;
      scale: .94;
      transform-origin: 100% 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: white;
      box-shadow: var(--shadow);
      animation: fade-up .65s var(--ease) 1.9s both;
      transition: transform .25s ease;
    }

    .terminal:hover { transform: translateY(-8px) rotate(-1deg); }

    .terminal-bar {
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(#f9f7f2, #ede7dc);
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-family: var(--code-font);
      font-size: 12px;
      position: relative;
    }

    .lights {
      position: absolute;
      left: 12px;
      display: flex;
      gap: 7px;
    }

    .lights i {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: block;
    }

    .lights i:nth-child(1) { background: #ff6159; }
    .lights i:nth-child(2) { background: #ffbd2e; }
    .lights i:nth-child(3) { background: #28c840; }

    .terminal-body {
      min-height: 154px;
      padding: 12px 14px;
      font-family: var(--code-font);
      font-size: 11px;
      line-height: 1.45;
      color: #544d45;
    }

    .terminal-gap {
      display: block;
      height: 6px;
    }

    .cursor {
      display: inline-block;
      width: 7px;
      height: 14px;
      margin-left: 2px;
      vertical-align: -2px;
      background: #9d9488;
      animation: blink 1s steps(2) infinite;
    }

    .ticket {
      right: -18px;
      top: 24px;
      width: 374px;
      height: 166px;
      z-index: 25;
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.08) 18px 20px, transparent 20px),
        linear-gradient(135deg, #f4dca6, #f2a6a0 48%, #b3d7c3);
      border: 1px solid rgba(80, 60, 44, .18);
      box-shadow: var(--shadow);
      transform: rotate(5deg);
      animation: fade-in .7s var(--ease) 1.7s both;
      transition: transform .35s var(--ease);
    }

    .ticket:hover { transform: rotate(1deg) scale(1.42); }

    .ticket::before,
    .ticket::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--paper);
      transform: translateY(-50%);
    }

    .ticket::before { left: -17px; }
    .ticket::after { right: -17px; }

    .ticket-scan {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 55%;
      left: -70%;
      transform: skewX(-18deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
    }

    .ticket:hover .ticket-scan { animation: scan 1.8s ease-in-out infinite; }

    .ticket-copy {
      padding: 25px 32px;
      position: relative;
      z-index: 1;
    }

    .ticket-copy span {
      display: block;
      font-family: var(--code-font);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .ticket-copy strong {
      display: block;
      margin-top: 28px;
      font-family: var(--ui-font);
      font-size: 34px;
      line-height: .9;
    }

    .matrix {
      right: 70px;
      top: 250px;
      z-index: 20;
      padding: 14px;
      border-radius: 18px;
      background: linear-gradient(160deg, #4d4943, #27231f);
      box-shadow: 0 18px 40px rgba(0,0,0,.23);
      transform: rotate(7deg) scale(.72);
      animation: slide-right .65s var(--ease) 1.45s both;
      transition: transform .3s var(--ease);
    }

    .matrix:hover { transform: rotate(2deg) scale(.84); }

    .dots {
      display: grid;
      grid-template-columns: repeat(18, 9px);
      gap: 4px;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #41403e, #242220 68%);
      box-shadow: inset 0 1px rgba(255,255,255,.08);
    }

    .dot.on {
      background: var(--c);
      box-shadow: 0 0 8px var(--c), 0 0 18px color-mix(in srgb, var(--c), transparent 20%);
      animation: dot-pop .45s ease both;
      animation-delay: var(--d);
    }

    .paper {
      left: 172px;
      top: -42px;
      z-index: 15;
      width: 520px;
      min-height: 275px;
      padding: 42px 48px;
      background:
        linear-gradient(90deg, rgba(70,55,40,.06) 1px, transparent 1px),
        linear-gradient(#fffaf1, #f1e8d8);
      background-size: 18px 18px, auto;
      clip-path: polygon(0 5%, 8% 0, 17% 4%, 28% 1%, 39% 5%, 48% 1%, 61% 4%, 73% 0, 86% 4%, 100% 2%, 97% 100%, 4% 97%);
      transform: rotate(-5deg);
      box-shadow: var(--shadow);
      animation: fade-in .65s var(--ease) 1.35s both;
    }

    .paper h2 {
      margin: 0;
      font-family: var(--ui-font);
      font-size: 42px;
      line-height: 1;
    }

    .paper p {
      width: 68%;
      color: var(--muted);
      line-height: 1.7;
      font-size: 14px;
    }

    .coffee {
      position: absolute;
      right: 96px;
      top: 96px;
      width: 72px;
      height: 86px;
      border-radius: 14px 14px 24px 24px;
      background: linear-gradient(#f1d2a8 0 28%, #4a3328 29% 70%, #efe0cb 71%);
      border: 2px solid rgba(80,60,44,.25);
      transition: transform .2s ease;
    }

    .coffee:hover { animation: wobble .55s ease; }

    .plant {
      position: absolute;
      left: 54px;
      bottom: -8px;
      width: 94px;
      height: 122px;
      transform: rotate(-7deg);
      transition: transform .35s var(--ease);
    }

    .plant:hover { transform: rotate(3deg) translateY(-12px) scale(1.08); }

    .plant::before {
      content: "";
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 0;
      height: 50px;
      border-radius: 8px 8px 18px 18px;
      background: linear-gradient(#d98b2f, #a56330);
    }

    .leaf {
      position: absolute;
      bottom: 42px;
      left: 43px;
      width: 22px;
      height: 66px;
      border-radius: 22px 22px 4px 22px;
      background: #6f965d;
      transform-origin: bottom center;
    }

    .leaf:nth-child(1) { transform: rotate(-42deg); }
    .leaf:nth-child(2) { transform: rotate(-18deg); background: #86a96a; }
    .leaf:nth-child(3) { transform: rotate(14deg); }
    .leaf:nth-child(4) { transform: rotate(40deg); background: #9bb978; }

    .flower {
      left: 236px;
      top: 404px;
      z-index: 30;
      width: 104px;
      height: 104px;
      transform: rotate(-7deg);
      animation: pop-in .55s var(--ease) 1.95s both;
      transition: transform .45s var(--ease), filter .45s ease;
    }

    .flower:hover {
      transform: rotate(-2deg) translateY(-28px) scale(1.72);
      filter: saturate(1.35) hue-rotate(18deg);
    }

    .petal {
      position: absolute;
      left: 40px;
      top: 7px;
      width: 24px;
      height: 48px;
      border-radius: 50% 50% 45% 45%;
      background: #df7f77;
      transform-origin: 12px 45px;
    }

    .petal:nth-child(1) { transform: rotate(0deg); }
    .petal:nth-child(2) { transform: rotate(60deg); background: #e8a15c; }
    .petal:nth-child(3) { transform: rotate(120deg); background: #d8756b; }
    .petal:nth-child(4) { transform: rotate(180deg); background: #e7bf69; }
    .petal:nth-child(5) { transform: rotate(240deg); background: #c86f88; }
    .petal:nth-child(6) { transform: rotate(300deg); background: #e29275; }

    .flower::after {
      content: "";
      position: absolute;
      left: 38px;
      top: 38px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #46392e;
    }

    .collage {
      right: -92px;
      top: 182px;
      z-index: 12;
      width: 372px;
      height: 348px;
      border-radius: 10px;
      padding: 16px;
      background: #fff;
      box-shadow: var(--shadow);
      transform: rotate(6deg);
      animation: fade-in .65s var(--ease) 2.05s both;
      transition: transform .35s var(--ease);
    }

    .collage:hover { transform: rotate(1deg) scale(1.08); }

    .collage-grid {
      display: grid;
      height: 100%;
      grid-template-columns: 1.1fr .9fr;
      grid-template-rows: 1fr 1fr;
      gap: 9px;
    }

    .photo {
      border-radius: 7px;
      background: linear-gradient(135deg, var(--a), var(--b));
    }

    .photo:first-child { grid-row: span 2; }

    .peek {
      position: absolute;
      right: 50px;
      top: 58px;
      width: 82px;
      height: 72px;
      border-radius: 48% 48% 40% 40%;
      background: #2f2923;
      opacity: 0;
      transform: translateY(16px) rotate(10deg) scale(.7);
      transition: opacity .28s ease, transform .42s var(--ease);
    }

    .collage:hover .peek {
      opacity: 1;
      transform: translateY(-44px) rotate(8deg) scale(1);
    }

    .peek::before,
    .peek::after {
      content: "";
      position: absolute;
      top: -10px;
      width: 24px;
      height: 24px;
      background: #2f2923;
      transform: rotate(45deg);
    }

    .peek::before { left: 9px; }
    .peek::after { right: 9px; }

    .profile-page {
      --profile-gold: #b18a53;
      --profile-ink: #292724;
      --profile-muted: #706a62;
      --profile-line: rgba(132, 119, 100, .2);
      display: grid;
      place-items: center;
      padding: 0;
      background:
        radial-gradient(circle at 42% 10%, rgba(255,255,255,.95), transparent 34%),
        #fbfaf7;
    }

    .profile-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.94fr) minmax(320px, 1fr);
      align-items: center;
      width: 100%;
      height: 100svh;
      min-height: 620px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }

    .profile-shell.visible { opacity: 1; transform: translateY(0); }

    .profile-copy {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      min-width: 0;
      padding: clamp(42px, 5.5vh, 56px) clamp(44px, 5vw, 84px) clamp(30px, 5vh, 54px);
    }

    .profile-kicker,
    .profile-section-label {
      margin: 0;
      color: var(--profile-gold);
      font: 600 10px/1 var(--code-font);
      letter-spacing: .13em;
    }

    .profile-section-label span { color: rgba(71, 66, 60, .53); letter-spacing: .03em; }
    .profile-name-row { display: flex; align-items: baseline; gap: 22px; margin-top: 12px; }
    .profile-name-row h2 { margin: 0; font-size: clamp(38px, 4.2vw, 62px); font-weight: 650; line-height: .92; letter-spacing: -.06em; }
    .profile-name-row > span { color: var(--profile-gold); font: 500 clamp(14px, 1.35vw, 20px)/1 var(--ui-font); letter-spacing: .08em; }
    .profile-role { margin: 15px 0 0; font-size: clamp(17px, 1.6vw, 23px); letter-spacing: .03em; }
    .profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
    .profile-tags span { padding: 6px 11px; border-radius: 7px; color: #8f6e3e; background: rgba(177,138,83,.1); font-size: 10px; }
    .profile-lede { max-width: 760px; margin: 14px 0 0; color: var(--profile-muted); font-size: clamp(11px, 1vw, 14px); line-height: 1.75; }

    .profile-contact-grid { display: grid; grid-template-columns: .92fr 1.15fr; gap: 9px; width: min(78%, 720px); margin-top: clamp(14px, 2.1vh, 23px); }
    .profile-contact-grid > * { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px 13px; border: 1px solid var(--profile-line); border-radius: 9px; background: rgba(255,255,255,.58); transition: background .2s ease, transform .2s ease; }
    .profile-contact-grid > p { grid-column: 1 / -1; padding: 7px 2px 1px; border: 0; background: transparent; }
    .profile-contact-grid > p .profile-contact-copy { display: flex; align-items: baseline; gap: 14px; }
    .profile-contact-grid > p small { margin-bottom: 0; }
    .profile-contact-grid a:hover { background: rgba(177,138,83,.1); transform: translateY(-2px); }
    .profile-contact-icon { width: 28px; height: 28px; padding: 6px; overflow: visible; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #cfad77, #ac7f45); filter: drop-shadow(0 3px 5px rgba(119,83,38,.16)); fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
    .profile-contact-grid > p .profile-contact-icon { width: 22px; height: 22px; padding: 4px; color: #8e7a60; background: rgba(177,138,83,.1); filter: none; }
    .profile-contact-copy { display: block; min-width: 0; }
    .profile-contact-grid small { display: block; margin-bottom: 6px; color: rgba(91,82,71,.56); font: 500 8px/1 var(--code-font); letter-spacing: .08em; }
    .profile-contact-grid strong { display: block; overflow-wrap: anywhere; color: var(--profile-ink); font-size: 11px; font-weight: 560; }

    .profile-information { display: grid; grid-template-columns: .92fr 1.08fr; gap: 24px; margin-top: clamp(14px, 2vh, 21px); padding: clamp(14px, 2vh, 21px) 0; border-top: 1px solid var(--profile-line); border-bottom: 1px solid var(--profile-line); }
    .profile-capability { padding-right: 23px; border-right: 1px solid var(--profile-line); }
    .profile-pill-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
    .profile-pill-list span { padding: 6px 9px; border-radius: 6px; color: #5f574e; background: rgba(177,138,83,.11); font-size: 10px; }
    .profile-capability > p:last-child { margin: 12px 0 0; color: var(--profile-muted); font-size: 11px; }
    .profile-education-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 13px; }
    .profile-education-grid section { position: relative; padding-left: 14px; border-left: 1px solid rgba(177,138,83,.34); }
    .profile-education-grid section::before { content: ""; position: absolute; top: 1px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--profile-gold); }
    .profile-education-grid time { color: #8c775d; font: 500 9px/1 var(--code-font); }
    .profile-education-grid h3 { margin: 8px 0 3px; font-size: 13px; }
    .profile-education-grid p { margin: 0; color: var(--profile-muted); font-size: 10px; line-height: 1.55; }

    .profile-skills { margin-top: clamp(14px, 1.8vh, 20px); }
    .profile-skill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
    .profile-skill-grid section { display: grid; grid-template-columns: 30px 1fr; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--profile-line); border-radius: 9px; background: rgba(255,255,255,.48); }
    .profile-skill-grid b { color: var(--profile-gold); font: 500 17px/1 var(--ui-font); }
    .profile-skill-grid h3 { margin: 0 0 5px; font-size: 10px; }
    .profile-skill-grid p { margin: 0; color: var(--profile-muted); font-size: 8px; line-height: 1.5; }

    .profile-toolkit { margin-top: clamp(13px, 1.7vh, 18px); }
    .profile-toolkit > div { display: grid; grid-template-columns: .85fr 1.2fr 1.35fr; gap: 12px; margin-top: 10px; }
    .profile-toolkit p { margin: 0; color: var(--profile-muted); font-size: 8.5px; line-height: 1.55; }
    .profile-toolkit b { display: block; margin-bottom: 4px; color: #534c44; font: 600 8px/1 var(--code-font); letter-spacing: .06em; }

    .profile-portrait-scene { position: relative; top: -12px; align-self: center; min-width: 0; width: 100%; height: 80.5%; overflow: hidden; border: 1px solid rgba(177,138,83,.14); border-right: 0; border-radius: 54px 0 0 54px; background: #f5f2eb; }
    .profile-grid-paper { position: absolute; inset: 0; background-image: linear-gradient(rgba(177,138,83,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(177,138,83,.1) 1px, transparent 1px); background-size: 28px 28px; }
    .profile-grid-paper::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 20%, rgba(246,243,236,.45) 78%); }
    .profile-id-card { position: absolute; z-index: 2; top: 6%; left: 8%; display: flex; flex-direction: column; align-items: center; width: 68%; height: 72%; padding: clamp(34px, 5vh, 58px) 24px 22px; border-radius: 20px; background: rgba(255,255,253,.94); box-shadow: 0 22px 52px rgba(76,65,50,.15); transform: rotate(1.5deg); }
    .profile-tape { position: absolute; z-index: 4; top: 0; left: 38%; width: 52px; height: 51px; background: repeating-linear-gradient(90deg, #292927 0 5px, #161615 5px 8px); box-shadow: 0 5px 8px rgba(0,0,0,.22); transform: rotate(3deg); }
    .profile-photo-ring { width: clamp(124px, 14vw, 190px); aspect-ratio: 1; padding: 9px; border: 1px solid rgba(177,138,83,.25); border-radius: 50%; background: rgba(235,231,223,.65); }
    .profile-photo-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 20%; }
    .profile-signature { margin: 22px 0 5px; color: #a47c45; font: italic 500 clamp(30px, 4vw, 54px)/1 cursive; transform: rotate(-5deg); }
    .profile-id-card > strong { max-width: 88%; color: #56514a; font-size: clamp(10px, .92vw, 13px); font-weight: 500; line-height: 1.4; text-align: center; }
    .profile-location { margin-top: auto; padding: 10px 17px; border-radius: 6px; color: #9c7d55; background: rgba(177,138,83,.1); font-size: 11px; }
    .profile-plant { position: absolute; z-index: 3; top: 15%; right: -14%; width: 41%; filter: drop-shadow(0 10px 12px rgba(54,72,40,.15)); animation: profile-float 5s ease-in-out infinite; }
    .profile-coffee { position: absolute; z-index: 4; right: -2%; bottom: 13%; width: 25%; filter: drop-shadow(0 12px 12px rgba(67,46,25,.2)); }
    .profile-pencil { position: absolute; z-index: 4; right: 4%; bottom: 4%; width: 51%; transform: rotate(8deg); filter: drop-shadow(0 8px 6px rgba(70,54,30,.16)); }

    @keyframes profile-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(1.5deg); } }

    .about,
    .work,
    .playground {
      width: min(1120px, calc(100vw - 36px));
      margin: 0 auto;
      padding: 80px 0;
    }

    .about {
      width: min(1200px, calc(100vw - 32px));
      margin-top: 0;
      padding: 64px 0 40px;
    }

    .work { padding: 40px 0; }

    .section-title {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 22px;
      border-top: 1px solid var(--line);
      padding-top: 24px;
      margin-bottom: 34px;
    }

    .section-title h2 {
      margin: 0;
      font-family: var(--ui-font);
      font-size: clamp(40px, 7vw, 76px);
      line-height: .9;
    }

    .section-title p {
      max-width: 430px;
      color: var(--muted);
      line-height: 1.6;
      margin: 0;
    }

    .finder-window {
      position: relative;
      display: grid;
      grid-template-rows: 40px minmax(0, 1fr);
      width: 100%;
      height: min(740px, calc(100svh - 104px));
      min-height: min(540px, calc(100svh - 104px));
      margin: 0;
      border: 1px solid rgba(205, 196, 181, .58);
      border-radius: 16px;
      background: #f5f5f4;
      box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
      backdrop-filter: blur(22px) saturate(1.08);
      overflow: hidden;
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }

    .finder-paper-texture {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: url("paper-texture.jpg") repeat;
      background-size: 500px 500px;
      mix-blend-mode: multiply;
      opacity: .3;
    }

    .finder-titlebar,
    .finder-body { position: relative; z-index: 2; }

    .finder-window.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .finder-titlebar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(205, 196, 181, .42);
      color: #a8a29e;
      font-size: 11px;
      font-weight: 400;
      font-family: var(--code-font);
      background: rgba(240, 237, 230, .8);
    }

    .window-lights {
      position: absolute;
      left: 16px;
      display: flex;
      gap: 6px;
    }

    .window-lights span {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      box-shadow: inset 0 -1px rgba(0,0,0,.18);
    }

    .window-lights span:nth-child(1) { background: #ff6159; }
    .window-lights span:nth-child(2) { background: #ffbd2e; }
    .window-lights span:nth-child(3) { background: #28c840; }

    .finder-body {
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr);
      min-height: 0;
      overflow: hidden;
    }

    .finder-sidebar {
      padding: 12px 8px;
      border-right: 1px solid rgba(205, 196, 181, .38);
      background: rgba(243, 239, 231, .34);
    }

    .finder-sidebar h3 {
      margin: 0 8px 4px;
      color: rgba(128, 121, 112, .62);
      font-size: 11px;
      font-weight: 500;
    }

    .finder-nav {
      display: grid;
      gap: 0;
    }

    .finder-nav button {
      border: 0;
      appearance: none;
      background: transparent;
      font: inherit;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-height: 0;
      padding: 5px 8px;
      border-radius: 6px;
      color: rgba(84, 77, 69, .82);
      text-align: left;
      transition: background .2s ease, transform .2s ease;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
    }

    .finder-nav button:hover {
      transform: translateX(2px);
      background: rgba(216, 156, 63, .12);
    }

    .finder-nav button.active {
      background: rgba(210, 189, 158, .42);
      color: #2b2722;
      font-weight: 650;
    }

    .sf-symbol {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      color: #2e9cff;
      overflow: visible;
      stroke: currentColor;
      stroke-width: 1.85;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .finder-viewport {
      min-width: 0;
      min-height: 0;
      height: 100%;
      background: transparent;
      overflow: hidden;
    }

    .finder-view {
      display: none;
      min-height: 0;
      height: 100%;
    }

    .finder-view.active {
      display: block;
      animation: finder-view-in .32s var(--ease) both;
    }

    .projects-view.active {
      display: grid;
      grid-template-columns: 1fr;
      position: relative;
    }

    .projects-view.active.detail-open {
      grid-template-columns: minmax(340px, .54fr) minmax(0, 1fr);
    }

    .finder-grid {
      position: relative;
      padding: 32px;
      overflow: auto;
      background: transparent;
    }

    .folder-grid {
      display: grid;
      grid-template-columns: repeat(4, 130px);
      column-gap: 40px;
      row-gap: 24px;
      align-items: start;
      width: max-content;
    }

    .detail-open .folder-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 20px;
      row-gap: 24px;
      width: 100%;
    }

    .project-folder {
      border: 0;
      appearance: none;
      background: transparent;
      font: inherit;
      padding: 0;
      display: grid;
      justify-items: center;
      gap: 10px;
      color: rgba(91, 84, 76, .72);
      font-size: 11px;
      line-height: 1.2;
      transition: transform .24s var(--ease), color .2s ease;
      touch-action: manipulation;
    }

    .project-folder:hover {
      color: var(--ink);
    }

    .project-folder:active {
      transform: scale(.97);
      transition-duration: .12s, .2s;
    }

    .project-folder:focus { outline: none; }
    .project-folder:focus-visible {
      outline: 2px solid rgba(46, 156, 255, .78);
      outline-offset: 8px;
      border-radius: 8px;
    }

    .project-folder.active {
      color: var(--ink);
      font-weight: 650;
    }

    .project-folder.active .folder-icon {
      filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--folder) 40%, transparent));
    }

    .folder-icon {
      position: relative;
      width: 96px;
      height: 80px;
      perspective: 200px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
      transition: filter .2s ease;
    }

    .folder-shell {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      fill: var(--folder-tab);
    }

    .folder-paper {
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 6px;
      height: 50px;
      border-radius: 4px;
      background: rgba(255,255,255,.5);
      opacity: 0;
      transition: opacity .2s ease;
    }

    .folder-face {
      position: absolute;
      left: 1px;
      right: 1px;
      bottom: 1px;
      height: 62px;
      border-radius: 7px;
      background: var(--folder);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.06);
      transform-origin: bottom center;
      transition: transform .36s cubic-bezier(.2,.8,.2,1);
    }

    .folder-face img {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 44px;
      height: 44px;
      object-fit: contain;
      transform: translate(-50%, -50%);
      filter: brightness(0) saturate(0);
      opacity: .1;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .project-folder:hover .folder-paper { opacity: 1; }
    .project-folder:hover .folder-face {
      transform: rotateX(-18deg);
    }

    .folder-label {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 999px;
      transition: background .2s ease, color .2s ease;
    }

    .project-folder.active .folder-label {
      background: transparent;
      color: var(--ink);
    }

    .finder-detail {
      display: block;
      position: absolute;
      inset: 0 0 0 auto;
      width: 65%;
      min-width: 0;
      border-left: 1px solid rgba(205, 196, 181, .38);
      background: rgba(255,255,255,.66);
      overflow-y: auto;
      overflow-x: hidden;
      visibility: hidden;
      opacity: 0;
      transform: translate3d(28px, 0, 0) scale(.985);
      transform-origin: left center;
      pointer-events: none;
      will-change: transform, opacity;
      transition:
        transform .2s var(--ease-out),
        opacity .16s ease-out,
        visibility 0s linear .2s;
    }

    .detail-open .finder-detail {
      position: relative;
      inset: auto;
      width: auto;
      visibility: visible;
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      pointer-events: auto;
      transition:
        transform .28s var(--ease-drawer),
        opacity .2s ease-out,
        visibility 0s linear 0s;
    }

    .detail-close {
      position: sticky;
      float: right;
      top: 8px;
      margin: 8px 8px -32px 0;
      z-index: 4;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 0;
      appearance: none;
      background: rgba(210,210,206,.58);
      color: rgba(38,34,29,.62);
      font-size: 18px;
      line-height: 25px;
      text-align: center;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }

    .detail-close:hover {
      background: rgba(38,34,29,.28);
      color: rgba(38,34,29,.72);
      transform: rotate(90deg);
    }

    .detail-close:active {
      transform: rotate(90deg) scale(.92);
      transition-duration: .12s;
    }

    .detail-hero {
      height: min(340px, 49%);
      min-height: 220px;
      padding: 0;
      background: #0f0e0c;
    }

    .detail-video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #0f0e0c;
    }

    .detail-video[hidden] { display: none; }

    .detail-scene {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 65%, rgba(255,255,255,.96) 0 12px, rgba(255,236,185,.7) 13px, transparent 18px),
        radial-gradient(circle at 54% 34%, rgba(249,225,174,.22), transparent 86px),
        linear-gradient(180deg, var(--scene-a) 0%, #d6d8b3 42%, var(--scene-b) 66%, var(--scene-c) 100%);
      transition: background .35s ease;
      filter: saturate(.9) contrast(.92);
    }

    .detail-scene::before {
      content: "";
      position: absolute;
      left: -16%;
      right: -8%;
      bottom: -14%;
      height: 42%;
      border-radius: 52% 46% 0 0;
      background:
        radial-gradient(ellipse at 38% 18%, rgba(255,255,255,.44), transparent 34%),
        linear-gradient(180deg, rgba(244,225,206,.62), rgba(142,81,53,.82));
      filter: blur(1.5px);
    }

    .detail-scene::after {
      content: attr(data-kicker);
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.88);
      font-family: var(--ui-font);
      letter-spacing: .35em;
      font-size: 15px;
      text-shadow: 0 1px 6px rgba(255,255,255,.26);
      background:
        linear-gradient(90deg, rgba(255,255,255,.04), transparent 18%, rgba(255,255,255,.06) 50%, transparent 82%),
        radial-gradient(circle at 50% 70%, rgba(255,190,45,.08), transparent 24%);
    }

    .detail-scene .grain {
      position: absolute;
      inset: 0;
      opacity: .26;
      mix-blend-mode: soft-light;
      background-image:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.35) 0 1px, transparent 1.6px),
        radial-gradient(circle at 73% 62%, rgba(40,30,20,.28) 0 1px, transparent 1.7px);
      background-size: 8px 8px, 11px 11px;
      pointer-events: none;
    }

    .detail-copy {
      padding: 20px;
    }

    .detail-copy h3 {
      margin: 0 0 16px;
      font-size: 16px;
      line-height: 1.1;
    }

    .detail-copy p {
      margin: 0 0 16px;
      color: rgba(84, 77, 69, .86);
      font-size: 14px;
      line-height: 1.58;
    }

    .detail-copy strong {
      color: var(--ink);
    }

    .detail-copy a {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      margin-top: 12px;
      padding: 6px 16px;
      border: 1px solid rgba(38,34,29,.56);
      border-radius: 6px;
      color: #4c453e;
      transition: transform .2s ease, background .2s ease;
    }

    .detail-actions { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 8px; }
    .detail-actions a[hidden] { display: none; }

    .finder-detail[data-project="merch"] .detail-hero { background: #080909; }
    .finder-detail[data-project="merch"] .detail-scene {
      background:
        radial-gradient(circle at -8% 94%, transparent 0 170px, rgba(136,139,150,.25) 171px 172px, transparent 173px 224px, rgba(136,139,150,.22) 225px 226px, transparent 227px 278px, rgba(136,139,150,.2) 279px 280px, transparent 281px),
        radial-gradient(circle at 108% -8%, transparent 0 170px, rgba(136,139,150,.25) 171px 172px, transparent 173px 224px, rgba(136,139,150,.22) 225px 226px, transparent 227px 278px, rgba(136,139,150,.2) 279px 280px, transparent 281px),
        radial-gradient(circle at 30% 30%, #17191a, #080909 72%);
      filter: none;
    }
    .finder-detail[data-project="merch"] .detail-scene::before,
    .finder-detail[data-project="merch"] .detail-scene::after { display: none; }

    .detail-copy a:hover {
      transform: translateY(-2px);
      background: rgba(38,34,29,.06);
    }

    .portfolio-detail-content {
      min-height: 100%;
      padding: 28px 26px 56px;
      transform-origin: top center;
      will-change: transform, opacity;
    }

    .portfolio-project {
      padding: 0 0 42px;
    }

    .portfolio-project + .portfolio-project {
      padding-top: 42px;
      border-top: 1px solid rgba(205, 196, 181, .58);
    }

    .portfolio-project h2 {
      max-width: calc(100% - 34px);
      margin: 0 0 18px;
      color: var(--ink);
      font-size: clamp(20px, 2.1vw, 28px);
      line-height: 1.22;
      letter-spacing: -.025em;
    }

    .portfolio-metadata {
      display: grid;
      gap: 7px;
      margin-bottom: 24px;
      padding: 13px 14px;
      border: 1px solid rgba(205, 196, 181, .46);
      border-radius: 9px;
      background: rgba(247, 244, 236, .54);
    }

    .portfolio-metadata:empty { display: none; }

    .portfolio-metadata p {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 10px;
      margin: 0;
      color: rgba(84, 77, 69, .82);
      font-size: 12px;
      line-height: 1.55;
    }

    .portfolio-metadata span {
      color: rgba(84, 77, 69, .52);
      font-family: var(--code-font);
      font-size: 10px;
      letter-spacing: .03em;
    }

    .portfolio-copy {
      color: rgba(84, 77, 69, .9);
      font-size: 14px;
      line-height: 1.76;
    }

    .portfolio-copy h3,
    .portfolio-copy h4 {
      margin: 26px 0 10px;
      color: var(--ink);
      font-size: 13px;
      letter-spacing: .05em;
    }

    .portfolio-copy p { margin: 0 0 15px; }
    .portfolio-copy strong { color: var(--ink); }

    .portfolio-copy ul {
      margin: 0 0 18px;
      padding-left: 1.15em;
    }

    .portfolio-copy li { margin: 4px 0; }

    .portfolio-media {
      display: grid;
      gap: 14px;
      margin-top: 28px;
    }

    .portfolio-media-item {
      width: 100%;
      margin: 0;
      overflow: hidden;
      border-radius: 9px;
      background: #12110f;
      box-shadow: 0 8px 24px rgba(44, 36, 25, .1);
    }

    .portfolio-media-item img,
    .portfolio-media-item video {
      display: block;
      width: 100%;
      height: auto;
    }

    .portfolio-video-shell { position: relative; }

    .portfolio-video-play {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      min-height: 40px;
      padding: 8px 14px;
      border: 1px solid rgba(255,255,255,.42);
      border-radius: 999px;
      color: white;
      background: rgba(20,18,16,.72);
      backdrop-filter: blur(10px);
      font: 12px/1.2 var(--ui-font);
      cursor: var(--cursor-arrow);
    }

    .portfolio-video-play[hidden] { display: none; }

    .portfolio-media-item--pdf {
      background: #f4f0e7;
      box-shadow: inset 0 0 0 1px rgba(75, 62, 43, .13), 0 8px 24px rgba(44, 36, 25, .08);
    }

    .portfolio-pdf-card {
      display: flex;
      align-items: center;
      gap: 16px;
      min-height: 104px;
      padding: 20px 22px;
      color: var(--ink);
      text-decoration: none;
      transition: background-color .2s ease, transform .2s ease;
    }

    .portfolio-pdf-card:hover {
      background: rgba(255, 255, 255, .5);
      transform: translateY(-1px);
    }

    .portfolio-pdf-card:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: -4px;
    }

    .portfolio-pdf-badge {
      display: grid;
      place-items: center;
      width: 52px;
      height: 64px;
      flex: 0 0 auto;
      border-radius: 4px 12px 4px 4px;
      color: #fff9ef;
      background: #a84c3f;
      font: 700 11px/1 var(--ui-font);
      letter-spacing: .09em;
      box-shadow: 0 5px 14px rgba(92, 40, 31, .2);
    }

    .portfolio-pdf-copy {
      display: grid;
      min-width: 0;
      gap: 7px;
    }

    .portfolio-pdf-copy strong {
      overflow-wrap: anywhere;
      font: 600 14px/1.35 var(--ui-font);
    }

    .portfolio-pdf-copy small {
      color: var(--muted);
      font: 11px/1.3 var(--ui-font);
    }

    .portfolio-placeholder {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border-radius: 9px;
      color: rgba(255,255,255,.92);
      background:
        radial-gradient(circle at 72% 26%, rgba(255,255,255,.48), transparent 18%),
        radial-gradient(circle at 30% 78%, color-mix(in srgb, var(--scene-c) 76%, transparent), transparent 32%),
        linear-gradient(145deg, var(--scene-a), var(--scene-b) 56%, var(--scene-c));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 8px 24px rgba(44,36,25,.1);
      isolation: isolate;
    }

    .portfolio-placeholder::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .24;
      background: url("noise-texture.png") repeat;
      background-size: 180px 180px;
      mix-blend-mode: soft-light;
    }

    .portfolio-placeholder span {
      max-width: 78%;
      text-align: center;
      font-size: 15px;
      line-height: 1.4;
      letter-spacing: .06em;
      text-shadow: 0 2px 14px rgba(30,24,20,.18);
    }

    .portfolio-empty {
      margin: 64px 0;
      color: var(--muted);
      text-align: center;
    }

    .achievements-view,
    .simple-view {
      padding: 30px 34px 40px;
      overflow: auto;
      background: rgba(255,255,255,.32);
    }

    .resume-view {
      --resume-blue: #8eb4ce;
      --resume-yellow: #debb8e;
      --resume-red: #e09d98;
      --resume-purple: #b09ad0;
      padding: 18px;
      overflow: auto;
      background: rgba(255,255,255,.22);
    }

    .resume-card-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.28fr) minmax(260px, .72fr);
      gap: 12px;
      max-width: 960px;
      margin: 0 auto;
    }

    .resume-card {
      position: relative;
      min-width: 0;
      padding: 22px;
      overflow: hidden;
      border: 1px solid rgba(185, 177, 165, .38);
      border-radius: 14px;
      background: rgba(251, 250, 247, .74);
      box-shadow: 0 7px 20px rgba(67, 58, 48, .045), inset 0 1px rgba(255,255,255,.9);
    }

    .resume-view.active .resume-card { animation: resume-card-in .45s var(--ease) both; }
    .resume-view.active .resume-card:nth-child(2) { animation-delay: .04s; }
    .resume-view.active .resume-card:nth-child(3) { animation-delay: .08s; }
    .resume-view.active .resume-card:nth-child(4) { animation-delay: .12s; }
    .resume-view.active .resume-card:nth-child(5) { animation-delay: .16s; }

    .resume-card-label {
      margin: 0 0 18px;
      color: rgba(104, 97, 88, .58);
      font: 500 10px/1.2 var(--code-font);
      letter-spacing: .12em;
    }

    .resume-profile-card::after {
      content: "";
      position: absolute;
      top: -52px;
      right: -46px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: var(--resume-blue);
      opacity: .13;
    }

    .resume-profile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
    .resume-profile-heading h2 { margin: 0; font-size: clamp(25px, 3vw, 36px); line-height: 1; letter-spacing: -.05em; }
    .resume-profile-heading h2 span { display: block; margin-top: 8px; color: rgba(35,32,29,.52); font: 500 11px/1 var(--code-font); letter-spacing: .13em; }
    .resume-role { margin: 17px 0 0; color: #4e7186; font-size: 14px; font-weight: 600; }
    .resume-origin { position: relative; z-index: 1; flex: 0 0 auto; padding: 10px 11px 9px; border: 1px solid rgba(101,143,168,.24); border-radius: 10px; color: #52768d; background: rgba(142,180,206,.16); font: 700 13px/1 var(--code-font); text-align: center; }
    .resume-origin small { display: block; margin-top: 5px; font: 500 8px/1 var(--ui-font); letter-spacing: .05em; }
    .resume-intro { max-width: 600px; margin: 22px 0; color: rgba(54,49,44,.73); font-size: 12px; line-height: 1.85; }

    .resume-contact-list { display: grid; grid-template-columns: .86fr 1.25fr 1fr; gap: 8px; }
    .resume-contact-list a, .resume-contact-list p { min-width: 0; margin: 0; padding: 10px 11px; border-radius: 8px; color: rgba(45,41,37,.76); background: rgba(142,180,206,.1); font: 500 10px/1.3 var(--ui-font); text-decoration: none; overflow-wrap: anywhere; }
    .resume-contact-list span { display: block; margin-bottom: 6px; color: rgba(75,106,124,.56); font: 500 8px/1 var(--code-font); letter-spacing: .07em; }
    .resume-contact-list a:hover { background: rgba(142,180,206,.2); }
    .resume-contact-list a:focus-visible { outline: 2px solid #6f99b3; outline-offset: 2px; }

    .resume-radar-card { display: flex; flex-direction: column; }
    .resume-radar { width: min(100%, 290px); margin: -9px auto -3px; overflow: visible; }
    .radar-grid polygon, .radar-grid line { fill: none; stroke: rgba(115,107,97,.17); stroke-width: 1; }
    .radar-shape { fill: rgba(176,154,208,.2); stroke: #987cbe; stroke-width: 2; }
    .radar-dots { fill: #987cbe; }
    .radar-labels { fill: rgba(62,56,51,.68); font: 10px var(--ui-font); }
    .radar-labels text { text-anchor: middle; }
    .resume-radar-note { margin: auto 0 0; color: rgba(70,63,57,.58); font-size: 10px; line-height: 1.55; text-align: center; }

    .resume-education-card { grid-column: 1; }
    .resume-skills-card { grid-column: 2; grid-row: 2; }
    .resume-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .resume-timeline section { position: relative; padding: 4px 8px 0 22px; border-left: 1px solid rgba(159,127,87,.25); }
    .resume-timeline section::before { content: ""; position: absolute; top: 5px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--resume-yellow); box-shadow: 0 0 0 4px rgba(222,187,142,.16); }
    .resume-timeline time { color: rgba(128,99,63,.62); font: 500 9px/1 var(--code-font); }
    .resume-timeline h3 { margin: 11px 0 5px; font-size: 15px; }
    .resume-timeline p { margin: 0; color: rgba(60,54,49,.62); font-size: 11px; }
    .resume-timeline div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
    .resume-timeline span { padding: 5px 7px; border-radius: 999px; color: #8b6941; background: rgba(222,187,142,.17); font-size: 8px; }

    .resume-skill-groups { display: grid; gap: 12px; }
    .resume-skill-groups section { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
    .resume-skill-index { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 600 9px/1 var(--code-font); }
    .resume-skill-index.blue { color: #54768b; background: rgba(142,180,206,.24); }
    .resume-skill-index.yellow { color: #8b6941; background: rgba(222,187,142,.24); }
    .resume-skill-index.red { color: #965b56; background: rgba(224,157,152,.24); }
    .resume-skill-index.purple { color: #725694; background: rgba(176,154,208,.24); }
    .resume-skill-groups h3 { margin: 1px 0 5px; font-size: 11px; }
    .resume-skill-groups p { margin: 0; color: rgba(72,65,59,.58); font-size: 9px; line-height: 1.55; }

    .resume-tools-card { grid-column: 1 / -1; padding-bottom: 20px; }
    .resume-tool-groups { display: grid; grid-template-columns: .8fr 1.1fr 1.35fr .75fr; gap: 12px; }
    .resume-tool-groups section { min-width: 0; padding-left: 12px; border-left: 2px solid var(--tool-accent, var(--resume-blue)); }
    .resume-tool-groups section:nth-child(2) { --tool-accent: var(--resume-purple); }
    .resume-tool-groups section:nth-child(3) { --tool-accent: var(--resume-red); }
    .resume-tool-groups section:nth-child(4) { --tool-accent: var(--resume-yellow); }
    .resume-tool-groups h3 { margin: 0 0 9px; color: rgba(86,78,70,.52); font: 600 8px/1 var(--code-font); letter-spacing: .09em; }
    .resume-tool-groups p { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
    .resume-tool-groups span { padding: 5px 7px; border: 1px solid rgba(142,133,121,.18); border-radius: 999px; color: rgba(51,46,42,.7); background: rgba(255,255,255,.44); font-size: 8px; }

    .finder-eyebrow {
      margin: 0 0 22px;
      color: rgba(122,115,106,.62);
      font-family: var(--ui-font);
      font-size: 11px;
      letter-spacing: .14em;
    }

    .impact-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .impact-grid article {
      min-height: 90px;
      padding: 18px 20px;
      border: 1px solid rgba(188,177,161,.34);
      border-radius: 8px;
      background: rgba(247,245,239,.58);
    }

    .impact-grid strong,
    .impact-grid span { display: block; }
    .impact-grid strong { font-size: 27px; line-height: 1; }
    .impact-grid span {
      margin-top: 13px;
      color: rgba(122,115,106,.6);
      font-family: var(--ui-font);
      font-size: 10px;
      letter-spacing: .08em;
    }

    .achievement-heading {
      margin-top: 38px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(188,177,161,.28);
    }

    .achievement-list article {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 10px;
      padding: 15px 0 16px;
      border-bottom: 1px solid rgba(188,177,161,.28);
    }

    .achievement-list time {
      padding-top: 3px;
      color: rgba(122,115,106,.58);
      font-family: var(--ui-font);
      font-size: 11px;
    }

    .achievement-list h3 { margin: 0 0 6px; font-size: 15px; }
    .achievement-list p { margin: 0; color: rgba(84,77,69,.74); font-size: 13px; line-height: 1.45; }
    .achievement-list p span {
      display: inline-block;
      margin: 8px 7px 0 0;
      padding: 4px 7px;
      border-radius: 5px;
      background: rgba(224,195,145,.28);
      color: rgba(132,96,50,.7);
      font-family: var(--ui-font);
      font-size: 9px;
      letter-spacing: .05em;
    }

    .snapshot-layout { display: grid; grid-template-columns: minmax(280px, 1.4fr) 1fr; gap: 28px; align-items: center; }
    .snapshot-image {
      min-height: 320px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      color: rgba(255,255,255,.84);
      font-family: var(--ui-font);
      letter-spacing: .28em;
      background: linear-gradient(180deg, #b9d6d1, #e6b254 62%, #90513d);
    }
    .snapshot-copy h3 { margin: 0 0 12px; font-size: 26px; }
    .snapshot-copy p, .garden-plots p { color: rgba(84,77,69,.76); line-height: 1.6; }
    .garden-plots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .garden-plots article { padding: 22px; border-top: 1px solid rgba(84,77,69,.3); }
    .garden-plots span { color: #2e9cff; font-family: var(--ui-font); font-size: 11px; }
    .garden-plots h3 { margin: 28px 0 8px; font-size: 17px; }

    .garden-view.active {
      padding: 0;
      overflow: hidden;
      background: #fff;
    }

    .campus-gallery {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 420px;
      overflow: hidden;
      background: #fff;
    }

    .campus-photo-button {
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: #fff;
      cursor: zoom-in;
    }

    .campus-photo-button[hidden] { display: none; }

    .campus-photo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
      animation: campus-photo-in .35s var(--ease) both;
    }

    .campus-photo[hidden] { display: none; }

    .campus-arrow {
      position: absolute;
      top: 50%;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 42px;
      height: 56px;
      padding: 0 0 5px;
      border: 0;
      border-radius: 999px;
      color: #2d2924;
      background: rgba(255, 255, 255, .76);
      backdrop-filter: blur(10px);
      font: 300 34px/1 var(--ui-font);
      cursor: var(--cursor-arrow);
      opacity: .72;
      transform: translateY(-50%);
      transition: opacity .2s ease, background .2s ease;
    }

    .campus-arrow:hover { opacity: 1; background: rgba(238, 234, 227, .94); }
    .campus-arrow:focus-visible { outline: 2px solid #2d2924; outline-offset: 3px; }
    .campus-arrow[hidden] { display: none; }
    .campus-prev { left: 18px; }
    .campus-next { right: 18px; }

    .campus-dots {
      position: absolute;
      left: 50%;
      bottom: 18px;
      z-index: 2;
      display: flex;
      gap: 7px;
      transform: translateX(-50%);
    }

    .campus-dots span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(45,41,36,.28);
      box-shadow: 0 1px 5px rgba(0,0,0,.25);
    }

    .campus-dots span.active { background: #2d2924; }

    .campus-lightbox {
      position: fixed;
      inset: 0;
      z-index: 10030;
      display: grid;
      place-items: center;
      padding: 20px;
      background: #fff;
      cursor: zoom-out;
      animation: fade-in .2s ease both;
    }

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

    .campus-lightbox img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      cursor: var(--cursor-arrow);
    }

    @keyframes finder-view-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes resume-card-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .footer {
      padding: 22px 20px 34px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
    }

    .contact-strip {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
      padding: 28px 20px 4px;
      color: #78716c;
      font-size: 14px;
    }

    .work-reel {
      --reel-ink: #26221d;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      padding: 62px 0 46px;
      overflow: hidden;
      color: var(--reel-ink);
      background: transparent;
    }

    .work-reel-heading,
    .work-reel-caption {
      position: relative;
      z-index: 2;
      width: min(1200px, calc(100vw - 48px));
      margin-inline: auto;
    }

    .work-reel-heading {
      margin-bottom: 20px;
    }

    .work-reel-kicker {
      margin: 0 0 10px;
      color: #8d5b40;
      font-family: var(--code-font);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
    }

    .work-reel-rows {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 14px;
    }

    .work-marquee {
      display: flex;
      width: 100%;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .work-marquee-track {
      display: flex;
      width: max-content;
      will-change: transform;
      animation: work-reel-scroll var(--marquee-duration, 44s) linear infinite;
    }

    .work-marquee--reverse .work-marquee-track { animation-direction: reverse; }
    .work-marquee:hover .work-marquee-track,
    .work-marquee:focus-within .work-marquee-track { animation-play-state: paused; }

    .work-marquee-group {
      display: flex;
      flex-shrink: 0;
      gap: 14px;
      padding-right: 14px;
    }

    .work-reel-card {
      position: relative;
      display: grid;
      grid-template-rows: 190px 68px;
      width: clamp(300px, 27vw, 400px);
      height: 258px;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(90, 75, 56, .2);
      border-radius: 4px;
      color: var(--reel-ink);
      background: #fbf8f1;
      box-shadow: 0 7px 20px rgba(67, 50, 30, .1);
      font: inherit;
      text-align: left;
      transform: translateY(0);
      transition: transform .28s var(--ease-out), box-shadow .28s ease, border-color .2s ease;
    }

    .work-reel-card:hover {
      z-index: 2;
      border-color: rgba(141, 91, 64, .46);
      box-shadow: 0 14px 28px rgba(67, 50, 30, .18);
      transform: translateY(-4px);
    }

    .work-reel-card:focus { outline: none; }
    .work-reel-card:focus-visible { outline: 3px solid #8d5b40; outline-offset: -3px; }

    .work-reel-visual {
      display: grid;
      place-items: center;
      min-width: 0;
      overflow: hidden;
      color: rgba(255,255,255,.9);
      background: #887861;
      font-family: var(--code-font);
      font-size: 32px;
      letter-spacing: .06em;
    }

    .work-reel-visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.88) contrast(.96);
      transition: transform .55s var(--ease-out), filter .35s ease;
    }

    .work-reel-card:hover .work-reel-visual img {
      transform: scale(1.035);
      filter: saturate(1) contrast(1);
    }

    .work-reel-visual--placeholder {
      background:
        radial-gradient(circle at 68% 30%, rgba(216,156,63,.78), transparent 26%),
        linear-gradient(135deg, #6e8190, #493e36);
    }

    .work-reel-card-copy {
      position: relative;
      display: grid;
      align-content: center;
      gap: 3px;
      min-width: 0;
      padding: 9px 40px 9px 13px;
      border-top: 1px solid rgba(90, 75, 56, .14);
    }

    .work-reel-card-copy small {
      color: #9a704f;
      font-family: var(--code-font);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .work-reel-card-copy strong {
      overflow: hidden;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .work-reel-arrow {
      position: absolute;
      right: 14px;
      top: 50%;
      color: #8d5b40;
      font-size: 18px;
      transform: translateY(-50%);
      transition: transform .25s var(--ease-out);
    }

    .work-reel-card:hover .work-reel-arrow { transform: translate(3px, calc(-50% - 3px)); }

    .work-reel-caption {
      margin-top: 20px;
      color: #82776a;
      font-family: var(--code-font);
      font-size: 10px;
      letter-spacing: .04em;
    }

    @keyframes work-reel-scroll {
      to { transform: translateX(-50%); }
    }

    .playground {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .playground-footer {
      width: 100%;
    }

    .social-morph {
      position: relative;
      width: 80px;
      min-width: 0;
      min-height: 30px;
      padding: 4px 8px;
      overflow: hidden;
      border: 0;
      color: inherit;
      background: transparent;
      font: inherit;
      cursor: var(--cursor-arrow);
      flex: 0 0 auto;
      transition: width .4s cubic-bezier(.4,0,.2,1), color .2s ease;
    }

    .social-morph-text,
    .social-morph-detail {
      transition: opacity .4s cubic-bezier(.4,0,.2,1), filter .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
    }

    .social-morph-text { display: inline-block; opacity: 1; filter: blur(0); transform: scale(1); }
    .social-morph-detail {
      position: absolute;
      inset: 0;
      margin: auto;
      opacity: 0;
      filter: blur(8px);
      transform: scale(.6);
      pointer-events: none;
      transition-delay: .1s;
    }

    .social-morph-detail { display: grid; place-items: center; white-space: nowrap; font-size: 12px; color: #292524; }
    .social-contact:hover { width: var(--expanded); }
    .social-morph:hover .social-morph-text { opacity: 0; filter: blur(8px); transform: scale(.6); }
    .social-morph:hover .social-morph-detail { opacity: 1; filter: blur(0); transform: scale(1); }

    .copy-hint {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10000;
      padding: 5px 9px;
      border-radius: 999px;
      color: #faf8f5;
      background: #1c1917;
      font-size: 11px;
      pointer-events: none;
      opacity: 0;
      transform: translate(14px, 14px);
      transition: opacity .18s ease;
    }

    .copy-hint.visible { opacity: 1; }

    .burst {
      position: fixed;
      left: var(--x);
      top: var(--y);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid rgba(38,34,29,.24);
      pointer-events: none;
      z-index: 900;
      animation: burst .65s ease-out forwards;
    }

    @keyframes boot-away {
      to { opacity: 0; visibility: hidden; transform: scale(1.04); }
    }

    @keyframes blink { 50% { opacity: 0; } }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fade-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes blur-in { from { opacity: 0; filter: blur(14px); transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); } }
    @keyframes slide-left { from { opacity: 0; transform: translateX(-90px) rotate(-10deg); } to { opacity: 1; transform: translateX(0) rotate(-6deg); } }
    @keyframes slide-right { from { opacity: 0; transform: translateX(90px) rotate(14deg) scale(.72); } to { opacity: 1; transform: translateX(0) rotate(7deg) scale(.72); } }
    @keyframes pop-in { from { opacity: 0; transform: scale(.4) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(-7deg); } }
    @keyframes badge-drop {
      0% { opacity: 0; transform: translateY(-420px); }
      48% { opacity: 1; transform: translateY(0); }
      62% { transform: translateY(-38px); }
      76% { transform: translateY(0); }
      87% { transform: translateY(-14px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes swing { 0%, 100% { rotate: 2.5deg; } 50% { rotate: -2.5deg; } }
    @keyframes glare { from { transform: translateX(0) skewX(-16deg); } to { transform: translateX(330%) skewX(-16deg); } }
    @keyframes spin { to { rotate: 360deg; } }
    @keyframes scan { from { left: -70%; } to { left: 120%; } }
    @keyframes wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
    @keyframes dot-pop { from { transform: scale(.15); opacity: .2; } to { transform: scale(1); opacity: 1; } }
    @keyframes burst { to { opacity: 0; transform: translate(-50%, -50%) scale(12); } }
    @keyframes ipad-arrive { from { opacity: 0; transform: translateX(90px) rotate(10deg); } to { opacity: 1; transform: translateX(0) rotate(4deg); } }
    @keyframes desk-paper-in { from { opacity: 0; transform: translate(60px, 30px) rotate(2deg); } to { opacity: 1; transform: translate(0, 0) rotate(-4deg); } }
    @keyframes coffee-wobble { 0%,100% { transform: translate(-50%, -50%) rotate(0); } 28% { transform: translate(-50%, -50%) rotate(-7deg); } 58% { transform: translate(-50%, -50%) rotate(5deg); } 78% { transform: translate(-50%, -50%) rotate(-2deg); } }
    @keyframes campus-photo-in { from { opacity: .25; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
    @keyframes resume-open { from { opacity: 0; transform: translateX(-34px) rotate(-2deg) scale(.96); } to { opacity: 1; transform: translateX(0) rotate(0) scale(1); } }
    @media (min-width: 921px) {
      .hero { overflow: clip; }
    }

    @media (max-width: 920px) {
      .nav-inner { padding: 18px 20px; }
      .nav-links { gap: 14px; }
      .hero {
        display: block;
        height: auto;
        min-height: auto;
        padding-top: 86px;
        overflow: visible;
      }

      .stage {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        transform: none;
      }

      .signature,
      .object {
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        width: min(100%, 420px);
        margin: 0 auto;
      }

      .signature {
        order: 1;
        padding: 28px 0 8px;
      }

      .signature h1 { font-size: 64px; }
      .paper { order: 2; transform: rotate(-2deg); padding: 34px; }
      .badge { order: 3; animation: fade-up .65s var(--ease) .3s both; }
      .lanyard { height: 64px; }
      .resume-folder {
        order: 4;
        width: min(100%, 320px);
        height: 390px;
        transform: rotate(-3deg);
        animation: fade-up .65s var(--ease) .4s both;
      }
      .resume-folder-cover { left: 32px; width: 250px; }
      .resume-sheet { left: 72px; bottom: 70px; width: 174px; }
      .terminal { order: 5; animation: fade-up .65s var(--ease) .5s both; }
      .terminal { scale: 1; transform-origin: center; }
      .terminal-body { min-height: 190px; padding: 14px; line-height: 1.8; }
      .terminal-gap { height: 12px; }
      .folder { order: 6; height: 163px; }
      .ipad-hero { order: 7; transform: rotate(2deg); }
      .desk-paper {
        order: 8;
        width: min(96%, 430px);
        transform: rotate(-2deg);
      }
      .flower { display: none; }
      .paper p { width: auto; }
      .ipad-hero:hover,
      .desk-paper:hover,
      .terminal:hover { transform: none; }

      .resume-lightbox {
        justify-content: center;
        padding: 18px;
      }

      .resume-lightbox img {
        width: auto;
        height: auto;
        max-width: 92vw;
        max-height: 90vh;
      }

      .profile-page { display: block; padding: 76px 14px 36px; }
      .profile-shell { grid-template-columns: 1fr; height: auto; min-height: 0; border-radius: 0; }
      .profile-copy { padding: 30px 22px 26px; }
      .profile-name-row { display: block; }
      .profile-name-row h2 { font-size: clamp(35px, 11.2vw, 53px); }
      .profile-name-row > span { display: block; margin-top: 10px; }
      .profile-contact-grid { grid-template-columns: 1fr; width: 100%; }
      .profile-contact-grid > p { grid-column: auto; }
      .profile-contact-grid > p .profile-contact-copy { display: block; }
      .profile-contact-grid > p small { margin-bottom: 6px; }
      .profile-information { grid-template-columns: 1fr; }
      .profile-capability { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--profile-line); }
      .profile-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .profile-toolkit > div { grid-template-columns: 1fr; }
      .profile-portrait-scene { top: 0; width: calc(100% + 28px); height: auto; min-height: 610px; margin-left: -14px; border-radius: 36px 36px 0 0; }
      .profile-id-card { left: 12%; width: 72%; }
      .profile-photo-ring { width: min(44vw, 190px); }

      .about,
      .work,
      .playground { padding: 52px 0; }

      .work-reel { padding: 72px 0 40px; }
      .work-reel-heading {
        width: min(100% - 32px, 720px);
        margin-bottom: 18px;
      }
      .work-reel-card { grid-template-rows: 150px 62px; width: min(78vw, 320px); height: 212px; }
      .work-reel-caption { width: calc(100% - 32px); }

      .about { margin-top: 0; }

      .section-title {
        display: block;
      }

      .section-title p { margin-top: 16px; }

      .finder-window {
        min-height: 0;
        border-radius: 14px;
      }

      .finder-body {
        grid-template-columns: 1fr;
      }

      .finder-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(188, 177, 161, .42);
      }

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

      .finder-nav button { white-space: normal; }

      .projects-view.active { grid-template-columns: 1fr; }

      .projects-view.active.detail-open { grid-template-columns: 1fr; }

      .projects-view.active.detail-open .finder-grid { display: none; }

      .impact-grid,
      .garden-plots { grid-template-columns: 1fr; }

      .snapshot-layout { grid-template-columns: 1fr; }

      .achievements-view,
      .simple-view { padding: 28px 20px 34px; }

      .resume-view { padding: 14px; }
      .resume-card-grid { grid-template-columns: 1fr; }
      .resume-card { padding: 19px; }
      .resume-education-card,
      .resume-skills-card,
      .resume-tools-card { grid-column: auto; grid-row: auto; }
      .resume-contact-list { grid-template-columns: 1fr; }
      .resume-tool-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }

      .garden-view.active { padding: 0; }
      .campus-gallery { min-height: 520px; }

      .finder-grid {
        padding: 36px 18px;
      }

      .folder-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 42px 14px;
      }

      .detail-open .folder-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 42px 14px; }

      .finder-detail {
        border-left: 0;
        border-top: 1px solid rgba(188, 177, 161, .42);
      }

      .portfolio-detail-content { padding: 28px 20px 48px; }

      .portfolio-project h2 { font-size: 22px; }

      .portfolio-metadata p {
        grid-template-columns: 64px minmax(0, 1fr);
        font-size: 12px;
      }

      .portfolio-copy { font-size: 15px; }

      .detail-hero {
        height: 230px;
      }

      .detail-scene {
        border-radius: 34px;
      }

      .detail-copy {
        padding: 24px;
      }

      .detail-copy p {
        font-size: 15px;
      }

    }

    @media (max-width: 520px) {
      .nav-links { gap: 10px; font-size: 11px; }
      .profile-education-grid,
      .profile-skill-grid { grid-template-columns: 1fr; }
      .profile-portrait-scene { min-height: 520px; }
      .profile-id-card { top: 9%; height: 68%; padding-inline: 18px; }
      .profile-plant { right: -22%; width: 52%; }
      .resume-profile-heading { gap: 10px; }
      .resume-profile-heading h2 { font-size: 25px; }
      .resume-origin { padding: 8px; }
      .resume-timeline,
      .resume-tool-groups { grid-template-columns: 1fr; }
      .resume-timeline { gap: 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-snap-type: none; }

      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }

      .work-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
      }

      .work-marquee-track { animation: none !important; transform: none !important; }
      .work-marquee-group[aria-hidden="true"] { display: none; }
    }