@oracle-agent/oracle 0.4.2 → 0.6.0

package/public/oracle-splash/index.html

@@ -4,12 +4,12 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>ORACLE</title>
-<meta name="description" content="Oracle multichain agent control. Routes across EVM + Solana. Self-custody. Powered by Hermes." />
+<meta name="description" content="Oracle multichain agent control. Prepare-only public plane. Self-custody. Powered by Hermes." />
 <meta name="theme-color" content="#0B1018" />
 <meta name="robots" content="noindex,nofollow" />
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Outfit:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:wght@500;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@500;650;750;850&family=UnifrakturCook:wght@700&family=Manrope:wght@600;800&family=Outfit:wght@300;400;500;700&family=Sora:wght@500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet" />
 <style>
 :root{
  --bg:#0B1018;
@@ -19,8 +19,8 @@
  --blue2:#A7D8FF;
  --blue-dim:#3a6f99;
  --ink:#E8F1FA;
- --cool:#9BB6D1;
- --mute:#5B738F;
+ --cool:#B7CCE0;
+ --mute:#89A3BE;
  --line:rgba(124,196,255,.14);
  --line-2:rgba(124,196,255,.24);
  --evm:#7CC4FF;
@@ -39,18 +39,33 @@
 *{box-sizing:border-box;margin:0;padding:0}
 html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
 body{
- min-height:100dvh;background:var(--bg);color:var(--ink);
- font-family:var(--sans);font-weight:300;overflow-x:hidden;
+ min-height:100dvh;background:var(--bg);color:var(--ink);position:relative;isolation:isolate;
+ font-family:var(--sans);font-weight:350;overflow-x:hidden;
 }
 ::selection{background:var(--blue);color:#061018}
 a{color:inherit;text-decoration:none}
 button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
+img{display:inline-block}
 
 .grain{
  position:fixed;inset:-40%;z-index:40;pointer-events:none;opacity:.04;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
 }
 
+/* ── orbital oracle mark ───────────────────────────── */
+.orbital{position:relative;display:inline-block}
+.orbital svg{display:block;overflow:visible;width:100%;height:100%}
+.orbital .ring{transform-origin:50% 50%;fill:none;stroke:var(--blue);stroke-width:2;opacity:.55}
+.orbital .ring ellipse{vector-effect:non-scaling-stroke}
+.orbital .r1{animation:orb-spin 13s linear infinite}
+.orbital .r2{animation:orb-spin 21s linear infinite reverse;opacity:.4}
+.orbital .r3{animation:orb-spin 32s linear infinite;opacity:.28}
+.orbital .tickring{transform-origin:50% 50%;fill:none;stroke:rgba(124,196,255,.35);stroke-width:1.4;stroke-dasharray:2 7;animation:orb-spin 46s linear infinite reverse}
+.orbital .core{fill:var(--blue);animation:core-pulse 3.2s var(--ease) infinite}
+.orbital .halo{fill:none;stroke:rgba(124,196,255,.22);stroke-width:5;filter:blur(3px)}
+@keyframes orb-spin{to{transform:rotate(360deg)}}
+@keyframes core-pulse{0%,100%{opacity:1}50%{opacity:.55}}
+
 .loader{
  position:fixed;inset:0;z-index:50;background:var(--bg);
  display:grid;place-items:center;
@@ -58,22 +73,25 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 }
 .loader.out{opacity:0;visibility:hidden;pointer-events:none}
 .loader-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
-.loader-mark{width:42px;height:42px;position:relative}
-.loader-mark i{position:absolute;inset:0;border:1px solid var(--blue);border-radius:50%;animation:pulse 1.4s var(--ease) infinite;opacity:.35}
-.loader-mark b{position:absolute;inset:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 24px rgba(124,196,255,.5)}
+.loader-mark{width:64px;height:64px;filter:drop-shadow(0 0 18px rgba(124,196,255,.4))}
 .loader-word{font-family:var(--display);font-size:18px;letter-spacing:.08em;text-transform:none;color:var(--cool);font-style:italic}
 .loader-bar{width:120px;height:1px;background:rgba(124,196,255,.15);overflow:hidden}
 .loader-bar span{display:block;height:100%;width:0;background:var(--blue);transition:width 1.1s var(--ease)}
-@keyframes pulse{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
+
+.progress{
+ position:fixed;top:0;left:0;right:0;height:2px;z-index:35;pointer-events:none;
+ background:linear-gradient(90deg,var(--blue),var(--blue2));
+ transform-origin:0 50%;transform:scaleX(0);
+ box-shadow:0 0 12px rgba(124,196,255,.5);
+}
 
 .nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:grid;
- grid-template-columns:1fr auto 1fr;
+ grid-template-columns:1fr auto;
  align-items:center;gap:16px;
- padding:16px var(--pad);
+ padding:14px var(--pad);
  background:rgba(11,16,24,.82);
- backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
 }
 .brand{
@@ -81,23 +99,17 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:.02em;
  text-transform:none;justify-self:start;
 }
-.brand .orb{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px rgba(124,196,255,.85)}
-.nav-mid{
- display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;
- font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
-}
-.nav-mid b{color:var(--blue2);font-weight:500}
-.nav-mid a.hermes{
- color:var(--blue);font-weight:600;border-bottom:1px solid transparent;
- transition:border-color .25s,color .25s;
-}
-.nav-mid a.hermes:hover{border-bottom-color:var(--blue);color:var(--ink)}
+.brand .orbital{width:26px;height:26px;filter:drop-shadow(0 0 10px rgba(124,196,255,.6))}
 .nav-links{
  display:flex;align-items:center;gap:18px;justify-self:end;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cool);
 }
 .nav-links a{opacity:.78;transition:opacity .25s,color .25s}
 .nav-links a:hover{opacity:1;color:var(--blue2)}
+.nav-chip{
+ font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
+ border:1px solid rgba(124,196,255,.3);border-radius:999px;padding:7px 11px;color:var(--blue2);opacity:.95;
+}
 .nav-cta{
  border:1px solid rgba(124,196,255,.28);border-radius:999px;padding:10px 16px;color:var(--ink);
  transition:border-color .3s,color .3s,box-shadow .3s;
@@ -105,17 +117,86 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 .nav-cta:hover{border-color:var(--blue);color:var(--blue2);box-shadow:0 0 0 1px rgba(124,196,255,.12)}
 
 /* fixed soft field behind content */
-#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:.9}
+#gl{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;opacity:.75;pointer-events:none}
 .veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
- radial-gradient(60% 50% at 50% 28%, rgba(124,196,255,.08), transparent 58%),
- linear-gradient(180deg, rgba(11,16,24,.2), var(--bg) 88%);
+  radial-gradient(60% 50% at 50% 28%, rgba(124,196,255,.10), transparent 58%),
+  linear-gradient(180deg, rgba(11,16,24,.12), rgba(11,16,24,.42));
 }
 main{position:relative;z-index:2;padding-top:84px}
 
-/* kill old hero */
-.hero,.hero-core,.title-powered,.scroll-cue,.eyebrow,.lede,.actions,.btn,.meta-row{display:none!important}
+
+/* homepage */
+.home{
+ min-height:calc(100dvh - 84px);
+ display:grid;place-items:center;
+ padding:clamp(20px,4vh,44px) var(--pad) clamp(56px,9vh,96px);
+ position:relative;overflow:hidden;text-align:center;
+}
+.home::after{
+ content:"";position:absolute;left:50%;bottom:22px;width:1px;height:74px;
+ background:linear-gradient(180deg, rgba(124,196,255,.65), transparent);
+ transform-origin:50% 0;animation:drop-line 2.8s var(--ease) infinite;
+}
+.home-inner{max-width:min(1100px,100%);width:100%;margin:0 auto;position:relative;display:flex;flex-direction:column;align-items:center}
+.home-kicker{
+ font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--blue);
+ margin-bottom:6px;position:relative;z-index:3;
+}
+.hero-stage{position:relative;width:100%;display:grid;place-items:center;min-height:clamp(360px,52vh,560px)}
+.hero-art{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none}
+#orb-vid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(74vw,620px);aspect-ratio:1;object-fit:contain;opacity:0;transition:opacity 1.4s var(--ease);mix-blend-mode:screen}
+#orb-vid.ready{opacity:.5}
+.blender-orb .hero-orb{display:none}
+.hero-orb{
+ width:clamp(380px,50vw,640px);aspect-ratio:1;position:relative;transform-style:preserve-3d;
+ animation:orb-slew 22s linear infinite;
+}
+.hero-orb .lat{position:absolute;inset:0;border-radius:50%;border:1.4px solid rgba(124,196,255,.5);transform-style:preserve-3d;box-shadow:0 0 26px rgba(124,196,255,.12)}
+.hero-orb .lat.l1{transform:rotateY(0deg)}
+.hero-orb .lat.l2{transform:rotateY(45deg)}
+.hero-orb .lat.l3{transform:rotateY(90deg)}
+.hero-orb .lat.l4{transform:rotateY(135deg)}
+.hero-orb .par{position:absolute;left:50%;top:50%;border-radius:50%;border:1.2px solid rgba(124,196,255,.38);transform-style:preserve-3d}
+.hero-orb .par.p1{width:96%;height:96%;transform:translate(-50%,-50%) rotateX(90deg)}
+.hero-orb .par.p2{width:78%;height:78%;transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(clamp(380px,50vw,640px) * .31))}
+.hero-orb .par.p3{width:78%;height:78%;transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(clamp(380px,50vw,640px) * -.31))}
+.hero-orb .eq{position:absolute;inset:-4%;border-radius:50%;border:2px solid rgba(167,216,255,.75);transform:rotateX(76deg);box-shadow:0 0 40px rgba(124,196,255,.35)}
+.hero-orb .core-glow{
+ position:absolute;inset:33%;border-radius:50%;
+ background:radial-gradient(circle at 40% 36%, rgba(232,241,250,.9), rgba(124,196,255,.65) 34%, rgba(124,196,255,.12) 68%, transparent);
+ box-shadow:0 0 46px rgba(124,196,255,.45), 0 0 110px rgba(124,196,255,.18);
+ animation:core-pulse 3.4s var(--ease) infinite;
+}
+.hero-orb .orbit-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--blue2);box-shadow:0 0 20px rgba(167,216,255,.9);left:calc(50% - 5px);top:calc(50% - 5px);transform:rotateX(76deg) translateX(clamp(170px,23vw,280px));animation:none}
+.home-title{
+ position:relative;z-index:2;
+ font-family:var(--display);font-weight:300;font-size:clamp(96px,17vw,230px);line-height:.9;letter-spacing:-.045em;
+ text-transform:uppercase;color:var(--ink);
+ text-shadow:0 2px 30px rgba(0,0,0,.6);
+}
+.home-title em{font-style:italic;color:var(--blue2)}
+.hero-lockup{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
+.hero-byline{margin-top:12px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--blue2);position:relative;z-index:3}
+.hero-byline:hover{color:var(--ink)}
+.home-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
+.home-copy p:not(.home-kicker){max-width:56ch;color:#aac0d6;font-size:16px;line-height:1.7;margin:18px 0 0;text-shadow:0 1px 20px rgba(0,0,0,.65)}
+.home-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;align-items:center;justify-content:center}
+.enter-cta{
+ display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(124,196,255,.45);border-radius:999px;
+ padding:14px 22px;color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
+ background:linear-gradient(180deg, rgba(124,196,255,.12), rgba(124,196,255,.035));
+ box-shadow:0 0 0 1px rgba(124,196,255,.08),0 20px 46px rgba(0,0,0,.3);
+ transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
+}
+.enter-cta::after{content:"↓";font-size:13px;color:var(--blue)}
+.enter-cta:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 0 0 1px rgba(124,196,255,.18),0 24px 58px rgba(0,0,0,.36)}
+.hero-note{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
+@keyframes orb-slew{0%{transform:rotateX(18deg) rotateZ(-8deg) rotateY(0deg)}100%{transform:rotateX(18deg) rotateZ(-8deg) rotateY(360deg)}}
+@keyframes home-breathe{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
+@keyframes drop-line{0%,100%{opacity:.25;transform:translateX(-50%) scaleY(.45)}50%{opacity:1;transform:translateX(-50%) scaleY(1)}}}
+
 
 .section{
  position:relative;z-index:2;max-width:var(--max);margin:0 auto;
@@ -124,85 +205,15 @@ main{position:relative;z-index:2;padding-top:84px}
 .section:first-of-type{padding-top:clamp(18px,3vh,28px)}
 .section-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;
-}
-.veil{
- position:absolute;inset:0;z-index:1;pointer-events:none;
- background:
- radial-gradient(70% 55% at 50% 42%, transparent 0%, rgba(11,16,24,.3) 48%, var(--bg) 82%),
- linear-gradient(180deg, rgba(11,16,24,.28) 0%, transparent 24%, transparent 70%, var(--bg) 100%);
-}
-.hero-core{
- position:relative;z-index:2;width:min(920px,100%);
- display:flex;flex-direction:column;align-items:center;text-align:center;
- gap:clamp(18px,3vw,28px);
-}
-.eyebrow{
- font-family:var(--mono);font-size:11px;letter-spacing:.46em;text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:12px;
 }
-.eyebrow::before,.eyebrow::after{content:"";width:28px;height:1px;background:var(--blue-dim)}
-h1{
- font-family:var(--display);font-weight:300;
- font-size:clamp(78px,17vw,176px);line-height:.86;letter-spacing:.01em;
- text-transform:none;
-}
-h1 em{
- font-style:italic;font-weight:400;
- background:linear-gradient(110deg, var(--blue2) 8%, var(--blue) 48%, #cfe9ff 100%);
- -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
-}
-.title-powered{
- display:inline-flex;align-items:center;gap:10px;
- margin-top:-6px;
- font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);
-}
-.title-powered .mark{
- width:6px;height:6px;border-radius:50%;background:var(--blue);
- box-shadow:0 0 10px rgba(124,196,255,.7);
-}
-.title-powered a{
- color:var(--blue);font-weight:500;border-bottom:1px solid transparent;
- transition:border-color .25s,color .25s;letter-spacing:.2em;
-}
-.title-powered a:hover{border-bottom-color:var(--blue);color:var(--ink)}
-.lede{max-width:34ch;font-size:clamp(15px,1.7vw,18px);line-height:1.65;color:var(--cool);font-weight:300}
-.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
-.btn{
- font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
- border-radius:999px;padding:15px 26px;
- transition:transform .3s var(--ease),box-shadow .35s,background .3s,border-color .3s,color .3s;
-}
-.btn-primary{background:var(--blue);color:#061018;font-weight:500}
-.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(124,196,255,.28)}
-.btn-ghost{border:1px solid var(--line);color:var(--cool)}
-.btn-ghost:hover{border-color:var(--blue-dim);color:var(--blue2)}
-.meta-row{
- margin-top:10px;display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
- font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
-}
-.meta-row span{display:inline-flex;align-items:center;gap:8px}
-.meta-row i{width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.75;box-shadow:0 0 8px rgba(124,196,255,.6)}
-.scroll-cue{
- position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;
- display:flex;flex-direction:column;align-items:center;gap:10px;
- font-family:var(--mono);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);
-}
-.scroll-cue .line{width:1px;height:42px;background:linear-gradient(var(--blue),transparent)}
-
-.section{
- position:relative;z-index:2;max-width:var(--max);margin:0 auto;
- padding:clamp(72px,12vh,130px) var(--pad) 0;
-}
-.section-label{
- font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;
-}
 .section-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,5vw,54px);line-height:1.06;letter-spacing:-.01em;
- max-width:16ch;margin-bottom:12px;
+ max-width:18ch;margin-bottom:12px;
 }
 .section-title em{font-style:italic;color:var(--blue2)}
-.section-lede{max-width:50ch;color:var(--cool);font-size:15px;line-height:1.65;margin-bottom:clamp(28px,4vw,44px)}
+.section-lede{max-width:52ch;color:#B7CCE0;font-size:16px;line-height:1.7;margin-bottom:clamp(28px,4vw,44px)}
 
 /* orchestration graph */
 .graph-shell{
@@ -210,9 +221,9 @@ h1 em{
  background:linear-gradient(180deg, rgba(124,196,255,.04), transparent 42%), var(--panel);
 }
 .graph-top{
- display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
+ display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--line);
- font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
+ font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#88A6C2;
 }
 .graph-top b{color:var(--blue);font-weight:500}
 .graph-canvas{padding:clamp(28px,4vw,40px) clamp(14px,2.5vw,24px) clamp(22px,3vw,30px);overflow:auto}
@@ -237,39 +248,54 @@ h1 em{
  .route-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
 }
 .node{
- border:1px solid var(--line-2);border-radius:14px;background:rgba(11,16,24,.72);
+ border:1px solid rgba(124,196,255,.42);border-radius:14px;background:rgba(21,32,49,.92);
  padding:14px 12px;text-align:center;
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s;
 }
 .node:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.28)}
 .node.hub{
- width:min(280px,100%);
+ width:min(300px,100%);
  border-color:rgba(124,196,255,.5);
  background:linear-gradient(180deg, rgba(124,196,255,.12), rgba(11,16,24,.88));
  box-shadow:0 0 0 1px rgba(124,196,255,.08), 0 16px 40px rgba(0,0,0,.3);
- padding:18px 16px;
+ padding:18px 16px 20px;
+ display:flex;flex-direction:column;align-items:center;
 }
-.node .tag{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
+.node.hub .orbital{width:74px;height:74px;margin:2px 0 10px;filter:drop-shadow(0 0 20px rgba(124,196,255,.35))}
+.node .tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#88A6C2;margin-bottom:8px}
 .node.hub .tag{color:var(--blue)}
-.node .name{font-family:var(--display);font-size:22px;line-height:1;letter-spacing:.01em;margin-bottom:6px}
-.node.hub .name{font-size:34px;font-weight:400}
-.node .sub{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--cool);line-height:1.45}
-.node.route{min-height:132px;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;padding:14px}
+.node .name{font-family:var(--display);font-size:22px;font-weight:500;color:#DCEAF6;line-height:1;letter-spacing:.01em;margin-bottom:6px}
+.node.hub .name{font-size:34px;font-weight:400;font-style:italic}
+.node .sub{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#AAC4DC;line-height:1.5}
+.node.route{min-height:138px;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;padding:14px}
 .node.route .name{font-size:18px;margin-bottom:8px}
 .node.route .chains{
  margin-top:auto;padding-top:10px;
- font-family:var(--mono);font-size:10px;letter-spacing:.04em;line-height:1.55;
+ font-family:var(--mono);font-size:10px;letter-spacing:.04em;line-height:1.7;
+ display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;
 }
+.ch{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
+.ch img{width:13px;height:13px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
 .node.add{
  border-style:dashed;border-color:rgba(124,196,255,.28);
  background:rgba(11,16,24,.35);
- min-height:132px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
+ min-height:138px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  text-align:left;padding:14px;
 }
 .node.add .name{font-size:18px;color:var(--blue2)}
 .node.add .sub{color:var(--mute)}
 .node.add:hover{border-color:rgba(124,196,255,.55);background:rgba(124,196,255,.06)}
 
+.builder-row{margin-top:0;display:flex;justify-content:center}
+.node.builder-sink{width:min(430px,100%);text-align:center;align-items:center;min-height:162px;position:relative}
+.node.builder-sink .name{font-size:26px}
+.node.builder-sink .chains{justify-content:center}
+.wires.funnel{height:62px}
+.wires.funnel path{stroke:rgba(255,176,137,.48)}
+.wires.funnel path:nth-child(2n){stroke:rgba(124,196,255,.32)}
+.wires.funnel circle{fill:#ffb089}
+
+
 /* protocol colors */
 .node.p-hl{border-color:rgba(80,210,193,.45);background:linear-gradient(180deg, rgba(80,210,193,.14), rgba(11,16,24,.88))}
 .node.p-hl .tag,.node.p-hl .name{color:var(--hl)}
@@ -338,16 +364,13 @@ h1 em{
 .moat-card{
  background:var(--bg);padding:clamp(20px,3vw,28px);min-height:140px;
  display:flex;flex-direction:column;gap:10px;
+ transition:background .35s;
 }
 .moat-card:hover{background:var(--panel-2)}
 .moat-card .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
 .moat-card h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,26px)}
-.moat-card p{color:var(--cool);font-size:14px;line-height:1.55;max-width:40ch}
+.moat-card p{color:#B7CCE0;font-size:15px;line-height:1.55;max-width:44ch}
 @media (max-width:860px){.moat-grid{grid-template-columns:1fr}}
-.posture-chip{
- font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
- border:1px solid rgba(124,196,255,.35);border-radius:999px;padding:6px 10px;color:var(--blue2);
-}
 .evolve-rail{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  padding:14px 16px 4px;
@@ -360,20 +383,26 @@ h1 em{
 
 .wires{height:40px;position:relative}
 .wires svg{width:100%;height:100%;display:block;overflow:visible}
-.wires path{fill:none;stroke:rgba(124,196,255,.35);stroke-width:1.25;stroke-linecap:round}
-.wires circle{fill:var(--blue)}
+.wires path{
+ fill:none;stroke:rgba(124,196,255,.58);stroke-width:1.5;stroke-linecap:round;
+ stroke-dasharray:1;stroke-dashoffset:1;
+ transition:stroke-dashoffset 1.3s var(--ease);
+}
+.wires.in path{stroke-dashoffset:0}
+.wires path.w-2{transition-delay:.12s}
+.wires path.w-3{transition-delay:.2s}
+.wires path.w-4{transition-delay:.28s}
+.wires path.w-5{transition-delay:.36s}
+.wires circle{fill:var(--blue);opacity:0;transition:opacity .5s var(--ease) .7s}
+.wires.in circle{opacity:1}
 .wires.multi path.w-poly{stroke:rgba(59,130,246,.55)}
 .wires.multi path.w-hl{stroke:rgba(80,210,193,.55)}
 .wires.multi path.w-rh{stroke:rgba(215,255,77,.6)}
 .wires.multi path.w-sol{stroke:rgba(153,69,255,.55)}
-.wires.multi path.w-stable{stroke:rgba(240,185,11,.55)}
-.wires.multi path.w-add{stroke:rgba(124,196,255,.35);stroke-dasharray:3 3}
 .wires.multi circle.c-poly{fill:var(--poly)}
 .wires.multi circle.c-hl{fill:var(--hl)}
 .wires.multi circle.c-rh{fill:var(--rh)}
 .wires.multi circle.c-sol{fill:var(--sol)}
-.wires.multi circle.c-stable{fill:var(--stable)}
-.wires.multi circle.c-add{fill:var(--blue2)}
 
 /* route detail cards */
 .route-card{
@@ -381,18 +410,18 @@ h1 em{
  display:flex;flex-direction:column;gap:10px;transition:background .35s;
 }
 .route-card:hover{background:var(--panel-2)}
-.route-card h3{font-family:var(--display);font-weight:400;font-size:26px}
+.route-card h3{font-family:var(--display);font-weight:400;font-size:26px;display:flex;align-items:center;gap:10px}
+.route-card h3 img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
 .route-card .where{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
-.route-card p{color:var(--cool);font-size:13.5px;line-height:1.55}
+.route-card p{color:#B7CCE0;font-size:15px;line-height:1.55}
 .route-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
+.route-card.p-add{grid-column:1/-1;align-items:center;text-align:center;justify-content:center;gap:14px;padding:30px 22px}
+.route-card.p-add .chips{justify-content:center;margin-top:4px}
+.route-card.p-add p{max-width:46ch}
 .chip-s{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:5px 8px;color:var(--cool);
 }
-.route-card .why{
- margin-top:4px;padding-top:12px;border-top:1px solid var(--line);
- font-family:var(--display);font-style:italic;font-size:17px;line-height:1.45;color:var(--blue2);
-}
 .why-band{
  border-top:1px solid var(--line);
  padding:22px 24px 24px;
@@ -410,6 +439,16 @@ h1 em{
 
 /* chains */
 .chain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
+.hl-surface{margin-top:34px;border:1px solid var(--line);border-radius:14px;padding:20px;background:rgba(124,196,255,.02)}
+.hl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
+.hl-grid article{border:1px solid var(--line);border-radius:10px;padding:14px 15px;background:rgba(255,255,255,.012)}
+.hl-grid h3{font-family:var(--display);font-size:15px;font-weight:500;color:var(--ink);margin:0 0 6px}
+.hl-grid p{font-size:14px;line-height:1.6;color:#B7CCE0;margin:0}
+.hl-note{margin:16px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--cool);opacity:.62}
+.hip3{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
+.hl-note code{font-family:var(--mono);color:var(--blue2);opacity:.9}
+@media(max-width:900px){.hl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(max-width:620px){.hl-grid{grid-template-columns:1fr}}
 .chain{
  border:1px solid var(--line);border-radius:14px;padding:16px;
  background:linear-gradient(180deg, rgba(124,196,255,.035), transparent 55%), var(--panel);
@@ -417,9 +456,10 @@ h1 em{
  transition:border-color .3s,transform .3s var(--ease);
 }
 .chain:hover{border-color:rgba(124,196,255,.35);transform:translateY(-2px)}
-.chain-top{display:flex;justify-content:space-between;gap:8px}
-.chain .nm{font-family:var(--display);font-size:20px}
-.chain .id{font-family:var(--mono);font-size:11px;color:var(--blue)}
+.chain-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
+.chain .nm{font-family:var(--display);font-size:20px;display:flex;align-items:center;gap:8px}
+.chain .nm img{width:18px;height:18px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
+.chain .id{font-family:var(--mono);font-size:11px;color:var(--blue);white-space:nowrap;padding-top:4px}
 .chain .meta{
  display:flex;justify-content:space-between;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
@@ -431,14 +471,48 @@ h1 em{
 .venues-head{
  padding:11px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
+ display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
 }
+.venues-head b{color:var(--blue);font-weight:500}
 .marquee{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
-.track{display:inline-flex;gap:24px;padding:13px 0;animation:scroll 42s linear infinite;will-change:transform}
+.marquee + .marquee{border-top:1px solid rgba(124,196,255,.08)}
+.track{display:inline-flex;gap:26px;padding:12px 0;animation:scroll 48s linear infinite;will-change:transform}
+.marquee.rev .track{animation-direction:reverse;animation-duration:56s}
 .chip{
- display:inline-flex;align-items:center;gap:8px;
- font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cool);
-}
-.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.75}
+ display:inline-flex;align-items:center;gap:10px;
+ font-size:15px;letter-spacing:-.015em;text-transform:none;color:var(--proto-color,var(--cool));
+ padding:8px 13px;border:1px solid rgba(124,196,255,.1);border-radius:999px;background:rgba(11,16,24,.38);
+ box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
+}
+.chip img{width:18px;height:18px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
+.chip.wm-chip{padding:10px 16px}
+.chip img.wm{width:auto;height:20px;max-width:150px;border-radius:0;object-fit:contain;background:none;opacity:.92}
+.chip img.wm.tall{height:22px;max-width:26px}
+
+.chip .wordmark{font-family:var(--proto-font,var(--sans));font-weight:var(--proto-weight,750);font-style:var(--proto-style,normal);text-transform:var(--proto-transform,none);letter-spacing:var(--proto-track,-.025em);line-height:1.2}
+.proto-uniswap{--proto-font:"Inter",var(--sans);--proto-color:#ff4dcb;--proto-weight:850}
+.proto-hyperliquid{--proto-font:var(--display);--proto-style:italic;--proto-color:#50d2c1;--proto-weight:500;--proto-track:.01em}
+.proto-polymarket{--proto-font:"Manrope",var(--sans);--proto-color:#7aa7ff;--proto-weight:800;--proto-track:-.035em}
+.proto-aerodrome,.proto-velodrome{--proto-font:"Space Grotesk",var(--sans);--proto-color:#f2f7ff;--proto-weight:700;--proto-transform:lowercase}
+.proto-pancakeswap{--proto-font:"DM Sans",var(--sans);--proto-color:#d1884f;--proto-weight:700}
+.proto-quickswap{--proto-font:"Archivo Black",var(--sans);--proto-color:#35a7ff;--proto-weight:800;--proto-transform:uppercase;--proto-track:.005em}
+.proto-lfj{--proto-font:"Sora",var(--sans);--proto-color:#ff6357;--proto-weight:700;--proto-transform:uppercase;--proto-track:.05em}
+.proto-hyperswap{--proto-font:"Space Grotesk",var(--sans);--proto-color:#69f0d8;--proto-weight:700}
+.proto-curve{--proto-font:"Times New Roman",serif;--proto-color:#f7f3dd;--proto-weight:700;--proto-track:.01em}
+.proto-balancer{--proto-font:"Inter",var(--sans);--proto-color:#f6f6f6;--proto-weight:850;--proto-track:-.055em}
+.proto-pendle{--proto-font:"Sora",var(--sans);--proto-color:#a7f3d0;--proto-weight:700}
+.proto-morpho{--proto-font:"Manrope",var(--sans);--proto-color:#75b9ff;--proto-weight:800;--proto-track:-.04em}
+.proto-gmx{--proto-font:"Archivo Black",var(--sans);--proto-color:#41d3ff;--proto-weight:800;--proto-transform:uppercase;--proto-track:.04em}
+.proto-lifi{--proto-font:"Inter",var(--sans);--proto-color:#d8b4fe;--proto-weight:850;--proto-transform:uppercase;--proto-track:.02em}
+.proto-relay{--proto-font:"Space Grotesk",var(--sans);--proto-color:#f2f7ff;--proto-weight:700;--proto-transform:lowercase}
+.proto-paraswap{--proto-font:"Manrope",var(--sans);--proto-color:#ff9a76;--proto-weight:800}
+.proto-odos{--proto-font:"Sora",var(--sans);--proto-color:#f0f9ff;--proto-weight:700;--proto-transform:lowercase}
+.proto-cow{--proto-font:"DM Sans",var(--sans);--proto-color:#fcd34d;--proto-weight:700}
+.proto-oneinch{--proto-font:"Inter",var(--sans);--proto-color:#9ec5ff;--proto-weight:850;--proto-track:-.045em}
+.proto-jupiter{--proto-font:"Space Grotesk",var(--sans);--proto-color:#f6a5ff;--proto-weight:700}
+.proto-across{--proto-font:"Manrope",var(--sans);--proto-color:#ff6b9b;--proto-weight:800}
+.proto-stargate{--proto-font:"Sora",var(--sans);--proto-color:#9ddcff;--proto-weight:700}
+.proto-magic-eden{--proto-font:"Archivo Black",var(--sans);--proto-color:#dfc7ff;--proto-weight:800;--proto-track:.01em}
 @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
 
 .wallet-grid{
@@ -463,7 +537,9 @@ h1 em{
  .wallet-grid{grid-template-columns:1fr}
 }
 
-footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);padding:32px var(--pad) 40px}
+footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);padding:32px var(--pad) 40px;position:relative;z-index:2}
+.labs-link{font-family:"UnifrakturCook","Old English Text MT","Lucida Blackletter",serif;font-size:16px;letter-spacing:.04em;text-transform:none;color:var(--blue2)}
+.labs-link:hover{color:var(--ink)}
 .foot-row{
  max-width:var(--max);margin:0 auto 14px;
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;
@@ -483,12 +559,13 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
 }
 
-.js .rv{opacity:0;transform:translateY(16px)}
-.js .rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
+.js .rv{opacity:0;transform:translateY(18px)}
+.js .rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
+.js .rv.done{transform:none;will-change:auto}
 
 @media (max-width:960px){
- .nav{grid-template-columns:1fr auto}
- .nav-mid{display:none}
+ .hero-stage{min-height:clamp(300px,44vh,460px)}.home-title{font-size:clamp(80px,20vw,150px)}
+ .nav-chip{display:none}
  .nav-links .hide-sm{display:none}
  .route-strip{grid-template-columns:1fr}
  .chain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@@ -496,42 +573,56 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
  .row.profiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 }
 @media (max-width:560px){
+ .home{min-height:auto;padding-top:36px}.hero-stage{min-height:280px}.hero-orb{width:min(84vw,340px)}
  .chain-grid{grid-template-columns:1fr}
  .row.profiles{grid-template-columns:1fr}
- h1{font-size:clamp(68px,18vw,96px)}
 }
 @media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
- .js .rv{opacity:1;transform:none}
- .loader-mark i,.track{animation:none}
+ .js .rv{opacity:1;transform:none;filter:none}
+ .track,.orbital .ring,.orbital .tickring,.orbital .core,.hero-orb,.hero-art::before,.home::after{animation:none}
+ .wires path{stroke-dasharray:none;stroke-dashoffset:0}
+ .wires circle{opacity:1}
  .node:hover,.chain:hover{transform:none}
 }
 </style>
 </head>
 <body>
 <div class="grain" aria-hidden="true"></div>
+<div class="progress" id="progress" aria-hidden="true"></div>
 
 <div class="loader" id="loader" aria-hidden="true">
  <div class="loader-inner">
- <div class="loader-mark" aria-hidden="true"><i></i><b></b></div>
- <div class="loader-word">oracle</div>
- <div class="loader-bar"><span id="loader-fill"></span></div>
+  <div class="loader-mark orbital" aria-hidden="true">
+   <svg viewBox="0 0 100 100">
+    <g class="ring r1"><ellipse cx="50" cy="50" rx="44" ry="15"/></g>
+    <g class="ring r2"><ellipse cx="50" cy="50" rx="44" ry="15" transform="rotate(62 50 50)"/></g>
+    <g class="ring r3"><ellipse cx="50" cy="50" rx="44" ry="15" transform="rotate(124 50 50)"/></g>
+    <circle class="tickring" cx="50" cy="50" r="30"/>
+    <circle class="halo" cx="50" cy="50" r="9"/>
+    <circle class="core" cx="50" cy="50" r="6.5"/>
+   </svg>
+  </div>
+  <div class="loader-word">oracle</div>
+  <div class="loader-bar"><span id="loader-fill"></span></div>
  </div>
 </div>
 
 <header class="nav">
- <a class="brand" href="#top"><span class="orb" aria-hidden="true"></span>oracle</a>
- <div class="nav-mid" aria-label="Status">
- <span>for <b>users</b></span>
- <span>full crypto pack // protocol builder</span>
- <span class="posture-chip">disarmed by default</span>
- <span>powered by <a class="hermes" href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener noreferrer">Hermes</a></span>
- </div>
+ <a class="brand" href="#top">
+  <span class="orbital" aria-hidden="true">
+   <svg viewBox="0 0 100 100">
+    <g class="ring r1"><ellipse cx="50" cy="50" rx="45" ry="17"/></g>
+    <g class="ring r2"><ellipse cx="50" cy="50" rx="45" ry="17" transform="rotate(64 50 50)"/></g>
+    <circle class="halo" cx="50" cy="50" r="13"/>
+    <circle class="core" cx="50" cy="50" r="11"/>
+   </svg>
+  </span>
+  oracle</a>
  <nav class="nav-links" aria-label="Primary">
- <a class="hide-sm" href="#orchestration">How it works</a>
- <a class="hide-sm" href="#wallets">Wallets</a>
- <a class="hide-sm" href="#chains">Chains</a>
- <a class="nav-cta" href="/oracle-console/">Open console</a>
+  <a class="hide-sm" href="#orchestration">How it works</a>
+  <a class="hide-sm" href="#wallets">Wallets</a>
+  <a class="hide-sm" href="#chains">Chains</a>
  </nav>
 </header>
 
@@ -539,322 +630,399 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
  <canvas id="gl" aria-hidden="true"></canvas>
  <div class="veil" aria-hidden="true"></div>
 
+<section class="home" id="home">
+ <div class="home-inner">
+  <div class="hero-stage">
+   <div class="hero-art" aria-hidden="true">
+    <video id="orb-vid" autoplay muted loop playsinline preload="metadata" poster="assets/hero/orb.avif">
+     <source src="assets/hero/orb.webm" type="video/webm">
+    </video>
+    <div class="hero-orb" id="hero-orb">
+     <span class="lat l1"></span><span class="lat l2"></span><span class="lat l3"></span><span class="lat l4"></span>
+     <span class="par p1"></span><span class="par p2"></span><span class="par p3"></span>
+     <span class="eq"></span>
+     <span class="core-glow"></span>
+     <span class="orbit-dot"></span>
+    </div>
+   </div>
+   <div class="hero-lockup" id="hero-title">
+    <h1 class="home-title">OR<em>ACLE</em></h1>
+    <a class="hero-byline" href="https://x.com/demi_hl" target="_blank" rel="noopener noreferrer">BY DEMI</a>
+   </div>
+  </div>
+  <div class="home-copy">
+   <p class="home-kicker">self-custody agent control</p>
+   <p>One control plane for Hyperliquid, Polymarket, EVM, Bitcoin, Solana, Stable, Robinhood Chain, and new protocol builds. Cross-chain research, trade, protocol interactions, NFT listing and buying. The all-in-one crypto agent. The future is agentic.</p>
+   <div class="home-actions">
+    <a class="enter-cta" href="#orchestration">Enter oracle</a>
+   </div>
+  </div>
+ </div>
+</section>
+
 <section class="section" id="orchestration">
  <p class="section-label rv">How it works</p>
  <h2 class="section-title rv">Multi-profile. <em>Customizable.</em></h2>
- <p class="section-lede rv">Not one bot. A mesh: Input / Command hits the oracle control plane, then fans out across venue profiles, multi-chain EVM, Bitcoin, and a protocol builder - with prepare-only custody.</p>
+ <p class="section-lede rv">Not one bot. A mesh with profile routing via Hermes: Input / Command hits the oracle control plane, then fans out across venue profiles, multi-chain EVM, Bitcoin, Solana, and a protocol builder. Any MCP harness can drive a single agent. The public plane is prepare-only. Your wallet signs.</p>
 
  <div class="graph-shell rv">
- <div class="graph-top">
- <span>for <b>users</b></span>
- <span>multi-profile // protocol builder // multi-chain</span>
- <span>powered by Hermes</span>
- </div>
+  <div class="graph-top">
+   <span>multi-profile // protocol builder // multi-chain</span>
+  </div>
 
- <div class="evolve-rail">
- <span class="evolve-pill on">full crypto pack</span>
- <span class="evolve-pill on">customizable</span>
- <span class="evolve-pill on">protocol builder</span>
- <span class="evolve-pill on">more chains</span>
- <span class="evolve-pill on"><a href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener noreferrer" style="color:inherit">powered by Hermes</a></span>
- </div>
+  <div class="evolve-rail">
+   <span class="evolve-pill on">customizable</span>
+   <span class="evolve-pill on">protocol builder</span>
+   <span class="evolve-pill on">more chains</span>
+  </div>
 
- <div class="graph-canvas">
- <div class="orch" aria-label="Oracle multi-profile graph">
- <div class="row">
- <div class="node" style="width:220px">
- <div class="tag">you</div>
- <div class="name">Input / Command</div>
- <div class="sub">what you type or ask</div>
- </div>
- </div>
+  <div class="graph-canvas">
+   <div class="orch" aria-label="Oracle multi-profile graph">
+    <div class="row">
+     <div class="node" style="width:220px">
+      <div class="tag">you</div>
+      <div class="name">Input / Command</div>
+      <div class="sub">what you type or ask</div>
+     </div>
+    </div>
 
- <div class="wires" aria-hidden="true">
- <svg viewBox="0 0 100 36" preserveAspectRatio="none">
- <path d="M50 2 V34"/><circle cx="50" cy="2" r="1.4"/><circle cx="50" cy="34" r="1.4"/>
- </svg>
- </div>
+    <div class="wires" aria-hidden="true">
+     <svg viewBox="0 0 100 36" preserveAspectRatio="none">
+      <path d="M50 2 V34" pathLength="1"/><circle cx="50" cy="2" r="1.4"/><circle cx="50" cy="34" r="1.4"/>
+     </svg>
+    </div>
 
- <div class="row">
- <div class="node hub">
- <div class="tag">control plane</div>
- <div class="name">oracle</div>
- <div class="sub">route · bound · evolve</div>
- </div>
- </div>
+    <div class="row">
+     <div class="node hub">
+      <div class="tag">control plane</div>
+      <div class="orbital" aria-hidden="true">
+       <svg viewBox="0 0 100 100">
+        <g class="ring r1"><ellipse cx="50" cy="50" rx="46" ry="16"/></g>
+        <g class="ring r2"><ellipse cx="50" cy="50" rx="46" ry="16" transform="rotate(60 50 50)"/></g>
+        <g class="ring r3"><ellipse cx="50" cy="50" rx="46" ry="16" transform="rotate(120 50 50)"/></g>
+        <circle class="tickring" cx="50" cy="50" r="32"/>
+        <circle class="halo" cx="50" cy="50" r="10"/>
+        <circle class="core" cx="50" cy="50" r="7.5"/>
+       </svg>
+      </div>
+      <div class="name">oracle</div>
+      <div class="sub">route · bound · evolve</div>
+     </div>
+    </div>
 
- <div class="wires multi" aria-hidden="true">
- <svg viewBox="0 0 100 44" preserveAspectRatio="none">
- <path d="M50 2 V12"/>
- <path class="w-poly" d="M12.5 42 V20 H50 V12"/>
- <path class="w-hl" d="M37.5 42 V20 H50 V12"/>
- <path class="w-rh" d="M62.5 42 V20 H50 V12"/>
- <path class="w-sol" d="M87.5 42 V20 H50 V12"/>
- <circle cx="50" cy="2" r="1.3"/>
- <circle class="c-poly" cx="12.5" cy="42" r="1.3"/>
- <circle class="c-hl" cx="37.5" cy="42" r="1.3"/>
- <circle class="c-rh" cx="62.5" cy="42" r="1.3"/>
- <circle class="c-sol" cx="87.5" cy="42" r="1.3"/>
- </svg>
- </div>
+    <div class="wires multi" aria-hidden="true">
+     <svg viewBox="0 0 100 44" preserveAspectRatio="none">
+      <path d="M50 2 V12" pathLength="1"/>
+      <path class="w-poly w-2" d="M12.5 42 V20 H50 V12" pathLength="1"/>
+      <path class="w-hl w-3" d="M37.5 42 V20 H50 V12" pathLength="1"/>
+      <path class="w-rh w-4" d="M62.5 42 V20 H50 V12" pathLength="1"/>
+      <path class="w-sol w-5" d="M87.5 42 V20 H50 V12" pathLength="1"/>
+      <circle cx="50" cy="2" r="1.3"/>
+      <circle class="c-poly" cx="12.5" cy="42" r="1.3"/>
+      <circle class="c-hl" cx="37.5" cy="42" r="1.3"/>
+      <circle class="c-rh" cx="62.5" cy="42" r="1.3"/>
+      <circle class="c-sol" cx="87.5" cy="42" r="1.3"/>
+     </svg>
+    </div>
 
- <div class="row profiles" id="profile-grid">
- <div class="node route p-poly">
- <div class="tag">profile</div>
- <div class="name">polymarket agent</div>
- <div class="sub">events · arb · markets</div>
- <div class="chains">Polymarket</div>
- </div>
- <div class="node route p-hl">
- <div class="tag">profile</div>
- <div class="name">hyperliquid agent</div>
- <div class="sub">perps · hip-3/4 · ta</div>
- <div class="chains">Hyperliquid · HyperEVM 999</div>
- </div>
- <div class="node route p-rh">
- <div class="tag">profile</div>
- <div class="name">robinhood agent</div>
- <div class="sub">markets · nfts · names</div>
- <div class="chains">Robinhood Chain 4663</div>
- </div>
- <div class="node route p-sol">
- <div class="tag">profile</div>
- <div class="name">solana agent</div>
- <div class="sub">jup · nfts · dexs</div>
- <div class="chains">Solana mainnet</div>
- </div>
- <div class="node route p-btc">
- <div class="tag">profile</div>
- <div class="name">bitcoin agent</div>
- <div class="sub">ord · runes · research</div>
- <div class="chains">Bitcoin · inscriptions</div>
- </div>
- <div class="node route p-evm">
- <div class="tag">profile</div>
- <div class="name">evm / bridge agent</div>
- <div class="sub">swaps · bridges · defi</div>
- <div class="chains">ETH · Base · Arb · OP · BNB · Polygon · Avax</div>
- </div>
- <div class="node route p-stable">
- <div class="tag">profile</div>
- <div class="name">stable agent</div>
- <div class="sub">launches · venue ops</div>
- <div class="chains">Stable 988</div>
- </div>
- <div class="node route p-build">
- <div class="tag">builder</div>
- <div class="name">protocol builder</div>
- <div class="sub">scaffold · security · deploy prep</div>
- <div class="chains">any EVM · user-signed deploys</div>
- </div>
- <div class="node add">
- <div class="tag">open slot</div>
- <div class="name">+ add agent</div>
- <div class="sub">new chain · new venue · your rules</div>
- <div class="chains" style="margin-top:12px;font-family:var(--mono);font-size:10px;color:var(--blue2)">full crypto pack · powered by Hermes</div>
- </div>
- </div> </div>
- </div>
- </div>
+    <div class="row profiles" id="profile-grid">
+     <div class="node route p-poly">
+      <div class="tag">profile</div>
+      <div class="name">polymarket agent</div>
+      <div class="sub">events · arb · markets</div>
+      <div class="chains"><span class="ch">Polymarket <img src="https://icons.llamao.fi/icons/protocols/polymarket?w=24&h=24" alt="" loading="lazy"></span></div>
+     </div>
+     <div class="node route p-hl">
+      <div class="tag">profile</div>
+      <div class="name">hyperliquid agent</div>
+      <div class="sub">perps · hip-3/4 · ta</div>
+      <div class="chains"><span class="ch">Hyperliquid <img src="https://icons.llamao.fi/icons/protocols/hyperliquid?w=24&h=24" alt="" loading="lazy"></span><span class="ch">Hyperliquid 999 <img src="https://icons.llamao.fi/icons/chains/rsz_hyperliquid?w=24&h=24" alt="" loading="lazy"></span></div>
+     </div>
+     <div class="node route p-rh">
+      <div class="tag">profile</div>
+      <div class="name">robinhood agent</div>
+      <div class="sub">markets · nfts · names</div>
+      <div class="chains"><span class="ch">Robinhood Chain 4663 <img src="https://icons.llamao.fi/icons/chains/rsz_robinhood?w=24&h=24" alt="" loading="lazy"></span></div>
+     </div>
+     <div class="node route p-sol">
+      <div class="tag">profile</div>
+      <div class="name">solana agent</div>
+      <div class="sub">jup · nfts · dexs</div>
+      <div class="chains"><span class="ch">Solana <img src="https://icons.llamao.fi/icons/chains/rsz_solana?w=24&h=24" alt="" loading="lazy"></span></div>
+     </div>
+     <div class="node route p-btc">
+      <div class="tag">profile</div>
+      <div class="name">bitcoin agent</div>
+      <div class="sub">ord · runes · research</div>
+      <div class="chains"><span class="ch">Bitcoin <img src="https://icons.llamao.fi/icons/chains/rsz_bitcoin?w=24&h=24" alt="" loading="lazy"></span><span class="ch">inscriptions</span></div>
+     </div>
+     <div class="node route p-evm">
+      <div class="tag">profile</div>
+      <div class="name">evm / bridge agent</div>
+      <div class="sub">swaps · bridges · defi</div>
+      <div class="chains"><span class="ch">ETH <img src="https://icons.llamao.fi/icons/chains/rsz_ethereum?w=24&h=24" alt="" loading="lazy"></span><span class="ch">Base <img src="https://icons.llamao.fi/icons/chains/rsz_base?w=24&h=24" alt="" loading="lazy"></span><span class="ch">Arb <img src="https://icons.llamao.fi/icons/chains/rsz_arbitrum?w=24&h=24" alt="" loading="lazy"></span><span class="ch">OP <img src="https://icons.llamao.fi/icons/chains/rsz_optimism?w=24&h=24" alt="" loading="lazy"></span><span class="ch">BNB <img src="https://icons.llamao.fi/icons/chains/rsz_binance?w=24&h=24" alt="" loading="lazy"></span><span class="ch">Polygon <img src="https://icons.llamao.fi/icons/chains/rsz_polygon?w=24&h=24" alt="" loading="lazy"></span><span class="ch">Avax <img src="https://icons.llamao.fi/icons/chains/rsz_avalanche?w=24&h=24" alt="" loading="lazy"></span></div>
+     </div>
+     <div class="node route p-stable">
+      <div class="tag">profile</div>
+      <div class="name">stable agent</div>
+      <div class="sub">launches · venue ops</div>
+      <div class="chains"><span class="ch">Stable 988 <img src="https://icons.llamao.fi/icons/chains/rsz_stable?w=24&h=24" alt="" loading="lazy"></span></div>
+     </div>
+     <div class="node add">
+      <div class="tag">open slot</div>
+      <div class="name">+ add agent</div>
+      <div class="sub">new chain · new venue · your rules</div>
+      <div class="chains" style="margin-top:12px;font-family:var(--mono);font-size:10px;color:var(--blue2)">sits beside stable · same custody</div>
+     </div>
+    </div>
 
- <div class="route-strip">
- <article class="route-card p-poly">
- <div class="where">polymarket agent →</div>
- <h3>Polymarket</h3>
- <p>Event markets, sports, arb paths, and prediction flow under bounds you set.</p>
- <div class="chips">
- <span class="chip-s">events</span>
- <span class="chip-s">arb</span>
- <span class="chip-s">Polymarket</span>
- </div>
- </article>
- <article class="route-card p-hl">
- <div class="where">hyperliquid agent →</div>
- <h3>Hyperliquid</h3>
- <p>Native perps, HIP-3/4, TA, event risk, and HyperEVM when you need HL’s EVM surface.</p>
- <div class="chips">
- <span class="chip-s">perps</span>
- <span class="chip-s">HIP-3/4</span>
- <span class="chip-s">HyperEVM</span>
- </div>
- </article>
- <article class="route-card p-rh">
- <div class="where">robinhood agent →</div>
- <h3>Robinhood</h3>
- <p>RH Chain markets, NFTs, names, and chain-local execution on 4663.</p>
- <div class="chips">
- <span class="chip-s">markets</span>
- <span class="chip-s">NFTs</span>
- <span class="chip-s">4663</span>
- </div>
- </article>
- <article class="route-card p-sol">
- <div class="where">solana agent →</div>
- <h3>Solana</h3>
- <p>Swaps, research, Jupiter routes, and wallet-signed execution as the lane activates.</p>
- <div class="chips">
- <span class="chip-s">Jupiter</span>
- <span class="chip-s">swaps</span>
- <span class="chip-s">research</span>
- </div>
- </article>
- <article class="route-card p-btc">
- <div class="where">bitcoin agent →</div>
- <h3>Bitcoin</h3>
- <p>Ordinals, runes, and BTC research. Prepare inscriptions; you control signing.</p>
- <div class="chips">
- <span class="chip-s">ordinals</span>
- <span class="chip-s">runes</span>
- <span class="chip-s">BTC</span>
- </div>
- </article>
- <article class="route-card p-evm">
- <div class="where">evm / bridge agent →</div>
- <h3>Multi-chain EVM</h3>
- <p>DEX routes, LiFi/Relay bridges, and DeFi across ETH and L2s - always prepare-only until you sign.</p>
- <div class="chips">
- <span class="chip-s">ETH</span>
- <span class="chip-s">Base · Arb</span>
- <span class="chip-s">bridges</span>
- </div>
- </article>
- <article class="route-card p-stable">
- <div class="where">stable agent →</div>
- <h3>Stable</h3>
- <p>Stable mainnet launches and venue ops on chain 988.</p>
- <div class="chips">
- <span class="chip-s">launches</span>
- <span class="chip-s">Stable 988</span>
- </div>
- </article>
- <article class="route-card p-build">
- <div class="where">protocol builder →</div>
- <h3>Build protocols</h3>
- <p>Scaffold contracts, run security gates (Foundry + static checks), prepare unsigned deploys. You still sign every deploy.</p>
- <div class="chips">
- <span class="chip-s">scaffold</span>
- <span class="chip-s">security gate</span>
- <span class="chip-s">unsigned deploy</span>
- </div>
- </article>
- <article class="route-card p-add">
- <div class="where">+ add agent →</div>
- <h3>Next chain</h3>
- <p>Drop in another profile for a new chain or venue. Same custody model - your wallet, your limits, your revoke.</p>
- <div class="chips">
- <span class="chip-s">custom profile</span>
- <span class="chip-s">more chains</span>
- <span class="chip-s">powered by Hermes</span>
- </div>
- </article>
- </div>
+    <div class="wires funnel" aria-hidden="true">
+     <svg viewBox="0 0 100 62" preserveAspectRatio="none">
+      <path class="w-1" d="M6 2 C6 30 50 22 50 60" pathLength="1"/>
+      <path class="w-2" d="M19 2 C19 28 50 26 50 60" pathLength="1"/>
+      <path class="w-3" d="M32 2 C32 34 50 34 50 60" pathLength="1"/>
+      <path class="w-4" d="M45 2 C45 38 50 42 50 60" pathLength="1"/>
+      <path class="w-5" d="M55 2 C55 38 50 42 50 60" pathLength="1"/>
+      <path class="w-3" d="M68 2 C68 34 50 34 50 60" pathLength="1"/>
+      <path class="w-2" d="M81 2 C81 28 50 26 50 60" pathLength="1"/>
+      <path class="w-1" d="M94 2 C94 30 50 22 50 60" pathLength="1"/>
+      <circle cx="50" cy="60" r="1.8"/>
+     </svg>
+    </div>
 
- <div class="why-band">
- <p>The model proposes. Policy bounds. You own signatures. Multi-profile desks - not one omniscient chatbot. Input / Command, vaults, perps, bridges, and protocol scaffolds - not just swaps. Disarmed by default.</p>
- <span>powered by Hermes · claims without receipts don't count</span>
- </div>
+    <div class="row builder-row">
+     <div class="node route p-build builder-sink">
+      <div class="tag">bottom layer</div>
+      <div class="name">protocol builder</div>
+      <div class="sub">every profile can funnel into new contracts, scripts, checks, deploy prep, and chain-specific scaffolds.</div>
+      <div class="chains"><span class="ch">any EVM · pinned factories · user-signed deploys</span></div>
+     </div>
+    </div>
+   </div>
+  </div>
+
+  <div class="route-strip">
+   <article class="route-card p-poly">
+    <div class="where">polymarket agent →</div>
+    <h3>Polymarket <img src="https://icons.llamao.fi/icons/protocols/polymarket?w=40&h=40" alt="Polymarket" loading="lazy"></h3>
+    <p>Event markets, sports, arb paths, and prediction flow under bounds you set. CLOB prepare shipped in the public plane.</p>
+    <div class="chips">
+     <span class="chip-s">events</span>
+     <span class="chip-s">arb</span>
+     <span class="chip-s">clob prepare</span>
+    </div>
+   </article>
+   <article class="route-card p-hl">
+    <div class="where">hyperliquid agent →</div>
+    <h3>Hyperliquid <img src="https://icons.llamao.fi/icons/protocols/hyperliquid?w=40&h=40" alt="Hyperliquid" loading="lazy"></h3>
+    <p>Native perps, HIP-3/4 asset resolve, TA, event risk, and Hyperliquid when you need HL's EVM surface.</p>
+    <div class="chips">
+     <span class="chip-s">perps</span>
+     <span class="chip-s">HIP-3/4</span>
+     <span class="chip-s">Hyperliquid</span>
+    </div>
+   </article>
+   <article class="route-card p-rh">
+    <div class="where">robinhood agent →</div>
+    <h3>Robinhood <img src="https://icons.llamao.fi/icons/chains/rsz_robinhood?w=40&h=40" alt="Robinhood Chain" loading="lazy"></h3>
+    <p>RH Chain markets, NFTs, names, token scans, and chain-local routing on 4663.</p>
+    <div class="chips">
+     <span class="chip-s">markets</span>
+     <span class="chip-s">NFTs</span>
+     <span class="chip-s">4663</span>
+    </div>
+   </article>
+   <article class="route-card p-sol">
+    <div class="where">solana agent →</div>
+    <h3>Solana <img src="https://icons.llamao.fi/icons/chains/rsz_solana?w=40&h=40" alt="Solana" loading="lazy"></h3>
+    <p>Swaps, research, Jupiter routes. The bounded lane decodes every instruction and bans delegation ops outright.</p>
+    <div class="chips">
+     <span class="chip-s">Jupiter</span>
+     <span class="chip-s">swaps</span>
+     <span class="chip-s">decoded ix</span>
+    </div>
+   </article>
+   <article class="route-card p-btc">
+    <div class="where">bitcoin agent →</div>
+    <h3>Bitcoin <img src="https://icons.llamao.fi/icons/chains/rsz_bitcoin?w=40&h=40" alt="Bitcoin" loading="lazy"></h3>
+    <p>Ordinals, runes, and BTC research. Every PSBT input carries proven provenance, so fees are computed, not asserted.</p>
+    <div class="chips">
+     <span class="chip-s">ordinals</span>
+     <span class="chip-s">runes</span>
+     <span class="chip-s">psbt proof</span>
+    </div>
+   </article>
+   <article class="route-card p-evm">
+    <div class="where">evm / bridge agent →</div>
+    <h3>Multi-chain EVM <img src="https://icons.llamao.fi/icons/chains/rsz_ethereum?w=40&h=40" alt="Ethereum" loading="lazy"></h3>
+    <p>DEX routes, LI.FI and Relay bridges, DeFi across ETH and L2s. Bounded evm-swap and evm-bridge lanes, prepare-only until you sign.</p>
+    <div class="chips">
+     <span class="chip-s">evm-swap</span>
+     <span class="chip-s">evm-bridge</span>
+     <span class="chip-s">best route</span>
+    </div>
+   </article>
+   <article class="route-card p-nft">
+    <div class="where">nft agent →</div>
+    <h3>Cross-chain NFTs <img src="assets/protocols/opensea.png" alt="OpenSea" loading="lazy"></h3>
+    <p>List across 22 EVM chains and Solana via OpenSea. Buy and list Ordinals through Satflow with proven PSBT provenance. Solana listings via Magic Eden. Floors, holdings and PnL are read first, then prepared for your signature.</p>
+    <div class="chips">
+     <span class="chip-s">list</span>
+     <span class="chip-s">buy</span>
+     <span class="chip-s">floor · pnl</span>
+    </div>
+   </article>
+   <article class="route-card p-stable">
+    <div class="where">stable agent →</div>
+    <h3>Stable <img src="https://icons.llamao.fi/icons/chains/rsz_stable?w=40&h=40" alt="Stable" loading="lazy"></h3>
+    <p>Stable mainnet launch radar and venue ops on chain 988, scanned straight from the chain's own logs.</p>
+    <div class="chips">
+     <span class="chip-s">launches</span>
+     <span class="chip-s">Stable 988</span>
+    </div>
+   </article>
+   <article class="route-card p-build">
+    <div class="where">protocol builder →</div>
+    <h3>Build protocols</h3>
+    <p>Scaffold contracts, run security gates (Foundry + static checks), prepare unsigned deploys through pinned factories. You still sign every deploy.</p>
+    <div class="chips">
+     <span class="chip-s">scaffold</span>
+     <span class="chip-s">security gate</span>
+     <span class="chip-s">unsigned deploy</span>
+    </div>
+   </article>
+   <article class="route-card p-add">
+    <div class="where">+ add agent →</div>
+    <h3>Next chain</h3>
+    <p>Drop in another profile for a new chain or venue. Same custody model, your wallet, your limits, your revoke.</p>
+    <div class="chips">
+     <span class="chip-s">custom profile</span>
+     <span class="chip-s">more chains</span>
+     <span class="chip-s">same custody</span>
+    </div>
+   </article>
+  </div>
+
+  <div class="why-band">
+   <p>The model proposes. Policy bounds. You own signatures. Multi-profile desks, not one omniscient chatbot. Vaults, perps, bridges, and protocol scaffolds, not just swaps. Empty allowlists refuse everything until you configure them.</p>
+   <span>claims without receipts don't count</span>
+  </div>
  </div>
 
  <div class="moat-grid rv" style="margin-top:28px">
- <article class="moat-card">
- <div class="n">bound grants</div>
- <h3>Wallet with temporary agent permission</h3>
- <p>Max value, chain, venue, destinations, and TTL. Outside the grant = hard refuse - not an agent with a free wallet.</p>
- </article>
- <article class="moat-card">
- <div class="n">receipts</div>
- <h3>Claims without receipts don't count</h3>
- <p>Money claims end in tx hash, receipt status, balance delta, and allowance state. No “looks filled.”</p>
- </article>
- <article class="moat-card">
- <div class="n">custody</div>
- <h3>Self-custodial by default</h3>
- <p>You sign with your wallet. Agentic dust is optional, capped, and never your main capital as the always-on signer.</p>
- </article>
- <article class="moat-card">
- <div class="n">intent desk + build</div>
- <h3>Trade and build protocols</h3>
- <p>Orders, vaults, perps, bridges - and protocol scaffold/deploy prep. Full crypto skills included. You sign.</p>
- </article>
- <article class="moat-card">
- <div class="n">simulation</div>
- <h3>Show the work before you sign</h3>
- <p>minOut, impact, spender, and decoded calldata before approval. Export unsigned artifacts for hardware wallets.</p>
- </article>
- <article class="moat-card">
- <div class="n">allowlists</div>
- <h3>Where money may land</h3>
- <p>Destination allowlists stop silent router drift. New contracts stay blocked until you add them.</p>
- </article>
+  <article class="moat-card">
+   <div class="n">bound grants</div>
+   <h3>Wallet with temporary agent permission</h3>
+   <p>Max value, chain, venue, destinations, and TTL. Outside the grant = hard refuse, not an agent with a free wallet.</p>
+  </article>
+  <article class="moat-card">
+   <div class="n">bounded surfaces</div>
+   <h3>Six lanes, each with its own decoder</h3>
+   <p>hl, poly, evm-swap, evm-bridge, btc, sol. Each decodes its own envelope, proves every value-moving field, and refuses while its allowlists are empty.</p>
+  </article>
+  <article class="moat-card">
+   <div class="n">receipts</div>
+   <h3>Claims without receipts don't count</h3>
+   <p>Prepared actions ship as stamped, hash-bound envelopes. Money claims end in tx hash, receipt status, balance delta, and allowance state. No “looks filled.”</p>
+  </article>
+  <article class="moat-card">
+   <div class="n">simulation</div>
+   <h3>Show the work before you sign</h3>
+   <p>minOut, impact, spender, and decoded calldata before approval. Export unsigned artifacts for hardware wallets.</p>
+  </article>
+  <article class="moat-card">
+   <div class="n">allowlists</div>
+   <h3>Where money may land</h3>
+   <p>Destination allowlists stop silent router drift. New contracts stay blocked until you add them.</p>
+  </article>
+  <article class="moat-card">
+   <div class="n">fail closed</div>
+   <h3>Unconfigured means refused</h3>
+   <p>A fresh install signs nothing. Every lane refuses while its allowlists are empty, so nothing moves until you set the bounds.</p>
+  </article>
  </div>
  </section>
 
 <section class="section" id="wallets">
  <p class="section-label rv">Wallets</p>
  <h2 class="section-title rv">Your wallets. <em>Your limits.</em></h2>
- <p class="section-lede rv">Use one wallet everywhere, or separate wallets per chain. Permissions are per wallet - change them, tighten them, or revoke them anytime.</p>
+ <p class="section-lede rv">Use one wallet everywhere, or separate wallets per chain. Permissions are per wallet. Change them, tighten them, or revoke them anytime.</p>
 
  <div class="wallet-grid rv">
- <article class="wallet-card">
- <div class="n">setup</div>
- <h3>Single or multi</h3>
- <p>One wallet across chains, or a dedicated wallet per chain. Same desk either way.</p>
- </article>
- <article class="wallet-card">
- <div class="n">control</div>
- <h3>Limit per wallet</h3>
- <p>Caps, allowed actions, and scopes sit on each wallet - not a global free pass.</p>
- </article>
- <article class="wallet-card">
- <div class="n">lifecycle</div>
- <h3>Change · revoke</h3>
- <p>Edit permissions when risk changes. Revoke a wallet’s access without killing the whole account.</p>
- </article>
+  <article class="wallet-card">
+   <div class="n">setup</div>
+   <h3>Single or multi</h3>
+   <p>One wallet across chains, or a dedicated wallet per chain. Same desk either way.</p>
+  </article>
+  <article class="wallet-card">
+   <div class="n">control</div>
+   <h3>Limit per wallet</h3>
+   <p>Caps, allowed actions, and scopes sit on each wallet, not a global free pass.</p>
+  </article>
+  <article class="wallet-card">
+   <div class="n">lifecycle</div>
+   <h3>Change · revoke</h3>
+   <p>Edit permissions when risk changes. Revoke a wallet's access without killing the whole account.</p>
+  </article>
  </div>
  </section>
 
 <section class="section" id="chains">
  <p class="section-label rv">Chains</p>
  <h2 class="section-title rv">Where you can <em>operate.</em></h2>
- <p class="section-lede rv">Live coverage grows with the profile mesh. Each chain maps to an agent - and new agents can join.</p>
+ <p class="section-lede rv">Live coverage grows with the profile mesh. Each chain maps to an agent, and new agents can join.</p>
  <div class="chain-grid" id="chain-grid"></div>
+ <div class="hl-surface rv">
+  <div class="venues-head"><span>hyperliquid // what oracle actually does</span><span><b>prepare-only</b> · your wallet signs</span></div>
+  <div class="hl-grid">
+   <article><h3>Perps</h3><p>Asset info, order + bracket prepare, cancel, leverage and isolated-margin updates. Tick and lot sizing enforced to 5 sig figs.</p></article>
+   <article><h3>Spot &amp; markets</h3><p>Spot meta, mids, L2 book, candles, market and coin datapoints, leaderboards.</p></article>
+   <article><h3>Staking</h3><p>Validator summaries, delegations, rewards and history. Stake deposit, withdraw and delegate prepare with a 7-day unstaking queue.</p></article>
+   <article><h3>Outcome markets</h3><p>HIP-4 outcome listing plus order and cancel prepare.</p></article>
+   <article><h3>Account state</h3><p>Clearinghouse state, open orders, user fills, positions.</p></article>
+   <article><h3>HyperEVM 999</h3><p>Token search and metadata on chain 999, routed with the EVM lane.</p></article>
+  </div>
+ </div>
  <div class="venues rv">
- <div class="venues-head">protocols // venues</div>
- <div class="marquee" aria-hidden="true"><div class="track" id="proto-track"></div></div>
+  <div class="venues-head"><span>protocols // venues</span><span><b>routed by name</b> · quotes ranked · prepare-only</span></div>
+  <div class="marquee" aria-hidden="true"><div class="track" id="proto-track-a"></div></div>
+  <div class="marquee rev" aria-hidden="true"><div class="track" id="proto-track-b"></div></div>
+ </div>
+ <div class="venues rv">
+  <div class="venues-head"><span>models // harnesses</span><span><b>bring your own model</b> · oracle is the control plane</span></div>
+  <div class="marquee" aria-hidden="true"><div class="track" id="llm-track"></div></div>
  </div>
  </section>
 
  <section class="section" id="custody" style="padding-top:clamp(48px,8vh,80px)">
- <div class="strip-inner rv" style="border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;background:linear-gradient(180deg, rgba(124,196,255,.05), transparent)">
- <div class="strip-left">
- <strong style="font-family:var(--display);font-weight:400;font-size:26px;display:block;margin-bottom:6px">You keep custody.</strong>
- <span style="font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)">oracle never holds your keys</span>
- </div>
- <div class="strip-right" style="display:flex;flex-wrap:wrap;gap:10px">
- <span class="pill on" style="font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(124,196,255,.35);border-radius:999px;padding:9px 12px;color:var(--blue)">Multi-wallet</span>
- <span class="pill on" style="font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(124,196,255,.35);border-radius:999px;padding:9px 12px;color:var(--blue)">Per-wallet limits</span>
- <span class="pill" style="font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:9px 12px;color:var(--cool)">Revoke anytime</span>
- </div>
- </div>
+  <div class="strip-inner rv" style="border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;background:linear-gradient(180deg, rgba(124,196,255,.05), transparent)">
+   <div class="strip-left">
+    <strong style="font-family:var(--display);font-weight:400;font-size:26px;display:block;margin-bottom:6px">You keep custody.</strong>
+    <span style="font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)">oracle never holds your keys</span>
+   </div>
+   <div class="strip-right" style="display:flex;flex-wrap:wrap;gap:10px">
+    <span class="pill on" style="font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(124,196,255,.35);border-radius:999px;padding:9px 12px;color:var(--blue)">Multi-wallet</span>
+    <span class="pill on" style="font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(124,196,255,.35);border-radius:999px;padding:9px 12px;color:var(--blue)">Per-wallet limits</span>
+    <span class="pill" style="font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:9px 12px;color:var(--cool)">Revoke anytime</span>
+   </div>
+  </div>
  </section>
 </main>
 
 <footer>
  <div class="foot-row">
- <div class="powered">
- <span class="mark" aria-hidden="true"></span>
- powered by
- <a href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener noreferrer">Hermes</a>
- </div>
- <div class="foot-links">
- <a href="/oracle-console/">Console</a>
- <a href="https://hermes-agent.nousresearch.com/docs" target="_blank" rel="noopener noreferrer">Docs</a>
- </div>
+  <div class="powered">
+   powered by
+   <a href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener noreferrer">Hermes</a>
+  </div>
+  <div class="foot-links">
+   <a href="/oracle-console/">Console</a>
+   <a href="https://hermes-agent.nousresearch.com/docs" target="_blank" rel="noopener noreferrer">Docs</a>
+  </div>
  </div>
  <div class="foot-meta">
- <span>oracle · for users</span>
- <span>full crypto pack · protocol builder · powered by Hermes</span>
- <span>you sign // no house custody</span>
+  <span>oracle · <a class="labs-link" href="https://demi.la">locals only labs</a></span>
+  <span>you sign // no house custody</span>
  </div>
 </footer>
 
@@ -863,56 +1031,174 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
  "use strict";
  document.documentElement.classList.add("js");
 
+ var ICON = "https://icons.llamao.fi/icons/";
  var CHAINS = [
- { name: "Ethereum", id: "1", note: "open / add agent", badge: "live" },
- { name: "Base", id: "8453", note: "open / add agent", badge: "live" },
- { name: "Arbitrum", id: "42161", note: "open / add agent", badge: "live" },
- { name: "Optimism", id: "10", note: "open / add agent", badge: "live" },
- { name: "Polygon", id: "137", note: "open / add agent", badge: "live" },
- { name: "BNB Chain", id: "56", note: "open / add agent", badge: "live" },
- { name: "Avalanche", id: "43114", note: "open / add agent", badge: "live" },
- { name: "HyperEVM", id: "999", note: "hyperliquid agent", badge: "live" },
- { name: "Abstract", id: "2741", note: "open / add agent", badge: "live" },
- { name: "Stable", id: "988", note: "stable agent", badge: "live" },
- { name: "Robinhood", id: "4663", note: "robinhood agent", badge: "live" },
- { name: "Solana", id: " - ", note: "solana agent", badge: "live" }
- ];
- var PROTOS = [
- "uniswap-v3","aerodrome","velodrome","pancakeswap","quickswap",
- "lfj","hyperswap","curve","balancer","pendle","morpho","gmx-v2",
- "lifi","relay","paraswap","odos","cow","jupiter","across","stargate"
+  { name: "Ethereum",  id: "1",     logo: "chains/rsz_ethereum",    note: "evm / bridge agent", badge: "live" },
+  { name: "Base",      id: "8453",  logo: "chains/rsz_base",        note: "evm / bridge agent", badge: "live" },
+  { name: "Arbitrum",  id: "42161", logo: "chains/rsz_arbitrum",    note: "evm / bridge agent", badge: "live" },
+  { name: "Optimism",  id: "10",    logo: "chains/rsz_optimism",    note: "evm / bridge agent", badge: "live" },
+  { name: "Polygon",   id: "137",   logo: "chains/rsz_polygon",     note: "evm / bridge agent", badge: "live" },
+  { name: "BNB Chain", id: "56",    logo: "chains/rsz_binance",     note: "evm / bridge agent", badge: "live" },
+  { name: "Avalanche", id: "43114", logo: "chains/rsz_avalanche",   note: "evm / bridge agent", badge: "live" },
+  { name: "Hyperliquid", id: "999", logo: "chains/rsz_hyperliquid", note: "hyperliquid agent",  badge: "live" },
+  { name: "Abstract",  id: "2741",  logo: "chains/rsz_abstract",    note: "open / add agent",   badge: "live" },
+  { name: "Stable",    id: "988",   logo: "chains/rsz_stable",      note: "stable agent",       badge: "live" },
+  { name: "Robinhood", id: "4663",  logo: "chains/rsz_robinhood",   note: "robinhood agent",    badge: "live" },
+  { name: "Solana",    id: "SOL",   logo: "chains/rsz_solana",      note: "solana agent",       badge: "live" },
+  { name: "Bitcoin",   id: "BTC",   logo: "chains/rsz_bitcoin",     note: "bitcoin agent",      badge: "live" }
  ];
-
  document.getElementById("chain-grid").innerHTML = CHAINS.map(function (c) {
- var cls = c.badge === "live" ? "badge live" : "badge";
- var label = c.badge === "live" ? "live" : "read";
- return '<article class="chain rv"><div class="chain-top"><div class="nm">' + c.name + '</div><div class="id">' + c.id + '</div></div><div class="meta"><span>' + c.note + '</span><span class="' + cls + '">' + label + '</span></div></article>';
+  var cls = c.badge === "live" ? "badge live" : "badge";
+  var label = c.badge === "live" ? "live" : "read";
+  return '<article class="chain rv"><div class="chain-top"><div class="nm">' + c.name +
+   ' <img src="' + ICON + c.logo + '?w=36&h=36" alt="' + c.name + ' logo" loading="lazy"></div><div class="id">' + c.id +
+   '</div></div><div class="meta"><span>' + c.note + '</span><span class="' + cls + '">' + label + '</span></div></article>';
  }).join("");
 
- var seq = PROTOS.concat(PROTOS);
- document.getElementById("proto-track").innerHTML = seq.map(function (x) {
- return '<span class="chip">' + x + '</span>';
+ var WM = "assets/wordmarks/";
+ var PROTOS_A = [
+  { n: "Hyperliquid", wm: "hyperliquid.svg" },
+  { n: "Outcome",     wm: "outcome.svg" },
+  { n: "XYZ",         wm: "xyz.svg" },
+  { n: "Markets By Kinetiq", txt: 1 },
+  { n: "HyENA",       wm: "hyena.svg" },
+  { n: "Paragon",     txt: 1 },
+  { n: "HyperSwap",   wm: "hyperswap.svg" },
+  { n: "Uniswap",     wm: "uniswap.svg" },
+  { n: "Polymarket",  wm: "polymarket.png" },
+  { n: "Aerodrome",   wm: "aerodrome.svg" },
+  { n: "Velodrome",   wm: "velodrome.svg" },
+  { n: "PancakeSwap", wm: "pancakeswap.svg" },
+  { n: "QuickSwap",   wm: "quickswap.png" },
+  { n: "LFJ",         txt: 1 },
+  { n: "Curve",       txt: 1 },
+  { n: "Balancer",    wm: "balancer.svg" },
+  { n: "Pendle",      wm: "pendle.png" }
+ ];
+ var PROTOS_B = [
+  { n: "Morpho",     wm: "morpho.svg" },
+  { n: "GMX",        wm: "gmx.svg" },
+  { n: "LI.FI",      wm: "lifi.png" },
+  { n: "Relay",      wm: "relay.svg" },
+  { n: "Velora",     wm: "paraswap.svg" },
+  { n: "Odos",       wm: "odos.svg" },
+  { n: "CoW Swap",   wm: "cowswap.svg" },
+  { n: "1inch",      wm: "oneinch.svg" },
+  { n: "Jupiter",    wm: "jupiter.svg" },
+  { n: "OpenSea",    wm: "opensea.svg" },
+  { n: "Across",     wm: "across.svg" },
+  { n: "Stargate",   wm: "stargate.svg" },
+  { n: "Magic Eden", wm: "magic-eden.svg" }
+ ];
+
+ function chipRow(list) {
+  var seq = list.concat(list);
+  return seq.map(function (x) {
+   if (x.wm) {
+    return '<span class="chip wm-chip"><img class="wm" src="' + WM + x.wm + '" alt="' + x.n + '" decoding="async"></span>';
+   }
+   return '<span class="chip wm-chip"><span class="wordmark">' + x.n + '</span></span>';
+  }).join("");
+ }
+ document.getElementById("proto-track-a").innerHTML = chipRow(PROTOS_A);
+ document.getElementById("proto-track-b").innerHTML = chipRow(PROTOS_B);
+
+ var LM = "assets/llms/";
+ var LLMS = [
+  { n: "Hermes Agent", wm: "hermes.png", tall: 1 },
+  { n: "Claude",       wm: "claude.svg" },
+  { n: "Grok",         wm: "grok.svg" },
+  { n: "Codex",        wm: "codex.svg" },
+  { n: "Gemini",       wm: "gemini.svg" },
+  { n: "OpenClaw",     wm: "openclaw.svg", tall: 1 },
+  { n: "Perplexity",   wm: "perplexity.svg" },
+  { n: "Manus",        wm: "manus.svg" },
+  { n: "Cursor",       wm: "cursor.svg" },
+  { n: "Windsurf",     wm: "windsurf.svg" },
+  { n: "DeepSeek",     wm: "deepseek.svg" },
+  { n: "Qwen",         wm: "qwen.svg", tall: 1 },
+  { n: "Kimi",         wm: "kimi.svg" }
+ ];
+ document.getElementById("llm-track").innerHTML = LLMS.concat(LLMS).map(function (x) {
+  var cls = x.tall ? "wm tall" : "wm";
+  return '<span class="chip wm-chip"><img class="' + cls + '" src="' + LM + x.wm + '" alt="' + x.n + '" decoding="async">' + (x.tall ? '<span class="wordmark">' + x.n + '</span>' : '') + '</span>';
  }).join("");
 
  var loader = document.getElementById("loader");
  var fill = document.getElementById("loader-fill");
  requestAnimationFrame(function () { fill.style.width = "100%"; });
  window.addEventListener("load", function () {
- setTimeout(function () { loader.classList.add("out"); }, 650);
+  setTimeout(function () { loader.classList.add("out"); }, 650);
  });
 
  var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var coarse = window.matchMedia("(pointer: coarse)").matches;
- var nodes = Array.prototype.slice.call(document.querySelectorAll(".rv"));
+
+ var progress = document.getElementById("progress");
+ var ticking = false;
+ function onScroll() {
+  if (ticking) return;
+  ticking = true;
+  requestAnimationFrame(function () {
+   var h = document.documentElement;
+   var max = h.scrollHeight - h.clientHeight;
+   progress.style.transform = "scaleX(" + (max > 0 ? h.scrollTop / max : 0) + ")";
+   ticking = false;
+  });
+ }
+ window.addEventListener("scroll", onScroll, { passive: true });
+ onScroll();
+
+ var heroOrb = document.getElementById("hero-orb");
+ var heroTitle = document.getElementById("hero-title");
+ if (heroOrb && heroTitle && !reduced) {
+  var px = false;
+  window.addEventListener("scroll", function () {
+   if (px) return;
+   px = true;
+   requestAnimationFrame(function () {
+    var y = window.scrollY;
+    var lim = window.innerHeight * .8;
+    var f = Math.min(y / lim, 1);
+    var art = heroOrb.parentElement;
+    art.style.opacity = String(1 - f);
+    art.style.visibility = f >= 1 ? "hidden" : "visible";
+    art.style.transform = "translateY(" + (Math.min(y, lim) * .28) + "px)";
+    heroTitle.style.transform = "translateY(" + (Math.min(y, lim) * .16) + "px)";
+    heroTitle.style.opacity = String(1 - f * .8);
+    px = false;
+   });
+  }, { passive: true });
+ }
+
+ (function () {
+  var v = document.getElementById("orb-vid");
+  if (!v) return;
+  var art = document.querySelector(".hero-art");
+  function ready() { art.classList.add("blender-orb"); v.classList.add("ready"); }
+  if (v.readyState >= 2) ready();
+  v.addEventListener("loadeddata", ready, { once: true });
+  if (reduced) { v.removeAttribute("autoplay"); v.pause(); ready(); return; }
+  document.addEventListener("visibilitychange", function () {
+   if (document.visibilityState === "visible") { var q = v.play(); if (q && q.catch) q.catch(function () {}); }
+   else v.pause();
+  });
+ })();
+
+ var nodes = Array.prototype.slice.call(document.querySelectorAll(".rv, .wires"));
  if (reduced || !("IntersectionObserver" in window)) {
- nodes.forEach(function (n) { n.classList.add("in"); });
+  nodes.forEach(function (n) { n.classList.add("in"); n.classList.add("done"); });
  } else {
- var io = new IntersectionObserver(function (entries) {
- entries.forEach(function (e) {
- if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
- });
- }, { threshold: 0.1, rootMargin: "0px 0px -6% 0px" });
- nodes.forEach(function (n) { io.observe(n); });
+  var io = new IntersectionObserver(function (entries) {
+   entries.forEach(function (e) {
+    if (e.isIntersecting) {
+     e.target.classList.add("in");
+     (function (el) { setTimeout(function () { el.classList.add("done"); }, 1100); })(e.target);
+     io.unobserve(e.target);
+    }
+   });
+  }, { threshold: 0.1, rootMargin: "0px 0px -6% 0px" });
+  nodes.forEach(function (n) { io.observe(n); });
  }
 
  var canvas = document.getElementById("gl");
@@ -922,29 +1208,29 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
 
  var vs = "attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}";
  var fs = [
- "precision highp float;",
- "uniform vec2 r; uniform float t;",
- "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}",
- "float noise(vec2 p){vec2 i=floor(p),f=fract(p);float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.));vec2 u=f*f*(3.-2.*f);return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y;}",
- "void main(){",
- " vec2 uv=(gl_FragCoord.xy-.5*r)/min(r.x,r.y);",
- " vec2 p=uv*1.15; float tt=t*.08;",
- " float n=noise(p*2.2+vec2(tt*.6,-tt*.4)); n+=.5*noise(p*4.6-vec2(tt,tt*.7)); n*=.55;",
- " vec2 g=abs(fract(p*6.5)-.5); float grid=smoothstep(.06,0.,min(g.x,g.y));",
- " float d=length(p); float rings=0.;",
- " for(float i=0.;i<4.;i++){float ph=fract(tt*.35+i*.21);float rad=.08+ph*1.15;rings+=exp(-pow((d-rad)*28.,2.))*(1.-ph);}",
- " float nodes=0.;",
- " for(float i=0.;i<12.;i++){float a=i*2.399963;vec2 o=vec2(cos(a+tt*.2),sin(a-tt*.15))*(.18+.05*sin(tt+i));nodes+=exp(-dot(p-o,p-o)*420.);}",
- " vec3 bg=vec3(0.043,0.063,0.094);",
- " vec3 blue=vec3(0.486,0.769,1.0);",
- " vec3 cool=vec3(0.655,0.847,1.0);",
- " vec3 col=bg;",
- " col+=blue*(n*.2); col+=blue*grid*.05;",
- " col+=mix(blue,cool,.35)*rings*.22; col+=blue*nodes*.5;",
- " col+=blue*exp(-d*d*1.8)*.08;",
- " float vig=pow(max(1.-dot(uv*.72,uv*.72),0.),1.55);",
- " col*=vig; gl_FragColor=vec4(col,1.);",
- "}"
+  "precision highp float;",
+  "uniform vec2 r; uniform float t;",
+  "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}",
+  "float noise(vec2 p){vec2 i=floor(p),f=fract(p);float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.));vec2 u=f*f*(3.-2.*f);return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y;}",
+  "void main(){",
+  " vec2 uv=(gl_FragCoord.xy-.5*r)/min(r.x,r.y);",
+  " vec2 p=uv*1.15; float tt=t*.08;",
+  " float n=noise(p*2.2+vec2(tt*.6,-tt*.4)); n+=.5*noise(p*4.6-vec2(tt,tt*.7)); n*=.55;",
+  " vec2 g=abs(fract(p*6.5)-.5); float grid=smoothstep(.06,0.,min(g.x,g.y));",
+  " float d=length(p); float rings=0.;",
+  " for(float i=0.;i<4.;i++){float ph=fract(tt*.35+i*.21);float rad=.08+ph*1.15;rings+=exp(-pow((d-rad)*28.,2.))*(1.-ph);}",
+  " float nodes=0.;",
+  " for(float i=0.;i<12.;i++){float a=i*2.399963;vec2 o=vec2(cos(a+tt*.2),sin(a-tt*.15))*(.18+.05*sin(tt+i));nodes+=exp(-dot(p-o,p-o)*420.);}",
+  " vec3 bg=vec3(0.043,0.063,0.094);",
+  " vec3 blue=vec3(0.486,0.769,1.0);",
+  " vec3 cool=vec3(0.655,0.847,1.0);",
+  " vec3 col=bg;",
+  " col+=blue*(n*.2); col+=blue*grid*.05;",
+  " col+=mix(blue,cool,.35)*rings*.22; col+=blue*nodes*.5;",
+  " col+=blue*exp(-d*d*1.8)*.08;",
+  " float vig=pow(max(1.-dot(uv*.72,uv*.72),0.),1.55);",
+  " col*=vig; gl_FragColor=vec4(col,1.);",
+  "}"
  ].join("\n");
 
  function compile(type, src){var s=gl.createShader(type);gl.shaderSource(s,src);gl.compileShader(s);return s;}
@@ -958,17 +1244,17 @@ footer{margin-top:clamp(72px,12vh,120px);border-top:1px solid var(--line);paddin
  var uR=gl.getUniformLocation(prog,"r"), uT=gl.getUniformLocation(prog,"t");
  var running=true;
  function resize(){
- var dpr=Math.min(window.devicePixelRatio||1,1.5);
- var w=Math.floor(canvas.clientWidth*dpr), h=Math.floor(canvas.clientHeight*dpr);
- if(canvas.width!==w||canvas.height!==h){canvas.width=w;canvas.height=h;gl.viewport(0,0,w,h);}
+  var dpr=Math.min(window.devicePixelRatio||1,1.5);
+  var w=Math.floor(canvas.clientWidth*dpr), h=Math.floor(canvas.clientHeight*dpr);
+  if(canvas.width!==w||canvas.height!==h){canvas.width=w;canvas.height=h;gl.viewport(0,0,w,h);}
  }
  function frame(now){
- if(!running) return;
- resize();
- gl.uniform2f(uR,canvas.width,canvas.height);
- gl.uniform1f(uT,now*0.001);
- gl.drawArrays(gl.TRIANGLES,0,3);
- requestAnimationFrame(frame);
+  if(!running) return;
+  resize();
+  gl.uniform2f(uR,canvas.width,canvas.height);
+  gl.uniform1f(uT,now*0.001);
+  gl.drawArrays(gl.TRIANGLES,0,3);
+  requestAnimationFrame(frame);
  }
  function fit(){canvas.style.width="100%";canvas.style.height="100%";resize();}
  fit();