:root { --bg: #ffffff; --bg-elev: #f7f7f6; --card: #fbfbfa; --text: #111316; --muted: #5b6168; --faint: #8a9099; --border: #e4e4e1; --border-strong: #cfcfca; --link: #1d4ed8; --link-hover:#0b2a99; --accent: #b8541c; --code-bg: #f4f4f1; --checker-a: #f3f3f0; --checker-b: #e4e4e0; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius: 10px; --radius-sm: 6px; --shadow-card: 0 1px 2px rgba(15,17,20,.04), 0 4px 14px rgba(15,17,20,.04); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-serif); font-size: 17px; line-height: 1.65; letter-spacing: 0.003em; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(29,78,216,.25); transition: color .15s, border-color .15s; } a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); } h1, h2, h3 { font-family: var(--font-sans); font-weight: 600; color: var(--text); letter-spacing: -0.012em; } h2 { font-size: 1.55rem; margin: 0 0 1.2rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); } h3 { font-size: 1.05rem; margin: 0 0 .5rem; } .container { max-width: 1140px; margin: 0 auto; padding: 0 28px; } .container.narrow { max-width: 820px; } /* ─── Hero ─────────────────────────────────────────────────── */ .hero { padding: 72px 0 36px; text-align: center; background: radial-gradient(60% 70% at 50% 0%, #f4f6f9 0%, transparent 70%), var(--bg); border-bottom: 1px solid var(--border); } .venue { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; } .title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.6rem, 1.05rem + 1.8vw, 2.55rem); line-height: 1.18; margin: 0 auto 1.4rem; max-width: 22ch; letter-spacing: -0.018em; } .title .method { color: var(--accent); } .authors { list-style: none; padding: 0; margin: 0 0 .35rem; font-family: var(--font-sans); font-size: 1rem; color: var(--text); display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.1rem; } .authors li { white-space: nowrap; } .affiliation { margin: 0 0 1.6rem; font-family: var(--font-sans); color: var(--muted); font-size: .95rem; } .links { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: .4rem; } .pill { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; background: var(--text); color: #fff; border: 1px solid var(--text); border-radius: 999px; font-family: var(--font-sans); font-size: .9rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--text); transition: background .15s, color .15s, transform .1s; } .pill:hover { background: #fff; color: var(--text); border-bottom-color: var(--text); transform: translateY(-1px); } .pill[aria-disabled="true"] { background: #fff; color: var(--faint); border-color: var(--border-strong); cursor: not-allowed; pointer-events: none; } .pill .ico { font-family: var(--font-mono); font-size: .75rem; padding: .12rem .42rem; border-radius: 4px; background: rgba(255,255,255,.15); letter-spacing: .02em; } .pill[aria-disabled="true"] .ico { background: var(--bg-elev); } .pill:hover .ico { background: rgba(0,0,0,.07); } /* ─── Section spacing ──────────────────────────────────────── */ section { padding: 56px 0; } section + section { border-top: 1px solid var(--border); } /* ─── Teaser ───────────────────────────────────────────────── */ .teaser figure { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-card); } .teaser img { width: 100%; height: auto; border-radius: var(--radius-sm); } .teaser figcaption, .viewer-cell figcaption { margin-top: 12px; font-family: var(--font-sans); font-size: .85rem; color: var(--muted); text-align: center; line-height: 1.5; } /* ─── Abstract ─────────────────────────────────────────────── */ .abstract p { margin: 0 0 1rem; text-align: justify; hyphens: auto; } /* ─── Method pipeline figure ───────────────────────────────── */ .pipeline-figure { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 24px 18px; box-shadow: var(--shadow-card); } .pipeline-figure img { width: 100%; height: auto; border-radius: var(--radius-sm); } .pipeline-figure figcaption { margin-top: 14px; font-family: var(--font-sans); font-size: .9rem; color: var(--muted); text-align: center; line-height: 1.55; } .pipeline-figure figcaption strong { color: var(--text); font-weight: 600; } .mono { font-family: var(--font-mono); font-size: .92em; } /* ─── Results / charts ─────────────────────────────────────── */ .results .lede { max-width: 760px; color: var(--muted); font-size: .98rem; margin: 0 0 1.8rem; } .chart-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .chart-card { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .chart-card figcaption { font-family: var(--font-sans); font-size: .92rem; color: var(--text); margin-bottom: 10px; } .chart-card figcaption .muted { color: var(--muted); font-weight: 400; font-size: .85rem; } .chart-wrap { position: relative; height: 280px; } @media (max-width: 920px) { .chart-row { grid-template-columns: 1fr; } .chart-wrap { height: 260px; } } /* ─── Qualitative comparison figure ────────────────────────── */ .qualitative .lede { max-width: 760px; color: var(--muted); font-size: .98rem; margin: 0 0 1.8rem; } .qualitative-figure { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 18px; box-shadow: var(--shadow-card); } .qualitative-figure img { width: 100%; height: auto; border-radius: var(--radius-sm); } .qualitative-figure figcaption { margin-top: 14px; font-family: var(--font-sans); font-size: .9rem; color: var(--muted); text-align: center; line-height: 1.55; } .qualitative-figure figcaption strong { color: var(--text); font-weight: 600; } /* ─── Gallery ──────────────────────────────────────────────── */ .gallery .lede { max-width: 720px; color: var(--muted); font-size: .98rem; margin: 0 0 1.6rem; } .sample-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 28px; padding-bottom: 6px; } .sample-thumb { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--bg-elev); aspect-ratio: 1 / 1; padding: 0; transition: border-color .15s, transform .12s, box-shadow .15s; } .sample-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sample-thumb:hover { border-color: var(--text); transform: translateY(-1px); } .sample-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(184,84,28,.18); } .viewer { display: flex; flex-direction: column; gap: 18px; } .viewer-row { display: grid; gap: 18px; } .viewer-row:first-child { grid-template-columns: 1fr 1fr; } .layers-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .viewer-cell { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-card); } .checker { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background-color: var(--checker-a); background-image: linear-gradient(45deg, var(--checker-b) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-b) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-b) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; } .checker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* ─── BibTeX ───────────────────────────────────────────────── */ .bibtex pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: .82rem; line-height: 1.55; color: var(--text); margin: 0; } /* ─── Footer ───────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--border); padding: 28px 0 40px; font-family: var(--font-sans); font-size: .85rem; color: var(--muted); text-align: center; } .footer a { color: var(--muted); border-bottom-color: var(--border-strong); } .footer a:hover { color: var(--text); border-bottom-color: var(--text); } /* ─── Smaller screens ──────────────────────────────────────── */ @media (max-width: 620px) { body { font-size: 16px; } .hero { padding: 48px 0 28px; } .viewer-row:first-child { grid-template-columns: 1fr; } .layers-row { grid-template-columns: repeat(2, 1fr); } section { padding: 44px 0; } }