/* ========================================
   CSS VARIABLES & DESIGN SYSTEM
   ======================================== */

:root {
  /* Color System - Professional Academic Theme */
  --primary-color: #0f766e;
  --primary-hover: #0d9488;

  /* Scrollbar — neutral thumb so the page-long teal strip doesn't outshout the
     accent system; teal only on hover */
  --scrollbar-thumb: #c3c8d0;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-section: 2.5rem; /* vertical gap between page sections (40px) */

  /* Typography — editorial pairing: Fraunces (soft display serif) over Hanken
     Grotesk (clean, lightly characterful sans) to step off the default template */
  --font-family-base: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* One type scale (rem on a 16px root) — every element pulls from this ladder
     instead of scattering one-off sizes. Steps chosen to match the existing
     visual rhythm so this is a consolidation, not a resize. */
  --fs-2xs: 0.7rem;    /* ~11px — chips, metric pills */
  --fs-sm:  0.875rem;  /* 14px  — author / venue / link / date metadata */
  --fs-md:  0.95rem;   /* ~15px — body copy, news, descriptions */
  --fs-lg:  1.05rem;   /* ~17px — subsection h3, product titles */
  --fs-xl:  1.3rem;    /* ~21px — paper titles (serif) */
  --fs-3xl: 1.75rem;   /* 28px  — section h2 */
  --fs-4xl: 2.4rem;    /* ~38px — name / hero */

  /* Two line-heights do all the work: tight for headings, base for prose */
  --line-height-base: 1.6;
  --lh-tight: 1.3;
  --lh-snug: 1.5;
  --lh-relaxed: 1.7;

  /* Body keeps a fixed 15px; legacy aliases map onto the scale above */
  --font-size-base: 15px;
  --font-size-lg: var(--fs-lg);
  --font-size-xl: var(--fs-xl);
  --font-size-xxl: var(--fs-4xl);

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: 12px;

  /* Light Mode Colors — off-white canvas, white cards (layered "grouped" surfaces) */
  --bg-primary: #f6f7f9;
  --bg-secondary: #ffffff;
  --text-primary: #2b2f36;
  --text-secondary: #565b63;
  --text-tertiary: #646a72;
  --border-color: #e0e0e0;

  /* Surfaces & accent — used by nav + cards (refined editorial system) */
  --nav-bg: rgba(248, 249, 251, 0.78);
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-hover: rgba(0, 0, 0, 0.05);
  --card-bg: #ffffff;
  --card-border: #e4e6ea;
  --card-hover-border: rgba(15, 118, 110, 0.35);

  /* Soft macOS-style elevation — two layers (ambient + key), low opacity, downward */
  --card-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 6px 18px rgba(17, 24, 39, 0.05);
  --card-shadow-hover: 0 2px 5px rgba(17, 24, 39, 0.06), 0 16px 34px rgba(17, 24, 39, 0.10);
  --grain-opacity: 0.03;
  --grain-blend: normal;
  --accent-line: var(--primary-color);
  --accent-soft: rgba(15, 118, 110, 0.07);
  --accent-soft-border: rgba(15, 118, 110, 0.2);
  --accent-tint: linear-gradient(90deg, rgba(15, 118, 110, 0.045), transparent 55%);

  /* Metric chips — subtle "raised pill" material (gradient + hairline + contact
     shadow + top inset highlight) so the numbers read as crafted, not bare text */
  --metric-bg: linear-gradient(180deg, #ffffff, #f3f4f7);
  --metric-border: #e2e4e9;
  --metric-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --metric-border-hover: #cfd2d9;
  --metric-shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);

  /* Distinction chip (Oral / Spotlight) — teal outline over a halo ring. Reads
     at a glance without the solid fill that would outshout the card. */
  --award-bg: rgba(15, 118, 110, 0.13);
  --award-border: rgba(15, 118, 110, 0.42);
  --award-ring: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.dark-mode {
  /* Dark Mode Colors */
  --bg-primary: #131417;
  --bg-secondary: #1e1e1e;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --text-tertiary: #909090;
  --border-color: #333333;
  --scrollbar-thumb: #3a3e46;
  /* Brighter teal for links/accents so they read on ink */
  --primary-color: #2dd4bf;
  --primary-hover: #5eead4;
  --glass-bg: rgba(30, 30, 30, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* Dark surfaces & accent — slate/ink, no olive-yellow */
  --nav-bg: rgba(22, 24, 28, 0.7);
  --nav-border: rgba(255, 255, 255, 0.09);
  --nav-hover: rgba(255, 255, 255, 0.07);
  --card-bg: #1b1d21;
  --card-border: #2e3138;
  --card-hover-border: rgba(45, 212, 191, 0.4);

  /* Dark elevation — deeper, since ambient shadow reads less on ink */
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.28);
  --card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 38px rgba(0, 0, 0, 0.5);
  --grain-opacity: 0.04;
  --grain-blend: overlay;
  --accent-line: #2dd4bf;
  --accent-soft: rgba(45, 212, 191, 0.1);
  --accent-soft-border: rgba(45, 212, 191, 0.26);
  --accent-tint: linear-gradient(90deg, rgba(45, 212, 191, 0.07), transparent 55%);

  /* Metric chips — dark glass: faint translucent fill, hairline, top inset sheen */
  --metric-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  --metric-border: rgba(255, 255, 255, 0.13);
  --metric-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --metric-border-hover: rgba(255, 255, 255, 0.22);
  --metric-shadow-hover: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Distinction chip — brighter teal so the outline survives on ink */
  --award-bg: rgba(45, 212, 191, 0.16);
  --award-border: rgba(45, 212, 191, 0.5);
  --award-ring: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

/* ========================================
   BASE STYLES WITH MODERN IMPROVEMENTS
   ======================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Clear the fixed nav (~57px) when jumping to #news / #research / #products,
     via nav clicks or an inbound deep link — otherwise the section heading
     lands underneath the bar */
  scroll-padding-top: 72px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-base);
  position: relative;
}

a:focus,
a:hover {
  color: var(--primary-hover);
  text-decoration: none;
}

/* Subtle link underline animation */
a:not(.nav-list a):not(.social-icons a):hover::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background: var(--primary-hover);
  animation: linkSlide 0.3s ease;
}

@keyframes linkSlide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

body,
td,
th,
tr,
p,
a {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

strong {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

h2 {
  margin: 0;
  font-weight: 600;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  position: relative;
  display: inline-block;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--accent-line);
  border-radius: 2px;
}

.name {
  padding-top: var(--spacing-lg);
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--font-size-xxl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.05;
}

/* Inline SVG icons (replacing the Font Awesome webfont) — sized and coloured
   like the <i> glyphs they stand in for */
.fa-svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Inline "highlighted" word in the Publications intro — accent underline, not yellow */
span.highlight {
  background: none;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: inset 0 -0.42em 0 var(--accent-soft);
}
    footer {
        padding: 0;
        text-align: center;
        margin-top: 48px;
    }
    footer a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    footer a:hover {
        color: var(--primary-hover);
    }
    footer > p {
        font-size: var(--fs-sm);
        color: var(--text-secondary);
        margin: 0;
        padding: 24px 0;
        line-height: var(--line-height-base);
    }
    body {
        font-family: var(--font-family-base);
        margin: 0;
        padding: 0;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        transition: background-color var(--transition-base), color var(--transition-base);
        position: relative;
        overflow-x: hidden;
    }

    /* Subtle academic background */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 300px;
        background: linear-gradient(180deg, rgba(15, 118, 110, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
        z-index: -1;
        pointer-events: none;
    }

    .dark-mode::before {
        background: linear-gradient(180deg, rgba(15, 118, 110, 0.08) 0%, rgba(18, 18, 18, 0) 100%);
    }

    /* Matte grain overlay — barely-there fractal noise so flat areas read as paper.
       Fixed, non-interactive, sits above content as a thin veil. Strength + blend
       mode are theme-driven so it stays subtle in light and doesn't wash out ink. */
    .grain {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9998;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 180px 180px;
        opacity: var(--grain-opacity);
        mix-blend-mode: var(--grain-blend);
    }
    #main-content {
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
        padding: 100px 24px 40px 24px;
    }
    section {
        padding: 0;
        max-width: 860px;
        margin: 0 auto var(--spacing-section) auto;
    }
    .profile-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        margin-bottom: var(--spacing-section);
    }
    .profile-text {
        flex: 1;
    }
    .profile-text p {
        margin: 0 0 16px 0;
        max-width: 640px;
        line-height: var(--lh-relaxed);
    }
    .profile-text p:last-child {
        margin-bottom: 0;
    }
    .profile-image {
        flex: 0 0 200px;
        max-width: 200px;
        position: relative;
    }
    .avatar-clickable {
        cursor: pointer;
        position: relative;
        z-index: 1;
        border-radius: var(--radius-full);
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        color: inherit;
        -webkit-appearance: none;
        appearance: none;
    }
    .profile-image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-lg);
        transition: all var(--transition-base);
        will-change: transform;
    }
    .avatar-clickable img {
        border: 3px solid var(--border-color);
        position: relative;
        z-index: 1;
    }
    .avatar-clickable:hover::after {
        content: '✨';
        position: absolute;
        top: -8px;
        right: -8px;
        font-size: 20px;
        animation: avatar-sparkle 1s ease infinite;
        z-index: 10;
    }
    @keyframes avatar-sparkle {
        0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
        50% { transform: scale(1.3) rotate(15deg); opacity: 0.7; }
    }
    .profile-image:hover img {
        transform: scale(1.05) rotate(2deg);
        box-shadow: var(--shadow-xl);
    }
    .dark-mode {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }
    .to-top {
    position: fixed;
    right: 32px;
    bottom: 32px;
    background: rgba(15, 118, 110, 0.12);
    color: var(--primary-color);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    text-decoration: none;
    border: 1px solid rgba(15, 118, 110, 0.22);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 999;
    /* Hidden until scrolled — fades in via .is-visible (no display snap) */
    opacity: 0;
    pointer-events: none;
}

    .to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

    .dark-mode .to-top {
    background: rgba(45, 212, 191, 0.16);
    color: var(--primary-color);
    border-color: rgba(45, 212, 191, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

    .to-top:hover {
    transform: translateY(-3px) scale(1.06);
    background: rgba(15, 118, 110, 0.18);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

    .dark-mode .to-top:hover {
    background: rgba(45, 212, 191, 0.24);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

    .to-top:active {
    transform: translateY(-1px) scale(1.03);
}

/* ========================================
   ACCESSIBILITY AND UX IMPROVEMENTS
   ======================================== */

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
    border-radius: 0 0 4px 0;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

/* Screen reader only text */
.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;
}

/* ========================================
   ENHANCED NAVIGATION
   ======================================== */

.main-navigation {
    width: 100%;
    background: var(--nav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 28px;
    border-bottom: 1px solid var(--nav-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: padding var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.dark-mode .main-navigation {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.main-navigation.scrolled {
    padding: 7px 28px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 18px rgba(17, 24, 39, 0.06);
}

.dark-mode .main-navigation.scrolled {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 18px rgba(0, 0, 0, 0.35);
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.nav-list li {
    margin: 0;
}

.nav-list a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-list a .fa-svg {
    font-size: 0.85em;
    opacity: 0.7;
}

.nav-list a:hover {
    color: var(--text-primary);
    background-color: var(--nav-hover);
}

.nav-list a.active {
    color: var(--primary-color);
    background-color: var(--accent-soft);
    font-weight: 700;
}

.nav-list a.active .fa-svg {
    opacity: 1;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 1.2em;
}

.social-icons a {
    color: var(--text-secondary);
    text-decoration: none;
    margin: 0;
    font-size: 1.05em;
    padding: 8px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.social-icons a:hover {
    color: var(--primary-color);
    background-color: var(--nav-hover);
}

.social-icons a::after {
    display: none;
}

.theme-switcher {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 1.05em;
    margin-left: 4px;
}

.theme-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.theme-icon:hover {
    color: var(--primary-color);
}

.three-way-radio {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 4px;
    width: 45px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.14);
    border-radius: 10px;
}

.dark-mode .three-way-radio {
    background-color: rgba(255, 255, 255, 0.16);
}

/* Radios are transparent but kept in the tab order (not display:none) so the
   switcher is keyboard-operable and each third is click-selectable. */
.three-way-radio input {
    position: absolute;
    top: 0;
    width: 33.333%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.three-way-radio input.left { left: 0; }
.three-way-radio input.center { left: 33.333%; }
.three-way-radio input.right { left: 66.666%; }

.three-way-radio input:focus-visible ~ .indicator {
    box-shadow: 0 0 0 2px var(--nav-bg), 0 0 0 4px var(--primary-color);
}

.three-way-radio .indicator {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: var(--accent-line);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.three-way-radio input:checked.left ~ .indicator {
    transform: translateX(0);
}

.three-way-radio input:checked.center ~ .indicator {
    transform: translateX(12px);
}

.three-way-radio input:checked.right ~ .indicator {
    transform: translateX(25px);
}

/* ========================================
   RESEARCH PAPERS LAYOUT
   ======================================== */

#research {
    padding: 0;
    max-width: 860px;
    margin: 0 auto var(--spacing-section) auto;
}

#research h2 {
    margin-bottom: 16px;
}

#research > p {
    margin-bottom: 32px;
    max-width: 680px;
    line-height: var(--lh-relaxed);
}

.research-content {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.research-paper {
    display: flex;
    gap: 26px;
    margin: 0 0 18px 0;
    padding: 22px 24px;
    border-radius: var(--radius-md);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left-width: 1px;
    box-shadow: var(--card-shadow);
    transition: border-color var(--transition-base), box-shadow var(--transition-base),
                transform var(--transition-base), opacity var(--transition-slow);
    position: relative;
    overflow: hidden;
}

/* Revealed on scroll by the IntersectionObserver in app.js (which staggers each
   card). Gated on .js (set by an inline head script) so the content is never
   hidden for no-JS visitors, crawlers or print. */
.js .research-paper {
    opacity: 0;
    transform: translateY(24px);
}

/* Calm hover — modest lift onto a softer, deeper elevation */
.research-paper:hover {
    transform: translateY(-3px);
    border-color: var(--card-hover-border);
    box-shadow: var(--card-shadow-hover);
}

/* Representative work: left accent border + whisper tint. No yellow, no star. */
.research-paper.highlight {
    border-left: 3px solid var(--accent-line);
    background-color: var(--card-bg);
    background-image: var(--accent-tint);
}

.paper-media {
    flex: 0 0 40%;
    min-width: 0;
    align-self: flex-start;
}

.paper-media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    transition: border-color var(--transition-base);
}

.paper-media .paper-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: #000;
}

/* Custom data-driven metrics — our own quiet text indicators in place of
   GitHub-README-style shields badges. Numbers filled live by app.js; each
   anchor (and its row) starts [hidden] and only reveals on a successful fetch,
   so a failed/zero metric simply shows nothing. */
/* Metric chips sit inline at the end of the venue line (like the original
   badges): platform logo + all-time figure in a quiet raised pill, so the
   source is recognisable at a glance and no extra row is introduced. */
.metric {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 10px 2px 8px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    font-style: normal;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    background: var(--metric-bg);
    border: 1px solid var(--metric-border);
    border-radius: 999px;
    box-shadow: var(--metric-shadow);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                border-color var(--transition-fast);
}

.metric[hidden] {
    display: none;
}

.metric .fa-svg,
.metric .metric-logo {
    font-size: 0.95em;
    line-height: 1;
    transition: color var(--transition-base);
}

/* Platform-coloured logos so each source reads at a glance (🤗 carries its own
   colour). GitHub mark flips for contrast in dark mode. */
.metric[data-metric="github-stars"] .fa-svg { color: #24292f; }
.metric[data-metric="npm"] .fa-svg { color: #cb3837; }
.metric[data-metric="youtube-views"] .fa-svg { color: #ff0000; }
.dark-mode .metric[data-metric="github-stars"] .fa-svg { color: #e6edf3; }

.metric:hover {
    transform: translateY(-1px);
    border-color: var(--metric-border-hover);
    box-shadow: var(--metric-shadow-hover);
}

.metric::after {
    display: none;
}

/* Distinction chip on the venue line (Oral / Spotlight / Best Paper). Vertical
   metrics deliberately match .metric — same font size, padding and hairline —
   so the venue row stays even next to the metric pills. */
.paper-award {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 9px;
    font-size: var(--fs-2xs);
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--primary-color);
    background: var(--award-bg);
    border: 1px solid var(--award-border);
    border-radius: 999px;
    box-shadow: var(--award-ring);
}

.dark-mode .paper-award {
    color: var(--accent-line);
}

.paper-media lite-youtube {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background-color: #000;
}

.paper-content {
    flex: 1;
    min-width: 0;
    max-width: 650px;
}

.paper-title {
    margin: 0 0 12px 0;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    word-wrap: break-word;
    hyphens: auto;
}

.paper-title a .fa-svg {
    margin-right: 6px;
    color: var(--primary-color);
}

.paper-title a {
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
    background: linear-gradient(to right, var(--primary-color), var(--primary-color)) no-repeat;
    background-size: 0% 2px;
    background-position: left bottom;
    padding-bottom: 2px;
}

.paper-title a:hover {
    background-size: 100% 2px;
    color: var(--primary-color);
}

.paper-authors {
    margin: 0 0 8px 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    word-wrap: break-word;
}

.paper-venue {
    margin: 0 0 10px 0;
    font-style: italic;
    color: var(--primary-color);
    font-size: var(--fs-sm);
}

/* Quiet adoption note under the venue line — where the work was upstreamed.
   Each name links to its merged PR so the claim is checkable. */
.paper-adoption {
    margin: -4px 0 10px 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.paper-links {
    margin: 0 0 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.paper-links a {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.paper-links a:hover {
    text-decoration: underline;
}

/* One-click BibTeX copy — dressed as just another paper link, no extra chrome */
.bib-copy {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--fs-sm);
    line-height: var(--line-height-base);
    color: var(--primary-color);
    cursor: pointer;
    white-space: nowrap;
}

.bib-copy:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.bib-copy.copied {
    color: var(--text-secondary);
    cursor: default;
}

/* ========================================
   PRODUCTS — COMPACT PORTFOLIO VARIANT
   Same system as Publications, denser + category chips for a product feel.
   ======================================== */

.cat-chip {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 2px 9px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: 999px;
}

.dark-mode .cat-chip {
    color: var(--accent-line);
}

#products .research-paper {
    gap: 22px;
    padding: 18px 22px;
}

#products .paper-media {
    flex: 0 0 34%;
}

#products .paper-title {
    font-size: var(--fs-lg);
    margin-bottom: 8px;
}

#products .paper-venue {
    margin-bottom: 8px;
}

/* ========================================
   ENHANCED LISTS
   ======================================== */

.honors-list,
.reviewer-list,
.organization-list,
.pc-list,
.ta-list {
    line-height: var(--lh-relaxed);
    padding-left: 24px;
    margin: 0 0 16px 0;
}

.honors-list li,
.reviewer-list li,
.organization-list li,
.pc-list li,
.ta-list li {
    margin-bottom: 10px;
}

/* The italic category labels (e.g. "NLP:") slant into the colon that follows.
   A little trailing space keeps the last letter clear of it. */
.reviewer-list li > em,
.ta-list li > em {
    padding-right: 0.18em;
}

#honors h3 {
    color: var(--text-primary);
    margin: 24px 0 12px 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

#honors h3:first-of-type {
    margin-top: 0;
}

/* ========================================
   NEWS LIST
   ======================================== */

/* News flows down the page (no inner scroll box): 5 items, then a Show more
   toggle reveals the rest so nothing hides behind a tiny scrollbar. */
.news-list-wrap {
    margin-top: 16px;
}

.news-list li[hidden] {
    display: none;
}

.news-toggle {
    margin: 16px 0 0 20px;
    padding: 4px 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-fast);
}

.news-toggle:hover {
    color: var(--primary-hover);
}

.news-toggle .fa-svg {
    font-size: 0.78em;
    transition: transform var(--transition-fast);
}

.news-toggle[aria-expanded="true"] .fa-svg {
    transform: rotate(180deg);
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--border-color, #e5e5e5);
}

.news-list li {
    position: relative;
    padding: 8px 0 8px 20px;
    line-height: var(--line-height-base);
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.news-list li::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

.news-date {
    display: inline-block;
    min-width: 64px;
    margin-right: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--primary-color);
    font-size: var(--fs-sm);
}

@media (max-width: 700px) {
    .news-date {
        display: block;
        margin-bottom: 2px;
    }
}

.activities-content h3 {
    color: var(--text-primary);
    margin: 24px 0 12px 0 !important;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.activities-content h3:first-child {
    margin-top: 0 !important;
}


/* ========================================
   COLLABORATIONS GRID
   ======================================== */

/* Acknowledgements carousel — one card at a time, arrows + dots + swipe (JS).
   Without JS the cards just stack (track is plain block, arrows/dots hidden). */
.ack-carousel {
    margin: 24px 0 0 0;
}

.ack-stage {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ack-window {
    flex: 1 1 auto;
    min-width: 0;
}

.js .ack-window {
    overflow: hidden;
}

.js .ack-track {
    display: flex;
    gap: 0;
    position: relative;
    transition: transform var(--transition-base);
    will-change: transform;
}

/* Peek layout: the active card is centered at full strength; its neighbours
   stay partly visible but dimmed and slightly shrunk, hinting "swipe for more". */
.js .ack-track > .collaboration-item {
    flex: 0 0 50%;
    min-width: 0;
    opacity: 0.5;
    transform: scale(0.9);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.js .ack-track > .collaboration-item.is-active {
    opacity: 1;
    transform: scale(1);
}

/* During the seamless wrap snap, kill the track AND card transitions so the new
   centred card doesn't visibly scale 0.9 → 1 (the "it jumped again" pulse). */
.js .ack-track.ack-snap,
.js .ack-track.ack-snap > .collaboration-item {
    transition: none;
}

/* no-JS fallback: stacked cards need vertical spacing */
.ack-track > .collaboration-item + .collaboration-item {
    margin-top: 16px;
}

.js .ack-track > .collaboration-item + .collaboration-item {
    margin-top: 0;
}

.ack-btn {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-secondary);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.js .ack-btn {
    display: inline-flex;
}

.ack-btn:hover {
    color: var(--text-primary);
    border-color: var(--card-hover-border);
    transform: scale(1.08);
}

.ack-prev .fa-svg {
    transform: rotate(90deg);
}

.ack-next .fa-svg {
    transform: rotate(-90deg);
}

.ack-dots {
    display: none;
    justify-content: center;
    /* No gap: each dot carries 8px of transparent padding on every side, so
       adjacent dots already sit 16px apart visually. */
    gap: 0;
    margin-top: 16px;
}

.js .ack-dots {
    display: flex;
}

.ack-dot {
    /* The dot reads as 8px but has to be tappable: content-box keeps the
       painted circle at 8px while 8px of padding grows the hit area to the
       24x24 minimum. background-clip stops the padding from being painted. */
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    padding: 8px;
    border: none;
    border-radius: 50%;
    background-color: var(--card-border);
    background-clip: content-box;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.ack-dot[aria-current="true"] {
    /* background-color, not the `background` shorthand: the shorthand would
       reset background-clip and paint the whole 24px hit area. */
    background-color: var(--accent-line);
    transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
    .js .ack-track,
    .js .ack-track > .collaboration-item {
        transition: none;
    }
}

@media (max-width: 600px) {
    .js .ack-track > .collaboration-item {
        flex-basis: 74%;
    }
    .ack-btn {
        width: 34px;
        height: 34px;
    }
}

.collaboration-item {
    text-align: center;
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.collaboration-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.1), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.collaboration-item:hover::before {
    width: 300px;
    height: 300px;
}

.collaboration-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--card-hover-border);
}

.organization-logo {
    height: 80px;
    width: auto;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    filter: grayscale(30%);
    position: relative;
    z-index: 1;
}

.collaboration-item:hover .organization-logo {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.collaboration-item h3 {
    margin: 0 0 8px 0;
    font-size: var(--fs-md);
}

.collaboration-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* ========================================
   PROFILE IMAGE ENHANCEMENTS
   ======================================== */

.image-container {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ========================================
   RESPONSIVE DESIGN IMPROVEMENTS
   ======================================== */

/* Wide monitors: let the shell breathe so content isn't marooned in a narrow
   860px column on 1440px+ screens. Prose stays capped to a readable measure;
   the reclaimed width goes to the demo media, not the text. */
@media (min-width: 1200px) {
    #main-content,
    section,
    #research {
        max-width: 1040px;
    }

    .paper-media {
        flex: 0 0 46%;
    }
}

@media (max-width: 768px) {
    #main-content {
        padding: 100px 16px 32px 16px;
    }

    .research-content {
        width: 100%;
        padding: 0;
    }

    .research-paper {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        margin-bottom: 16px;
    }

    .paper-media {
        flex: none;
        max-width: 100%;
        min-width: auto;
        /* The base rule sets align-self:flex-start to top-align the media next
           to the text. Once .research-paper flips to a column here, that same
           declaration governs the horizontal axis instead and the column
           shrink-to-fits. img/video still size themselves from their intrinsic
           dimensions, but <lite-youtube> has none and collapses to ~4px. */
        align-self: stretch;
    }

    .paper-content {
        max-width: 100%;
    }

    .main-navigation {
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px 12px;
        gap: 6px 12px;
    }

    .main-navigation.scrolled {
        padding: 6px 12px;
    }

    .nav-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        margin-bottom: 0;
    }

    .nav-list li {
        margin: 0;
    }

    .nav-list a {
        padding: 7px 9px;
        font-size: 0.85em;
    }

    .social-icons {
        gap: 4px;
        font-size: 1.05em;
    }

    .social-icons a,
    .theme-icon {
        padding: 6px;
    }

    .theme-switcher {
        margin-left: 2px;
        font-size: 1.05em;
    }

    .collaboration-item {
        padding: 16px 12px;
    }

    .organization-logo {
        height: 60px;
    }

    .profile-section {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .profile-text,
    .profile-image {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    /* Name and photo stay centred, but running prose reads left-aligned —
       centred multi-line paragraphs are ragged on both edges and slower to read */
    .profile-text p {
        text-align: left;
    }

    .profile-image {
        max-width: 180px;
        margin: 0 auto;
    }

    .to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    section {
        margin-bottom: 36px;
    }
}

@media (max-width: 480px) {
    #main-content {
        padding: 108px 12px 24px 12px;
    }

    .research-content {
        width: 100%;
        padding: 0;
    }

    .research-paper {
        padding: 16px;
        margin-bottom: 12px;
    }

    .paper-title {
        font-size: 1rem;
    }


    .to-top {
        right: 12px;
        bottom: 12px;
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .nav-list a {
        padding: 6px 8px;
        font-size: 0.8em;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

/* Dark highlight: slate card + accent left border (no olive-yellow block) */
.dark-mode .research-paper.highlight {
    border-color: var(--card-border);
    border-left-color: var(--accent-line);
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus indicators for accessibility */
a:focus,
button:focus,
input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Loading state — .js-gated so a failed script never leaves the page unscrollable */
.js body:not(.loaded) {
    overflow: hidden;
}

.js body:not(.loaded)::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeOut 0.5s ease 0.3s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

/* Smooth reveal on load */
.profile-section,
section {
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Selection styling */
::selection {
    background: rgba(15, 118, 110, 0.2);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(15, 118, 110, 0.2);
    color: var(--text-primary);
}

/* Custom scrollbar — quiet by default, teal only on hover (vars resolve on <html>,
   which carries the .dark-mode class alongside <body>) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

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

/* Focus visible for better keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print: undo the JS-driven reveal states and drop screen chrome so the page
   prints/saves-to-PDF complete */
@media print {
    .js .research-paper,
    .js .collaboration-item {
        opacity: 1 !important;
        transform: none !important;
    }

    .news-list li[hidden] {
        display: list-item !important;
    }

    .grain,
    .main-navigation,
    .to-top,
    .news-toggle,
    .skip-link,
    .bib-copy {
        display: none !important;
    }

    #main-content {
        padding-top: 24px;
    }
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   EXPERIENCE / EDUCATION TIMELINE
   ======================================== */

/* Year on a rail at the left, one card per role at the right. The card reuses
   the same surface tokens as the publication cards, so this section reads as
   part of the same system rather than a bolted-on widget. */
.xp-list {
    list-style: none;
    margin: 20px 0 0 0;
    padding: 0;
    position: relative;
}

/* One continuous rail behind every dot, inset at both ends so it doesn't
   trail past the first and last entries. */
.xp-list::before {
    content: '';
    position: absolute;
    left: 65px;
    top: 26px;
    bottom: 26px;
    width: 2px;
    background: var(--border-color);
    border-radius: 1px;
}

.xp-item {
    position: relative;
    padding-left: 92px;
    margin-bottom: 14px;
}

.xp-item:last-child {
    margin-bottom: 0;
}

/* Dot sits on the rail, level with the org name inside the card. */
.xp-item::before {
    content: '';
    position: absolute;
    left: 60px;
    top: 32px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    border: 2px solid var(--accent-line);
    box-sizing: border-box;
    z-index: 1;
}

/* Most recent entry gets a filled dot — current position, without extra words. */
.xp-list > .xp-item:first-child::before {
    background: var(--accent-line);
}

.xp-year {
    position: absolute;
    left: 0;
    top: 24px;
    width: 52px;
    text-align: right;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
    opacity: 0.55;
    letter-spacing: -0.01em;
}

.xp-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: border-color var(--transition-base), box-shadow var(--transition-base),
                transform var(--transition-base);
}

.xp-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-hover-border);
    box-shadow: var(--card-shadow-hover);
}

/* Logos carry a baked-in white plate so brand marks read the same in both
   themes. Muted by default so four brand colours don't outshout the text. */
.xp-logo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    filter: grayscale(30%);
    transition: filter var(--transition-base);
}

.xp-card:hover .xp-logo {
    filter: grayscale(0%);
}

.xp-body {
    flex: 1;
    min-width: 0;
}

.xp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.xp-org {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: var(--lh-tight);
    color: var(--text-primary);
}

/* Same pill as the paper awards, so roles and paper badges match. */
.xp-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--primary-color);
    background: var(--award-bg);
    border: 1px solid var(--award-border);
    border-radius: 999px;
}

.xp-meta {
    margin: 5px 0 0 0;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
    font-style: italic;
}

.xp-points {
    margin: 9px 0 0 0;
    padding-left: 18px;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}

.xp-points li {
    margin-bottom: 5px;
}

.xp-points li:last-child {
    margin-bottom: 0;
}

.xp-line {
    margin: 9px 0 0 0;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}

.section-subhead {
    margin: 34px 0 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* Narrow screens: the year column costs too much width, so it moves inline
   above the card and the rail disappears with it. */
@media (max-width: 768px) {
    .xp-list::before {
        display: none;
    }
    .xp-item {
        padding-left: 0;
        margin-bottom: 16px;
    }
    .xp-item::before {
        display: none;
    }
    .xp-year {
        display: none;
    }
    .xp-card {
        gap: 14px;
        padding: 16px;
    }
    .xp-logo {
        width: 44px;
        height: 44px;
    }
}