/* Project page: Accelerating End-to-End 3D Asset Generation through Pipeline Optimization (Alaya Lab).
   Visual system follows the lab's MeshAxiom page (alaya-lab.github.io/MeshAxiom, 2026-11-04): near-black ground,
   1px hairline panels, Nunito Sans display / Source Serif 4 body / Inter UI / JetBrains Mono labels.
   Layout: fixed blurred header; full-bleed hero (teaser render as backdrop, left-aligned title, outlined buttons);
   timing panel; viewer panel with thumbnail card tabs; two result tables in panels; BibTeX; footer with the authors. */
:root{
  --bg:#0a0a0c; --bg-alt:#101014; --bg-raise:#171920; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.2);
  --text:#f0f0f4; --text-2:#c5cad4; --muted:#a2a4af; --dim:#747781; --faint:#5a5e69;
  --link:#b9d5f4; --accent:#dce6f5;
  --display:"Nunito Sans","Inter",Arial,sans-serif; --sans:"Inter",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --max:1160px; --radius:14px;
  /* stage colours of the time bars: blues = networks, oranges = mesh post-processing (as in Figure 1 of the report) */
  --st-prep:#8a8d99; --st-ss:#a6cbf3; --st-lr:#5f9de8; --st-hr:#2f6fc4; --st-tex:#1d4b8f;
  --st-mesh:#f3a87f; --st-uv:#e2662b; --st-bake:#b4461a; --st-export:#7a2d0c; --st-other:#6b6e78;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--serif);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,figure{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:#fff;color:#000;padding:8px 12px;border-radius:6px}
.skip-link:focus{left:12px}
/* ambient grid behind the first screens, as on MeshAxiom */
.ambient{position:absolute;inset:0 0 auto;height:950px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 20%,#24242930,transparent 68%),linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);
  background-size:auto,96px 96px,96px 96px}

/* --- header --- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;background:#0a0a0cdc;border-bottom:1px solid #ffffff0d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding-top:env(safe-area-inset-top,0px)}
.nav-inner{max-width:1208px;margin:auto;min-height:67px;padding:10px max(24px,env(safe-area-inset-right,0px)) 10px max(24px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:30px}
.brand{font:700 19px var(--display);display:flex;align-items:center;gap:10px;letter-spacing:-.02em;white-space:nowrap}
.brand img{height:26px;width:26px;object-fit:contain;filter:invert(1)}
.brand small{font:400 10px var(--mono);letter-spacing:.14em;color:var(--dim);margin-left:6px;text-transform:uppercase}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav-links a{font:14px var(--serif);color:#b6b8c0;padding:10px 12px;border-radius:7px;transition:color .2s,background .2s}
.nav-links a:hover{color:#fff;background:var(--surface-2)}
.nav-links a.nav-cta{font:500 13px var(--sans);color:#0a0a0c;background:#f0f0f4;padding:9px 16px;margin-left:8px}
.nav-links a.nav-cta:hover{background:#fff}

/* --- hero --- */
.hero{position:relative;overflow:hidden;min-height:660px;padding:168px 0 96px;display:flex;align-items:center}
.hero-backdrop{position:absolute;inset:0;z-index:0}
.hero-backdrop img{width:100%;height:100%;object-fit:cover;object-position:68% 55%;display:block;filter:saturate(.9)}
.hero-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,10,12,.96) 0%,rgba(10,10,12,.86) 34%,rgba(10,10,12,.5) 60%,rgba(10,10,12,.22) 100%),
             linear-gradient(180deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,0) 30%,rgba(10,10,12,0) 60%,var(--bg) 100%)}
.hero-content{position:relative;z-index:2;width:100%}
.eyebrow{font:10px var(--mono);letter-spacing:.22em;color:#bfc0c9;text-transform:uppercase;display:flex;align-items:center;gap:11px;margin-bottom:22px}
.eyebrow .draft{color:#f0c9a0;border:1px solid #f0c9a055;border-radius:999px;padding:3px 9px;letter-spacing:.16em}
.hero h1{font:700 clamp(34px,4.5vw,62px)/1.06 var(--display);letter-spacing:-.035em;max-width:27ch;text-wrap:balance;color:#fff}
.nowrap{white-space:nowrap}
.hero-subtitle{margin-top:22px;font:400 clamp(17px,1.6vw,21px)/1.5 var(--sans);color:#d0d0d6;max-width:56ch;text-wrap:pretty}
.hero-subtitle b{font-weight:600;color:#fff}
.hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.ac-button{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 20px;border:1px solid var(--line-strong);border-radius:8px;background:#0a0a0c99;color:#e6e7ec;font:500 13px var(--sans);letter-spacing:.01em;transition:border-color .2s,background .2s,color .2s;cursor:pointer}
.ac-button svg{width:14px;height:14px;opacity:.85}
.ac-button:hover{border-color:#fff;color:#fff}
.ac-button.primary{background:#f0f0f4;color:#0a0a0c;border-color:#f0f0f4}
.ac-button.primary:hover{background:#fff}
.ac-button.soon{color:var(--dim);border-color:var(--line);cursor:default;background:transparent}
.ac-button.soon small{font:400 11px var(--mono);color:var(--faint);letter-spacing:.04em}

/* --- sections --- */
section{padding:64px 0}
.section-heading{display:flex;align-items:flex-end;gap:54px;justify-content:space-between;margin-bottom:34px}
.section-heading h2{font:600 clamp(32px,4vw,48px)/1.16 var(--display);letter-spacing:-.025em;text-wrap:balance}
.section-heading h2 span{display:block;margin-top:10px;font:400 15px/1.6 var(--sans);letter-spacing:0;color:var(--muted);max-width:62ch}
.section-tag{white-space:nowrap;color:var(--dim);font:10px var(--mono);letter-spacing:.09em;padding-bottom:8px}
.lead{font-size:17px;line-height:1.75;color:#d4d6de;max-width:860px;margin-bottom:26px}
.small-note{font:400 13px/1.65 var(--serif);color:#8b8f9b}
.note-row{display:flex;justify-content:flex-end;gap:24px;flex-wrap:wrap;margin-top:12px}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt);overflow:hidden}
.index{font:10px var(--mono);letter-spacing:.13em;color:#92959f;line-height:1.5}

/* --- timing panel (the strip under Figure 1) --- */
#timing{padding-top:0;margin-top:-26px;position:relative;z-index:3}
.strip{position:relative;padding:26px 28px 22px}
.strip-row{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:16px;min-height:38px}
.strip-row+.strip-row{margin-top:8px}
.strip-label{font:500 13px var(--sans);color:var(--text-2);text-align:right;white-space:nowrap}
.strip-track{padding-right:150px}
.strip-line{display:flex;align-items:center;flex-wrap:nowrap;gap:12px}
.strip-bar{display:flex;height:14px;flex:0 0 auto;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.08)}
.strip-bar span{display:block;height:100%;outline:none}
.strip-bar span:hover,.strip-bar span:focus-visible{filter:brightness(1.2);box-shadow:inset 0 0 0 1.5px #fff}
.strip-val{font:500 15px var(--sans);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.strip-x{font:11px var(--mono);color:var(--muted);margin-left:6px;letter-spacing:.04em}
.tip{position:absolute;z-index:20;pointer-events:none;display:none;font:12px/1.45 var(--sans);color:#0a0a0c;background:#f0f0f4;padding:7px 10px;border-radius:7px;white-space:nowrap;box-shadow:0 8px 24px #0008}
.strip-legend{display:flex;gap:18px;flex-wrap:wrap;font:11px var(--mono);letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.strip-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px}

/* --- 3D viewer panel --- */
.viewer-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border-bottom:1px solid var(--line);background:#0d0d10;flex-wrap:wrap}
.asset-heading{display:flex;align-items:baseline;gap:14px;min-width:0}
.asset-heading .index{color:#59687d}
.asset-heading h3{font:500 17px/1.3 var(--sans);color:#fff;white-space:nowrap}
.asset-heading p{font:12px var(--sans);color:var(--dim)}
.viewer-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctrl-lbl{font:10px var(--mono);letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-right:2px}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:#15161b;border:1px solid var(--line)}
.seg button{border:0;background:transparent;color:#9aa0ad;font:500 12px var(--sans);padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .2s,color .2s}
.seg button.on{background:#2a2c35;color:#fff}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#15161b;color:#9aa0ad;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:#717b8d;color:#fff}
.icon-btn.on{background:#2a2c35;color:#fff;border-color:#4c5260}
.icon-btn svg{width:15px;height:15px}
.viewer-shell{position:relative;scroll-margin-top:84px;background:radial-gradient(ellipse at 50% 72%,#1c1d25 0%,#111217 45%,#0d0d10 100%)}
.ws-canvas{display:block;width:100%;height:620px;cursor:grab;touch-action:none}
.ws-canvas:active{cursor:grabbing}
.input-reference{position:absolute;top:18px;right:18px;z-index:3;width:154px;padding:7px;background:#0d0d10e6;border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(6px)}
.input-reference img{width:140px;height:140px;object-fit:contain;border-radius:6px;background:#fff;display:block}
.input-reference figcaption{font:500 8.5px var(--mono);letter-spacing:.14em;text-align:center;color:var(--dim);margin-top:7px}
.viewer-tip{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;font:11px var(--sans);color:#9aa0ad;background:#0d0d10b8;border:1px solid var(--line);padding:6px 12px;border-radius:999px;white-space:nowrap}
.ws-loader{position:absolute;inset:0;z-index:7;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:24px;background:#0d0d10b8}
.ws-loader.show{display:flex}
.ws-loader-label{font:500 12.5px var(--sans);color:var(--text-2);max-width:460px;text-wrap:pretty}
.ws-loader-bar{width:min(320px,70%);height:3px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.ws-loader-fill{height:100%;width:38%;border-radius:99px;background:var(--accent);animation:ws-indet 1.1s ease-in-out infinite}
.ws-loader.error .ws-loader-bar{display:none}
.ws-loader.error .ws-loader-label{color:#f0c9a0}
@keyframes ws-indet{0%{margin-left:-38%}100%{margin-left:100%}}
@media(prefers-reduced-motion:reduce){.ws-loader-fill{animation:none;width:100%}}
.viewer-bar{padding:16px 18px 18px;border-top:1px solid var(--line);background:#0d0d10}
.scene-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.scene-tab{padding:0 0 12px;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--bg-alt);overflow:hidden;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.scene-tab img{display:block;width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;opacity:.76;transition:opacity .2s;background:#15161b}
.scene-tab span{display:block;color:#c5cad4;font:500 13px/1.35 var(--sans);margin:11px 12px 2px}
.scene-tab small{display:block;font:9px var(--mono);letter-spacing:.08em;color:#747e8e;margin:0 12px;text-transform:uppercase}
.scene-tab:hover{border-color:#717b8d}
.scene-tab:hover img,.scene-tab.active img{opacity:1}
.scene-tab.active{border-color:#a1aabc;background:var(--bg-raise)}
.scene-tab.active span{color:#fff}
.scene-tab.active small{color:#969faf}
.viewer-note{margin-top:14px;max-width:900px}

/* --- result tables --- */
.table-card{padding:6px 10px 2px;overflow-x:auto}
.res-table{width:100%;border-collapse:collapse;font:13.5px var(--sans);min-width:820px;font-variant-numeric:tabular-nums}
.res-table th,.res-table td{padding:11px 10px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.res-table th:first-child,.res-table td:first-child{text-align:left;padding-left:14px}
.res-table thead th{font:500 11.5px/1.35 var(--sans);color:var(--muted);vertical-align:bottom;padding-top:14px}
.res-table thead th small{display:block;font:9.5px var(--mono);letter-spacing:.06em;color:var(--dim);margin-top:3px}
.res-table td{color:#aeb3bf}
.res-table td:first-child{color:var(--text-2)}
.res-table tbody.group-ours tr:first-child td{border-top:1px solid var(--line-strong)}
.res-table td b{color:#fff;font-weight:600}
.res-table tr.ours td{background:rgba(255,255,255,.055);color:#dfe2e9}
.res-table tr.ours td:first-child{border-radius:8px 0 0 8px}
.res-table tr.ours td:last-child{border-radius:0 8px 8px 0}
.res-table tbody:last-child tr:last-child td{border-bottom:0}
.res-table caption{caption-side:bottom;text-align:left;font:12px var(--serif);color:var(--dim);padding:12px 14px 10px}
.after-table{margin-top:22px;max-width:900px}
.sub-block{margin-top:52px}
.sub-block .subhead{font:10px var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-bottom:10px}
.sub-block h3{font:600 clamp(22px,2.4vw,30px)/1.2 var(--display);letter-spacing:-.02em;margin-bottom:12px}

/* --- bibtex --- */
.bib-card{position:relative;padding:22px 24px}
.bib-card pre{margin:0;font:12.5px/1.65 var(--mono);color:#c5cad4;white-space:pre;overflow-x:auto}
.copy-btn{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:#15161b;color:#e6e7ec;font:500 12px var(--sans);padding:7px 12px;border-radius:7px;cursor:pointer}
.copy-btn:hover{border-color:#fff}
.copy-btn svg{width:13px;height:13px}

/* --- footer --- */
.site-footer{padding:44px 0 36px;border-top:1px solid var(--line);background:#08080a;margin-top:30px}
.paper-authors{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 28px;list-style:none;padding:0}
.paper-authors li{font:400 16px/1.4 var(--sans);color:var(--link);white-space:nowrap;padding:6px 0}
.paper-authors a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.paper-authors a:hover{border-bottom-color:currentColor}
.affils a{color:inherit;text-decoration:none}
.affils a:hover{text-decoration:underline}
.paper-authors sup{position:relative;top:-.35em;margin-left:3px;font-size:.62em;line-height:1;color:#8da6c4}
.affils{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:10px;font:11px var(--mono);letter-spacing:.04em;color:var(--dim)}
.affils sup{margin-right:4px;color:#8da6c4}
.footer-inner{display:flex;align-items:center;gap:50px;justify-content:space-between;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:15px;min-width:0}
.footer-brand img{height:30px;width:30px;object-fit:contain;filter:invert(1)}
.footer-brand strong{font:600 17px var(--display);display:block}
.footer-brand small{display:block;font:11px var(--mono);color:var(--dim);letter-spacing:.03em;margin-top:2px}
.footer-inner>p{font:italic 15px var(--serif);color:#969ba7}

/* --- reveal (only when scripts run; resting state visible) --- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
:is(a,button,summary,.strip-bar span):focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}

/* --- responsive --- */
@media(max-width:1000px){.scene-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.section-heading{flex-direction:column;align-items:flex-start;gap:12px}}
@media(max-width:760px){
  .nav-links a:not(.nav-cta){display:none}
  .brand small{display:none}
  .hero{min-height:0;padding:124px 0 70px}
  .hero-backdrop img{object-position:62% 50%}
  .hero-shade{background:linear-gradient(180deg,rgba(10,10,12,.86) 0%,rgba(10,10,12,.7) 55%,var(--bg) 100%)}
  .hero-links .ac-button{min-height:40px;padding:0 15px}
  section{padding:48px 0}
  #timing{margin-top:-10px}
  .strip{padding:16px 14px 14px}
  .strip-row{grid-template-columns:1fr;gap:4px}
  .strip-label{text-align:left}
  .strip-track{padding-right:110px}
  .ws-canvas{height:440px}
  .input-reference{top:12px;right:12px;width:92px;padding:5px}
  .input-reference img{width:80px;height:80px}
  .input-reference figcaption{font-size:7px;letter-spacing:.08em;margin-top:4px}
  .viewer-tip{font-size:10px;white-space:normal;text-align:center;max-width:80%}
  .scene-tabs{display:flex;gap:11px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
  .scene-tab{flex:0 0 164px;scroll-snap-align:start}
  .res-table{font-size:12.5px}
  .footer-inner{gap:18px}
  .footer-inner>p{font-size:13px}
}
