:root,
    [data-theme="light"] {
      --text-xs: clamp(.75rem, .7rem + .25vw, .875rem);
      --text-sm: clamp(.875rem, .8rem + .35vw, 1rem);
      --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --text-2xl: clamp(2.2rem, 1.2rem + 3vw, 4.6rem);
      --text-hero: clamp(3rem, 1rem + 6vw, 6.8rem);
      --space-1: .25rem;
      --space-2: .5rem;
      --space-3: .75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;
      --space-32: 8rem;
      --color-bg: #07111f;
      --color-surface: #0d1727;
      --color-surface-2: #111d31;
      --color-surface-offset: #15233a;
      --color-surface-offset-2: #1a2a45;
      --color-surface-dynamic: #233656;
      --color-divider: #253550;
      --color-border: rgba(201, 225, 255, .14);
      --color-text: #edf5ff;
      --color-text-muted: #a9bdd8;
      --color-text-faint: #6d83a1;
      --color-text-inverse: #07111f;
      --color-primary: #41d1c8;
      --color-primary-highlight: rgba(65, 209, 200, .14);
      --color-blue: #66a3ff;
      --radius-sm: .375rem;
      --radius-md: .75rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --shadow-sm: 0 8px 30px rgba(3, 9, 20, .18);
      --shadow-md: 0 16px 50px rgba(3, 9, 20, .26);
      --shadow-lg: 0 26px 90px rgba(3, 9, 20, .38);
      --transition-interactive: 220ms cubic-bezier(.16, 1, .3, 1);
      --font-display: 'Cabinet Grotesk', 'Inter', sans-serif;
      --font-body: 'Satoshi', 'Inter', sans-serif;
      --content-default: 1180px
    }

    [data-theme="light"] {
      --color-bg: #f2f7fb;
      --color-surface: #ffffff;
      --color-surface-2: #f8fbff;
      --color-surface-offset: #edf4fb;
      --color-surface-offset-2: #e4eef9;
      --color-surface-dynamic: #dce8f6;
      --color-divider: #d6e0ea;
      --color-border: rgba(19, 38, 64, .12);
      --color-text: #091321;
      --color-text-muted: #526579;
      --color-text-faint: #7f90a2;
      --color-text-inverse: #eff8ff;
      --color-primary: #0a7f7f;
      --color-primary-highlight: rgba(10, 127, 127, .1);
      --shadow-sm: 0 8px 24px rgba(14, 30, 55, .08);
      --shadow-md: 0 20px 50px rgba(14, 30, 55, .12);
      --shadow-lg: 0 30px 90px rgba(14, 30, 55, .16)
    }

    *,
    :before,
    :after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
      text-size-adjust: none;
      scroll-padding-top: 100px
    }

    body {
      min-height: 100dvh;
      line-height: 1.6;
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--color-text);
      background: radial-gradient(circle at 15% 20%, rgba(102, 163, 255, .14), transparent 28%), radial-gradient(circle at 85% 12%, rgba(65, 209, 200, .16), transparent 22%), radial-gradient(circle at 50% 78%, rgba(102, 163, 255, .11), transparent 24%), var(--color-bg);
      overflow-x: hidden
    }

    img,
    svg {
      display: block;
      max-width: 100%;
      height: auto
    }

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

    button,
    input,
    textarea,
    summary {
      font: inherit;
      color: inherit
    }

    h1,
    h2,
    h3,
    h4 {
      text-wrap: balance;
      line-height: 1.05
    }

    p {
      max-width: 72ch;
      text-wrap: pretty
    }

    ::selection {
      background: rgba(65, 209, 200, .28);
      color: var(--color-text)
    }

    :focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 4px;
      border-radius: 10px
    }

    @media (prefers-reduced-motion: reduce) {

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

    .skip-link {
      position: absolute;
      left: var(--space-4);
      top: -100px;
      z-index: 999;
      background: var(--color-primary);
      color: var(--color-text-inverse);
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-full)
    }

    .skip-link:focus {
      top: var(--space-4)
    }

    .container {
      width: min(calc(100% - 2rem), var(--content-default));
      margin-inline: auto
    }

    .section {
      padding-block: clamp(var(--space-16), 10vw, var(--space-32));
      position: relative
    }

    .section-title {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      margin-bottom: var(--space-4);
      letter-spacing: -.04em
    }

    .section-kicker {
      display: inline-flex;
      gap: .5rem;
      align-items: center;
      padding: .45rem .9rem;
      border-radius: var(--radius-full);
      background: var(--color-primary-highlight);
      color: var(--color-primary);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .16em;
      margin-bottom: var(--space-5)
    }

    .section-desc {
      color: var(--color-text-muted);
      font-size: var(--text-base)
    }

    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 80;
      background: color-mix(in srgb, var(--color-bg) 74%, transparent);
      backdrop-filter: blur(22px);
      border-bottom: 1px solid transparent;
      transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .3s ease
    }

    .site-header.scrolled {
      border-color: var(--color-border)
    }

    .site-header.hidden {
      transform: translateY(-100%)
    }

    .nav-shell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding: 1rem 0
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .9rem;
      font-weight: 800;
      letter-spacing: .02em
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--color-primary-highlight), rgba(102, 163, 255, .15));
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      overflow: hidden
    }

    .brand-mark svg {
      width: 28px;
      height: 28px
    }

    .brand-text strong {
      display: block;
      font-size: var(--text-sm)
    }

    .brand-text span {
      display: block;
      font-size: var(--text-xs);
      color: var(--color-text-muted)
    }

    .nav-links {
      display: flex;
      gap: var(--space-4);
      align-items: center
    }

    .nav-links a {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      position: relative;
      padding: .5rem .15rem
    }

    .nav-links a:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -.1rem;
      width: 100%;
      height: 1px;
      background: var(--color-primary);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--transition-interactive)
    }

    .nav-links a:hover,
    .nav-links a[aria-current="true"] {
      color: var(--color-text)
    }

    .nav-links a:hover:after,
    .nav-links a[aria-current="true"]:after {
      transform: scaleX(1)
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: .75rem
    }

    .theme-toggle,
    .menu-toggle {
      width: 46px;
      height: 46px;
      border-radius: 999px;
      border: 1px solid var(--color-border);
      background: color-mix(in srgb, var(--color-surface) 86%, transparent);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: transform var(--transition-interactive), border-color var(--transition-interactive)
    }

    .theme-toggle:hover,
    .menu-toggle:hover {
      transform: translateY(-2px);
      border-color: rgba(65, 209, 200, .35)
    }

    .menu-toggle {
      display: none
    }

    .hero {
      min-height: 100dvh;
      display: grid;
      align-items: center;
      padding-top: 7rem
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: var(--space-12);
      align-items: center
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .5rem .95rem;
      border-radius: 999px;
      border: 1px solid var(--color-border);
      background: color-mix(in srgb, var(--color-surface) 86%, transparent);
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: .16em;
      font-weight: 700
    }

    .eyebrow .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--color-primary);
      box-shadow: 0 0 0 8px rgba(65, 209, 200, .12)
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 1.15rem + 3.6vw, 4.8rem);
      letter-spacing: -.04em;
      margin: var(--space-6) 0 var(--space-5);
      max-width: 15ch
    }

    .gradient-text {
      background: linear-gradient(135deg, var(--color-text) 0%, color-mix(in srgb, var(--color-primary) 78%, white) 52%, var(--color-blue) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .hero-copy {
      font-size: var(--text-lg);
      color: var(--color-text-muted);
      max-width: 60ch
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      margin-top: var(--space-8)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .75rem;
      min-height: 48px;
      padding: .95rem 1.35rem;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: var(--text-sm);
      font-weight: 700;
      transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive)
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 76%, var(--color-blue)));
      color: var(--color-text-inverse);
      box-shadow: 0 14px 40px rgba(65, 209, 200, .26)
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 22px 48px rgba(65, 209, 200, .34)
    }

    .btn-secondary {
      border-color: var(--color-border);
      background: color-mix(in srgb, var(--color-surface) 90%, transparent)
    }

    .btn-secondary:hover {
      transform: translateY(-3px);
      border-color: rgba(65, 209, 200, .3)
    }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-4);
      margin-top: var(--space-10)
    }

    .stat {
      padding: var(--space-5);
      background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 94%, transparent), color-mix(in srgb, var(--color-surface-2) 96%, transparent));
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm)
    }

    .stat strong {
      display: block;
      font-size: clamp(1.4rem, 1rem + 2vw, 2.5rem);
      font-family: var(--font-display);
      letter-spacing: -.05em
    }

    .stat span {
      color: var(--color-text-muted);
      font-size: var(--text-sm)
    }

    .hero-card {
      position: relative;
      padding: var(--space-8);
      border-radius: 32px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 82%, transparent), color-mix(in srgb, var(--color-surface-2) 92%, transparent));
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      isolation: isolate
    }

    .hero-card:before,
    .hero-card:after {
      content: "";
      position: absolute;
      border-radius: 50%;
      filter: blur(10px);
      z-index: -1
    }

    .hero-card:before {
      width: 220px;
      height: 220px;
      background: rgba(65, 209, 200, .16);
      top: -40px;
      right: -40px;
      animation: floatY 8s ease-in-out infinite
    }

    .hero-card:after {
      width: 180px;
      height: 180px;
      background: rgba(102, 163, 255, .14);
      bottom: -50px;
      left: -30px;
      animation: floatY 9s ease-in-out infinite reverse
    }

    .console-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-6)
    }

    .console-dots {
      display: flex;
      gap: .5rem
    }

    .console-dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    .console-dots span:nth-child(1) {
      background: #ff5f56
    }

    .console-dots span:nth-child(2) {
      background: #ffbd2e
    }

    .console-dots span:nth-child(3) {
      background: #27c93f
    }

    .console-label {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .terminal {
      display: grid;
      gap: var(--space-4)
    }

    .terminal-line {
      display: flex;
      gap: .8rem;
      align-items: flex-start;
      padding: .9rem 1rem;
      border-radius: 18px;
      background: rgba(7, 17, 31, .18);
      border: 1px solid rgba(255, 255, 255, .05)
    }

    [data-theme="light"] .terminal-line {
      background: rgba(9, 19, 33, .04)
    }

    .prompt {
      color: var(--color-primary);
      font-weight: 800
    }

    .terminal-line span:last-child {
      color: var(--color-text-muted)
    }

    .skill-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      margin-top: var(--space-6)
    }

    .chip {
      padding: .65rem .9rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--color-border);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--color-text-muted);
      backdrop-filter: blur(10px);
      animation: floatY 7s ease-in-out infinite
    }

    .chip:nth-child(2n) {
      animation-delay: -1.3s
    }

    .chip:nth-child(3n) {
      animation-delay: -2.2s
    }

    .section-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--space-6);
    }

    .about-copy {
      grid-column: span 7;
      padding: var(--space-8);
      background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 94%, transparent), color-mix(in srgb, var(--color-surface-offset) 96%, transparent));
      border: 1px solid var(--color-border);
      border-radius: 30px;
      box-shadow: var(--shadow-sm)
    }

    .reveal-text {
      margin-bottom: 20px;
    }

    .about-panel {
      grid-column: span 5;
      display: grid;
      gap: var(--space-6)
    }

    .glass-card {
      padding: var(--space-6);
      background: color-mix(in srgb, var(--color-surface) 92%, transparent);
      border: 1px solid var(--color-border);
      border-radius: 26px;
      box-shadow: var(--shadow-sm)
    }

    .glass-card h3 {
      font-size: var(--text-lg);
      margin-bottom: var(--space-3)
    }

    .glass-card p,
    .about-copy p {
      color: var(--color-text-muted)
    }

    .about-copy .lead {
      font-size: var(--text-lg);
      color: var(--color-text);
      margin-bottom: var(--space-5)
    }

    .mini-list {
      display: grid;
      gap: var(--space-3);
      margin: var(--space-5) 0 0;
      padding: 0
    }

    .mini-list li {
      list-style: none;
      padding-left: 1.2rem;
      position: relative;
      color: var(--color-text-muted)
    }

    .mini-list li:before {
      content: "";
      position: absolute;
      left: 0;
      top: .65rem;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-primary);
      box-shadow: 0 0 0 6px rgba(65, 209, 200, .1)
    }

    .timeline {
      display: grid;
      gap: var(--space-5);
      margin-top: var(--space-10)
    }

    .timeline-card {
      padding: var(--space-6);
      border-radius: 26px;
      border: 1px solid var(--color-border);
      background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, transparent), color-mix(in srgb, var(--color-surface-offset) 92%, transparent));
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--space-5);
      align-items: start;
      box-shadow: var(--shadow-sm)
    }

    .timeline-card--interactive {
      display: block;
      cursor: pointer;
      transition: transform var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive)
    }

    .timeline-card--interactive:hover {
      transform: translateY(-4px);
      border-color: rgba(65, 209, 200, .3);
      box-shadow: var(--shadow-md)
    }

    .timeline-card--interactive summary {
      list-style: none;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--space-5);
      align-items: start
    }

    .timeline-card--interactive summary::-webkit-details-marker {
      display: none
    }

    .timeline-summary-copy {
      display: grid
    }

    .timeline-detail {
      margin-top: var(--space-5);
      padding: var(--space-5) 0 0 calc(52px + var(--space-5));
      border-top: 1px solid var(--color-divider);
      display: grid;
      grid-template-columns: minmax(220px, .7fr) 1fr;
      gap: var(--space-5);
      align-items: start
    }

    .timeline-detail p {
      color: var(--color-text-muted);
      font-size: var(--text-sm);
      grid-column: 1 / -1;
    }

    .detail-grid {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-3);
    }

    .detail-card {
      padding: var(--space-4);
      border-radius: 18px;
      background: color-mix(in srgb, var(--color-surface-2) 94%, transparent);
      border: 1px solid var(--color-border);
      min-width: 0;
    }

    .detail-card strong {
      display: block;
      margin-bottom: var(--space-2);
      font-size: var(--text-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--color-text-faint)
    }

    .detail-card span {
      color: var(--color-text-muted);
      font-size: var(--text-sm)
    }

    .timeline-number {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--color-primary-highlight);
      color: var(--color-primary);
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 800
    }

    .timeline-meta {
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: .16em;
      color: var(--color-text-faint);
      margin-bottom: .45rem
    }

    .timeline-card h3 {
      font-size: var(--text-lg);
      margin-bottom: .35rem
    }

    .timeline-card p {
      color: var(--color-text-muted)
    }

    .timeline-tag {
      padding: .45rem .8rem;
      border-radius: 999px;
      border: 1px solid var(--color-border);
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      display: inline-flex;
      align-items: center;
      gap: .5rem
    }

    .timeline-card--interactive .timeline-tag:after {
      content: '+';
      font-size: 1rem;
      font-weight: 800;
      transition: transform var(--transition-interactive)
    }

    .timeline-card--interactive[open] .timeline-tag:after {
      transform: rotate(45deg)
    }

    .projects-layout {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: var(--space-6);
      align-items: start;
      margin-top: var(--space-10)
    }

    .project-feature {
      position: relative;
      padding: var(--space-8);
      min-height: 0;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(65, 209, 200, .14), rgba(102, 163, 255, .12) 38%, color-mix(in srgb, var(--color-surface) 94%, transparent) 72%);
      border: 1px solid var(--color-border);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      display: grid;
      align-content: start
    }

    .project-feature:before {
      content: "";
      position: absolute;
      inset: auto -10% -30% auto;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(102, 163, 255, .15);
      filter: blur(30px);
      animation: floatY 8.5s ease-in-out infinite
    }

    .project-feature h3 {
      font-family: var(--font-display);
      font-size: clamp(1.85rem, 1.2rem + 1.5vw, 2.65rem);
      max-width: 18ch;
      letter-spacing: -.03em;
      margin-bottom: var(--space-4)
    }

    .project-feature p {
      color: var(--color-text-muted);
      margin-bottom: var(--space-6)
    }

    .project-panels {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-4)
    }

    .panel {
      padding: var(--space-4);
      border-radius: 18px;
      background: rgba(7, 17, 31, .2);
      border: 1px solid rgba(255, 255, 255, .08)
    }

    [data-theme="light"] .panel {
      background: rgba(255, 255, 255, .55)
    }

    .panel strong {
      display: block;
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: .14em;
      color: var(--color-text-faint);
      margin-bottom: var(--space-2)
    }

    .panel span {
      font-size: var(--text-sm);
      color: var(--color-text-muted)
    }

    .project-stack {
      display: grid;
      gap: var(--space-5)
    }

    .project-card {
      padding: var(--space-6);
      border-radius: 28px;
      background: color-mix(in srgb, var(--color-surface) 94%, transparent);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      transition: transform var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive)
    }

    .project-card:hover {
      transform: translateY(-6px);
      border-color: rgba(65, 209, 200, .28);
      box-shadow: var(--shadow-md)
    }

    .project-card h3 {
      font-size: var(--text-lg);
      margin: var(--space-3) 0
    }

    .project-card p {
      color: var(--color-text-muted);
      font-size: var(--text-sm)
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      margin-top: var(--space-4)
    }

    .pill {
      padding: .45rem .7rem;
      border-radius: 999px;
      background: var(--color-primary-highlight);
      font-size: var(--text-xs);
      color: var(--color-primary);
      font-weight: 700
    }

    .skills-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-5);
      margin-top: var(--space-10)
    }

    .skill-card {
      padding: var(--space-6);
      border-radius: 26px;
      border: 1px solid var(--color-border);
      background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, transparent), color-mix(in srgb, var(--color-surface-offset) 94%, transparent));
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden
    }

    .skill-card:before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
      transform: translateX(-100%);
      animation: scan 5s linear infinite
    }

    .skill-card h3 {
      font-size: var(--text-lg);
      margin: var(--space-4) 0 var(--space-3)
    }

    .skill-card p {
      color: var(--color-text-muted);
      font-size: var(--text-sm)
    }

    .skill-icon {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--color-primary-highlight);
      color: var(--color-primary)
    }

    .contact-wrap {
      display: grid;
      grid-template-columns: 1fr .92fr;
      gap: var(--space-6);
      align-items: stretch;
      margin-top: var(--space-10)
    }

    .contact-card,
    .contact-panel {
      padding: var(--space-8);
      border-radius: 30px;
      border: 1px solid var(--color-border);
      background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, transparent), color-mix(in srgb, var(--color-surface-offset) 93%, transparent));
      box-shadow: var(--shadow-sm)
    }

    .contact-card h3,
    .contact-panel h3 {
      font-size: var(--text-xl);
      margin-bottom: var(--space-3)
    }

    .contact-card p,
    .contact-panel p {
      color: var(--color-text-muted)
    }

    .contact-links {
      display: grid;
      gap: var(--space-4);
      margin-top: var(--space-8)
    }

    .contact-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding: 1rem 1.1rem;
      border-radius: 20px;
      background: color-mix(in srgb, var(--color-surface-2) 94%, transparent);
      border: 1px solid var(--color-border);
      transition: transform var(--transition-interactive), border-color var(--transition-interactive)
    }

    .contact-link:hover {
      transform: translateX(6px);
      border-color: rgba(65, 209, 200, .3)
    }

    .contact-label small {
      display: block;
      color: var(--color-text-faint);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: .14em
    }

    .contact-label strong {
      display: block;
      font-size: var(--text-base)
    }

    .cta-strip {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      margin-top: var(--space-8)
    }

    .availability {
      display: grid;
      gap: var(--space-3);
      margin-top: var(--space-8)
    }

    .availability-item {
      display: grid;
      grid-template-columns: minmax(110px, .35fr) 1fr;
      align-items: start;
      gap: var(--space-3) var(--space-5);
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: color-mix(in srgb, var(--color-surface-2) 88%, transparent);
      color: var(--color-text-muted)
    }

    .availability-item span {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: .35rem .65rem;
      border-radius: var(--radius-full);
      background: var(--color-primary-highlight);
      color: var(--color-primary);
      font-size: var(--text-xs);
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .12em
    }

    .availability-item strong {
      color: var(--color-text);
      font-size: var(--text-sm);
      font-weight: 700;
      line-height: 1.55
    }

    .site-footer {
      padding: var(--space-8) 0 var(--space-10);
      border-top: 1px solid var(--color-divider)
    }

    .footer-row {
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      align-items: center;
      color: var(--color-text-muted);
      font-size: var(--text-sm)
    }

    .reveal {
      opacity: 0;
      transform: translateY(36px) scale(.985);
      transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1)
    }

    .reveal.revealed {
      opacity: 1;
      transform: none
    }

    .parallax {
      transform: translate3d(0, 0, 0)
    }

    .magnetic {
      transform-style: preserve-3d
    }

    .cursor-glow {
      position: fixed;
      left: 0;
      top: 0;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(65, 209, 200, .13), transparent 58%);
      filter: blur(16px);
      transform: translate(-50%, -50%);
      z-index: 0;
      mix-blend-mode: screen;
      opacity: .8
    }

    [data-theme="light"] .cursor-glow {
      mix-blend-mode: multiply;
      opacity: .42
    }

    @keyframes floatY {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-12px)
      }
    }

    @keyframes scan {
      0% {
        transform: translateX(-100%)
      }

      100% {
        transform: translateX(100%)
      }
    }

    @keyframes blink {

      0%,
      49% {
        opacity: 1
      }

      50%,
      100% {
        opacity: .15
      }
    }

    .typing:after {
      content: "_";
      margin-left: .15rem;
      color: var(--color-primary);
      animation: blink 1s steps(1) infinite
    }

    @media (max-width:1080px) {

      .hero-grid,
      .projects-layout,
      .contact-wrap {
        grid-template-columns: 1fr
      }

      .section-grid {
        grid-template-columns: 1fr
      }

      .about-copy,
      .about-panel {
        grid-column: auto
      }

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

      .timeline-card {
        grid-template-columns: auto 1fr
      }

      .timeline-card--interactive summary {
        grid-template-columns: auto 1fr
      }

      .timeline-tag {
        grid-column: 2
      }

      .timeline-detail {
        grid-template-columns: 1fr;
        padding-left: calc(52px + var(--space-5));
      }

      .detail-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      }
    }

    @media (max-width:820px) {
      .menu-toggle {
        display: grid
      }

      .nav-links {
        position: absolute;
        left: 1rem;
        right: 1rem;
        top: calc(100% + .75rem);
        padding: 1rem;
        border-radius: 22px;
        background: color-mix(in srgb, var(--color-surface) 96%, transparent);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        display: none;
        flex-direction: column;
        align-items: flex-start
      }

      .nav-links.open {
        display: flex
      }

      .hero {
        padding-top: 6.5rem
      }

      .hero h1 {
        font-size: clamp(2.15rem, 1.35rem + 5vw, 3.6rem);
        max-width: 16ch
      }

      .hero-stats {
        grid-template-columns: 1fr
      }

      .skills-grid {
        grid-template-columns: 1fr
      }

      .project-panels {
        grid-template-columns: 1fr
      }

      .timeline-card {
        grid-template-columns: 1fr
      }

      .timeline-card--interactive summary {
        grid-template-columns: 1fr
      }

      .timeline-tag {
        grid-column: auto;
        justify-self: start
      }

      .timeline-detail {
        padding-left: 0
      }

      .detail-grid {
        grid-template-columns: 1fr
      }

      .availability-item {
        grid-template-columns: 1fr;
        gap: var(--space-3)
      }

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

    @media (max-width:580px) {
      .container {
        width: min(calc(100% - 1.25rem), var(--content-default))
      }

      .hero-card,
      .about-copy,
      .contact-card,
      .contact-panel,
      .project-card,
      .skill-card,
      .glass-card,
      .project-feature,
      .timeline-card {
        padding: var(--space-6)
      }

      .section {
        padding-block: clamp(var(--space-12), 14vw, var(--space-20))
      }

      .btn {
        width: 100%
      }

      .hero-actions {
        flex-direction: column
      }
    }