:root {
--color-bg: #FAFAFA;
--color-surface: #FFFFFF;
--color-surface-2: #F5F5F5;
--color-surface-offset: #EEEEEE;
--color-border: rgba(23,23,23,0.10);
--color-text: #171717;
--color-text-muted: #6B6B6B;
--color-text-faint: #ADADAD;
--color-accent-blue: #0055FF;
--color-accent-orange: #E04B26;
--color-primary: #01696f;
--shadow-sm: 0 1px 2px rgba(23,23,23,0.05);
--shadow-md: 0 4px 12px rgba(23,23,23,0.07);
--shadow-lg: 0 12px 32px rgba(23,23,23,0.10);
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--content-width: min(72rem, calc(100vw - 2rem));
--font-body: 'IBM Plex Sans', Arial, sans-serif;
--font-mono: 'Ubuntu Mono', monospace;
--transition: 200ms cubic-bezier(0.16,1,0.3,1);
}

[data-theme="dark"] {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-surface-2: #1a1a1a;
--color-surface-offset: #242424;
--color-border: rgba(255,255,255,0.10);
--color-text: #f0f0f0;
--color-text-muted: #a0a0a0;
--color-text-faint: #666666;
--color-accent-blue: #4d94ff;
--color-accent-orange: #ff7a59;
--color-primary: #4db6ac;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
--shadow-md: 0 4px 12px rgba(0,0,0,0.40);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.50);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
font-family: var(--font-body);
font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
line-height: 1.65;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

.skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
padding: 0.6rem 1.2rem;
background: var(--color-text);
color: var(--color-bg);
border-radius: var(--radius-md);
font-weight: 600;
text-decoration: none;
transition: top var(--transition);
}
.skip-link:focus {
top: 0.5rem;
outline: 2px solid var(--color-accent-blue);
outline-offset: 2px;
}

.topbar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}

.theme-toggle {
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.1rem;
transition: background var(--transition), border-color var(--transition);
}
.theme-toggle:hover {
background: var(--color-surface-offset);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
}

a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 0.15em;
text-decoration-color: var(--color-border);
transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover {
color: var(--color-text);
text-decoration-color: var(--color-text);
}

a.artifact-link {
color: var(--color-accent-blue);
text-decoration-color: var(--color-accent-blue);
font-weight: 500;
}
a.artifact-link:hover {
color: color-mix(in srgb, var(--color-accent-blue) 80%, black);
}

a.sponsor-link {
color: var(--color-accent-orange);
text-decoration-color: var(--color-accent-orange);
font-weight: 600;
}
a.sponsor-link:hover {
color: color-mix(in srgb, var(--color-accent-orange) 80%, black);
}

img, svg, video, iframe, embed { display: block; max-width: 100%; }
table { width: 100%; border-collapse: collapse; }
pre, code, textarea { font-family: var(--font-mono); }
pre { overflow-x: auto; }

/* MathJax display-mode centering */
mjx-container[display="true"] {
display: block;
overflow-x: auto;
margin: 1.25rem auto;
text-align: center;
}

.blog-prose pre mjx-container,
.blog-prose code mjx-container { color: inherit; }

.site-shell {
width: min(100%, 84rem);
margin: 0 auto;
padding-inline: clamp(0.9rem, 3vw, 2rem);
padding-top: 0.8rem;
padding-bottom: 2rem;
}

textarea, pre, code {
width: 100%;
font-family: 'Ubuntu Mono', monospace;
color: var(--color-text);
background: var(--color-surface-offset);
}
textarea { height: 6em; }
textarea, pre { width: 100%; }

.main-content {
padding-left: 2.5em;
padding-right: 2.5em;
}

.site-nav {
font-family: var(--font-body);
position: relative;
}

.nav-toggle-btn {
display: none;
flex-direction: column;
gap: 5px;
padding: 10px 0;
cursor: pointer;
user-select: none;
min-height: 44px;
justify-content: center;
background: none;
border: none;
font-family: inherit;
}

.nav-toggle-btn span {
display: block;
width: 24px;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle-btn[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle-btn[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-toggle-btn[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

.nav-list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}

.nav-item a,
.nav-dropdown-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.45rem 0.8rem;
border-radius: var(--radius-md);
font-size: 0.92rem;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
border: none;
background: none;
cursor: pointer;
font-family: inherit;
transition: background var(--transition), color var(--transition);
white-space: nowrap;
}

.nav-item a:hover,
.nav-item a:focus-visible,
.nav-dropdown-btn:hover,
.nav-dropdown-btn:focus-visible {
background: var(--color-surface-2);
color: var(--color-text);
text-decoration: none;
outline: none;
}

.nav-item.active > a,
.nav-item.active > .nav-dropdown-btn {
color: var(--color-text);
font-weight: 600;
}

.nav-item.active > a:hover,
.nav-item.active > .nav-dropdown-btn:hover {
background: var(--color-surface-2);
color: var(--color-text);
}

.nav-arrow {
transition: transform var(--transition);
}

.nav-has-children.active .nav-arrow {
transform: rotate(180deg);
}

.nav-has-children {
position: relative;
}

.nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
min-width: 180px;
padding: 0.5rem 0;
margin-top: 0.25rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
list-style: none;
}

.nav-dropdown li a {
display: block;
padding: 0.5rem 1rem;
border-radius: 0;
color: var(--color-text-muted);
font-weight: 400;
white-space: nowrap;
}

.nav-dropdown li a:hover,
.nav-dropdown li a:focus-visible {
background: var(--color-surface-2);
color: var(--color-text);
}

.nav-dropdown li.active a {
background: var(--color-surface-2);
color: var(--color-text);
font-weight: 500;
}

.nav-has-children:hover .nav-dropdown,
.nav-has-children:focus-within .nav-dropdown,
.nav-has-children .nav-dropdown:hover {
display: block;
}

.nav-dropdown-btn {
-webkit-appearance: none;
appearance: none;
}

.topbar-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: var(--space-5);
}

.github-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
flex-shrink: 0;
}

footer, .head-on {
margin-top: 2em;
padding: 1.25em 1em 0.75em 1em;
background: var(--color-surface);
border: 1px solid var(--color-border);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 10px;
text-align: center;
color: var(--color-text);
font-size: 1em;
}
footer a, .head-on a {
color: var(--color-accent-orange);
font-weight: 600;
text-decoration: underline;
}
.head-on a.artifact-link {
color: var(--color-accent-blue);
}
footer ul, .head-on ul {
padding-left: 0;
list-style: none;
margin-bottom: 1em;
}

.breadcrumbs {
margin-bottom: var(--space-4);
}

.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}

.breadcrumbs li {
display: flex;
align-items: center;
gap: 0.4rem;
}

.breadcrumbs li + li::before {
content: '/';
color: var(--color-text-faint);
}

.breadcrumbs a {
color: var(--color-text-muted);
text-decoration: underline;
text-underline-offset: 0.12em;
text-decoration-color: transparent;
}

.breadcrumbs a:hover {
color: var(--color-text);
text-decoration-color: var(--color-text);
}

.breadcrumbs [aria-current="page"] {
color: var(--color-text);
font-weight: 500;
}

.head-on,
footer,
.intermission {
margin-top: var(--space-6);
padding: 1.1rem 1rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}

.main-content > * {
min-width: 0;
max-width: 100%;
}

.main-content p,
.main-content li {
max-width: 72ch;
}

.image-box {
margin: 2rem auto;
width: min(100%, 1100px);
}

.image-box img {
display: block;
width: 110%;
height: auto;
max-width: 1100px;
height: auto;
margin: 0 auto;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}

.image-caption {
margin-top: 0.75rem;
font-size: 0.95rem;
color: var(--color-text-muted);
text-align: center;
}

.figure-compare {
margin: 2rem 0;
}

.fig-compare-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}

.fig-compare-table .image-col {
width: 50%;
text-align: center;
padding: 0.75rem;
}

.fig-compare-table img {
width: 100%;
max-width: 560px;
height: auto;
margin: 0 auto;
display: block;
}

@media (max-width: 900px) {
.fig-compare-table,
.fig-compare-table tbody,
.fig-compare-table tr,
.fig-compare-table td {
display: block;
width: 100%;
}

.fig-compare-table .image-col {
width: 100%;
}

.fig-compare-table img {
max-width: 100%;
}
}

.table-container {
width: 100%;
overflow-x: auto;
margin: 1.5rem 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}

.table-container table { min-width: 640px; }
th, td { padding: 0.95rem 1rem; text-align: left; }
th { background: var(--color-text); color: var(--color-bg); font-size: 0.9rem; font-weight: 500; }
td { border-bottom: 1px solid var(--color-border); color: var(--color-text); }
tr:last-child td { border-bottom: none; }

pre.highlight,
.code-block {
background: var(--color-text);
color: var(--color-bg);
border-radius: var(--radius-lg);
padding: 1rem;
overflow-x: auto;
}

.paper-embed,
embed[type='application/pdf'] {
width: 100%;
min-height: min(70vh, 38rem);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}


.triad-card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}

.triad-card__title {
margin: 0 0 0.5rem;
font-size: 1.15rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
}

.triad-card__abstract {
margin: 0;
font-size: 0.92rem;
line-height: 1.6;
color: var(--color-text-muted);
max-width: 72ch;
}

.triad-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border);
}

.triad-card__btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.85rem;
border-radius: var(--radius-md);
font-size: 0.88rem;
font-weight: 500;
text-decoration: none;
background: color-mix(in srgb, var(--color-accent-blue) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent-blue) 20%, transparent);
transition: background var(--transition), border-color var(--transition);
}
.triad-card__btn:hover {
background: color-mix(in srgb, var(--color-accent-blue) 12%, transparent);
border-color: var(--color-accent-blue);
}

.triad-card__btn-icon {
font-size: 1.1em;
line-height: 1;
}

.triad-card__btn-label {
white-space: nowrap;
}

.triad-card__btn-sub {
display: none;
font-size: 0.78rem;
color: var(--color-text-faint);
font-weight: 400;
}

@media (min-width: 480px) {
.triad-card__btn-sub {
display: inline;
}
.triad-card__btn-sub::before {
content: " (";
}
.triad-card__btn-sub::after {
content: ")";
}
}

footer ul,
.head-on ul {
padding-left: 1.25rem;
margin: 0.75rem auto 0;
max-width: 42rem;
}

@media (max-width: 768px) {
.site-shell { padding-inline: 0.85rem; }
.topbar-row { align-items: stretch; flex-wrap: wrap; }
.head-on,
footer,
.intermission { padding: 1rem 0.9rem; }
th, td { padding: 0.8rem 0.75rem; }
pre.highlight,
.code-block { font-size: 0.88rem; }
}

@media (max-width: 640px) {
.nav-toggle-btn {
display: flex;
}

.nav-list {
display: none;
flex-direction: column;
width: 100%;
padding: 0.5rem 0;
gap: 0;
}

.nav-list.nav-open {
display: flex;
}

.nav-item {
width: 100%;
}

.nav-item a,
.nav-dropdown-btn {
width: 100%;
padding: 0.65rem 1rem;
min-height: 44px;
border-radius: var(--radius-md);
justify-content: flex-start;
}

.nav-dropdown {
position: static;
box-shadow: none;
border: none;
padding-left: 1rem;
margin-top: 0;
min-width: auto;
}

.nav-dropdown li a {
min-height: 44px;
padding: 0.6rem 1rem;
}
}

@media (max-width: 560px) {
.topbar-row { flex-direction: column; align-items: stretch; }
.github-link { align-self: flex-end; }
.head-on,
footer,
.intermission { border-radius: var(--radius-lg); }
.paper-embed,
embed[type='application/pdf'] { min-height: 55vh; }
}