:root {
    color-scheme: dark;
    --background: #090a0d;
    --surface: #101218;
    --text: #c2c5cf;
    --bright: #f0eee9;
    --muted: #9298a7;
    --line: #292d37;
    --accent: #c0a1fa;
    --cyan: #9fdde6;
    --serif: "Instrument Serif", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 {
    color: var(--bright);
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
}
h1, h2 { font-family: var(--serif); }
h1 { font-size: clamp(3.15rem, 6.2vw, 5.5rem); }
h2 { font-size: clamp(2.3rem, 4vw, 3.4rem); }
h3 { font-size: 1.125rem; }
p { text-wrap: pretty; }
a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}
a:hover { color: var(--accent); }
a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 6px;
    border-radius: 2px;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
::selection { background: #493769; color: #fff; }
.container { width: min(1080px, calc(100% - 4rem)); margin-inline: auto; }
.skip-link {
    position: absolute;
    z-index: 10;
    top: 1rem;
    left: 1rem;
    padding: 0.65rem 1rem;
    background: var(--bright);
    color: var(--background);
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--bright);
    font-family: var(--serif);
    font-size: 1.65rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.brand img { width: 40px; }
.brand span span { color: var(--accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.site-nav a {
    display: inline-block;
    padding-block: 0.6rem;
    color: var(--muted);
    font-size: 0.875rem;
    text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--bright); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -1px var(--accent); }
.eyebrow, .section-label {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.6;
    text-transform: uppercase;
}
.hero { padding-block: 5.5rem 4rem; }
.hero h1 { max-width: 16ch; margin-block: 1.6rem 2rem; }
.hero h1 em { color: var(--accent); font-weight: 400; }
.hero .intro { max-width: 700px; font-size: 1.2rem; }
.hero .method { margin-top: 1.1rem; color: var(--muted); }
.research-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 2.5rem;
    margin: 2.5rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
    list-style: none;
}
.lab-feature { padding-block: 2rem 5.5rem; }
.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
}
.section-heading .section-label { font-family: var(--sans); }
.text-link { color: var(--bright); font-size: 0.875rem; }
.arrow { margin-left: 0.5rem; color: var(--accent); }
.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
    gap: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}
.entry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem 1.2rem;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.6;
}
.status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid #35434a;
    border-radius: 3px;
    color: var(--cyan);
    font-size: 0.7rem;
    white-space: nowrap;
}
.feature-copy h3 {
    margin-block: 1.2rem;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 4vw, 3.3rem);
}
.title-link { text-decoration: none; }
.feature-copy p { font-size: 0.9375rem; }
.feature-copy strong { color: var(--bright); font-weight: 500; }
.caveat {
    margin-top: 1.25rem;
    padding-left: 1rem;
    border-left: 2px solid var(--accent);
    color: var(--muted);
    font-size: 0.8125rem;
}
.feature-copy .text-link { display: inline-block; margin-top: 1.5rem; }
.feature-art { margin-top: 0.35rem; }
.feature-art img, .architecture-figure img { width: 100%; border: 1px solid var(--line); }
figcaption {
    margin-top: 0.8rem;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.65;
}
.page-intro { padding-block: 4.5rem 3rem; }
.page-intro h1 { margin-block: 1.2rem 1.4rem; }
.page-intro > p:last-child { max-width: 620px; }
.note-list { margin: 0 0 6rem; padding: 0; list-style: none; }
.note-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2rem;
    padding-block: 2.25rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.note-date { color: var(--muted); font-size: 0.8125rem; }
.note-number { display: block; margin-top: 0.5rem; color: var(--accent); }
.note-summary h2 { margin-block: 1rem; font-size: 2.6rem; }
.note-summary > p { max-width: 700px; }
.note-summary .text-link { display: inline-block; margin-top: 1.4rem; }
.article-header { padding-block: 3rem 2.5rem; }
.back-link { color: var(--muted); font-size: 0.8125rem; }
.article-header .entry-meta { margin-top: 2.5rem; }
.article-header h1 { margin-block: 1.25rem; }
.article-subtitle { max-width: 700px; font-size: 1.2rem; }
.article-header .caveat { max-width: 700px; margin-top: 1.6rem; }
.measurements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-block: 0.5rem 1rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.measurements > div { display: flex; flex-direction: column; gap: 0.5rem; padding-inline: 2rem; border-left: 1px solid var(--line); }
.measurements > div:first-child { padding-left: 0; border-left: 0; }
.measurements dt { order: 1; color: var(--muted); font-size: 0.75rem; }
.measurements dd { color: var(--bright); font-family: var(--serif); font-size: clamp(2.25rem, 4.5vw, 3.6rem); line-height: 1; }
.measurements dd small { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
.measurements > div:last-child dd { color: var(--accent); }
.measurement-note { color: var(--muted); font-size: 0.75rem; }
.article-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 3rem;
    padding-block: 3.5rem 5rem;
}
.article-toc { align-self: start; position: sticky; top: 2rem; }
.article-toc p { margin-bottom: 0.8rem; }
.article-toc ol { margin: 0; padding: 0; list-style: none; }
.article-toc a { display: block; padding-block: 0.35rem; color: var(--muted); font-size: 0.75rem; text-decoration: none; }
.article-toc a:hover { color: var(--bright); }
.article-body { min-width: 0; }
.article-body section + section { margin-top: 3.25rem; }
.article-body h2 { margin-bottom: 1.1rem; font-size: 2.25rem; }
.article-body p + p, .article-body p + ol, .article-body p + ul { margin-top: 1rem; }
.article-body ol, .article-body ul { margin-bottom: 0; padding-left: 1.4rem; }
.article-body li { padding-left: 0.3rem; }
.article-body li + li { margin-top: 0.65rem; }
.article-body li::marker { color: var(--accent); }
.thesis { margin-block: 1.5rem; padding-left: 1.4rem; border-left: 2px solid var(--accent); color: var(--bright); font-family: var(--serif); font-size: 1.75rem; line-height: 1.35; }
.architecture-figure { margin-top: 1.75rem; }
.architecture-figure figcaption p + p { margin-top: 0.6rem; }
.limitations { padding: 1.7rem; border: 1px solid var(--line); background: var(--surface); }
.article-end { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.site-footer { padding-block: 2.5rem 2rem; border-top: 1px solid var(--line); }
.footer-main { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.footer-main h2 { margin-bottom: 0.5rem; font-family: var(--sans); color: var(--muted); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.contact-link { color: var(--bright); font-size: 1.05rem; }
.nvidia-badge { width: 120px; flex-shrink: 0; }
.footer-notes { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; color: var(--muted); font-size: 0.7rem; }
@media (max-width: 850px) {
    .feature-grid { grid-template-columns: 1fr; gap: 2rem; }
    .feature-copy { max-width: 650px; }
    .feature-art { max-width: 750px; }
    .article-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .article-toc { position: static; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
    .article-toc ol { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
    .article-toc a { padding-block: 0.5rem; }
}
@media (max-width: 600px) {
    body { font-size: 1rem; }
    .container { width: calc(100% - 2.5rem); }
    .site-header { gap: 1rem; padding-block: 1rem; }
    .brand { font-size: 1.4rem; gap: 0.5rem; }
    .brand img { width: 30px; }
    .site-nav { gap: 1rem; }
    .site-nav a { font-size: 0.75rem; }
    .hero { padding-block: 3.5rem 2.5rem; }
    .hero h1 { margin-block: 1.25rem 1.5rem; }
    .hero .intro, .article-subtitle { font-size: 1.0625rem; }
    .research-topics { gap: 0.5rem 1.5rem; margin-top: 2rem; }
    .lab-feature { padding-block: 1.5rem 3.5rem; }
    .section-heading { align-items: center; }
    .feature-grid { padding-top: 1.5rem; }
    .page-intro { padding-block: 3rem 2.25rem; }
    .note-row { grid-template-columns: 1fr; gap: 1rem; }
    .note-number { display: inline; margin-left: 1rem; }
    .note-list { margin-bottom: 3.5rem; }
    .article-header { padding-top: 2rem; }
    .article-header .entry-meta { margin-top: 2rem; }
    .measurements { grid-template-columns: 1fr; padding-block: 0; }
    .measurements > div, .measurements > div:first-child { padding: 1.1rem 0; border-left: 0; }
    .measurements > div + div { border-top: 1px solid var(--line); }
    .measurements dd { font-size: 2.6rem; }
    .article-layout { padding-block: 2.5rem 3.5rem; }
    .article-body section + section { margin-top: 2.5rem; }
    .limitations { padding: 1.25rem; }
    .footer-main { align-items: flex-start; gap: 1.25rem; }
    .nvidia-badge { width: 100px; margin-top: 0.3rem; }
    .footer-notes { flex-direction: column; gap: 0.35rem; }
}
@media (max-width: 380px) {
    .site-header { flex-wrap: wrap; }
    .site-nav { width: 100%; justify-content: space-between; }
    .footer-main { flex-direction: column; }
}