.optics-observable{z-index:20;&.movable{cursor:pointer}svg{stroke:white;fill:#fd5a5a;stroke-width:3px}}.optics-observer{z-index:30;border:3px solid white;background-color:var(--color-observer);border-radius:12px;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:box-shadow .2s,transform .2s;&.movable{cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.14)}&.is-dragging{cursor:-webkit-grabbing;cursor:grabbing;box-shadow:0 2px 4px rgba(0,0,0,.45);transform:scale(1.01);& svg{animation:none;transition:transform .8s;transform:translateX(0)}}& svg{transition:transform .8s;animation:eye-movement 8s ease-in-out infinite}}@keyframes eye-movement{0%,to{transform:translateX(-5px)}15%,30%{transform:translateX(-5px)}40%,60%{transform:translateX(0)}70%,85%{transform:translateX(5px)}}.optics-reflection{opacity:50%}.optics-reflection-observer{background-color:var(--color-observer);border-radius:12px}.optics-reflection-observable{fill:#fd5a5a;stroke-width:0px}.optics-vertical-mirror{z-index:10;background-color:var(--color-mirror);border-radius:12px}.mirror-lab{position:relative;overflow:hidden;background-color:white;background-image:url(/dot-grid.png);background-size:200px;border:2px solid var(--color-light-gray);border-radius:10px;box-shadow:0 2px 0 rgba(149,149,149,.5),inset 0 0 10px #a6a6a626;&:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgb(255,215,97);opacity:.04}}