@charset "UTF-8";
/*******************************************************************************
 * Variables used throughout the theme.
 * Palette and type tokens now follow the Xihuai Wang Refined Design System:
 * deep moss green accent, pure-paper background, serif display + body,
 * Inter for UI chrome, JetBrains Mono for metadata, Noto Serif SC for CJK.
 ******************************************************************************/
/*******************************************************************************
 * Reusable mixins
 ******************************************************************************/
/*******************************************************************************
 * Themes — Xihuai Wang Refined Design System
 * Pure paper / deep ink palette with moss-green accent. Shadow system uses
 * warm-tungsten lows and long softs. All tokens are CSS custom properties so
 * legacy al-folio rules keep rendering while the design-system layer builds
 * on a consistent foundation.
 ******************************************************************************/
:root {
  /* ---- Paper / ink scale ------------------------------------------------- */
  --paper: #FFFFFF;
  --paper-2: #F6F5F1; /* colors_and_type.css:16 — canonical paper-2 */
  /* Post body prose width — uses --prose-max as the floor, grows responsively.
     See _design_system.scss blog post block for usage. */
  --post-prose-max: var(--prose-max);
  --ink: #111418;
  --ink-2: #3A3F47;
  --ink-3: #6B7078;
  --ink-4: #A6A8AC;
  --rule: rgba(17, 20, 24, 0.10);
  --rule-strong: rgba(17, 20, 24, 0.22);
  /* ---- Moss scale (exposed for components) ------------------------------- */
  --moss-50: #EEF6ED;
  --moss-100: #D9E9D5;
  --moss-200: #B4D3AC;
  --moss-300: #7FB273;
  --moss-400: #4F9143;
  --moss-500: #2F7A2A;
  --moss-600: #215C1F;
  --moss-700: #16401A;
  /* ---- Supporting accents ------------------------------------------------ */
  --ink-blue: #1E3A8A;
  --ink-wine: #8E1B3A;
  --ink-ochre: #B5791F;
  --ink-cyan: #1F6F7A;
  --ink-plum: #5B2A7C;
  /* ---- Semantic ---------------------------------------------------------- */
  --accent: var(--moss-500);
  --accent-hover: var(--moss-600);
  --accent-deep: var(--moss-700);
  --accent-wash: var(--moss-50);
  --bg: var(--paper);
  --bg-raised: #FFFFFF;
  --bg-sunken: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --link: var(--moss-600);
  --link-hover: var(--moss-700);
  --code-bg: rgba(17, 20, 24, 0.05);
  --selection: #D6EACF;
  /* ---- Shadows (warm tungsten) ------------------------------------------ */
  --shadow-xs: 0 1px 0 rgba(17,20,24,0.04);
  --shadow-sm: 0 1px 2px rgba(17,20,24,0.06), 0 1px 1px rgba(17,20,24,0.04);
  --shadow-md: 0 8px 24px -10px rgba(17,20,24,0.14), 0 2px 6px rgba(17,20,24,0.06);
  --shadow-lg: 0 24px 60px -20px rgba(17,20,24,0.20), 0 6px 16px rgba(17,20,24,0.08);
  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  /* ---- Spacing (4px base) ------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  /* ---- Layout ----------------------------------------------------------- */
  --page-max: 1240px;
  --prose-max: 68ch;
  --gutter: 24px;
  /* ---- Type tokens (quoted so multi-word names parse as CSS strings) ---- */
  --font-display: "Fraunces", "Noto Serif SC", "Source Serif 4", Georgia, serif;
  --font-serif: "Source Serif 4", "Noto Serif SC", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-zh: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base:0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: clamp(2.5rem, 4.5vw, 3.75rem);
  --fs-5xl: clamp(3rem, 6vw, 5rem);
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.62;
  --lh-loose: 1.8;
  /* ---- Transitions ------------------------------------------------------ */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms var(--e-out);
  --t-med: 240ms var(--e-out);
  --t-slow: 480ms var(--e-out);
  /* ---- Legacy al-folio custom properties (map onto design tokens) ------- */
  --global-bg-color: var(--paper);
  --global-code-bg-color: var(--code-bg);
  --global-text-color: var(--ink);
  --global-text-color-light: var(--ink-3);
  --global-theme-color: var(--accent);
  --global-hover-color: var(--accent-hover);
  --global-footer-bg-color: var(--paper-2);
  --global-footer-text-color: var(--ink-3);
  --global-footer-link-color: var(--accent);
  --global-distill-app-color: var(--ink-3);
  --global-divider-color: var(--rule);
  --global-card-bg-color: var(--paper);
  --global-shadow-color: rgba(17,20,24,0.10);
  --global-shadow-sm: var(--shadow-sm);
  --global-shadow-md: var(--shadow-md);
  --global-shadow-lg: var(--shadow-lg);
}
:root .fa-sun {
  display: none;
}
:root .fa-moon {
  display: block;
}
:root .theme-toggle__sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
  pointer-events: none;
}
:root .theme-toggle__moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}
:root .repo-img-light {
  display: block;
}
:root .repo-img-dark {
  display: none;
}

html[data-theme=dark] {
  --paper: #0E1013;
  --paper-2: #151921;
  --ink: #E8E5DC;
  --ink-2: #C2C0B8;
  --ink-3: #8A8880;
  --ink-4: #5A5852;
  --rule: rgba(232, 229, 220, 0.10);
  --rule-strong: rgba(232, 229, 220, 0.22);
  --moss-500: #6FB366;
  --moss-600: #8FC987;
  --moss-700: #B4DDA9;
  --moss-50: #1A2619;
  --accent: var(--moss-500);
  --accent-hover: var(--moss-600);
  --accent-deep: var(--moss-700);
  --accent-wash: var(--moss-50);
  --bg: var(--paper);
  --bg-raised: #1A1E25;
  --bg-sunken: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --link: var(--moss-500);
  --link-hover: var(--moss-600);
  --code-bg: rgba(232, 229, 220, 0.06);
  --selection: #2D4529;
  --shadow-xs: 0 1px 0 rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 24px -10px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.60), 0 6px 16px rgba(0,0,0,0.35);
  --global-bg-color: var(--paper);
  --global-code-bg-color: var(--code-bg);
  --global-text-color: var(--ink);
  --global-text-color-light: var(--ink-3);
  --global-theme-color: var(--accent);
  --global-hover-color: var(--accent-hover);
  --global-footer-bg-color: var(--paper-2);
  --global-footer-text-color: var(--ink-3);
  --global-footer-link-color: var(--accent);
  --global-distill-app-color: var(--ink-3);
  --global-divider-color: var(--rule);
  --global-card-bg-color: var(--bg-raised);
  --global-shadow-color: rgba(0,0,0,0.45);
  --global-shadow-sm: var(--shadow-sm);
  --global-shadow-md: var(--shadow-md);
  --global-shadow-lg: var(--shadow-lg);
}
html[data-theme=dark] .fa-sun {
  display: block;
}
html[data-theme=dark] .fa-moon {
  display: none;
}
html[data-theme=dark] .theme-toggle__sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
html[data-theme=dark] .theme-toggle__moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
  pointer-events: none;
}
html[data-theme=dark] .repo-img-light {
  display: none;
}
html[data-theme=dark] .repo-img-dark {
  display: block;
}

/*******************************************************************************
 * Bootstrap 4.6 subset — hand-written replacement for the CDN stylesheet.
 *
 * Only the classes actually used by this site are implemented (see the grep
 * audit in the replacement commit). Values match Bootstrap 4.6.1 so the
 * cascade against _base.scss / _design_system.scss stays identical to when
 * the full CDN file loaded first. Colors use the theme CSS variables from
 * _themes.scss instead of Bootstrap's hardcoded palette.
 *
 * Breakpoints (Bootstrap 4): sm=576px  md=768px  lg=992px  xl=1200px
 ******************************************************************************/
/* ============================================================================
 * 1. Reboot subset — the normalize layer the site depended on
 * ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  text-align: left;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  background-color: transparent;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

th {
  text-align: inherit;
}

label {
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ============================================================================
 * 2. Grid — container / row / used columns only
 * ========================================================================== */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-sm-2, .col-sm-10, .col-sm-12,
.col-lg, .col-lg-3, .col-lg-6 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 576px) {
  .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* ============================================================================
 * 3. Navbar family + collapse (JS only toggles `.show` on #navbarNav)
 * ========================================================================== */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

/* Collapse behavior — assets/js/common.js toggles `.show` only. */
.collapse:not(.show) {
  display: none;
}

/* Dropdown markup exists in header.html behind `p.dropdown` (currently no nav
   page enables it). Keep the closed state so it can never render expanded. */
.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

/* navbar-expand-sm: collapsed below 576px, expanded row at >=576px */
@media (max-width: 575.98px) {
  .navbar-expand-sm > .container {
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm > .container {
    flex-wrap: nowrap;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}
/* Positioning helpers used by navbar/footer */
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* ============================================================================
 * 4. Buttons — bib.html link pills (visuals are restyled downstream)
 * ========================================================================== */
.btn {
  display: inline-block;
  font-weight: 400;
  color: var(--fg);
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.btn:hover {
  text-decoration: none;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

/* ============================================================================
 * 5. Card — CV section shells (dissolved by _design_system.scss)
 * ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--bg-raised);
  background-clip: border-box;
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-text:last-child {
  margin-bottom: 0;
}

/* ============================================================================
 * 6. List group — CV lists (borders/backgrounds restyled downstream)
 * ========================================================================== */
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.25rem;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: transparent;
  border: 1px solid var(--rule);
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-flush {
  border-radius: 0;
}

.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

/* ============================================================================
 * 7. Table helpers — cv/map.html, news include, blog_enhancements.js
 *    (base `.table` sizing lives in _base.scss, unchanged)
 * ========================================================================== */
.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
 * 8. Utilities (Bootstrap keeps these !important; preserved so the existing
 *    override order in _base.scss / _design_system.scss behaves the same)
 * ========================================================================== */
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

@media (min-width: 992px) {
  .d-lg-block {
    display: block !important;
  }
  .d-lg-none {
    display: none !important;
  }
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.text-right {
  text-align: right !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/******************************************************************************
 * Content
 ******************************************************************************/
html {
  overflow-y: scroll;
}

body {
  padding-bottom: 50px;
  color: var(--global-text-color);
  background-color: var(--global-bg-color);
  font-size: 1rem;
  line-height: 1.75;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  scroll-margin-top: 60px;
}

@keyframes fadeIn {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}
.container.mt-5 {
  animation: fadeIn 0.15s ease-out;
}

body.fixed-top-nav {
  padding-top: 56px;
}

body.sticky-bottom-footer {
  padding-bottom: 0;
}

.container {
  max-width: var(--max-content-width);
  padding-left: 1rem;
  padding-right: 1rem;
}

.profile img {
  width: 100%;
}

/******************************************************************************
 * Publications
 ******************************************************************************/
/*****************************************************************************
* Projects
*****************************************************************************/
/*******************************************************************************
 * Styles for the base elements of the theme.
 ******************************************************************************/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--global-divider-color);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--global-theme-color);
}

::selection {
  background: var(--global-theme-color);
  color: #fff;
  text-shadow: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
em,
div,
li,
span,
strong {
  color: var(--global-text-color);
}

hr {
  border-top: 1px solid var(--global-divider-color);
}

table,
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--global-text-color);
  background-color: transparent;
  border-collapse: collapse;
}
table th,
table td,
.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid var(--global-divider-color);
  border-color: var(--global-divider-color);
}
table thead th,
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--global-divider-color);
  border-color: var(--global-divider-color);
}
table tbody + tbody,
.table tbody + tbody {
  border-top: 2px solid var(--global-divider-color);
  border-color: var(--global-divider-color);
}
table tbody tr,
.table tbody tr {
  transition: background-color 0.2s ease;
}
table tbody tr:hover,
.table tbody tr:hover {
  background-color: var(--global-code-bg-color);
}
table td,
.table td {
  font-size: 1rem;
}

a,
table.table a {
  color: var(--global-theme-color);
}
a:hover,
table.table a:hover {
  color: var(--global-theme-color);
  text-decoration: underline;
}
a:hover:after :not(.nav-item.dropdown),
table.table a:hover:after :not(.nav-item.dropdown) {
  width: 100%;
}

figure,
img {
  max-width: 100%;
  height: auto;
}

.z-depth-0 {
  box-shadow: none;
}

.z-depth-1 {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
}

blockquote {
  background: none;
  border-left: 2px solid var(--global-theme-color);
  margin: 1.5em 0;
  padding: 0.75em 0 0.75em 1.5em;
  font-family: "Fraunces", "Noto Serif SC", "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--global-text-color-light);
  border-radius: 0;
  box-shadow: none;
}

.equation {
  margin-bottom: 1rem;
  text-align: center;
}

.caption {
  font-size: 0.8125rem;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

pre.highlight {
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: var(--global-code-bg-color);
  overflow-x: auto;
}

code {
  font-family: monospace;
  background-color: var(--global-code-bg-color);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
}

.card {
  background-color: var(--global-card-bg-color);
}
.card img {
  width: 100%;
}
.card .card-title {
  color: var(--global-text-color);
}

.card.hoverable {
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}
.card.hoverable:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.citation,
.citation-number {
  color: var(--global-theme-color);
}

.profile {
  width: 100%;
}
@media (max-width: 575.98px) {
  .profile {
    max-width: 220px;
    margin: 0 auto 1rem;
    float: none !important;
    display: block;
  }
}
.profile .address {
  margin-bottom: 3px;
  margin-top: 3px;
  font-family: monospace;
  font-size: 0.75rem;
  text-align: center;
}
.profile .address p {
  display: inline-block;
  margin: 0;
}

.profile.float-right {
  margin-left: 0.75rem;
}

.profile.float-left {
  margin-right: 0.75rem;
}

@media (max-width: 575.98px) {
  .profile.float-right,
  .profile.float-left {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 576px) {
  .profile {
    width: 24%;
    min-width: 150px;
    max-width: 220px;
  }
  .profile .address p {
    display: block;
  }
}
.post-description {
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  color: var(--global-text-color-light);
  line-height: 1.5;
  max-width: 60ch;
}
.post-description a {
  color: inherit;
}
.post-description a:hover {
  color: var(--global-theme-color);
  text-decoration: none;
}
.post-description strong {
  color: var(--global-theme-color);
  font-weight: 600;
}

.skip-to-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  z-index: 1101;
}
.skip-to-content:focus, .skip-to-content:focus-visible {
  width: auto;
  height: auto;
  padding: 0.65rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: #fff;
  text-decoration: none;
}

.navbar {
  box-shadow: none;
  border-bottom: 1px solid var(--global-divider-color);
  background-color: var(--global-bg-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.5rem 0;
  min-height: 56px;
  z-index: 1000;
}
@media (prefers-reduced-motion: no-preference) {
  .navbar {
    transition: all 0.3s ease, background-color 0.25s ease;
  }
}
.navbar.scrolled {
  box-shadow: var(--global-shadow-sm);
}

.navbar .dropdown-menu {
  background-color: var(--global-bg-color);
  border: 1px solid var(--global-divider-color);
  border-radius: 8px;
  box-shadow: var(--global-shadow-md);
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .navbar .dropdown-menu {
    animation: dropdownFadeIn 0.2s ease;
  }
}
.navbar .dropdown-menu a:not(.active) {
  color: var(--global-text-color);
}
.navbar .dropdown-menu a:hover {
  color: var(--global-hover-color);
  background-color: var(--global-code-bg-color);
}
.navbar .dropdown-menu .dropdown-divider {
  border-top: 1px solid var(--global-divider-color) !important;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dropdown-item {
  color: var(--global-text-color);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin: 0 0.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  .dropdown-item {
    transition: all 0.15s ease;
  }
}
.dropdown-item:hover {
  color: var(--global-hover-color);
  background-color: var(--global-code-bg-color);
}

.navbar.navbar-light a:hover {
  text-decoration: none;
}
.navbar.navbar-light .navbar-brand {
  color: var(--global-text-color);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .navbar.navbar-light .navbar-brand {
    transition: color 0.2s ease;
  }
}
.navbar.navbar-light .navbar-brand:hover {
  color: var(--global-theme-color);
}
.navbar.navbar-light .navbar-nav .nav-item .nav-link {
  color: var(--global-text-color);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .navbar.navbar-light .navbar-nav .nav-item .nav-link {
    transition: color 0.2s ease, background-color 0.2s ease;
  }
}
.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: var(--global-theme-color);
  background-color: var(--global-code-bg-color);
}
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link {
  background-color: inherit;
  font-weight: 600;
  color: var(--global-theme-color);
}
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: var(--global-theme-color);
  border-radius: 1px;
}
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link:hover {
  color: var(--global-theme-color);
}
.navbar.navbar-light .navbar-brand.social {
  padding-bottom: 0;
  padding-top: 0;
  font-size: 1.25rem;
}
.navbar.navbar-light .navbar-brand.social a i::before {
  color: var(--global-text-color);
}
@media (prefers-reduced-motion: no-preference) {
  .navbar.navbar-light .navbar-brand.social a i::before {
    transition: all 0.2s ease-in-out;
  }
}
.navbar.navbar-light .navbar-brand.social a:hover i::before {
  color: var(--global-theme-color);
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--global-text-color);
  border-radius: 1px;
  margin-bottom: 4px;
  transition: all 0.2s;
}
.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggler .middle-bar {
  opacity: 0;
}
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

#light-toggle {
  padding: 0.5rem;
  border: 0;
  background-color: transparent;
  color: var(--global-text-color);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  #light-toggle {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
}
#light-toggle:hover {
  color: var(--global-theme-color);
  background-color: var(--global-code-bg-color);
  transform: rotate(15deg);
}
#light-toggle:active {
  transform: scale(0.9);
}
@media (prefers-reduced-motion: no-preference) {
  #light-toggle i {
    transition: transform 0.3s ease;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #light-toggle .fa-sun, #light-toggle .fa-moon {
    animation: themeIconPop 0.3s ease;
  }
}

@keyframes themeIconPop {
  0% {
    transform: scale(0.5) rotate(-30deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@media (min-width: 576px) {
  #light-toggle {
    padding: 0.5rem;
    width: 36px;
    height: 36px;
    margin-left: 0.5rem;
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .navbar .container {
    position: relative;
  }
  .navbar .navbar-social-icons {
    position: relative;
    z-index: 5;
  }
  .navbar .navbar-toggler {
    z-index: 10;
  }
  .navbar .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--global-bg-color);
    border: 1px solid var(--global-divider-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--global-shadow-md);
    padding: 0.75rem 1.25rem 1rem;
    z-index: 1000;
  }
  .navbar .navbar-collapse .navbar-nav {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
  }
  .navbar .navbar-collapse .navbar-nav .nav-item {
    text-align: right;
  }
  .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    padding: 0.5rem 0.75rem;
    display: inline-block;
    font-size: 0.95rem;
    border-radius: 6px;
  }
  .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    background-color: var(--global-code-bg-color);
  }
  .navbar .navbar-collapse .navbar-nav .nav-item.active > .nav-link::after {
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
    width: auto;
    bottom: 0.15rem;
  }
  .navbar .navbar-collapse .navbar-nav .toggle-container {
    margin-top: 0.5rem;
  }
  .navbar .navbar-collapse .navbar-nav .toggle-container #light-toggle {
    margin: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: var(--global-code-bg-color);
  }
  .navbar .navbar-collapse .navbar-nav .toggle-container #light-toggle:hover {
    background-color: var(--global-divider-color);
    transform: none;
  }
}
.social {
  text-align: center;
}
.social .contact-icons {
  font-size: 2.5rem;
}
.social .contact-icons a i::before {
  color: var(--global-text-color);
  transition-property: all 0.2s ease-in-out;
}
.social .contact-icons a:hover i::before {
  color: var(--global-theme-color);
}
.social .contact-note {
  font-size: 0.75rem;
}

footer.fixed-bottom {
  background-color: var(--global-footer-bg-color);
  font-size: 0.75rem;
}
footer.fixed-bottom .container {
  color: var(--global-footer-text-color);
  padding-top: 6px;
  padding-bottom: 6px;
}
footer.fixed-bottom a {
  color: var(--global-footer-link-color);
}
footer.fixed-bottom a:hover {
  color: var(--global-theme-color);
  text-decoration: none;
}

footer.sticky-bottom {
  border-top: 1px solid var(--global-divider-color);
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 0.75rem;
  text-align: center;
}

.cv {
  margin-bottom: 40px;
}
.cv .card {
  background-color: var(--global-card-bg-color);
  border: 1px solid var(--global-divider-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cv .card .list-group-item {
  background-color: inherit;
  border-color: var(--global-divider-color);
  color: var(--global-text-color);
}
.cv .card .list-group-item .badge {
  color: var(--global-theme-color) !important;
  background-color: transparent !important;
  border: none;
}

@media (min-width: 768px) {
  .repo {
    max-width: 50%;
  }
}
.header-bar {
  border-bottom: 1px solid var(--global-divider-color);
  text-align: center;
  padding-top: 1.25rem;
  padding-bottom: 1.75rem;
}
.header-bar h1 {
  color: var(--global-theme-color);
  font-size: 2.5rem;
}

.tag-list {
  border-bottom: 1px solid var(--global-divider-color);
  text-align: center;
  padding-top: 0.5rem;
}
.tag-list ul {
  justify-content: center;
  display: flow-root;
}
.tag-list ul p,
.tag-list ul li {
  list-style: none;
  display: inline-block;
  padding: 0.5rem 0.4rem;
  color: var(--global-text-color-light);
}

.pagination .page-item .page-link {
  color: var(--global-text-color);
}
.pagination .page-item .page-link:hover {
  color: #111418;
}
.pagination .page-item.active .page-link {
  color: #FFFFFF;
  background-color: var(--global-theme-color);
}
.pagination .page-item.active .page-link:hover {
  background-color: var(--global-theme-color);
}

.distill a:hover {
  border-bottom-color: var(--global-theme-color);
  text-decoration: none;
}

figure.highlight {
  margin: 0 0 1rem;
}

pre {
  color: var(--global-theme-color);
  background-color: var(--global-code-bg-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 6px 12px;
}
pre pre,
pre code {
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0;
}

code {
  color: var(--global-theme-color);
  background-color: var(--global-code-bg-color);
  border-radius: 3px;
  padding: 3px 3px;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, fill 200ms ease-out, box-shadow 200ms ease-out !important;
  transition-delay: 0 !important;
}

.post .post-content blockquote {
  border-left: 5px solid var(--global-theme-color);
  padding: 8px;
}

/* Scroll progress indicator. Anchored inside the fixed navbar via absolute
   positioning, so it never drifts relative to the navbar on iOS Safari. */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* overlap the navbar's 1px bottom rule */
  height: 2px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--accent, var(--global-theme-color));
  transition: width 0.08s linear;
  will-change: width;
}

pre {
  padding: 8px 12px;
  position: relative;
  /* Copy code to clipboard button */
}
pre .copy {
  background: var(--global-card-bg-color);
  border-color: var(--global-bg-color);
  border-radius: 0.3rem;
  border-style: solid;
  color: var(--global-text-color);
  font-size: 1rem;
  opacity: 0;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
}
pre .copy:active, pre .copy:focus, pre .copy:hover {
  color: var(--global-hover-color);
  opacity: 1;
}
pre {
  /* Wrap toggle button */
}
pre .wrap-toggle {
  background: var(--global-card-bg-color);
  border-color: var(--global-bg-color);
  border-radius: 0.3rem;
  border-style: solid;
  color: var(--global-text-color);
  font-size: 1rem;
  opacity: 0;
  position: absolute;
  right: 2.75rem;
  top: 0.25rem;
}
pre .wrap-toggle:active, pre .wrap-toggle:focus, pre .wrap-toggle:hover {
  color: var(--global-hover-color);
  opacity: 1;
}
pre:active .copy, pre:focus .copy, pre:hover .copy, pre:active .wrap-toggle, pre:focus .wrap-toggle, pre:hover .wrap-toggle {
  color: var(--global-hover-color);
  opacity: 1;
}
pre {
  /* Wrap functionality */
}
pre.wrapped code,
pre.wrapped pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
pre:not(.wrapped) code,
pre:not(.wrapped) pre {
  white-space: pre;
  overflow-x: auto;
}

/*******************************************************************************
 * News
 ******************************************************************************/
.news {
  position: relative;
}
.news .news-table.news-scrollable {
  max-height: clamp(220px, 32vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  mask-image: linear-gradient(to bottom, black 0, black calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 32px), transparent 100%);
}
.news .news-table.news-scrollable table {
  margin-bottom: 0;
}
.news th[scope=row] {
  white-space: nowrap;
  font-size: 0.75rem;
}
.news td {
  font-size: 0.8125rem;
  padding: 0.3rem 0 !important;
  line-height: 1.5;
}
.news td ul, .news td ol {
  margin-bottom: 0;
}
.news .news-table.news-scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.news .news-table.news-scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--global-theme-color) 0%, var(--global-hover-color) 100%);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.3s ease;
}
.news .news-table.news-scrollable::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--global-hover-color) 0%, var(--global-theme-color) 100%);
  background-clip: padding-box;
}
.news .news-table.news-scrollable::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  margin: 4px 0;
}
.news .news-table.news-scrollable {
  scrollbar-width: auto;
  scrollbar-color: var(--global-theme-color) rgba(0, 0, 0, 0.08);
}

/*******************************************************************************
 * Enhanced Personal Homepage Styles
 ******************************************************************************/
.navbar-social-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 0;
  margin: 0;
  min-height: 35px;
}
.navbar-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: transparent;
  transition: all 0.2s ease;
  position: relative;
  text-decoration: none !important;
}
.navbar-social-icons a i, .navbar-social-icons a i::before {
  font-size: 1.125rem;
  color: var(--global-text-color);
  transition: all 0.2s ease;
}
.navbar-social-icons a:hover {
  background: var(--accent-wash);
}
.navbar-social-icons a:hover i, .navbar-social-icons a:hover i::before {
  color: var(--accent);
}
.navbar-social-icons a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.profile .address {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--global-text-color-light);
  letter-spacing: 0.02em;
  text-align: center;
}
.profile .address p {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}
.profile .address p::before {
  content: "\f3c5";
  font-family: "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  font-size: 0.85em;
  color: var(--global-theme-color);
  opacity: 0.85;
}
.profile figure {
  margin: 0;
}
.profile img {
  border-radius: 12px;
  border: 1px solid var(--global-divider-color);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.profile img:hover {
  transform: translateY(-2px);
  border-color: var(--global-theme-color);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.22);
}

.news, .publications {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 1rem;
  border: none;
}

.news table {
  font-size: 1rem;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.news table tr {
  transition: none;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--global-divider-color);
}
.news table tr:hover {
  transform: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.news table tr:last-child {
  border-bottom: none;
}
.news table th[scope=row] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--global-text-color);
  padding: 1.2rem 1rem !important;
  vertical-align: top;
  min-width: 120px;
  border: none;
}
.news table td {
  padding: 1.2rem 1rem !important;
  line-height: 1.6;
  vertical-align: top;
  border: none;
}

/*******************************************************************************
 * CV Page — see _sass/_design_system.scss section 13 for current styling.
 * (Legacy `.cv { ... }` block removed; it conflicted with the dissolved-card
 * design-system treatment and left a full-width green rule under each section
 * heading plus a timeline dot marker that the new layout doesn't use.)
 ******************************************************************************/
.post .publications {
  padding-left: 0;
  margin-left: 0;
  text-align: left;
}

.about-selected-papers {
  margin-bottom: 3rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.about-selected-papers__intro {
  margin-bottom: 1.5rem;
}
.about-selected-papers__intro ol {
  margin: 0.35rem 0 0 1.25rem;
}
.about-selected-papers .publications {
  padding-left: 0;
  margin-left: 0;
  width: 100%;
}
.about-selected-papers .publications ol,
.about-selected-papers .publications li {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}
.about-selected-papers .publications ol.bibliography {
  padding-left: 0;
  margin-left: 0;
}

/*******************************************************************************
 * Subtle scroll-reveal for news rows & paper items (respects reduced-motion)
 ******************************************************************************/
@media (prefers-reduced-motion: no-preference) {
  .news table tr,
  .post ol.bibliography > li {
    animation: fadeInUp 0.5s ease both;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
i.fas,
i.fab,
i.ai {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

i.fa-sm {
  font-size: 0.875em;
}

i.fa-envelope {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M502.3%20190.8c3.9-3.1%209.7-.2%209.7%204.7V400c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V195.6c0-5%205.7-7.8%209.7-4.7%2022.4%2017.4%2052.1%2039.5%20154.1%20113.6%2021.1%2015.4%2056.7%2047.8%2092.2%2047.6%2035.7.3%2072-32.8%2092.3-47.6%20102-74.1%20131.6-96.3%20154-113.7zM256%20320c23.2.4%2056.6-29.2%2073.4-41.4%20132.7-96.3%20142.8-104.7%20173.4-128.7%205.8-4.5%209.2-11.5%209.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5%2064%200%2085.5%200%20112v19c0%207.4%203.4%2014.3%209.2%2018.9%2030.6%2023.9%2040.7%2032.4%20173.4%20128.7%2016.8%2012.2%2050.2%2041.8%2073.4%2041.4z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M502.3%20190.8c3.9-3.1%209.7-.2%209.7%204.7V400c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V195.6c0-5%205.7-7.8%209.7-4.7%2022.4%2017.4%2052.1%2039.5%20154.1%20113.6%2021.1%2015.4%2056.7%2047.8%2092.2%2047.6%2035.7.3%2072-32.8%2092.3-47.6%20102-74.1%20131.6-96.3%20154-113.7zM256%20320c23.2.4%2056.6-29.2%2073.4-41.4%20132.7-96.3%20142.8-104.7%20173.4-128.7%205.8-4.5%209.2-11.5%209.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5%2064%200%2085.5%200%20112v19c0%207.4%203.4%2014.3%209.2%2018.9%2030.6%2023.9%2040.7%2032.4%20173.4%20128.7%2016.8%2012.2%2050.2%2041.8%2073.4%2041.4z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-list {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M80%20368H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm0-320H16A16%2016%200%200%200%200%2064v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16V64a16%2016%200%200%200-16-16zm0%20160H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm416%20176H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16zm0-320H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16V80a16%2016%200%200%200-16-16zm0%20160H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M80%20368H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm0-320H16A16%2016%200%200%200%200%2064v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16V64a16%2016%200%200%200-16-16zm0%20160H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm416%20176H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16zm0-320H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16V80a16%2016%200%200%200-16-16zm0%20160H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-chevron-right {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20d%3D%22M285.476%20272.971L91.132%20467.314c-9.373%209.373-24.569%209.373-33.941%200l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505%20256%2034.484%20101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373%2024.569-9.373%2033.941%200L285.475%20239.03c9.373%209.372%209.373%2024.568.001%2033.941z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20d%3D%22M285.476%20272.971L91.132%20467.314c-9.373%209.373-24.569%209.373-33.941%200l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505%20256%2034.484%20101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373%2024.569-9.373%2033.941%200L285.475%20239.03c9.373%209.372%209.373%2024.568.001%2033.941z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-chevron-down {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-arrow-up {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M34.9%20289.5l-22.2-22.2c-9.4-9.4-9.4-24.6%200-33.9L207%2039c9.4-9.4%2024.6-9.4%2033.9%200l194.3%20194.3c9.4%209.4%209.4%2024.6%200%2033.9L413%20289.4c-9.5%209.5-25%209.3-34.3-.4L264%20168.6V456c0%2013.3-10.7%2024-24%2024h-32c-13.3%200-24-10.7-24-24V168.6L69.2%20289.1c-9.3%209.8-24.8%2010-34.3.4z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M34.9%20289.5l-22.2-22.2c-9.4-9.4-9.4-24.6%200-33.9L207%2039c9.4-9.4%2024.6-9.4%2033.9%200l194.3%20194.3c9.4%209.4%209.4%2024.6%200%2033.9L413%20289.4c-9.5%209.5-25%209.3-34.3-.4L264%20168.6V456c0%2013.3-10.7%2024-24%2024h-32c-13.3%200-24-10.7-24-24V168.6L69.2%20289.1c-9.3%209.8-24.8%2010-34.3.4z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-clipboard {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M384%20112v352c0%2026.51-21.49%2048-48%2048H48c-26.51%200-48-21.49-48-48V112c0-26.51%2021.49-48%2048-48h80c0-35.29%2028.71-64%2064-64s64%2028.71%2064%2064h80c26.51%200%2048%2021.49%2048%2048zM192%2040c-13.255%200-24%2010.745-24%2024s10.745%2024%2024%2024%2024-10.745%2024-24-10.745-24-24-24m96%20114v-20a6%206%200%200%200-6-6H102a6%206%200%200%200-6%206v20a6%206%200%200%200%206%206h180a6%206%200%200%200%206-6z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M384%20112v352c0%2026.51-21.49%2048-48%2048H48c-26.51%200-48-21.49-48-48V112c0-26.51%2021.49-48%2048-48h80c0-35.29%2028.71-64%2064-64s64%2028.71%2064%2064h80c26.51%200%2048%2021.49%2048%2048zM192%2040c-13.255%200-24%2010.745-24%2024s10.745%2024%2024%2024%2024-10.745%2024-24-10.745-24-24-24m96%20114v-20a6%206%200%200%200-6-6H102a6%206%200%200%200-6%206v20a6%206%200%200%200%206%206h180a6%206%200%200%200%206-6z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-clipboard-check {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M336%2064h-80c0-35.3-28.7-64-64-64s-64%2028.7-64%2064H48C21.5%2064%200%2085.5%200%20112v352c0%2026.5%2021.5%2048%2048%2048h288c26.5%200%2048-21.5%2048-48V112c0-26.5-21.5-48-48-48zM192%2040c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024-24-10.7-24-24%2010.7-24%2024-24zm121.2%20231.8l-143%20141.8c-4.7%204.7-12.3%204.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1%20285c4.7-4.7%2012.3-4.6%2017%20.1l46%2046.4%20106-105.2c4.7-4.7%2012.3-4.6%2017%20.1l28.2%2028.4c4.7%204.8%204.6%2012.3-.1%2017z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M336%2064h-80c0-35.3-28.7-64-64-64s-64%2028.7-64%2064H48C21.5%2064%200%2085.5%200%20112v352c0%2026.5%2021.5%2048%2048%2048h288c26.5%200%2048-21.5%2048-48V112c0-26.5-21.5-48-48-48zM192%2040c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024-24-10.7-24-24%2010.7-24%2024-24zm121.2%20231.8l-143%20141.8c-4.7%204.7-12.3%204.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1%20285c4.7-4.7%2012.3-4.6%2017%20.1l46%2046.4%20106-105.2c4.7-4.7%2012.3-4.6%2017%20.1l28.2%2028.4c4.7%204.8%204.6%2012.3-.1%2017z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-align-left {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M12.83%20352h262.34A12.82%2012.82%200%200%200%20288%20339.17v-38.34A12.82%2012.82%200%200%200%20275.17%20288H12.83A12.82%2012.82%200%200%200%200%20300.83v38.34A12.82%2012.82%200%200%200%2012.83%20352zm0-256h262.34A12.82%2012.82%200%200%200%20288%2083.17V44.83A12.82%2012.82%200%200%200%20275.17%2032H12.83A12.82%2012.82%200%200%200%200%2044.83v38.34A12.82%2012.82%200%200%200%2012.83%2096zM432%20160H16a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h416a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16zm0%20256H16a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h416a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M12.83%20352h262.34A12.82%2012.82%200%200%200%20288%20339.17v-38.34A12.82%2012.82%200%200%200%20275.17%20288H12.83A12.82%2012.82%200%200%200%200%20300.83v38.34A12.82%2012.82%200%200%200%2012.83%20352zm0-256h262.34A12.82%2012.82%200%200%200%20288%2083.17V44.83A12.82%2012.82%200%200%200%20275.17%2032H12.83A12.82%2012.82%200%200%200%200%2044.83v38.34A12.82%2012.82%200%200%200%2012.83%2096zM432%20160H16a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h416a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16zm0%20256H16a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h416a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-github {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20496%20512%22%3E%3Cpath%20d%3D%22M165.9%20397.4c0%202-2.3%203.6-5.2%203.6-3.3.3-5.6-1.3-5.6-3.6%200-2%202.3-3.6%205.2-3.6%203-.3%205.6%201.3%205.6%203.6zm-31.1-4.5c-.7%202%201.3%204.3%204.3%204.9%202.6%201%205.6%200%206.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2%202.3zm44.2-1.7c-2.9.7-4.9%202.6-4.6%204.9.3%202%202.9%203.3%205.9%202.6%202.9-.7%204.9-2.6%204.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8%208C106.1%208%200%20113.3%200%20252c0%20110.9%2069.8%20205.8%20169.5%20239.2%2012.8%202.3%2017.3-5.6%2017.3-12.1%200-6.2-.3-40.4-.3-61.4%200%200-70%2015-84.7-29.8%200%200-11.4-29.1-27.8-36.6%200%200-22.9-15.7%201.6-15.4%200%200%2024.9%202%2038.6%2025.8%2021.9%2038.6%2058.6%2027.5%2072.9%2020.9%202.3-16%208.8-27.1%2016-33.7-55.9-6.2-112.3-14.3-112.3-110.5%200-27.5%207.6-41.3%2023.6-58.9-2.6-6.5-11.1-33.3%202.6-67.9%2020.9-6.5%2069%2027%2069%2027%2020-5.6%2041.5-8.5%2062.8-8.5s42.8%202.9%2062.8%208.5c0%200%2048.1-33.6%2069-27%2013.7%2034.7%205.2%2061.4%202.6%2067.9%2016%2017.7%2025.8%2031.5%2025.8%2058.9%200%2096.5-58.9%20104.2-114.8%20110.5%209.2%207.9%2017%2022.9%2017%2046.4%200%2033.7-.3%2075.4-.3%2083.6%200%206.5%204.6%2014.4%2017.3%2012.1C428.2%20457.8%20496%20362.9%20496%20252%20496%20113.3%20383.5%208%20244.8%208zM97.2%20352.9c-1.3%201-1%203.3.7%205.2%201.6%201.6%203.9%202.3%205.2%201%201.3-1%201-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7%201.3.3%202.9%202.3%203.9%201.6%201%203.6.7%204.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4%2035.6c-1.6%201.3-1%204.3%201.3%206.2%202.3%202.3%205.2%202.6%206.5%201%201.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6%201-1.6%203.6%200%205.9%201.6%202.3%204.3%203.3%205.6%202.3%201.6-1.3%201.6-3.9%200-6.2-1.4-2.3-4-3.3-5.6-2z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20496%20512%22%3E%3Cpath%20d%3D%22M165.9%20397.4c0%202-2.3%203.6-5.2%203.6-3.3.3-5.6-1.3-5.6-3.6%200-2%202.3-3.6%205.2-3.6%203-.3%205.6%201.3%205.6%203.6zm-31.1-4.5c-.7%202%201.3%204.3%204.3%204.9%202.6%201%205.6%200%206.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2%202.3zm44.2-1.7c-2.9.7-4.9%202.6-4.6%204.9.3%202%202.9%203.3%205.9%202.6%202.9-.7%204.9-2.6%204.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8%208C106.1%208%200%20113.3%200%20252c0%20110.9%2069.8%20205.8%20169.5%20239.2%2012.8%202.3%2017.3-5.6%2017.3-12.1%200-6.2-.3-40.4-.3-61.4%200%200-70%2015-84.7-29.8%200%200-11.4-29.1-27.8-36.6%200%200-22.9-15.7%201.6-15.4%200%200%2024.9%202%2038.6%2025.8%2021.9%2038.6%2058.6%2027.5%2072.9%2020.9%202.3-16%208.8-27.1%2016-33.7-55.9-6.2-112.3-14.3-112.3-110.5%200-27.5%207.6-41.3%2023.6-58.9-2.6-6.5-11.1-33.3%202.6-67.9%2020.9-6.5%2069%2027%2069%2027%2020-5.6%2041.5-8.5%2062.8-8.5s42.8%202.9%2062.8%208.5c0%200%2048.1-33.6%2069-27%2013.7%2034.7%205.2%2061.4%202.6%2067.9%2016%2017.7%2025.8%2031.5%2025.8%2058.9%200%2096.5-58.9%20104.2-114.8%20110.5%209.2%207.9%2017%2022.9%2017%2046.4%200%2033.7-.3%2075.4-.3%2083.6%200%206.5%204.6%2014.4%2017.3%2012.1C428.2%20457.8%20496%20362.9%20496%20252%20496%20113.3%20383.5%208%20244.8%208zM97.2%20352.9c-1.3%201-1%203.3.7%205.2%201.6%201.6%203.9%202.3%205.2%201%201.3-1%201-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7%201.3.3%202.9%202.3%203.9%201.6%201%203.6.7%204.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4%2035.6c-1.6%201.3-1%204.3%201.3%206.2%202.3%202.3%205.2%202.6%206.5%201%201.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6%201-1.6%203.6%200%205.9%201.6%202.3%204.3%203.3%205.6%202.3%201.6-1.3%201.6-3.9%200-6.2-1.4-2.3-4-3.3-5.6-2z%22%2F%3E%3C%2Fsvg%3E");
}

i.ai-google-scholar {
  mask-image: url("data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EGoogle%20Scholar%3C%2Ftitle%3E%3Cpath%20d%3D%22M5.242%2013.769L0%209.5%2012%200l12%209.5-5.242%204.269C17.548%2011.249%2014.978%209.5%2012%209.5c-2.977%200-5.548%201.748-6.758%204.269zM12%2010a7%207%200%201%200%200%2014%207%207%200%200%200%200-14z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EGoogle%20Scholar%3C%2Ftitle%3E%3Cpath%20d%3D%22M5.242%2013.769L0%209.5%2012%200l12%209.5-5.242%204.269C17.548%2011.249%2014.978%209.5%2012%209.5c-2.977%200-5.548%201.748-6.758%204.269zM12%2010a7%207%200%201%200%200%2014%207%207%200%200%200%200-14z%22%2F%3E%3C%2Fsvg%3E");
}

i.fa-arrows-alt-h {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--%20Font%20Awesome%20Free%205.15.4%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20--%3E%3Cpath%20d%3D%22M377.941%20169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029%20239.029c-9.373%209.373-9.373%2024.568%200%2033.941l86.059%2086.059c15.119%2015.119%2040.971%204.411%2040.971-16.971V296h243.882v46.059c0%2021.382%2025.851%2032.09%2040.971%2016.971l86.059-86.059c9.373-9.373%209.373-24.568%200-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971%2016.97z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--%20Font%20Awesome%20Free%205.15.4%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20--%3E%3Cpath%20d%3D%22M377.941%20169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029%20239.029c-9.373%209.373-9.373%2024.568%200%2033.941l86.059%2086.059c15.119%2015.119%2040.971%204.411%2040.971-16.971V296h243.882v46.059c0%2021.382%2025.851%2032.09%2040.971%2016.971l86.059-86.059c9.373-9.373%209.373-24.568%200-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971%2016.97z%22%2F%3E%3C%2Fsvg%3E");
}

/******************************************************************************
 * Sticky / floating Table of Contents with Collapsible Functionality
 ******************************************************************************/
.toc-layout .toc-content {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: no-preference) {
  .toc-layout .toc-content {
    transition: max-width 0.3s ease;
  }
}
.toc-layout.toc-collapsed .toc-content {
  max-width: 100%;
  flex: 0 0 100%;
}
@media (min-width: 992px) {
  .toc-layout.toc-collapsed.post--sidenotes .toc-content {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
.toc-layout.toc-collapsed .toc-sidebar-col {
  display: none;
}

.toc-layout .toc-content pre,
.toc-layout .toc-content table {
  max-width: 100%;
}
.toc-layout .toc-content pre {
  overflow-x: auto;
}
.toc-layout .toc-content mjx-container[display=true],
.toc-layout .toc-content .MathJax_Display,
.toc-layout .toc-content .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.toc-sidebar {
  position: sticky;
  top: 5rem;
  align-self: start;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .toc-sidebar {
    transition: opacity 0.2s ease;
  }
}
.toc-sidebar.is-empty {
  display: none;
}
.toc-sidebar.is-collapsed {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.toc-layout.toc-collapsed .toc-sidebar-col {
  display: block;
}

.toc-layout.toc-collapsed .toc-content {
  flex: 1 1 0%;
  max-width: 100%;
}

.post.toc-layout > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.post.toc-layout > .row > .toc-sidebar-col {
  align-self: stretch;
}

.toc-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  gap: var(--s-2);
}

.toc-sidebar__title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--global-text-color-light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.toc-toggle-btn {
  display: none;
}

.toc-sidebar--foldable .toc-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--global-text-color-light);
  cursor: pointer;
  transition: color var(--t-fast, 140ms ease);
}
.toc-sidebar--foldable .toc-toggle-btn:hover {
  color: var(--global-theme-color);
}
.toc-sidebar--foldable .toc-toggle-btn i {
  font-size: 0.7rem;
}
@media (prefers-reduced-motion: no-preference) {
  .toc-sidebar--foldable .toc-toggle-btn.is-collapsed i {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
  }
}

.toc-collapsed-toggle {
  display: none !important;
}

.toc-collapsed-toggle--foldable {
  position: fixed;
  right: 30px;
  bottom: 104px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: var(--global-bg-color);
  border: 1px solid var(--global-divider-color);
  color: var(--global-text-color);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: none;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .toc-collapsed-toggle--foldable {
    transition: all 0.2s ease;
  }
}
.toc-collapsed-toggle--foldable.toc-collapsed-toggle--visible {
  display: flex;
}
.toc-collapsed-toggle--foldable.toc-collapsed-toggle--hidden {
  display: none;
}
.toc-collapsed-toggle--foldable:hover {
  background-color: var(--global-theme-color);
  color: white;
  border-color: var(--global-theme-color);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.toc-collapsed-toggle--foldable i {
  font-size: 1.25rem;
}
@media (max-width: 991px) {
  .toc-collapsed-toggle--foldable {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .toc-collapsed-toggle--foldable {
    right: 20px;
    bottom: 70px;
    width: 40px;
    height: 40px;
  }
}

.toc {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--global-divider-color);
}
.toc li {
  margin: 0;
}
.toc li.has-children > .toc-section-toggle {
  display: none;
}
.toc li.section-collapsed > ul {
  display: none;
}
.toc ul ul {
  margin-top: 0;
  margin-left: 6px;
  padding-left: 0;
}
.toc a {
  display: block;
  padding: 6px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--global-text-color-light);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.14s cubic-bezier(0.22, 1, 0.36, 1), border-left-color 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
.toc a:hover, .toc a.is-active {
  color: var(--global-theme-color);
  border-left-color: var(--global-theme-color);
}
.toc a.is-active {
  font-weight: 600;
}

/* --- Responsive: narrow columns (992-1200) and tablet/mobile ------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .toc a {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    font-size: var(--fs-xs);
    line-height: 1.35;
    padding: 5px 12px;
  }
}
/*******************************************************************************
 * Enhancements for regular blog posts (non-distill).
 ******************************************************************************/
/*******************************************************************************
 * Enhanced Post Header Styles
 ******************************************************************************/
.post:has(.post-content) .post-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--global-divider-color);
}
.post:has(.post-content) .post-header .post-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  color: var(--global-text-color);
}

.post-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--global-text-color);
}
.post-content p {
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .post-content p {
    text-align: left;
    hyphens: none;
  }
}
.post-content h2 + p, .post-content h3 + p, .post-content h4 + p {
  margin-top: 0;
}
.post-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
  padding-bottom: 0;
  border-bottom: none; /* design kit: no decorative rule under h2 */
  color: var(--global-text-color);
}
.post-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: var(--global-text-color);
}
.post-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--global-text-color);
}
.post-content h5, .post-content h6 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--global-text-color);
}
.post-content strong {
  font-weight: 600;
  color: var(--global-text-color);
}
.post-content a {
  color: var(--global-theme-color);
  text-decoration: none;
  border-bottom: 1px dashed var(--global-theme-color);
}
@media (prefers-reduced-motion: no-preference) {
  .post-content a {
    transition: all 0.2s ease;
  }
}
.post-content a:hover {
  border-bottom-style: solid;
}

.post-content .table-responsive {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.post-content .table-responsive > table {
  margin: 0;
}
.post-content table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--global-text-color);
  background-color: var(--global-bg-color);
}
.post-content table th, .post-content table td {
  overflow-wrap: normal;
  word-break: normal;
}
.post-content table thead {
  background-color: var(--global-code-bg-color);
  border-bottom: 1px solid var(--global-divider-color);
}
.post-content table thead th {
  padding: 0.85rem 1rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: var(--global-text-color);
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0.01em;
  border-color: var(--global-divider-color);
}
.post-content table thead th[style*="text-align: center"] {
  text-align: center !important;
}
.post-content table thead th[style*="text-align: right"] {
  text-align: right !important;
}
.post-content table tbody tr {
  border-bottom: 1px solid var(--global-divider-color);
}
@media (prefers-reduced-motion: no-preference) {
  .post-content table tbody tr {
    transition: background-color 0.15s ease;
  }
}
.post-content table tbody tr:hover {
  background-color: var(--global-code-bg-color);
}
.post-content table tbody tr:last-child {
  border-bottom: none;
}
.post-content table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  color: var(--global-text-color);
  border-color: var(--global-divider-color);
}
.post-content table tbody td[style*="text-align: center"] {
  text-align: center !important;
}
.post-content table tbody td[style*="text-align: right"] {
  text-align: right !important;
}
.post-content table tbody td .MathJax, .post-content table tbody td mjx-container {
  font-size: 0.9em !important;
  overflow-x: auto;
  max-width: 100%;
}
.post-content table.striped tbody tr:nth-child(even) {
  background-color: var(--global-code-bg-color);
}
.post-content table.compact {
  font-size: 0.8125rem;
}
.post-content table.compact th, .post-content table.compact td {
  padding: 0.4rem 0.75rem;
}
.post-content table code {
  font-size: 0.85em;
  padding: 0.1rem 0.3rem;
  white-space: nowrap;
}
.post-content :not(pre) > code {
  padding: 0.15rem 0.35rem;
  font-size: 0.875em;
  word-break: break-word;
  background-color: var(--global-code-bg-color);
  border-radius: 3px;
}
.post-content .footnotes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--global-divider-color);
  font-size: 0.8125rem;
}
.post-content .footnotes ol {
  padding-left: 1.25rem;
}
.post-content a.footnote,
.post-content a.reversefootnote,
.post-content a.footnote-backlink {
  text-decoration: none;
}

.footnote-preview {
  position: fixed;
  z-index: 1000;
  max-width: min(520px, 92vw);
  max-height: min(320px, 60vh);
  overflow: auto;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid var(--global-divider-color);
  background: var(--global-bg-color);
  box-shadow: none;
  color: var(--global-text-color);
}
.footnote-preview p:last-child {
  margin-bottom: 0;
}

.mermaid {
  margin: 1rem 0;
  text-align: center;
}
.mermaid svg {
  max-width: 100%;
  height: auto;
}

.details-block,
.post-content details {
  margin: 1rem 0;
  border: 1px solid var(--global-divider-color);
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: var(--global-card-bg-color);
}
.details-block summary,
.post-content details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.35rem 0;
  list-style: none;
  outline: none;
}
.details-block summary::-webkit-details-marker,
.post-content details summary::-webkit-details-marker {
  display: none;
}
.details-block summary::before,
.post-content details summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  transform: translateY(-1px);
}
.details-block[open] summary::before,
.post-content details[open] summary::before {
  content: "▾";
}
.details-block .details-content,
.post-content details .details-content {
  padding: 0.25rem 0 0.75rem;
}

.post-references {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--global-divider-color);
}
.post-references h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.post-references ol.bibliography {
  padding-left: 1.25rem;
}
.post-references li.reference {
  margin-bottom: 0.5rem;
}

/*******************************************************************************
 * Blog index language tabs
 ******************************************************************************/
.lang-switcher {
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.lang-switcher .nav {
  display: inline-flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
  border: none;
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
.lang-switcher .nav-item {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
.lang-switcher .nav-item::before, .lang-switcher .nav-item::after {
  content: none !important;
}
.lang-switcher .nav-link {
  position: relative;
  padding: 0.1rem 0 0.35rem;
  margin: 0;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: var(--global-text-color) !important;
  font-size: 0.8125rem;
  opacity: 0.7;
  transition: opacity 160ms ease, color 160ms ease;
}
.lang-switcher .nav-link:hover {
  opacity: 1;
  color: var(--global-text-color) !important;
}
.lang-switcher .nav-link:focus-visible {
  outline: 2px solid var(--global-theme-color);
  outline-offset: 3px;
  border-radius: 4px;
}
.lang-switcher .nav-link::before {
  content: "";
  position: absolute;
  bottom: 0.15rem;
  left: 0;
  width: 100%;
  height: 2px;
  transform: none;
  border-radius: 999px;
  background: transparent;
}
.lang-switcher .nav-link::after {
  content: none !important;
}
.lang-switcher .nav-link.active {
  opacity: 1;
}
.lang-switcher .nav-link.active::before {
  background: var(--global-theme-color);
}

@media (min-width: 992px) {
  .post.post--sidenotes .footnotes {
    display: none;
  }
  .post.post--sidenotes .sidenotes-col {
    position: relative;
  }
  .post.post--sidenotes .sidenotes-rail {
    position: relative;
    min-height: 1px;
  }
  .post.post--sidenotes .sidenote {
    position: absolute;
    left: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--global-text-color-light);
    padding-right: 0.75rem;
    border-right: 2px solid var(--global-divider-color);
    text-align: right;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .post.post--sidenotes .sidenote.is-active {
    color: var(--global-text-color);
    border-right-color: var(--global-theme-color);
  }
}

.post-links {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  background-color: transparent;
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.post-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background-color: transparent;
  border: 1px solid var(--global-divider-color);
  border-radius: 5px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--global-text-color);
  box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
  .post-links a {
    transition: all 0.2s ease;
  }
}
.post-links a:hover {
  color: white;
  background-color: var(--global-theme-color);
  border-color: var(--global-theme-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (prefers-reduced-motion: no-preference) {
  .post-links a:hover {
    transform: translateY(-1px);
  }
}
.post-links a img {
  margin: 0 !important;
}

.post .post-links {
  margin-bottom: 1.75rem;
}

/*******************************************************************************
 * Blog Page Time and Tag Button Styles
 * (Mixin defined in _mixins.scss)
 ******************************************************************************/
a[data-filter-link].active-filter {
  background-color: var(--global-theme-color) !important;
  border-color: var(--global-theme-color) !important;
  color: white !important;
  transition: all 0.2s ease;
}
a[data-filter-link].active-filter:hover {
  background-color: var(--global-theme-color) !important;
  border-color: var(--global-theme-color) !important;
  color: white !important;
  opacity: 0.9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/*******************************************************************************
 * Enhanced Code Block Styling
 ******************************************************************************/
.post-content .highlight {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--global-shadow-sm);
  border: 1px solid var(--global-divider-color);
  background-color: var(--global-code-bg-color);
}
@media (prefers-reduced-motion: no-preference) {
  .post-content .highlight {
    transition: box-shadow 0.2s ease;
  }
  .post-content .highlight:hover {
    box-shadow: var(--global-shadow-md);
  }
}
.post-content .highlight pre {
  margin: 0;
  padding: 1.25rem 1.5rem;
  padding-top: 2.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.post-content .highlight pre::-webkit-scrollbar {
  height: 6px;
}
.post-content .highlight pre::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
.post-content .highlight pre::-webkit-scrollbar-thumb {
  background: var(--global-divider-color);
  border-radius: 3px;
}
.post-content .highlight pre::-webkit-scrollbar-thumb:hover {
  background: var(--global-text-color-light);
}
.post-content .highlight pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
}
.post-content .highlight[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--global-text-color-light);
  background: linear-gradient(to bottom, var(--global-code-bg-color), transparent);
  border-bottom: 1px solid var(--global-divider-color);
}
.post-content pre:not(.highlight pre) {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background-color: var(--global-code-bg-color);
  border-radius: 12px;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  border: 1px solid var(--global-divider-color);
  box-shadow: var(--global-shadow-sm);
}
.post-content .highlighter-rouge {
  margin: 1.25rem 0;
}
.post-content .highlighter-rouge.language-plaintext .highlight {
  background-color: var(--global-code-bg-color);
}
.post-content .lineno {
  color: var(--global-text-color-light);
  opacity: 0.5;
  padding-right: 1rem;
  user-select: none;
  text-align: right;
  min-width: 2rem;
  display: inline-block;
}
.post-content .highlight .err {
  color: var(--global-text-color);
  background-color: transparent !important;
  border: none !important;
}
.post-content .highlight .gd {
  color: var(--global-text-color);
  background-color: transparent !important;
}
.post-content .highlight .gi {
  color: var(--global-text-color);
  background-color: transparent !important;
}
.post-content .highlight .hll {
  background-color: var(--global-code-bg-color) !important;
}

/*******************************************************************************
 * Global Rouge Theme Override (for all highlight blocks, not just post-content)
 ******************************************************************************/
.highlight .err {
  color: inherit !important;
  background-color: transparent !important;
  border: none !important;
}
.highlight .gd {
  background-color: transparent !important;
}
.highlight .gi {
  background-color: transparent !important;
}
.highlight .hll {
  background-color: var(--global-code-bg-color) !important;
}

/*******************************************************************************
 * Enhanced Math/LaTeX Styling
 ******************************************************************************/
.post-content .MathJax_Display,
.post-content mjx-container[display=true],
.post-content .katex-display {
  margin: 1.5rem 0;
  padding: 0.5rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.post-content .MathJax,
.post-content mjx-container:not([display=true]),
.post-content .katex:not(.katex-display .katex) {
  font-size: 1em;
}
.post-content .MathJax_ref,
.post-content mjx-mrow.MJX-TEX {
  font-size: 0.9em;
}
.post-content td .MathJax,
.post-content td mjx-container,
.post-content td .katex, .post-content th .MathJax,
.post-content th mjx-container,
.post-content th .katex {
  font-size: 0.92em !important;
}
.post-content li .MathJax_Display,
.post-content li mjx-container[display=true],
.post-content li .katex-display {
  margin-left: 0;
  margin-right: 0;
}
.post-content .MathJax .mbox,
.post-content mjx-mrow[style*=border] {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/*******************************************************************************
 * Figure and Image Enhancements
 ******************************************************************************/
.post-content figure {
  margin: 2.5rem 0;
  text-align: center;
  background: transparent;
  padding: 0;
}
.post-content figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--global-shadow-sm);
  cursor: zoom-in;
  /* design: no scroll-linked parallax, no entrance choreography */
}
.post-content figure figcaption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--global-text-color-light);
  font-style: italic;
  line-height: 1.6;
  padding: 0.5rem 1.5rem;
  background-color: var(--global-code-bg-color);
  border-radius: 0 0 8px 8px;
  display: inline-block;
  max-width: 90%;
}
.post-content figure figcaption a {
  color: var(--global-theme-color);
  border-bottom: none;
}
.post-content figure figcaption a:hover {
  text-decoration: underline;
}
.post-content p > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2.5rem auto;
  border-radius: var(--r-sm);
  box-shadow: var(--global-shadow-sm);
  cursor: zoom-in;
  /* design: flat paper; no hover scale */
}
.post-content .img-caption {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--global-text-color-light);
  font-style: italic;
  margin-top: -1rem;
  margin-bottom: 2rem;
}
.post-content img[data-zoomable] {
  position: relative;
  cursor: zoom-in;
}

/*******************************************************************************
 * Blockquote Enhancements
 ******************************************************************************/
.post-content blockquote {
  margin: 2rem 0;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-left: 2px solid var(--global-theme-color);
  background: none; /* design: flat paper, no fill */
  border-radius: 0;
  font-family: "Fraunces", "Noto Serif SC", "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--global-text-color-light);
}
.post-content blockquote::before {
  content: none;
}
.post-content blockquote { /* kill giant Georgia quote mark */ }
.post-content blockquote p {
  margin: 0;
  font-style: italic;
  line-height: 1.7;
}
.post-content blockquote p:not(:last-child) {
  margin-bottom: 0.75rem;
}
.post-content blockquote blockquote {
  margin: 1rem 0;
  border-left-color: var(--global-text-color-light);
  padding: 0.5rem 0 0.5rem 1rem;
}
.post-content blockquote.note, .post-content blockquote.info {
  border-left-color: #3498db;
}
.post-content blockquote.warning {
  border-left-color: #f39c12;
}
.post-content blockquote.danger, .post-content blockquote.error {
  border-left-color: #e74c3c;
}
.post-content blockquote.success, .post-content blockquote.tip {
  border-left-color: #2ecc71;
}

/*******************************************************************************
 * List Enhancements
 ******************************************************************************/
.post-content ul, .post-content ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.post-content ul li, .post-content ol li {
  margin-bottom: 0.35rem;
  line-height: 1.7;
}
.post-content ul li ul, .post-content ul li ol, .post-content ol li ul, .post-content ol li ol {
  margin: 0.5rem 0;
}
.post-content ul.task-list {
  list-style: none;
  padding-left: 0;
}
.post-content ul.task-list li {
  padding-left: 1.5rem;
  position: relative;
}
.post-content ul.task-list li input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0.35rem;
}

/*******************************************************************************
 * Additional UX Enhancements
 ******************************************************************************/
.back-to-top {
  position: fixed;
  bottom: 50px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--global-theme-color);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .back-to-top {
    transform: translateY(20px);
    transition: all 0.3s ease;
  }
  .back-to-top.is-visible {
    transform: translateY(0);
  }
  .back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
}
.back-to-top i {
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media print {
  .toc-sidebar,
  .toc-collapsed-toggle,
  .back-to-top,
  .post-links {
    display: none !important;
  }
  .post-content {
    font-size: 12pt;
    line-height: 1.5;
  }
  .post-content a {
    color: inherit;
    text-decoration: underline;
  }
  .post-content img {
    max-width: 100%;
    page-break-inside: avoid;
  }
  .post-content h2, .post-content h3, .post-content h4 {
    page-break-after: avoid;
  }
  .post-content pre, .post-content blockquote {
    page-break-inside: avoid;
  }
}
.post-content hr {
  margin: 2.5rem 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--global-divider-color), transparent);
}

.post-content dl {
  margin: 1.5rem 0;
}
.post-content dl dt {
  font-weight: 600;
  color: var(--global-text-color);
  margin-top: 1rem;
}
.post-content dl dt:first-child {
  margin-top: 0;
}
.post-content dl dd {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--global-text-color-light);
}

.post-content kbd {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--global-text-color);
  background-color: var(--global-code-bg-color);
  border: 1px solid var(--global-divider-color);
  border-radius: var(--r-xs);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.post-content abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: none;
}

/*******************************************************************************
 * Code Block Copy & Wrap Buttons
 ******************************************************************************/
pre {
  position: relative;
}
pre button.copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--global-text-color-light);
  background-color: var(--global-bg-color);
  border: 1px solid var(--global-divider-color);
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
  z-index: 10;
  box-shadow: var(--global-shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
  pre button.copy {
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }
}
pre button.copy i {
  font-size: 0.85em;
}
pre button.copy:hover {
  background-color: var(--global-theme-color);
  border-color: var(--global-theme-color);
  color: white;
  transform: scale(1.05);
}
pre button.copy:active {
  transform: scale(0.95);
}
pre button.wrap-toggle {
  position: absolute;
  top: 0.5rem;
  right: 2.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: var(--global-text-color-light);
  background-color: var(--global-bg-color);
  border: 1px solid var(--global-divider-color);
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
  z-index: 10;
  box-shadow: var(--global-shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
  pre button.wrap-toggle {
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }
}
pre button.wrap-toggle i {
  font-size: 0.85em;
}
pre button.wrap-toggle:hover {
  background-color: var(--global-code-bg-color);
  color: var(--global-theme-color);
}
pre:hover button.copy,
pre:hover button.wrap-toggle {
  opacity: 1;
}
pre.wrapped code {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*******************************************************************************
 * Enhanced Link Styling
 ******************************************************************************/
.post-content a[href^=http]:not([href*="hbell99.github.io"]):not(.no-external-icon)::after {
  content: " ↗";
  font-size: 0.75em;
  opacity: 0.7;
  vertical-align: super;
}
.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
  position: relative;
}
.post-content h2 .anchor-link, .post-content h3 .anchor-link, .post-content h4 .anchor-link, .post-content h5 .anchor-link, .post-content h6 .anchor-link {
  position: absolute;
  left: -1.5rem;
  opacity: 0;
  color: var(--global-text-color-light);
  text-decoration: none;
  font-weight: 400;
}
@media (prefers-reduced-motion: no-preference) {
  .post-content h2 .anchor-link, .post-content h3 .anchor-link, .post-content h4 .anchor-link, .post-content h5 .anchor-link, .post-content h6 .anchor-link {
    transition: opacity 0.2s ease;
  }
}
.post-content h2 .anchor-link:hover, .post-content h3 .anchor-link:hover, .post-content h4 .anchor-link:hover, .post-content h5 .anchor-link:hover, .post-content h6 .anchor-link:hover {
  color: var(--global-theme-color);
}
.post-content h2:hover .anchor-link, .post-content h3:hover .anchor-link, .post-content h4:hover .anchor-link, .post-content h5:hover .anchor-link, .post-content h6:hover .anchor-link {
  opacity: 1;
}

/*******************************************************************************
 * Smooth Scroll Offset for Fixed Header
 ******************************************************************************/
html {
  scroll-padding-top: 80px;
}

/*******************************************************************************
 * Focus States for Accessibility
 ******************************************************************************/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--global-theme-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/*******************************************************************************
 * Enhanced Inline Code
 ******************************************************************************/
.post-content :not(pre) > code {
  padding: 0.2em 0.4em;
  font-size: 0.875em;
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  background-color: var(--global-code-bg-color);
  border-radius: 4px;
  border: 1px solid var(--global-divider-color);
  word-break: break-word;
}

/*******************************************************************************
 * Pseudocode.js (algorithmic blocks)
 ******************************************************************************/
.pseudocode {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--global-code-bg-color);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.pseudocode .ps-root {
  color: var(--global-text-color);
}

.pseudocode .ps-root .ps-algorithm {
  border-top-color: var(--global-text-color);
  border-bottom-color: var(--global-text-color);
}

.pseudocode .ps-root .ps-algorithm.with-caption > .ps-line:first-child {
  border-bottom-color: var(--global-text-color);
}

.pseudocode .ps-root .ps-algorithmic.with-scopelines div.ps-block {
  border-left-color: var(--global-text-color);
}

/*******************************************************************************
 * Style overrides for distill blog posts.
 ******************************************************************************/
d-byline {
  border-top-color: var(--global-divider-color) !important;
}

d-byline h3 {
  color: var(--global-text-color) !important;
}

d-byline a, d-article d-byline a {
  color: var(--global-text-color) !important;
}
d-byline a:hover, d-article d-byline a:hover {
  color: var(--global-hover-color) !important;
}

d-article {
  border-top-color: var(--global-divider-color) !important;
}
d-article p, d-article h1, d-article h2, d-article h3, d-article h4, d-article h5, d-article h6, d-article li, d-article table {
  color: var(--global-text-color) !important;
}
d-article h1, d-article h2, d-article hr, d-article table, d-article table th, d-article table td {
  border-bottom-color: var(--global-divider-color) !important;
}
d-article a {
  color: var(--global-theme-color) !important;
}
d-article a:hover {
  color: var(--global-theme-color) !important;
}
d-article b i {
  display: inline;
}
d-article d-contents {
  align-self: start;
  grid-column: 1/4;
  grid-row: auto/span 4;
  justify-self: end;
  margin-top: 0em;
  padding-left: 2em;
  padding-right: 3em;
  border-right: 1px solid var(--global-divider-color);
  width: max(70%, 300px);
  margin-right: 0px;
  margin-top: 0em;
  display: grid;
  grid-template-columns: minmax(8px, 1fr) [toc] auto minmax(8px, 1fr) [toc-line] 1px minmax(32px, 2fr);
}
d-article d-contents nav {
  grid-column: toc;
}
d-article d-contents nav a {
  border-bottom: none !important;
}
d-article d-contents nav a:hover {
  border-bottom: 1px solid var(--global-text-color) !important;
}
d-article d-contents nav h3 {
  margin-top: 0;
  margin-bottom: 1em;
}
d-article d-contents nav div {
  display: block;
  outline: none;
  margin-bottom: 0.8em;
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
}
d-article d-contents nav ul {
  padding-left: 1em;
  margin-top: 0;
  margin-bottom: 6px;
  list-style-type: none;
}
d-article d-contents nav ul li {
  margin-bottom: 0.25em;
}
d-article d-contents .figcaption {
  line-height: 1.4em;
}
d-article d-contents toc-line {
  border-right: 1px solid var(--global-divider-color);
  grid-column: toc-line;
}
d-article d-footnote {
  scroll-margin-top: 66px;
}

d-appendix {
  border-top-color: var(--global-divider-color) !important;
  color: var(--global-distill-app-color) !important;
}
d-appendix h3, d-appendix li, d-appendix span {
  color: var(--global-distill-app-color) !important;
}
d-appendix a, d-appendix a.footnote-backlink {
  color: var(--global-distill-app-color) !important;
}
d-appendix a:hover, d-appendix a.footnote-backlink:hover {
  color: var(--global-hover-color) !important;
}

@media (max-width: 1024px) {
  d-article d-contents {
    display: block;
    grid-column-start: 2;
    grid-column-end: -2;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
    padding-top: 0.5em;
    width: 100%;
    border: 1px solid var(--global-divider-color);
  }
  d-article d-contents nav {
    grid-column: none;
  }
}
/*******************************************************************************
 * Xihuai Wang — Refined Design System (site implementation)
 *
 * This file is intentionally imported LAST in main.scss so it wins against
 * the legacy al-folio styles. It reworks the visual language into an
 * editorial/academic-journal feel while keeping the existing Jekyll
 * layouts intact.
 ******************************************************************************/
/* ============================================================================
 * 1. Typography base
 * ========================================================================== */
html {
  color-scheme: light dark;
}

body {
  font-family: var(--font-serif);
  background: var(--bg);
  color: var(--fg);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection);
  color: var(--fg);
}

/* Headings — serif display with optical sizing */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.015em;
}

h1, .h1 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  margin: 0 0 var(--s-5); /* colors_and_type.css:183 */
}

h2, .h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-variation-settings: "opsz" 72;
  margin: var(--s-7) 0 var(--s-4); /* colors_and_type.css:192 */
}

h3, .h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: var(--s-6) 0 var(--s-3); /* colors_and_type.css:200 */
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: var(--s-5) 0 var(--s-2); /* colors_and_type.css:208 */
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--fg);
  margin: var(--s-4) 0 var(--s-2); /* colors_and_type.css:214 */
}

h6, .h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin: var(--s-4) 0 var(--s-2); /* colors_and_type.css:223 */
}

/* Body copy — colors_and_type.css:251-278 */
p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
  max-width: var(--prose-max);
}

/* Post content gets its own wider prose cap (--post-prose-max). The global
   p max-width above was clamping individual paragraphs to 68ch even when the
   container had grown to 86ch, so widen it inside .post-content. */
.post-content p,
.post-content ul,
.post-content ol {
  max-width: var(--post-prose-max);
}

/* Post diagrams are mostly white-background exports; in dark mode a bare
   white rectangle glares against the near-black page. Keep the white ground
   (the plots need it) but frame it as a soft card. */
html[data-theme=dark] .post-content img:not([src$=".svg"]) {
  background: #fff;
  padding: var(--s-2);
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--rule);
}

p.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

/* Links — understated underline */
a {
  color: var(--link);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}

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

/* Inline code */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ============================================================================
 * 2. Utilities (match kit)
 * ========================================================================== */
.text-display {
  font-family: var(--font-display);
}

.text-serif {
  font-family: var(--font-serif);
}

.text-sans {
  font-family: var(--font-sans);
}

.text-mono {
  font-family: var(--font-mono);
}

.text-zh {
  font-family: var(--font-zh);
}

.muted {
  color: var(--fg-3);
}

.very-muted {
  color: var(--fg-4);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-3);
}

.kicker,
.mono-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

.mono-meta {
  text-transform: lowercase;
}

/* ============================================================================
 * 3. Hero / signature name (homepage)
 * ========================================================================== */
.post-header.hero {
  text-align: center;
  padding: 0 0 var(--s-5); /* top 0 — container.mt-5 already provides breathing */
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-6);
}

.signature-name {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25em;
  margin: 0 0 var(--s-5);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

.signature-name .name-en,
.signature-name .name-zh {
  white-space: nowrap;
}

.signature-name .name-en {
  color: var(--fg);
  font-size: 0.85em; /* EN slightly smaller so both read weight-balanced */
}

.signature-name .name-zh {
  font-family: var(--font-zh);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* Respect prefers-reduced-motion for the medium-zoom library (loaded from CDN
   with its own CSS). Kill the transitions on overlay/image swap so there's no
   distracting zoom animation. */
@media (prefers-reduced-motion: reduce) {
  .medium-zoom-overlay,
  .medium-zoom-image,
  .medium-zoom-image--opened {
    transition-duration: 0ms !important;
    animation: none !important;
  }
}
/* Theme toggle — animated moon/sun cross-fade with rotation. Single stroke SVGs
   give a cleaner feel than FontAwesome solid. The data-theme override lives in
   _themes.scss; this just provides the layout and motion. */
.theme-toggle {
  padding: 8px 12px !important;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle__icons {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  color: var(--fg-2);
}

.theme-toggle:hover .theme-toggle__icons {
  color: var(--accent);
}

.theme-toggle__moon,
.theme-toggle__sun {
  position: absolute;
  inset: 0;
  transition: opacity var(--t-med), transform var(--t-med);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__moon,
  .theme-toggle__sun {
    transition: none;
  }
}
/* mapmyvisitors embed at bottom of home page — centered, larger visual
   presence (kit doesn't spec; user requested bigger map). Caps at viewport
   width so mobile doesn't overflow. */
.mapmyvisitors-wrap {
  display: flex;
  justify-content: center;
  margin: var(--s-7) auto var(--s-5);
  max-width: 100%;
  overflow: hidden;
}

.mapmyvisitors-wrap img,
.mapmyvisitors-wrap canvas,
#mapmyvisitorsimg {
  max-width: 100% !important;
  height: auto !important;
}

/* Decorative separator "|" between 王锡淮 and Xihuai Wang */
.signature-name .name-sep {
  color: var(--fg-4);
  font-weight: 300;
  font-size: 0.8em;
  margin: 0 0.1em;
}

.post-header.hero .desc,
.post-header.hero .subtitle {
  margin: var(--s-4) auto 0;
  max-width: 640px;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--fg-2);
  line-height: var(--lh-body);
}

.post-header.hero .desc a,
.post-header.hero .subtitle a {
  color: var(--link);
}

/* ============================================================================
 * 4. Profile portrait + address (homepage)
 * ========================================================================== */
.profile {
  /* keep al-folio float layout but restyle photo/address */
}
.profile img.img-fluid {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}
.profile img.rounded-circle {
  border-radius: var(--r-pill) !important;
}
.profile .address {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
  letter-spacing: 0.02em;
}
.profile .address p {
  margin: 0;
}

/* ============================================================================
 * 5. About prose (homepage body) — scoped to home layout only (uses .post-header.hero).
 * Single blog posts live under _layouts/post.html and are styled in section 15.
 * ========================================================================== */
.post:has(.post-header.hero) > article {
  /* Two-column grid at ≥992px: bio (1fr) + portrait (260px), tight gap.
     Profile floats are overridden below; News/SelectedPapers span both cols.
     At <992px, grid collapses to one column so portrait stacks naturally. */
}
@media (min-width: 992px) {
  .post:has(.post-header.hero) > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-column-gap: var(--s-6);
    align-items: start;
  }
  .post:has(.post-header.hero) > article > .profile {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    margin: 0 !important;
    max-width: 220px;
    width: 220px;
  }
  .post:has(.post-header.hero) > article > .clearfix {
    grid-column: 1;
    grid-row: 1;
    min-width: 0; /* allow shrink inside grid */
  }
  .post:has(.post-header.hero) > article {
    /* Anything else in article (News h2, Selected Papers h2, tables) spans
       both columns and drops below the bio+portrait row. */
  }
  .post:has(.post-header.hero) > article > h2, .post:has(.post-header.hero) > article > .news, .post:has(.post-header.hero) > article > .about-selected-papers, .post:has(.post-header.hero) > article > hr, .post:has(.post-header.hero) > article > div:not(.profile):not(.clearfix) {
    grid-column: 1/-1;
  }
}
.post:has(.post-header.hero) > article {
  /* Global paragraph caps apply only outside the bio grid (news summaries etc.) */
}
.post:has(.post-header.hero) > article > p, .post:has(.post-header.hero) > article > ul, .post:has(.post-header.hero) > article > ol {
  max-width: var(--prose-max);
}
.post:has(.post-header.hero) > article > p {
  font-family: var(--font-serif);
  color: var(--fg-2);
  font-size: 1rem;
  line-height: var(--lh-body);
}
.post:has(.post-header.hero) > article > p strong, .post:has(.post-header.hero) > article > ul strong, .post:has(.post-header.hero) > article > ol strong {
  color: var(--fg);
}
.post:has(.post-header.hero) > article > .clearfix > p {
  font-family: var(--font-serif);
  color: var(--fg-2);
  font-size: 1rem;
  line-height: var(--lh-body);
}
.post:has(.post-header.hero) > article > .clearfix > p,
.post:has(.post-header.hero) > article > .clearfix > ul,
.post:has(.post-header.hero) > article > .clearfix > ol {
  max-width: none;
}

.about-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin: var(--s-7) 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}

.about-section-head h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.about-section-head h2 a {
  color: inherit;
  text-decoration: none;
}

.about-section-head h2 a:hover {
  color: var(--accent);
  text-decoration: none;
}

.about-section-head__more {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast);
}

.about-section-head__more:hover {
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 767px) {
  .about-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
}
/* ============================================================================
 * 6. Chips / pills
 * ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  color: var(--fg-2);
  background: transparent;
  text-decoration: none;
}

.chip::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.chip.no-dot::before {
  display: none;
}

.chip.is-accent {
  color: var(--accent-deep);
  background: var(--accent-wash);
  border-color: transparent;
}

html[data-theme=dark] .chip.is-accent {
  color: var(--moss-700);
}

.chip:hover {
  border-color: var(--rule-strong);
  color: var(--fg);
}

.chip.is-accent:hover {
  color: var(--accent);
}

/* ============================================================================
 * 7. Buttons
 * ========================================================================== */
.btn,
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast);
}

.btn-primary,
.ds-btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.btn-primary:hover,
.ds-btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-primary:active,
.ds-btn-primary:active {
  transform: translateY(0);
}

.ds-btn-ghost,
.btn-ghost { /* colors_and_type.css:387 — design class name */
  color: var(--fg);
  background: transparent;
  border-color: var(--rule-strong);
}

.ds-btn-ghost:hover,
.btn-ghost:hover {
  background: var(--bg-sunken);
  color: var(--fg);
}

/* btn-link — colors_and_type.css:393-398 */
.btn-link,
.ds-btn-link {
  color: var(--link);
  background: transparent;
  padding: 6px 0;
  border-color: transparent;
}

.btn-link:hover,
.ds-btn-link:hover {
  color: var(--link-hover);
}

/* ============================================================================
 * 8. Cards
 * ========================================================================== */
.ds-card,
.card {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}

.ds-card-hover,
.card-hover {
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}

.ds-card-hover:hover,
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--rule-strong);
}

/* ============================================================================
 * 9. Navbar (fixed top, blurred paper)
 * ========================================================================== */
.navbar {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: none !important;
  font-family: var(--font-sans);
}

html[data-theme=dark] .navbar {
  background: rgba(14, 16, 19, 0.82) !important;
  border-bottom-color: var(--rule) !important;
}

.navbar .navbar-brand,
.navbar .nav-link {
  font-family: var(--font-sans);
  font-size: 13px; /* kit.css:26 — explicit */
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg) !important;
  padding: 8px 12px !important; /* kit.css:27 — override bootstrap default */
  transition: color var(--t-fast), background var(--t-fast);
  border-radius: var(--r-sm);
}

.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover,
.navbar .nav-link:hover {
  color: var(--accent) !important;
  background: var(--bg-sunken) !important;
}

.navbar .nav-item.active .nav-link,
.navbar .nav-item .nav-link.active {
  color: var(--accent) !important;
  font-weight: 600;
  position: relative;
}

/* Active nav underline — 18×2 moss pill, kit.css:33-37 */
.navbar .nav-item.active .nav-link::after,
.navbar .nav-item .nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform: translateX(-50%);
}

/* theme toggle rotate */
#light-toggle,
.contact-icon .fa-sun,
.contact-icon .fa-moon {
  transition: transform var(--t-fast), color var(--t-fast);
}

#light-toggle:hover {
  color: var(--accent) !important;
  transform: rotate(15deg);
}

/* social icons — al-folio colors via i::before */
.social .contact-icons a,
.social .contact-icons a i,
.social .contact-icons a i::before {
  color: var(--fg-2) !important;
  transition: color var(--t-fast);
}

.social .contact-icons a:hover i,
.social .contact-icons a:hover i::before {
  color: var(--accent) !important;
}

/* ============================================================================
 * 10. News list (ruled)
 * ========================================================================== */
.news,
.news-container,
.news table {
  font-family: var(--font-serif);
}

.news table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  margin: 0;
}

.news table th,
.news table td {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--rule);
  border-top: none !important;
  vertical-align: baseline;
  background: transparent;
}

.news table tr:last-child th,
.news table tr:last-child td {
  border-bottom: none;
}

.news table th[scope=row] {
  width: 130px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-right: 24px;
}

.news table td {
  color: var(--fg);
  font-size: 14px; /* components-news.html */
  line-height: 1.55;
}

.news table td .news-tag {
  display: inline-flex;
  margin-right: 12px;
  vertical-align: baseline;
}

.news a.news-title {
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.news a.news-title:hover {
  color: var(--accent);
}

.news tr.clickable-row:hover td {
  color: var(--accent);
}

/* ============================================================================
 * 10b. News full page — year-grouped, 3-col rows with category tag
 *      Matches design kit pages.css `.uk-news-full`, 4-color category chips
 * ========================================================================== */
.news-full {
  max-width: 820px; /* pages.css:261 */
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
}

.news-year {
  margin-top: 44px;
} /* pages.css:262 */
.news-year:first-of-type {
  margin-top: 32px;
} /* pages.css:263 */
.news-year-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
}

.news-year-num {
  flex: 0 0 auto;
}

.news-year-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  align-self: center;
}

.news-year-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.news-full-list {
  list-style: none;
  padding: 14px 0 0; /* pages.css:264 */
  margin: 0;
}

.news-full-list > li {
  display: grid;
  grid-template-columns: 130px 80px 1fr;
  gap: 18px; /* pages.css:269 */
  padding: 18px 0; /* pages.css:270 */
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.news-full-list > li:last-child {
  border-bottom: none;
}

.news-full-list time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.news-full-list .news-body {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--fg);
  line-height: 1.55;
  max-width: none; /* pages.css:298 — grid column already constrains */
}

.news-full-list .news-body a {
  color: var(--link);
}

.news-full-list .news-body a:hover {
  color: var(--link-hover);
}

/* Inline platform icons (Zhihu/WeChat/BiliBili) scale to body-line height.
   Real photos (img-fluid) get the usual rounded-card treatment and retain natural size. */
.news-full-list img[src*="/icons/"] {
  max-width: 1.1em;
  height: 1em;
  vertical-align: middle;
  box-shadow: none;
  border-radius: 0;
}

/* News images render as an inline chip-style accent (float-right thumbnail)
   per kit, not a full-width block below the text. Text wraps around it. */
.news-full-list .news-body img.news-photo {
  max-width: 140px;
  height: auto;
  margin-left: var(--s-4);
  margin-bottom: var(--s-2);
  float: right;
  border-radius: var(--r-sm);
  outline: 1px solid var(--rule);
}

.news-full-list li {
  overflow: hidden;
} /* clear float within each entry */
@media (max-width: 767px) {
  .news-full-list .news-body img.news-photo {
    float: none;
    margin: var(--s-3) 0 0;
    width: auto;
    max-width: 100%;
  }
}
/* Homepage news list (table rendered by _includes/news.html):
   a `.news-photo` image floats RIGHT at thumbnail size so the text wraps beside it. */
.news table td img.news-photo {
  float: right;
  width: 96px;
  height: 72px;
  object-fit: cover;
  margin: 4px 0 6px 14px;
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--rule);
  max-width: none;
  box-sizing: border-box;
}

/* ensure the row clears the floated image so the next news item isn't pulled up */
.news table td::after {
  content: "";
  display: block;
  clear: both;
}

/* Inline-mode news items written as a single-item markdown list (e.g. "- [EN](…) | [中文](…)")
   render as <ul><li>. On the homepage summary we want them to read as a plain
   secondary-line chip row, not a bulleted list, so drop the disc and tighten
   the indent. */
.news table td ul {
  list-style: none;
  padding-left: 0;
  margin: 4px 0 0;
}

.news table td ul > li {
  margin: 0;
}

@media (max-width: 600px) {
  .news table td img.news-photo {
    float: none;
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 6px 0;
  }
}
/* Category chip — 4 semantic colors per kit */
.news-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 3px;
  justify-self: start;
  align-self: start;
  line-height: 1.4;
}

.news-tag--paper {
  color: var(--accent-deep);
  background: var(--accent-wash);
}

.news-tag--writing {
  color: var(--ink-ochre);
  background: #F7EEDE;
}

.news-tag--talk {
  color: var(--ink-blue);
  background: #E6ECF8;
}

.news-tag--milestone {
  color: var(--ink-wine);
  background: #F7E5EB;
}

.news-tag--note {
  color: var(--fg-3);
  background: var(--bg-sunken);
}

html[data-theme=dark] .news-tag--paper {
  color: var(--moss-600);
  background: rgba(111, 179, 102, 0.15);
}

html[data-theme=dark] .news-tag--writing {
  color: #E0B977;
  background: rgba(224, 185, 119, 0.14);
}

html[data-theme=dark] .news-tag--talk {
  color: #8AA6E4;
  background: rgba(138, 166, 228, 0.14);
}

html[data-theme=dark] .news-tag--milestone {
  color: #E08FA0;
  background: rgba(224, 143, 160, 0.14);
}

html[data-theme=dark] .news-tag--note {
  color: var(--fg-3);
  background: var(--bg-raised);
}

@media (max-width: 900px) { /* pages.css:413 — design breakpoint */
  .news-full-list > li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
/* ============================================================================
 * 10c. Venue-filter status banner (lives above the first year header on /publications/)
 * ========================================================================== */
.venue-filter-status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--accent-wash);
  border: 1px solid transparent;
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg);
}

html[data-theme=dark] .venue-filter-status {
  background: rgba(111, 179, 102, 0.12);
  border-left-color: var(--accent);
  color: var(--fg);
}

.venue-filter-status[hidden] {
  display: none !important;
}

.venue-filter-status__label strong {
  font-weight: 600;
  color: var(--accent-deep);
}

html[data-theme=dark] .venue-filter-status__label strong {
  color: var(--moss-700);
}

.venue-filter-status__clear {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--t-fast);
}

.venue-filter-status__clear:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

html[data-theme=dark] .venue-filter-status__clear:hover {
  color: var(--paper);
}

.pub-topic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--s-6);
}

.pub-topic-pill {
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.pub-topic-pill.is-active {
  color: var(--accent-deep);
  background: var(--accent-wash);
  border-color: transparent;
}

.pub-topic-pill.is-active:hover {
  color: var(--accent);
}

/* ============================================================================
 * 11. Publications (year groups, ruled rows)
 * ========================================================================== */
.publications h1.title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-6);
}
.publications {
  /* Year header — num | hairline rule | count mono-meta (Publications.jsx:90-93) */
}
.publications h2.year,
.publications h2.category {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: var(--s-7) 0 var(--s-4);
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  border-bottom: none;
  padding-bottom: 0;
}
.publications h2.year .year-num,
.publications h2.category .year-num {
  flex: 0 0 auto;
}
.publications h2.year .year-rule,
.publications h2.category .year-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  align-self: center;
}
.publications h2.year .year-count,
.publications h2.category .year-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.publications {
  /* Fallback for legacy markup without the inner spans */
}
.publications h2.year:not(:has(.year-num))::after,
.publications h2.category:not(:has(.year-num))::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  align-self: center;
}
.publications ol.bibliography,
.publications ul.bibliography {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.publications ol.bibliography > li,
.publications ul.bibliography > li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0 !important;
  display: block;
}
.publications ol.bibliography > li:last-child,
.publications ul.bibliography > li:last-child {
  border-bottom: none;
}

.publications .pub-page-note {
  margin: 0 0 var(--s-5);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.publications .bibliography .title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--fg);
  display: block;
  margin: 6px 0;
}
.publications .bibliography .author,
.publications .bibliography .periodical {
  font-family: var(--font-serif);
  color: var(--fg-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  display: block;
  margin: 2px 0;
}
.publications .bibliography .author em,
.publications .bibliography .author .author-highlight,
.publications .bibliography em[class*=author-highlight] {
  color: var(--fg);
  font-style: normal;
  font-weight: 600;
  border-bottom: 1px dashed var(--moss-400);
}
.publications {
  /* Coauthor profile links: surface a dotted underline so readers can tell
     the name is clickable before hovering. The self name keeps its dashed
     mark; coauthors get a thinner dotted variant in the subdued ink color. */
}
.publications .bibliography .author a,
.publications .bibliography .author a:visited {
  color: var(--fg-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--moss-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.publications .bibliography .author a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.publications .bibliography .links {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 0.75rem;
}
.publications .bibliography .links a, .publications .bibliography .links .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule-strong);
  box-shadow: none;
  color: var(--fg-2);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: all var(--t-fast);
}
.publications .bibliography .links a:hover, .publications .bibliography .links .btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
  text-decoration: none;
}
.publications .bibliography .links {
  /* Copy-BibTeX pill — distinct icon + label, confirms on click */
}
.publications .bibliography .links .bibtex-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  color: var(--accent);
  border-color: var(--accent);
}
.publications .bibliography .links .bibtex-copy:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.publications .bibliography .links .bibtex-copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.publications .bibliography .links .bibtex-copy .bibtex-copy-icon {
  flex-shrink: 0;
}
.publications .bibliography .links .bibtex-copy.is-copied {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.publications .bibliography .links .bibtex-copy.is-failed {
  background: var(--ink-wine);
  color: #fff;
  border-color: var(--ink-wine);
}
.publications {
  /* BibTeX source is kept in DOM (hidden) so JS can copy; never renders. */
}
.publications .bibtex-source {
  display: none !important;
}
.publications {
  /* "★ Selected" label — kit.css:194-197 */
}
.publications .selected-mark {
  display: inline-block;
  margin-right: var(--s-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-ochre);
}

html[data-theme=dark] .publications .bibliography .links .bibtex-copy:hover,
html[data-theme=dark] .publications .bibliography .links .bibtex-copy.is-copied,
html[data-theme=dark] .publications .bibliography .links .bibtex-copy.is-failed {
  color: var(--paper);
}

.publications ol.bibliography > li.single-pub-in-year {
  border-bottom: none !important;
}

/* Pre-title meta row — inline row of venue-tag + ★ Selected sitting above the
   paper title per kit Publications.jsx. `.venue-tag` below already styles the
   chip; this wrapper just lays them out inline with right breathing. */
.publications .pub-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: var(--s-2);
}

.publications .pub-meta-row .venue-tag {
  margin-top: 0;
} /* reset default */
.publications .pub-meta-row .pub-meta-sep {
  margin: 0 var(--s-2);
  color: var(--fg-4);
}

.publications .pub-meta-row .pub-meta-venue {
  text-transform: none;
  white-space: normal;
  font-weight: 600;
  color: var(--ink-ochre) !important;
}

.publications .pub-meta-row .pub-meta-venue em {
  color: inherit !important;
}

.publications .pub-meta-row .selected-mark {
  margin-right: 0;
}

/* Venue badges inside periodical line */
.publications .bibliography .periodical em {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--ink-ochre);
}

.publications .bibliography .periodical {
  font-family: var(--font-mono);
  color: var(--ink-ochre);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

/* Venue tag (topic chip sitting beside entries) — filled pill with clear hover/active feedback */
.publications .venue-tag {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  cursor: pointer;
  outline: none;
}

html[data-theme=dark] .publications .venue-tag {
  color: var(--moss-700);
}

html[data-theme=dark] .publications .venue-tag a.venue-link,
html[data-theme=dark] .publications .venue-tag .venue-name {
  background: rgba(111, 179, 102, 0.15); /* kit.css:354 dark chip.is-accent */
}

.publications .venue-tag a.venue-link,
.publications .venue-tag .venue-name {
  color: inherit;
  background: var(--accent-wash);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 3px 11px;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform 80ms var(--e-out), box-shadow var(--t-fast);
  user-select: none;
}

/* hover — darker wash */
.publications .venue-tag:hover a.venue-link,
.publications .venue-tag:hover .venue-name {
  background: var(--moss-100);
  border-color: var(--accent);
}

html[data-theme=dark] .publications .venue-tag:hover a.venue-link,
html[data-theme=dark] .publications .venue-tag:hover .venue-name {
  background: rgba(111, 179, 102, 0.22);
}

/* pressed — scales slightly and inverts so the click is unmistakable */
.publications .venue-tag:active a.venue-link,
.publications .venue-tag:active .venue-name {
  transform: scale(0.96);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

html[data-theme=dark] .publications .venue-tag:active a.venue-link,
html[data-theme=dark] .publications .venue-tag:active .venue-name {
  color: var(--paper);
}

/* keyboard-focus ring */
.publications .venue-tag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.publications .venue-tag:focus-visible a.venue-link,
.publications .venue-tag:focus-visible .venue-name {
  box-shadow: 0 0 0 3px var(--accent-wash), 0 0 0 4px var(--accent);
}

/* active filter on Publications page — clearly "pressed" + tooltip-like hint via aria */
.publications .venue-tag.active-filter a.venue-link,
.publications .venue-tag.active-filter .venue-name {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

html[data-theme=dark] .publications .venue-tag.active-filter a.venue-link,
html[data-theme=dark] .publications .venue-tag.active-filter .venue-name {
  color: var(--paper);
}

.publications .venue-tag.active-filter::after {
  content: " · click again to clear";
  margin-left: var(--s-2);
  color: var(--fg-3);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: var(--fs-xs);
}

/* Narrow screens: let long active-filter hint wrap instead of overflowing */
@media (max-width: 575.98px) {
  .publications .venue-tag.active-filter::after {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
  .venue-filter-status {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
}
/* Preview thumbnail inside a bib entry */
.publications .row {
  margin: 0;
}

.publications .col-sm-2.preview img.preview {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-xs);
  width: 100%;
  height: auto;
}

/* Equal-contribution highlight uses <em>Xihuai Wang</em> in rendered author list */
.publications .bibliography .author em {
  color: var(--fg);
  font-style: normal;
  font-weight: 600;
  border-bottom: 1px dashed var(--moss-400);
}

/* ============================================================================
 * 12. Selected papers (homepage) — ruled cards
 * ========================================================================== */
.about-selected-papers__intro, .about-selected-papers .about-selected-papers__intro,
.selected-papers__intro,
.selected-papers .about-selected-papers__intro {
  font-family: var(--font-serif);
  color: var(--fg-2);
  font-size: 1rem;
  max-width: none;
  margin-bottom: var(--s-4);
}
.about-selected-papers__intro ol, .about-selected-papers__intro ul, .about-selected-papers .about-selected-papers__intro ol, .about-selected-papers .about-selected-papers__intro ul,
.selected-papers__intro ol,
.selected-papers__intro ul,
.selected-papers .about-selected-papers__intro ol,
.selected-papers .about-selected-papers__intro ul {
  padding-left: 22px;
  margin: 6px 0 0;
}
.about-selected-papers__intro li, .about-selected-papers .about-selected-papers__intro li,
.selected-papers__intro li,
.selected-papers .about-selected-papers__intro li {
  margin: 2px 0;
}

.selected-papers {
  display: grid;
  gap: 0;
}

.selected-papers ol.bibliography,
.selected-papers ul.bibliography {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.selected-papers ol.bibliography > li,
.selected-papers ul.bibliography > li {
  padding: 0;
  border: 0;
  margin: 0;
}

/* Homepage selected papers — dissolve the card shell. The li-level hairline
   divider carries the rhythm; no background, border, radius, or shadow. */
.about-selected-papers .selected-paper-card,
.about-selected-papers .selected-paper-card.ds-card,
.about-selected-papers .selected-paper-card.ds-card-hover {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--s-5) 0;
  transition: none;
}

.about-selected-papers .selected-paper-card.ds-card-hover:hover {
  transform: none;
  box-shadow: none !important;
  border-color: transparent !important;
}

.about-selected-papers .selected-papers ol.bibliography > li + li .selected-paper-card,
.about-selected-papers .selected-papers ul.bibliography > li + li .selected-paper-card {
  border-top: 1px solid var(--rule) !important;
}

.selected-paper-card {
  display: block;
  padding: var(--s-4);
}

.selected-paper-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.selected-paper-card__body--plain {
  gap: var(--s-2);
}

.selected-paper-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.selected-paper-card__venue {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  /* Overrides the shared .mono-meta class (also on this element), which sets
     text-transform: lowercase and a muted color — without !important here,
     that rule wins on any tie since it declares text-transform at all and
     this one didn't. */
  text-transform: none !important;
  color: var(--ink-ochre) !important;
}

/* `p, h1, ..., em, div, li, span, strong { color: var(--global-text-color) }`
   (legacy al-folio compat rule) matches <em> directly, and a direct match
   always beats an inherited value regardless of specificity — so the venue
   color above never reached the journal name wrapped in <em>. */
.selected-paper-card__venue em {
  color: inherit !important;
}

.selected-paper-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.selected-paper-card__authors {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
}

.selected-paper-card__authors a,
.selected-paper-card__authors a:visited {
  color: var(--fg-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--moss-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

.selected-paper-card__authors a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.selected-paper-card__author--self {
  color: var(--fg);
  font-weight: 600;
  border-bottom: 1px dashed var(--moss-400);
}

/* Action pills (PDF / Code / Copy Bib) on home cards reuse the publications
   `.bibliography .links` cascade (see section 10). The home bib layout emits
   `<div class="links">` under `<div class="publications selected-papers">`, so
   no card-local link styling is needed. */
/* ============================================================================
 * 13. CV page — aligned to design kit Pages.jsx / pages.css `.uk-cv-*`
 *    * inline Fraunces moss-underline section headings (no card shells)
 *    * grid rows with dotted dividers (no timeline dots or vertical rail)
 *    * entry title Fraunces, institution serif, year mono
 * ========================================================================== */
.cv {
  font-family: var(--font-serif);
  /* Card shell dissolves — become transparent section blocks with space. */
}
.cv .card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: var(--s-7) 0 var(--s-4) !important;
}
.cv .card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.cv {
  /* Section heading: inline Fraunces small caps with accent underline,
     replacing both al-folio's `.card-title` and legacy left-bar decoration. */
}
.cv .card .card-title,
.cv h2 {
  font-family: var(--font-display) !important;
  font-variation-settings: "opsz" 72;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--accent-deep) !important;
  padding: 0 0 10px !important; /* pages.css:16 */
  border: none !important;
  border-bottom: 2px solid var(--accent) !important;
  display: inline-block !important;
  width: fit-content !important; /* underline hugs text, not full row */
  margin: 0 0 18px !important; /* pages.css */
}
.cv .card .card-title::before {
  content: none !important;
}
.cv { /* kill legacy moss left bar */
  /* Timeline rows — clean grid, dotted divider, no dot marker, no vertical rail. */
}
.cv .cv-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cv .cv-timeline .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dotted var(--rule) !important;
  padding: var(--s-4) 0 !important;
}
.cv .cv-timeline .list-group-item + .list-group-item {
  border-top: none !important;
}
.cv .cv-timeline .list-group-item:last-child {
  border-bottom: none !important;
}
.cv .cv-timeline .list-group-item:hover {
  background: transparent !important;
}
.cv {
  /* Fallback for non-timeline lists (Honors, Other interests, General Info):
     `.cv .card { padding:0 }` removed their breathing room, so restore it
     directly on the list items. */
}
.cv .card .list-group-item {
  background: transparent !important;
  border: none !important;
  padding: var(--s-3) 0 !important; /* 12px — more breath than s-2 */
  font-family: var(--font-serif);
  color: var(--fg);
}
.cv .card .list-group-item + .list-group-item {
  border-top: 1px dotted var(--rule) !important;
}
.cv .card .list-group-item h5.nested-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0 0 var(--s-1);
}
.cv .card .list-group-item .subitems {
  padding-left: var(--s-5);
  margin: var(--s-1) 0 0;
}
.cv .card .list-group-item .subitem {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--fg-2);
}
.cv .card .list-group-item .nested-content {
  font-family: var(--font-serif);
  color: var(--fg-2);
}
.cv {
  /* General Information map table: keep rows flat — no striping/hover fill
     (Bootstrap's striped/hover variants are gone; this now only overrides the
     base table hover in _base.scss). */
}
.cv .card .table tr,
.cv .card .table tr:nth-of-type(odd),
.cv .card .table tr:hover {
  background: transparent;
}
.cv .cv-entry {
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  gap: 24px !important; /* pages.css:47 single-value gap */
  align-items: baseline !important;
}
.cv .cv-entry-marker {
  display: none !important;
}
.cv { /* kill dot + vertical line */ }
.cv .cv-entry-marker::before, .cv .cv-entry-marker::after {
  content: none !important;
}
.cv .cv-entry-year {
  min-width: 0;
}
.cv .cv-year-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}
.cv .cv-entry-body {
  min-width: 0;
}
.cv .cv-entry-body h6.title,
.cv .cv-entry-body .title {
  font-family: var(--font-display) !important;
  font-variation-settings: "opsz" 72;
  font-weight: 600 !important;
  font-size: 1.125rem !important; /* 18px — pages.css .uk-tl-title */
  letter-spacing: -0.005em;
  color: var(--fg) !important;
  text-transform: none !important;
  margin: 0 0 2px !important;
}
.cv .cv-entry-body h6:not(.title) {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 15px; /* pages.css:71 — explicit */
  line-height: 1.45; /* pages.css:72 */
  color: var(--fg-2);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.cv .cv-entry-list {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
}
.cv .cv-entry-list > li + li {
  margin-top: var(--s-2);
}
.cv .cv-entry-list .item-title {
  display: inline-block;
  margin-bottom: var(--s-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cv .cv-entry-list .item,
.cv .cv-entry-list .subitem {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.cv {
  /* General Information table — serif, no inner borders */
}
.cv .table {
  margin: 0;
}
.cv .table tr td {
  padding: var(--s-2) 0 !important;
  border: none !important;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--fg);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cv .table tr td:first-child {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  width: 160px;
  padding-right: var(--s-4) !important; /* gap between label and value */
}
.cv {
  /* Narrow: stack year above entry body — pages.css:413-418 uses 900 */
}
@media (max-width: 900px) {
  .cv .cv-entry {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .cv .table tr td:first-child {
    width: 120px;
  }
}
@media (max-width: 575.98px) {
  .cv {
    /* On narrow phones the UPDATED TIME label won't fit on one line with any
       side padding, so stack each row: label on its own line above the value. */
  }
  .cv .table,
  .cv .table tbody,
  .cv .table tr,
  .cv .table tr td {
    display: block !important;
    width: auto !important;
  }
  .cv .table tr {
    padding: var(--s-2) 0 !important;
  }
  .cv .table tr + tr {
    border-top: 1px dotted var(--rule) !important;
  }
  .cv .table tr td {
    padding: 0 !important;
  }
  .cv .table tr td:first-child {
    margin-bottom: 4px !important;
    padding-right: 0 !important;
  }
}

html[data-theme=dark] .cv .card .card-title,
html[data-theme=dark] .cv h2 {
  color: var(--moss-600) !important;
}

/* Homepage visitor map — MapMyVisitors injects a fixed 600×294 widget with
   inline styles, so it can't size itself. Scale fluidly against the container
   (one formula, no breakpoint stepping), then pull up the trailing whitespace
   since transform leaves the layout box intact. */
.visitor-map {
  --map-w: 600px;
  --map-h: 294px;
  --map-scale: clamp(0.45, calc(100cqi / var(--map-w)), 1);
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 9rem;
  overflow: hidden;
  container-type: inline-size;
}

.visitor-map > #mapmyvisitors-widget {
  display: block;
  flex-shrink: 0;
  width: var(--map-w);
  transform: scale(var(--map-scale));
  transform-origin: top center;
  margin-bottom: calc(var(--map-h) * (var(--map-scale) - 1));
}

/* Shared page header — used by page/cv/archive/news/publications/projects.
   Excludes the home hero and blog index/post layouts, which have dedicated rules. */
.post:not(.blog-index):not(:has(.post-content)) > .post-header:not(.hero) {
  padding: 0 0 var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}

.post:not(.blog-index):not(:has(.post-content)) > .post-header:not(.hero) .eyebrow {
  margin-bottom: var(--s-3);
}

.post:not(.blog-index):not(:has(.post-content)) > .post-header:not(.hero) .post-title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 500;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.post:not(.blog-index):not(:has(.post-content)) > .post-header:not(.hero) .lead,
.post:not(.blog-index):not(:has(.post-content)) > .post-header:not(.hero) .post-description {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* ============================================================================
 * 14. Blog index / post list
 * ========================================================================== */
/* ---- Blog hero / generic page hero ---- */
.blog-index {
  max-width: var(--page-max);
  margin: 0 auto;
}

.blog-index .post-header {
  padding: 0 0 var(--s-5); /* top 0 — match pub page; container.mt-5 handles offset */
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}

.blog-index .post-header .eyebrow {
  margin-bottom: var(--s-3);
}

.blog-index .post-header .post-title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 500;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

/* Dropcap emphasis — used on any page via `display_title` HTML wrapping one
   letter in this span, or inline in blog.md directly. */
.blog-title__dropcap {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  font-size: 1.4em;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  margin: 0 0.04em 0 0.02em;
  vertical-align: -0.02em;
}

.blog-index .post-header .lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
  max-width: 62ch;
}

/* ---- Pill filter + inline views toggle ---- */
.blog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-6);
}

.blog-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.blog-pill:hover {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-wash);
}

.blog-pill:focus-visible {
  color: var(--accent-deep);
  background: var(--accent-wash);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.blog-pill.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.blog-pill.is-active .blog-pill__count {
  color: rgba(255, 255, 255, 0.78);
}

.blog-pill__count {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
  text-transform: none;
}

.blog-controls__spacer {
  flex: 1 1 0;
  min-width: 0;
}

.blog-views-toggle {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

.blog-views-toggle .uv-toggle {
  color: var(--fg-3);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.blog-views-toggle .uv-toggle.is-active,
.blog-views-toggle .uv-toggle:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- Year-grouped blog list ---- */
.blog-year-group {
  margin-top: var(--s-7);
}

.blog-year-group:first-of-type {
  margin-top: 0;
}

.blog-year-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin: 0 0 var(--s-3);
}

.blog-year-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.blog-year-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  align-self: center;
}

.blog-year-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

/* ---- Post row (2-col: 150px date | 1fr body) ---- */
.post-rows {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}

.post-row:last-child {
  border-bottom: none;
}

.post-row__date {
  color: var(--fg-3);
  letter-spacing: 0.02em;
  padding-top: 0.3em;
  text-transform: uppercase;
  font-size: 11px;
}

.post-row__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.post-row__title a {
  color: var(--fg);
  text-decoration: none;
  transition: color var(--t-fast);
}

.post-row__title a:hover {
  color: var(--accent);
  text-decoration: none;
}

.post-row__external {
  font-size: 0.75em;
  color: var(--fg-3);
  vertical-align: 0.3em;
}

.post-row__desc {
  font-family: var(--font-serif);
  color: var(--fg-2);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  margin: 0 0 var(--s-3);
  max-width: 74ch;
}

.post-row__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.post-row__meta a {
  color: var(--fg-3);
}

.post-row__meta a:hover {
  color: var(--accent);
  text-decoration: none;
}

.post-row__sep {
  color: var(--fg-4);
}

.post-row__cat {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-row__lang {
  color: var(--accent);
}

/* Per-row EN/中 tab bar for bilingual posts. Text toggles inline without
   navigating; clicking the title still opens the respective post page. */
.post-row__langbar {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--s-2);
  padding: 2px;
  background: var(--bg-sunken);
  border-radius: var(--r-pill);
}

.post-row__langtab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}

.post-row__langtab:hover {
  color: var(--accent-deep);
}

.post-row__langtab:focus-visible {
  color: var(--accent-deep);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.post-row__langtab.is-active {
  color: #fff;
  background: var(--accent);
}

.post-row__lang-pane[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .post-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .post-row__date {
    padding-top: 0;
  }
  .blog-controls__spacer {
    flex-basis: 100%;
  }
  .blog-views-toggle {
    margin-top: var(--s-2);
  }
}
/* ---- Legacy .post-list kept for any remaining consumers ---- */
.post-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.post-list > li {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  display: block;
}

.post-list > li:last-child {
  border-bottom: none;
}

.post-list > li h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 6px;
}

.post-list > li h3 a,
.post-list > li .post-title {
  color: var(--fg);
  text-decoration: none;
}

.post-list > li h3 a:hover,
.post-list > li .post-title:hover {
  color: var(--accent);
}

.post-list > li > p {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--fg-2);
  margin: 6px 0 8px;
  line-height: 1.55;
  max-width: 70ch;
}

.post-list > li .post-meta,
.post-list > li .post-tags {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}

.post-list > li .post-tags a {
  color: var(--fg-3);
}

.post-list > li .post-tags a:hover {
  color: var(--accent);
}

/* ============================================================================
 * 15. Blog post (single) — prose
 * ========================================================================== */
.post:has(.post-content) .post-header {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.post:has(.post-content) .post-header .post-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4xl);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  color: var(--fg);
}
.post:has(.post-content) .post-header .post-description,
.post:has(.post-content) .post-header .post-lead {
  font-family: var(--font-serif);
  color: var(--fg-2);
  font-size: var(--fs-lg);
  max-width: none;
}
.post:has(.post-content) .post-header .post-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.post:has(.post-content) .post-content,
.post:has(.post-content) article .post-content {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--fg);
  /* Responsive prose width — grows with viewport so wide desktops aren't
     cramped into a 68ch ribbon. Floor keeps line length readable on tablet. */
  max-width: var(--post-prose-max, 68ch);
  margin-right: auto; /* left-align the article inside its col */
}
.post:has(.post-content) .post-content h2,
.post:has(.post-content) article .post-content h2 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: var(--s-7);
}
.post:has(.post-content) .post-content h3,
.post:has(.post-content) article .post-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}
.post:has(.post-content) .post-content blockquote,
.post:has(.post-content) article .post-content blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--fg-2);
  font-variation-settings: "opsz" 48;
}
.post:has(.post-content) .post-content pre,
.post:has(.post-content) article .post-content pre {
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.post:has(.post-content) .post-kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s-3);
}
.post:has(.post-content) .post-kicker a {
  color: inherit;
  text-decoration: none;
}
.post:has(.post-content) .post-kicker a:hover {
  color: var(--accent);
  text-decoration: none;
}
.post:has(.post-content) .post-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.post:has(.post-content) .post-meta-row .post-meta-dot {
  color: var(--fg-4);
}
.post:has(.post-content) .post-meta-row .post-meta-link,
.post:has(.post-content) .post-meta-row .post-lang-switch {
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.post:has(.post-content) .post-meta-row .post-meta-link:hover,
.post:has(.post-content) .post-meta-row .post-lang-switch:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.post:has(.post-content) .post-meta-row .post-lang-switch {
  color: var(--link);
}
.post:has(.post-content) .post-meta-row .post-lang-switch:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}
@media (min-width: 768px) {
  .post:has(.post-content) .post-meta-row .post-lang-switch {
    margin-left: auto;
  }
  .post:has(.post-content) .post-meta-row .post-lang-switch ~ .post-lang-switch {
    margin-left: 0;
  }
}

.post-toc-mobile {
  margin: var(--s-6) 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.post-toc-mobile .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.post-toc-mobile .toc.is-empty {
  display: none;
}

.post-toc-mobile:has(.toc.is-empty) {
  display: none;
}

/* ============================================================================
 * 15b. Projects page — aligned to design kit Pages.jsx `.uk-proj*`
 * ========================================================================== */
.projects-page {
  max-width: var(--page-max);
  margin: 0 auto;
}

.projects-grid {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

.project-card {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
}

.project-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.project-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-lang-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-3);
  display: inline-block;
}

.project-lang-dot--python {
  background: #3572A5;
}

.project-lang-dot--typescript {
  background: #3178C6;
}

.project-lang-dot--javascript {
  background: #F1E05A;
}

.project-lang-dot--rust {
  background: #DEA584;
}

.project-lang-dot--cpp {
  background: #F34B7D;
}

.project-lang-dot--go {
  background: #00ADD8;
}

.project-stats {
  display: inline-flex;
  gap: 10px;
  color: var(--fg-3);
}

.project-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-2);
  line-height: 1.25;
}

.project-title a {
  color: var(--fg);
  text-decoration: none;
}

.project-title a:hover {
  color: var(--accent);
}

.project-blurb {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0 0 var(--s-3);
  flex: 1;
}

.project-repo {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px dotted var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}

.project-repo::before {
  content: "↗ ";
  color: var(--accent);
}

.project-repo a {
  color: inherit;
}

.project-repo a:hover {
  color: var(--accent);
}

.project-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================================
 * 15c. "Cite this post" footer — BlogPost.jsx:63-71 `.uk-post-footer`
 * ========================================================================== */
.post-cite {
  margin-top: var(--s-7);
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--rule);
  /* 100% lets it fill the parent .post-content — using 96ch here would compute
     against the cite's mono font ('0' narrower than serif) and shrink the block. */
  max-width: 100%;
}

.post-cite__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: var(--s-2);
}

.post-cite .eyebrow {
  display: inline-block;
  margin: 0;
}

.post-cite__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.post-cite__copy:hover {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-wash);
}

.post-cite__copy:focus-visible {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-wash);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.post-cite__copy.is-copied {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.post-cite__bib {
  background: var(--accent-wash); /* moss-tinted panel so it reads "colored", not grey */
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-2);
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}

.post-cite__bib code {
  background: transparent;
  padding: 0;
  color: var(--fg);
  font-size: inherit;
}

/* Light syntax highlighting — @misc / cite-key / field-name / value ink colors.
   Spans are emitted by _layouts/post.html around the captured BibTeX entry. */
.post-cite__bib .bib-type {
  color: var(--ink-wine);
  font-weight: 600;
}

.post-cite__bib .bib-key {
  color: var(--ink-ochre);
}

.post-cite__bib .bib-field {
  color: var(--ink-blue);
}

.post-cite__bib .bib-value {
  color: var(--fg);
}

html[data-theme=dark] .post-cite__bib .bib-type {
  color: #E6A8B6;
}

html[data-theme=dark] .post-cite__bib .bib-key {
  color: #E6C391;
}

html[data-theme=dark] .post-cite__bib .bib-field {
  color: #9BB8E6;
}

/* ============================================================================
 * 15d. Blog post responsive width — let prose grow with viewport rather than
 *      cram every desktop into a 68ch ribbon. Floor keeps line length readable
 *      on tablet; ceilings stop at comfortable reading width on large screens.
 * ========================================================================== */
:root {
  --post-prose-max: 68ch;
}

@media (min-width: 992px) {
  :root {
    --post-prose-max: 80ch;
  }
}
@media (min-width: 1200px) {
  :root {
    --post-prose-max: 88ch;
  }
}
@media (min-width: 1440px) {
  :root {
    --post-prose-max: 96ch;
  }
}
/* Narrow the outer .container for post pages so prose + TOC sit close together
   instead of opening a 240px gap between them. Tiered to viewport so the TOC
   never crowds prose on narrow screens or drifts far away on wide ones. */
.post.toc-layout {
  max-width: none;
}

body:has(.post.toc-layout) > .container.mt-5 {
  max-width: min(960px, 100% - 2 * var(--gutter));
}

@media (min-width: 1200px) {
  body:has(.post.toc-layout) > .container.mt-5 {
    max-width: min(1120px, 100% - 2 * var(--gutter));
  }
}
@media (min-width: 1440px) {
  body:has(.post.toc-layout) > .container.mt-5 {
    max-width: min(1200px, 100% - 2 * var(--gutter));
  }
}
/* Content column shrinks to prose + breathing so TOC sits immediately to its
   right instead of floating behind a wide internal margin. TOC col grows to
   fill remaining container width; the sticky sidebar inside stays at 260px. */
@media (min-width: 992px) {
  .post.toc-layout:not(.post--sidenotes) > .row > .toc-content {
    flex: 0 1 auto;
    max-width: calc(80ch + 70px);
  }
  .post.toc-layout:not(.post--sidenotes) > .row > .toc-sidebar-col {
    flex: 1 1 0;
    max-width: none;
  }
  .post.toc-layout:not(.post--sidenotes) .toc-sidebar {
    max-width: 260px;
    margin-left: auto; /* right-align within its col so TOC hugs the same
   right edge as the language-switch / post-header */
  }
}
@media (min-width: 1200px) {
  .post.toc-layout:not(.post--sidenotes) > .row > .toc-content {
    max-width: calc(88ch + 70px);
  }
}
@media (min-width: 1440px) {
  .post.toc-layout:not(.post--sidenotes) > .row > .toc-content {
    max-width: calc(96ch + 70px);
  }
}
/* ============================================================================
 * 16. Footer
 * ========================================================================== */
footer.fixed-bottom,
footer.sticky-bottom,
footer {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  background: var(--paper) !important;
  border-top: 1px solid var(--rule);
}
footer.fixed-bottom a,
footer.sticky-bottom a,
footer a {
  color: var(--accent) !important;
}
footer.fixed-bottom a:hover,
footer.sticky-bottom a:hover,
footer a:hover {
  color: var(--accent-hover) !important;
}

/* flex split: left copyright, right mono-meta last-updated — kit.css:167-171 */
.uk-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.uk-footer-updated {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .uk-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
}
/* ============================================================================
 * 17. Horizontal rule / dividers
 * ========================================================================== */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}

/* ============================================================================
 * 18. Responsive
 * ========================================================================== */
@media (max-width: 768px) {
  .post-header.hero {
    padding: 32px 0 24px;
  }
  .signature-name {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
}
:root {
  --max-content-width: 1240px;
}

/* cache bust */

/*# sourceMappingURL=main.css.map */