/* Presentation modelled on the look of dark academic project pages: dark default, amber accent, alternating
   section bands, centred headings, rounded media. Own CSS, no framework. */
:root{--bg1:#222;--bg0:#404040;--fg:#d1d5db;--mut:#9ca3af;--head:#fff;--card:#2e2e2e;--line:#555;--acc:#f59e0b;--accfg:#111;--link:#fbbf24;--red:#ff6060;--org:#ffa733;--code:#0d1011;--max:68.75rem;color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg1:#fff;--bg0:#f3f4f6;--fg:#1f2937;--mut:#4b5563;--head:#111827;--card:#fff;--line:#d1d5db;--acc:#b45309;--accfg:#fff;--link:#b45309;--red:#c01010;--org:#b45309;--code:#f3f4f6;color-scheme:light}}
:root[data-theme=light]{--bg1:#fff;--bg0:#f3f4f6;--fg:#1f2937;--mut:#4b5563;--head:#111827;--card:#fff;--line:#d1d5db;--acc:#b45309;--accfg:#fff;--link:#b45309;--red:#c01010;--org:#b45309;--code:#f3f4f6;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg1);color:var(--fg);font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--link)}
.layout{max-width:var(--max);width:min(91.666%,var(--max));margin:0 auto}
@media (max-width:480px){.layout{width:calc(100% - 32px)}}
h1,h2,h3,h4{color:var(--head);line-height:1.2;font-weight:700}
section{padding:48px 0}
.bg1{background:var(--bg1)}.bg0{background:var(--bg0)}
h2{font-size:clamp(1.6rem,4vw,1.9rem);text-align:center;margin:0 0 20px}
h3{font-size:1.4rem;margin:34px 0 8px}
p.lead{font-size:1.1rem}
p{text-wrap:pretty}
/* hero */
.hero{position:relative;min-height:clamp(520px,92vh,780px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#222;padding:72px 0 48px}
.hero-bg{position:absolute;inset:-20px;background:url(../media/hero-bg.jpg) center/cover;filter:blur(6px)}
.hero-ov{position:absolute;inset:0;background:rgba(34,34,34,.78)}
:root[data-theme=light] .hero-ov{background:rgba(255,255,255,.82)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .hero-ov{background:rgba(255,255,255,.82)}}
.hero-in{position:relative;z-index:2;text-align:center}
h1{font-size:clamp(3rem,10vw,5.2rem);margin:0;letter-spacing:.04em}
.sub{font-size:clamp(1.1rem,3vw,1.7rem);color:var(--head);margin:8px auto 24px;max-width:820px;font-weight:600}
.ac{color:var(--acc)}
.authors{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 28px;margin:8px 0 4px;font-size:1.15rem;font-weight:600;color:var(--head)}.authors span{white-space:nowrap}
.affil{margin:0;font-size:.9rem;color:var(--mut)}
.lk{display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--mut);font-size:.85rem;text-decoration:none}
.lk svg{color:var(--head)}.lk img{height:30px;width:auto;border-radius:4px}
.lk:hover,.lk:hover svg{color:var(--acc)}.lk:hover img{opacity:.85}
.lk.off{cursor:not-allowed;opacity:.6}.lk.off:hover,.lk.off:hover svg{color:var(--mut)}
.lk-more{margin:12px 0 0;font-size:.82rem;color:var(--mut)}.lk-more a{color:var(--mut)}
.review{margin:14px 0 4px;color:var(--mut);font-style:italic}
.links{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:center;font-size:1.1rem;margin-top:22px}
.tl{display:inline-flex;align-items:center;gap:.25em;color:var(--head);font-weight:500;text-decoration:none;border-bottom:1px dotted var(--head)}
.tl svg{transition:transform .2s;transform:translateX(-3px)}.tl:hover{border-bottom-color:transparent;color:var(--acc)}.tl:hover svg{transform:none}
.tl.off{color:var(--mut);border-bottom-color:var(--mut);cursor:not-allowed}
.theme{position:absolute;top:18px;right:16px;z-index:3;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg)}
#theme-toggle{width:44px;height:24px;border-radius:99px;border:0;background:#6b7280;position:relative;cursor:pointer;padding:0}
#theme-toggle span{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
#theme-toggle[aria-checked=true]{background:var(--acc)}#theme-toggle[aria-checked=true] span{transform:translateX(20px)}
/* nav */
nav{position:sticky;top:0;z-index:5;background:var(--bg1);border-bottom:1px solid var(--line)}
nav .layout{display:flex;gap:20px;overflow-x:auto;padding:10px 0;white-space:nowrap;font-size:14px;justify-content:center}
nav a{text-decoration:none;color:var(--mut)}nav a:hover{color:var(--acc)}
@media (max-width:700px){nav .layout{justify-content:flex-start}}
/* media */
figure{margin:22px 0}figcaption{font-size:14.5px;color:var(--mut);margin-top:10px;font-weight:300}
figure img,figure video{width:100%;height:auto;display:block;border-radius:8px;background:#000}
figure img.fig{background:#fff}
figure video{max-width:960px;margin-left:auto;margin-right:auto}#teaser{max-width:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin:20px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.tile b{display:block;font-size:2.1rem;line-height:1.1;color:var(--acc)}
.tile span{font-size:14.5px;color:var(--fg)}
.tile.warn b{color:var(--org)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.comp div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:15.5px}
.comp h4{margin:0 0 6px;font-size:1.05rem;color:var(--acc)}
.contract{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.contract div{flex:1 1 220px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);font-size:14.5px;padding-bottom:10px}
.contract i{display:block;height:46px;font-style:normal;color:#111;font-weight:700;padding:11px 12px;margin-bottom:8px}
.contract p{margin:0;padding:0 14px}
.stepper{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin:18px 0}
.stepper img{width:100%;max-width:640px;display:block;margin:0 auto;border-radius:6px;background:#fff}
.stepper .cap{min-height:5.4em;font-size:15.5px;margin:12px 0}
.stepper .ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stepper button{font:inherit;font-size:14px;padding:5px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.stepper button[aria-pressed=true],.stepper button.on{background:var(--acc);color:var(--accfg);border-color:var(--acc)}
pre{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:14px;overflow-x:auto;font-size:13px;line-height:1.5;color:var(--fg)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.note{border-left:4px solid var(--acc);padding:8px 14px;background:var(--card);font-size:15px;margin:16px 0;border-radius:0 8px 8px 0}
ul.tldr li{margin:10px 0}
footer{padding:36px 0 64px;background:var(--bg1);border-top:1px solid var(--line);color:var(--mut);font-size:14.5px}
footer b{color:var(--fg)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tl svg{transition:none}}

.stills{grid-template-columns:repeat(2,1fr)}@media (min-width:900px){.stills{grid-template-columns:repeat(4,1fr)}}