/* Typography & base */
:root {
	--bg: #f7fafc;
	--panel: #ffffff;
	--text: #0b1220;
	--muted: #4a5568;
	--brand: #7c78ea; /* mid lavender derived from #d5d1f6 */
	--brand-ink: #3b2f78;
	--border: #e5e7eb;
	--code: #f5f7fb;
	/* figure tints */
	--tint-lavender: #d5d1f6; /* rgba(213,209,246,1) */
	--tint-mint: #d7f3df;     /* rgba(215,243,223,1) */
	--tint-peach: #f9e5d1;    /* rgba(249,229,209,1) */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Layout */
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 850px; }
.section { padding: 64px 0; }
.section-alt { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Header */
.site-header { padding: 72px 0 40px; background:
	radial-gradient(1200px 600px at 20% -10%, rgba(213,209,246,0.55), transparent),
	radial-gradient(900px 500px at 100% 0%, rgba(215,243,223,0.45), transparent),
	radial-gradient(700px 500px at -10% 100%, rgba(249,229,209,0.40), transparent);
	border-bottom: 1px solid var(--border); }
.site-title { font-size: 40px; line-height: 1.15; margin: 0 0 8px; font-weight: 700; letter-spacing: -0.01em; }
.site-subtitle { margin: 0 0 16px; color: var(--muted); font-weight: 500; }
.authors { margin: 0; color: var(--muted); }
.author-list { margin-bottom: 8px; }
.author-list a { color: var(--text); font-weight: 500; text-decoration: none; transition: color 0.2s ease; }
.author-list a:hover { color: var(--brand); }
.author-list sup { color: var(--brand); font-weight: 600; }
.affiliations { font-size: 14px; line-height: 1.4; color: var(--muted); margin: 8px 0 16px; }
.affiliations sup { color: var(--brand); font-weight: 600; }
.links { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: #ffffff; color: var(--text); transition: transform .05s ease, background .2s ease, border .2s ease; }
.btn:hover { background: #f3f4f6; border-color: #d1d5db; transform: translateY(-1px); }

/* Hero video */
.hero-video { margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #ffffff; box-shadow: 0 4px 20px rgba(0,0,0,0.04); position: relative; }
.hero-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; cursor: pointer; }
.hero-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 75%); }
.hero-btn { background: rgba(255,255,255,0.95); border: 1px solid var(--border); color: #334155; border-radius: 999px; padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.hero-btn:hover { background: #f3f4f6; }
.hero-progress { flex: 1; display: flex; align-items: center; }
.hero-seek { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,0.7); border-radius: 999px; outline: none; }
.hero-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer; }
.hero-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer; }
.hero-time { color: #f8fafc; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,0.45); min-width: 90px; text-align: right; }
.icon { width: 0; height: 0; display: inline-block; }
.icon-pause { width: 12px; height: 12px; display: inline-block; position: relative; }
.icon-pause::before, .icon-pause::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: #334155; border-radius: 1px; }
.icon-pause::before { left: 0; }
.icon-pause::after { right: 0; }
.icon-play { width: 0; height: 0; border-left: 12px solid #334155; border-top: 7px solid transparent; border-bottom: 7px solid transparent; display: inline-block; }

/* Abstract */
#abstract h2, #videos h2, #method h2, #citation h2 { font-size: 24px; margin: 0 0 16px; }
#abstract p { color: var(--muted); font-size: 16px; }
/* Subheading under abstract */
.subheading { font-size: 18px; margin: 10px 0 6px; font-weight: 600; color: var(--text); }
/* Contributions under abstract */
.contribs { margin: 12px 0 0; padding-left: 18px; color: var(--text); }
.contribs li { margin: 4px 0; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #ffffff; position: relative; }
.card img { aspect-ratio: 16 / 9; object-fit: cover; background: #f3f4f7; }
.card-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 40%, rgba(0,0,0,0.28) 100%); font-size: 14px; color: #f8fafc; }
.card:hover { outline: 1px solid #cbd5e1; }

/* Inline video cards */
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #f3f4f7; cursor: pointer; }
.video-card .v-controls { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--border); background: #fff; }
.v-btn { background: #ffffff; border: 1px solid var(--border); color: #334155; border-radius: 999px; padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.v-btn:hover { background: #f3f4f6; }
.v-progress { flex: 1; }
.v-seek { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: #e5e7eb; border-radius: 999px; outline: none; }
.v-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; }
.v-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; }
.v-time { font-size: 12px; color: var(--muted); min-width: 80px; text-align: right; }

/* Method */
.method-controls { display: flex; gap: 10px; margin-bottom: 10px; }
.method-diagrams { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 8px; }
.method-svg { width: 100%; height: auto; display: block; }
.muted { color: var(--muted); }

/* Code block */
pre.code { background: var(--code); border: 1px solid var(--border); border-radius: 10px; padding: 14px; overflow: auto; color: #111827; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 28px 0; color: var(--muted); text-align: center; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 50; }
.lightbox.open { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(5,7,10,0.6); backdrop-filter: blur(2px); }
.lightbox-content { position: relative; width: min(100%, 1000px); margin: 24px; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
.lightbox-body { position: relative; padding-top: 56.25%; }
.lightbox-body iframe, .lightbox-body video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox-close { position: absolute; top: 8px; right: 8px; background: #ffffff; color: #334155; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; z-index: 2; }
.lightbox-close:hover { background: #f3f4f6; } 

/* Results */
.results-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
@media (min-width: 900px) { .results-grid { grid-template-columns: 1fr 1fr; } }
.result-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.result-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.result-body { padding: 12px 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.table thead th { font-weight: 600; color: var(--text); }
.table .subcell { line-height: 1.3; }
.cell-best { background: color-mix(in srgb, var(--tint-lavender) 30%, #ffffff 70%); font-weight: 600; }
.method-disagg { color: #2e1065; font-weight: 600; }
.footnote { font-size: 12px; margin-top: 8px; }
.result-chart { width: 100%; height: auto; display: block; }

/* Plot size tweak: make the bottom-left chart a bit smaller */
#chart-sim-depth-vs-state { width: 100%; max-width: 100%; height: auto; object-fit: contain; }
@media (max-width: 600px) { #chart-sim-depth-vs-state { width: 100%; max-width: 100%; } }