/* ========================================================================== COMPOSE — project page stylesheet (written from scratch) Design direction: a "technical report" / systems-paper layout. - Left sticky sidebar (masthead + table of contents + meta) - Cool slate canvas, cool near-black ink, single cobalt accent - Monospace-accented section labels / technical numerals - Strong editorial type scale, generous measure ========================================================================== */ /* ---- Design tokens -------------------------------------------------------- */ :root { /* Color */ --paper: #f7f8fa; /* cool near-white canvas */ --paper-2: #eceef2; /* slightly deeper cool panel */ --card: #ffffff; /* raised surfaces (true white) */ --plate: #f4f5f7; /* theme-stable mount behind white-baked plots/diagram */ --ink: #13161c; /* primary text (cool near-black) */ --ink-soft: #444a55; /* secondary text */ --ink-faint: #646b78; /* tertiary / captions (AA at small sizes) */ --rule: #dde0e6; /* hairline rules (cool gray) */ --rule-strong: #bcc2cd; --accent: #2348ff; /* cobalt — links, highlights */ --accent-deep: #1633c4; --accent-wash: #e7ebff; /* accent tint background */ --good: #1f7a4d; /* "consistent" green */ --good-wash: #e2f1e8; --good-deep: #155f3b; /* darker green for text on paper */ --bad: #b23a2e; /* "inconsistent" red */ --bad-wash: #f6e3df; --amber: #a85d00; /* warm accent — measurement / MPJPE */ --amber-wash: #fbedd6; --amber-deep: #8a4d00; --violet: #6b3fd4; /* third accent — BP / GPU / scalable*/ --violet-wash: #ece4fb; --violet-deep: #5530b0; --hl-wash: #fff2bf; /* highlighter wash for marquee text */ /* Type */ --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* body + headings (humanist grotesque) */ --label: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* same family, used for UI labels / chrome */ --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; /* genuine code only */ /* Type scale (modular, ~1.25) */ --t-xs: 0.78rem; --t-sm: 0.875rem; --t-base: 1.02rem; --t-md: 1.18rem; --t-lg: 1.5rem; --t-xl: 2.0rem; --t-2xl: 2.75rem; --t-3xl: clamp(2.4rem, 5.5vw, 4.2rem); /* Spacing (8px base) */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4.5rem; --s-7: 7rem; /* Layout */ --sidebar-w: 19rem; --maxw: 1320px; --radius: 4px; --radius-lg: 8px; --shadow: 0 1px 0 var(--rule), 0 8px 28px -18px rgba(19, 22, 28, .35); /* Theme-flippable primitives (overridden in [data-theme="dark"]) */ --grain-dot: rgba(19, 22, 28, .025); /* paper-grain texture dot */ --shadow-tint: rgba(19, 22, 28, .35); /* drop-shadow ink tint */ --btn-on-accent: #fff; /* text/fill on solid accent fills */ --scrim: rgba(12, 12, 16, .88); /* lightbox / overlay backdrop */ --cite-bg: var(--ink); /* code/citation panel surface */ --cite-bar: #0d1016; /* code/citation panel header */ --cite-ink: #e6e9ef; /* code/citation panel text */ --cite-key: #8fb3ff; /* bibtex @article token */ --cite-str: #ffd479; /* bibtex string token */ --chip-ink: #fff; /* text on solid good/bad/accent chips */ --ours-best-bg: #d8efe0; /* green win cell inside a cobalt "ours" row */ } /* ========================================================================== Dark theme — approved palette. Overrides every color token from :root. Default theme is set on by the anti-flash script (system or stored). ========================================================================== */ [data-theme="dark"] { --paper: #14171c; --paper-2: #1b1f26; --card: #1d212a; --plate: #f4f5f7; /* identical light mount — white-baked plots read the same in both themes */ --ink: #e7e9ee; --ink-soft: #a9b0bd; --ink-faint: #888f9d; --rule: #2a2f38; --rule-strong: #3b424e; --accent: #7e98ff; --accent-deep: #b9c6ff; --accent-wash: #1b2440; --good: #3fbf86; --good-wash: #11271d; --good-deep: #74e0aa; --bad: #e8746a; --bad-wash: #2e1714; --amber: #d59330; --amber-wash: #2c1f0d; --amber-deep: #e9b766; --violet: #a98af0; --violet-wash: #221a3a; --violet-deep: #c4adf7; --hl-wash: #473b12; /* Flippable primitives: a light grain dot on the dark canvas; deeper shadow; keep on-accent text dark for contrast against the lighter dark-mode accent. */ --grain-dot: rgba(255, 255, 255, .03); --shadow-tint: rgba(0, 0, 0, .55); --btn-on-accent: #14171c; --scrim: rgba(6, 8, 12, .9); /* Citation/code panel: lift off the near-black canvas so it reads as a surface */ --cite-bg: #11151b; --cite-bar: #0c0f14; --cite-ink: var(--ink); --cite-key: var(--accent-deep); --cite-str: var(--amber-deep); --chip-ink: #14171c; /* dark ink on the lighter dark-mode chips */ --ours-best-bg: #16352a; /* deeper green tint over the dark cobalt row */ --shadow: 0 1px 0 var(--rule), 0 8px 28px -18px var(--shadow-tint); } /* ---- Reset / base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-4); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--t-base); line-height: 1.66; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* subtle paper grain via layered gradients */ background-image: radial-gradient(circle at 1px 1px, var(--grain-dot) 1px, transparent 0); background-size: 22px 22px; transition: background-color .25s ease, color .25s ease; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration: underline; color: var(--accent-deep); } /* Citation links on baseline method names in the result tables. Stay inked and quiet inline; reveal the cobalt accent on hover/focus. */ .ref-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .12s ease, text-decoration-color .12s ease; } .ref-link:hover, .ref-link:focus-visible { color: var(--accent-deep); text-decoration-style: solid; text-decoration-color: var(--accent); } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 2px; } h1, h2, h3, h4 { font-family: var(--font); line-height: 1.14; letter-spacing: -0.005em; font-weight: 700; margin: 0; } /* Real h3 tier — a genuine size step above body, distinct from .eyebrow kickers */ h3 { font-size: var(--t-lg); font-weight: 650; } h4 { font-weight: 600; } code, kbd, samp { font-family: var(--mono); font-size: 0.92em; } /* Accessible skip link */ .skip-link { position: absolute; left: var(--s-2); top: -4rem; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: var(--radius); z-index: 100; transition: top .18s ease; } .skip-link:focus { top: var(--s-2); } /* Reusable: quiet-sans eyebrow label */ .eyebrow { font-family: var(--label); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; display: inline-flex; align-items: center; gap: .6rem; } .eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--rule-strong); } /* Eyebrow can carry a leading icon; when it does, drop the rule dash */ .eyebrow .eyebrow__icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--accent); } .eyebrow:has(.eyebrow__icon)::before { display: none; } /* A subsection heading must read as a heading, not a kicker: when an

carries the .eyebrow class, restyle it back to the proper h3 tier and drop the kicker look. */ h3.eyebrow { font-family: var(--font); font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.005em; text-transform: none; color: var(--ink); display: block; } h3.eyebrow::before { display: none; } /* ========================================================================== Page shell — sidebar + main, asymmetric grid ========================================================================== */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 0; max-width: var(--maxw); margin: 0 auto; align-items: start; } /* ---- Sidebar -------------------------------------------------------------- */ .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; padding: var(--s-5) var(--s-4) var(--s-4) var(--s-4); border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s-4); overflow-y: auto; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); } .brand { display: block; } .brand__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .brand__mark { font-family: var(--label); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--ink); display: inline-flex; align-items: center; gap: .55rem; } .brand__mark:hover { text-decoration: none; } .brand__dot { width: .7rem; height: .7rem; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-wash); flex: none; } .brand__sub { margin-top: .55rem; font-size: var(--t-xs); color: var(--ink-faint); font-family: var(--label); letter-spacing: .04em; } /* ---- Light / dark theme toggle ------------------------------------------- */ .theme-toggle { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--ink-soft); background: var(--card); border: 1px solid var(--rule-strong); border-radius: 999px; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease; } .theme-toggle:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-wash); } .theme-toggle:active { transform: scale(.94); } .theme-toggle__icon { width: 1.1rem; height: 1.1rem; } /* Show the moon in dark (click → light); the sun in light (click → dark). */ .theme-toggle__icon--sun { display: none; } .theme-toggle__icon--moon { display: block; } [data-theme="light"] .theme-toggle__icon--sun { display: block; } [data-theme="light"] .theme-toggle__icon--moon { display: none; } /* Table of contents */ .toc { font-size: var(--t-sm); } .toc__title { font-family: var(--label); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-faint); margin-bottom: var(--s-2); } .toc__list { list-style: none; margin: 0; padding: 0; } .toc__list li { margin: 0; } .toc__link { display: flex; align-items: baseline; gap: .7rem; padding: .42rem .55rem; color: var(--ink-soft); border-radius: var(--radius); border-left: 2px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; } .toc__link:hover { text-decoration: none; background: var(--paper-2); color: var(--ink); } .toc__link .num { font-family: var(--label); font-size: var(--t-xs); color: var(--ink-faint); min-width: 1.4rem; } .toc__link[aria-current="true"] { background: var(--accent-wash); color: var(--accent-deep); border-left-color: var(--accent); font-weight: 600; } .toc__link[aria-current="true"] .num { color: var(--accent); } .sidebar__foot { margin-top: auto; font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.7; } .sidebar__foot a { color: var(--ink-soft); } /* ---- Main column ---------------------------------------------------------- */ .main { min-width: 0; padding: var(--s-5) clamp(1.25rem, 4vw, 4rem) var(--s-6); } .section { padding-block: var(--s-6) 0; scroll-margin-top: var(--s-3); } .section:first-of-type { padding-top: 0; } .section__head { margin-bottom: var(--s-4); max-width: 60ch; } .section__title { font-size: var(--t-xl); margin-top: .55rem; } /* readable measure for body prose */ .prose { max-width: 66ch; } .prose p { margin: 0 0 var(--s-2); color: var(--ink-soft); } .prose strong { color: var(--accent-deep); font-weight: 700; } /* Highlighter wash — catches a skimmer's eye on marquee phrases */ .hl { background: linear-gradient(transparent 58%, var(--hl-wash) 58%); padding: 0 .12em; font-weight: 700; color: var(--ink); border-radius: 2px; } .hl--good { background: linear-gradient(transparent 58%, var(--good-wash) 58%); color: var(--good-deep); } /* Don't stack the warm highlighter over an already-coloured wash (callouts etc.): drop the yellow band and emphasise with weight + accent colour instead. */ .callout .hl, .callout--good .hl, .callout--amber .hl { background: none; padding: 0; border-radius: 0; color: var(--accent-deep); font-weight: 700; } .callout--good .hl { color: var(--good-deep); } .callout--amber .hl { color: var(--amber-deep); } /* coloured key terms in figure captions, for at-a-glance reading */ .t-bad { color: var(--bad); font-weight: 600; } .t-good { color: var(--good-deep); font-weight: 600; } .t-accent { color: var(--accent-deep); font-weight: 600; } /* ========================================================================== Hero / masthead ========================================================================== */ .hero { padding-bottom: var(--s-2); } .hero__venue { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s-3); } .tag { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .04em; padding: .3rem .65rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-soft); background: var(--card); } .tag--accent { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-wash); } .hero__title { font-size: var(--t-3xl); letter-spacing: -0.025em; margin: 0 0 var(--s-3); max-width: 18ch; } .hero__title .lead { display: block; color: var(--accent-deep); } .hero__title .rest { display: block; font-size: 0.62em; font-weight: 650; letter-spacing: -0.018em; color: var(--ink); margin-top: .35rem; max-width: 24ch; } .hero__tldr { max-width: 62ch; font-size: var(--t-md); line-height: 1.55; color: var(--ink-soft); margin: 0 0 var(--s-4); padding-left: var(--s-3); border-left: 3px solid var(--accent); } .hero__tldr b { color: var(--ink); font-weight: 700; } /* Hero keyword chips — instant skim target under the title */ .hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s-3); } .hero__chips { list-style: none; padding: 0; } .hero__chips .tag { display: inline-flex; align-items: center; gap: .35rem; } .hero__chips .tag svg { width: .9em; height: .9em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .tag--good { color: var(--good-deep); border-color: var(--good); background: var(--good-wash); } .tag--bad { color: var(--bad); border-color: var(--bad); background: var(--bad-wash); } .tag--amber { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-wash); } .tag--violet{ color: var(--violet-deep); border-color: var(--violet); background: var(--violet-wash); } /* ========================================================================== Abstract — de-walled: TL;DR callout + labelled bullets + details toggle ========================================================================== */ /* A stronger, colored TL;DR callout (reuses hero__tldr language, bumped up) */ .callout { max-width: 64ch; font-size: var(--t-md); line-height: 1.5; color: var(--ink); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) - 4px); border-left: 5px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius) var(--radius) 0; font-weight: 500; } .callout--good { border-left-color: var(--good); background: var(--good-wash); } .callout--amber { border-left-color: var(--amber); background: var(--amber-wash); } /* Labelled scannable bullets */ .keypoints { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); max-width: 70ch; } .keypoints li { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--s-2); align-items: start; } .keypoints .kp__icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent-wash); color: var(--accent-deep); flex: none; } .keypoints .kp__icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; } .keypoints li:nth-child(1) .kp__icon { background: var(--bad-wash); color: var(--bad); } .keypoints li:nth-child(2) .kp__icon { background: var(--accent-wash); color: var(--accent-deep); } .keypoints li:nth-child(3) .kp__icon { background: var(--violet-wash); color: var(--violet-deep); } .keypoints li:nth-child(4) .kp__icon { background: var(--good-wash); color: var(--good-deep); } .keypoints .kp__label { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-right: .4rem; } .keypoints li:nth-child(1) .kp__label { color: var(--bad); } .keypoints li:nth-child(2) .kp__label { color: var(--accent-deep); } .keypoints li:nth-child(3) .kp__label { color: var(--violet-deep); } .keypoints li:nth-child(4) .kp__label { color: var(--good-deep); } .keypoints .kp__body { color: var(--ink-soft); line-height: 1.5; font-size: var(--t-base); } /* "Read the full abstract" disclosure */ .disclosure { margin-top: var(--s-2); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); max-width: 66ch; } .disclosure > summary { cursor: pointer; list-style: none; padding: .7rem var(--s-3); font-family: var(--label); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: .5rem; } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary::before { content: ""; width: .55rem; height: .55rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform .18s ease; } .disclosure[open] > summary::before { transform: rotate(45deg); } .disclosure > summary:hover { color: var(--accent-deep); } .disclosure .prose { padding: 0 var(--s-3) var(--s-2); max-width: none; } /* Disclosure that wraps a full-width data table (e.g. archived Shelf/Campus). */ .disclosure--table { max-width: none; margin-top: var(--s-4); background: transparent; } .disclosure--table > summary { background: var(--card); border-radius: var(--radius); } .disclosure--table .table-wrap { margin-top: var(--s-2); } .disclosure--table .table-note { padding: 0 var(--s-1); } /* Authors */ .authors { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); } .author { display: flex; align-items: center; gap: .7rem; } .author__avatar { width: 2.7rem; height: 2.7rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--rule-strong); flex: none; } .author__name { font-weight: 650; color: var(--ink); font-size: var(--t-sm); display: block; } .author__name:hover { color: var(--accent-deep); } .author__sup { font-family: var(--label); font-size: .7rem; vertical-align: super; color: var(--accent); margin-left: .15rem; } .affiliations { margin: 0 0 var(--s-4); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; font-size: var(--t-sm); color: var(--ink-faint); } .affiliations li { display: flex; gap: .4rem; } .affiliations .mark { font-family: var(--label); color: var(--accent); font-weight: 600; } /* Link buttons */ .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s-2); } .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.15rem; border-radius: var(--radius); font-weight: 600; font-size: var(--t-sm); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--shadow-tint); } .btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--card); } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--btn-on-accent); } .btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); } /* ========================================================================== Teaser figure ========================================================================== */ .figure { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .figure img { width: 100%; } .figure video { width: 100%; display: block; background: var(--card); } /* Video figure: minimal play/pause control overlaid in a corner. */ /* the teaser video toggles play/pause when clicked — no separate control */ .video-wrap { position: relative; line-height: 0; border-radius: var(--radius-lg); overflow: hidden; } .teaser-video { cursor: pointer; display: block; width: 100%; height: auto; } /* suppress the browser's own centre play button so only our subtle cues show */ .teaser-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } .teaser-video::-webkit-media-controls { display: none !important; } /* "paused" indicator: a clean frosted play badge, shown only while paused */ .video-status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 999px; background: rgba(20, 22, 28, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 4px 16px rgba(0, 0, 0, .22); color: #fff; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .figure--video.is-paused .video-status { opacity: 1; transform: translate(-50%, -50%) scale(1); } .video-status svg { width: 1.65rem; height: 1.65rem; fill: #fff; margin-left: 4px; } /* custom seek bar — thin, clean, modern; sits BELOW the video so it never occludes the video's own baked-in captions */ .video-scrub { display: block; width: 100%; height: 12px; margin: .5rem 0 .1rem; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; opacity: 0; /* hidden during passive playback; appears on hover/focus */ transition: opacity .2s ease; --p: 0%; } .figure--video:hover .video-scrub, .figure--video:focus-within .video-scrub { opacity: 1; } /* Touch devices have no hover to reveal the seek bar — keep it visible there */ @media (hover: none) { .video-scrub { opacity: .6; } } .video-scrub:focus-visible { outline: none; } .video-scrub::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; /* only the played part is drawn; the rest is transparent (no buffer-looking rail) */ background: linear-gradient(to right, var(--accent) var(--p), transparent var(--p)); } .video-scrub::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -3.5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .video-scrub::-moz-range-track { height: 3px; border-radius: 3px; background: transparent; } .video-scrub::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--accent); } .video-scrub::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--accent); } .figure figcaption { padding: var(--s-2) var(--s-3) var(--s-3); font-size: var(--t-sm); color: var(--ink-soft); border-top: 1px solid var(--rule); background: var(--card); max-width: 68ch; /* cap caption line length for readability (alignment unchanged) */ } .figure figcaption b { color: var(--ink); } /* Pipeline diagram: transparent PNG, so pad it onto the canvas tint rather than letting it bleed edge-to-edge like a photographic figure. */ .figure--pipeline { margin-top: var(--s-3); background: var(--plate); } .figure--pipeline img { width: 100%; padding: var(--s-3); background: var(--plate); } .legend { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--label); font-size: var(--t-xs); } .legend .swatch { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; } .legend .swatch--good { background: var(--good); } .legend .swatch--bad { background: var(--bad); } .legend-row { display: inline-flex; gap: 1.1rem; margin-left: .5rem; } /* ---- Native recomposed teaser: 2 rows x 3 stage columns -------------------- */ .teaser { padding: var(--s-3); background: var(--card); } .teaser__grid { display: grid; /* row-label column + three equal stage columns */ grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: var(--s-1) var(--s-2); align-items: center; } /* corner cell (top-left): optional decorative filter icon */ .teaser__corner { display: grid; place-items: center; } /* stage column headers */ .teaser__stage { margin: 0; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; display: flex; align-items: center; gap: .45rem; text-align: left; } .teaser__step { font-family: var(--label); font-weight: 700; font-size: var(--t-xs); color: var(--accent-deep); background: var(--accent-wash); border-radius: 999px; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; flex: none; } /* row labels (left column of each image row) */ .teaser__rowlabel { margin: 0; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .04em; font-weight: 700; color: var(--ink-soft); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; justify-self: center; padding: .2rem 0; text-transform: uppercase; } .teaser__rowlabel--prev { color: var(--bad); } .teaser__rowlabel--ours { color: var(--accent-deep); } /* image panels */ .teaser__panel { width: 100%; height: auto; aspect-ratio: 1100 / 660; object-fit: cover; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-2); } /* On narrow screens, keep the 2x3 structure but let it scroll horizontally so the row labels and stage headers stay aligned with their panels. */ @media (max-width: 760px) { .teaser { overflow-x: auto; -webkit-overflow-scrolling: touch; } .teaser__grid { min-width: 540px; } } /* ---- Side-by-side analysis figures (Scalability section) ------------------ */ .figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); } .figure-pair .figure { margin: 0; } .figure-pair .figure img { padding: var(--s-3) var(--s-3) 0; background: var(--plate); } .figure-pair figcaption b { color: var(--ink); } @media (max-width: 760px) { .figure-pair { grid-template-columns: 1fr; } } /* ========================================================================== Qualitative — multi-view input strip + whole-scene 3D reconstruction ========================================================================== */ /* Shared mono sub-label sitting above a figure's media */ .scene-input__label { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin: 0 0 var(--s-2); } .scene-input__label--spaced { margin-top: var(--s-5); } /* (1) Multi-view input — five landscape views in a responsive row. Wraps onto multiple rows on wide screens; becomes a horizontal scroll strip on narrow viewports so each view stays legible. */ .scene-strip { display: grid; /* auto-fit with a 180px floor: views wrap before they shrink below legibility */ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-1); } .scene-strip__view { width: 100%; height: auto; aspect-ratio: 620 / 349; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper-2); } /* Breathing room between stacked figures / scene blocks in the qualitative section */ #qualitative .figure + .figure, #qualitative .figure + .scene-input__label { margin-top: var(--s-4); } /* (2) Whole-scene 3D reconstruction — two renders side by side */ .scene-recon { margin-top: var(--s-4); } .recon-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } .recon-panel { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); } /* coloured accent stripe + text chip distinguish the two methods */ .recon-panel--mvpose { border-top: 3px solid var(--bad); } .recon-panel--ours { border-top: 3px solid var(--good); } .recon-panel img { width: 100%; height: auto; aspect-ratio: 850 / 720; object-fit: cover; display: block; } .recon-panel__label { position: absolute; top: .5rem; left: .5rem; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--chip-ink); padding: .18rem .5rem; border-radius: 3px; z-index: 1; } .recon-panel--mvpose .recon-panel__label { background: var(--bad); } .recon-panel--ours .recon-panel__label { background: var(--good); } /* ring highlighting the person MvPose misses (red) vs COMPOSE recovers (green), at ~(250,170) of the 850x720 render */ .recon-mark { position: absolute; left: 29.4%; top: 4.5%; height: 18%; width: auto; transform: translateX(-50%); color: var(--bad); filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)); pointer-events: none; z-index: 1; } .recon-panel--ours .recon-mark { color: var(--good); } @media (max-width: 760px) { /* input views scroll horizontally so each stays large enough to read */ .scene-strip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--s-1); } .scene-strip__view { scroll-snap-align: start; } /* recon renders stack vertically */ .recon-pair { grid-template-columns: 1fr; } } /* ========================================================================== Headline numbers (stat treatment) ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--s-3); } .stat { background: var(--card); padding: var(--s-3); border-top: 3px solid var(--accent); } .stat--good { border-top-color: var(--good); } .stat--amber { border-top-color: var(--amber); } .stat__num { font-family: var(--label); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; color: var(--accent-deep); line-height: 1; display: flex; align-items: baseline; } .stat--good .stat__num { color: var(--good-deep); } .stat--amber .stat__num { color: var(--amber-deep); } .stat__num .glyph { font-size: 0.62em; margin-right: .25rem; line-height: 1; align-self: center; } .stat__num .unit { font-size: 0.5em; color: var(--ink-faint); margin-left: .15rem; } .stat__label { margin-top: .6rem; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.4; } .stat__label b { color: var(--ink); } /* ========================================================================== Method — feature callouts ========================================================================== */ /* feature callouts (two-up) */ .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-top: var(--s-4); } .feature { border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--card); padding: var(--s-3); } .feature h4 { font-size: var(--t-md); margin-bottom: .3rem; display: flex; align-items: center; gap: .5rem; } .feature .feature__icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent-deep); } .feature .feature__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; } .feature p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); } .feature .badge { font-family: var(--label); font-size: var(--t-xs); color: var(--accent-deep); background: var(--accent-wash); padding: .15rem .5rem; border-radius: 999px; margin-left: auto; } /* ILP = exact (cobalt), BP = scalable/GPU (violet) */ .feature--exact { border-left-color: var(--accent); } .feature--scalable { border-left-color: var(--violet); } .feature--scalable .feature__icon { color: var(--violet-deep); } .feature--scalable .badge { color: var(--violet-deep); background: var(--violet-wash); } /* ========================================================================== Results — tables ========================================================================== */ .table-wrap { margin-top: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow-x: auto; background: var(--card); box-shadow: var(--shadow); } table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; } table.data caption { caption-side: top; text-align: left; padding: var(--s-3) var(--s-3) 0; font-size: var(--t-sm); color: var(--ink-faint); } table.data caption b { color: var(--ink); display: block; font-size: var(--t-md); margin-bottom: .2rem; } table.data th, table.data td { padding: .6rem .8rem; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; } table.data thead th { position: sticky; top: 0; background: var(--paper-2); font-family: var(--label); font-size: var(--t-xs); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; border-bottom: 2px solid var(--rule-strong); } table.data th[scope="row"], table.data td.label { text-align: left; font-weight: 500; color: var(--ink); white-space: normal; } table.data td { font-variant-numeric: tabular-nums; color: var(--ink-soft); } table.data tbody tr:last-child td { border-bottom: none; } /* category group header rows — NEUTRAL sub-heads (colour is reserved for wins) */ tr.group th { text-align: left; background: transparent; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); padding-top: var(--s-2); } /* carry a faint left band down each category's data rows for at-a-glance grouping */ tr.band--sup th[scope="row"] { box-shadow: inset 4px 0 0 -1px var(--amber); } tr.band--self th[scope="row"] { box-shadow: inset 4px 0 0 -1px var(--violet); } tr.band--opt th[scope="row"] { box-shadow: inset 4px 0 0 -1px var(--good); } /* COMPOSE (ours) highlighted rows */ tr.ours { background: var(--accent-wash); } tr.ours th[scope="row"], tr.ours td.label { color: var(--accent-deep); font-weight: 700; } tr.ours td { color: var(--ink); } .ours-flag { font-family: var(--label); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--btn-on-accent); background: var(--accent); padding: .08rem .35rem; border-radius: 3px; margin-left: .45rem; vertical-align: middle; } /* best value — marked by the ▲ glyph + bold green text only (no ring, no wash) */ .best { font-weight: 700; color: var(--good-deep); border-radius: 3px; } .best::before { content: "\25B2"; /* ▲ */ font-size: .62em; margin-right: .25em; color: var(--good); vertical-align: .08em; } /* inside an "ours" row, the green win cell sits on the cobalt tint to mark the win */ tr.ours td.best { background: var(--ours-best-bg); } .na { color: var(--ink-faint); } .table-note { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.6; } .table-note .key { font-family: var(--label); } /* Sub-tabs for Shelf / Campus is avoided — show both side by side via grouped header */ .subhead { font-family: var(--label); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); border-bottom: 1px solid var(--rule); } .subhead th { text-align: center; } /* ========================================================================== Citation / BibTeX ========================================================================== */ .cite { background: var(--cite-bg); color: var(--cite-ink); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--s-3); box-shadow: var(--shadow); } .cite__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: .7rem var(--s-3); background: var(--cite-bar); border-bottom: 1px solid rgba(120, 128, 140, .33); } .cite__bar .label { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: #9aa2b0; } .copy-btn { font-family: var(--label); font-size: var(--t-xs); color: var(--paper); background: var(--accent); border: none; padding: .4rem .8rem; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: background .15s ease; } .copy-btn:hover { background: var(--accent-deep); } .copy-btn.is-copied { background: var(--good); } .copy-btn svg { width: 1em; height: 1em; fill: currentColor; } .cite pre { margin: 0; padding: var(--s-3); overflow-x: auto; font-family: var(--mono); font-size: var(--t-sm); line-height: 1.65; color: var(--cite-ink); } .cite .tok-key { color: var(--cite-key); } .cite .tok-str { color: var(--cite-str); } /* ========================================================================== Footer ========================================================================== */ .footer { border-top: 1px solid var(--rule); margin-top: var(--s-6); padding-top: var(--s-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-faint); } .footer a { color: var(--ink-soft); } .footer__contact b { color: var(--ink); } /* Mobile "On this page" chip nav — hidden on desktop, shown < 960px */ .mobile-nav { display: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 960px) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--rule); flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); } .toc, .sidebar__foot { display: none; } .brand__sub { display: none; } /* horizontally-scrolling section chip bar keeps phone readers oriented */ .mobile-nav { display: block; position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); } .mobile-nav__scroll { display: flex; gap: .5rem; padding: .6rem var(--s-3); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mobile-nav__scroll::-webkit-scrollbar { display: none; } .mobile-nav__link { flex: none; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .04em; padding: .35rem .7rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-soft); background: var(--card); white-space: nowrap; } .mobile-nav__link[aria-current="true"] { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-wash); font-weight: 600; } .main { padding: var(--s-4) var(--s-3) var(--s-5); } .stats { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } } @media (max-width: 520px) { .hero__title { font-size: clamp(2rem, 9vw, 2.6rem); } .btn { flex: 1 1 auto; justify-content: center; } .author { gap: .55rem; } .stat__num { font-size: 2.1rem; } } /* Print */ @media print { .sidebar, .btn-row, .copy-btn, .mobile-nav, .disclosure > summary { display: none !important; } body { background: #fff; color: #000; } .shell { display: block; } } /* ---- Lightbox (click a figure to enlarge) ------------------------------- */ .main figure img { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 4vmin; background: var(--scrim); cursor: zoom-out; } .lightbox[hidden] { display: none; } .lightbox__img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; background: var(--plate); border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, .55); cursor: default; } .lightbox__close { position: absolute; top: 1.1rem; right: 1.3rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; cursor: pointer; } .lightbox__close:hover { background: rgba(255, 255, 255, .28); } @media (prefers-reduced-motion: no-preference) { .lightbox__img { animation: lb-in .18s ease-out; } @keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } }