:root {
      
      
      --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      
      --font-mono: "Fira Code", "Courier New", Courier, monospace;

      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --line-height-sm: 1.3;
      --line-height-base: 1.5;
      --line-height-lg: 1.4;

      --space-2xs: 0.25rem;
      --space-xs: 0.5rem;
      --space-sm: 0.75rem;
      --space-md: 1rem;
      --space-lg: 1.5rem;
      --space-xl: 2rem;
      --space-2xl: 2.5rem;

      
      
      --radius-sm: 0.375rem;

      
      
      --radius-md: 0.5rem;

      
      
      --radius-lg: 0.75rem;

      
      
      --card-max-width: 28rem;

      
      
      --transition-fast: 0.2s ease;
      --transition-normal: 0.3s ease;

      
      
      --control-height: 2.75rem;

      
      
      --control-height-primary: 3rem;

      
      --border-hairline: 1px;
      --media-aspect-ratio: 16 / 10;
      --accent-line-width: 0.25rem;
      --lift-distance: 0.125rem;
      --text-trim-compensation: 0.15em;
      --letter-spacing-wide: 0.05em;
      --letter-spacing-tight: -0.03em;
      --z-fallback: 1;
      --z-image: 2;
      --z-toggle: 10;

      
      
      
      --color-shadow: oklch(0 0 0 / 0.46);
      --shadow-card: 0 var(--space-lg) var(--space-2xl) var(--color-shadow);

      

      
      --color-canvas: oklch(0.15 0.02 255);
      --color-surface: oklch(0.20 0.02 255);
      --color-surface-elevated: oklch(0.24 0.025 255);
      --color-border: oklch(0.33 0.025 255);
      --color-text-primary: oklch(0.95 0.01 255);
      --color-text-secondary: oklch(0.82 0.015 255);
      --color-text-muted: oklch(0.72 0.02 255);
      --color-accent: oklch(0.72 0.16 55);
      --color-accent-hover: oklch(0.77 0.15 55);
      --color-accent-secondary: oklch(0.78 0.12 205);
      --color-on-accent: oklch(0.16 0.02 255);
      --color-accent-soft: oklch(0.72 0.16 55 / 0.10);
      --color-accent-glow: oklch(0.72 0.16 55 / 0.38);
      --color-cyan-glow: oklch(0.78 0.12 205 / 0.18);
      --color-image-overlay: oklch(0.15 0.02 255 / 0.56);
      --color-transparent: oklch(0 0 0 / 0);
      --color-img-fallback: oklch(0.24 0.025 255);

      
      
      --color-focus: var(--color-accent-secondary);
      --focus-ring: 0 0 0 var(--space-2xs) var(--color-focus);
    }

    
    
    [data-theme="light"] {
      --color-canvas: oklch(0.97 0.008 255);
      --color-surface: oklch(0.995 0.002 255);
      --color-surface-elevated: oklch(0.965 0.01 255);
      --color-border: oklch(0.86 0.02 255);
      --color-text-primary: oklch(0.22 0.025 255);
      --color-text-secondary: oklch(0.36 0.025 255);
      --color-text-muted: oklch(0.45 0.025 255);
      --color-accent: oklch(0.52 0.125 55);
      --color-accent-hover: oklch(0.46 0.11 55);
      --color-accent-secondary: oklch(0.45 0.07 205);
      --color-on-accent: oklch(0.995 0.002 255);
      --color-accent-soft: oklch(0.52 0.125 55 / 0.09);
      --color-accent-glow: oklch(0.52 0.125 55 / 0.24);
      --color-cyan-glow: oklch(0.45 0.07 205 / 0.12);
      --color-image-overlay: oklch(0.22 0.025 255 / 0.34);
      --color-img-fallback: oklch(0.965 0.01 255);
      --color-shadow: oklch(0.22 0.025 255 / 0.16);
    }

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

    html {
      color-scheme: dark;
    }

    [data-theme="light"] {
      color-scheme: light;
    }

    body {
      font-family: var(--font-sans);
      background-color: var(--color-canvas);

      
      background-image:
        radial-gradient(circle at 12% 18%, var(--color-accent-glow), var(--color-transparent) 34%),
        radial-gradient(circle at 88% 82%, var(--color-cyan-glow), var(--color-transparent) 30%);

      color: var(--color-text-primary);
      min-height: 100vh;
      display: grid;
      place-items: center;

      
      
      padding: var(--space-2xl) var(--space-xl);

      transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
      line-height: var(--line-height-base);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    
    .profile-page-stack {
      inline-size: min(100%, var(--card-max-width));
      display: grid;
      gap: var(--space-lg);
    }

    .profile-page-footer {
      color: var(--color-text-muted);
      font-family: var(--font-mono);
      font-size: var(--font-size-sm);
      text-align: center;
    }

    .profile-page-footer p {
      margin: 0;
    }

    .theme-toggle {
      
      
      position: fixed;
      top: var(--space-lg);
      right: var(--space-lg);
      z-index: var(--z-toggle);
      min-height: var(--control-height);
      padding: var(--space-sm) var(--space-md);

      
      
      font-family: var(--font-mono);
      font-size: var(--font-size-sm);
      font-weight: 700;
      background-color: var(--color-surface);
      color: var(--color-text-primary);

      
      
      border: var(--border-hairline) solid var(--color-border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    }

    .theme-toggle:hover {
      background-color: var(--color-accent-soft);
      color: var(--color-accent);
      border-color: var(--color-accent);
      transform: translateY(calc(var(--lift-distance) * -1));
    }

    .theme-toggle:focus-visible,
    .profile-card__action:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

    .profile-card {
      position: relative;

      
      
      background-color: var(--color-surface);
      background-image:
        radial-gradient(
          circle at 10% 20%,
          color-mix(in oklch, var(--color-surface-elevated) 92%, var(--color-accent) 8%) 0%,
          var(--color-surface) 90%
        );

      
      
      border: var(--border-hairline) solid var(--color-border);
      border-radius: var(--radius-lg);
      max-width: var(--card-max-width);
      width: 100%;
      overflow: hidden;

      
      
      box-shadow: var(--shadow-card);
      transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
    }

    
    .profile-card::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      width: var(--accent-line-width);
      background: linear-gradient(
        180deg,
        var(--color-accent) 0%,
        var(--color-accent-secondary) 100%
      );
      z-index: var(--z-image);
    }

    .profile-card:hover {
      border-color: var(--color-accent);
      transform: translateY(calc(var(--lift-distance) * -1));
    }

    .profile-card__media {
      position: relative;
      width: 100%;

      
      
      aspect-ratio: var(--media-aspect-ratio);
      background-color: var(--color-img-fallback);
      overflow: hidden;
      border-bottom: var(--border-hairline) solid var(--color-border);
    }

    
    .profile-card__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        var(--color-image-overlay),
        var(--color-transparent) 58%
      );
      z-index: var(--z-image);
      pointer-events: none;
    }

    .profile-card__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    
    .profile-card__img:not([src]),
    .profile-card__img[src=""] {
      visibility: hidden;
    }

    .profile-card__media::before {
      
      
      content: "Resume preview unavailable";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: var(--space-lg);
      font-family: var(--font-mono);
      font-size: var(--font-size-sm);
      color: var(--color-text-muted);
      font-weight: 600;
      text-align: center;
      z-index: var(--z-fallback);
    }

    .profile-card__img[src] {
      position: relative;
      z-index: var(--z-image);
    }

    .profile-card__content {
      padding: var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .profile-card__badge-wrapper {
      display: flex;
    }

    .profile-card__badge {
      font-family: var(--font-mono);
      font-size: var(--font-size-sm);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: var(--letter-spacing-wide);

      
      
      background-color: var(--color-surface-elevated);

      
      
      color: var(--color-accent);
      padding: var(--space-xs) var(--space-sm);
      border: var(--border-hairline) solid var(--color-accent);
      border-radius: var(--radius-sm);
      white-space: nowrap;
      transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal);
    }

    
    @supports (text-box: trim-both cap alphabetic) {
      .profile-card__badge,
      .profile-card__action,
      .theme-toggle {
        text-box: trim-both cap alphabetic;
        padding-block: calc(var(--space-sm) + var(--text-trim-compensation));
      }

      .profile-card__badge {
        padding-block: calc(var(--space-xs) + var(--text-trim-compensation));
      }
    }

    
    .profile-card__headline {
      color: var(--color-text-primary);
      font-size: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.875rem);
      line-height: var(--line-height-sm);
      font-weight: 800;

      
      
      letter-spacing: var(--letter-spacing-tight);
      overflow-wrap: anywhere;
      margin-top: calc(var(--space-xs) / 2);
    }

    
    @supports ((background-clip: text) or (-webkit-background-clip: text)) {
      .profile-card__headline {
        background: linear-gradient(
          to right,
          var(--color-text-primary),
          var(--color-accent)
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: var(--color-transparent);
      }
    }

    .profile-card__description {
      
      
      color: var(--color-text-secondary);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      margin-bottom: var(--space-xs);
      overflow-wrap: anywhere;
    }

    
    .profile-card__stack {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      list-style: none;
      margin: 0 0 var(--space-sm);
      padding: 0;
    }

    .profile-card__stack-item {
      min-height: var(--control-height);
      display: inline-flex;
      align-items: center;
      padding: var(--space-xs) var(--space-sm);
      font-family: var(--font-mono);
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-text-primary);
      background-color: var(--color-accent-soft);
      border: var(--border-hairline) solid var(--color-border);
      border-radius: var(--radius-sm);
    }

    .profile-card__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: var(--font-size-base);
      font-weight: 700;
      text-decoration: none;
      background-color: var(--color-accent);

      
      
      color: var(--color-on-accent);
      padding: var(--space-sm) var(--space-md);

      
      
      border: var(--border-hairline) solid var(--color-accent);

      
      
      border-radius: var(--radius-sm);
      cursor: pointer;
      min-height: var(--control-height-primary);
      transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    }

    .profile-card__action:hover {
      background-color: var(--color-accent-hover);
      border-color: var(--color-accent-hover);
      transform: translateY(calc(var(--lift-distance) * -1));
    }

    
    @media (max-width: 30rem) {
      body {
        place-items: start center;
        padding: var(--space-md);
      }

      .theme-toggle {
        top: var(--space-md);
        right: var(--space-md);
        max-width: calc(100vw - (var(--space-md) * 2));
      }

      .profile-card__content {
        padding: var(--space-md);
      }

      .profile-card__stack-item {
        flex: 1 1 6rem;
        justify-content: center;
      }
    }

    @media (max-height: 46rem) {
      body {
        place-items: start center;
        padding: var(--space-md);
      }

      .theme-toggle {
        top: var(--space-md);
        right: var(--space-md);
      }
    }

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

    
    @media print {
      :root,
      [data-theme="light"] {
        --color-canvas: oklch(1 0 0);
        --color-surface: oklch(1 0 0);
        --color-surface-elevated: oklch(0.97 0 0);
        --color-border: oklch(0.72 0 0);
        --color-text-primary: oklch(0.12 0 0);
        --color-text-secondary: oklch(0.24 0 0);
        --color-text-muted: oklch(0.34 0 0);
        --color-accent: oklch(0.36 0.08 55);
        --color-accent-secondary: oklch(0.34 0.055 205);
        --color-on-accent: oklch(1 0 0);
        --color-shadow: oklch(0 0 0 / 0);
      }

      body {
        display: block;
        min-height: auto;
        padding: 0;
        background-image: none;
      }

      .theme-toggle {
        display: none;
      }

      .profile-card {
        max-width: none;
        box-shadow: none;
        break-inside: avoid;
      }
    }