Spaces:

cs-mshah
/

layergen-viewer

Running

project: restore inline explorers + fix chrome() crash (invalid querySelector from external nav link) + reveal/figures

c7616e9 verified 2 months ago

14.1 kB

:root{
  --red:#FA0F00; --red-deep:#C41200; --ink:#151a24; --ink-soft:#4a5568; --mut:#8a94a6;
  --line:#e6e9f0; --bg:#ffffff; --bg-soft:#f6f8fc; --card:#ffffff;
  --dec:#2f6bff; --har:#12a67a; --ours:#6D28D9; --gold:#e8a90c;
  --navy:#0b1020; --navy2:#141c38;
  --shadow:0 8px 30px rgba(20,28,60,.08),0 2px 8px rgba(20,28,60,.05);
  --shadow-lg:0 24px 70px rgba(12,18,40,.18);
  --radius:18px; --maxw:1200px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:74px}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{padding:64px 0}
.sec-tag{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.sec-title{font-size:clamp(26px,3.4vw,40px);font-weight:800;margin-bottom:8px}
.sec-sub{color:var(--ink-soft);font-size:17px;max-width:820px;margin-bottom:28px}
.reveal{opacity:1;transform:none}  /* iframe-safe: don't gate content on the scroll observer */
.reveal.in{opacity:1;transform:none}

/* NAV */
nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(150%) blur(12px);background:rgba(255,255,255,.82);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:18px;height:60px}
.brand{font-weight:800;letter-spacing:-.02em;font-size:18px;display:flex;align-items:center;gap:9px}
.brand .dot{width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,var(--red),#ff6a3d);box-shadow:0 0 0 3px rgba(250,15,0,.12)}
.navlinks{margin-left:auto;display:flex;gap:20px;font-size:14.5px;font-weight:600}
.navlinks a{color:var(--ink-soft)} .navlinks a:hover{color:var(--red);text-decoration:none}
.navlinks a.active{color:var(--red)}
@media(max-width:760px){.navlinks{display:none}}

/* HERO */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 15% -10%,#1c2650 0,transparent 60%),radial-gradient(1000px 500px at 100% 0,#3a1230 0,transparent 55%),linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:78px 0 70px}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 70% at 50% 30%,#000 0,transparent 75%);opacity:.5}
.hero .streams{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .streams i{position:absolute;height:2px;width:40%;background:linear-gradient(90deg,transparent,rgba(255,120,90,.6),transparent);filter:blur(.3px);animation:flow 7s linear infinite}
@keyframes flow{0%{transform:translateX(-60%)}100%{transform:translateX(160%)}}
.hero .wrap{position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#ffd9cf}
.hero h1{font-size:clamp(34px,6vw,68px);font-weight:850;margin:20px 0 6px;letter-spacing:-.03em}
.hero h1 .gr{background:linear-gradient(100deg,#ff8a5b,#ff3b30 55%,#ff6ad5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .tagline{font-size:clamp(17px,2.3vw,24px);color:#cfd6ee;font-weight:500;max-width:900px}
.authors{margin-top:22px;font-size:17px;color:#e8ecfb;font-weight:600}
.authors .aff{display:block;color:#9fb0d8;font-weight:500;font-size:15px;margin-top:4px}
.cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;font-weight:700;font-size:15px;border:1px solid rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.08);transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);text-decoration:none;background:rgba(255,255,255,.16)}
.btn.primary{background:linear-gradient(120deg,var(--red),#ff6a3d);border-color:transparent;box-shadow:0 10px 30px rgba(250,15,0,.35)}
.btn svg{width:17px;height:17px}
.hero-stats{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 18px;min-width:150px}
.stat b{display:block;font-size:24px;font-weight:800;color:#fff}
.stat span{font-size:13px;color:#aab6db}

/* TLDR */
.tldr{background:linear-gradient(120deg,#fff,#fff7f5);border:1px solid #ffe0d8;border-left:6px solid var(--red);border-radius:16px;padding:22px 26px;box-shadow:var(--shadow);display:flex;gap:18px;align-items:flex-start}
.tldr .k{font-weight:850;color:var(--red);font-size:15px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:2px}
.tldr p{margin:0;font-size:18px;color:var(--ink)}

.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:34px}
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
.abstract p{font-size:16.5px;color:var(--ink-soft);margin:0 0 14px}
.contrib{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.contrib li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);font-size:15px}
.contrib li b{color:var(--ink)}
.contrib li .ic{display:inline-flex;width:30px;height:30px;border-radius:9px;align-items:center;justify-content:center;margin-right:8px;font-size:16px;color:#fff;vertical-align:middle}

/* CARDS / FIG */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.figcap{color:var(--mut);font-size:14px;margin-top:12px;text-align:center}
.eqrow{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
.eqcard{flex:1;min-width:240px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.eqcard .lbl{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ours);margin-bottom:8px}
.eqcard img{width:100%;height:auto;max-height:70px;object-fit:contain;object-position:left}

/* TABS / PILLS */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tab{padding:9px 16px;border-radius:11px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px;color:var(--ink-soft);cursor:pointer;transition:.15s;white-space:nowrap}
.tab:hover{border-color:#c9d2e6}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab.on.dec{background:var(--dec);border-color:var(--dec)} .tab.on.har{background:var(--har);border-color:var(--har)}
.brandlogo{height:20px;width:auto;display:inline-block}
.badgelogo{height:15px;width:auto;vertical-align:-2px;margin-right:4px}
.cmp-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin:6px 0 14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chips .lab,.cmp-right .lab{font-size:12.5px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.chip{padding:8px 13px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.12s;box-shadow:0 1px 2px rgba(20,28,60,.05)}
.chip:hover{border-color:#b7c2dc;transform:translateY(-1px)}
.chip .ck{width:16px;height:16px;border-radius:5px;border:1.5px solid #c4cee2;display:inline-flex;align-items:center;justify-content:center;background:#fff;font-size:11px;line-height:1;color:#fff}
.chip.on{border-color:var(--ink);background:#f2f5ff}
.chip.on.dec{border-color:var(--dec);background:#eef3ff;color:#1a49b8} .chip.on.dec .ck{background:var(--dec);border-color:var(--dec)} .chip.on.dec .ck:after{content:"✓"}
.chip.on.har{border-color:var(--har);background:#e9f9f2;color:#0a7f5e} .chip.on.har .ck{background:var(--har);border-color:var(--har)} .chip.on.har .ck:after{content:"✓"}
.chip.ours{border-color:var(--ours);background:#f3ecff;color:var(--ours);cursor:default;box-shadow:0 2px 8px rgba(109,40,217,.18)}
.chip.ours .ck{display:none}
.cmp-right{display:flex;align-items:center;gap:10px}
.numsel{padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer}
.btn-open{padding:9px 15px;border-radius:10px;border:none;background:linear-gradient(120deg,var(--red),#ff6a3d);color:#fff;font-weight:800;font-size:13.5px;cursor:pointer;box-shadow:0 6px 18px rgba(250,15,0,.3)}
.btn-open:hover{transform:translateY(-1px);text-decoration:none;filter:brightness(1.05)}
.cmp-stage{display:flex;flex-direction:column;gap:22px}
.cmp-block{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.cmp-scroll{overflow-x:auto;padding-bottom:10px}
.cmp-scroll::-webkit-scrollbar{height:12px}.cmp-scroll::-webkit-scrollbar-thumb{background:#c2cbe0;border-radius:999px}.cmp-scroll::-webkit-scrollbar-track{background:#eef1f8;border-radius:999px}
.cmp-row{display:flex;gap:16px;align-items:flex-start;min-width:min-content;width:max-content}
.cmp-col{flex:0 0 auto;display:flex;flex-direction:column;gap:12px}
.cmp-col .panel{width:clamp(300px,30vw,430px)}
.cmp-div{flex:0 0 auto;align-self:stretch;border-left:2.5px dashed #cbd4e8;margin:2px 3px}
.cmp-stage.full .cmp-col .panel{width:clamp(340px,32vw,560px)}

/* VIDEO PANELS */
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
.iconbtn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:.15s}
.iconbtn:hover{border-color:var(--red);color:var(--red)}
.iconbtn.big{width:auto;padding:0 16px;gap:8px;font-weight:700;font-size:14px}
.counter{font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.filmstrip{display:flex;gap:6px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:999px;background:#d7deee;cursor:pointer;transition:.15s}
.dot.on{background:var(--red);transform:scale(1.35)}
.vrow{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x proximity}
.vrow::-webkit-scrollbar{height:10px} .vrow::-webkit-scrollbar-thumb{background:#c7d0e4;border-radius:999px} .vrow::-webkit-scrollbar-track{background:#eef1f8;border-radius:999px}
.panel{flex:0 0 auto;width:clamp(250px,25vw,340px);scroll-snap-align:start}
.panel .vwrap{position:relative;border-radius:13px;overflow:hidden;background:#0d1220;aspect-ratio:832/480;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.panel.ours .vwrap{border:2.5px solid var(--ours);box-shadow:0 10px 30px rgba(109,40,217,.25)}
.panel video{width:100%;height:100%;object-fit:cover;display:block;background:#0d1220}
.panel .plabel{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;margin-top:9px;color:var(--ink)}
.panel .plabel .tagdot{width:8px;height:8px;border-radius:3px;background:var(--mut)}
.panel.ours .plabel{color:var(--ours)}
.panel .vwrap .oursflag{position:absolute;top:8px;left:8px;background:var(--ours);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:7px;text-transform:uppercase;z-index:3}
.panel .vwrap .ld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.panel .vwrap .spin{width:26px;height:26px;border:3px solid #2a3350;border-top-color:#7b8bd0;border-radius:999px;animation:spin 1s linear infinite}
.panel .vwrap .ldmsg{color:#7d88a6;font-size:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.prompt{margin-top:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;padding:15px 18px}
.prompt .k{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:5px;display:flex;gap:10px;align-items:center}
.prompt .tags{display:flex;gap:6px;flex-wrap:wrap}
.prompt .tag{font-size:11px;background:#eef1f8;color:var(--ink-soft);border-radius:6px;padding:2px 7px;font-weight:600}
.prompt p{margin:0;font-size:15.5px;color:var(--ink)}
.chooser{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 2px}
.chooser .lab{font-size:13px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.arrowlab{display:flex;align-items:center;justify-content:center;color:var(--mut);font-weight:800;font-size:22px;flex:0 0 auto;padding:0 2px}

/* dataset triplet */
.triplet{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tgroup{display:flex;gap:12px}
.tnote{font-size:13.5px;color:var(--ink-soft);margin-top:6px}

/* TABLES */
.tablewrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
table.metrics{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
table.metrics th,table.metrics td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
table.metrics thead th{background:var(--bg-soft);font-weight:800;color:var(--ink);position:sticky;top:0}
table.metrics td:first-child,table.metrics th:first-child{text-align:left;font-weight:600}
table.metrics tr.ours{background:#f5efff}
table.metrics tr.ours td:first-child{color:var(--ours);font-weight:800}
table.metrics td.best{font-weight:800;color:var(--ink)}
table.metrics .grp{border-left:1px solid var(--line)}
.mcap{color:var(--mut);font-size:13.5px;margin-top:10px}

/* bibtex/footer */
pre.bib{background:var(--navy);color:#dfe6ff;border-radius:14px;padding:20px;overflow:auto;font-size:13px;line-height:1.5}
footer{background:var(--navy);color:#aeb8d8;padding:40px 0;font-size:14px}
footer a{color:#ff8a5b}
.hr{height:1px;background:var(--line);border:0;margin:0}
.notice{font-size:13px;color:var(--mut);margin-top:8px}

	:root{
	--red:#FA0F00; --red-deep:#C41200; --ink:#151a24; --ink-soft:#4a5568; --mut:#8a94a6;
	--line:#e6e9f0; --bg:#ffffff; --bg-soft:#f6f8fc; --card:#ffffff;
	--dec:#2f6bff; --har:#12a67a; --ours:#6D28D9; --gold:#e8a90c;
	--navy:#0b1020; --navy2:#141c38;
	--shadow:0 8px 30px rgba(20,28,60,.08),0 2px 8px rgba(20,28,60,.05);
	--shadow-lg:0 24px 70px rgba(12,18,40,.18);
	--radius:18px; --maxw:1200px;
	--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
	}
	*{box-sizing:border-box}
	html{scroll-behavior:smooth; scroll-padding-top:74px}
	body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
	a{color:var(--red);text-decoration:none} a:hover{text-decoration:underline}
	h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}
	.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
	section{padding:64px 0}
	.sec-tag{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
	.sec-title{font-size:clamp(26px,3.4vw,40px);font-weight:800;margin-bottom:8px}
	.sec-sub{color:var(--ink-soft);font-size:17px;max-width:820px;margin-bottom:28px}
	.reveal{opacity:1;transform:none} /* iframe-safe: don't gate content on the scroll observer */
	.reveal.in{opacity:1;transform:none}

	/* NAV */
	nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(150%) blur(12px);background:rgba(255,255,255,.82);border-bottom:1px solid var(--line)}
	nav .wrap{display:flex;align-items:center;gap:18px;height:60px}
	.brand{font-weight:800;letter-spacing:-.02em;font-size:18px;display:flex;align-items:center;gap:9px}
	.brand .dot{width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,var(--red),#ff6a3d);box-shadow:0 0 0 3px rgba(250,15,0,.12)}
	.navlinks{margin-left:auto;display:flex;gap:20px;font-size:14.5px;font-weight:600}
	.navlinks a{color:var(--ink-soft)} .navlinks a:hover{color:var(--red);text-decoration:none}
	.navlinks a.active{color:var(--red)}
	@media(max-width:760px){.navlinks{display:none}}

	/* HERO */
	.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 15% -10%,#1c2650 0,transparent 60%),radial-gradient(1000px 500px at 100% 0,#3a1230 0,transparent 55%),linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:78px 0 70px}
	.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 70% at 50% 30%,#000 0,transparent 75%);opacity:.5}
	.hero .streams{position:absolute;inset:0;overflow:hidden;pointer-events:none}
	.hero .streams i{position:absolute;height:2px;width:40%;background:linear-gradient(90deg,transparent,rgba(255,120,90,.6),transparent);filter:blur(.3px);animation:flow 7s linear infinite}
	@keyframes flow{0%{transform:translateX(-60%)}100%{transform:translateX(160%)}}
	.hero .wrap{position:relative;z-index:2}
	.badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#ffd9cf}
	.hero h1{font-size:clamp(34px,6vw,68px);font-weight:850;margin:20px 0 6px;letter-spacing:-.03em}
	.hero h1 .gr{background:linear-gradient(100deg,#ff8a5b,#ff3b30 55%,#ff6ad5);-webkit-background-clip:text;background-clip:text;color:transparent}
	.hero .tagline{font-size:clamp(17px,2.3vw,24px);color:#cfd6ee;font-weight:500;max-width:900px}
	.authors{margin-top:22px;font-size:17px;color:#e8ecfb;font-weight:600}
	.authors .aff{display:block;color:#9fb0d8;font-weight:500;font-size:15px;margin-top:4px}
	.cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
	.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;font-weight:700;font-size:15px;border:1px solid rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.08);transition:transform .15s,background .15s}
	.btn:hover{transform:translateY(-2px);text-decoration:none;background:rgba(255,255,255,.16)}
	.btn.primary{background:linear-gradient(120deg,var(--red),#ff6a3d);border-color:transparent;box-shadow:0 10px 30px rgba(250,15,0,.35)}
	.btn svg{width:17px;height:17px}
	.hero-stats{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
	.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 18px;min-width:150px}
	.stat b{display:block;font-size:24px;font-weight:800;color:#fff}
	.stat span{font-size:13px;color:#aab6db}

	/* TLDR */
	.tldr{background:linear-gradient(120deg,#fff,#fff7f5);border:1px solid #ffe0d8;border-left:6px solid var(--red);border-radius:16px;padding:22px 26px;box-shadow:var(--shadow);display:flex;gap:18px;align-items:flex-start}
	.tldr .k{font-weight:850;color:var(--red);font-size:15px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:2px}
	.tldr p{margin:0;font-size:18px;color:var(--ink)}

	.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:34px}
	@media(max-width:880px){.two-col{grid-template-columns:1fr}}
	.abstract p{font-size:16.5px;color:var(--ink-soft);margin:0 0 14px}
	.contrib{list-style:none;padding:0;margin:0;display:grid;gap:12px}
	.contrib li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);font-size:15px}
	.contrib li b{color:var(--ink)}
	.contrib li .ic{display:inline-flex;width:30px;height:30px;border-radius:9px;align-items:center;justify-content:center;margin-right:8px;font-size:16px;color:#fff;vertical-align:middle}

	/* CARDS / FIG */
	.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
	.figcap{color:var(--mut);font-size:14px;margin-top:12px;text-align:center}
	.eqrow{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
	.eqcard{flex:1;min-width:240px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
	.eqcard .lbl{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ours);margin-bottom:8px}
	.eqcard img{width:100%;height:auto;max-height:70px;object-fit:contain;object-position:left}

	/* TABS / PILLS */
	.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
	.tab{padding:9px 16px;border-radius:11px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px;color:var(--ink-soft);cursor:pointer;transition:.15s;white-space:nowrap}
	.tab:hover{border-color:#c9d2e6}
	.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
	.tab.on.dec{background:var(--dec);border-color:var(--dec)} .tab.on.har{background:var(--har);border-color:var(--har)}
	.brandlogo{height:20px;width:auto;display:inline-block}
	.badgelogo{height:15px;width:auto;vertical-align:-2px;margin-right:4px}
	.cmp-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin:6px 0 14px}
	.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
	.chips .lab,.cmp-right .lab{font-size:12.5px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
	.chip{padding:8px 13px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.12s;box-shadow:0 1px 2px rgba(20,28,60,.05)}
	.chip:hover{border-color:#b7c2dc;transform:translateY(-1px)}
	.chip .ck{width:16px;height:16px;border-radius:5px;border:1.5px solid #c4cee2;display:inline-flex;align-items:center;justify-content:center;background:#fff;font-size:11px;line-height:1;color:#fff}
	.chip.on{border-color:var(--ink);background:#f2f5ff}
	.chip.on.dec{border-color:var(--dec);background:#eef3ff;color:#1a49b8} .chip.on.dec .ck{background:var(--dec);border-color:var(--dec)} .chip.on.dec .ck:after{content:"✓"}
	.chip.on.har{border-color:var(--har);background:#e9f9f2;color:#0a7f5e} .chip.on.har .ck{background:var(--har);border-color:var(--har)} .chip.on.har .ck:after{content:"✓"}
	.chip.ours{border-color:var(--ours);background:#f3ecff;color:var(--ours);cursor:default;box-shadow:0 2px 8px rgba(109,40,217,.18)}
	.chip.ours .ck{display:none}
	.cmp-right{display:flex;align-items:center;gap:10px}
	.numsel{padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer}
	.btn-open{padding:9px 15px;border-radius:10px;border:none;background:linear-gradient(120deg,var(--red),#ff6a3d);color:#fff;font-weight:800;font-size:13.5px;cursor:pointer;box-shadow:0 6px 18px rgba(250,15,0,.3)}
	.btn-open:hover{transform:translateY(-1px);text-decoration:none;filter:brightness(1.05)}
	.cmp-stage{display:flex;flex-direction:column;gap:22px}
	.cmp-block{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px}
	.cmp-scroll{overflow-x:auto;padding-bottom:10px}
	.cmp-scroll::-webkit-scrollbar{height:12px}.cmp-scroll::-webkit-scrollbar-thumb{background:#c2cbe0;border-radius:999px}.cmp-scroll::-webkit-scrollbar-track{background:#eef1f8;border-radius:999px}
	.cmp-row{display:flex;gap:16px;align-items:flex-start;min-width:min-content;width:max-content}
	.cmp-col{flex:0 0 auto;display:flex;flex-direction:column;gap:12px}
	.cmp-col .panel{width:clamp(300px,30vw,430px)}
	.cmp-div{flex:0 0 auto;align-self:stretch;border-left:2.5px dashed #cbd4e8;margin:2px 3px}
	.cmp-stage.full .cmp-col .panel{width:clamp(340px,32vw,560px)}

	/* VIDEO PANELS */
	.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
	.iconbtn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:.15s}
	.iconbtn:hover{border-color:var(--red);color:var(--red)}
	.iconbtn.big{width:auto;padding:0 16px;gap:8px;font-weight:700;font-size:14px}
	.counter{font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
	.filmstrip{display:flex;gap:6px;flex-wrap:wrap}
	.dot{width:9px;height:9px;border-radius:999px;background:#d7deee;cursor:pointer;transition:.15s}
	.dot.on{background:var(--red);transform:scale(1.35)}
	.vrow{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x proximity}
	.vrow::-webkit-scrollbar{height:10px} .vrow::-webkit-scrollbar-thumb{background:#c7d0e4;border-radius:999px} .vrow::-webkit-scrollbar-track{background:#eef1f8;border-radius:999px}
	.panel{flex:0 0 auto;width:clamp(250px,25vw,340px);scroll-snap-align:start}
	.panel .vwrap{position:relative;border-radius:13px;overflow:hidden;background:#0d1220;aspect-ratio:832/480;border:1.5px solid var(--line);box-shadow:var(--shadow)}
	.panel.ours .vwrap{border:2.5px solid var(--ours);box-shadow:0 10px 30px rgba(109,40,217,.25)}
	.panel video{width:100%;height:100%;object-fit:cover;display:block;background:#0d1220}
	.panel .plabel{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;margin-top:9px;color:var(--ink)}
	.panel .plabel .tagdot{width:8px;height:8px;border-radius:3px;background:var(--mut)}
	.panel.ours .plabel{color:var(--ours)}
	.panel .vwrap .oursflag{position:absolute;top:8px;left:8px;background:var(--ours);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:7px;text-transform:uppercase;z-index:3}
	.panel .vwrap .ld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
	.panel .vwrap .spin{width:26px;height:26px;border:3px solid #2a3350;border-top-color:#7b8bd0;border-radius:999px;animation:spin 1s linear infinite}
	.panel .vwrap .ldmsg{color:#7d88a6;font-size:12px}
	@keyframes spin{to{transform:rotate(360deg)}}
	.prompt{margin-top:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;padding:15px 18px}
	.prompt .k{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:5px;display:flex;gap:10px;align-items:center}
	.prompt .tags{display:flex;gap:6px;flex-wrap:wrap}
	.prompt .tag{font-size:11px;background:#eef1f8;color:var(--ink-soft);border-radius:6px;padding:2px 7px;font-weight:600}
	.prompt p{margin:0;font-size:15.5px;color:var(--ink)}
	.chooser{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 2px}
	.chooser .lab{font-size:13px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
	.arrowlab{display:flex;align-items:center;justify-content:center;color:var(--mut);font-weight:800;font-size:22px;flex:0 0 auto;padding:0 2px}

	/* dataset triplet */
	.triplet{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
	.tgroup{display:flex;gap:12px}
	.tnote{font-size:13.5px;color:var(--ink-soft);margin-top:6px}

	/* TABLES */
	.tablewrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
	table.metrics{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
	table.metrics th,table.metrics td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
	table.metrics thead th{background:var(--bg-soft);font-weight:800;color:var(--ink);position:sticky;top:0}
	table.metrics td:first-child,table.metrics th:first-child{text-align:left;font-weight:600}
	table.metrics tr.ours{background:#f5efff}
	table.metrics tr.ours td:first-child{color:var(--ours);font-weight:800}
	table.metrics td.best{font-weight:800;color:var(--ink)}
	table.metrics .grp{border-left:1px solid var(--line)}
	.mcap{color:var(--mut);font-size:13.5px;margin-top:10px}

	/* bibtex/footer */
	pre.bib{background:var(--navy);color:#dfe6ff;border-radius:14px;padding:20px;overflow:auto;font-size:13px;line-height:1.5}
	footer{background:var(--navy);color:#aeb8d8;padding:40px 0;font-size:14px}
	footer a{color:#ff8a5b}
	.hr{height:1px;background:var(--line);border:0;margin:0}
	.notice{font-size:13px;color:var(--mut);margin-top:8px}