.project-card {
  border: 1px solid var(--border);
  background: linear-gradient(130deg, var(--project-grad-a), var(--project-grad-b));
  border-radius: var(--nested-card-radius);
  flex-direction: column;
  padding: var(--nested-card-pad-block) var(--nested-card-pad-inline);
  transition: border-color .2s, transform .22s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.project-card:before {
  content: "";
  pointer-events: none;
  z-index: 0;
  opacity: calc(var(--cursor-active, 0) * .32);
  background: radial-gradient(
    168px circle at
    calc(var(--cursor-x, -9999px) - var(--surface-left, 0px))
    calc(var(--cursor-y, -9999px) - var(--surface-top, 0px)),
    #d6e4f80f 0%,
    #9cb8e008 42%,
    #0000 68%
  );
  -webkit-backdrop-filter: brightness(1.04) contrast(1.025) saturate(1.02);
  backdrop-filter: brightness(1.04) contrast(1.025) saturate(1.02);
  mix-blend-mode: soft-light;
  transition: opacity .34s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.project-card:after {
  content: "";
  pointer-events: none;
  z-index: 0;
  opacity: calc(var(--spot-o, 0) * .52);
  background: radial-gradient(220px circle at var(--spot-x, 50%) var(--spot-y, 50%), #aacdff24 0%, #88b0f414 30%, #5c84d008 48%, #0000 72%);
  mix-blend-mode: soft-light;
  transition: opacity .28s, filter .28s;
  position: absolute;
  inset: -1px;
}

.project-card > * {
  z-index: 1;
  position: relative;
}

@media (pointer: coarse), (max-width: 768px) {
  .project-card:before {
    display: none;
  }
}

.motion-lite .project-card:before,
.performance-mode .project-card:before {
  display: none;
}

.project-card:hover {
  border-color: var(--border-strong);
  transform: translate3d(var(--card-shift-x, 0px), calc(var(--card-shift-y, 0px)  - 1px), 0);
}

/* 3D tilt — Stripe/Vercel-style. Composes the existing parallax shift with a
   pointer-driven rotateX/Y (vars set in Systems.tsx). Higher specificity than
   the base :hover rule, scoped to fine pointers + motion-full so touch/lite keep
   the flat shift. transform-only → composited, no layout cost. */
@media (hover: hover) and (pointer: fine) {
  html.motion-full .project-card-wrap:hover .project-card {
    transform:
      perspective(900px)
      translate3d(var(--card-shift-x, 0px), calc(var(--card-shift-y, 0px) - 1px), 0)
      rotateX(var(--tilt-rx, 0deg))
      rotateY(var(--tilt-ry, 0deg));
  }
}

.project-card-wrap {
  cursor: pointer;
  border-radius: var(--nested-card-radius);
  outline: none;
}

.project-card-wrap:focus-visible .project-card {
  border-color: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .project-card-wrap:focus-visible .project-card {
    border-color: color-mix(in oklab, var(--border-strong) 92%, #a5cdff3d);
  }
}

.project-card-wrap:focus-visible .project-card {
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 0 4px var(--card-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .project-card-wrap:focus-visible .project-card {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--border-strong) 90%, transparent), 0 0 0 4px color-mix(in oklab, var(--card-strong) 78%, #709ce224);
  }
}

.experience-link-preview {
  border: 1px solid var(--border);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview {
    border: 1px solid color-mix(in oklab, var(--border) 92%, #ffffff0a);
  }
}

.experience-link-preview {
  background: linear-gradient(180deg, #ffffff07, #ffffff02), var(--card-strong);
  border-radius: var(--nested-card-radius);
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview {
    background: linear-gradient(180deg, #ffffff07, #ffffff02), color-mix(in oklab, var(--card-strong) 82%, #0c14285c);
  }
}

.experience-link-preview {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: var(--space-3);
  text-decoration: none;
  transition: border-color .22s, transform .22s, box-shadow .24s, background-color .22s;
  box-shadow: inset 0 1px #ffffff06, 0 8px 18px #060c1a1f;
}

.experience-link-preview:hover, .experience-link-preview:focus-visible {
  border-color: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview:hover, .experience-link-preview:focus-visible {
    border-color: color-mix(in oklab, var(--border-strong) 88%, #b6d4ff24);
  }
}

.experience-link-preview:hover, .experience-link-preview:focus-visible {
  background: linear-gradient(180deg, #ffffff09, #ffffff03), var(--card-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview:hover, .experience-link-preview:focus-visible {
    background: linear-gradient(180deg, #ffffff09, #ffffff03), color-mix(in oklab, var(--card-strong) 84%, #0c14286b);
  }
}

.experience-link-preview:hover, .experience-link-preview:focus-visible {
  box-shadow: inset 0 1px 0 #ffffff08, 0 12px 22px #08102229, 0 0 0 1px var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview:hover, .experience-link-preview:focus-visible {
    box-shadow: inset 0 1px 0 #ffffff08, 0 12px 22px #08102229, 0 0 0 1px color-mix(in oklab, var(--border-strong) 42%, transparent);
  }
}

.experience-link-preview:hover, .experience-link-preview:focus-visible {
  transform: translateY(-1px);
}

.experience-link-preview:focus-visible {
  outline: none;
}

.experience-link-preview-main {
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
  gap: .95rem;
  width: 100%;
  min-width: 0;
  display: grid;
}

.experience-link-preview-media {
  background: linear-gradient(160deg, #ffffff0f, #5c8ae405), var(--card);
  border-radius: .85rem;
  min-height: 84px;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview-media {
    background: linear-gradient(160deg, #ffffff0f, #5c8ae405), color-mix(in oklab, var(--card) 82%, #080e1cb3);
  }
}

.experience-link-preview-media {
  border: 1px solid var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview-media {
    border: 1px solid color-mix(in oklab, var(--border) 70%, #ffffff08);
  }
}

.experience-link-preview-media {
  box-shadow: inset 0 1px #ffffff06, 0 6px 14px #0910221a;
}

.experience-link-preview-media::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 18, 0.02), rgba(7, 11, 18, 0.14)),
    linear-gradient(135deg, rgba(224, 232, 245, 0.07), transparent 42%);
  opacity: 1;
}

.experience-link-preview-image {
  object-fit: cover;
  filter: saturate(0.9) brightness(0.92) contrast(1.03);
  transition: transform .26s, filter .26s, opacity .26s;
}

.experience-link-preview[data-preview-theme="monochrome"] .experience-link-preview-media {
  background:
    radial-gradient(circle at 24% 18%, rgba(164, 196, 255, 0.14), transparent 42%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(104, 132, 173, 0.07)),
    #0f1728;
  border-color: color-mix(in oklab, var(--border) 68%, rgba(213, 225, 246, 0.08));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 10px 22px rgba(8, 13, 24, 0.18);
}

.experience-link-preview[data-preview-theme="monochrome"] .experience-link-preview-media::after {
  background:
    linear-gradient(180deg, rgba(5, 9, 16, 0.08), rgba(5, 9, 16, 0.32)),
    linear-gradient(135deg, rgba(222, 230, 243, 0.12), transparent 38%),
    linear-gradient(90deg, rgba(8, 12, 20, 0.18), transparent 46%);
}

.experience-link-preview[data-preview-theme="monochrome"] .experience-link-preview-image {
  filter: grayscale(0.54) saturate(0.72) brightness(0.88) contrast(1.06);
}

.experience-link-preview-placeholder {
  width: 100%;
  height: 100%;
  color: var(--text);
  justify-content: center;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview-placeholder {
    color: color-mix(in oklab, var(--text) 70%, #a4c6ff7a);
  }
}

.experience-link-preview-placeholder {
  background: radial-gradient(circle at 30% 24%, #aacdff1a, #0000 48%), linear-gradient(155deg, #ffffff0f, #628ada05);
}

.experience-link-preview-body {
  flex-direction: column;
  gap: .3rem;
  width: 100%;
  min-width: 0;
  display: flex;
}

.experience-link-preview-copy {
  flex: 1 1 auto;
  flex-direction: column;
  gap: .22rem;
  width: 100%;
  min-width: 0;
  display: flex;
}

.experience-link-preview-site {
  display: block;
  width: 100%;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-width: 0;
  color: var(--muted-2);
  font-size: .66rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview-site {
    color: color-mix(in oklab, var(--muted-2) 86%, #dce9ff29);
  }
}

.experience-link-preview-title {
  width: 100%;
  min-width: 0;
  margin: 0;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--text);
  -webkit-box-orient: vertical;
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.28;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview-title {
    color: color-mix(in oklab, var(--text) 97%, white 3%);
  }
}

.experience-link-preview-description {
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@supports (color: color-mix(in lab, red, red)) {
  .experience-link-preview-description {
    color: color-mix(in oklab, var(--muted) 84%, #d2e0ff75);
  }
}

.experience-link-preview-action {
  color: #ffffffe0;
  background: linear-gradient(#ffffff14, #ffffff05), #141a28b8;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.2rem;
  height: 2.2rem;
  transition: transform .22s, border-color .22s, background-color .22s, color .22s;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffff0d, 0 8px 18px #00000038;
}

.experience-link-preview-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform .22s, color .22s, opacity .22s;
  display: block;
  transform: translateX(-.5px);
}

.experience-link-preview-action-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
}

.experience-link-preview-action-inline {
  display: none;
}

.experience-link-preview:hover .experience-link-preview-action, .experience-link-preview:focus-visible .experience-link-preview-action {
  color: #fffffffa;
  border-color: #ffffff1f;
}

.experience-link-preview:hover .experience-link-preview-action-overlay, .experience-link-preview:focus-visible .experience-link-preview-action-overlay {
  transform: none;
}

.experience-link-preview:hover .experience-link-preview-arrow, .experience-link-preview:focus-visible .experience-link-preview-arrow {
  transform: translateX(-.5px);
}

.experience-link-preview:hover .experience-link-preview-image, .experience-link-preview:focus-visible .experience-link-preview-image {
  filter: saturate(1.02) brightness(0.96) contrast(1.04);
  transform: scale(1.035);
}

.experience-link-preview[data-preview-theme="monochrome"]:hover .experience-link-preview-image,
.experience-link-preview[data-preview-theme="monochrome"]:focus-visible .experience-link-preview-image {
  filter: grayscale(0.38) saturate(0.9) brightness(0.92) contrast(1.06);
}


.project-badges {
  flex-wrap: wrap;
  gap: .4rem;
  display: flex;
}

.project-badges-corner {
  justify-content: flex-end;
  margin-top: auto;
  padding-top: .8rem;
}

.project-badge {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  align-items: center;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .project-badge {
    border: 1px solid color-mix(in oklab, var(--border-strong) 78%, transparent);
  }
}

.project-badge {
  background: var(--card-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .project-badge {
    background: color-mix(in oklab, var(--card-strong) 72%, #5c7ebd33);
  }
}

.project-badge {
  letter-spacing: .01em;
  color: var(--text);
  padding: .22rem .62rem;
  font-size: .68rem;
  font-weight: 600;
}

@supports (color: color-mix(in lab, red, red)) {
  .project-badge {
    color: color-mix(in oklab, var(--text) 90%, #b2cdffb3);
  }
}

.project-badge {
  line-height: 1.2;
}

.project-badge-highload {
  isolation: isolate;
  border-color: #ff8c3c40;
  transition: border-color .24s, box-shadow .24s;
  overflow: visible;
  box-shadow: 0 0 0 1px #ff782814, 0 4px 18px #ff78280f;
}

.project-badge-highload:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-composite: xor;
  filter: blur(6px);
  opacity: 0;
  background: conic-gradient(from 180deg, #ff8c3c00, #ff8c3c47, #ff8c3c00);
  padding: 1px;
  transition: opacity .22s;
  position: absolute;
  inset: -2px;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.project-badge-highload:hover:after {
  opacity: 1;
  filter: blur(6px) brightness(1.07);
}

.project-badge-highload:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(115deg, #0000 0%, #ffa0501a 45%, #0000 60%);
  transition: opacity .22s;
  position: absolute;
  inset: 0;
}

.project-badge-highload:hover:before {
  opacity: 1;
  animation: .9s ease-out badge-shimmer;
}

.project-badge-heat-icon {
  opacity: .55;
  filter: grayscale() saturate(.06) brightness(1.04);
  width: .72rem;
  height: .72rem;
  color: var(--text);
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: .28rem;
  transition: opacity .22s, filter .22s;
  display: inline-flex;
  overflow: hidden;
  transform: translateY(.3px);
}

@supports (color: color-mix(in lab, red, red)) {
  .project-badge-heat-icon {
    color: color-mix(in oklab, var(--text) 76%, #ffaa7857);
  }
}

.project-badge-heat-icon {
  animation: 2.8s ease-in-out infinite heat-breathe;
}

.project-badge-heat-icon-svg {
  width: .62rem;
  height: .62rem;
  display: block;
}

.project-badge-heat-icon-lottie {
  transform-origin: center;
  flex: none;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  transform: scale(1.08);
}

.project-badge-heat-icon-lottie > div, .project-badge-heat-icon-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.project-badge-highload:hover .project-badge-heat-icon {
  opacity: .7;
  filter: grayscale(.4) saturate(.46) brightness(1.08) drop-shadow(0 0 8px #ff8c3c40);
  animation: 1.2s ease-out heat-icon-shimmer;
}

.project-badge-highload:hover {
  border-color: #ff8c3c57;
  box-shadow: 0 0 0 1px #ff8c3c2e, 0 6px 24px #ff78281f;
}


.education-card {
  border: 1px solid var(--border);
  background: linear-gradient(140deg, var(--project-grad-a), var(--project-grad-b));
  border-radius: var(--nested-card-radius);
  padding: var(--nested-card-pad-block) var(--nested-card-pad-inline);
  box-shadow: 0 14px 36px #0003;
}



.education-layout {
  align-items: start;
  gap: 1rem;
  display: grid;
}



.education-emblem {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 96px;
  display: flex;
  position: relative;
}

.education-emblem-placeholder {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-size: .7rem;
}

.education-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-size: .74rem;
}

.education-value {
  color: var(--text);
  margin-top: .35rem;
  line-height: 1.45;
}

.systems-decisions-subtitle {
  max-width: 44rem;
  margin-top: .45rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.58;
}

@supports (color: color-mix(in lab, red, red)) {
  .systems-decisions-subtitle {
    color: color-mix(in oklab, var(--muted) 88%, transparent);
  }
}

.systems-decisions-grid,
.principles-grid,
.engineering-library-grid {
  display: grid;
  gap: var(--nested-card-gap);
  margin-top: var(--card-gap);
}

.systems-decisions-grid,
.principles-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.engineering-library-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .systems-decisions-grid,
  .principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .engineering-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1240px) {
  .engineering-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.premium-grid-card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff08, #ffffff02), var(--card-strong);
  border-radius: var(--nested-card-radius);
}


@supports (color: color-mix(in lab, red, red)) {
  .premium-grid-card {
    background: linear-gradient(180deg, #ffffff08, #ffffff02), color-mix(in oklab, var(--card-strong) 82%, #0c14285c);
    border-color: color-mix(in oklab, var(--border) 92%, #ffffff0a);
  }
}

.premium-grid-card {
  padding: var(--nested-card-pad-block) var(--nested-card-pad-inline);
  transition: border-color .22s, transform .22s, box-shadow .24s, background-color .22s;
  box-shadow: inset 0 1px 0 #ffffff08, 0 10px 24px #0810221f;
  position: relative;
  overflow: hidden;
}

.premium-grid-card:before {
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, #aacdff16 0%, #aacdff08 35%, #aacdff03 60%, #aacdff12 100%);
  border-radius: inherit;
  transition: opacity .24s;
  position: absolute;
  inset: 0;
}

.premium-grid-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #ffffff08, 0 14px 28px #08102229, 0 0 0 1px var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .premium-grid-card:hover {
    border-color: color-mix(in oklab, var(--border-strong) 88%, #b6d4ff24);
    box-shadow: inset 0 1px 0 #ffffff08, 0 14px 28px #08102229, 0 0 0 1px color-mix(in oklab, var(--border-strong) 42%, transparent);
  }
}

.premium-grid-card:hover:before {
  opacity: .55;
}

html.light .premium-grid-card {
  background: linear-gradient(180deg, #ffffffd9, #fffffff0);
  box-shadow: inset 0 1px 0 #ffffffd9, 0 10px 24px #879ab519;
}

html.light .premium-grid-card:before {
  background: linear-gradient(135deg, #6e93d61a 0%, #6e93d608 35%, #6e93d603 60%, #6e93d612 100%);
}

.decision-card,
.library-card {
  min-height: 12.4rem;
}

.decision-card-index,
.principle-card-index {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  opacity: .7;
  font-size: .68rem;
  font-weight: 600;
}

.decision-card-title,
.principle-card-title,
.library-card-title {
  color: var(--text);
  margin-top: .62rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.34;
}

@supports (color: color-mix(in lab, red, red)) {
  .decision-card-title,
  .principle-card-title,
  .library-card-title {
    color: color-mix(in oklab, var(--text) 96%, white 4%);
  }
}

.decision-card-body,
.principle-card-body,
.library-card-body {
  color: var(--muted);
  margin-top: .42rem;
  font-size: .83rem;
  line-height: 1.56;
}

@supports (color: color-mix(in lab, red, red)) {
  .decision-card-body,
  .principle-card-body,
  .library-card-body {
    color: color-mix(in oklab, var(--muted) 84%, #d2e0ff75);
  }
}

.decision-card-tags {
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
  display: flex;
}

.decision-card-tags .chip {
  padding: .28rem .68rem;
  font-size: .74rem;
}

.principle-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--nested-card-pad-block) var(--nested-card-pad-inline);
}

.principle-card-copy {
  min-width: 0;
}

.principle-card-title {
  margin-top: 0;
  font-size: 1.02rem;
  line-height: 1.32;
}

.principle-card-body {
  max-width: 30rem;
  font-size: .86rem;
  line-height: 1.62;
}

@media (max-width: 767px) {
  .principles-grid {
    gap: .82rem;
    margin-top: 1.12rem;
  }

  .principle-card {
    gap: .82rem;
    padding: .98rem;
  }

  .principle-card-title {
    font-size: .98rem;
  }

  .principle-card-body {
    font-size: .84rem;
    line-height: 1.56;
  }
}

.library-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.library-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.library-card-author {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  opacity: .82;
  font-size: .66rem;
  font-weight: 600;
}

.library-card-badge {
  padding: .18rem .56rem;
  font-size: .6rem;
  font-weight: 600;
}

.library-card-badge-core {
  border-color: #8fb7ff42;
}

.library-card-badge-recommended {
  border-color: #d7c29a42;
}

html.light .library-card-badge-core {
  border-color: #7d9ed442;
}

html.light .library-card-badge-recommended {
  border-color: #c4a67142;
}

.chip {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip {
    background: color-mix(in oklab, var(--card) 70%, transparent);
  }
}

.chip {
  color: var(--text);
  padding: .35rem .875rem;
  font-size: .85rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .chip {
    color: color-mix(in oklab, var(--text) 78%, transparent);
  }
}

.chip {
  transition: border-color .18s, background-color .18s;
}

.chip-primary {
  border-color: var(--border-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-primary {
    border-color: color-mix(in oklab, var(--border-strong) 85%, #5096d259);
  }
}

.chip-primary {
  background: var(--card-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-primary {
    background: color-mix(in oklab, var(--card-strong) 75%, #5a96d233);
  }
}

.chip-primary {
  color: var(--text);
}

@supports (color: color-mix(in lab, red, red)) {
  .chip-primary {
    color: color-mix(in oklab, var(--text) 86%, #5a96d2bf);
  }
}

.chip:hover {
  border-color: var(--border-strong);
  background: var(--card-strong);
}

@supports (color: color-mix(in lab, red, red)) {
  .chip:hover {
    background: color-mix(in oklab, var(--card-strong) 75%, transparent);
  }
}

.chip-primary:hover {
  background: #5693cf29;
  border-color: #a8d5ff57;
}

.outside-tags {
  flex-wrap: wrap;
  gap: .38rem;
  margin-top: .5rem;
  display: flex;
}

.outside-title {
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  font-size: .62rem;
  font-weight: 500;
  font-feature-settings: "ss01", "ss02", "calt", "liga";
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  opacity: .7;
}

.outside-title::before {
  content: "";
  width: .9rem;
  height: 1px;
  background: linear-gradient(90deg, #ffffff00, #ffffff66 60%, #ffffff00);
  display: inline-block;
}

@supports (color: color-mix(in lab, red, red)) {
  .outside-title {
    color: color-mix(in oklab, var(--text) 68%, transparent);
    opacity: 1;
  }

  .outside-title::before {
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 42%, transparent) 60%, transparent);
  }
}

html.light .outside-title::before {
  background: linear-gradient(90deg, transparent, #1515184d 60%, transparent);
}

.outside-tag {
  letter-spacing: .005em;
  color: var(--text);
  background: #ffffff0b;
  border: 1px solid #ffffff1c;
  border-radius: 999px;
  align-items: center;
  padding: .2rem .58rem;
  font-size: .68rem;
  font-weight: 450;
  font-feature-settings: "ss01", "calt", "liga";
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .outside-tag {
    color: color-mix(in oklab, var(--text) 74%, transparent);
  }
}

.outside-tag {
  transition: border-color .22s, background-color .22s, color .22s;
}

.outside-tag-premium {
  --outside-anim-size: 1.18rem;
  --outside-anim-opacity: .2;
  --outside-anim-hover-opacity: .3;
  --outside-anim-shift: -.12rem;
  isolation: isolate;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(#ffffff0d, #ffffff07), #ffffff08;
  flex: none;
  width: fit-content;
  max-width: 100%;
  min-height: 1.6rem;
  padding: .28rem .68rem .28rem .88rem;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff0b;
}

.outside-tag-aura {
  z-index: 0;
  opacity: .6;
  background: radial-gradient(18px 18px at 18px, #9abdff1f, #0000 72%), linear-gradient(90deg, #92b8ff0f, #0000 36%);
  transition: opacity .22s;
  position: absolute;
  inset: 0;
}

.outside-tag-decor {
  z-index: 1;
  width: var(--outside-anim-size);
  height: var(--outside-anim-size);
  opacity: var(--outside-anim-opacity);
  filter: saturate(.82) blur(.1px);
  pointer-events: none;
  transition: opacity .24s, transform .24s, filter .24s;
  position: absolute;
  top: 50%;
  left: .38rem;
  transform: translateY(-50%);
}

.outside-tag-lottie, .outside-tag-fallback {
  width: 100%;
  height: 100%;
  display: block;
}

.outside-tag-lottie > div, .outside-tag-lottie svg {
  width: 100% !important;
  height: 100% !important;
}

.outside-tag-fallback {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.outside-tag-fallback-svg {
  fill: none;
  width: 100%;
  height: 100%;
  stroke: var(--text);
}

@supports (color: color-mix(in lab, red, red)) {
  .outside-tag-fallback-svg {
    stroke: color-mix(in oklab, var(--text) 68%, #96b9f5bf);
  }
}

.outside-tag-fallback-svg {
  stroke-width: 1.45px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outside-tag-fallback-spin {
  transform-origin: center;
  animation: 10s linear infinite outside-tag-vinyl-spin;
}

.outside-tag-fallback-pulse {
  transform-origin: center;
  animation: 4.8s ease-in-out infinite outside-tag-glyph-pulse;
}

.outside-tag-label {
  z-index: 2;
  padding-left: 1rem;
  position: relative;
}

html.light .outside-tag {
  color: #151518b3;
  background: #00000006;
  border-color: #00000017;
}

html.light .outside-tag-premium {
  background: linear-gradient(#ffffffe6, #f7f4efdb), #ffffffbd;
  box-shadow: inset 0 1px #ffffff59;
}

html.light .outside-tag-aura {
  background: radial-gradient(18px 18px at 18px, #688ccd1c, #0000 74%), linear-gradient(90deg, #688ccd0d, #0000 36%);
}

.outside-tag:hover {
  color: var(--text);
  background: #ffffff0f;
  border-color: #ffffff29;
}

@supports (color: color-mix(in lab, red, red)) {
  .outside-tag:hover {
    color: color-mix(in oklab, var(--text) 78%, transparent);
  }
}

.outside-tag-premium:hover {
  background: linear-gradient(#ffffff10, #ffffff09), #ffffff0a;
  border-color: #c2d6ff38;
}

.outside-tag-premium:hover .outside-tag-aura {
  opacity: .82;
}

.outside-tag-premium:hover .outside-tag-decor {
  opacity: var(--outside-anim-hover-opacity);
  transform: translateY(-50%) scale(1.04) translateX(var(--outside-anim-shift));
  filter: saturate(.96) blur(.4px);
}

html.light .outside-tag:hover {
  color: #151518cc;
  background: #0000000a;
  border-color: #0000001f;
}


.contact-layout {
  gap: 1.5rem;
  display: grid;
  position: relative;
}

.contact-primary {
  min-width: 0;
}

/* ───────────────────────────────────────────────────────────────── */
/*  Contact — cheeky handwritten subtitle under the section title.     */
/*  A confident hand-written aside: calm lead line, bolder punch line. */
/*  Uses the Caveat accent font (var(--font-handwrite)).               */
/*  Scoped under .contact-primary so it outranks the generic           */
/*  `.section-title + p` lead/tagline rule (specificity 0,1,1), which  */
/*  would otherwise force the body font, muted color, loose            */
/*  line-height and a `wght 440` variation onto this element.          */
/* ───────────────────────────────────────────────────────────────── */
.contact-primary .contact-subtitle {
  margin: clamp(1rem, 1.5vw, 1.4rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .04em;
  width: fit-content;
  max-width: min(100%, 24rem);
  font-family: var(--font-handwrite);
  font-weight: 600;
  font-variation-settings: normal;
  line-height: 1.04;
  letter-spacing: .004em;
  color: #cfe0fbe6;
  text-shadow: 0 0 6px rgba(150, 188, 255, .18), 0 0 18px rgba(112, 152, 224, .14);
  transform: rotate(-1.35deg);
  transform-origin: left center;
  -webkit-font-smoothing: antialiased;
}

@supports (color: color-mix(in lab, red, red)) {
  .contact-primary .contact-subtitle {
    color: color-mix(in oklab, var(--pastel-blue-star-a) 86%, #ffffff3d);
    text-shadow:
      0 0 6px color-mix(in oklab, var(--pastel-blue-star-a) 26%, transparent),
      0 0 18px color-mix(in oklab, var(--pastel-blue-star-b) 20%, transparent),
      -.3px .22px 0 color-mix(in oklab, var(--pastel-blue-star-b) 18%, transparent);
  }
}

.contact-primary .contact-subtitle-line {
  display: block;
}

.contact-primary .contact-subtitle-lead {
  font-size: clamp(1.06rem, .5vw + .95rem, 1.3rem);
  font-weight: 500;
  letter-spacing: .006em;
  opacity: .8;
}

.contact-primary .contact-subtitle-punch {
  margin-top: .02em;
  margin-left: .42em;
  font-size: clamp(1.3rem, 1.05vw + 1.04rem, 1.7rem);
  font-weight: 700;
  color: #e7effbf2;
}

@supports (color: color-mix(in lab, red, red)) {
  .contact-primary .contact-subtitle-punch {
    color: color-mix(in oklab, var(--pastel-blue-star-a) 95%, #ffffff6b);
  }
}

html.light .contact-primary .contact-subtitle {
  color: #4c5f80;
  text-shadow: none;
}

html.light .contact-primary .contact-subtitle-punch {
  color: #37496a;
}

html:lang(ru) .contact-primary .contact-subtitle {
  max-width: min(100%, 26rem);
}

@media (max-width: 480px) {
  .contact-primary .contact-subtitle {
    transform: rotate(-1deg);
  }

  .contact-primary .contact-subtitle-punch {
    margin-left: .28em;
  }
}

.contact-intro-cta {
  flex-direction: column;
  gap: .42rem;
  width: min(100%, 26rem);
  display: inline-flex;
}



.contact-book-intro-caption {
  text-align: left;
}

.contact-resume-row {
  width: fit-content;
  display: flex;
}

.contact-line {
  align-items: center;
  gap: .62rem;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  position: relative;
}


.availability-console {
  border: 1px solid var(--border-strong);
  width: min(100%, 29.75rem);
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .availability-console {
    border: 1px solid color-mix(in oklab, var(--border-strong) 72%, #91bcff1f);
  }
}

.availability-console {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: radial-gradient(300px at 100% 0, #6fa4f514, #0000 64%), linear-gradient(#121c3494, #080d1ca8);
  border-radius: .9rem;
  padding: .9rem 1.15rem .9rem .95rem;
  box-shadow: 0 14px 38px #0000002e, inset 0 1px #ffffff0e;
}

.availability-console:before {
  content: "";
  pointer-events: none;
  opacity: .07;
  background-image: linear-gradient(to right, #bed6ff33 1px, #0000 1px), linear-gradient(#bed6ff33 1px, #0000 1px);
  background-size: 34px 34px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000, #0000 86%);
  mask-image: linear-gradient(90deg, #000, #0000 86%);
}

.availability-console > * {
  z-index: 1;
  position: relative;
}

.availability-console-header {
  gap: .34rem;
  margin-bottom: .9rem;
  display: grid;
}

.availability-console-title {
  color: var(--text);
}

@supports (color: color-mix(in lab, red, red)) {
  .availability-console-title {
    color: color-mix(in oklab, var(--text) 90%, #96beff38);
  }
}

.availability-console-title {
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.25;
}

.availability-console-status {
  width: fit-content;
  color: var(--muted);
  align-items: center;
  gap: .46rem;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .availability-console-status {
    color: color-mix(in oklab, var(--muted) 86%, transparent);
  }
}

.availability-console-status {
  font-size: .78rem;
  line-height: 1.3;
}

.availability-console-specialization {
  max-width: 26rem;
  color: var(--text);
  display: block;
}

@supports (color: color-mix(in lab, red, red)) {
  .availability-console-specialization {
    color: color-mix(in oklab, var(--text) 82%, #96beff2e);
  }
}

.availability-console-specialization {
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.35;
}

.availability-console-pulse {
  background: #5dd58bf2;
  border-radius: 999px;
  flex: none;
  width: .48rem;
  height: .48rem;
  box-shadow: 0 0 0 1px #5dd58b38, 0 0 14px #5dd58b61;
}

.availability-console-list {
  gap: .5rem;
  margin: 0;
  display: grid;
}

.availability-console-list div {
  grid-template-columns: minmax(7rem, .36fr) minmax(0, 1fr);
  align-items: baseline;
  gap: .9rem;
  min-height: 1.25rem;
  display: grid;
}

.availability-console-list dt, .availability-console-list dd {
  margin: 0;
  font-size: .78rem;
  line-height: 1.35;
}

.availability-console-list dt {
  color: var(--muted-2);
}

@supports (color: color-mix(in lab, red, red)) {
  .availability-console-list dt {
    color: color-mix(in oklab, var(--muted-2) 92%, transparent);
  }
}

.availability-console-list dd {
  color: var(--text);
}

@supports (color: color-mix(in lab, red, red)) {
  .availability-console-list dd {
    color: color-mix(in oklab, var(--text) 86%, transparent);
  }
}

.availability-format-value {
  white-space: nowrap;
  flex-wrap: nowrap;
  align-items: center;
  gap: .22rem;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
}

.availability-format-separator {
  color: var(--muted-2);
  margin-inline: .04rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .availability-format-separator {
    color: color-mix(in oklab, var(--muted-2) 84%, transparent);
  }
}


.linkedin-card-wrap {
  align-self: start;
  padding-top: 3.55rem;
  position: relative;
}

.linkedin-card-wrap-compact {
  padding-top: 2.25rem;
}

.linkedin-hand-note {
  z-index: 8;
  pointer-events: none;
  width: min(18.5rem, 100% - 2rem);
  color: color-mix(in oklab, var(--pastel-blue-star-a) 72%, rgba(228, 236, 249, 0.42));
  display: grid;
  position: absolute;
  top: .18rem;
  left: clamp(1.1rem, 6vw, 3.1rem);
  opacity: .82;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-hand-note {
    color: color-mix(in oklab, var(--pastel-blue-star-a) 92%, #ffffff38);
  }
}

.linkedin-hand-note {
  letter-spacing: 0;
  text-shadow: 0 0 3px rgba(163, 189, 231, 0.14), 0 0 10px rgba(115, 151, 209, 0.12), -.18px .16px 0 rgba(128, 158, 214, 0.18);
  font-family: Bradley Hand, Apple Chancery, Segoe Print, Comic Sans MS, cursive;
  font-size: clamp(1rem, 1.9vw, 1.22rem);
  font-weight: 400;
  line-height: 1.02;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-hand-note {
    text-shadow: 0 0 5px color-mix(in oklab, var(--pastel-blue-star-a) 30%, transparent), 0 0 16px color-mix(in oklab, var(--pastel-blue-star-b) 28%, transparent), -.25px .2px 0 color-mix(in oklab, var(--pastel-blue-star-b) 22%, transparent);
  }
}

.linkedin-hand-note {
  transform: rotate(-2.2deg);
}

.linkedin-hand-note span {
  width: fit-content;
  max-width: 100%;
  transform: translateY(0);
}

.linkedin-card {
  --linkedin-body-surface: #111a30;
  --linkedin-avatar-ring: #111a30;
  --linkedin-cover-join: .72rem;
  --linkedin-hover-blue: #589cff47;
  --linkedin-hover-cyan: #5cdaff29;
  border: 1px solid var(--border-strong);
  align-self: start;
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff0e, #ffffff05), var(--card-strong);
  border-radius: .85rem;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color .22s, background-color .22s, box-shadow .22s, transform .22s;
  box-shadow: inset 0 1px #ffffff0e, 0 18px 48px #0003;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-card {
    border: 1px solid color-mix(in oklab, var(--border-strong) 74%, transparent);
    background: linear-gradient(180deg, #ffffff0e, #ffffff05), color-mix(in oklab, var(--card-strong) 58%, #162e4e2e);
  }
}

.linkedin-card:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(320px circle at 92% 0%, var(--linkedin-hover-blue), transparent 68%), radial-gradient(220px circle at 10% 20%, var(--linkedin-hover-cyan), transparent 70%);
  opacity: .34;
  transition: opacity .24s, transform .26s;
  position: absolute;
  inset: 0;
  transform: scale(.98);
}

.linkedin-card:after {
  content: "";
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(10px);
  background: linear-gradient(90deg, #0000 0%, #badeff08 38%, #dcf1ff2e 50%, #87c6ff0f 62%, #0000 100%);
  transition: opacity .24s, transform .62s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: -45% -55%;
  transform: translateX(-28%)rotate(12deg);
}

.linkedin-card > * {
  z-index: 3;
  position: relative;
}

.linkedin-card:hover, .linkedin-card:focus-visible {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, #ffffff15, #ffffff07), var(--card-strong);
  transform: translateY(-2px);
  box-shadow: inset 0 1px #ffffff1a, inset 0 -1px #8ec2ff0e, 0 30px 78px #0000005c, 0 0 46px #5498f52e, 0 0 0 1px #c8e2ff09;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-card:hover, .linkedin-card:focus-visible {
    border-color: color-mix(in oklab, var(--border-strong) 100%, #7abeff80);
    background: linear-gradient(180deg, #ffffff15, #ffffff07), color-mix(in oklab, var(--card-strong) 54%, #3062aa42);
  }
}

.linkedin-card:hover:before, .linkedin-card:focus-visible:before {
  opacity: 1;
  transform: scale(1.04);
}

.linkedin-card:hover:after, .linkedin-card:focus-visible:after {
  opacity: 1;
  transform: translateX(24%)rotate(12deg);
}

.linkedin-cover-wrap {
  z-index: 2;
  border-radius: .85rem .85rem 0 0;
  height: 5.5rem;
  position: relative;
}

.linkedin-cover-wrap:after {
  content: "";
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--linkedin-cover-join));
  height: calc(var(--linkedin-cover-join)  + .78rem);
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--linkedin-body-surface) 34%, var(--linkedin-body-surface) 78%, var(--linkedin-body-surface) 100%);
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-cover-wrap:after {
    background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--linkedin-body-surface) 44%, transparent) 34%, var(--linkedin-body-surface) 78%, var(--linkedin-body-surface) 100%);
  }
}

.linkedin-cover {
  object-fit: cover;
  object-position: center;
  filter: saturate(.58) brightness(.62) contrast(1.04) blur(.35px);
  border-radius: .85rem .85rem 0 0;
  transition: filter .32s, transform .38s cubic-bezier(.22, 1, .36, 1);
  transform: scale(1.02);
}

.linkedin-cover-overlay {
  z-index: 1;
  inset: 0 0 calc(-1 * var(--linkedin-cover-join));
  background: linear-gradient(180deg, #070c183d 0%, #122a495c 62%, var(--linkedin-body-surface) 100%), linear-gradient(135deg, #66a6ff38, #3cd0ff0f 48%, transparent 68%);
  border-radius: .85rem .85rem 0 0;
  transition: background .26s;
  position: absolute;
}

.linkedin-card:hover .linkedin-cover, .linkedin-card:focus-visible .linkedin-cover {
  filter: saturate(1.06) brightness(.9) contrast(1.08) blur(.4px);
  transform: scale(1.055);
}

.linkedin-card:hover .linkedin-cover-overlay, .linkedin-card:focus-visible .linkedin-cover-overlay {
  background: linear-gradient(180deg, #060b180f 0%, #214a7a38 62%, var(--linkedin-body-surface) 100%), linear-gradient(135deg, #70b4ff52, #52dcff21 46%, transparent 70%);
}

.linkedin-eyebrow {
  z-index: 3;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  letter-spacing: .02em;
  color: var(--muted);
  background: #0b13256b;
  border-radius: 999px;
  align-items: center;
  gap: .42rem;
  padding: .36rem .5rem;
  font-size: .72rem;
  display: inline-flex;
  position: absolute;
  top: .75rem;
  left: .75rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-eyebrow {
    color: color-mix(in oklab, var(--muted) 86%, transparent);
  }
}

.linkedin-eyebrow {
  transition: background-color .18s, color .18s, transform .18s;
}

/* The badge shares the .section-eyebrow class, so the global RU override
   (html:lang(ru) .section-eyebrow { letter-spacing: 0.18em }) wins on
   specificity and blows the Latin "LINKEDIN" wordmark apart. Pin the badge
   back to its tight tracking so RU matches the EN rendering. */
html:lang(ru) .linkedin-eyebrow,
html[lang="ru"] .linkedin-eyebrow {
  letter-spacing: .02em;
}

.linkedin-card:hover .linkedin-eyebrow, .linkedin-card:focus-visible .linkedin-eyebrow {
  color: var(--text);
  background: #0b183094;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-card:hover .linkedin-eyebrow, .linkedin-card:focus-visible .linkedin-eyebrow {
    color: color-mix(in oklab, var(--text) 90%, #b2d7ffb8);
  }
}

.linkedin-card:hover .linkedin-eyebrow, .linkedin-card:focus-visible .linkedin-eyebrow {
  transform: translateY(-1px);
}

.linkedin-mark {
  width: 1.12rem;
  height: 1.12rem;
  color: var(--text);
  background: #5484c533;
  border-radius: .22rem;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-mark {
    color: color-mix(in oklab, var(--text) 88%, #568ed8cc);
  }
}

.linkedin-mark {
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color .18s, color .18s, box-shadow .18s;
}

.linkedin-card:hover .linkedin-mark, .linkedin-card:focus-visible .linkedin-mark {
  color: #ecf7fffa;
  background: #4c97f56b;
  box-shadow: 0 0 18px #4e9ef840;
}

.linkedin-body {
  z-index: 1;
  margin-top: calc(-1 * var(--linkedin-cover-join));
  padding: calc(1rem + var(--linkedin-cover-join)) 1rem 1rem;
  background: var(--linkedin-body-surface);
  position: relative;
}

.linkedin-avatar-shell {
  z-index: 8;
  border: .16rem solid var(--linkedin-avatar-ring);
  background: var(--linkedin-avatar-ring);
  isolation: isolate;
  border-radius: 999px;
  width: 4.25rem;
  height: 4.25rem;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  position: absolute;
  bottom: 0;
  left: 1rem;
  overflow: hidden;
  transform: translateY(50%);
  box-shadow: 0 10px 24px #0000002e;
}

.linkedin-card:hover .linkedin-avatar-shell, .linkedin-card:focus-visible .linkedin-avatar-shell {
  border-color: var(--linkedin-avatar-ring);
  transform: translateY(48%)scale(1.035);
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-card:hover .linkedin-avatar-shell, .linkedin-card:focus-visible .linkedin-avatar-shell {
    border-color: color-mix(in oklab, var(--linkedin-avatar-ring) 78%, #9dcfffb8);
  }
}

.linkedin-card:hover .linkedin-avatar-shell, .linkedin-card:focus-visible .linkedin-avatar-shell {
  box-shadow: 0 14px 30px #00000047, 0 0 0 1px #c8e2ff24, 0 0 24px #61a9ff3d;
}

.linkedin-avatar {
  z-index: 1;
  object-fit: cover;
  filter: grayscale(.32) saturate(.78) contrast(1.04) brightness(.86);
  border-radius: 999px;
  width: 100%;
  height: 100%;
  transition: filter .26s, transform .26s;
  display: block;
  position: relative;
}

.linkedin-card:hover .linkedin-avatar, .linkedin-card:focus-visible .linkedin-avatar {
  filter: grayscale(.04) saturate(1.08) contrast(1.08) brightness(.96);
  transform: scale(1.025);
}

.linkedin-body > .min-w-0 {
  min-height: 4.25rem;
  padding-left: 5.15rem;
}

.linkedin-name {
  color: var(--text);
  margin: 0;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;
}

.linkedin-role, .linkedin-company, .linkedin-summary, .linkedin-status {
  color: var(--muted);
  margin: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-role, .linkedin-company, .linkedin-summary, .linkedin-status {
    color: color-mix(in oklab, var(--muted) 90%, transparent);
  }
}

.linkedin-role {
  margin-top: .28rem;
  font-size: .75rem;
  line-height: 1.35;
}

.linkedin-company {
  color: var(--muted-2);
  margin-top: .72rem;
  font-size: .74rem;
  line-height: 1.4;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-company {
    color: color-mix(in oklab, var(--muted-2) 94%, transparent);
  }
}

.linkedin-summary {
  max-width: 24rem;
  margin-top: .8rem;
  font-size: .78rem;
  line-height: 1.45;
}

.linkedin-status {
  border: 1px solid var(--border-strong);
  align-items: center;
  gap: .36rem;
  width: fit-content;
  margin-top: .78rem;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-status {
    border: 1px solid color-mix(in oklab, var(--border-strong) 58%, transparent);
  }
}

.linkedin-status {
  background: var(--card-strong);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-status {
    background: color-mix(in oklab, var(--card-strong) 48%, #709ce214);
  }
}

.linkedin-status {
  color: var(--muted);
  padding: .28rem .52rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-status {
    color: color-mix(in oklab, var(--muted) 86%, #91beff3d);
  }
}

.linkedin-status {
  font-size: .66rem;
  line-height: 1;
}

.linkedin-status-dot {
  background: #5dd58beb;
  border-radius: 999px;
  flex: none;
  width: .34rem;
  height: .34rem;
  box-shadow: 0 0 0 1px #5dd58b33, 0 0 10px #5dd58b42;
}

.linkedin-cta {
  width: fit-content;
  color: var(--text);
  align-items: center;
  margin-top: .95rem;
  display: flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-cta {
    color: color-mix(in oklab, var(--text) 88%, #74a6ebb8);
  }
}

.linkedin-cta {
  font-size: .82rem;
  font-weight: 500;
  transition: color .18s, transform .18s, text-shadow .18s;
}

.linkedin-cta:after {
  content: "";
  background: linear-gradient(90deg, transparent 0%, var(--pastel-blue-star-b) 18%, var(--pastel-blue-star-a) 48%, var(--pastel-blue-star-b) 78%, transparent 100%);
  border-radius: 999px;
  height: 1px;
  position: absolute;
  bottom: -.16rem;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-cta:after {
    background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--pastel-blue-star-b) 62%, transparent) 18%, color-mix(in oklab, var(--pastel-blue-star-a) 88%, transparent) 48%, color-mix(in oklab, var(--pastel-blue-star-b) 62%, transparent) 78%, transparent 100%);
  }
}

.linkedin-cta:after {
  opacity: .72;
  transform-origin: 0;
  transition: opacity .22s, transform .26s cubic-bezier(.22, 1, .36, 1);
  transform: scaleX(.84);
}

.linkedin-card:hover .linkedin-cta, .linkedin-card:focus-visible .linkedin-cta {
  color: var(--text);
}

@supports (color: color-mix(in lab, red, red)) {
  .linkedin-card:hover .linkedin-cta, .linkedin-card:focus-visible .linkedin-cta {
    color: color-mix(in oklab, var(--text) 94%, #a0d4ffcc);
  }
}

.linkedin-card:hover .linkedin-cta, .linkedin-card:focus-visible .linkedin-cta {
  text-shadow: 0 0 18px #69aeff2e;
  animation: .76s cubic-bezier(.22, 1, .36, 1) linkedin-cta-pulse;
  transform: translateX(4px);
}

.linkedin-card:hover .linkedin-cta:after, .linkedin-card:focus-visible .linkedin-cta:after {
  opacity: 1;
  animation: .9s ease-out linkedin-cta-underline-scan;
  transform: scaleX(1);
}


html.light .linkedin-card {
  --linkedin-body-surface: #fcfcfafe;
  --linkedin-avatar-ring: #fcfcfafe;
  --linkedin-hover-blue: #4a86d429;
  --linkedin-hover-cyan: #48b2dc1a;
  background: linear-gradient(#ffffffbd, #ffffff8f), #ffffff75;
  border-color: #00000014;
  box-shadow: inset 0 1px #ffffffc2, 0 14px 34px #262f4014;
}

html.light .linkedin-card:before {
  background: radial-gradient(320px circle at 92% 0%, var(--linkedin-hover-blue), transparent 68%), radial-gradient(220px circle at 10% 20%, var(--linkedin-hover-cyan), transparent 70%);
}

html.light .linkedin-card:hover, html.light .linkedin-card:focus-visible {
  background: linear-gradient(#ffffffe0, #f7fbffad), #f5faffb3;
  border-color: #4482cd3d;
  box-shadow: inset 0 1px #ffffffd6, 0 18px 46px #28467424, 0 0 36px #5894de1f;
}


html.light .linkedin-eyebrow {
  background: #ffffff85;
}

html.light .linkedin-card:hover .linkedin-eyebrow, html.light .linkedin-card:focus-visible .linkedin-eyebrow {
  color: #22487edb;
  background: #ffffffb8;
}

html.light .linkedin-avatar-shell {
  box-shadow: 0 10px 24px #252d3e14;
}

html.light .linkedin-status {
  color: #46546cc7;
  background: #f7fbffad;
  border-color: #4a5d7e24;
}

html.light .linkedin-cover-overlay {
  background: linear-gradient(180deg, #f7f3ec14 0%, #f7f3ec47 62%, var(--linkedin-body-surface) 100%), linear-gradient(135deg, #7095d224, transparent 52%);
}

html.light .linkedin-card:hover .linkedin-cover-overlay, html.light .linkedin-card:focus-visible .linkedin-cover-overlay {
  background: linear-gradient(180deg, #ffffff05 0%, #f1f8ff38 62%, var(--linkedin-body-surface) 100%), linear-gradient(135deg, #508fde38, #4cb8dc1a 48%, transparent 70%);
}

html.light .linkedin-mark {
  color: #225ca6eb;
  background: #2c66b01a;
}

html.light .linkedin-card:hover .linkedin-mark, html.light .linkedin-card:focus-visible .linkedin-mark {
  color: #1652a0fa;
  background: #2d71c62e;
  box-shadow: 0 0 18px #4e8cd824;
}


.ping-pong-teaser {
  border: 1px solid var(--border);
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--section-gap);
  display: flex;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .ping-pong-teaser {
    border: 1px solid color-mix(in oklab, var(--border) 84%, transparent);
  }
}

.ping-pong-teaser {
  background: radial-gradient(360px circle at 100% 0%, #7aa5eb1c, transparent 68%), linear-gradient(155deg, var(--surface-grad-a), var(--surface-grad-b));
  border-radius: var(--card-radius);
}

@supports (color: color-mix(in lab, red, red)) {
  .ping-pong-teaser {
    background: radial-gradient(360px circle at 100% 0%, #7aa5eb1c, transparent 68%), linear-gradient(155deg, color-mix(in oklab, var(--surface-grad-a) 46%, transparent), color-mix(in oklab, var(--surface-grad-b) 42%, transparent));
  }
}

.ping-pong-teaser {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-block: var(--card-pad-block);
  padding-inline: var(--card-pad-inline);
  box-shadow: 0 1px 2px -1px #00000026, 0 6px 18px -6px #00000033, 0 24px 48px -14px #00000044, inset 0 1px #ffffff0e;
}

.ping-pong-teaser:before {
  content: "";
  pointer-events: none;
  opacity: .32;
  background:
    linear-gradient(120deg, rgba(214, 229, 255, 0.08), transparent 26% 74%, rgba(134, 171, 229, 0.05)),
    radial-gradient(circle at 18% 0%, rgba(180, 208, 255, 0.08), transparent 28%);
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 18% 82%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 18% 82%, #0000);
}

.ping-pong-teaser > * {
  z-index: 1;
  position: relative;
}

.ping-pong-teaser-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ping-pong-teaser-title, .ping-pong-teaser-subtitle {
  margin: 0;
}

.ping-pong-teaser-title {
  z-index: 3;
  width: fit-content;
  color: var(--text);
  align-items: center;
  gap: .34rem;
  display: inline-flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .ping-pong-teaser-title {
    color: color-mix(in oklab, var(--text) 88%, transparent);
  }
}

.ping-pong-teaser-title {
  letter-spacing: .01em;
  font-size: .82rem;
  font-weight: 600;
}

.ping-pong-bonus-star {
  z-index: 5;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 1.06rem;
  height: 1.06rem;
  display: inline-flex;
  position: relative;
  transform: translateY(-.03rem)rotate(-9deg);
}

.ping-pong-bonus-star-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--pastel-blue-star-a) 34%, transparent)) drop-shadow(0 0 10px color-mix(in oklab, var(--pastel-blue-star-b) 24%, transparent));
}

.ping-pong-teaser-subtitle {
  color: var(--muted);
  margin-top: .28rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .ping-pong-teaser-subtitle {
    color: color-mix(in oklab, var(--muted) 82%, transparent);
  }
}

.ping-pong-teaser-subtitle {
  font-size: .78rem;
  line-height: 1.45;
}

.ping-pong-inline-emoji {
  vertical-align: -.22rem;
  opacity: .9;
  width: 1.05em;
  height: 1.05em;
  margin-left: .22rem;
  display: inline-block;
  overflow: hidden;
}

.ping-pong-inline-emoji-lottie, .ping-pong-inline-emoji-fallback {
  width: 100%;
  height: 100%;
  display: block;
}

.ping-pong-inline-emoji > div, .ping-pong-inline-emoji-lottie > div, .ping-pong-inline-emoji-lottie svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.ping-pong-inline-emoji-fallback {
  font-size: .95em;
  line-height: 1;
}

@media (min-width: 640px) {
  .ping-pong-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--card-pad-block);
    padding-inline: var(--card-pad-inline);
  }

  .ping-pong-teaser-copy {
    justify-self: start;
    width: min(100%, 34rem);
    text-align: left;
  }

  .ping-pong-teaser-cta {
    justify-self: end;
    align-self: center;
  }
}

/* ── Inline hover-preview (Wikipedia-style) ──────────────────────────────────
   Reuses the .experience-link-preview card (see components/ExperienceLinkPreview).
   The card is portaled to <body> by components/InlineLinkPreview and positioned
   with position:fixed, so no clipped/overflow:hidden ancestor can crop it.
   The trigger is an ordinary inline link; on coarse-pointer devices the popover
   never opens, so nothing here affects the mobile/touch experience.            */
.inline-link-preview-trigger {
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .inline-link-preview-trigger:hover {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
  }
}

.inline-link-preview-popover {
  position: fixed;
  z-index: 75;
  width: min(360px, calc(100vw - 24px));
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0 18px 38px rgba(6, 11, 24, 0.34));
  will-change: transform, opacity;
}

.inline-link-preview-popover[data-placement="above"] {
  transform: translateY(-6px) scale(0.985);
  transform-origin: bottom center;
}

.inline-link-preview-popover[data-ready="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .inline-link-preview-popover,
  .inline-link-preview-popover[data-placement="above"] {
    transition: opacity 0.12s ease;
    transform: none;
  }
}