Spaces:
Running
Running
| <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>3D workbench</title><style> | |
| :root{--bg:#0b1020;--fg:#e8eefb;--dim:#8ea0c2;--line:#1e2a45;--card:#111a2e; | |
| --accent:#ffc46b;--ok:#7be0a0;--bad:#ff8f7a; | |
| --s0:12px;--s1:14px;--s2:16px;--s3:20px;--s4:28px;--s5:40px} | |
| *{box-sizing:border-box} | |
| body{margin:0;background:var(--bg);color:var(--fg);font-size:var(--s2); | |
| font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.6} | |
| .wrap{max-width:1100px;margin:0 auto;padding:0 20px 72px} | |
| a{color:var(--accent)} | |
| h1{font-size:var(--s5);line-height:1.15;margin:40px 0 8px;font-weight:650} | |
| h2{font-size:var(--s4);margin:44px 0 10px;font-weight:600} | |
| h3{font-size:var(--s3);margin:28px 0 6px;font-weight:600} | |
| p{margin:10px 0;max-width:70ch} | |
| .dim{color:var(--dim);font-size:var(--s1)} | |
| .bad{color:var(--bad);font-size:var(--s0)} | |
| nav{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px} | |
| nav a{display:inline-block;padding:10px 16px;min-height:44px;line-height:24px; | |
| border:1px solid var(--line);border-radius:999px;text-decoration:none; | |
| background:var(--card)} | |
| nav a[aria-current]{border-color:var(--accent)} | |
| .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); | |
| gap:12px;margin:20px 0} | |
| .card{background:var(--card);border:1px solid var(--line);border-radius:12px; | |
| padding:16px} | |
| .card b{display:block;font-size:var(--s4);color:var(--accent);font-weight:650} | |
| .card span{color:var(--dim);font-size:var(--s1)} | |
| figure{margin:24px 0} | |
| figure img{width:100%;border-radius:10px;border:1px solid var(--line); | |
| background:#fff} | |
| figcaption{color:var(--dim);font-size:var(--s1);margin-top:8px;max-width:80ch} | |
| table{border-collapse:collapse;width:100%;margin:14px 0;font-size:var(--s1)} | |
| th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:right} | |
| th:first-child,td:first-child{text-align:left} | |
| th{color:var(--dim);font-weight:500} | |
| td b{color:var(--ok)} | |
| details{background:var(--card);border:1px solid var(--line);border-radius:10px; | |
| padding:12px 16px;margin:16px 0} | |
| summary{cursor:pointer;color:var(--dim);font-size:var(--s1);min-height:44px; | |
| display:flex;align-items:center} | |
| code{background:#0d1526;padding:2px 6px;border-radius:5px;font-size:var(--s1)} | |
| /* Inline links in prose measured 47x16 and 54x16 at 375 px — a tap target, | |
| because a finger does not know it is "only prose". Padding alone would | |
| break the line box, so the height comes from an inline-block with the | |
| line-height carrying it. */ | |
| p a,figcaption a{display:inline-block;min-height:44px;line-height:44px; | |
| padding:0 2px} | |
| /* The <pre> pipeline diagram and the results table are the two things wider | |
| than a phone. Let each scroll inside its own box rather than pushing the | |
| document sideways — a horizontally scrolling PAGE hides content with no | |
| affordance, a scrolling code block is a known idiom. */ | |
| pre{background:var(--card);border:1px solid var(--line);border-radius:10px; | |
| padding:14px 16px;overflow-x:auto;font-size:var(--s1);max-width:100%} | |
| .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} | |
| .tablewrap table{min-width:640px} | |
| img{max-width:100%;height:auto} | |
| /* Subscripts default to a fraction of the parent and rendered at 11.7px — | |
| off the --s0..--s5 scale the audit counts. Pinned to the smallest step. */ | |
| sub,sup{font-size:var(--s0);line-height:0} | |
| </style></head><body><div class="wrap"><nav><a href="index.html">overview</a><a href="method.html">method</a><a href="results.html">results</a><a href="sensors.html">sensors</a><a href="gallery.html">gallery</a><a href="workbench.html" aria-current="page">3D workbench</a></nav> | |
| <h1>3D workbench</h1> | |
| <p>Every stage of the reconstruction on one frame, with its knobs: difference | |
| image, gradient field, integrated depth, surface.</p> | |
| <figure><img src="assets/recon_compare.png" alt="reconstruction comparison"> | |
| <figcaption>Three React presses through three reconstructions. Flat-gel leak — | |
| depth away from the contact, which must be zero — is printed on each | |
| panel.</figcaption></figure> | |
| </div></body></html> |