@layer application {
.profile-snapshot {
  --profile-snapshot-section-ink: var(--title-profile-surface-color);
  --profile-snapshot-section-ink-muted: rgb(17 17 17 / 0.68);
  --profile-snapshot-section-rule: rgb(17 17 17 / 0.2);

  container: profile-snapshot / inline-size;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  padding-inline: var(--title-profile-extension-spacing);
  padding-block-end: var(--title-profile-extension-spacing);
  color: var(--title-profile-surface-ink);
  font-family: var(--type-family-text);
}


.profile-snapshot__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(0.42rem, calc(0.62 * var(--site-scale-unit)), 0.65rem);
  padding-block-end: clamp(0.7rem, calc(1.05 * var(--site-scale-unit)), 1.05rem);
}

.profile-snapshot__title {
  margin: 0;
  font-family: var(--type-family-display);
  font-size: var(--type-size-overview-snapshot-title);
  font-weight: var(--type-weight-regular);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.profile-snapshot__title-emphasis {
  font-weight: var(--type-weight-bold);
}

.profile-snapshot__title-context {
  font-weight: var(--type-weight-light);
}

.profile-snapshot__heading,
.profile-snapshot__section-title {
  display: flex;
  min-inline-size: 0;
  align-items: center;
}

.profile-snapshot__heading {
  gap: clamp(0.45rem, calc(0.65 * var(--site-scale-unit)), 0.68rem);
}

.profile-snapshot__heading-icon {
  inline-size: clamp(1.35rem, calc(1.85 * var(--site-scale-unit)), 1.9rem);
  block-size: clamp(1.35rem, calc(1.85 * var(--site-scale-unit)), 1.9rem);
  flex: none;
  filter: invert(1);
}

.profile-snapshot__lead {
  margin: 0;
  color: rgb(255 255 255 / 0.72);
  font-size: var(--type-size-overview-snapshot-lead);
  font-weight: var(--type-weight-light);
  hyphens: auto;
  line-height: 1.42;
  overflow-wrap: anywhere;
  text-align: justify;
  text-align-last: start;
}

.profile-snapshot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
  min-block-size: 0;
  gap: clamp(0.7rem, calc(0.95 * var(--site-scale-unit)), 1rem);
  padding-block-start: clamp(0.7rem, calc(1.05 * var(--site-scale-unit)), 1.05rem);
}

.profile-snapshot__section {
  --profile-snapshot-section-inline-padding: clamp(
    0.78rem,
    calc(1.08 * var(--site-scale-unit)),
    1.1rem
  );

  position: relative;
  display: grid;
  grid-template-rows:
    auto
    minmax(var(--profile-snapshot-section-content-min-size), 1fr);
  min-inline-size: 0;
  min-block-size: 0;
  row-gap: clamp(1.15rem, calc(1.65 * var(--site-scale-unit)), 1.7rem);
  padding-block: clamp(0.78rem, calc(1.08 * var(--site-scale-unit)), 1.1rem);
  padding-inline: var(--profile-snapshot-section-inline-padding);
  overflow: hidden;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--profile-snapshot-section-ink);
  isolation: isolate;
}

.profile-snapshot__section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--title-profile-card-background);
  content: "";
  filter: var(--title-profile-card-filter);
  pointer-events: none;
}

.profile-snapshot__section--skills,
.profile-snapshot__section--languages {
  row-gap: clamp(0.78rem, calc(1.05 * var(--site-scale-unit)), 1.1rem);
  padding-block: clamp(0.62rem, calc(0.82 * var(--site-scale-unit)), 0.85rem);
}

.profile-snapshot__section--skills {
  --profile-snapshot-section-content-min-size: clamp(
    4.2rem,
    calc(4.8 * var(--site-scale-unit)),
    4.9rem
  );
}

.profile-snapshot__section--journey {
  --profile-snapshot-section-content-min-size: clamp(
    22rem,
    calc(24 * var(--site-scale-unit)),
    23rem
  );
}

.profile-snapshot__section--languages {
  --profile-snapshot-section-content-min-size: clamp(
    2.25rem,
    calc(2.75 * var(--site-scale-unit)),
    2.9rem
  );
}

.profile-snapshot__section--stages {
  --profile-snapshot-section-content-min-size: clamp(
    39rem,
    calc(43 * var(--site-scale-unit)),
    42rem
  );
}

.profile-snapshot__section-content {
  display: flex;
  inline-size: 100%;
  min-inline-size: 0;
  align-items: center;
  justify-content: center;
}

.profile-snapshot__section-content > * {
  inline-size: 100%;
}

.profile-snapshot__section-content--stages {
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(0.75rem, calc(1.05 * var(--site-scale-unit)), 1.1rem);
  align-content: center;
}

.profile-snapshot__section-title {
  gap: 0.42em;
  margin: 0;
  color: inherit;
  font-family: var(--type-family-display);
  font-size: var(--type-size-detail-title);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.075em;
  line-height: 1.1;
  text-transform: uppercase;
}

.profile-snapshot__section-title span {
  min-inline-size: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.profile-snapshot__section-icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
}


.profile-snapshot__knowledge-logos {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(0.5rem, calc(0.72 * var(--site-scale-unit)), 0.74rem);
  margin: 0;
  padding: 0;
  align-items: stretch;
  justify-items: center;
  list-style: none;
}

.profile-snapshot__knowledge-logo {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: clamp(3.7rem, calc(4.55 * var(--site-scale-unit)), 4.65rem);
  gap: clamp(0.2rem, calc(0.3 * var(--site-scale-unit)), 0.32rem);
  align-items: center;
  justify-content: center;
}

.profile-snapshot__knowledge-symbols {
  display: flex;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: clamp(1.85rem, calc(2.5 * var(--site-scale-unit)), 2.55rem);
  align-items: center;
  justify-content: center;
}

.profile-snapshot__knowledge-symbols img {
  display: block;
  inline-size: clamp(1.85rem, calc(2.5 * var(--site-scale-unit)), 2.55rem);
  max-inline-size: 100%;
  block-size: clamp(1.85rem, calc(2.5 * var(--site-scale-unit)), 2.55rem);
  object-fit: contain;
}

.profile-snapshot__knowledge-logo--pair .profile-snapshot__knowledge-symbols {
  gap: 0.22rem;
}

.profile-snapshot__knowledge-logo--pair .profile-snapshot__knowledge-symbols img {
  inline-size: calc((100% - 0.22rem) / 2);
  max-inline-size: clamp(1.45rem, calc(1.95 * var(--site-scale-unit)), 2rem);
  block-size: clamp(1.45rem, calc(1.95 * var(--site-scale-unit)), 2rem);
}

.profile-snapshot__knowledge-label {
  min-inline-size: 0;
  color: var(--profile-snapshot-section-ink-muted);
  font-size: var(--type-size-overview-snapshot-logo-label);
  font-weight: var(--type-weight-medium);
  hyphens: none;
  line-height: 1.12;
  overflow-wrap: normal;
  text-align: center;
  word-break: normal;
}


.profile-snapshot__journey {
  --profile-journey-axis-size: clamp(
    5rem,
    calc(5.6 * var(--site-scale-unit)),
    5.7rem
  );
  --profile-journey-node-size: clamp(
    3.45rem,
    calc(3.9 * var(--site-scale-unit)),
    4rem
  );
  --profile-journey-bubble-height: clamp(
    10.75rem,
    calc(8.5rem + (3 * var(--type-size-overview-snapshot-copy))),
    12.25rem
  );
  --profile-journey-bubble-node-clearance: clamp(
    0.6rem,
    calc(0.8 * var(--site-scale-unit)),
    0.85rem
  );
  --profile-journey-edge-block-spacing: clamp(
    0.5rem,
    calc(0.7 * var(--site-scale-unit)),
    0.72rem
  );
  --profile-journey-horizontal-edge-spacing: clamp(1.25rem, 4.5cqi, 3.25rem);
  --profile-journey-horizontal-node-inset: calc(
    12.5%
    + (0.75 * var(--profile-journey-horizontal-edge-spacing))
  );
  --profile-journey-bubble-border: rgb(17 17 17 / 0.78);

  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  inline-size: min(100%, 60rem);
  margin: auto;
  padding-block: var(--profile-journey-edge-block-spacing);
  padding-inline: var(--profile-journey-horizontal-edge-spacing);
  isolation: isolate;
  list-style: none;
}

.profile-snapshot__journey::before {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline: var(--profile-journey-horizontal-node-inset);
  block-size: 2px;
  border-radius: 999px;
  background: rgb(17 17 17 / 0.7);
  content: "";
  transform: translateY(-50%);
}

.profile-snapshot__journey-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows:
    minmax(0, 1fr)
    var(--profile-journey-axis-size)
    minmax(0, 1fr);
  min-inline-size: 0;
  padding-inline: clamp(0.35rem, calc(0.58 * var(--site-scale-unit)), 0.6rem);
}

.profile-snapshot__journey-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-row: 1;
  inline-size: calc(
    200%
    - var(--profile-journey-axis-size)
    - (2 * var(--profile-journey-bubble-node-clearance))
  );
  block-size: var(--profile-journey-bubble-height);
  min-inline-size: 0;
  padding: clamp(0.62rem, calc(0.86 * var(--site-scale-unit)), 0.9rem);
  border: 1.5px solid var(--profile-journey-bubble-border);
  border-radius: clamp(0.58rem, calc(0.8 * var(--site-scale-unit)), 0.82rem);
  align-self: end;
  justify-self: center;
  gap: 0.18rem;
  align-content: center;
  isolation: isolate;
  color: var(--profile-snapshot-section-ink);
}

.profile-snapshot__journey-step:nth-child(even) .profile-snapshot__journey-content {
  grid-row: 3;
  align-self: start;
}

.profile-snapshot__journey-content::before {
  position: absolute;
  z-index: -1;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  inline-size: 2px;
  block-size: calc(var(--profile-journey-axis-size) / 2);
  background: rgb(17 17 17 / 0.62);
  content: "";
  transform: translateX(-50%);
}

.profile-snapshot__journey-step:nth-child(even) .profile-snapshot__journey-content::before {
  inset-block: auto 100%;
}

.profile-snapshot__journey-period {
  color: rgb(17 17 17 / 0.62);
  font-size: var(--type-size-overview-snapshot-stage);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.profile-snapshot__journey-title,
.profile-snapshot__journey-highlights {
  min-inline-size: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.profile-snapshot__journey-title {
  font-family: var(--type-family-display);
  font-size: var(--type-size-overview-snapshot-section-title);
  line-height: 1.2;
}

.profile-snapshot__journey-highlights {
  display: grid;
  gap: clamp(0.2rem, calc(0.3 * var(--site-scale-unit)), 0.32rem);
  margin: clamp(0.18rem, calc(0.28 * var(--site-scale-unit)), 0.3rem) 0 0;
  padding-inline-start: 1.05em;
  color: rgb(17 17 17 / 0.78);
  font-size: var(--type-size-overview-snapshot-copy);
  font-weight: var(--type-weight-light);
  line-height: 1.36;
  white-space: pre-line;
}

.profile-snapshot__journey-highlights li::marker {
  color: rgb(17 17 17 / 0.72);
}

.profile-snapshot__journey-node {
  z-index: 3;
  display: flex;
  grid-row: 2;
  inline-size: var(--profile-journey-node-size);
  block-size: var(--profile-journey-node-size);
  padding: 0.3rem;
  border: 2px solid var(--title-profile-surface-ink);
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.12rem;
  background: var(--title-profile-surface-color);
  box-shadow: 0 0 0 0.18rem rgb(17 17 17 / 0.78);
  color: var(--title-profile-surface-ink);
  font-size: var(--type-size-overview-snapshot-stage);
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-weight-bold);
  line-height: 1;
}

.profile-snapshot__journey-node--graduation {
  background: var(--title-profile-surface-ink);
  color: var(--title-profile-surface-color);
}

.profile-snapshot__journey-node--graduation strong {
  padding-block-start: 0.12rem;
  border-block-start: 1px solid currentColor;
  font-size: var(--type-size-overview-snapshot-logo-label);
  font-weight: var(--type-weight-bold);
  line-height: 1;
}


.profile-snapshot__language-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-snapshot__language-list li {
  display: flex;
  min-inline-size: 0;
  padding-inline: clamp(0.48rem, calc(0.68 * var(--site-scale-unit)), 0.7rem);
  border-inline-start: 2px solid var(--profile-snapshot-section-rule);
  align-items: center;
  justify-content: center;
  gap: clamp(0.36rem, calc(0.6 * var(--site-scale-unit)), 0.64rem);
  font-size: var(--type-size-overview-snapshot-copy);
  line-height: 1.42;
}

.profile-snapshot__language-list li:first-child {
  border-inline-start: 0;
}

.profile-snapshot__language-identity {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: clamp(0.34rem, calc(0.5 * var(--site-scale-unit)), 0.52rem);
}

.profile-snapshot__language-flag {
  display: block;
  inline-size: clamp(1.1rem, calc(1.6 * var(--site-scale-unit)), 1.62rem);
  block-size: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0.12rem;
  box-shadow: 0 0 0 1px var(--profile-snapshot-section-rule);
  object-fit: cover;
  flex: 0 0 auto;
}

.profile-snapshot__language-list strong {
  font-weight: var(--type-weight-bold);
}

.profile-snapshot__language-level {
  font-weight: var(--type-weight-semibold);
  white-space: nowrap;
}


.profile-snapshot__stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, calc(0.92 * var(--site-scale-unit)), 0.95rem);
  inline-size: 100%;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-snapshot__stage {
  display: flex;
  min-inline-size: 0;
}

.profile-snapshot__stage-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: clamp(18.75rem, calc(20.5 * var(--site-scale-unit)), 20rem);
  padding: clamp(1rem, calc(1.35 * var(--site-scale-unit)), 1.4rem);
  overflow: hidden;
  border-radius: 0.52rem;
  isolation: isolate;
  background: color-mix(
    in srgb,
    var(--profile-stage-accent, var(--title-profile-surface-color)) 30%,
    var(--title-profile-surface-color)
  );
  color: var(--title-profile-surface-ink);
  text-decoration: none;
  transition:
    box-shadow 180ms var(--site-ease-out),
    transform 180ms var(--site-ease-out);
}

.profile-snapshot__stage-link::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.52), rgb(0 0 0 / 0.8)),
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--profile-stage-accent, var(--title-profile-surface-color)) 32%,
        transparent
      ),
      transparent 68%
    );
  content: "";
  pointer-events: none;
  transition: opacity 180ms var(--site-ease-out);
}

.profile-snapshot__stage-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  gap: clamp(0.7rem, calc(1 * var(--site-scale-unit)), 1.05rem);
  align-content: start;
  align-items: start;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.76);
}

.profile-snapshot__stage-intro {
  display: grid;
  min-inline-size: 0;
  align-content: start;
}

.profile-snapshot__stage-period,
.profile-snapshot__stage-skill {
  min-inline-size: 0;
  font-size: var(--type-size-overview-snapshot-stage);
}

.profile-snapshot__stage-period {
  color: rgb(255 255 255 / 0.72);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.profile-snapshot__stage-title {
  min-inline-size: 0;
  margin-block: clamp(0.25rem, calc(0.4 * var(--site-scale-unit)), 0.42rem);
  overflow-wrap: anywhere;
  font-family: var(--type-family-display);
  font-size: var(--type-size-overview-snapshot-stage-title);
  line-height: 1.12;
}

.profile-snapshot__stage-highlights {
  display: grid;
  inline-size: 85%;
  gap: clamp(0.48rem, calc(0.66 * var(--site-scale-unit)), 0.7rem);
  margin: 0;
  padding-inline-start: 1.1em;
  color: rgb(255 255 255 / 0.9);
  font-size: var(--type-size-overview-snapshot-copy);
  font-weight: var(--type-weight-light);
  hyphens: auto;
  line-height: 1.42;
  overflow-wrap: anywhere;
  text-align: justify;
  text-align-last: start;
}

.profile-snapshot__stage-highlights li::marker {
  color: rgb(255 255 255 / 0.78);
}

.profile-snapshot__stage-media {
  position: absolute;
  z-index: 0;
  inset: -1.4rem;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.profile-snapshot__stage-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: blur(0.1rem) saturate(0.9) brightness(0.66);
  transform: scale(1.1);
  transition:
    filter 240ms var(--site-ease-out),
    transform 240ms var(--site-ease-out);
  user-select: none;
}

.profile-snapshot__stage-media--device .profile-snapshot__stage-image {
  transform: scale(1.38);
}

.profile-snapshot__stage-footer {
  position: relative;
  z-index: 2;
  display: flex;
  grid-row: 2;
  min-inline-size: 0;
  margin-block-start: clamp(0.8rem, calc(1.1 * var(--site-scale-unit)), 1.15rem);
  align-items: flex-end;
  gap: clamp(0.55rem, calc(0.76 * var(--site-scale-unit)), 0.8rem);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.76);
}

.profile-snapshot__stage-skills {
  display: flex;
  min-inline-size: 0;
  gap: 0.32rem;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
  list-style: none;
}

.profile-snapshot__stage-skill {
  padding: 0.34em 0.55em 0.3em;
  border: 1px solid currentColor;
  border-radius: 0.32rem;
  background: rgb(0 0 0 / 0.2);
  color: rgb(255 255 255 / 0.82);
  font-weight: var(--type-weight-medium);
  line-height: 1;
  backdrop-filter: blur(0.18rem);
}

.profile-snapshot__stage-arrow {
  flex: 0 0 auto;
  font-size: var(--type-size-overview-snapshot-title);
  line-height: 1;
}

.profile-snapshot__stage-link:hover {
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.42);
  transform: translateY(-2px);
}

.profile-snapshot__stage-link:hover::before {
  opacity: 0.9;
}

.profile-snapshot__stage-link:hover .profile-snapshot__stage-image {
  filter: blur(0.05rem) saturate(0.96) brightness(0.78);
  transform: scale(1.13);
}

.profile-snapshot__stage-link:hover
  .profile-snapshot__stage-media--device .profile-snapshot__stage-image {
  transform: scale(1.42);
}

.profile-snapshot__stage-link:focus-visible {
  outline: 2px solid var(--title-profile-surface-ink);
  outline-offset: 0.2rem;
}

.profile-snapshot__more {
  display: flex;
  inline-size: 60%;
  min-inline-size: max-content;
  max-inline-size: 100%;
  min-block-size: clamp(1.65rem, calc(2.15 * var(--site-scale-unit)), 2.2rem);
  margin-inline: auto;
  padding-inline: clamp(0.62rem, calc(0.9 * var(--site-scale-unit)), 0.92rem);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, calc(0.76 * var(--site-scale-unit)), 0.8rem);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.72);
  color: var(--profile-snapshot-section-ink);
  font-size: var(--type-size-overview-snapshot-copy);
  font-weight: var(--type-weight-semibold);
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 180ms var(--site-ease-out),
    color 180ms var(--site-ease-out),
    transform 180ms var(--site-ease-out);
}

.profile-snapshot__more:hover {
  background: var(--title-profile-surface-color);
  color: var(--title-profile-surface-ink);
  box-shadow: none;
  transform: translateY(-1px);
}

.profile-snapshot__more-label {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: clamp(0.35rem, calc(0.5 * var(--site-scale-unit)), 0.52rem);
  white-space: nowrap;
}

.profile-snapshot__more-icon {
  flex: 0 0 auto;
  inline-size: clamp(0.9rem, calc(1.15 * var(--site-scale-unit)), 1.16rem);
  block-size: clamp(0.9rem, calc(1.15 * var(--site-scale-unit)), 1.16rem);
  transition: filter 180ms var(--site-ease-out);
}

.profile-snapshot__more:hover .profile-snapshot__more-icon {
  filter: invert(1);
}

.profile-snapshot__more:focus-visible {
  outline: 2px solid var(--title-profile-surface-color);
  outline-offset: 0.2rem;
}


@container profile-snapshot (42rem < width <= 48rem) {
  .profile-snapshot__journey {
    --profile-journey-bubble-height: clamp(
      12rem,
      calc(8.5rem + (5 * var(--type-size-overview-snapshot-copy))),
      13rem
    );
  }
}

@container profile-snapshot (max-width: 42rem) {
  .profile-snapshot__knowledge-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-snapshot__journey {
    --profile-journey-compact-column-gap: clamp(
      0.48rem,
      calc(0.7 * var(--site-scale-unit)),
      0.72rem
    );
    --profile-journey-bubble-height: clamp(
      8.25rem,
      calc(6rem + (2.75 * var(--type-size-overview-snapshot-copy))),
      9.25rem
    );
    --profile-journey-compact-inline-spacing: clamp(
      0.45rem,
      calc(0.65 * var(--site-scale-unit)),
      0.68rem
    );

    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
    padding-block: var(--profile-journey-edge-block-spacing);
    padding-inline: var(--profile-journey-compact-inline-spacing);
    gap: clamp(0.5rem, calc(0.72 * var(--site-scale-unit)), 0.75rem);
  }

  .profile-snapshot__journey::before {
    inset-block: 1.1rem;
    inset-inline:
      calc(
        var(--profile-journey-compact-inline-spacing)
        + (var(--profile-journey-node-size) / 2)
      )
      auto;
    inline-size: 2px;
    block-size: auto;
    transform: none;
  }

  .profile-snapshot__journey-step {
    grid-template-columns:
      var(--profile-journey-node-size)
      minmax(0, 1fr);
    grid-template-rows: auto;
    padding-inline: 0;
    align-items: start;
    gap: var(--profile-journey-compact-column-gap);
  }

  .profile-snapshot__journey-content,
  .profile-snapshot__journey-step:nth-child(even)
    .profile-snapshot__journey-content {
    grid-column: 2;
    grid-row: 1;
    inline-size: 100%;
    block-size: auto;
    min-block-size: var(--profile-journey-bubble-height);
    align-self: center;
  }

  .profile-snapshot__journey-content::before,
  .profile-snapshot__journey-step:nth-child(even)
    .profile-snapshot__journey-content::before {
    inset-block: 50% auto;
    inset-inline: auto 100%;
    inline-size: var(--profile-journey-compact-column-gap);
    block-size: 2px;
    transform: translateY(-50%);
  }

  .profile-snapshot__journey-node {
    grid-column: 1;
    grid-row: 1;
  }

  .profile-snapshot__stages {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-snapshot__stage-link {
    min-block-size: clamp(17rem, calc(19 * var(--site-scale-unit)), 18.5rem);
  }
}

@container profile-snapshot (max-width: 30rem) {
  .profile-snapshot__journey {
    --profile-journey-bubble-height: clamp(
      9.25rem,
      calc(6.5rem + (3.25 * var(--type-size-overview-snapshot-copy))),
      10.5rem
    );
  }

  .profile-snapshot__language-list {
    gap: clamp(0.14rem, calc(0.22 * var(--site-scale-unit)), 0.24rem);
  }

  .profile-snapshot__language-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: start;
    justify-items: center;
    gap: clamp(0.16rem, calc(0.24 * var(--site-scale-unit)), 0.28rem);
    padding-inline: clamp(0.14rem, calc(0.22 * var(--site-scale-unit)), 0.24rem);
    overflow: hidden;
    font-size: var(--type-size-overview-snapshot-stage);
  }

  .profile-snapshot__language-identity {
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.08rem, calc(0.13 * var(--site-scale-unit)), 0.14rem);
  }

  .profile-snapshot__language-flag {
    inline-size: clamp(0.55rem, calc(0.68 * var(--site-scale-unit)), 0.7rem);
    margin-block-start: 0.12em;
  }

  .profile-snapshot__language-identity strong {
    min-inline-size: 0;
    hyphens: auto;
    letter-spacing: -0.04em;
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  .profile-snapshot__stage-link {
    min-block-size: 0;
  }

  .profile-snapshot__stage-highlights {
    inline-size: 100%;
  }
}

@container profile-snapshot (max-width: 22rem) {
  .profile-snapshot__journey {
    --profile-journey-bubble-height: clamp(
      11rem,
      calc(7rem + (5 * var(--type-size-overview-snapshot-copy))),
      12.5rem
    );

    gap: clamp(0.8rem, calc(1 * var(--site-scale-unit)), 1.05rem);
  }

  .profile-snapshot__knowledge-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-snapshot__more {
    inline-size: 100%;
    min-inline-size: 0;
    padding-inline: clamp(0.36rem, calc(0.52 * var(--site-scale-unit)), 0.54rem);
    gap: clamp(0.28rem, calc(0.42 * var(--site-scale-unit)), 0.44rem);
  }

  .profile-snapshot__more-label {
    gap: clamp(0.2rem, calc(0.32 * var(--site-scale-unit)), 0.34rem);
  }
}

@media (max-width: 46rem) {
  .profile-snapshot__heading-icon {
    display: none;
  }

  .profile-snapshot__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.12em;
  }

  .profile-snapshot__title-context {
    display: block;
    font-size: var(--type-size-overview-welcome-subtitle);
    line-height: 1.15;
  }
}

}