/* ── Tokens ─────────────────────────────────────────────────────────── */ /* The site is light by default regardless of the visitor's OS setting; dark is opt-in through the header toggle, which stamps data-theme="dark" on and remembers the choice in localStorage. */ :root { --bg: #fdfdfb; --surface: #f4f3ef; --fg: #1b1c1e; --fg-soft: #43464b; --muted: #74787f; --rule: #e2e0da; --accent: #1c5d99; --accent-bg: #e8f0f8; --badge-fg: #45484d; --badge-bg: #eceae4; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --measure: 42rem; color-scheme: light; } :root[data-theme="dark"] { --bg: #15171a; --surface: #1e2126; --fg: #e8e6e1; --fg-soft: #c2c0bb; --muted: #8d9299; --rule: #2c3037; --accent: #7ab8f5; --accent-bg: #1c2b3a; --badge-fg: #b9bec6; --badge-bg: #262a31; color-scheme: dark; } /* ── Base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16.5px; line-height: 1.68; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 10; padding: .5rem .9rem; background: var(--accent); color: #fff; border-radius: 6px; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); transition: background-color .15s ease, border-color .15s ease; } a:hover { background: var(--accent-bg); border-bottom-color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } strong { font-weight: 650; } /* ── Header ─────────────────────────────────────────────────────────── */ .site-header { max-width: var(--measure); margin: 0 auto; padding: 2.2rem 1.5rem 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .brand { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); border-bottom: none; } .brand:hover { background: none; color: var(--accent); } .site-nav { display: flex; align-items: center; gap: 1.15rem; font-size: .93rem; } .site-nav a { color: var(--fg-soft); border-bottom: 1px solid transparent; padding-bottom: 1px; } .site-nav a:hover { color: var(--accent); background: none; border-bottom-color: var(--accent); } .site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--rule); } #theme-toggle { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s ease, border-color .15s ease; } #theme-toggle:hover { color: var(--accent); border-color: var(--accent); } #theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .i-moon { display: none; } :root[data-theme="dark"] .i-sun { display: none; } :root[data-theme="dark"] .i-moon { display: block; } /* ── Layout ─────────────────────────────────────────────────────────── */ main { max-width: var(--measure); margin: 0 auto; padding: 2.4rem 1.5rem 1rem; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; color: var(--fg); } .page-title { font-size: 1.85rem; margin: 0 0 .35rem; } .page-subtitle { color: var(--muted); margin: 0 0 2rem; font-size: .97rem; } /* Section headings with a hairline rule */ h2.section { font-size: 1.12rem; margin: 3rem 0 1.1rem; padding-bottom: .45rem; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } h2.section .more { font-family: var(--sans); font-size: .82rem; font-weight: 400; letter-spacing: 0; } p { margin: 0 0 1.05rem; } main > article > p:last-child { margin-bottom: 0; } /* ── Intro / hero ───────────────────────────────────────────────────── */ .intro { display: grid; grid-template-columns: 132px 1fr; gap: 1.75rem; align-items: start; margin-bottom: 2.1rem; } .intro img { width: 132px; height: 132px; object-fit: cover; border-radius: 10px; display: block; filter: saturate(.96); } .intro h1 { font-size: 1.75rem; margin: -.28rem 0 .3rem; } .intro .role { color: var(--fg-soft); font-size: .96rem; line-height: 1.5; margin: 0 0 .55rem; } .intro .role span { display: block; } .intro .role .inst { color: var(--muted); } .intro .contact { font-size: .88rem; color: var(--muted); font-family: var(--mono); margin: 0; } @media (max-width: 560px) { .intro { grid-template-columns: 1fr; gap: 1.1rem; } .intro img { width: 108px; height: 108px; } .intro h1 { margin-top: 0; } } /* ── News ───────────────────────────────────────────────────────────── */ .news { margin: 0; max-height: 15.5rem; overflow-y: auto; padding-right: .4rem; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); } .news dl { margin: 0; display: grid; grid-template-columns: 5.4rem 1fr; gap: .1rem .9rem; } .news dt { font-size: .82rem; font-family: var(--mono); color: var(--muted); padding-top: .2rem; white-space: nowrap; } .news dd { margin: 0 0 .75rem; font-size: .95rem; color: var(--fg-soft); } @media (max-width: 560px) { .news dl { grid-template-columns: 1fr; } .news dt { padding-top: .5rem; } .news dd { margin-bottom: .35rem; } } /* ── Publications ───────────────────────────────────────────────────── */ .pubs { list-style: none; margin: 0; padding: 0; } .pub { padding: 0 0 1.35rem; margin-bottom: 1.35rem; border-bottom: 1px solid var(--rule); } .pub:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .pub .venue { display: inline-block; font-size: .73rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; color: var(--badge-fg); background: var(--badge-bg); border-radius: 4px; padding: .16rem .45rem; margin-bottom: .5rem; } .pub .title { display: block; font-family: var(--serif); font-size: 1.06rem; font-weight: 600; line-height: 1.36; color: var(--fg); border-bottom: none; margin-bottom: .28rem; } .pub .title:hover { color: var(--accent); background: none; } .pub .authors { font-size: .93rem; color: var(--fg-soft); margin: 0 0 .18rem; } .pub .authors strong { color: var(--fg); font-weight: 650; } .pub .note { font-size: .82rem; color: var(--muted); margin: 0 0 .45rem; font-style: italic; } .pub .actions { font-size: .85rem; display: flex; gap: .85rem; flex-wrap: wrap; } /* ── Lists ──────────────────────────────────────────────────────────── */ .stack { list-style: none; margin: 0; padding: 0; } .stack > li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .2rem 1.1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: .95rem; } .stack > li:last-child { border-bottom: none; } .stack .when { color: var(--muted); font-family: var(--mono); font-size: .82rem; padding-top: .18rem; } .stack .what strong { display: block; font-weight: 600; } .stack .what span { color: var(--muted); font-size: .89rem; } @media (max-width: 560px) { .stack > li { grid-template-columns: 1fr; } } ul.plain { padding-left: 1.15rem; margin: 0 0 1.05rem; } ul.plain li { margin-bottom: .35rem; } /* ── CV embed ───────────────────────────────────────────────────────── */ .pdf-frame { display: block; width: 100%; height: 78vh; min-height: 480px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); } /* Shown only if the browser cannot render the PDF inline. */ .pdf-frame p { margin: 0; padding: 1.5rem; color: var(--muted); } /* Shown only on narrow screens, where the embed is hidden. */ .pdf-note { display: none; color: var(--muted); } @media (max-width: 700px) { .pdf-frame { display: none; } .pdf-note { display: block; } } /* ── Footer ─────────────────────────────────────────────────────────── */ .site-footer { max-width: var(--measure); margin: 3.5rem auto 0; padding: 1.4rem 1.5rem 3rem; border-top: 1px solid var(--rule); } .foot-links { display: flex; gap: 1.15rem; flex-wrap: wrap; font-size: .9rem; margin-bottom: .7rem; } .foot-links a { color: var(--fg-soft); border-bottom-color: transparent; } .foot-links a:hover { color: var(--accent); background: none; border-bottom-color: var(--accent); } .colophon { color: var(--muted); font-size: .82rem; margin: 0; } /* ── 404 ────────────────────────────────────────────────────────────── */ .notfound { text-align: center; padding: 4rem 0 2rem; } .notfound h1 { font-size: 3.6rem; margin: 0 0 .4rem; letter-spacing: -.03em; } .notfound p { color: var(--muted); } /* ══ Paper pages ═══════════════════════════════════════════════════════ */ .paper-head { margin-bottom: 2.4rem; } .paper-eyebrow { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; } .paper-eyebrow a { color: var(--muted); border-bottom-color: transparent; } .paper-eyebrow a:hover { color: var(--accent); background: none; } .paper-eyebrow .venue { font-weight: 600; letter-spacing: .045em; text-transform: uppercase; font-size: .73rem; color: var(--badge-fg); background: var(--badge-bg); border-radius: 4px; padding: .16rem .45rem; } .paper-title { font-size: 2.05rem; line-height: 1.18; margin: 0 0 1rem; text-wrap: balance; } .paper-authors { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.7; } .paper-authors a { border-bottom-color: transparent; } .paper-authors a:hover { border-bottom-color: var(--accent); background: none; } .paper-authors .is-me { font-weight: 650; color: var(--fg); } .paper-authors sup { font-size: .68em; color: var(--muted); padding-left: 1px; } .paper-authors .sep { color: var(--muted); } .paper-affils { margin: 0 0 1.5rem; font-size: .88rem; color: var(--muted); } .paper-affils a { color: var(--muted); border-bottom-color: transparent; } .paper-affils a:hover { color: var(--accent); background: none; } .paper-affils .corr { display: block; margin-top: .3rem; font-size: .82rem; } .paper-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; } .btn { display: inline-block; font-size: .87rem; padding: .34rem .8rem; border: 1px solid var(--rule); border-radius: 6px; color: var(--fg-soft); background: var(--surface); transition: border-color .15s, color .15s, background-color .15s; } .btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); } /* ── TL;DR ──────────────────────────────────────────────────────────── */ .tldr { border-left: 2px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; padding: 1.15rem 1.35rem; margin: 0 0 2.6rem; } .tldr h2 { font-family: var(--sans); font-size: .72rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; } .tldr p { margin: 0; font-size: 1.02rem; line-height: 1.62; } /* ── Body rhythm ────────────────────────────────────────────────────── */ .paper h2.section { margin-top: 3.4rem; } .paper h3 { font-size: 1.04rem; margin: 2.1rem 0 .6rem; } .paper p { line-height: 1.72; } .paper ul, .paper ol { line-height: 1.7; padding-left: 1.25rem; } .paper li { margin-bottom: .45rem; } /* ── Figures ────────────────────────────────────────────────────────── */ .paper figure { margin: 2rem 0; } .paper figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; background: #fff; } .paper figcaption { font-size: .86rem; color: var(--muted); line-height: 1.6; margin-top: .65rem; } .paper figcaption b, .paper figcaption strong { color: var(--fg-soft); font-weight: 600; } .fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .fig-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; } .fig-pair img, .fig-trio img { border-radius: 6px; } @media (max-width: 640px) { .fig-pair, .fig-trio { grid-template-columns: 1fr; } } /* Figures may break out slightly wider than the text column. */ .bleed { margin-left: -3rem; margin-right: -3rem; } @media (max-width: 900px) { .bleed { margin-left: 0; margin-right: 0; } } /* ── Tables ─────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; margin: 1.8rem 0; } .paper table { border-collapse: collapse; width: 100%; font-size: .88rem; font-variant-numeric: tabular-nums; } .paper th, .paper td { padding: .46rem .7rem; text-align: right; } .paper th:first-child, .paper td:first-child { text-align: left; } .paper thead th { border-bottom: 1px solid var(--fg-soft); font-weight: 600; font-size: .8rem; letter-spacing: .02em; color: var(--fg-soft); white-space: nowrap; } .paper tbody tr { border-bottom: 1px solid var(--rule); } .paper tbody tr:last-child { border-bottom: none; } .paper td.ours { background: var(--accent-bg); font-weight: 650; color: var(--fg); } .paper th.ours { color: var(--accent); } .paper .rowlab { color: var(--muted); font-size: .84rem; } .paper caption { caption-side: bottom; text-align: left; font-size: .86rem; color: var(--muted); line-height: 1.6; padding-top: .7rem; } .delta { font-size: .8rem; color: var(--muted); font-weight: 400; } .delta.up { color: #1a7f4b; } :root[data-theme="dark"] .delta.up { color: #58c98b; } /* ── Heatmap (model x dataset) ──────────────────────────────────────── */ .heat td { text-align: center; padding: .3rem .35rem; font-size: .78rem; position: relative; } .heat td.cell { color: var(--fg); border-radius: 3px; } .heat th { font-size: .72rem; padding: .3rem .35rem; } .heat th.rot { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 600; } .heat td:first-child, .heat th:first-child { text-align: left; white-space: nowrap; font-size: .8rem; } /* ── Key-number callouts ────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: 2rem 0; } .stats div { background: var(--bg); padding: 1rem 1.1rem; } .stats .n { display: block; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; } .stats .l { display: block; font-size: .8rem; color: var(--muted); margin-top: .3rem; line-height: 1.45; } /* ── Algorithm block ────────────────────────────────────────────────── */ .algo { border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.3rem; margin: 1.8rem 0; background: var(--surface); font-size: .92rem; } .algo .algo-title { font-size: .72rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; } .algo ol { margin: 0; padding-left: 1.3rem; } .algo li { margin-bottom: .5rem; line-height: 1.6; } .algo .cmt { color: var(--muted); font-size: .85em; } /* ── BibTeX ─────────────────────────────────────────────────────────── */ .bibtex { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.1rem; overflow-x: auto; font-family: var(--mono); font-size: .82rem; line-height: 1.55; color: var(--fg-soft); } .bibtex code { font-family: inherit; } .paper-foot { margin-top: 3.5rem; font-size: .9rem; } /* ── KaTeX sizing ───────────────────────────────────────────────────── */ .katex { font-size: 1.02em; } .katex-display { overflow-x: auto; overflow-y: hidden; padding: .35rem 0; margin: 1.4rem 0; } /* Standalone figures are capped by height, not width: these are small matplotlib plots, and at full column width (784px) they render ~580px tall and swamp the viewport. Capping height keeps every plot the same visual weight while each keeps its own aspect ratio. Grouped figures (.fig-pair/.fig-trio/.fig-row) are already constrained by their columns. */ .paper figure:not(.fig-pair):not(.fig-trio) > img { width: auto; max-width: 100%; max-height: 280px; margin-left: auto; margin-right: auto; } /* The paper title already links to the project page; this chip repeats it as a visible affordance so the page isn't missed among the plain arXiv/code links. */ .pub .actions .page-link { font-weight: 600; padding: .1rem .55rem; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 5px; background: var(--accent-bg); color: var(--accent); } .pub .actions .page-link:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); } /* ══ Paper page refinements ════════════════════════════════════════════ */ /* Reading measure: 784px ran to ~95 characters per line, which is tiring. Paper pages run wider than the rest of the site (46rem vs 42rem) to give equations and multi-panel figures room, while staying inside a readable measure. Figures bleed a further 64px each side. */ body:has(.paper) .site-header, body:has(.paper) main, body:has(.paper) .site-footer { max-width: 46rem; } /* Rule under the site header, separating nav from page content. */ .site-header { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); } /* ── Breadcrumb + paper header ──────────────────────────────────────── */ .paper-eyebrow .sep { color: var(--muted); opacity: .6; } .paper-eyebrow .here { color: var(--fg-soft); font-weight: 600; } .paper-head { padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2.2rem; } /* Venue now lives with the links rather than in the breadcrumb. */ .venue-badge { display: inline-block; font-size: .8rem; font-weight: 650; letter-spacing: .03em; padding: .34rem .7rem; border-radius: 6px; color: #fff; background: var(--accent); border: 1px solid var(--accent); } :root[data-theme="dark"] .venue-badge { color: #10151b; } /* ── Figures bleed past the text column ─────────────────────────────── */ .paper figure { margin-left: -64px; margin-right: -64px; } @media (max-width: 860px) { .paper figure { margin-left: 0; margin-right: 0; } } /* Captions span every column instead of sitting under the first image. */ .fig-pair figcaption, .fig-trio figcaption { grid-column: 1 / -1; } /* A display equation wider than the column scrolls inside its own box instead of widening the whole page (KaTeX does not do this on its own). */ .paper .katex-display { overflow-x: auto; overflow-y: hidden; padding-top: .2rem; padding-bottom: .2rem; } /* Captions run at 80% of the text measure and are centred under the figure, which keeps them well inside the bleed and gives them a tighter, more readable line length than the body text. --paper-measure is declared on .paper (an ancestor of figcaption) so it actually resolves; keep it equal to the main max-width minus its padding. */ .paper { --paper-measure: 43rem; } /* 46rem container - 2 x 1.5rem padding */ .paper figure figcaption { max-width: calc(var(--paper-measure) * 0.8); margin-left: auto; margin-right: auto; } /* Two-panel router-performance figures sit narrower than the full bleed. Selector must out-specify `.paper figure` (0,1,1) or the -64px bleed wins and the figure is pushed left, overhanging the text column. */ .paper figure.fig-pair { max-width: 620px; margin-left: auto; margin-right: auto; } /* ── Section headings ───────────────────────────────────────────────── */ h2.section { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 28%, transparent); } .paper h3 { color: var(--fg); padding-left: .6rem; border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); } /* ── Display equations get a quiet box ──────────────────────────────── */ .paper .katex-display { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 6px; padding: .9rem 1rem; margin: 1.6rem 0; } /* Inline emphasis in body prose picks up the accent. */ .paper > p strong, .paper li > strong { color: var(--accent); } /* ── Citation block with copy button ────────────────────────────────── */ .bibtex-wrap { position: relative; } .copy-btn { position: absolute; top: .55rem; right: .55rem; font: inherit; font-size: .76rem; font-weight: 600; padding: .2rem .6rem; border-radius: 5px; border: 1px solid var(--rule); background: var(--bg); color: var(--fg-soft); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; } .copy-btn:hover { color: var(--accent); border-color: var(--accent); } .copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .copy-btn.ok { color: #fff; background: var(--accent); border-color: var(--accent); } :root[data-theme="dark"] .copy-btn.ok { color: #10151b; } .bibtex { padding-right: 4.5rem; } /* ══ Homepage density ══════════════════════════════════════════════════ Tightens the vertical rhythm: less air around section rules, between news items, inside publication entries, and in the awards list. */ /* Section rules sit closer to the content on both sides. */ h2.section { margin: 2.1rem 0 .8rem; padding-bottom: .35rem; } .paper h2.section { margin-top: 2.5rem; } /* News: tighter rows. */ .news { max-height: 13.5rem; } .news dl { gap: 0 .9rem; } .news dd { margin-bottom: .38rem; } .news dt { padding-top: .1rem; } /* Publications: less padding per entry, on both the homepage and /publications. */ .pub { padding-bottom: .85rem; margin-bottom: .85rem; } .pub .venue { margin-bottom: .3rem; } .pub .title { margin-bottom: .18rem; } .pub .authors { margin-bottom: .1rem; } .pub .note { margin-bottom: .28rem; } .pub .actions { margin-top: .3rem; } /* Experience / awards rows. */ .stack > li { padding: .4rem 0; } .stack.compact > li { padding: .3rem 0; font-size: .92rem; } .stack.compact .what strong { display: inline; } .stack.compact .what span { display: block; font-size: .85rem; } /* Awards scrolls like the news list rather than running down the page. */ .stack.scroller { max-height: 11rem; overflow-y: auto; padding-right: .4rem; -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); } /* Research overview reads as supporting detail, so set it a notch smaller. */ .overview-head { font-size: 1rem; margin: 1.5rem 0 .5rem; } .overview { font-size: .94rem; } .overview p { margin-bottom: .6rem; } .overview ol { padding-left: 1.2rem; margin: 0; } .overview li { margin-bottom: .3rem; } /* ══ Icon links + email reveal ═════════════════════════════════════════ */ .social { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .88rem; margin-top: .5rem; } .social a { display: inline-flex; align-items: center; gap: .35rem; color: var(--fg-soft); border-bottom: 1px solid transparent; padding-bottom: 1px; } .social a:hover { color: var(--accent); background: none; border-bottom-color: var(--accent); } .social.icons-only a { gap: 0; } .ico { width: 16px; height: 16px; display: block; flex: none; } .ico-fill { fill: currentColor; } .ico-stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .contact { margin: 0; } /* Footer row inherits .social; drop the old two-tier spacing. */ .site-footer .social { margin-top: 0; margin-bottom: .7rem; } /* Standing invitation to get in touch: set apart from the bio, quieter type. */ .callout { font-size: .9rem; line-height: 1.6; color: var(--fg-soft); background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 6px; padding: .75rem .95rem; margin: 1.4rem 0; }