:root { --black:#000; --white:#fff; --grey:#555; --line:#d9d9d9; --wrap:1400px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--white); color:#111; font:16px/1.6 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color:inherit; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }

.hero { text-align:center; padding:40px 0 20px; }
.hero h1 { font-size:2.2rem; line-height:1.25; margin:0 0 16px; font-weight:700; letter-spacing:-0.01em; }
.authors { margin:0; font-size:1.05rem; }
.affil { margin:4px 0 18px; color:var(--grey); font-size:.92rem; }
.buttons { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:7px 20px; border:1px solid var(--black); border-radius:999px; background:var(--white); color:var(--black); text-decoration:none; font:inherit; font-size:.92rem; cursor:pointer; transition:background .15s,color .15s; }
.btn { display:inline-flex; align-items:center; gap:8px; }
.btn svg { width:17px; height:17px; flex:none; }
.btn:hover, .btn-solid { background:var(--black); color:var(--white); }
.btn-solid:hover { background:var(--white); color:var(--black); }

.summary { padding:10px 0 24px; }
.summary figure { margin:0 auto; max-width:1150px; }
.summary img { width:100%; display:block; }
.summary p { margin:0; color:#222; }

.tabs { display:flex; gap:8px; border-bottom:1px solid var(--black); overflow-x:auto; }
.tab { flex:1 1 0; min-width:110px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px 10px; background:var(--white); color:var(--black); border:1px solid transparent; border-bottom:none; border-radius:8px 8px 0 0; cursor:pointer; font:inherit; font-size:.85rem; font-weight:500; }
.tab svg { width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tab:hover { border-color:var(--line); }
.tab.active { background:var(--black); color:var(--white); }
.tab:focus-visible { outline:2px solid var(--black); outline-offset:2px; }

.panel { display:none; grid-template-columns:1fr 1.8fr; grid-template-areas:"text media" "fig media"; gap:16px 32px; padding:24px 0 8px; align-items:start; }
.panel.active { display:grid; }
.panel .media { grid-area:media; align-self:center; }
.panel .text { grid-area:text; }
.panel .fig { grid-area:fig; margin:0; justify-self:start; }
.panel .fig img { display:block; max-width:100%; max-height:480px; width:auto; margin:0; }
#nominal, #sim2real { grid-template-columns:1fr 1fr; grid-template-areas:"text fig"; align-items:center; }
.video { position:relative; aspect-ratio:16/9; background:var(--black); }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.text h2 { margin:0 0 8px; font-size:1.25rem; }
.text p { margin:0 0 8px; color:#222; }
.more { display:inline-block; margin-top:4px; font-weight:600; font-size:.92rem; }
.stats { display:flex; gap:32px; margin-top:12px; }
.stats b { display:block; font-size:2rem; line-height:1.1; }
.stats span { color:var(--grey); font-size:.88rem; }

.table-fig { width:100%; }
table { border-collapse:collapse; width:100%; font-size:.95rem; }
caption { text-align:left; font-weight:600; padding-bottom:8px; }
th, td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:center; }
thead th { border-bottom:1px solid var(--black); }
tbody th { text-align:left; font-weight:500; }

.cite { padding:28px 0 24px; }
.cite h2 { font-size:1.25rem; margin:0 0 8px; }
.cite pre { margin:0 0 10px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; white-space:pre-wrap; word-break:break-word; font:.82rem/1.5 ui-monospace, Menlo, Consolas, monospace; background:var(--white); }

footer { border-top:1px solid var(--line); padding:20px 0; }
.logos { display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; }
.logos img { height:34px; width:auto; display:block; }
.logos img.logo-arl { height:64px; }
.logos .logo-ec { display:flex; align-items:center; gap:14px; text-decoration:none; }
.logos .logo-ec img { height:48px; }
.logos img[alt="University of Bonn"] { height:40px; }

@media (max-width:820px) {
  .summary, .panel, .panel.active { grid-template-columns:1fr; }
  .panel { grid-template-areas:"text" "media" "fig"; }
  #nominal, #sim2real { grid-template-columns:1fr; grid-template-areas:"text" "fig"; }
  .hero h1 { font-size:1.45rem; }
}