SuperHQ Motion experiment: locomotion and action checkpoints, runtime, clips, evaluation
6adbbb1 verified | :root{color-scheme:dark;--ink:#eef1e8;--muted:#b5c2b1;--accent:#d5ef9c}*{box-sizing:border-box}body{margin:0;background:#29342d;color:var(--ink);font:13px system-ui,sans-serif}button,select{font:inherit;color:inherit;cursor:pointer}button,select,summary{touch-action:manipulation}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{background:transparent;border:0;border-radius:6px;padding:10px 12px}button:hover{background:#ffffff12}button:disabled,select:disabled{opacity:.45;cursor:wait}button[aria-pressed=true],button.active{background:#d5ef9c20;color:var(--accent)}a{color:var(--accent)}#viewport{position:relative;overflow:hidden;outline:none;width:100%;height:100dvh;min-height:350px;touch-action:none}canvas{display:block;width:100%;height:100%}.tools{position:absolute;z-index:4;top:16px;right:18px;display:flex;align-items:center;background:#18211be8;border:1px solid #ffffff22;border-radius:8px;backdrop-filter:blur(12px)}.connection{display:flex;align-items:center;gap:7px;padding:0 12px;color:#d2deca;font-size:11px;pointer-events:none}.connection i{height:5px;width:5px;border-radius:100%;background:#d6bd77}.connection i.ready{background:var(--accent)}.connection i.failed{background:#ef977d}#help{position:relative;border-left:1px solid #ffffff22}#help>summary{list-style:none;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;color:#d4decb;font-size:14px;border-radius:0 7px 7px 0}#help>summary:hover,#help[open]>summary{background:#ffffff12}summary::-webkit-details-marker{display:none}.help-panel{position:absolute;right:0;top:44px;width:285px;max-height:calc(100dvh - 140px);overflow:auto;padding:20px;background:#18211bf5;border:1px solid #40513e;border-radius:10px;box-shadow:0 12px 60px #0a100e50}h2{font-size:13px;margin:0 0 17px;font-weight:600}dl{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:11px;margin:0 0 20px}dt{color:#c9d4c3}dd{margin:0;text-align:right;color:var(--muted)}kbd{font:10px system-ui;display:inline-block;padding:2px 5px;border:1px solid #ffffff30;border-bottom-width:2px;border-radius:4px;margin-left:3px;color:#cdd8c7;min-width:20px;text-align:center}#capture{display:inline;padding:0;color:var(--accent);font-size:11px;text-decoration:underline;text-underline-offset:3px;border-radius:0}#capture:hover{background:none;color:#efffcf}.help-panel p{font-size:11px;color:var(--muted);line-height:1.7;margin:14px 0}.help-panel details{border-top:1px solid #ffffff19;padding-top:14px;margin-top:18px;font-size:11px}.help-panel summary{cursor:pointer;color:#d1dcc9}.help-panel label{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.5}.help-panel input{accent-color:var(--accent)}.help-panel a{font-size:11px}.toolbar{position:absolute;z-index:3;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:3px;align-items:center;padding:6px;background:#18211bea;border:1px solid #ffffff22;border-radius:12px;box-shadow:0 10px 40px #111a1350;white-space:nowrap;backdrop-filter:blur(12px)}.toolbar select{border:0;background:transparent;border-radius:5px;padding:10px 25px 10px 10px;max-width:120px;font-size:12px}.toolbar select option{background:#1b251d}.toolbar button{font-size:12px;display:flex;align-items:center;gap:9px}.toolbar kbd{margin-left:0;font-size:9px;padding:1px 4px;color:#a9b69e}.toolbar #pause,.toolbar #reset{font-size:17px;min-width:35px;justify-content:center;padding:7px}.divider{width:1px;height:19px;background:#ffffff22;margin:0 5px}.motion-state{position:absolute;left:22px;bottom:27px;max-width:240px;pointer-events:none}.motion-state strong{display:block;font-size:13px;font-weight:500}.motion-state span{display:block;margin-top:6px;font-size:10px;line-height:1.6;color:var(--muted)}#reticle{position:absolute;top:50%;left:50%;font:300 20px system-ui;color:#ffffff90;display:none;pointer-events:none}body.focus #reticle{display:block}#scene-error{position:absolute;z-index:8;top:65px;left:22px;right:22px;padding:18px;background:#402c26;border:1px solid #d99a7e;border-radius:8px;line-height:1.6;white-space:pre-wrap}#demo-note{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);text-align:center;font-size:11px;color:var(--muted);max-width:80%;pointer-events:none}[hidden]{display:none}@media(max-width:1100px){.motion-state{bottom:90px;max-width:260px}}@media(max-width:540px){.toolbar{bottom:15px;gap:0;padding:4px}.toolbar select{font-size:11px;max-width:90px;padding:8px}.toolbar button{font-size:10px;padding:9px 7px;gap:5px}.toolbar kbd{display:none}.divider{margin:0 2px}.motion-state{left:16px;bottom:82px}.tools{right:12px;top:12px}.help-panel{width:min(285px,calc(100vw - 24px))}} | |
| .telemetry{position:absolute;right:22px;bottom:29px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none}.telemetry .separator{padding:0 5px}.help-footer{border-top:1px solid #ffffff19;padding-top:15px;margin-top:5px;display:flex;align-items:center;justify-content:space-between;gap:12px}.help-footer label{font-size:10px}.help-footer a{font-size:10px;text-decoration:none}.help-footer a:hover{text-decoration:underline}@media(max-width:1100px){.telemetry{bottom:93px}}@media(max-width:540px){.telemetry{bottom:84px;right:14px;font-size:9px}.motion-state{max-width:175px}.motion-state strong{font-size:11px}.motion-state span{font-size:9px}} | |
| @media(max-width:540px){.toolbar #demo{display:none}} | |