:root {
  --ink: #1d1a2e; --ink-soft: #4d4863; --ink-faint: #7b7690; --paper: #fbfaff; --panel: #ffffff;
  --line: #e7e3f3; --line-strong: #d6d0ea; --accent: #5b3fb0;
  --serif: 'Source Serif 4', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.6; }
a { color: inherit; }
.head { max-width: 860px; margin: 0 auto; padding: 3.6rem 1.5rem 2.2rem; text-align: center; }
.kicker { margin: 0 0 .6rem; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.head h1 { margin: 0 0 1.2rem; font-family: var(--serif); font-weight: 700; font-size: 3rem; line-height: 1.1; letter-spacing: -.02em; }
.lede { margin: 0 auto; max-width: 640px; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.papers { max-width: 760px; margin: 0 auto; padding: 1rem 1.5rem 4rem; display: grid; gap: 2rem; }
.paper { display: grid; grid-template-columns: 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.thumb { display: block; background: #fff; border-bottom: 1px solid var(--line); }
.thumb img { display: block; width: 100%; height: auto; }
.body { padding: 1.4rem 1.6rem 1.6rem; }
.tag { margin: 0 0 .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.venue { margin-left: .6rem; padding: .12rem .55rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); letter-spacing: .04em; }
.paper h2 { margin: 0 0 .45rem; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.25; }
.paper h2 a { text-decoration: none; }
.paper h2 a:hover { color: var(--accent); }
.authors { margin: 0 0 .15rem; font-size: .9rem; color: var(--ink-faint); }
.summary { margin: 0 0 1.1rem; color: var(--ink-soft); }
.links { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.btn { display: inline-flex; align-items: center; padding: .45rem .95rem; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #4a3294; color: #fff; }
.foot { padding: 0 1.5rem 3rem; text-align: center; font-size: .85rem; color: var(--ink-faint); }
@media (max-width: 640px) { .head h1 { font-size: 2.2rem; } .head { padding-top: 3.5rem; } }
.note { margin: 0 0 .6rem; font-size: .8rem; color: var(--ink-faint); }
.authors sup, .note sup { color: var(--accent); }
html { scroll-behavior: smooth; }
.paper { scroll-margin-top: 80px; }
/* top bar, as on the paper pages */
.bar { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 255, .82);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.bar .in { max-width: 1200px; margin: 0 auto; padding: .7rem 1.3rem; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.2rem); }
.bar .brand { font-family: var(--serif); font-weight: 700; font-size: 1.32rem; color: var(--accent); white-space: nowrap; }
.bar nav { display: flex; gap: clamp(.8rem, 2vw, 1.4rem); }
.bar nav a { color: var(--ink-soft); font-weight: 500; font-size: 1rem; text-decoration: none; }
.bar nav a:hover { color: var(--accent); }
@media (max-width: 640px) { .bar .brand { display: none; } }
/* standard vs ours */
.contrast { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.side { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.3rem 1.2rem; }
.side.ours { background: #f4f1fc; border-color: #d9d0f2; }
.side-tag { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.side.ours .side-tag { color: var(--accent); }
.eq { overflow-x: auto; font-size: .98rem; }
.eq .katex-display { margin: .7rem 0; }
.side-text { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.bridge { max-width: 760px; margin: 1.6rem auto 2.4rem; padding: 0 1.5rem; text-align: center; color: var(--ink-soft); }
.bridge strong { color: var(--ink); }
@media (max-width: 820px) { .contrast { grid-template-columns: 1fr; } }