:root {
  --paper: #ffffff; --ink: #1a1a1a; --mute: #6f6f6f; --rule: #e4e4e4; --soft: #f4f4f2;
  --acc: #6d4bd6; --ok: #2f7d4f; --warn: #b7791f;
  --disp: "Martian Mono", "IBM Plex Mono", ui-monospace, monospace;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body { background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 14px; line-height: 1.65; min-height: 100vh; padding-bottom: 120px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[data-tab-pane] { display: none; }
[data-tab-pane].on { display: block; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 28px; }
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 18px; padding: 20px 0; font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--rule); }
.top > span { white-space: nowrap; }
.top nav { display: flex; gap: 18px; margin-left: auto; }
.top nav button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.top nav button::before { content: "./"; opacity: .5; }
.top nav button:hover { color: var(--acc); }
.top nav button.on { color: var(--ink); font-weight: 500; }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--acc); }

/* header: name and identity on the left, portrait on the right */
.head { display: grid; grid-template-columns: minmax(0, 1fr) 176px; column-gap: 44px; align-items: start; margin-top: 44px; }
.head .txt { text-align: left; }
/* portrait on a violet block offset like a shadow, echoing the violet block after the name */
.head .pf { position: relative; width: 168px; margin: 0; }
.head .pf::before { content: ""; position: absolute; inset: 0; transform: translate(8px, 8px); background: var(--acc); }
.head .portrait { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--ink); background: var(--soft); }
/* the name is the first identity line, a little larger, with the violet block the portrait echoes */
.idblock p.nm { font-size: 20px; line-height: 1.3; color: var(--ink); margin: 0 0 12px; }
.idblock p.nm b { font-weight: 500; }
.idblock p.nm .c { display: inline-block; width: .45em; height: .8em; background: var(--acc); vertical-align: -.08em; margin-left: .2em; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 640px) {
  .head { grid-template-columns: 1fr; margin-top: 28px; }
  .head .pf { order: -1; width: 112px; margin-bottom: 28px; }
  .head .pf::before { transform: translate(6px, 6px); }
}

.idblock { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--mute); }
.idblock p { margin: 0 0 14px; }
.idblock p:last-child { margin-bottom: 0; }
.idblock b { font-weight: 500; color: var(--ink); }
.idblock a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.idblock a:hover { color: var(--acc); border-color: var(--acc); }
.idblock .status { display: inline-block; padding: 3px 8px; border-radius: 3px; font-weight: 500; background: var(--soft); color: var(--ink); }
.type { margin: 30px 0 0; font-size: 15px; line-height: 1.6; max-width: 72ch; min-height: 3.2em; }
.type .cur { display: inline-block; width: .55em; height: 1em; background: var(--ink); vertical-align: -.15em; animation: blink 1.1s steps(1) infinite; }

h2 { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 56px 0 14px; display: flex; align-items: center; gap: 12px; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
h2 span { color: var(--ink); }

/* selected work cards */
.work { border: 1px solid var(--rule); padding: 18px 20px 14px; margin-bottom: 18px; }
.work .wh { display: flex; justify-content: space-between; gap: 4px 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
.work h3 { font-size: 15px; font-weight: 500; margin: 0 0 6px; }
.work .venue { font-size: 12px; color: var(--mute); }
.work p.au { margin: 0; font-size: 12.5px; color: var(--mute); }
.work p.au b { color: var(--ink); font-weight: 500; }
.work .venue.ok { color: var(--ok); }
.work .venue.rv { color: var(--warn); }
.work p.d { margin: 0 0 12px; font-size: 13px; color: #444; line-height: 1.6; max-width: 76ch; }
.work .lk { font-size: 12px; margin-top: 10px; }
.work .lk a, .work .lk button { color: var(--acc); text-decoration: none; margin-right: 14px; background: none; border: 0; font: inherit; padding: 0; cursor: pointer; }
.work .lk a:hover, .work .lk button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* papers as log lines */
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 52px 92px 1fr; column-gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.log li:hover { background: var(--soft); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.log .yr { color: var(--mute); font-size: 12.5px; }
.log .st { font-size: 11.5px; letter-spacing: .04em; }
.log .st.ok { color: var(--ok); }
.log .st.rv { color: var(--warn); }
.log .st.ws { color: var(--mute); }
.log .st.cf { color: var(--ink); font-weight: 500; }
.log .t { margin: 0; font-size: 14.5px; line-height: 1.45; }
.log .t a { text-decoration: none; }
.log .t a:hover { color: var(--acc); }
.log .au { margin: 2px 0 0; font-size: 12.5px; color: var(--mute); }
.log .au b { color: var(--ink); font-weight: 500; }
.log .au a, .log .au button { color: var(--acc); text-decoration: none; margin-left: 10px; background: none; border: 0; font: inherit; padding: 0; cursor: pointer; }
.log .au a:hover, .log .au button:hover { text-decoration: underline; text-underline-offset: 3px; }
.log .au .blog { border: 1px solid var(--acc); padding: 0 5px; border-radius: 2px; font-size: 11px; }
@media (max-width: 640px) { .log li { grid-template-columns: 52px 1fr; } .log .st { grid-column: 2; order: 3; } }

/* bibtex box, opened from a paper's "bibtex" button */
.log li > div { min-width: 0; }
.bib-btn.on { text-decoration: underline; text-underline-offset: 3px; }
.bib { position: relative; margin: 10px 0 4px; border: 1px solid var(--rule); background: var(--paper); }
.bib pre { margin: 0; padding: 10px 64px 10px 12px; font: 11.5px/1.55 var(--mono); color: var(--ink); overflow-x: auto; }
.bib .cp { position: absolute; top: 6px; right: 6px; font: 11px var(--mono); color: var(--acc); background: var(--paper); border: 1px solid var(--rule); padding: 1px 7px; cursor: pointer; }
.bib .cp:hover { border-color: var(--acc); }

/* blog posts */
.post { display: grid; grid-template-columns: 92px 1fr; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 20px; }
.post .dt { color: var(--mute); font-size: 12.5px; padding-top: 3px; }
.post h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { color: var(--acc); }
.post p { margin: 0 0 8px; font-size: 13.5px; color: #444; max-width: 70ch; }
.post .fm { font-size: 12px; }
.post .fm a { color: var(--acc); text-decoration: none; margin-right: 14px; }
.post .fm a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post .fm span { color: var(--mute); }
.empty { color: var(--mute); font-size: 13px; padding: 18px 0; }

.foot { margin-top: 64px; font-size: 12px; color: var(--mute); border-top: 1px solid var(--rule); padding-top: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* interactive figures: shared look for every figures/*.js */
.fig { --fa: var(--acc); --fi: var(--ink); --fm: var(--mute); --fg: var(--rule); --fb: var(--paper); --ff: var(--soft); font-family: var(--mono); color: var(--fi); }
.fig svg { display: block; width: 100%; height: auto; background: var(--fb); }
.fig canvas { display: block; width: 100%; height: auto; }
.fig .ctl { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 12px; color: var(--fm); margin: 0 0 8px; }
.fig .ctl label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fig .ctl label:has(input[type=checkbox]) { border: 1px solid var(--fg); padding: 3px 8px; border-radius: 3px; }
.fig .ctl input[type=range] { width: 150px; accent-color: var(--fa); }
.fig .ctl input[type=checkbox] { accent-color: var(--fa); }
.fig .ctl output, .fig .ctl b { color: var(--fi); font-weight: 500; font-variant-numeric: tabular-nums; }
.fig .ctl button { font: inherit; color: var(--fi); background: transparent; border: 1px solid var(--fi); border-radius: 3px; padding: 3px 10px; cursor: pointer; }
.fig .ctl button:hover { background: var(--fi); color: var(--fb); }
.fig .ctl .pills { display: inline-flex; align-items: center; gap: 0; }
.fig .ctl .pills > span { margin-right: 10px; }
.fig .ctl .pills button { border-color: var(--fg); color: var(--fm); border-radius: 0; margin-left: -1px; }
.fig .ctl .pills button:first-of-type { border-radius: 3px 0 0 3px; }
.fig .ctl .pills button:last-of-type { border-radius: 0 3px 3px 0; }
.fig .ctl .pills button:hover { background: var(--ff); color: var(--fi); }
.fig .ctl .pills button.on { background: var(--fi); border-color: var(--fi); color: var(--fb); position: relative; }
.fig text { fill: var(--fm); font-family: var(--mono); font-size: 10.5px; }
.fig text.acc { fill: var(--fa); stroke: none; }
.fig text.ink { fill: var(--fi); stroke: none; }
.fig .grid { stroke: var(--fg); stroke-width: 1; fill: none; }
.fig .ink { stroke: var(--fi); fill: none; stroke-width: 1.6; }
.fig .acc { stroke: var(--fa); fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.fig .accf { fill: var(--fa); }
.fig .inkf { fill: var(--fi); }
.fig .mute { stroke: var(--fm); fill: none; stroke-width: 1.2; stroke-dasharray: 3 3; }
.fig .band { fill: var(--fa); opacity: .08; }
.fig .bar { fill: var(--fi); opacity: .13; }
.fig .ref { stroke: var(--fm); opacity: .45; fill: none; stroke-width: 1.2; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }