/* SNATCH mini app — monochrome silver redesign overlay (v1, 2026-10-15)
   Pure additive layer on top of the existing build. Remove the <link>/<script> to roll back. */
html.rx{--rx-bg:#050506;--rx-line:rgba(255,255,255,.09);--rx-txt:#ececee;--rx-mut:#8b8b93;
 --rx-chrome:linear-gradient(110deg,#7d7d84 0%,#f6f6f8 22%,#9c9ca3 38%,#ffffff 52%,#8e8e95 66%,#e9e9ec 82%,#76767c 100%);
 --rx-ease:cubic-bezier(.2,.8,.2,1)}
html.rx body{background:var(--rx-bg)}
/* ambient background: slow drifting metal fog + fine grain */
html.rx #root>div>div.fixed.inset-0.-z-10{background:radial-gradient(120% 70% at 50% -10%,#1a1a1d 0%,#050506 60%)}
html.rx #root>div>div.fixed.inset-0.-z-10>div.rounded-full{animation:rx-drift 18s ease-in-out infinite alternate;background:radial-gradient(circle,rgba(220,220,230,.10),transparent 70%)!important}
html.rx #root>div>div.fixed.inset-0.-z-10>div.rounded-full:nth-of-type(3){animation-duration:23s;animation-direction:alternate-reverse}
@keyframes rx-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(40px,60px,0) scale(1.15)}}
html.rx #root::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}

/* header */
html.rx header>button:first-child{background:var(--rx-chrome);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rx-liquid 7s linear infinite}
html.rx header .rounded-full.border{border-color:rgba(255,255,255,.14);background:rgba(18,18,20,.6);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* hero title: liquid chrome */
html.rx main h1{position:relative}
html.rx main h1 span.inline-block{background:var(--rx-chrome);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
 animation:rx-liquid 6s linear infinite;filter:drop-shadow(0 6px 22px rgba(255,255,255,.08))}
html.rx main h1 span.inline-block:nth-child(2){animation-delay:-.4s}html.rx main h1 span.inline-block:nth-child(3){animation-delay:-.8s}
html.rx main h1 span.inline-block:nth-child(4){animation-delay:-1.2s}html.rx main h1 span.inline-block:nth-child(5){animation-delay:-1.6s}
html.rx main h1 span.inline-block:nth-child(6){animation-delay:-2s}
@keyframes rx-liquid{0%{background-position:0% 50%}100%{background-position:300% 50%}}
html.rx main h2{background:linear-gradient(180deg,#fff 0%,#b9b9c0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* radar canvas injected into hero (replaces the orbit icon visually) */
.rx-radar{position:absolute;pointer-events:none;z-index:0}
html.rx .rx-orbit>*:not(.rx-radar){opacity:0;transition:opacity .6s}  /* hide old orbit, keep it in DOM */
html.rx .rx-orbit{overflow:visible}
.rx-radar-chip{position:absolute;display:flex;align-items:center;white-space:nowrap;font:600 10px/1 Geist,system-ui;letter-spacing:.18em;color:#cfcfd4;text-transform:uppercase;
 padding:6px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(10,10,12,.7);backdrop-filter:blur(8px)}
.rx-radar-chip i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:6px;box-shadow:0 0 8px #fff;animation:rx-pulse 1.6s infinite}
@keyframes rx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

/* glass cards: animated chrome rim + tilt */
html.rx .liquid-glass{position:relative;background:linear-gradient(160deg,rgba(28,28,31,.78),rgba(10,10,12,.82))!important;
 border:1px solid transparent!important;backdrop-filter:blur(18px);transform-style:preserve-3d;
 transition:transform .5s var(--rx-ease),box-shadow .5s var(--rx-ease);box-shadow:0 20px 50px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
html.rx .liquid-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:conic-gradient(from var(--rx-a,0deg),rgba(255,255,255,.05),rgba(255,255,255,.55) 12%,rgba(255,255,255,.05) 24%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.35) 72%,rgba(255,255,255,.05) 84%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rx-rim 9s linear infinite}
@property --rx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rx-rim{to{--rx-a:360deg}}
html.rx .liquid-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.09),transparent 60%)}

/* primary buttons: polished chrome with sheen sweep */
html.rx button.bg-foreground,html.rx button.bg-primary{background:linear-gradient(180deg,#ffffff 0%,#d9d9de 45%,#a9a9b1 100%)!important;color:#0a0a0b!important;
 box-shadow:0 10px 30px -8px rgba(255,255,255,.25),inset 0 1px 0 #fff,inset 0 -2px 6px rgba(0,0,0,.18);position:relative;overflow:hidden;isolation:isolate}
html.rx button.bg-foreground::after,html.rx button.bg-primary::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
 background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%);transform:translateX(-120%);animation:rx-sheen 4.2s var(--rx-ease) infinite}
@keyframes rx-sheen{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
html.rx button.border:not(.bg-primary):not(.bg-foreground){border-color:rgba(255,255,255,.18)!important;background:rgba(14,14,16,.6)!important;backdrop-filter:blur(10px)}

/* haptic-like press: squash + ripple */
html.rx button{transition:transform .35s var(--rx-ease),filter .3s}
html.rx button.rx-press{transform:scale(.94);filter:brightness(1.12);transition-duration:.08s}
.rx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
 transform:translate(-50%,-50%) scale(0);animation:rx-ripple .6s var(--rx-ease) forwards;z-index:5}
@keyframes rx-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* bottom nav: floating glass with sliding chrome pill */
html.rx nav.fixed>div{background:rgba(12,12,14,.72)!important;border-color:rgba(255,255,255,.12)!important;backdrop-filter:blur(22px) saturate(140%);position:relative}
html.rx nav.fixed button.bg-foreground{background:transparent!important;box-shadow:none;color:#0a0a0b!important;z-index:1}
html.rx nav.fixed button.bg-foreground::after{display:none}
.rx-pill{position:absolute;top:6px;bottom:6px;border-radius:18px;z-index:0;pointer-events:none;
 background:linear-gradient(180deg,#fff,#c9c9cf 55%,#9a9aa2);box-shadow:0 6px 20px -4px rgba(255,255,255,.35),inset 0 1px 0 #fff;
 transition:left .55s cubic-bezier(.3,1.4,.4,1),width .55s cubic-bezier(.3,1.4,.4,1)}
html.rx nav.fixed button{position:relative;z-index:1}

/* staggered entrances */
html.rx .rx-reveal{opacity:0;transform:translate3d(0,26px,0) scale(.98);filter:blur(6px)}
html.rx .rx-reveal.rx-in{opacity:1;transform:none;filter:none;transition:opacity .8s var(--rx-ease),transform .9s var(--rx-ease),filter .8s var(--rx-ease);transition-delay:var(--rx-d,0ms)}
/* list quotes: silver bar that draws in */
html.rx main ul>li.border-l{border-left-color:transparent!important;position:relative}
html.rx main ul>li.border-l::before{content:"";position:absolute;left:0;top:0;width:1px;height:0;background:linear-gradient(#fff,rgba(255,255,255,.1));transition:height 1s var(--rx-ease) .2s}
html.rx main ul>li.border-l.rx-in::before{height:100%}
/* step numbers */
html.rx #guide .rounded-full,html.rx section [class*="size-8"],html.rx section [class*="size-9"]{background:var(--rx-chrome);background-size:200% 100%;color:#0a0a0b}

@media (prefers-reduced-motion: reduce){
 html.rx *,html.rx *::before,html.rx *::after{animation:none!important;transition:none!important}
 html.rx .rx-reveal{opacity:1;transform:none;filter:none}
 html.rx main ul>li.border-l::before{height:100%}
}