/* ============================================================================
iTeach Project Page — Stylesheet
https://irvlutd.github.io/iTeach/
Theme: CLAP-inspired dark + amber gold, layered on top of Bulma and the
shared IRVL royal-theme (`../assets/css/jp-royal-theme.css`).
Stack: Bulma 0.9 · FontAwesome · Academicons · Outfit / Noto Sans /
JetBrains Mono · prefers-color-scheme auto dark/light.
Owner: IRVL, UT Dallas
License: See repository root.
Conventions
-----------
- Design tokens live in :root (Section 01). Update only there.
- Colors pulled from tokens, not inline — keeps palette consistent.
- Components prefixed by role (kpi-, ack-, rc-, mrow-, fs3-, rr-, ds-)
- !important is used sparingly and only to override Bulma / royal-theme.
- Mobile-first media queries at the end of each section.
Table of Contents
-----------------
01 Design tokens (palette · fonts · light mode)
02 Reset, base typography, links, accessibility
03 Ambient background (aurora gradient + SVG grain)
04 Layout primitives (body, section spacing, skip-link, focus states)
05 Navbar (related-research home + dropdown, burger, mobile)
06 Hero (title, authors, affiliation, action buttons)
07 Progress sidebar (fixed rail) + pill TOC (narrow screens)
08 Typography blocks (eyebrow, section-title, sub-title, prose)
09 Figures (paper-fig, fig-caption, lightbox)
10 Video (YouTube click-to-play facade)
11 TL;DR callout
12 Stats / KPI cards
13 Pipeline steppers (iTeach loop, real-robot pipeline)
14 Metric bar cards (Grasping / Pick & Place)
15 FS3 row (3-column flow)
16 Dataset snapshot tiles (ds-stats)
17 Results section containers (result-block, result-grid, outcome-lede)
18 Code & Data resource grid (rc-*)
19 SceneReplica table (legacy, optional)
20 Acknowledgements cards
21 BibTeX block
22 Real-robot figure walkthrough
23 Footer
============================================================================ */
/* ============================================================================
01 Design tokens
============================================================================ */
:root {
--bg-dark: #0a0e14;
--bg-deeper: #06080c;
--bg-card: #161b24;
--accent-primary: #d4a03a;
--accent-secondary: #c4902a;
--accent-deep: #8b6f1f;
--accent-glow: rgba(212, 160, 58, 0.18);
--text-main: #e6edf3;
--text-soft: #c4cdd9;
--text-dim: #b5bdc8;
--text-faint: #8892a0;
--glass-bg: rgba(255, 255, 255, 0.025);
--glass-bg-strong: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.06);
--glass-border-strong: rgba(212, 160, 58, 0.3);
--mono: 'JetBrains Mono', ui-monospace, monospace;
--font-display: 'Outfit', sans-serif;
--font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--grain-opacity: 0.03;
}
@media (prefers-color-scheme: light) {
:root {
--bg-dark: #faf9f7;
--bg-deeper: #f0eeea;
--bg-card: #ffffff;
--accent-primary: #b8860b;
--accent-secondary: #9a7209;
--accent-glow: rgba(184, 134, 11, 0.12);
--text-main: #1a1a1a;
--text-soft: #4a4a4a;
--text-dim: #7a7a7a;
--text-faint: #9a9a9a;
--glass-bg: rgba(0, 0, 0, 0.025);
--glass-bg-strong: rgba(0, 0, 0, 0.05);
--glass-border: rgba(0, 0, 0, 0.08);
--glass-border-strong: rgba(184, 134, 11, 0.35);
--grain-opacity: 0.015;
}
}
/* ============================================================================
02 Reset, base typography, links
============================================================================ */
/* Base overrides on Bulma */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 5rem; }
/* Skip link for keyboard users */
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--accent-primary); color: var(--bg-dark) !important;
padding: 0.6rem 1rem; border-radius: 0 0 8px 0;
font-family: var(--font-display); font-weight: 600;
z-index: 9999; text-decoration: none;
}
.skip-link:focus { left: 0; outline: 2px solid var(--accent-primary); outline-offset: 2px; }
/* Keyboard focus visible */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 3px;
border-radius: 4px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.aurora { animation: none !important; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
body {
font-family: var(--font-body) !important;
background: var(--bg-dark) !important;
color: var(--text-main) !important;
font-size: 1.06rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
position: relative;
}
::selection { background: var(--accent-primary); color: var(--bg-dark); }
a, a.href-link { color: var(--accent-primary) !important; text-decoration: none; transition: color 0.2s; font-weight: inherit !important; }
a:hover, a.href-link:hover { color: var(--accent-secondary) !important; text-decoration: none !important; font-weight: inherit !important; }
a.href-link:hover {
border-bottom: 1px dashed var(--accent-secondary) !important;
}
a.red { color: var(--accent-primary) !important; }
a.red:hover { color: var(--accent-secondary) !important; border-bottom: 1px dashed var(--accent-secondary) !important; }
/* ============================================================================
03 Ambient background (aurora + grain)
============================================================================ */
/* Ambient background layers */
.aurora-container {
position: fixed; inset: 0; z-index: 0; overflow: hidden;
pointer-events: none;
background:
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(212,160,58,0.10), transparent),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(99,102,241,0.04), transparent);
}
.aurora {
position: absolute; width: 150%; height: 150%;
top: -25%; left: -25%;
background:
radial-gradient(circle at 20% 30%, rgba(212,160,58,0.10) 0%, transparent 45%),
radial-gradient(circle at 80% 70%, rgba(196,144,42,0.08) 0%, transparent 45%);
filter: blur(90px);
animation: aurora-drift 24s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
0% { transform: scale(1) translate(0,0) rotate(0deg); }
50% { transform: scale(1.1) translate(2%,3%) rotate(2deg); }
100% { transform: scale(1) translate(-1%,-2%) rotate(-1deg); }
}
.grain-overlay {
position: fixed; inset: 0;
pointer-events: none; z-index: 1000;
opacity: var(--grain-opacity);
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Layer content above the bg */
body > nav, body > section, body > footer, body > main { position: relative; z-index: 2; }
/* Style the FewSOL template-credit pill appended by the shared script. */
#website-template-credits .royal-theme-btn-fewsol {
color: var(--accent-primary) !important;
border-bottom: 1px dashed var(--accent-primary) !important;
background: transparent !important;
padding: 0 !important;
margin-left: 0.25rem;
}
#website-template-credits .royal-theme-btn-fewsol:hover {
color: var(--accent-secondary) !important;
}
/* Recolor the navbar to match the CLAP palette (overrides jp-royal-theme). */
.navbar, .navbar-brand, .navbar-menu, .navbar-tabs,
.navbar-start, .navbar-end {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
.navbar {
min-height: 0 !important;
padding: 0.9rem 1.5rem 0 !important;
border: 0 !important;
margin-bottom: 0 !important;
}
/* Balanced breathing between the navbar and the hero title */
.hero .hero-body.pad-zero,
.hero .hero-body { padding-top: 2.75rem !important; }
.navbar-menu { padding: 0 !important; }
.navbar-start { gap: 0.5rem; }
.navbar-item:not(#related-research-home):not(#related-research) {
background: transparent !important;
}
#related-research-home,
#related-research {
background: transparent !important;
color: var(--text-dim) !important;
border: 0 !important;
border-radius: 100px !important;
font-family: var(--font-display) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.45rem 0.9rem !important;
height: 2.1rem !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
transition: color 0.2s, background 0.2s;
}
#related-research-home { padding: 0.45rem 0.7rem !important; }
#related-research-home .icon { height: 100%; display: inline-flex; align-items: center; }
#related-research-home svg { width: 16px; height: 16px; }
#related-research-home:hover,
#related-research:hover {
background: rgba(212,160,58,0.08) !important;
color: var(--accent-primary) !important;
}
#related-research-home .icon svg path { fill: var(--text-dim) !important; transition: fill 0.2s; }
#related-research-home:hover .icon svg path { fill: var(--accent-primary) !important; }
/* Bulma's triangle after-element — strip the gray box, tint gold */
#related-research::after {
background: transparent !important;
border-color: var(--text-dim) transparent transparent transparent !important;
border-style: solid !important;
border-width: 4px 4px 0 4px !important;
right: 0.6em !important;
margin-top: -0.3em !important;
width: 0 !important; height: 0 !important;
transform: none !important;
transition: border-color 0.2s;
}
#related-research:hover::after { border-top-color: var(--accent-primary) !important; }
#related-research { padding-right: 1.6rem !important; }
/* Dropdown panel */
#related-research-dropdown {
background: var(--bg-card) !important;
border: 1px solid var(--glass-border) !important;
border-radius: 12px !important;
padding: 0.5rem !important;
margin-top: 0 !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.55) !important;
min-width: 200px;
}
/* Extend the hoverable area of the trigger item downward by 12px so
the cursor can cross to the dropdown without losing :hover. */
.navbar-item.has-dropdown.is-hoverable { padding-bottom: 12px !important; }
#related-research-dropdown a.navbar-item {
background: transparent !important;
color: var(--text-soft) !important;
font-family: var(--font-display) !important;
font-size: 0.88rem !important;
border-radius: 8px !important;
padding: 0.5rem 0.9rem !important;
}
#related-research-dropdown a.navbar-item:hover {
background: rgba(212,160,58,0.12) !important;
color: var(--accent-primary) !important;
}
#related-research-dropdown a.navbar-item center {
text-align: left; display: block;
}
.navbar-burger { color: var(--accent-primary) !important; background: transparent !important; }
/* ============================================================================
06 Hero
============================================================================ */
/* Hero / title */
.publication-title {
font-family: var(--font-display) !important;
color: var(--text-main) !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important;
margin-bottom: 1rem !important;
}
.publication-title i, .publication-title em {
font-style: italic;
color: var(--accent-primary);
text-shadow: 0 0 40px var(--accent-glow);
font-weight: 700;
}
.publication-title b { color: var(--text-main); font-weight: 700; }
.publication-title .title-sep {
color: var(--text-dim);
font-weight: 400;
font-style: normal;
margin: 0 0.05em;
text-shadow: none;
}
.title-line {
width: 120px; height: 3px;
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
margin: 0.35rem auto 2rem;
border-radius: 2px;
}
/* Breathing between the hero title-line and the author row */
.publication-title + .title-line { margin-bottom: 2.25rem; }
/* Eyebrow (venue pill) */
.eyebrow {
display: inline-block;
padding: 0.35rem 1rem;
background: linear-gradient(90deg, rgba(212,160,58,0.1), rgba(196,144,42,0.1));
border: 1px solid rgba(212,160,58,0.3);
border-radius: 100px;
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 1.25rem;
}
/* Author cards (HRT1 skeleton) */
#author-content { margin-bottom: 0.4rem !important; }
.publication-authors .columns { margin-left: -0.25rem !important; margin-right: -0.25rem !important; }
.publication-authors .column { padding: 0.15rem 0.25rem !important; }
/* Size author columns to content (not equal flex), so fewer authors don't
spread across the full container width. */
.publication-authors #author-content.columns {
flex-wrap: nowrap !important;
justify-content: center !important;
gap: 3.5rem;
}
.publication-authors #author-content > .column {
flex: 0 0 auto !important;
}
@media (max-width: 640px) {
.publication-authors #author-content.columns { flex-wrap: wrap !important; }
}
.publication-authors a { color: var(--text-soft) !important; }
.publication-authors a:hover { color: var(--accent-primary) !important; }
.publication-authors .is-size-6 {
color: var(--text-soft);
font-family: var(--font-display);
font-weight: 500;
/* Inherit Bulma's is-size-6 (1rem) to match iTeach */
display: inline-block;
transition:
color 0.3s ease,
transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
letter-spacing 0.3s ease,
text-shadow 0.3s ease;
}
.publication-authors a:hover .is-size-6 {
color: var(--accent-primary) !important;
transform: translateY(-2px);
letter-spacing: 0.015em;
text-shadow: 0 0 16px var(--accent-glow);
}
.publication-authors sup { color: var(--accent-primary); }
.author-image {
width: 110px !important;
height: 110px !important;
max-width: 110px;
object-fit: cover;
object-position: center;
border-radius: 50%;
border: 0;
display: inline-block;
box-shadow:
0 0 0 2px var(--glass-border),
0 8px 20px rgba(0, 0, 0, 0.35);
transition:
box-shadow 0.3s ease,
transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
filter 0.3s ease;
}
a:hover .author-image {
transform: translateY(-3px) scale(1.03);
box-shadow:
0 0 0 2px var(--accent-primary),
0 0 0 6px rgba(212, 160, 58, 0.18),
0 12px 28px rgba(212, 160, 58, 0.22);
filter: saturate(1.06);
}
.author-meta-info, .affiliation {
color: var(--text-dim) !important;
font-size: 0.95rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem !important;
}
/* Publication link buttons — CLAP pill style */
.publication-links .button, .royal-theme-btn {
background: var(--glass-bg) !important;
color: var(--text-main) !important;
border: 1px solid var(--glass-border) !important;
border-radius: 100px !important;
font-family: var(--font-display) !important;
font-weight: 500 !important;
font-size: 0.9rem !important;
padding: 0.55rem 1.1rem !important;
margin: 0.25rem !important;
backdrop-filter: blur(10px);
transition: all 0.2s;
}
.publication-links .button:hover, .royal-theme-btn:hover {
border-color: var(--glass-border-strong) !important;
color: var(--accent-primary) !important;
background: var(--glass-bg-strong) !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(212,160,58,0.18);
}
.publication-links .button .icon, .royal-theme-btn .icon { color: inherit; }
/* ============================================================================
08 Typography blocks
============================================================================ */
/* Section titles */
.section { padding: 3rem 1.5rem; }
h2.title, .title.is-3 {
font-family: var(--font-display) !important;
color: var(--text-main) !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
h2.title.is-3.royal-theme, .royal-theme h2, .royal-theme.title {
color: var(--text-main) !important;
background: transparent !important;
}
.section-eyebrow {
display: block;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 0.4rem;
}
.sub-title {
font-family: var(--font-body);
font-style: italic;
font-size: 1.2rem;
color: var(--accent-primary);
margin: 1.75rem 0 0.6rem;
}
/* Body prose (Bulma content) */
.content, .content p {
color: var(--text-soft) !important;
font-family: var(--font-body) !important;
font-size: 1.05rem;
line-height: 1.75;
}
.content p b { color: var(--text-main); font-weight: 600; }
.content p i, .content p em { color: var(--accent-secondary); font-style: italic; }
/* ============================================================================
09 Figures (paper-fig, captions)
============================================================================ */
/* Figure frame */
.paper-fig {
border: 1px solid var(--glass-border);
border-radius: 14px;
overflow: hidden;
background: var(--glass-bg);
transition: border-color 0.25s, transform 0.25s;
margin: 1.5rem 0;
}
.paper-fig:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.paper-fig img { display: block; width: 100%; height: auto; }
.paper-fig.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.fig-caption {
font-size: 0.9rem; color: var(--text-dim);
line-height: 1.65; margin-top: 0.75rem; padding: 0 0.25rem;
font-family: var(--font-body);
}
.fig-caption b { color: var(--text-soft); font-weight: 500; }
.fig-caption.centered { text-align: center; }
/* ============================================================================
11 TL;DR callout
============================================================================ */
/* TL;DR */
.tldr {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--accent-primary);
border-radius: 0 14px 14px 0;
padding: 1.15rem 1.4rem;
margin: 0.5rem 0 4.5rem;
color: var(--text-soft);
font-size: 1.05rem;
line-height: 1.65;
text-align: left;
}
.tldr .tldr-label {
font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
color: var(--accent-primary); font-weight: 600; margin-right: 0.3rem;
}
/* ============================================================================
12 Stats tiles
============================================================================ */
/* Stats */
.stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1rem; margin: 2rem 0;
}
.stat {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 1.25rem 0.75rem;
text-align: center;
backdrop-filter: blur(10px);
transition: border-color 0.25s, transform 0.25s;
}
.stat:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.stat .n {
font-family: var(--font-body); font-style: italic; font-weight: 500;
font-size: 2.1rem; line-height: 1;
color: var(--accent-primary);
text-shadow: 0 0 30px var(--accent-glow);
}
.stat .l { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.4rem; font-family: var(--font-display); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }
/* ============================================================================
13 Pipeline stepper
============================================================================ */
/* Pipeline */
.pipeline {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 1rem; margin: 2rem 0;
}
.step {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 1.4rem 1.2rem;
backdrop-filter: blur(10px);
transition: border-color 0.25s, transform 0.25s;
}
.step:hover { border-color: var(--glass-border-strong); transform: translateY(-3px); }
.step .num {
font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em;
color: var(--accent-primary); font-weight: 600; margin-bottom: 0.6rem;
}
.step h4 {
font-family: var(--font-display); font-size: 1rem; font-weight: 500;
color: var(--text-main); margin-bottom: 0.4rem;
}
.step p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; font-family: var(--font-body); }
@media (max-width: 760px) { .pipeline { grid-template-columns: 1fr; } }
/* ============================================================================
10 Video (YouTube facade)
============================================================================ */
/* Video */
.publication-video { max-width: 960px; margin: 0 auto; }
.iframe-container {
position: relative; padding-top: 56.25%;
border-radius: 14px; overflow: hidden;
border: 1px solid var(--glass-border);
background: #000;
}
.iframe-container iframe {
position: absolute; inset: 0;
width: 100% !important; height: 100% !important; border: 0 !important;
}
/* ============================================================================
19 Link list (legacy)
============================================================================ */
/* Code/Data link list */
/* ============================================================================
18 Code & Data resource grid
============================================================================ */
/* Code & Data — three-column resource grid */
.resource-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1rem 0;
}
.resource-col {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 1rem;
backdrop-filter: blur(10px);
display: flex; flex-direction: column; gap: 0.5rem;
}
.resource-col .rc-head {
display: flex; align-items: center; gap: 0.55rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-primary);
padding-bottom: 0.55rem;
margin-bottom: 0.3rem;
border-bottom: 1px solid var(--glass-border);
}
.rc-head .rc-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
background: rgba(212,160,58,0.1);
border: 1px solid rgba(212,160,58,0.3);
border-radius: 6px;
font-size: 0.78rem;
}
.rc-chip {
display: flex; flex-direction: column;
padding: 0.55rem 0.8rem;
background: rgba(255,255,255,0.02);
border: 1px solid var(--glass-border);
border-radius: 10px;
text-decoration: none !important;
transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.rc-chip:hover {
border-color: var(--glass-border-strong);
background: rgba(212,160,58,0.06);
transform: translateY(-1px);
}
.rc-chip .rc-name {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
color: var(--text-main) !important;
line-height: 1.25;
}
.rc-chip .rc-sub {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--text-dim);
margin-top: 0.15rem;
}
.rc-chip:hover .rc-name { color: var(--accent-primary) !important; }
@media (max-width: 900px) { .resource-grid { grid-template-columns: 1fr; } }
.links-list { list-style: none; margin: 1rem 0; padding: 0; }
.links-list li {
display: grid; grid-template-columns: minmax(160px, max-content) 1fr;
gap: 1.5rem; padding: 1rem 0;
border-bottom: 1px solid var(--glass-border);
align-items: baseline;
}
.links-list li:last-child { border-bottom: 0; }
.links-list .label { font-family: var(--mono); font-size: 0.88rem; }
.links-list .label a { color: var(--accent-primary) !important; }
.links-list .desc { font-size: 0.95rem; color: var(--text-dim); font-family: var(--font-body); }
@media (max-width: 560px) { .links-list li { grid-template-columns: 1fr; gap: 0.25rem; } }
/* ============================================================================
21 BibTeX block
============================================================================ */
/* BibTeX */
.bib-container pre {
background: rgba(0,0,0,0.35) !important;
border: 1px solid var(--glass-border) !important;
border-left: 3px solid var(--accent-primary) !important;
border-radius: 0 14px 14px 0 !important;
padding: 1.1rem 1.3rem !important;
color: var(--text-soft) !important;
font-family: var(--mono) !important;
font-size: 0.85rem !important;
line-height: 1.65 !important;
position: relative;
}
.bib-container pre code { color: var(--text-soft) !important; background: transparent !important; }
#copy-btn {
position: absolute; top: 0.55rem; right: 0.55rem;
background: rgba(255,255,255,0.05);
border: 1px solid var(--glass-border);
border-radius: 6px; padding: 0.35rem 0.7rem;
color: var(--text-dim); cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s;
font-family: var(--font-display); font-size: 0.78rem;
letter-spacing: 0.08em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 0.35rem;
}
#copy-btn .copy-label { display: inline; }
#copy-btn:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.copy-highlight { color: inherit !important; }
/* ============================================================================
23 Footer
============================================================================ */
/* Footer */
.footer {
background: transparent !important;
border-top: 1px solid var(--glass-border);
color: var(--text-faint) !important;
padding: 2.5rem 1.5rem;
font-family: var(--mono);
font-size: 0.82rem;
letter-spacing: 0.05em;
}
.footer a { color: var(--text-dim) !important; }
/* Utility: soft section divider */
.section-divider {
border: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--glass-border) 30%, var(--glass-border) 70%, transparent);
margin: 1rem 0;
}
/* ============================================================================
07 Progress sidebar + pill TOC
============================================================================ */
/* Progress sidebar (lap-vla style) */
.progress-sidebar {
position: fixed;
left: 28px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
display: none;
}
@media (min-width: 1200px) {
.progress-sidebar {
display: flex; flex-direction: column; align-items: flex-start;
}
.page-nav { display: none !important; }
}
.progress-track {
position: relative;
display: flex; flex-direction: column; align-items: flex-start;
}
.progress-line {
position: absolute;
left: 7px; top: 22px; bottom: 22px;
width: 2px;
background: var(--glass-border);
z-index: 0;
}
.progress-line-fill {
position: absolute;
left: 7px; top: 22px;
width: 2px; height: 0;
background: var(--accent-primary);
box-shadow: 0 0 8px var(--accent-glow);
z-index: 1;
transition: height 0.25s ease;
}
.progress-item {
position: relative; z-index: 2;
padding: 8px 0;
}
.progress-item a {
display: flex; align-items: center; gap: 14px;
text-decoration: none;
padding: 8px 6px 8px 0; /* WCAG 44px tap target via padding */
border-radius: 999px;
}
.progress-item a:hover { background: rgba(212,160,58,0.06); }
.progress-dot {
width: 16px; height: 16px; border-radius: 50%;
background: var(--bg-dark);
border: 2px solid var(--glass-border);
transition: all 0.25s ease;
flex-shrink: 0;
margin-left: 0;
}
.progress-item.passed .progress-dot {
background: var(--accent-primary);
border-color: var(--accent-primary);
}
.progress-item.active .progress-dot {
background: var(--accent-primary);
border-color: var(--accent-primary);
box-shadow: 0 0 0 5px rgba(212,160,58,0.2), 0 0 12px var(--accent-glow);
}
.progress-label {
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 500;
color: var(--text-dim);
white-space: nowrap;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 1; /* always visible for discoverability */
transition: color 0.2s ease;
}
.progress-item:hover .progress-label { color: var(--text-main); }
.progress-item.active .progress-label { color: var(--accent-primary); }
/* In-page nav — sticky, translucent (mobile / narrow) */
.page-nav {
position: sticky; top: 0; z-index: 40;
display: flex; justify-content: center; flex-wrap: wrap;
gap: 0.25rem 0.5rem;
margin: 1rem auto 2rem;
padding: 0.55rem 0.6rem;
background: rgba(10,14,20,0.75);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 100px;
max-width: max-content;
}
@media (prefers-color-scheme: light) {
.page-nav { background: rgba(250,249,247,0.8); }
}
.page-nav a {
color: var(--text-dim) !important;
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 500;
padding: 0.35rem 0.85rem;
border-radius: 100px;
text-decoration: none;
transition: color 0.2s, background 0.2s;
}
.page-nav a:hover {
color: var(--accent-primary) !important;
background: rgba(212,160,58,0.08);
}
.page-nav a.active {
color: var(--accent-primary) !important;
background: rgba(212,160,58,0.12);
}
@media (max-width: 560px) {
.page-nav { border-radius: 14px; }
.page-nav a { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
}
/* Tighter section rhythm for low-mental-load flow */
.section { padding: 2.5rem 1.5rem; }
.section + .section { padding-top: 2rem; }
/* First .section after the hero — pull it up so the TL;DR sits close */
.hero + .section { padding-top: 0.75rem; }
h2.title.is-3 { margin-bottom: 1.25rem !important; font-size: 1.75rem !important; }
/* Consistent figure spacing */
.paper-fig { margin-top: 0.5rem; cursor: zoom-in; }
/* ============================================================================
17 Results section containers
============================================================================ */
/* Results section — unified visual rhythm */
.results-sub {
text-align: center;
font-family: var(--font-body);
font-style: italic;
font-size: 1rem;
color: var(--text-dim);
margin: -0.25rem auto 2rem;
letter-spacing: 0.01em;
}
.result-block {
margin: 2.25rem 0;
padding-top: 1.25rem;
border-top: 1px solid var(--glass-border);
}
.result-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 1rem; }
.result-eyebrow {
display: inline-flex; align-items: center; gap: 0.55rem;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 1.1rem;
}
.result-eyebrow .rb-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent-primary);
box-shadow: 0 0 10px var(--accent-glow);
}
.result-grid {
display: grid;
grid-template-columns: minmax(240px, 300px) 1fr;
gap: 1.5rem;
align-items: stretch;
}
.result-grid .kpi-card { margin: 0; }
.result-grid .result-fig { margin: 0; display: flex; flex-direction: column; }
.result-grid .result-fig .paper-fig { margin: 0; flex: 1; display: flex; align-items: center; }
.result-grid .result-fig .paper-fig img { width: 100%; height: auto; }
.result-grid .result-fig figcaption { margin-top: 0.7rem; }
/* Hero KPI — polished editorial callout */
.kpi-card-hero {
display: flex; flex-direction: column;
padding: 1.5rem 1.35rem;
gap: 0.55rem;
position: relative;
background:
radial-gradient(120% 60% at 50% -20%, rgba(212,160,58,0.12), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 18px;
overflow: hidden;
}
.kpi-card-hero::before {
/* thin gold hairline along the top */
content: "";
position: absolute; inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
opacity: 0.5;
}
.kpi-card-hero .kpi-tag {
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-primary);
}
.kpi-card-hero .kpi-stat {
display: flex; align-items: baseline;
gap: 0.6rem;
margin: 0.2rem 0 0.1rem;
}
.kpi-card-hero .kpi-big {
font-family: var(--font-display);
font-size: 4rem;
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--accent-primary);
text-shadow: 0 0 40px var(--accent-glow);
}
.kpi-card-hero .kpi-big .kpi-x {
font-size: 0.55em;
font-weight: 500;
margin-left: 0.05em;
opacity: 0.85;
}
.kpi-card-hero .kpi-delta {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--accent-primary);
padding: 0.18rem 0.55rem;
border: 1px solid rgba(212,160,58,0.35);
border-radius: 999px;
background: rgba(212,160,58,0.08);
letter-spacing: 0.04em;
}
.kpi-card-hero .kpi-title {
font-family: var(--font-display);
font-size: 0.92rem;
font-weight: 500;
color: var(--text-soft);
letter-spacing: -0.005em;
margin-top: 0.2rem;
}
.kpi-card-hero .kpi-bar {
display: flex;
height: 6px;
background: rgba(255,255,255,0.04);
border-radius: 999px;
overflow: hidden;
margin: 0.5rem 0 0.25rem;
}
.kpi-card-hero .kpi-ba {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem;
font-family: var(--mono);
font-size: 0.82rem;
}
.kpi-card-hero .kpi-ba-l,
.kpi-card-hero .kpi-ba-r {
display: inline-flex; flex-direction: column;
line-height: 1.1;
color: var(--text-faint);
}
.kpi-card-hero .kpi-ba-l em,
.kpi-card-hero .kpi-ba-r em {
font-style: normal;
font-size: 0.62rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 0.15rem;
}
.kpi-card-hero .kpi-ba-r { align-items: flex-end; color: var(--accent-primary); }
.kpi-card-hero .kpi-ba-r b {
font-weight: 600;
font-size: 1rem;
color: var(--accent-primary);
text-shadow: 0 0 14px var(--accent-glow);
}
.kpi-card-hero .kpi-ba-arrow {
color: var(--accent-primary);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
align-self: flex-end;
line-height: 1;
opacity: 0.8;
}
/* Figure side: refined frame + caption */
.result-grid .result-fig .paper-fig {
border: 1px solid var(--glass-border);
border-radius: 14px;
overflow: hidden;
background: var(--glass-bg);
transition: border-color 0.25s, transform 0.25s;
}
.result-grid .result-fig .paper-fig:hover {
border-color: var(--glass-border-strong);
transform: translateY(-2px);
}
.result-grid .result-fig figcaption b { color: var(--text-main); font-weight: 600; }
@media (max-width: 900px) {
.result-grid { grid-template-columns: 1fr; }
.kpi-card-hero .kpi-big { font-size: 3.2rem; }
}
/* Results — editorial lede above KPIs */
.outcome-lede-wrap {
max-width: 780px;
margin: 1rem auto 2rem;
text-align: center;
position: relative;
padding-top: 1.25rem;
}
.outcome-lede-wrap::before {
content: "";
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 44px; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
opacity: 0.7;
}
.outcome-kicker {
display: inline-block;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 0.75rem;
}
.outcome-lede {
font-family: var(--font-body);
font-size: 1.15rem;
line-height: 1.65;
color: var(--text-soft);
font-weight: 400;
letter-spacing: 0.005em;
margin: 0;
}
.outcome-lede em {
font-style: italic;
color: var(--text-main);
font-weight: 400;
}
.outcome-lede b {
color: var(--accent-primary);
font-weight: 500;
text-shadow: 0 0 16px var(--accent-glow);
}
/* Results — editorial pull-quote */
.outcome-quote {
position: relative;
max-width: 900px;
margin: 1.5rem auto 2rem;
padding: 1.75rem 2.25rem;
background:
linear-gradient(180deg, rgba(212,160,58,0.04), transparent 60%),
var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 18px;
backdrop-filter: blur(12px);
}
.outcome-quote::before, .outcome-quote::after {
content: "";
position: absolute;
left: 50%; transform: translateX(-50%);
height: 2px; width: 56px;
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
opacity: 0.8;
}
.outcome-quote::before { top: 0; }
.outcome-quote::after { bottom: 0; }
.outcome-quote blockquote {
margin: 0;
font-family: var(--font-body);
font-size: 1.2rem;
line-height: 1.7;
color: var(--text-soft);
text-align: center;
font-weight: 300;
}
.outcome-quote b { color: var(--text-main); font-weight: 600; }
.oq-tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--accent-primary);
padding: 0.12rem 0.55rem;
border: 1px solid rgba(212,160,58,0.35);
border-radius: 6px;
background: rgba(212,160,58,0.05);
vertical-align: baseline;
margin: 0 0.1rem;
}
.oq-metric {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.01em;
padding: 0.05rem 0.35rem;
border-radius: 4px;
margin: 0 0.1rem;
}
.oq-before { color: var(--text-faint); }
.oq-after {
color: var(--accent-primary);
text-shadow: 0 0 18px var(--accent-glow);
}
.oq-arrow {
color: var(--accent-primary);
font-weight: 700;
margin: 0 0.15rem;
}
.oq-big {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.7rem;
color: var(--accent-primary);
text-shadow: 0 0 28px var(--accent-glow);
letter-spacing: -0.02em;
line-height: 0.9;
margin: 0 0.15rem;
vertical-align: -0.1em;
}
@media (max-width: 720px) {
.outcome-quote { padding: 1.25rem 1.25rem; }
.outcome-quote blockquote { font-size: 1.05rem; line-height: 1.7; }
.oq-big { font-size: 1.4rem; }
}
/* Before → after banner */
.ba-banner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.25rem;
max-width: 920px;
margin: 1rem auto 2rem;
padding: 1.5rem 1.25rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
backdrop-filter: blur(10px);
}
.ba-side { text-align: center; }
.ba-label {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 0.35rem;
}
.ba-score {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.8rem;
line-height: 1;
color: var(--text-faint);
letter-spacing: -0.02em;
}
.ba-after .ba-score {
color: var(--accent-primary);
text-shadow: 0 0 30px var(--accent-glow);
}
.ba-sub {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text-dim);
margin-top: 0.35rem;
}
.ba-delta {
display: inline-block;
font-family: var(--mono);
font-size: 1rem;
color: var(--accent-primary);
vertical-align: super;
margin-left: 0.15rem;
}
.ba-arrow {
display: flex; align-items: center; flex-direction: column;
color: var(--accent-primary);
gap: 0.3rem;
min-width: 150px;
}
.ba-arrow-tag {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-primary);
}
.ba-arrow-line {
display: block;
width: 80%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}
.ba-arrow-head {
font-size: 1.5rem;
color: var(--accent-primary);
display: none; /* only shown on mobile where arrow rotates */
}
@media (max-width: 720px) {
.ba-banner { grid-template-columns: 1fr; }
.ba-arrow { flex-direction: row; }
.ba-arrow-line { display: none; }
.ba-arrow-head { display: inline; }
}
/* ============================================================================
12 KPI cards (Results)
============================================================================ */
/* Results — KPI tiles (v2: tag + big stat + bar + before→after + note) */
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin: 1.25rem 0 2rem;
}
.kpi-card {
background:
linear-gradient(180deg, rgba(212,160,58,0.05), transparent 60%),
var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 1.3rem 1.25rem 1.2rem;
backdrop-filter: blur(12px);
display: flex; flex-direction: column; gap: 0.6rem;
transition: border-color 0.25s, transform 0.25s;
text-align: left;
position: relative;
}
.kpi-card:hover { border-color: var(--glass-border-strong); transform: translateY(-3px); }
.kpi-tag {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-primary);
}
.kpi-headline {
display: flex; align-items: baseline; gap: 0.5rem;
margin-top: -0.1rem;
}
.kpi-big {
font-family: var(--font-display);
font-size: 2.3rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--accent-primary);
text-shadow: 0 0 28px var(--accent-glow);
line-height: 0.95;
}
.kpi-delta {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--text-dim);
padding: 0.15rem 0.5rem;
background: rgba(212,160,58,0.08);
border: 1px solid rgba(212,160,58,0.22);
border-radius: 999px;
}
.kpi-title {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 500;
color: var(--text-main);
letter-spacing: -0.005em;
}
/* Progress-style before→after bar */
.kpi-bar {
display: flex;
height: 6px;
border-radius: 999px;
background: rgba(255,255,255,0.04);
overflow: hidden;
margin: 0.1rem 0 0.15rem;
}
.kpi-bar-seg { display: block; height: 100%; }
.kpi-bar-before { background: var(--text-faint); }
.kpi-bar-after {
background: var(--accent-primary);
box-shadow: 0 0 10px var(--accent-glow);
}
.kpi-bar-empty { background: transparent; }
.kpi-ba {
font-family: var(--mono);
font-size: 0.82rem;
color: var(--text-dim);
display: flex; align-items: baseline; gap: 0.5rem;
}
.kpi-ba .kpi-ba-arrow { color: var(--accent-primary); font-weight: 600; }
.kpi-ba .kpi-ba-hi {
color: var(--accent-primary);
font-weight: 600;
text-shadow: 0 0 12px var(--accent-glow);
}
.kpi-note {
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.45;
color: var(--text-dim);
margin-top: auto;
padding-top: 0.2rem;
}
.kpi-note i { color: var(--text-soft); font-style: italic; }
.kpi-row-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.kpi-row-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-row-solo { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
.kpi-row, .kpi-row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
.kpi-row, .kpi-row-2, .kpi-row-3 { grid-template-columns: 1fr; }
}
/* SceneReplica results table — clean, restrained */
.scene-table-wrap { overflow-x: auto; margin: 1rem 0; }
.scene-table {
width: 100%; border-collapse: collapse;
font-size: 0.95rem;
}
.scene-table th, .scene-table td {
padding: 0.75rem 0.9rem;
text-align: left;
border-bottom: 1px solid var(--glass-border);
}
.scene-table th {
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 0.04em;
}
.scene-table th.num, .scene-table td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.scene-table td { color: var(--text-soft); font-family: var(--font-body); }
.scene-table tbody tr:last-child td { border-bottom: 0; }
.scene-table tr.scene-highlight { background: rgba(212,160,58,0.05); }
.scene-table tr.scene-highlight td { color: var(--text-main); }
.scene-table .delta {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--accent-primary);
margin-left: 0.35rem;
}
.scene-table .rowtype {
display: block;
font-family: var(--font-body);
color: var(--text-soft);
}
.scene-table .rowtag {
display: inline-block;
margin-top: 0.15rem;
font-family: var(--mono);
font-size: 0.7rem;
color: var(--text-dim);
letter-spacing: 0.04em;
}
.scene-table .rowtag.ours {
color: var(--accent-primary);
font-weight: 600;
}
/* ============================================================================
14 Metric bar cards
============================================================================ */
/* SceneReplica metric cards — visual bar comparison */
.metric-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.metric-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 1.1rem 1.2rem;
backdrop-filter: blur(10px);
}
.metric-hd {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 0.9rem;
}
.metric-name {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
}
.metric-scale {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--text-faint);
letter-spacing: 0.1em;
}
.metric-rows { display: flex; flex-direction: column; gap: 0.55rem; }
.mrow {
display: grid;
grid-template-columns: minmax(130px, 1fr) 1.5fr 56px;
align-items: center;
gap: 0.65rem;
font-family: var(--font-body);
font-size: 0.88rem;
}
.mrow-l {
color: var(--text-dim);
line-height: 1.3;
}
.mrow-l em { color: var(--text-faint); font-style: italic; font-size: 0.82em; }
.mrow-l b { color: var(--text-main); font-weight: 600; }
.mrow-l .mrow-sub {
display: inline-block;
margin-left: 0.45rem;
padding: 0.08rem 0.35rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
color: var(--text-faint);
border: 1px solid var(--glass-border);
border-radius: 4px;
vertical-align: 0.05em;
opacity: 0.7;
}
.mrow:hover .mrow-sub { opacity: 1; color: var(--text-dim); }
.mrow-bar {
position: relative;
height: 8px;
background: rgba(255,255,255,0.04);
border-radius: 999px;
overflow: hidden;
}
.mrow-bar i {
display: block;
height: 100%;
background: var(--text-faint);
border-radius: 999px;
transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mrow-v {
font-family: var(--mono);
font-size: 0.85rem;
color: var(--text-soft);
text-align: right;
white-space: nowrap;
}
.mrow-ours .mrow-bar i {
background: var(--accent-primary);
box-shadow: 0 0 14px var(--accent-glow);
}
.mrow-ours .mrow-v {
color: var(--accent-primary);
font-weight: 600;
}
.mrow-ours .delta {
display: inline-block;
font-family: var(--mono);
font-size: 0.7rem;
color: var(--accent-primary);
padding: 0 0.35rem;
border: 1px solid rgba(212,160,58,0.35);
border-radius: 999px;
margin-left: 0.15rem;
}
@media (max-width: 860px) {
.metric-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.mrow { grid-template-columns: 1fr; }
.mrow-v { text-align: left; }
}
/* ============================================================================
22 Real-robot walkthrough caption
============================================================================ */
/* Real-robot figure walkthrough — 6 stage labels inline */
.rr-walkthrough {
display: flex; flex-wrap: wrap;
gap: 0.35rem 0.8rem;
margin: 0.5rem 0;
font-family: var(--font-body);
font-size: 0.88rem;
color: var(--text-dim);
}
.rr-walkthrough > span {
display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.rr-walkthrough em {
font-family: var(--mono);
font-style: normal;
font-size: 0.75rem;
color: var(--accent-primary);
letter-spacing: 0.05em;
text-transform: lowercase;
}
/* ============================================================================
13 Real-robot pipeline stepper
============================================================================ */
/* Real-robot pipeline stepper */
.rr-pipeline {
list-style: none; padding: 0;
margin: 1rem 0 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2.5rem; /* gap is 2.5rem · connector uses ~1.5rem of it, leaves clear breathing on both sides */
align-items: stretch;
counter-reset: rr;
position: relative;
}
.rr-pipeline li {
position: relative;
display: flex; flex-direction: column; gap: 0.25rem;
padding: 0.85rem 0.9rem;
background: var(--glass-bg);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
backdrop-filter: blur(10px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s, background 0.25s;
}
/* Gold underline bar — grows on hover to make the bottom edge unmistakable.
Note: we can't use overflow:hidden here because the connector arrow
(li+li::before) lives outside the card. Rounding the bar manually keeps
it visually flush with the card's bottom corners. */
.rr-pipeline li::after {
content: "";
position: absolute;
left: 1px; right: 1px; /* sit inside the 1px border */
bottom: 0;
height: 0;
background: var(--accent-primary);
border-radius: 0 0 11px 11px;
box-shadow: 0 0 14px var(--accent-glow);
transition: height 0.25s ease;
pointer-events: none;
}
.rr-pipeline li:hover {
border-color: rgba(212, 160, 58, 0.5);
background: var(--glass-bg-strong);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(212, 160, 58, 0.22);
}
.rr-pipeline li:hover::after { height: 3px; }
/* Connector: a thin gold hairline spanning the gap, with an arrow head.
Rendered as two layered pseudo-elements on each non-first card. */
/* Connector — single inline SVG masked arrow (thin stroked line + open
chevron tip). Rendered via CSS mask so the colour follows the accent
palette. Vector, so it stays crisp on any DPI. */
.rr-pipeline li + li::before {
/* Gap = 2.5rem, arrow width = 1.6rem → 0.45rem buffer each side (centered). */
content: "";
position: absolute;
top: 50%;
right: calc(100% + 0.45rem);
width: 1.6rem;
height: 10px;
transform: translateY(-50%);
background: var(--accent-primary);
-webkit-mask:
url("data:image/svg+xml;utf8,")
center / contain no-repeat;
mask:
url("data:image/svg+xml;utf8,")
center / contain no-repeat;
opacity: 0.8;
filter: drop-shadow(0 0 5px var(--accent-glow));
pointer-events: none;
transition: opacity 0.25s, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
z-index: 1;
}
/* subtle motion on hover — the line leans forward */
.rr-pipeline li + li:hover::before,
.rr-pipeline li:hover + li::before {
opacity: 1;
transform: translate(2px, -50%);
}
.rr-pipeline .rr-n {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.2em;
color: var(--accent-primary);
font-weight: 600;
}
.rr-pipeline .rr-t {
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: 500;
line-height: 1.3;
color: var(--text-soft);
}
.rr-pipeline li.rr-hi {
background:
linear-gradient(180deg, rgba(212,160,58,0.12), rgba(212,160,58,0.04));
border-color: rgba(212,160,58,0.45);
box-shadow: 0 0 0 1px rgba(212,160,58,0.08) inset;
}
.rr-pipeline li.rr-hi:hover {
background:
linear-gradient(180deg, rgba(212,160,58,0.18), rgba(212,160,58,0.06));
border-color: var(--accent-primary);
box-shadow: 0 6px 22px rgba(212,160,58,0.22), 0 0 0 1px rgba(212,160,58,0.15) inset;
}
.rr-pipeline li.rr-hi .rr-t { color: var(--text-main); font-weight: 600; }
@media (max-width: 900px) {
.rr-pipeline { grid-template-columns: 1fr 1fr; }
.rr-pipeline li + li::before { display: none; }
}
@media (max-width: 480px) { .rr-pipeline { grid-template-columns: 1fr; } }
/* ============================================================================
16 Dataset snapshot tiles
============================================================================ */
/* Dataset snapshot — stat tiles + split explainers */
.ds-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0.8rem;
margin: 0.75rem 0 1.25rem;
}
.ds-stat {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 1rem 1rem 0.9rem;
backdrop-filter: blur(10px);
}
.ds-stat .ds-n {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.65rem;
line-height: 1.05;
color: var(--accent-primary);
letter-spacing: -0.02em;
text-shadow: 0 0 22px var(--accent-glow);
}
.ds-stat .ds-l {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 500;
color: var(--text-main);
margin-top: 0.2rem;
}
.ds-stat .ds-sub {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.05em;
color: var(--text-dim);
margin-top: 0.25rem;
}
@media (max-width: 860px) { .ds-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ds-stats { grid-template-columns: 1fr; } }
.ds-splits {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0.85rem;
}
.ds-split {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--accent-primary);
border-radius: 0 12px 12px 0;
padding: 0.85rem 1.1rem;
}
.ds-split-tag {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 0.25rem;
}
.ds-split-body {
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--text-soft);
line-height: 1.5;
}
@media (max-width: 720px) { .ds-splits { grid-template-columns: 1fr; } }
/* ============================================================================
20 Acknowledgements
============================================================================ */
/* Acknowledgements — sponsor grid */
.ack-eyebrow {
text-align: center;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-dim);
margin: 1.5rem 0 1.25rem;
}
.ack-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
width: 100%;
margin: 0;
}
.ack-row {
max-width: 820px;
margin: 0 auto;
display: flex; flex-direction: column;
gap: 0.4rem;
}
.ack-item {
display: flex; align-items: center;
gap: 0.9rem;
padding: 0.85rem 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
transition: border-color 0.25s, background 0.25s;
}
.ack-item:hover { border-color: var(--glass-border-strong); background: var(--glass-bg-strong); }
.ack-name {
font-family: var(--font-display);
font-size: 1.02rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-main);
min-width: 72px;
}
.ack-dot {
width: 4px; height: 4px; border-radius: 50%;
background: var(--accent-primary);
box-shadow: 0 0 6px var(--accent-glow);
flex-shrink: 0;
}
.ack-desc {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--text-soft);
flex: 1;
line-height: 1.4;
}
.ack-grant {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--accent-primary);
padding: 0.2rem 0.6rem;
border: 1px solid rgba(212,160,58,0.3);
border-radius: 999px;
background: rgba(212,160,58,0.06);
letter-spacing: 0.04em;
white-space: nowrap;
}
@media (max-width: 640px) {
.ack-item { flex-wrap: wrap; gap: 0.4rem 0.7rem; }
.ack-desc { flex: 1 1 100%; }
}
.ack-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 1.35rem 1.25rem 1.1rem;
text-align: center;
backdrop-filter: blur(10px);
transition: border-color 0.25s, transform 0.25s;
}
.ack-card:hover {
border-color: var(--glass-border-strong);
transform: translateY(-2px);
}
.ack-card .ack-org {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-main);
margin-bottom: 0.3rem;
}
.ack-card .ack-prog {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text-soft);
line-height: 1.45;
margin: 0;
}
.ack-card .ack-id {
display: inline-block;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--accent-primary);
padding: 0.22rem 0.6rem;
border: 1px solid rgba(212,160,58,0.3);
border-radius: 999px;
background: rgba(212,160,58,0.06);
letter-spacing: 0.05em;
margin-top: 0.15rem;
}
.ack-thanks {
text-align: center;
font-family: var(--font-body);
font-size: 0.98rem;
color: var(--text-soft);
margin: 2rem auto 0;
max-width: 720px;
font-style: italic;
}
@media (max-width: 760px) {
.ack-grid { grid-template-columns: 1fr; }
}
/* ============================================================================
15 FS3 single-row flow
============================================================================ */
/* FS3 single-row flow — 3 equal columns that NEVER overflow the
container. Images are scaled to fit their column, never cropped. */
.fs3-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto auto;
column-gap: 1rem;
row-gap: 0;
margin: 1.25rem 0 0;
width: 100%;
}
.fs3-step {
margin: 0;
display: contents;
}
.fs3-step > .fs3-head { grid-row: 1; align-self: end; margin-bottom: 0.5rem; min-width: 0; }
.fs3-step > .paper-fig { grid-row: 2; align-self: center; min-width: 0; width: 100%; }
.fs3-step > figcaption { grid-row: 3; margin-top: 0.6rem; align-self: start; min-width: 0; }
.fs3-step .fs3-head {
display: flex; align-items: center; gap: 0.55rem;
margin-bottom: 0.5rem;
}
.fs3-step .fs3-num {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.2em;
color: var(--accent-primary);
background: rgba(212,160,58,0.08);
border: 1px solid rgba(212,160,58,0.3);
border-radius: 5px;
padding: 0.18rem 0.45rem;
flex: 0 0 auto;
}
.fs3-step .fs3-name {
font-family: var(--font-display);
font-size: 0.92rem;
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs3-step .paper-fig {
margin: 0;
background: transparent;
border-radius: 10px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
width: 100%;
height: 220px; /* uniform rendered height for all three */
}
.fs3-step .paper-fig img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto; /* contain within the 220px box, no crop */
object-fit: contain;
}
.fs3-step figcaption {
margin-top: 0.55rem;
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text-dim);
line-height: 1.5;
max-width: 340px;
}
/* Stack vertically on narrow screens (keeps readability) */
@media (max-width: 900px) {
.fs3-flow {
grid-auto-flow: row;
grid-auto-columns: auto;
grid-template-rows: none;
row-gap: 1.5rem;
}
.fs3-step { display: flex; flex-direction: column; }
.fs3-step .paper-fig img { height: auto; width: 100%; }
.fs3-step figcaption { max-width: 100%; }
}
.fig-caption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-dim); }
/* YouTube facade — click-to-play, avoids loading 500kB on first paint */
.yt-facade {
position: relative;
padding-top: 56.25%;
border-radius: 14px; overflow: hidden;
border: 1px solid var(--glass-border);
background: #000;
cursor: pointer;
}
.yt-facade img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.yt-facade::after {
content: "";
position: absolute; top: 50%; left: 50%;
width: 78px; height: 78px;
transform: translate(-50%, -50%);
background: var(--accent-primary);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(212,160,58,0.5);
transition: transform 0.2s, box-shadow 0.2s;
}
.yt-facade::before {
content: "";
position: absolute; top: 50%; left: 50%;
transform: translate(-40%, -50%);
border-style: solid;
border-width: 16px 0 16px 26px;
border-color: transparent transparent transparent var(--bg-dark);
z-index: 2;
}
.yt-facade:hover::after,
.yt-facade:focus-visible::after {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 0 0 10px rgba(212,160,58,0.15);
}
/* Once the iframe is injected, suppress the decorative play button and the
click affordance. `:has()` avoids a JS class swap. `.is-playing` is the
fallback class the JS also sets, for browsers without :has() support. */
.yt-facade:has(iframe)::before,
.yt-facade:has(iframe)::after,
.yt-facade.is-playing::before,
.yt-facade.is-playing::after { content: none; }
.yt-facade:has(iframe),
.yt-facade.is-playing { cursor: default; }
/* Lightbox for figures */
.lightbox {
position: fixed; inset: 0;
background: rgba(8,10,14,0.92);
backdrop-filter: blur(6px);
z-index: 9000;
display: none;
align-items: center; justify-content: center;
padding: 2rem;
cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.lightbox-close {
position: absolute; top: 18px; right: 22px;
background: transparent; border: 1px solid rgba(255,255,255,0.3);
color: var(--text-main); font-size: 1.4rem; line-height: 1;
width: 40px; height: 40px; border-radius: 50%;
cursor: pointer;
}
.lightbox-close:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
/* ============================================================================
Conference acceptance — a single pill, clearly part of the page's theme
============================================================================ */
.venue-line {
display: flex;
width: max-content;
max-width: 100%;
margin: 1.4rem auto 0.25rem;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 1.15rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 999px;
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--text-main);
letter-spacing: 0.005em;
backdrop-filter: blur(10px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.venue-line em {
font-family: var(--font-body);
font-style: italic;
color: var(--text-soft);
font-weight: 400;
}
.venue-line b {
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 600;
color: var(--accent-primary);
padding: 0.15rem 0.55rem;
border: 1px solid rgba(212, 160, 58, 0.4);
border-radius: 999px;
background: rgba(212, 160, 58, 0.08);
letter-spacing: 0.08em;
white-space: nowrap;
}
.venue-line .venue-dot {
color: var(--accent-primary);
opacity: 0.7;
}
/* ============================================================================
Shared: abstract prose + dataset highlight chips
============================================================================ */
.abstract-prose {
max-width: 880px;
margin: 0.5rem auto 0;
}
.abstract-prose p {
font-size: 1rem;
line-height: 1.75;
color: var(--text-soft);
}
.abstract-prose b {
color: var(--text-main);
font-weight: 600;
}
.abstract-chips {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 0.5rem;
margin: 1.25rem auto 0;
max-width: 820px;
}
.abstract-chips .chip {
font-family: var(--mono);
font-size: 0.74rem;
letter-spacing: 0.08em;
color: var(--accent-primary);
padding: 0.28rem 0.7rem;
border: 1px solid rgba(212, 160, 58, 0.35);
border-radius: 999px;
background: rgba(212, 160, 58, 0.06);
}
/* ============================================================================
Shared: section lede + annotation picker row
============================================================================ */
.section-lede {
max-width: 720px;
margin: 0.75rem auto 1.25rem;
font-family: var(--font-body);
font-size: 1rem;
color: var(--text-dim);
text-align: center;
line-height: 1.55;
font-style: italic;
}
.annotation-picker {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 0.5rem;
margin: 0.5rem auto 1.5rem;
}
#annotations-span { display: block; margin-top: 0.5rem; }
/* ============================================================================
Shared: smooth annotation-picker content transition (FewSOL)
============================================================================ */
#annotations-span {
display: block;
opacity: 1;
transform: translateY(0);
transition:
opacity 300ms ease,
transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: opacity, transform;
}
#annotations-span.is-switching {
opacity: 0;
transform: translateY(8px);
}
#annotations-span img {
display: block;
width: 100%;
max-width: 860px;
height: 320px; /* uniform frame for all four annotation images */
margin: 0 auto;
object-fit: contain; /* preserve aspect; no crop, no stretch */
background: rgba(0, 0, 0, 0.35);
border-radius: 10px;
border: 1px solid var(--glass-border);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
@media (max-width: 720px) {
#annotations-span img { height: 220px; }
}
/* ============================================================================
Shared: data download row + tree block + notes
============================================================================ */
.download-row {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 0.6rem;
margin: 1rem auto 1.5rem;
}
.data-license, .data-note {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--text-soft);
line-height: 1.6;
max-width: 820px;
margin: 0.75rem auto;
text-align: left;
}
.data-note-hint {
font-style: italic;
color: var(--text-dim);
padding: 0.75rem 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--accent-primary);
border-radius: 0 10px 10px 0;
}
.data-note-hint b { color: var(--accent-primary); font-style: normal; }
.tree-block {
display: block;
max-width: 820px;
margin: 0.75rem auto 1rem;
padding: 1rem 1.2rem;
background: rgba(0,0,0,0.35);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--accent-primary);
border-radius: 0 10px 10px 0;
font-family: var(--mono);
font-size: 0.85rem;
line-height: 1.7;
color: var(--text-soft);
overflow-x: auto;
}
.tree-block code { color: inherit; background: transparent; font-family: inherit; }
.tree-readme { color: var(--accent-primary); font-weight: 600; }
/* 2-column variant of the Code & Data resource grid (e.g., FewSOL) */
.resource-grid.resource-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .resource-grid.resource-grid-2 { grid-template-columns: 1fr; } }
/* Collapsible folder-layout panel (FewSOL) */
.data-tree-details {
max-width: 820px;
margin: 1.25rem auto 0;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
overflow: hidden;
}
.data-tree-details summary {
display: flex; align-items: baseline; gap: 0.6rem;
padding: 0.8rem 1rem;
cursor: pointer;
list-style: none;
user-select: none;
transition: background 0.2s;
}
.data-tree-details summary::-webkit-details-marker { display: none; }
.data-tree-details summary::before {
content: "›";
color: var(--accent-primary);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
transition: transform 0.2s;
display: inline-block;
}
.data-tree-details[open] summary::before { transform: rotate(90deg); }
.data-tree-details summary:hover { background: var(--glass-bg-strong); }
.tree-summary-kicker {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-primary);
}
.tree-summary-hint {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text-dim);
}
.data-tree-details .tree-block {
margin: 0;
border: 0;
border-top: 1px solid var(--glass-border);
border-radius: 0;
background: rgba(0,0,0,0.25);
}
/* Single-card variant of the acknowledgements grid */
.ack-grid.ack-grid-1 {
grid-template-columns: minmax(240px, 360px);
justify-content: center;
}
/* ============================================================================
FAQ accordion (shared — used by Proto-CLIP)
============================================================================ */
.faq-list {
display: flex; flex-direction: column;
gap: 0.6rem;
max-width: 920px;
margin: 1rem auto 0;
}
.faq {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s, background 0.2s;
}
.faq[open] {
border-color: rgba(212, 160, 58, 0.35);
background: var(--glass-bg-strong);
}
.faq summary {
list-style: none;
cursor: pointer;
position: relative;
/* Extra left padding reserves space for the absolutely-positioned chevron.
Avoid display:flex here — flex would make every text fragment + inline
span a separate flex item, creating visible `gap` between them and the
small-caps names. Absolute chevron keeps the text flowing inline. */
padding: 0.95rem 1.1rem 0.95rem 2.3rem;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--text-main);
line-height: 1.5;
user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
content: "›";
position: absolute;
left: 1.15rem;
top: 50%;
color: var(--accent-primary);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
line-height: 1;
transform: translateY(-55%);
transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq[open] summary::before { transform: translateY(-55%) rotate(90deg); }
.faq summary:hover { background: rgba(212, 160, 58, 0.05); }
.faq-body {
padding: 0 1.1rem 1.1rem 2.35rem;
font-family: var(--font-body);
font-size: 0.96rem;
line-height: 1.65;
color: var(--text-soft);
}
.faq-body b { color: var(--text-main); }
@media (max-width: 560px) {
.faq-body { padding-left: 1.1rem; }
}
/* CLIP vs Proto-CLIP · a/b caption markers */
.tsne-marker { color: var(--accent-primary); font-weight: 700; margin-right: 0.35rem; }
.tsne-bad { color: var(--text-dim); }
.tsne-good { color: var(--text-main); }
/* ============================================================================
Real-world scene slider (Proto-CLIP) — polished carousel cards
============================================================================ */
.rw-scene-slider {
margin: 1.25rem 0 0;
padding: 0.5rem 0;
}
.rw-scene-slider .carousel {
overflow: visible; /* so card shadows aren't clipped */
}
.rw-scene-slider .card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
overflow: hidden;
margin: 0 0.35rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.rw-scene-slider .card:hover {
border-color: rgba(212, 160, 58, 0.4);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(212, 160, 58, 0.18);
}
.rw-scene-slider .card-image {
overflow: hidden;
background: #000;
}
.rw-scene-slider .carousel-img,
.rw-scene-slider .rn-scene-set-fig img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rw-scene-slider .card:hover .carousel-img {
transform: scale(1.015);
}
.rw-scene-slider .card-content {
padding: 0.85rem 1rem;
border-top: 1px solid var(--glass-border);
background: linear-gradient(180deg, rgba(212,160,58,0.05), transparent);
}
.rw-scene-slider .carousel-caption {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.12em;
color: var(--accent-primary);
text-align: center;
text-transform: uppercase;
}
/* Slider navigation — minimal custom-drawn chevrons in a frosted pill.
Hides the bulma-carousel default glyph and replaces with a CSS chevron
built from two rotated border edges, so the line weight is tunable. */
.rw-scene-slider .slider-navigation-previous,
.rw-scene-slider .slider-navigation-next {
width: 40px !important;
height: 40px !important;
background: rgba(14, 18, 26, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
opacity: 0.85 !important;
z-index: 10;
display: flex !important;
align-items: center;
justify-content: center;
transition: opacity 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
/* Hide default bulma-carousel icon */
.rw-scene-slider .slider-navigation-previous i,
.rw-scene-slider .slider-navigation-next i,
.rw-scene-slider .slider-navigation-previous svg,
.rw-scene-slider .slider-navigation-next svg { display: none !important; }
/* Draw crisp chevrons with rotated borders */
.rw-scene-slider .slider-navigation-previous::before,
.rw-scene-slider .slider-navigation-next::before {
content: "";
width: 9px; height: 9px;
border-right: 1.6px solid var(--accent-primary);
border-top: 1.6px solid var(--accent-primary);
display: inline-block;
transition: border-color 0.2s, transform 0.2s;
}
.rw-scene-slider .slider-navigation-previous::before { transform: translateX(2px) rotate(-135deg); }
.rw-scene-slider .slider-navigation-next::before { transform: translateX(-2px) rotate(45deg); }
.rw-scene-slider .slider-navigation-previous:hover,
.rw-scene-slider .slider-navigation-next:hover {
opacity: 1 !important;
background: rgba(14, 18, 26, 0.8) !important;
border-color: rgba(212, 160, 58, 0.45) !important;
transform: translateY(-1px);
}
.rw-scene-slider .slider-navigation-previous:hover::before { transform: translateX(0) rotate(-135deg); }
.rw-scene-slider .slider-navigation-next:hover::before { transform: translateX(0) rotate(45deg); }
/* Hide the default pagination dots entirely — the arrows are enough and the
bulma-carousel default bar adds visual noise. */
.rw-scene-slider .slider-pagination { display: none !important; }
/* ============================================================================
Demo section — scene tabs + video frame (Proto-CLIP)
============================================================================ */
.scene-tabs {
margin: 1.25rem auto 1.25rem;
display: flex;
justify-content: center;
}
.scene-tabs ul {
display: inline-flex; flex-wrap: wrap;
gap: 0.4rem;
list-style: none;
padding: 0.3rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.scene-tabs li { margin: 0; }
.scene-tabs li a {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 0.95rem;
border: 1px solid transparent;
border-radius: 8px;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 500;
color: var(--text-soft);
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.scene-tabs li a:hover {
background: rgba(212, 160, 58, 0.08);
color: var(--accent-primary);
border-color: rgba(212, 160, 58, 0.25);
}
.scene-tabs li.is-active a {
background: rgba(212, 160, 58, 0.15);
border-color: var(--accent-primary);
color: var(--accent-primary);
box-shadow: 0 0 14px var(--accent-glow);
}
.scene-tabs .scene-tag {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.15em;
color: var(--accent-primary);
opacity: 0.75;
}
.scene-tabs li.is-active .scene-tag { opacity: 1; }
.demo-video-wrap {
max-width: 1000px;
margin: 0 auto;
}
.demo-video-wrap .iframe-container,
.demo-video-wrap > .yt-facade {
position: relative;
padding-top: 56.25%;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--glass-border);
background: #000;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.demo-video-wrap .iframe-container iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
/* t-SNE figure — refined frame with a soft gold halo and white-biased backdrop
so clustering points remain readable against the dark theme */
.paper-fig.t-sne-zoom-canvas,
#t-sne .paper-fig {
position: relative;
margin: 1.5rem auto;
padding: 8px; /* tight, uniform on all 4 sides */
line-height: 0; /* kills the stray descender under inline imgs */
font-size: 0;
background:
radial-gradient(120% 100% at 50% 0%, rgba(212,160,58,0.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border: 2px solid rgba(212, 160, 58, 0.6);
border-radius: 16px;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.45),
0 0 32px rgba(212, 160, 58, 0.12);
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.paper-fig.t-sne-zoom-canvas:hover,
#t-sne .paper-fig:hover {
border-color: var(--accent-primary);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.5),
0 0 60px rgba(212, 160, 58, 0.18);
transform: translateY(-2px);
}
.paper-fig.t-sne-zoom-canvas img,
#t-sne .paper-fig img {
display: block;
width: 100%;
height: auto;
margin: 0;
border-radius: 8px;
background: #fff; /* t-SNE plots are typically light-background */
}
/* t-SNE zoom hint — visible overlay so users discover the scroll/pan interaction */
.t-sne-zoom-canvas { position: relative; cursor: zoom-in; }
.zoom-hint {
position: absolute;
top: 14px;
right: 14px;
z-index: 5;
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.4rem 0.75rem 0.4rem 0.55rem;
background: rgba(10, 14, 20, 0.78);
border: 1px solid rgba(212, 160, 58, 0.45);
border-radius: 999px;
color: var(--text-main);
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.02em;
backdrop-filter: blur(10px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
pointer-events: none;
animation: zoom-hint-pulse 2.4s ease-in-out 0.6s 3;
transition: opacity 0.3s ease;
}
.zoom-hint .zoom-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
background: rgba(212, 160, 58, 0.15);
border: 1px solid rgba(212, 160, 58, 0.4);
border-radius: 50%;
color: var(--accent-primary);
}
.zoom-hint .zoom-text b {
color: var(--accent-primary);
font-weight: 600;
}
/* Fade the hint once the user interacts with the figure */
.t-sne-zoom-canvas:hover .zoom-hint { opacity: 0.35; }
.t-sne-zoom-canvas.is-interacted .zoom-hint { opacity: 0; pointer-events: none; }
@keyframes zoom-hint-pulse {
0%, 100% {
box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(212,160,58,0.35);
}
50% {
box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 8px rgba(212,160,58,0);
}
}
@media (prefers-reduced-motion: reduce) {
.zoom-hint { animation: none; }
}
/* Small-caps — tighter kerning + no line-break inside names */
.small-caps {
font-variant: small-caps;
font-feature-settings: "smcp", "c2sc";
letter-spacing: 0.01em;
white-space: nowrap;
}
/* FAQ prose: collapse whitespace around inline anchors/spans so the
"FewSOL" / "Proto-CLIP" mentions don't leave extra gaps */
.faq-body .small-caps,
.faq-body a {
margin: 0;
padding: 0;
}
.faq-body { word-spacing: -0.02em; }
/* ============================================================================
Site footer — quiet divider + brand + meta line
============================================================================ */
.site-footer {
background: transparent !important;
padding: 2rem 1.5rem 2.5rem !important;
color: var(--text-faint) !important;
}
.site-footer .footer-rule {
height: 1px;
background: linear-gradient(90deg, transparent, var(--glass-border) 20%, var(--glass-border) 80%, transparent);
margin: 0 auto 1.25rem;
max-width: 680px;
}
.site-footer .footer-row {
display: flex; flex-wrap: wrap;
justify-content: center; align-items: center;
gap: 0.6rem 0.9rem;
font-family: var(--font-display);
font-size: 0.82rem;
color: var(--text-faint);
letter-spacing: 0.02em;
}
.site-footer .footer-brand {
color: var(--accent-primary);
font-weight: 600;
letter-spacing: 0.06em;
}
.site-footer .footer-sep {
color: var(--accent-primary);
opacity: 0.5;
font-weight: 700;
}
.site-footer .footer-meta a { color: var(--text-soft) !important; }
.site-footer .footer-meta a:hover { color: var(--accent-primary) !important; }
/* Hide the FewSOL template-credit pill that the shared script appends */
.site-footer .royal-theme-btn-fewsol { display: none !important; }
@media (max-width: 600px) {
.site-footer .footer-row { flex-direction: column; gap: 0.4rem; }
.site-footer .footer-sep { display: none; }
}
/* Project-name token in the hero title (e.g. "FewSOL", "Proto-CLIP") — first
.small-caps span gets the same gold + glow treatment iTeach applies to
iTeach. */
.publication-title .small-caps:first-of-type,
.publication-title > .small-caps:first-child {
color: var(--accent-primary);
text-shadow: 0 0 40px var(--accent-glow);
font-weight: 700;
}
.affil-inline { white-space: nowrap; }
/* Space between consecutive affiliations on the same line */
.affil-inline sup:not(:first-child) { margin-left: 1.25rem; }
/* Contact line — keep on a single line at desktop widths */
.section-lede.contact-line { max-width: none; white-space: nowrap; }
@media (max-width: 720px) {
.section-lede.contact-line { white-space: normal; }
}
/* ============================================================================
Real-World Execution (HRT1) — 3 stat tiles + trial tabs
============================================================================ */
.rw-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
max-width: 720px;
margin: 1rem auto 1.5rem;
}
.rw-stat {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 0.95rem 0.75rem;
text-align: center;
backdrop-filter: blur(10px);
}
.rw-stat .rw-n {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.65rem;
color: var(--accent-primary);
line-height: 1;
letter-spacing: -0.01em;
text-shadow: 0 0 18px var(--accent-glow);
}
.rw-stat .rw-l {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
color: var(--text-dim);
margin-top: 0.4rem;
text-transform: uppercase;
}
@media (max-width: 560px) { .rw-stats { grid-template-columns: 1fr; } }
/* Trial tabs — span the same width as the video grid below */
.trial-tabs {
display: flex;
margin: 1rem 0 1.25rem;
}
.trial-tabs ul {
display: flex;
flex-wrap: nowrap;
width: 100%;
gap: 0.4rem;
list-style: none;
padding: 0.3rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.trial-tabs li { margin: 0; flex: 1 1 0; min-width: 0; }
.trial-tabs li a {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
width: 100%;
padding: 0.5rem 0.95rem;
border: 1px solid transparent;
border-radius: 8px;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 500;
color: var(--text-soft);
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
@media (max-width: 560px) {
.trial-tabs ul { flex-wrap: wrap; }
.trial-tabs li { flex: 1 1 45%; }
}
.trial-tabs li a:hover {
background: rgba(212, 160, 58, 0.08);
color: var(--accent-primary);
border-color: rgba(212, 160, 58, 0.25);
}
.trial-tabs li.is-active a {
background: rgba(212, 160, 58, 0.15);
border-color: var(--accent-primary);
color: var(--accent-primary);
box-shadow: 0 0 14px var(--accent-glow);
}
.trial-tabs .icon { color: var(--accent-primary); }
.trial-tabs .trial-tag {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.15em;
color: var(--accent-primary);
opacity: 0.75;
}
.trial-tabs li.is-active .trial-tag,
.trial-tabs li:hover .trial-tag { opacity: 1; }
/* ============================================================================
HRT1 — Real-World Execution video grid
============================================================================ */
.hrt1-vid-grid { margin: 0.5rem 0 0; }
.hrt1-vid-grid .column { padding: 0.4rem; }
.hrt1-vid-grid .columns { margin: -0.4rem !important; }
.hrt1-vid-card {
margin: 0;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.hrt1-vid-card:hover {
border-color: var(--glass-border-strong);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.hrt1-vid-card .hrt1-vid-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.hrt1-vid-card video {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* show the full frame — no crop */
background: #000;
}
.hrt1-vid-card figcaption {
display: flex; align-items: center; justify-content: space-between;
gap: 0.6rem;
padding: 0.65rem 0.8rem 0.75rem;
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.hrt1-vid-card .hrt1-vid-task {
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.35;
color: var(--text-soft);
flex: 1 1 auto;
min-width: 0;
}
.hrt1-tag {
display: inline-flex; align-items: center; gap: 0.3rem;
font-family: var(--mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
flex: 0 0 auto;
}
.hrt1-tag-demo {
color: var(--accent-primary);
background: rgba(212, 160, 58, 0.08);
border-color: rgba(212, 160, 58, 0.35);
}
.hrt1-tag-success {
color: #6ee7a5;
background: rgba(110, 231, 165, 0.08);
border-color: rgba(110, 231, 165, 0.35);
}
.hrt1-tag-failure {
color: #ff8a8a;
background: rgba(255, 138, 138, 0.08);
border-color: rgba(255, 138, 138, 0.35);
}
/* State accents — subtle top hairline by state (no loud borders) */
.hrt1-vid-card.is-human { border-top: 1.5px solid rgba(212, 160, 58, 0.5); }
.hrt1-vid-card.is-success { border-top: 1.5px solid rgba(110, 231, 165, 0.5); }
.hrt1-vid-card.is-failure { border-top: 1.5px solid rgba(255, 138, 138, 0.5); }
/* ============================================================================
HRT1 — Overview system walkthrough video
============================================================================ */
.overview-video {
position: relative;
max-width: 960px;
margin: 1.5rem auto 0;
}
.overview-video .ov-label {
position: absolute;
top: 0.9rem; left: 0.9rem;
z-index: 3;
display: inline-flex; align-items: center;
padding: 0.35rem 0.75rem;
background: rgba(10, 14, 20, 0.78);
border: 1px solid rgba(212, 160, 58, 0.4);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-primary);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.overview-video .ov-frame {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
background: #000;
border: 1.5px solid rgba(212, 160, 58, 0.4);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.5),
0 0 36px rgba(212, 160, 58, 0.12);
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.overview-video .ov-frame:hover {
border-color: var(--accent-primary);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.55),
0 0 50px rgba(212, 160, 58, 0.2);
transform: translateY(-2px);
}
.overview-video video {
display: block;
width: 100%; height: 100%;
object-fit: cover;
}
/* ============================================================================
CLAP custom video player
============================================================================ */
.clap-player {
position: relative;
max-width: 960px;
margin: 1.5rem auto 0;
background: #000;
border-radius: 16px;
overflow: hidden;
border: 1.5px solid rgba(212, 160, 58, 0.4);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.5),
0 0 36px rgba(212, 160, 58, 0.12);
transition: border-color 0.25s, box-shadow 0.25s;
}
.clap-player:hover {
border-color: var(--accent-primary);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.55),
0 0 50px rgba(212, 160, 58, 0.18);
}
.clap-player .cp-label {
position: absolute;
top: 0.9rem; left: 0.9rem;
z-index: 4;
display: inline-flex; align-items: center;
padding: 0.35rem 0.75rem;
background: rgba(10, 14, 20, 0.78);
border: 1px solid rgba(212, 160, 58, 0.4);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-primary);
backdrop-filter: blur(10px);
pointer-events: none;
opacity: 0.95;
transition: opacity 0.25s;
}
.clap-player.is-playing:not(:hover) .cp-label { opacity: 0; }
.clap-player .cp-stage {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
cursor: pointer;
}
.clap-player .cp-video {
display: block;
width: 100%; height: 100%;
object-fit: cover;
}
/* Big center play button — visible when paused, fades when playing */
.clap-player .cp-center-play {
position: absolute;
inset: 0;
margin: auto;
width: 88px; height: 88px;
border-radius: 50%;
background: rgba(212, 160, 58, 0.92);
color: var(--bg-dark);
border: 0;
cursor: pointer;
font-size: 1.6rem;
box-shadow: 0 0 0 8px rgba(212, 160, 58, 0.2), 0 10px 30px rgba(0, 0, 0, 0.5);
display: flex; align-items: center; justify-content: center;
transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s;
padding-left: 6px; /* optical centering of the play glyph */
}
.clap-player .cp-center-play:hover { transform: scale(1.06); }
.clap-player.is-playing .cp-center-play { opacity: 0; pointer-events: none; transform: scale(0.85); }
/* Controls bar */
.clap-player .cp-controls {
display: flex; align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
background: rgba(10, 14, 20, 0.92);
border-top: 1px solid rgba(212, 160, 58, 0.22);
}
.clap-player .cp-btn {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
gap: 0.25rem;
min-width: 34px;
height: 34px;
padding: 0 0.55rem;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--text-soft);
font-family: var(--mono);
font-size: 0.95rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.clap-player .cp-btn:hover {
background: rgba(212, 160, 58, 0.1);
border-color: rgba(212, 160, 58, 0.35);
color: var(--accent-primary);
}
.clap-player .cp-btn:active { transform: scale(0.96); }
.clap-player .cp-btn .cp-sm {
font-size: 0.68rem;
letter-spacing: 0.05em;
opacity: 0.9;
}
.clap-player .cp-scrub {
flex: 1 1 auto;
display: flex; align-items: center;
min-width: 80px;
padding: 0 0.35rem;
}
.clap-player .cp-seek {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: transparent;
cursor: pointer;
outline: none;
}
/* Track (Chrome / Safari) */
.clap-player .cp-seek::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: linear-gradient(
to right,
var(--accent-primary) 0%,
var(--accent-primary) var(--cp-progress, 0%),
rgba(255,255,255,0.15) var(--cp-progress, 0%),
rgba(255,255,255,0.15) 100%
);
}
.clap-player .cp-seek::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px; height: 14px;
margin-top: -5px;
border-radius: 50%;
background: var(--accent-primary);
border: 2px solid var(--bg-dark);
box-shadow: 0 0 0 0 rgba(212, 160, 58, 0.35);
transition: box-shadow 0.15s, transform 0.15s;
}
.clap-player .cp-seek:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(212, 160, 58, 0.25); }
/* Track (Firefox) */
.clap-player .cp-seek::-moz-range-track {
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.15);
}
.clap-player .cp-seek::-moz-range-progress {
height: 4px;
border-radius: 999px;
background: var(--accent-primary);
}
.clap-player .cp-seek::-moz-range-thumb {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--accent-primary);
border: 2px solid var(--bg-dark);
}
.clap-player .cp-time {
flex: 0 0 auto;
font-family: var(--mono);
font-size: 0.78rem;
color: var(--text-dim);
letter-spacing: 0.02em;
white-space: nowrap;
padding: 0 0.35rem;
}
.clap-player .cp-time .cp-cur { color: var(--accent-primary); }
@media (max-width: 560px) {
.clap-player .cp-center-play { width: 64px; height: 64px; font-size: 1.2rem; }
.clap-player .cp-btn { min-width: 30px; height: 30px; padding: 0 0.4rem; font-size: 0.82rem; }
.clap-player .cp-time { font-size: 0.7rem; }
}
/* Volume group — expand slider on hover */
.clap-player .cp-volume {
display: inline-flex; align-items: center;
border-radius: 8px;
transition: background 0.2s;
}
.clap-player .cp-volume:hover,
.clap-player .cp-volume:focus-within { background: rgba(212, 160, 58, 0.06); }
.clap-player .cp-vol {
-webkit-appearance: none;
appearance: none;
width: 0;
opacity: 0;
height: 4px;
margin-left: 0;
background: transparent;
cursor: pointer;
outline: none;
transition: width 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s, margin 0.25s;
}
.clap-player .cp-volume:hover .cp-vol,
.clap-player .cp-volume:focus-within .cp-vol,
.clap-player .cp-vol:focus-visible {
width: 76px;
opacity: 1;
margin: 0 0.5rem 0 0.25rem;
}
.clap-player .cp-vol::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: linear-gradient(
to right,
var(--accent-primary) 0%,
var(--accent-primary) var(--cp-vol-pct, 100%),
rgba(255,255,255,0.18) var(--cp-vol-pct, 100%),
rgba(255,255,255,0.18) 100%
);
}
.clap-player .cp-vol::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 12px; height: 12px;
margin-top: -4px;
border-radius: 50%;
background: var(--accent-primary);
border: 2px solid var(--bg-dark);
}
.clap-player .cp-vol::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.18); }
.clap-player .cp-vol::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent-primary); }
.clap-player .cp-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-primary); border: 2px solid var(--bg-dark); }
/* Rich TL;DR — headline + pipeline chain + footer stat.
Used by HRT1 (process pipeline) and FewSOL (dataset composition). */
.tldr-hrt1,
.tldr-fewsol { padding: 1.4rem 1.5rem 1.3rem; }
.tldr-fewsol { margin-bottom: 0.25rem; }
.tldr-hrt1 .tldr-head,
.tldr-fewsol .tldr-head {
display: flex; align-items: baseline; gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.tldr-hrt1 .tldr-lede,
.tldr-fewsol .tldr-lede {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--text-main);
line-height: 1.5;
}
.tldr-hrt1 .tldr-lede b,
.tldr-fewsol .tldr-lede b { color: var(--accent-primary); }
.tldr-chain {
list-style: none;
margin: 0.25rem 0 1rem;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
position: relative;
}
.tldr-chain li {
position: relative;
display: flex; flex-direction: column; gap: 0.25rem;
padding: 0.75rem 0.85rem;
background: rgba(212, 160, 58, 0.06);
border: 1px solid rgba(212, 160, 58, 0.25);
border-radius: 10px;
text-align: left;
}
/* Arrows omitted — the gold-outlined step boxes read clearly left-to-right
on their own, and short gaps made the arrowheads feel cramped. */
.tldr-chain .tc-tag {
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.18em;
color: var(--accent-primary);
font-weight: 600;
}
.tldr-chain .tc-text {
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: 500;
color: var(--text-main);
line-height: 1.25;
}
.tldr-hrt1 .tldr-foot,
.tldr-fewsol .tldr-foot {
margin: 0;
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--text-dim);
line-height: 1.5;
}
.tldr-hrt1 .tldr-foot b,
.tldr-fewsol .tldr-foot b { color: var(--accent-primary); font-weight: 600; }
@media (max-width: 760px) {
.tldr-chain { grid-template-columns: repeat(2, 1fr); }
.tldr-chain li + li::before,
.tldr-chain li:nth-child(3)::before { display: none; }
.tldr-chain li:nth-child(2n)::before { display: block; }
}
@media (max-width: 420px) {
.tldr-chain { grid-template-columns: 1fr; }
.tldr-chain li::before { display: none !important; }
}
/* HRT1 Overview — four-module pipeline visual. Sits under the overview
figure; reads left-to-right with gold chevrons linking the steps. */
.hrt1-modules-wrap {
margin: 1.25rem auto 0;
max-width: 960px;
text-align: center;
}
.hrt1-modules {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
gap: 0;
position: relative;
}
.hrt1-modules li {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.95rem 0.75rem;
background:
linear-gradient(180deg,
rgba(212,160,58,0.055) 0%,
rgba(212,160,58,0.015) 100%);
border: 1px solid rgba(212,160,58,0.22);
border-radius: 12px;
text-align: center;
transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.hrt1-modules li:hover {
border-color: rgba(212,160,58,0.55);
background: linear-gradient(180deg,
rgba(212,160,58,0.09) 0%,
rgba(212,160,58,0.025) 100%);
transform: translateY(-2px);
}
.hrt1-modules li + li { margin-left: 0.55rem; }
.hrt1-modules li + li::before {
content: "";
position: absolute;
left: -0.55rem;
top: 50%;
width: 0.55rem;
height: 1px;
background: linear-gradient(90deg,
rgba(212,160,58,0) 0%,
rgba(212,160,58,0.55) 100%);
transform: translateY(-50%);
}
.hrt1-modules li + li::after {
content: "";
position: absolute;
left: -0.18rem;
top: 50%;
width: 0.42rem; height: 0.42rem;
border-top: 1px solid var(--accent-primary);
border-right: 1px solid var(--accent-primary);
transform: translateY(-50%) rotate(45deg);
opacity: 0.75;
}
.hrt1-modules .hm-num {
font-family: var(--mono);
font-size: 0.64rem;
letter-spacing: 0.22em;
color: var(--accent-primary);
font-weight: 600;
opacity: 0.9;
}
.hrt1-modules .hm-name {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 500;
line-height: 1.25;
color: var(--text-main);
letter-spacing: 0.01em;
}
.hrt1-modules-sub {
margin: 0.95rem 0 0;
font-family: var(--font-body);
font-size: 0.88rem;
color: var(--text-dim);
letter-spacing: 0.01em;
}
.hrt1-modules-sub .hm-dot {
color: var(--accent-primary);
margin: 0 0.35rem;
opacity: 0.7;
}
@media (max-width: 760px) {
.hrt1-modules { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
.hrt1-modules li + li { margin-left: 0; }
.hrt1-modules li + li::before,
.hrt1-modules li + li::after { display: none; }
}
@media (max-width: 420px) {
.hrt1-modules { grid-template-columns: 1fr; }
}
/* Human Demo videos — let each clip render at its natural aspect and fill
the column width (no letterboxing, no crop). The 16:9 frame is kept for
robot-trial clips where consistency matters more than source aspect. */
.hrt1-vid-card.is-human .hrt1-vid-frame { aspect-ratio: auto; }
.hrt1-vid-card.is-human video {
width: 100%;
height: auto;
object-fit: initial;
}