/* Minimal monochrome theme */
@font-face {
  font-family: "Neue Haas Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Neue Haas Display Roman"),
    local("Neue Haas Display Regular"),
    local("Neue Haas Display"),
    local("Neue Haas Grotesk Display Pro 55 Roman"),
    local("Neue Haas Grotesk Display Std 55 Roman"),
    local("Neue Haas Grotesk Display Pro"),
    local("NeueHaasDisplay-Roman"),
    local("NeueHaasGroteskDisplayPro-55Roman"),
    local("NeueHaasGroteskDisplayStd-55Roman"),
    local("NHaasGroteskTXPro-55Rg"),
    local("NHaasGroteskDSPro-55Rg"),
    url("fonts/NeueHaasDisplayRoman.ttf") format("truetype");
}

@font-face {
  font-family: "Neue Haas Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local("Neue Haas Display Medium"),
    local("Neue Haas Display 65 Medium"),
    local("Neue Haas Grotesk Display Pro 65 Medium"),
    local("Neue Haas Grotesk Display Std 65 Medium"),
    local("NeueHaasDisplay-Medium"),
    local("NeueHaasGroteskDisplayPro-65Medium"),
    local("NeueHaasGroteskDisplayStd-65Medium"),
    local("NHaasGroteskTXPro-65Md"),
    local("NHaasGroteskDSPro-65Md"),
    url("fonts/NeueHaasDisplayMediu.ttf") format("truetype");
}

@font-face {
  font-family: "Neue Haas Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Neue Haas Display Bold"),
    local("Neue Haas Display 75 Bold"),
    local("Neue Haas Grotesk Display Pro 75 Bold"),
    local("Neue Haas Grotesk Display Std 75 Bold"),
    local("NeueHaasDisplay-Bold"),
    local("NeueHaasGroteskDisplayPro-75Bold"),
    local("NeueHaasGroteskDisplayStd-75Bold"),
    local("NHaasGroteskTXPro-75Bd"),
    local("NHaasGroteskDSPro-75Bd"),
    local("NeueHaasDisplay Black"),
    url("fonts/NeueHaasDisplayBlack.ttf") format("truetype");
}

@font-face {
  font-family: "Rational TW";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    local("Rational TW Light"),
    local("RationalTW Light"),
    local("RationalTW-Light"),
    local("Rational TW"),
    url("fonts/rationaltwtextdemo-light.otf") format("opentype"),
    url("fonts/rationaltwdisplaydemo-light.otf") format("opentype");
}

@font-face {
  font-family: "Rational TW";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local("Rational TW Semibold"),
    local("RationalTW Semibold"),
    local("RationalTW-Semibold"),
    local("Rational TW"),
    url("fonts/rationaltwtextdemo-semibold.otf") format("opentype"),
    url("fonts/rationaltwdisplaydemo-semibold.otf") format("opentype");
}

:root {
  --bg-color: #f8f7f4;
  --bg-gradient: #f8f7f4;
  --fg-color: #1a1a1a;
  --muted-color: #6b6b6b;
  --accent-color: #111111;
  --accent-hover-color: #000000;
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-border: rgba(0, 0, 0, 0.12);
  --card-glow: 0 18px 48px rgba(0,0,0,0.08);
  --card-glow-hover: 0 24px 60px rgba(0,0,0,0.12);
  --badge-color: #1a1a1a;
  --badge-bg: rgba(0, 0, 0, 0.05);
  --badge-border: rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-gradient);
  color: var(--fg-color);
}

table {
  color: inherit;
}

.page-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
}

.page-shell-cell {
  padding: 0 32px;
}

body,
td,
th,
tr,
a,
li {
  font-family: "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg-color);
}

p {
  font-family: "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

strong {
  font-weight: 600;
}

h2 {
  margin: 0;
  font-weight: 600;
  font-family: "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--fg-color);
}

.papertitle {
  font-family: "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  display: block;
  color: var(--fg-color);
}

.name {
  padding-top: 0;
  margin: 0;
  font-family: "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.015em;
  /* text-transform: uppercase; */
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

a:focus,
a:hover {
  color: var(--accent-hover-color);
  background: radial-gradient(circle at 50% 120%, rgba(255, 221, 50, 0.22), transparent 65%);
  box-shadow: inset 0 -4px 0 rgba(255, 221, 50, 0.45);
}

span.highlight {
  background: rgba(0, 0, 0, 0.08);
  padding: 0 4px;
  border-radius: 4px;
}

.intro-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 36px 40px;
  margin: 48px 0 40px;

 
}

.intro-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.intro-text {
  flex: 1 1 auto;
}



.icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 28px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 20px;
}

.icon-link::before {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  top: 50%;
  transform: translateY(-50%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  opacity: 0.8;
}

.icon-email::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 0 8 6 8-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 0 8 6 8-6'/%3E%3C/svg%3E");
}

.icon-cv::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M6 3h8l4 4v14H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM14 3v4h4M8 11h8M8 15h6M8 7h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M6 3h8l4 4v14H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM14 3v4h4M8 11h8M8 15h6M8 7h4'/%3E%3C/svg%3E");
}

.icon-scholar::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 4 4 8.5l8 4.5 8-4.5L12 4zM4 9v5a8 8 0 0 0 16 0V9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 4 4 8.5l8 4.5 8-4.5L12 4zM4 9v5a8 8 0 0 0 16 0V9'/%3E%3C/svg%3E");
}

.icon-linkedin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4.98 3a2 2 0 1 1 .02 4 2 2 0 0 1-.02-4zM3 9h4v12H3zm6 0h3.8v1.8h.05c.55-1.05 1.9-2.1 3.85-2.1 4.05 0 4.85 2.65 4.85 6.1V21h-4v-5.4c0-1.3-.05-3-1.85-3s-2.15 1.4-2.15 2.9V21H9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4.98 3a2 2 0 1 1 .02 4 2 2 0 0 1-.02-4zM3 9h4v12H3zm6 0h3.8v1.8h.05c.55-1.05 1.9-2.1 3.85-2.1 4.05 0 4.85 2.65 4.85 6.1V21h-4v-5.4c0-1.3-.05-3-1.85-3s-2.15 1.4-2.15 2.9V21H9z'/%3E%3C/svg%3E");
}

.icon-github::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 2C6.49 2 2 6.63 2 12.3c0 4.49 2.87 8.27 6.84 9.6.5.1.68-.22.68-.48 0-.24-.01-.86-.01-1.7-2.78.62-3.37-1.37-3.37-1.37-.45-1.17-1.1-1.48-1.1-1.48-.9-.63.07-.62.07-.62 1 .07 1.54 1.05 1.54 1.05.89 1.57 2.34 1.12 2.91.86.09-.66.35-1.12.63-1.38-2.22-.26-4.56-1.14-4.56-5.07 0-1.13.39-2.05 1.02-2.77-.1-.26-.45-1.31.1-2.7 0 0 .84-.27 2.75 1.05a9.35 9.35 0 0 1 5 0c1.91-1.32 2.75-1.05 2.75-1.05.55 1.4.2 2.44.1 2.7.63.72 1.02 1.64 1.02 2.77 0 3.94-2.34 4.82-4.57 5.08.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.82 0 .27.18.58.69.48A10.03 10.03 0 0 0 22 12.3C22 6.63 17.52 2 12 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 2C6.49 2 2 6.63 2 12.3c0 4.49 2.87 8.27 6.84 9.6.5.1.68-.22.68-.48 0-.24-.01-.86-.01-1.7-2.78.62-3.37-1.37-3.37-1.37-.45-1.17-1.1-1.48-1.1-1.48-.9-.63.07-.62.07-.62 1 .07 1.54 1.05 1.54 1.05.89 1.57 2.34 1.12 2.91.86.09-.66.35-1.12.63-1.38-2.22-.26-4.56-1.14-4.56-5.07 0-1.13.39-2.05 1.02-2.77-.1-.26-.45-1.31.1-2.7 0 0 .84-.27 2.75 1.05a9.35 9.35 0 0 1 5 0c1.91-1.32 2.75-1.05 2.75-1.05.55 1.4.2 2.44.1 2.7.63.72 1.02 1.64 1.02 2.77 0 3.94-2.34 4.82-4.57 5.08.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.82 0 .27.18.58.69.48A10.03 10.03 0 0 0 22 12.3C22 6.63 17.52 2 12 2z'/%3E%3C/svg%3E");
}

.intro-text p {
  margin-top: 16px;
  color: var(--fg-color);
  font-family: "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
}


.intro-links {
  margin-top: 24px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.intro-links .divider {
  color: var(--muted-color);
  align-self: center;
  opacity: 0.5;
}

.intro-photo {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.intro-photo .profile-wrapper {
  width: 100%;
  max-width: 260px;
}

.profile-photo {
  width: 100%;
  max-width: 240px;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
}

.profile-wrapper {
  text-align: center;
}

.profile-caption {
  margin-top: 14px;
  margin-bottom: 0;
  color: var(--badge-color);
  font-size: 14px;
  letter-spacing: 0.1em;
}

.profile-caption span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: var(--badge-bg);
  border: 1px solid var(--badge-border);
  font-family: "Fira Code", "Source Code Pro", "Menlo", monospace;
  text-transform: uppercase;
  color: var(--fg-color);
}


.section-block {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 32px 32px 28px;
  margin: 0 0 48px;
}

.resume-section {
  margin-top: 48px;
}

.resume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
}

.resume-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.resume-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.resume-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.resume-item {
  display: grid;
  grid-template-columns: auto 5fr auto;
  align-items: center;
  gap: 16px;
}

.resume-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 6px;
  box-shadow: none;
}

.resume-icon-link {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.resume-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.resume-body-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  gap: 0;
}

.resume-body-link:hover .resume-heading,
.resume-body-link:focus-visible .resume-heading {
  text-decoration: underline;
}

.resume-body-link:hover,
.resume-body-link:focus,
.resume-body-link:focus-visible,
.resume-body-link:active,
.resume-icon-link:hover,
.resume-icon-link:focus,
.resume-icon-link:focus-visible,
.resume-icon-link:active {
  background: none;
  box-shadow: none;
  color: inherit;
}

.resume-body {
  display: flex;
  flex-direction: column;
  /* gap: 2px; */
  justify-content: center;
}

.resume-heading {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-color);
  word-spacing: 2px;
}

.resume-subheading {
  font-size: 14px;
  color: var(--muted-color);
  word-spacing: 2px;
}

.resume-detail {
  font-size: 14px;
  color: var(--muted-color);
  line-height: 1.5;
}

.resume-meta {
  font-size: 14px;
  font-style: italic;
  color: var(--muted-color);
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 640px) {
  body,
  td,
  th,
  tr,
  a,
  li {
    font-size: 16px;
    line-height: 1.65;
  }

  .page-shell-cell {
    padding: 0 18px;
  }

  .intro-card {
    padding: 24px 20px;
    margin: 32px 0 28px;
  }

  .intro-grid {
    gap: 24px;
  }

  .icon-link {
    font-size: 18px;
  }

  .name {
    font-size: 36px;
  }

  .intro-links {
    gap: 12px;
  }

  .section-block {
    padding: 24px 20px 20px;
    margin: 0 0 36px;
  }

  .resume-grid {
    gap: 28px;
  }

  .papers-list {
    gap: 20px;
  }

  .paper-card {
    padding: 20px 18px;
  }

  .paper-media-wrapper {
    margin-bottom: 12px;
  }

  .paper-links {
    gap: 8px;
  }

  .demo-thumbnail {
    max-width: none;
  }

  .resume-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
  }

  .resume-meta {
    grid-column: 2 / -1;
  }
}

.section-block .section-header {
  margin-bottom: 20px;
  padding-left: 0;
}
.section-header {
  margin: 8px 0 12px;
  padding-left: 6px;
}

.papers-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.paper-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;

 
}

.paper-card.highlight {
  background: rgba(255, 255, 255, 0.98);
}

.paper-media-wrapper {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}

.paper-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paper-authors,
.paper-venue,
.paper-links span,
.paper-body p {
  color: var(--muted-color);
}

.paper-links span {
  text-transform: none;
  letter-spacing: 0;
}

.paper-body p {
  font-size: 16px;
  color: var(--fg-color);
  line-height: 1.6;
}

.paper-links a {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paper-authors {
  font-size: 15px;
  font-family: "Rational TW", "Rational TW Light", "RationalTW Light", "RationalTW-Light", "RationalTWLight", "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.paper-venue {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-color);
  font-family: "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paper-venue strong {
  font-weight: 600;
}

.paper-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
  font-family: "Neue Haas Display", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Std", "Helvetica Neue", Arial, sans-serif;
}

.paper-media {
  width: 100%;
  border-radius: 18px;
}

.paper-media-link {
  display: block;
  border-radius: 18px;
}

.paper-media-link:hover,
.paper-media-link:focus {
  background: none;
  box-shadow: none;
}

.paper-media-link:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 4px;
}

.paper-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.25s ease;
}

.paper-video {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: block;
  transition: box-shadow 0.25s ease;
}

.paper-media-link:hover .paper-video,
.paper-media-link:focus-visible .paper-video {
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.18);
}

.paper-media-link:hover .paper-image,
.paper-media-link:focus-visible .paper-image {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.paper-title-link {
  color: var(--fg-color);
}

.paper-title-link:hover,
.paper-title-link:focus {
  color: var(--accent-hover-color);
  background: none;
  box-shadow: none;
  text-decoration: underline;
}

.paper-media.placeholder {
  margin: 0;
  min-height: 180px;
  border-radius: 18px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fira Code", "Source Code Pro", "Menlo", monospace;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-color);
}

.demos-section .paper-card {
  gap: 28px;
}

.demos-section .paper-media-wrapper {
  width: 100%;
  max-width: 360px;
}

.demo-media-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  border: none;
  text-align: center;
  padding: 0;
  gap: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.demo-thumbnail {
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: box-shadow 0.25s ease;
  display: block;
}

.demo-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.demo-media-link:hover,
.demo-media-link:focus-visible {
  background: transparent;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12);
}

.demo-media-link:hover .demo-thumbnail,
.demo-media-link:focus-visible .demo-thumbnail {
  box-shadow: 0 30px 56px rgba(0, 0, 0, 0.2);
}

.demo-media-link:hover .demo-cta,
.demo-media-link:focus-visible .demo-cta {
  opacity: 1;
}

@media (min-width: 641px) and (max-width: 800px) {
  .intro-card {
    padding: 28px 24px;
  }

  .name {
    font-size: 49px;
    text-align: center;
    font-weight: 1200;
  }

  .intro-links {
    justify-content: center;
  }

  .papers-list {
    gap: 18px;
  }

  .paper-card {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .page-shell-cell {
    padding: 0 14px;
  }

  .intro-card {
    padding: 22px 18px;
  }

  .section-block {
    padding: 22px 18px 18px;
  }

  .name {
    font-size: 32px;
  }

  .icon-link {
    font-size: 17px;
  }

  .paper-card {
    padding: 18px 16px;
  }

  .demo-cta {
    font-size: 16px;
    letter-spacing: 0.12em;
  }
}

@media (min-width: 860px) {
  .intro-grid {
    flex-direction: row;
    align-items: center;
  }

  .intro-photo {
    justify-content: flex-end;
  }

  .paper-card {
    flex-direction: row;
    align-items: center;
  }

  .paper-media-wrapper {
    width: 320px;
    margin-right: 32px;
    margin-bottom: 0;
  }

  .demos-section .paper-card {
    align-items: stretch;
  }

  .demos-section .paper-media-wrapper {
    width: 360px;
    margin-right: 36px;
  }

  .demos-section .paper-body {
    flex: 1;
    justify-content: center;
  }
}
.intro-text p:not(.intro-links) a {
  color: var(--accent-color);
  box-shadow: inset 0 -6px 0 rgba(255, 221, 50, 0.35);
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

.intro-text p:not(.intro-links) a:hover,
.intro-text p:not(.intro-links) a:focus {
  color: var(--accent-hover-color);
  box-shadow: inset 0 -100px 0 rgba(255, 221, 50, 0.2);
}