:root {
    --bg: #ffffff;
    --bg-soft: #f7f8fb;
    --bg-card: #ffffff;
    --text: #1a1d23;
    --text-soft: #4a5160;
    --muted: #7a8194;
    --accent: #3568d4;
    --accent-soft: #e6eefc;
    --accent-deep: #1f3f8a;
    --border: #e4e7ee;
    --code-bg: #0f1218;
    --code-text: #e8ecf2;
    --gradient: linear-gradient(135deg, #e6eefc 0%, #f7e8ff 50%, #fff5e8 100%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

/* ------------------- Hero ------------------- */
.hero {
    background: var(--gradient);
    padding: 72px 24px 56px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.hero .container {
    max-width: 1100px;
    margin: 0 auto;
}

.venue-row {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.venue-logo {
    height: 30px;
    width: auto;
    display: block;
}

.venue-badge {
    display: inline-block;
    padding: 6px 0;
    color: var(--accent-deep);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.hero h1 {
    font-size: 2.55rem;
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    color: #11151c;
}

.hero h1 .mrt {
    background: linear-gradient(120deg, #3568d4, #8b3dd4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero .subtitle {
    font-size: 1.18rem;
    color: var(--text-soft);
    margin: 0 0 32px;
    font-weight: 400;
}

.authors {
    font-size: 1.02rem;
    color: var(--text-soft);
    margin: 0 0 12px;
    line-height: 1.85;
}

.authors .author {
    white-space: nowrap;
    margin: 0 4px;
}

.authors sup {
    font-size: 0.7rem;
    color: var(--accent);
    font-weight: 600;
}

.affiliations {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 6px 0 20px;
    line-height: 1.85;
}

.affiliations sup {
    color: var(--accent);
    font-weight: 600;
}

.corr {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 28px;
}

/* Affiliation logos */
.affil-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 36px;
    margin: 10px auto 28px;
    max-width: 900px;
}

.affil-logos img {
    height: 38px;
    max-width: 130px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.affil-logos img:hover {
    opacity: 1;
}

/* Button row */
.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 8px;
}

.button-row.primary-row {
    margin: 20px 0 4px;
}

.button-row.primary-row + .button-row {
    margin-top: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #11151c;
    color: #ffffff !important;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid #11151c;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.btn:hover {
    background: #1f2a3d;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(17, 21, 28, 0.18);
    text-decoration: none;
}

.btn.outline {
    background: rgba(255, 255, 255, 0.6);
    color: #11151c !important;
    border: 1px solid rgba(17, 21, 28, 0.2);
}

.btn.outline:hover {
    background: #ffffff;
}

.btn .icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* ------------------- Sections ------------------- */
section {
    padding: 64px 24px;
}

section.alt {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.container.narrow {
    max-width: 860px;
}

h2.section-title {
    font-size: 1.9rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    color: #11151c;
}

.section-subtitle {
    text-align: center;
    color: var(--muted);
    font-size: 1rem;
    margin: 0 auto 40px;
    max-width: 720px;
}

.abstract {
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--text);
    text-align: justify;
}

.abstract strong {
    color: #11151c;
}

/* Figure */
.figure {
    margin: 24px auto;
    text-align: center;
}

.figure img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(17, 21, 28, 0.08);
    border: 1px solid var(--border);
}

.figure.no-shadow img {
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.figure .caption {
    margin: 14px auto 0;
    font-size: 0.95rem;
    color: var(--muted);
    max-width: 920px;
    line-height: 1.6;
    text-align: left;
    padding: 0 8px;
}

.figure .caption strong {
    color: var(--text);
}

/* Multi-column figure rows for tall images */
.figure-row {
    display: grid;
    gap: 14px;
    margin: 0 auto;
    align-items: start;
}

.figure-row.cols-2 {
    grid-template-columns: 1fr 1fr;
}

.figure-row.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.figure-row img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(17, 21, 28, 0.08);
    border: 1px solid var(--border);
}

.figure.half {
    max-width: 640px;
    margin: 24px auto;
}

@media (max-width: 720px) {
    .figure-row.cols-2,
    .figure-row.cols-3 {
        grid-template-columns: 1fr;
    }
}

/* Highlight boxes */
.highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 28px 0 36px;
}

.highlight {
    padding: 22px 20px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(17, 21, 28, 0.08);
}

.highlight .num {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.highlight .label {
    font-size: 0.92rem;
    color: var(--text-soft);
    line-height: 1.45;
}

/* Tabs */
.tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 28px;
    flex-wrap: wrap;
}

.tab {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-soft);
    cursor: pointer;
    font-size: 0.93rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.tab:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn 0.25s ease;
}

/* ---- Results: floating sidebar with JS-driven dynamic position ---- */
/* On wide screens (>=1580px) JS adds .is-floating to the sidebar and
   updates its top each scroll tick so it:
   (1) starts aligned with the top of #results (next to the title),
   (2) glides toward the middle of the viewport as the user scrolls,
   (3) parks at the vertical middle while they read the panels,
   (4) rides out with the bottom of the section rather than vanishing.
   On narrow viewports the sidebar is just an inline row above panels. */
.results-tabgroup {
    margin-top: 28px;
}

.results-tabgroup .results-content {
    min-width: 0;
}

.tabs.sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* On wide viewports the sidebar lives in fixed positioning at all times
   so that toggling visibility never reshapes the document flow — that
   reflow was what caused Safari's momentum scroller to judder when the
   user crossed the Results section boundary. */
@media (min-width: 1580px) {
    .tabs.sidebar {
        position: fixed;
        display: none;
        width: 216px;
        z-index: 10;
        padding: 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--border);
        box-shadow: 0 12px 30px rgba(17, 21, 28, 0.12);
        /* Tell the browser this element will be animated on scroll so it
           uses its own compositing layer and doesn't fight with momentum. */
        will-change: top, left;
    }
    .tabs.sidebar.is-floating {
        display: flex;
    }
}

.tabs.sidebar .tab {
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 1px 2px rgba(17, 21, 28, 0.03);
}

.tabs.sidebar .tab small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.35;
}

.tabs.sidebar .tab:hover {
    border-color: var(--accent);
    transform: translateX(2px);
    box-shadow: 0 4px 14px rgba(53, 104, 212, 0.12);
}

.tabs.sidebar .tab.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(53, 104, 212, 0.28);
}

.tabs.sidebar .tab.active small {
    color: rgba(255, 255, 255, 0.85);
}

/* Narrow viewports: tabs become an inline row above the panels (no floating). */
@media (max-width: 1579px) {
    .tabs.sidebar,
    .tabs.sidebar.is-floating {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 28px;
        width: auto;
        max-width: 100%;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
    }
    .tabs.sidebar .tab {
        flex: 1 1 calc(50% - 6px);
        min-width: 200px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* BibTeX */
.bibtex {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 22px 26px;
    border-radius: 10px;
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.65;
    overflow-x: auto;
    margin: 18px 0 0;
    position: relative;
}

.bibtex pre {
    margin: 0;
    white-space: pre;
}

.copy-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Footer */
footer {
    padding: 36px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
}

footer a {
    color: var(--text-soft);
}

/* Responsive */
@media (max-width: 720px) {
    .hero {
        padding: 52px 18px 40px;
    }
    .hero h1 {
        font-size: 1.9rem;
    }
    .hero .subtitle {
        font-size: 1rem;
    }
    section {
        padding: 48px 18px;
    }
    h2.section-title {
        font-size: 1.55rem;
    }
    .abstract {
        font-size: 1rem;
    }
    .affil-logos img {
        height: 30px;
    }
}