:root {
  --canvas: #0e0f13;
  --surface: #181b21;
  --surface-raised: #20242c;
  --text: #ebf2eb;
  --muted: #9fa9a3;
  --mint: #61e5b8;
  --lavender: #ab85fa;
  --accent-hover: #c4a7ff;
  --line: #303640;
  --font-sans: "Roboto", Arial, sans-serif;
  --text-2xs: .625rem;
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1rem;
  --text-lg: 1.0625rem;
  --heading-xl: clamp(2rem, 3.4vw, 3.0625rem);
  --heading-lg: clamp(2rem, 3vw, 2.6875rem);
  --heading-md: 1.375rem;
  --header-nav-size: var(--text-xs);
  --hero-title-size: var(--heading-xl);
  --section-title-size: var(--heading-lg);
  --skills-title-size: clamp(2rem, 3.34vw, 3rem);
  --story-title-size: clamp(1.75rem, 2.57vw, 2.3125rem);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 2.5rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6.25rem;
  --space-10: 7.5rem;
  --content-width: 1360px;
  --gutter: clamp(1rem, 2.78vw, 2.5rem);
  --section-gap: var(--space-9);
  --radius: 1rem;
  --radius-small: .5rem;
  --radius-pill: 999px;
  --header-height: 58px;
  --card-padding: 1.75rem;
  --profile-width: 280px;
  --hero-card-height: 440px;
  --activity-cell: 18px;
  --border: 1px solid var(--line);
  --accent-rule: 1px solid color-mix(in srgb, var(--mint) 55%, transparent);
}