/* RESET
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, 
/* em,  */
img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, 
/* i, */
center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/**** Isotope filtering ****/

html {
    scroll-behavior: smooth;
}

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

.bold {
  font-weight: 500;
}



/*==============================
	MY STYLES
==============================*/

:root {
  --transition-time: 0.1s; 
  --page-background-color: #fafafa;
  --main-text-color: #131920;
  --heading-color: #131920;
  --secondary-text-color: #5c6670;
  --hint-text-color: #858d95;
  --callout-background-color: #f0f2f4;
  --list-row-gap: 12px;
  --rule-gap: 28px;
  --link-color: #1a63b3;
  --rule-color: #dde0e3;
  --link-hover-color: #124a86;
  --link-border-color: #1a63b3;
  --navbar-background-color: black;
  --button-icon-background-color: #f8f9fa;
  --button-icon-border-color: var(--rule-color);
  /* --button-hover-border-color: #dadce0; */
  --button-hover-border-color: #dde0e3;
  --button-hover-background-color: #eceef0;
  --button-hover-color: #131920;
  --code-background-color: #f5f5f5;
  --div-border-radius: 5px;
  --button-border-radius: 10px;
  --dark-grey: #e0e0e0;
  --profile-photo-size: 164px;
  --social-links-offset: 8px;
  --profile-text-inset: 8px;
}

body {
  background: var(--page-background-color);
  max-width: 1000px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px 0;
  margin: 0 auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--main-text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
  transition: var(--transition-time);
}

b {
  font-weight: 600;
}

tr {
}

td {
  padding-top:10px;
  padding-bottom:10px;
}

ul {
  list-style-type:disc; 
  margin-left: 20px;
  margin-top: 0px;
}

li {
}

mark {
  background-color: var(--dark-grey);
  color: var(--main-text-color);
}

.section {
  margin-top: 40px;
  color: var(--main-text-color);
}







#info {
}

#info h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 16px;
}

#info h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--heading-color);
}

#publications {
  line-height: 1.6;
  border-collapse: collapse;
  vertical-align: top;
}

#publications img {
  display: block;
  width: 192px;
  height: 108px;
  margin-right: 24px;
  border: 1px solid var(--rule-color);
  border-radius: 6px;
  object-fit: cover;
}

#publications table {
  float: left;
}

#publications td {
  border-bottom: 1px solid var(--rule-color);
  padding-top: 16px;
  padding-bottom: 16px;
}

#publications tr:last-child td {
  border-bottom: none;
}

.publications-image {
  width: 20%;
  text-align: left;
  vertical-align: middle;
}

.publications-info {
  width: 80%;
  text-align: left;
  vertical-align: middle;
}

#publications .publications-link-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.paper {
  font-weight: 600;
  color: var(--heading-color);
}

.author {
  color: var(--secondary-text-color);
}

.author-kuan {
  color: var(--heading-color);
  white-space:nowrap;
}

.venue {
  color: var(--heading-color);
}






.navbar {
  display: flex;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--page-background-color);
  transition: background-color var(--transition-time) ease;
  padding: 15px 0;
  z-index: 1000;
}

.navbar-container {
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
  padding: 0 20px;
  margin: 0 auto; /* Center align the container */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-left {
  margin-right: auto; /* Push the navbar-left (logo) to the far left */
  display: flex;
  align-items: center;
  padding-left:0px;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-left, .navbar-right {
  display: flex;
  align-items: center;
}

/* Navbar Items */
.nav-item {
  text-decoration: none;
  margin: -5px 10px;
  padding: 5px 5px;
  border: 1px solid var(--page-background-color);
  border-radius: var(--button-border-radius);
  color: var(--main-text-color);
  font-size: 16px;
  transition: color var(--transition-time) ease;
}

.nav-item-name {
  text-decoration: none;
  margin: -5px 10px;
  padding: 5px 5px;
  border: 1px solid var(--page-background-color);
  border-radius: var(--button-border-radius);
  color: var(--main-text-color);
  font-size: 16px;
  font-weight: 600;
  transition: color var(--transition-time) ease;
  display: none;
}

.nav-item:hover {
  text-decoration: none;
  background-color: var(--button-hover-background-color);
  color: var(--button-hover-color);
  border-color: var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  padding: 5px 5px;
  transition: var(--transition-time);
}

.nav-item-name:hover {
  text-decoration: none;
  border-radius: var(--button-border-radius);
  padding: 5px 5px;
  transition: var(--transition-time);
}

.navbar.scrolled {
  background-color: var(--navbar-background-color);
  z-index: 1000;
}

.navbar.scrolled .nav-item {
  color: white;
  border-color: var(--navbar-background-color);
}

.navbar.scrolled .nav-item-name {
  display: inline;
  color: white;
  border-color: var(--navbar-background-color);
}

.navbar.scrolled .nav-item {
  color: white;
}

.navbar.scrolled .nav-item-name {
  display: inline;
}

.navbar.scrolled .nav-item:hover {
  text-decoration: none;
  color: white;
  background-color: var(--link-color);
  border-color: var(--link-border-color);
}

.navbar.scrolled .nav-item-name:hover {
  text-decoration: none;
  color: white;
  background-color: var(--link-color);
  border-color: var(--link-border-color);
}

/* Responsive Styling for Mobile Devices */
@media (max-width: 768px) {
  /* A fixed bar cannot grow, so on small screens it scrolls with the page. */
  .navbar {
    position: static;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule-color);
  }

  .navbar-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
  }

  .navbar-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
  }

  .nav-item {
    margin: 0;
  }
}

.button-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background-color: var(--button-icon-background-color);
  color: var(--main-text-color);
  border: 1px solid var(--button-icon-border-color);
  border-radius: var(--div-border-radius);
  cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  min-width: 54px;
  height: 25.6px;
  box-sizing: border-box;
  padding: 0 12px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-icon:hover {
  background-color: var(--button-hover-background-color);
  color: var(--button-hover-color);
  border-color: var(--button-hover-border-color);
  box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;
  transition: var(--transition-time);
}

.button-icon:focus {
  border-color: var(--button-hover-background-color);
  outline: none;
  transition: var(--transition-time);
}

/* .button-publication { */
/*   background-color: white; */
/*   border: 0px solid white; */
/*   border-radius: 4px; */
/*   color: var(--link-color); */
/*   cursor: pointer; */
/*   font-family: Helvetica Neue, Roboto, Arial, sans-serif; */
/*   height: 28px; */
/*   line-height: 27px; */
/*   min-width: 54px; */
/*   padding: 0 16px; */
/*   text-align: center; */
/*   user-select: none; */
/*   -webkit-user-select: none; */
/*   touch-action: manipulation; */
/* } */
/*  */
/* .button-publication:hover { */
/*   background-color: var(--button-hover-background-color); */
/*   border-color: #dadce0; */
/*   box-shadow: rgba(0, 0, 0, .1) 0 1px 1px; */
/*   color: var(--button-hover-color); */
/*   transition: var(--transition-time); */
/* } */
/*  */
/* .button-publication:focus { */
/*   border-color: var(--button-hover-background-color); */
/*   outline: none; */
/*   transition: var(--transition-time); */
/* } */


.grill-head {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--main-text-color);
  margin-top: 20px;
}

.grill-logo {
  flex: 0 0 72px;
}

.grill-logo img {
  width: 100%;
  height: auto;
}

.grill-name {
  flex: 1 1 auto;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
}

#grill-info {
}

#grill-info h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 16px;
}

#grill-info h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 6px;
}

#grill-info p {
  margin: 0 0 14px;
}

.tab-content {
  display: block;
  margin-left: 0px;
  padding: 0px;
  max-width: 100%;
  /* background-color: #f9f9f9; */
}








.profile-photo-hoverable {
  color: var(--main-text-color);
  text-decoration: none;
  cursor: pointer;
}

.profile-photo-hoverable:hover {
  color: var(--link-hover-color);
}

/* Robot video carousel */

.robot-carousel-container {
  position: relative;
  max-width: 960px;
  margin: 16px auto;
  overflow: hidden;
}

.robot-carousel-track-wrapper {
  overflow: hidden;
  width: 100%;
  cursor: grab;
  touch-action: pan-y;
}

.robot-carousel-track-wrapper.is-dragging {
  cursor: grabbing;
}

.robot-carousel-track {
  display: flex;
}

.robot-carousel-item {
  flex: 0 0 calc(100% / 3);
  box-sizing: border-box;
  padding: 4px;
}

.robot-carousel-item video {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ddd;
  display: block;
}

/* Arrows sit below the videos with the position bars, so nothing covers a frame. */
.robot-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 4px;
}

/* The glyph stays small; the button around it is a comfortable 36px target. */
.robot-carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--hint-text-color);
  cursor: pointer;
  transition: color var(--transition-time) ease, background-color var(--transition-time) ease;
}

.robot-carousel-arrow:hover {
  color: var(--heading-color);
  background-color: var(--callout-background-color);
}

.robot-carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.robot-carousel-item {
  flex: 0 0 calc(100% / 3);
  box-sizing: border-box;
}

/* People lists (PhD students, etc.) */

.people-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--list-row-gap);
  margin-left: 20px;
}

/* Course list */

.course-list {
  list-style: none;
  margin-left: 0;
}

.course-list li {
  margin-bottom: var(--list-row-gap);
}

.course-list li:last-child {
  margin-bottom: 0;
}

.course-code {
  color: var(--heading-color);
  font-weight: 600;
  margin-right: 10px;
}

.course-role {
  color: var(--secondary-text-color);
  margin-left: 10px;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule-color);
  margin: var(--rule-gap) 0;
}

/* Name pronunciation triggers */


/* Footer */

.site-footer {
  text-align: center;
  margin-top: 56px;
  padding: 20px 0 40px;
  border-top: 1px solid var(--rule-color);
  color: var(--secondary-text-color);
  font-size: 14px;
}

/* Stack publication rows on narrow screens */

@media (max-width: 600px) {
  #publications,
  #publications tbody,
  #publications tr,
  #publications td {
    display: block;
    width: 100%;
  }

  #publications td {
    border-bottom: none;
    padding-bottom: 0;
  }

  #publications tr {
    border-bottom: 1px solid var(--rule-color);
    padding-bottom: 16px;
  }

  #publications tr:last-child {
    border-bottom: none;
  }

  #publications img {
    margin-right: 0;
    margin-bottom: 8px;
  }
}

/* Header */

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--social-links-offset);
}

/* Stack the header on narrow screens */


/* Carousel position dots */

.robot-carousel-track {
  user-select: none;
  -webkit-user-select: none;
}

.robot-carousel-item video {
  pointer-events: none;
}

.robot-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.robot-carousel-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--rule-color);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}

.robot-carousel-dot:hover {
  background: #b6bcc3;
}

.robot-carousel-dot.is-active {
  width: 34px;
  background: var(--heading-color);
}

/* Award / oral-presentation note beside a venue */

.pub-note {
  color: DarkRed;
  font-weight: 600;
}

/* Header */

/* The photo is square, so its height equals --profile-photo-size. The gap under
   the name is whatever is left once the name (40px), the three 25.6px rows of the
   two columns (76.8px), the button row's extra offset and the top inset are
   accounted for. That puts the bottom of the photo level with the bottom of the
   buttons, and makes the space above the name equal the space below the last
   line of the left column. Change any variable and the gap follows. */
.profile {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.profile-photo {
  flex: 0 0 var(--profile-photo-size);
}

.profile-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.profile-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: var(--profile-text-inset);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 40px;
  align-items: start;
}

.profile-name {
  position: relative;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  color: var(--heading-color);
  margin: 0 0 calc(var(--profile-photo-size) - 40px - 76.8px - var(--social-links-offset) - var(--profile-text-inset));
}

.profile-affiliation {
  grid-column: 1;
}

.profile-contact {
  grid-column: 2;
  min-width: 0;
}

.profile-contact-lines {
  margin-bottom: 0;
}


/* Name, pronunciation, and the Chinese characters */

.name-part {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--transition-time) ease;
}

.name-part.is-active,
.name-zh.is-active {
  color: var(--secondary-text-color);
}

/* Absolutely positioned so revealing it never moves anything. */
.pronounce-hint {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--hint-text-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-time) ease;
}

.pronounce-hint-text {
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}

.profile-name.is-hovered .pronounce-hint {
  opacity: 1;
}

.profile-name-zh {
  grid-column: 2;
  display: flex;
  gap: 12px;
  font-size: 36px;
  font-weight: 400;
  line-height: 40px;
  color: var(--heading-color);
  opacity: 0;
  transition: opacity var(--transition-time) ease;
}

.profile-name-zh.is-visible {
  opacity: 1;
}

.name-zh {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--transition-time) ease;
}

@media (max-width: 700px) {
  /* Same arrangement as desktop: photo on the left, name with the Chinese
     characters beside it, details underneath. Only the two detail columns
     collapse, because two columns of text do not fit on a phone. */
  .profile {
    gap: 16px;
  }

  .profile-photo {
    flex: 0 0 104px;
  }

  .profile-body {
    column-gap: 12px;
    row-gap: 0;
    padding-top: 0;
  }

  .profile-affiliation,
  .profile-contact {
    grid-column: 1 / -1;
  }

  .profile-name {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  /* Touch screens have no hover, so the Chinese name is simply always shown. */
  .profile-name-zh {
    opacity: 1;
    align-self: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    gap: 8px;
    color: var(--secondary-text-color);
  }

  .profile-affiliation {
    margin-bottom: 14px;
  }

  .profile-contact-lines {
    margin-bottom: 8px;
  }

  .pronounce-hint {
    display: none;
  }
}

/* Bio paragraphs and the prospective-students callout */

#bio-section p {
  margin: 0 0 14px;
}

#bio-section p:last-child {
  margin-bottom: 0;
}

.callout {
  background-color: var(--callout-background-color);
  border-radius: var(--div-border-radius);
  padding: 14px 18px;
}

/* Join-us page */

.grill-link {
  color: var(--heading-color);
  text-decoration: none;
}

.grill-link:hover {
  color: var(--heading-color);
}

.grill-photo {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto 8px;
  border-radius: 6px;
}

/* A link that reads as body text until you hover it. */
.plain-link {
  color: var(--main-text-color);
}

.plain-link:hover {
  color: var(--link-color);
}

#grill-info .callout {
  margin-top: 36px;
}

.tab-toggle {
  color: var(--heading-color);
}

.tab-toggle:hover {
  color: var(--link-color);
}

@media (max-width: 600px) {
  .grill-head {
    gap: 14px;
  }

  .grill-logo {
    flex: 0 0 52px;
  }

  .grill-name {
    font-size: 21px;
    text-align: left;
  }
}

/* BibTeX copy control */

.bibtex-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.bibtex-source {
  display: none;
}

.copy-toast {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-3px);
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: var(--secondary-text-color);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.copy-toast.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.copy-toast.no-transition {
  transition: none;
}

/* Author footnote marks */

.author-mark {
  position: relative;
  cursor: help;
}

/* At rest this collapses to a clipped 1x1 box. Hiding it with opacity alone left a
   full-width absolutely positioned box in the layout, which pushed the document's
   scrollable width past the viewport and made narrow screens scroll sideways.
   Clipping rather than display:none keeps the text in the accessibility tree. */
.mark-tip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  margin-bottom: 5px;
  border-radius: 4px;
  background-color: var(--secondary-text-color);
  color: #ffffff;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: baseline;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.author-mark:hover .mark-tip {
  width: auto;
  height: auto;
  padding: 3px 8px;
  overflow: visible;
  clip-path: none;
  transform: translateX(-50%);
  opacity: 1;
}

/* The first row's cell padding supplies the gap under the heading. */
#publications-section h1 {
  margin-bottom: 0;
}

/* The rule already provides the separation, so the first section below it does
   not add the usual 40px on top. */
#info > .section:first-child {
  margin-top: 0;
}

/* Tighten the space between the videos and their controls. */
.robot-carousel-container {
  margin-bottom: 4px;
}